From 651e6911e3ea5407df6a48783ee16733e0a4f474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 26 Jul 2021 18:44:02 +0200
Subject: [PATCH] feat: add ignoreMutation option to NodeViewRenderer, fix
 #1538

---
 packages/core/src/NodeView.ts                | 5 +++++
 packages/core/src/types.ts                   | 1 +
 packages/react/src/ReactNodeViewRenderer.tsx | 3 ++-
 packages/vue-2/src/VueNodeViewRenderer.ts    | 1 +
 packages/vue-3/src/VueNodeViewRenderer.ts    | 3 ++-
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts
index 306478ec9af..c0e6d4b12c9 100644
--- a/packages/core/src/NodeView.ts
+++ b/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) {
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 806dffc2f4f..0bdde22599a 100644
--- a/packages/core/src/types.ts
+++ b/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 = {
diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
index b38a9eff975..1b11af87206 100644
--- a/packages/react/src/ReactNodeViewRenderer.tsx
+++ b/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> {
diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
index f9f9dac90e8..8a0bcf8cff2 100644
--- a/packages/vue-2/src/VueNodeViewRenderer.ts
+++ b/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> {
diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
index d955fda9a28..856896eae6a 100644
--- a/packages/vue-3/src/VueNodeViewRenderer.ts
+++ b/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> {