feat!: provide more context to update function of node views, fix #1611

* add more powerful update option to node views

* add object params for all node view option props

packages/core/src/NodeView.ts

@@ -6,12 +6,18 @@ import { Node } from './Node'
 import isiOS from './utilities/isiOS'
 import { NodeViewRendererProps, NodeViewRendererOptions } from './types'
 
-export class NodeView<Component, Editor extends CoreEditor = CoreEditor> implements ProseMirrorNodeView {
+export class NodeView<
+  Component,
+  Editor extends CoreEditor = CoreEditor,
+  Options extends NodeViewRendererOptions = NodeViewRendererOptions,
+> implements ProseMirrorNodeView {
 
   component: Component
 
   editor: Editor
 
+  options: Options
+
   extension: Node
 
   node: ProseMirrorNode
@@ -22,16 +28,14 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
 
   isDragging = false
 
-  options: NodeViewRendererOptions = {
+  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
-    stopEvent: null,
-    update: null,
-    ignoreMutation: null,
-  }
-
-  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<NodeViewRendererOptions>) {
     this.component = component
-    this.options = { ...this.options, ...options }
     this.editor = props.editor as Editor
+    this.options = {
+      stopEvent: null,
+      ignoreMutation: null,
+      ...options,
+    } as Options
     this.extension = props.extension
     this.node = props.node
     this.decorations = props.decorations
@@ -98,7 +102,7 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     }
 
     if (typeof this.options.stopEvent === 'function') {
-      return this.options.stopEvent(event)
+      return this.options.stopEvent({ event })
     }
 
     const target = (event.target as HTMLElement)
@@ -178,7 +182,7 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     }
 
     if (typeof this.options.ignoreMutation === 'function') {
-      return this.options.ignoreMutation(mutation)
+      return this.options.ignoreMutation({ mutation })
     }
 
     // a leaf/atom node is like a black box for ProseMirror

packages/core/src/types.ts

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

packages/react/src/ReactNodeViewRenderer.tsx

@@ -4,6 +4,7 @@ import {
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererProps,
+  NodeViewRendererOptions,
 } from '@tiptap/core'
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
@@ -11,13 +12,17 @@ import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 import { ReactNodeViewContext } from './useReactNodeView'
 
-export interface ReactNodeViewRendererOptions {
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
+  update: ((props: {
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+    oldNode: ProseMirrorNode,
-  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
+    oldDecorations: Decoration[],
+    newNode: ProseMirrorNode,
+    newDecorations: Decoration[],
+    updateProps: () => void,
+  }) => boolean) | null,
 }
 
-class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
+class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeViewRendererOptions> {
 
   renderer!: ReactRenderer
 
@@ -110,8 +115,25 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.renderer.updateProps(props)
+      this.maybeMoveContentDOM()
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps,
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -124,8 +146,8 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.renderer.updateProps({ node, decorations })
+
-    this.maybeMoveContentDOM()
+    updateProps()
 
     return true
   }

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -3,6 +3,7 @@ import {
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererProps,
+  NodeViewRendererOptions,
 } from '@tiptap/core'
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
@@ -46,13 +47,17 @@ export const nodeViewProps = {
   },
 }
 
-export interface VueNodeViewRendererOptions {
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
+  update: ((props: {
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+    oldNode: ProseMirrorNode,
-  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
+    oldDecorations: Decoration[],
+    newNode: ProseMirrorNode,
+    newDecorations: Decoration[],
+    updateProps: () => void,
+  }) => boolean) | null,
 }
 
-class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
+class VueNodeView extends NodeView<(Vue | VueConstructor), Editor, VueNodeViewRendererOptions> {
 
   renderer!: VueRenderer
 
@@ -115,8 +120,25 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.decorationClasses.value = this.getDecorationClasses()
+      this.renderer.updateProps(props)
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps,
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -129,8 +151,8 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.decorationClasses.value = this.getDecorationClasses()
+
-    this.renderer.updateProps({ node, decorations })
+    updateProps()
 
     return true
   }

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -3,6 +3,7 @@ import {
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererProps,
+  NodeViewRendererOptions,
 } from '@tiptap/core'
 import {
   ref,
@@ -52,13 +53,17 @@ export const nodeViewProps = {
   },
 }
 
-export interface VueNodeViewRendererOptions {
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
+  update: ((props: {
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+    oldNode: ProseMirrorNode,
-  ignoreMutation: ((mutation: MutationRecord | { type: 'selection', target: Element }) => boolean) | null,
+    oldDecorations: Decoration[],
+    newNode: ProseMirrorNode,
+    newDecorations: Decoration[],
+    updateProps: () => void,
+  }) => boolean) | null,
 }
 
-class VueNodeView extends NodeView<Component, Editor> {
+class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
 
   renderer!: VueRenderer
 
@@ -116,8 +121,25 @@ class VueNodeView extends NodeView<Component, Editor> {
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.decorationClasses.value = this.getDecorationClasses()
+      this.renderer.updateProps(props)
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps,
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -130,8 +152,8 @@ class VueNodeView extends NodeView<Component, Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.decorationClasses.value = this.getDecorationClasses()
+
-    this.renderer.updateProps({ node, decorations })
+    updateProps()
 
     return true
   }