diff --git a/docs/src/docPages/guide/node-views/react.md b/docs/src/docPages/guide/node-views/react.md index 79fecb59..72f6008f 100644 --- 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 index 3f89f635..bad289d3 100644 --- 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, + }, }, } diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts index 3f72bb2a..d420b994 100644 --- a/packages/core/src/NodeView.ts +++ b/packages/core/src/NodeView.ts @@ -238,4 +238,10 @@ export class NodeView 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 index d97ec291..0551b7ad 100644 --- 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) => void, + deleteNode: () => void, } export type NodeViewRendererProps = { diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index dab20712..038ba024 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -31,6 +31,7 @@ class ReactNodeView extends NodeView { 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 index 210e1257..f9f9dac9 100644 --- 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, required: true, }, + deleteNode: { + type: Function as PropType, + 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 index aa1ed6e3..d955fda9 100644 --- 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, required: true, }, + deleteNode: { + type: Function as PropType, + required: true, + }, } interface VueNodeViewRendererOptions { @@ -68,6 +72,7 @@ class VueNodeView extends NodeView { extension: this.extension, getPos: () => this.getPos(), updateAttributes: (attributes = {}) => this.updateAttributes(attributes), + deleteNode: () => this.deleteNode(), } const onDragStart = this.onDragStart.bind(this)