feat: add deleteNode method to node views

ueberdosis · May 18, 2021 · fcee5f8 · fcee5f8
1 parent 0f299d2
commit fcee5f8
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 0 deletions.
diff --git a/docs/src/docPages/guide/node-views/react.md b/docs/src/docPages/guide/node-views/react.md
@@ -106,6 +106,7 @@ Here is the full list of what props you can expect:
 | `extension`        | Access to the node extension, for example to get options |
 | `getPos`           | Get the document position of the current node            |
 | `updateAttributes` | Update attributes of the current node                    |
+| `deleteNode`       | Delete the current node                                  |
 
 ## Dragging
 To make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle.

diff --git a/docs/src/docPages/guide/node-views/vue.md b/docs/src/docPages/guide/node-views/vue.md
@@ -167,6 +167,11 @@ export default {
     updateAttributes: {
       type: Function,
     },
+
+    // delete the current node
+    deleteNode: {
+      type: Function,
+    },
   },
 }
 </script>

diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts
@@ -238,4 +238,10 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     this.editor.view.dispatch(transaction)
   }
 
+  deleteNode(): void {
+    const from = this.getPos()
+    const to = from + this.node.nodeSize
+
+    this.editor.commands.deleteRange({ from, to })
+  }
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -142,6 +142,7 @@ export type NodeViewProps = {
   extension: Node,
   getPos: () => number,
   updateAttributes: (attributes: Record<string, any>) => void,
+  deleteNode: () => void,
 }
 
 export type NodeViewRendererProps = {

diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
@@ -31,6 +31,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     if (!(this.component as any).displayName) {

diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
@@ -40,6 +40,10 @@ export const nodeViewProps = {
     type: Function as PropType<NodeViewProps['updateAttributes']>,
     required: true,
   },
+  deleteNode: {
+    type: Function as PropType<NodeViewProps['deleteNode']>,
+    required: true,
+  },
 }
 
 export interface VueNodeViewRendererOptions {
@@ -64,6 +68,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     const onDragStart = this.onDragStart.bind(this)

diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
@@ -46,6 +46,10 @@ export const nodeViewProps = {
     type: Function as PropType<NodeViewProps['updateAttributes']>,
     required: true,
   },
+  deleteNode: {
+    type: Function as PropType<NodeViewProps['deleteNode']>,
+    required: true,
+  },
 }
 
 interface VueNodeViewRendererOptions {
@@ -68,6 +72,7 @@ class VueNodeView extends NodeView<Component, Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     const onDragStart = this.onDragStart.bind(this)