chore: allow new ReactComponentContent components to be created (#3782)

* chore: allow users to create new react nodeview editor content components * style: remove trailing spaces
ueberdosis · Feb 27, 2023 · acf186d · acf186d
1 parent 0300630
commit acf186d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js b/demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js
@@ -18,6 +18,14 @@ export default Node.create({
     ]
   },
 
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Enter': () => {
+        return this.editor.chain().insertContentAt(this.editor.state.selection.head, { type: this.type.name }).focus().run()
+      },
+    }
+  },
+
   renderHTML({ HTMLAttributes }) {
     return ['react-component', mergeAttributes(HTMLAttributes), 0]
   },

diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx b/demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx
@@ -17,7 +17,7 @@ export default () => {
       This is still the text editor you’re used to, but enriched with node views.
     </p>
     <react-component>
-      <p>This is editable.</p>
+      <p>This is editable. You can create a new component by pressing Mod+Enter.</p>
     </react-component>
     <p>
       Did you see that? That’s a React component. We are really living in the future.