Add custom command to node for example

Author: harbournick

examples/vue-custom-node-example/src/components/DocumentEditor.vue

@@ -66,10 +66,18 @@ const hooks = {
 
     // Let's insert our custom node into the document after the editor is ready
     editor.value?.activeEditor.commands.insertContent(`
-      <div data-node-type='customNode' data-id='some-id-123'>Custom Node Content</div>
+      <div data-node-type='customNode' id='some-id-123'>Custom Node Content</div>
     `);
 
+    // Now instead of using the generic insertContent, we can use our custom node command
+    editor.value.activeEditor.commands.insertCustomNode({
+      id: 'second-node-id',
+      content: 'Display this text!',
+    })
+
+    // Let's check our current HTML
     const html = editor.value?.activeEditor.getHTML();
+    console.debug('Editor HTML:', html);
   },
   onError: (error) => {
     emit('editor-error', error);
@@ -162,6 +170,7 @@ onUnmounted(() => {
   color: white;
   display: inline-block;
   padding: 2px 8px;
+  font-size: 12px;
 }
 .my-custom-node-default-class:hover {
   background-color: #0a3dff;

examples/vue-custom-node-example/src/plugins/MyCustomNodePlugin.js

@@ -31,16 +31,16 @@ export const myCustomNode = Extensions.Node.create({
     // Add custom node attributes here
     addAttributes() {
       return {
-        'data-id': {
+        id: {
           default: null,
 
           // The DOM attribute to be used for this node attribute
-          parseDOM: (elem) => elem.getAttribute('data-id'),
+          parseDOM: (elem) => elem.getAttribute('id'),
 
           // Tell the node how to render this attribute in the DOM
-          renderDOM: ({ 'data-id': id }) => {
+          renderDOM: ({ id }) => {
             if (!id) return {};
-            return { 'data-id': id };
+            return { id };
           },
         }
       };
@@ -57,4 +57,21 @@ export const myCustomNode = Extensions.Node.create({
     renderDOM({ htmlAttributes }) {
       return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
     },
+
+    // Add custom commands here
+    addCommands() {
+      return {
+        insertCustomNode: ({ content, id }) => ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: { id },
+
+            // Our custom node only renders placeholder text, but in theory it can render any other editor node
+            content: [
+              { type: 'text', text: content || 'Default Content' },
+            ]
+          });
+        },
+      };
+    }
   });