chore: allow users to create new react nodeview editor content compon…

…ents
ueberdosis · Feb 23, 2023 · 3499597 · 3499597
1 parent 8bf8fd2
commit 3499597
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.