@tiptap/vue-3 3.0.0-next.1 → 3.0.0-next.3

package/src/VueNodeViewRenderer.ts

@@ -1,20 +1,15 @@
+/* eslint-disable no-underscore-dangle */
 import {
   DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererOptions,
-  NodeViewRendererProps,
 } from '@tiptap/core'
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import {
-  Component,
-  defineComponent,
-  PropType,
-  provide,
-  Ref,
-  ref,
+  Component, defineComponent, PropType, provide, Ref, ref,
 } from 'vue'
 
 import { Editor } from './Editor.js'
@@ -58,13 +53,15 @@ export const nodeViewProps = {
 export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
     | ((props: {
-        oldNode: ProseMirrorNode
-        oldDecorations: Decoration[]
-        newNode: ProseMirrorNode
-        newDecorations: Decoration[]
-        updateProps: () => void
+        oldNode: ProseMirrorNode;
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
+        newNode: ProseMirrorNode;
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
+        updateProps: () => void;
       }) => boolean)
-    | null
+    | null;
 }
 
 class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
@@ -73,16 +70,19 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
   decorationClasses!: Ref<string>
 
   mount() {
-    const props: NodeViewProps = {
+    const props = {
       editor: this.editor,
       node: this.node,
-      decorations: this.decorations,
+      decorations: this.decorations as DecorationWithType[],
+      innerDecorations: this.innerDecorations,
+      view: this.view,
       selected: false,
       extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode(),
-    }
+    } satisfies NodeViewProps
 
     const onDragStart = this.onDragStart.bind(this)
 
@@ -117,12 +117,19 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       __file: this.component.__file,
     })
 
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+
     this.renderer = new VueRenderer(extendedComponent, {
       editor: this.editor,
       props,
     })
   }
 
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     if (!this.renderer.element || !this.renderer.element.hasAttribute('data-node-view-wrapper')) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
@@ -131,6 +138,10 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     return this.renderer.element as HTMLElement
   }
 
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
   get contentDOM() {
     if (this.node.isLeaf) {
       return null
@@ -139,8 +150,43 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null
   }
 
-  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
-    const updateProps = (props?: Record<string, any>) => {
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    const { from, to } = this.editor.state.selection
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
+
+    if (from <= pos && to >= pos + this.node.nodeSize) {
+      if (this.renderer.props.selected) {
+        return
+      }
+
+      this.selectNode()
+    } else {
+      if (!this.renderer.props.selected) {
+        return
+      }
+
+      this.deselectNode()
+    }
+  }
+
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(
+    node: ProseMirrorNode,
+    decorations: readonly Decoration[],
+    innerDecorations: DecorationSource,
+  ): boolean {
+    const rerenderComponent = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)
     }
@@ -148,16 +194,20 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     if (typeof this.options.update === 'function') {
       const oldNode = this.node
       const oldDecorations = this.decorations
+      const oldInnerDecorations = this.innerDecorations
 
       this.node = node
       this.decorations = decorations
+      this.innerDecorations = innerDecorations
 
       return this.options.update({
         oldNode,
         oldDecorations,
         newNode: node,
         newDecorations: decorations,
-        updateProps: () => updateProps({ node, decorations }),
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),
       })
     }
 
@@ -165,18 +215,23 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       return false
     }
 
-    if (node === this.node && this.decorations === decorations) {
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
       return true
     }
 
     this.node = node
     this.decorations = decorations
+    this.innerDecorations = innerDecorations
 
-    updateProps({ node, decorations })
+    rerenderComponent({ node, decorations, innerDecorations })
 
     return true
   }
 
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   selectNode() {
     this.renderer.updateProps({
       selected: true,
@@ -186,6 +241,10 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     }
   }
 
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   deselectNode() {
     this.renderer.updateProps({
       selected: false,
@@ -207,26 +266,26 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
 
   destroy() {
     this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
   }
 }
 
 export function VueNodeViewRenderer(
-  component: Component,
+  component: Component<NodeViewProps>,
   options?: Partial<VueNodeViewRendererOptions>,
 ): NodeViewRenderer {
-  return (props: NodeViewRendererProps) => {
+  return props => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
     // maybe it’s `undefined` because <editor-content> isn’t rendered yet
     if (!(props.editor as Editor).contentComponent) {
-      return {}
+      return {} as unknown as ProseMirrorNodeView
     }
     // check for class-component and normalize if neccessary
     const normalizedComponent = typeof component === 'function' && '__vccOpts' in component
-      // eslint-disable-next-line no-underscore-dangle
-      ? component.__vccOpts as Component
+      ? (component.__vccOpts as Component)
       : component
 
-    return new VueNodeView(normalizedComponent, props, options) as unknown as ProseMirrorNodeView
+    return new VueNodeView(normalizedComponent, props, options)
   }
 }

package/src/useEditor.ts

@@ -11,6 +11,12 @@ export const useEditor = (options: Partial<EditorOptions> = {}) => {
   })
 
   onBeforeUnmount(() => {
+    // Cloning root node (and its children) to avoid content being lost by destroy
+    const nodes = editor.value?.options.element
+    const newEl = nodes?.cloneNode(true) as HTMLElement
+
+    nodes?.parentNode?.replaceChild(newEl, nodes)
+
     editor.value?.destroy()
   })