feat: add ignoreMutation option to NodeViewRenderer, fix #1538

packages/core/src/NodeView.ts

@@ -25,6 +25,7 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
   options: NodeViewRendererOptions = {
     stopEvent: null,
     update: null,
+    ignoreMutation: null,
   }
 
   constructor(component: Component, props: NodeViewRendererProps, options?: Partial<NodeViewRendererOptions>) {
@@ -176,6 +177,10 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
       return true
     }
 
+    if (typeof this.options.ignoreMutation === 'function') {
+      return this.options.ignoreMutation(mutation)
+    }
+
     // a leaf/atom node is like a black box for ProseMirror
     // and should be fully handled by the node view
     if (this.node.isLeaf || this.node.isAtom) {

packages/core/src/types.ts

@@ -148,6 +148,7 @@ export type NodeViewProps = {
 export interface NodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
 }
 
 export type NodeViewRendererProps = {

packages/react/src/ReactNodeViewRenderer.tsx

@@ -11,9 +11,10 @@ import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 import { ReactNodeViewContext } from './useReactNodeView'
 
-interface ReactNodeViewRendererOptions {
+export interface ReactNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
 }
 
 class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -49,6 +49,7 @@ export const nodeViewProps = {
 export interface VueNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
 }
 
 class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -52,9 +52,10 @@ export const nodeViewProps = {
   },
 }
 
-interface VueNodeViewRendererOptions {
+export interface VueNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
 }
 
 class VueNodeView extends NodeView<Component, Editor> {