@tiptap/vue-2 3.0.0 → 3.0.1

package/src/VueNodeViewRenderer.ts

@@ -1,18 +1,12 @@
-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 type { DecorationWithType, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
+import { NodeView } from '@tiptap/core'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import Vue from 'vue'
-import { VueConstructor } from 'vue/types/umd'
+import type { VueConstructor } from 'vue/types/umd'
 import { booleanProp, functionProp, objectProp } from 'vue-ts-types'
 
-import { Editor } from './Editor.js'
+import type { Editor } from './Editor.js'
 import { VueRenderer } from './VueRenderer.js'
 
 export const nodeViewProps = {
@@ -30,9 +24,11 @@ export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
     | ((props: {
         oldNode: ProseMirrorNode
-        oldDecorations: Decoration[]
+        oldDecorations: readonly Decoration[]
+        oldInnerDecorations: DecorationSource
         newNode: ProseMirrorNode
-        newDecorations: Decoration[]
+        newDecorations: readonly Decoration[]
+        innerDecorations: DecorationSource
         updateProps: () => void
       }) => boolean)
     | null
@@ -46,16 +42,19 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
   }
 
   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)
 
@@ -76,12 +75,19 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
       },
     })
 
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+
     this.renderer = new VueRenderer(Component, {
       parent: this.editor.contentComponent,
       propsData: props,
     })
   }
 
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
@@ -90,18 +96,51 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     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
     }
 
-    const contentElement = this.dom.querySelector('[data-node-view-content]')
+    return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null
+  }
 
-    return (contentElement || this.dom) as HTMLElement | null
+  /**
+   * 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.ref.$props.selected) {
+        return
+      }
+
+      this.selectNode()
+    } else {
+      if (!this.renderer.ref.$props.selected) {
+        return
+      }
+
+      this.deselectNode()
+    }
   }
 
-  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
-    const updateProps = (props?: Record<string, any>) => {
+  /**
+   * 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)
     }
@@ -109,16 +148,20 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     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 }),
       })
     }
 
@@ -126,18 +169,23 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
       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,
@@ -145,6 +193,10 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     this.renderer.element.classList.add('ProseMirror-selectednode')
   }
 
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   deselectNode() {
     this.renderer.updateProps({
       selected: false,
@@ -164,6 +216,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
 
   destroy() {
     this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
   }
 }
 
@@ -171,14 +224,14 @@ export function VueNodeViewRenderer(
   component: Vue | VueConstructor,
   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
     }
 
-    return new VueNodeView(component, props, options) as unknown as ProseMirrorNodeView
+    return new VueNodeView(component, props, options)
   }
 }

package/src/VueRenderer.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { VueConstructor } from 'vue/types/umd'
+import type { VueConstructor } from 'vue/types/umd'
 
 /**
  * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.
@@ -8,7 +8,7 @@ export class VueRenderer {
   ref!: Vue
 
   constructor(component: Vue | VueConstructor, props: any) {
-    const Component = (typeof component === 'function') ? component : Vue.extend(component)
+    const Component = typeof component === 'function' ? component : Vue.extend(component)
 
     this.ref = new Component(props).$mount()
   }
@@ -29,11 +29,9 @@ export class VueRenderer {
 
     currentVueConstructor.config.silent = true
 
-    Object
-      .entries(props)
-      .forEach(([key, value]) => {
-        this.ref.$props[key] = value
-      })
+    Object.entries(props).forEach(([key, value]) => {
+      this.ref.$props[key] = value
+    })
 
     currentVueConstructor.config.silent = originalSilent
   }

package/src/index.ts

@@ -1,7 +1,5 @@
-export * from './BubbleMenu.js'
 export { Editor } from './Editor.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './VueNodeViewRenderer.js'

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,85 @@
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import type { Component, CreateElement, PropType } from 'vue'
+import type Vue from 'vue'
+
+export interface BubbleMenuInterface extends Vue {
+  pluginKey: BubbleMenuPluginProps['pluginKey']
+  editor: BubbleMenuPluginProps['editor']
+  updateDelay: BubbleMenuPluginProps['updateDelay']
+  resizeDelay: BubbleMenuPluginProps['resizeDelay']
+  shouldShow: BubbleMenuPluginProps['shouldShow']
+  options: BubbleMenuPluginProps['options']
+}
+
+export const BubbleMenu: Component = {
+  name: 'BubbleMenu',
+
+  props: {
+    pluginKey: {
+      type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
+      default: 'bubbleMenu',
+    },
+
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+    },
+
+    options: {
+      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      default: {},
+    },
+
+    resizeDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {
+        if (!editor) {
+          return
+        }
+
+        ;(this.$el as HTMLElement).style.visibility = 'hidden'
+        ;(this.$el as HTMLElement).style.position = 'absolute'
+
+        this.$el.remove()
+
+        this.$nextTick(() => {
+          editor.registerPlugin(
+            BubbleMenuPlugin({
+              updateDelay: this.updateDelay,
+              resizeDelay: this.resizeDelay,
+              options: this.options,
+              editor,
+              element: this.$el as HTMLElement,
+              pluginKey: this.pluginKey,
+              shouldShow: this.shouldShow,
+            }),
+          )
+        })
+      },
+    },
+  },
+
+  render(this: BubbleMenuInterface, createElement: CreateElement) {
+    return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
+  },
+
+  beforeDestroy(this: BubbleMenuInterface) {
+    this.editor.unregisterPlugin(this.pluginKey)
+  },
+}

package/src/{FloatingMenu.ts → menus/FloatingMenu.ts}

@@ -1,11 +1,13 @@
-import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import Vue, { Component, CreateElement, PropType } from 'vue'
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import type { Component, CreateElement, PropType } from 'vue'
+import type Vue from 'vue'
 
 export interface FloatingMenuInterface extends Vue {
-  pluginKey: FloatingMenuPluginProps['pluginKey'],
-  tippyOptions: FloatingMenuPluginProps['tippyOptions'],
-  editor: FloatingMenuPluginProps['editor'],
-  shouldShow: FloatingMenuPluginProps['shouldShow'],
+  pluginKey: FloatingMenuPluginProps['pluginKey']
+  options: FloatingMenuPluginProps['options']
+  editor: FloatingMenuPluginProps['editor']
+  shouldShow: FloatingMenuPluginProps['shouldShow']
 }
 
 export const FloatingMenu: Component = {
@@ -22,8 +24,8 @@ export const FloatingMenu: Component = {
       required: true,
     },
 
-    tippyOptions: {
-      type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
+    options: {
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
       default: () => ({}),
     },
 
@@ -41,14 +43,21 @@ export const FloatingMenu: Component = {
           return
         }
 
+        ;(this.$el as HTMLElement).style.visibility = 'hidden'
+        ;(this.$el as HTMLElement).style.position = 'absolute'
+
+        this.$el.remove()
+
         this.$nextTick(() => {
-          editor.registerPlugin(FloatingMenuPlugin({
-            pluginKey: this.pluginKey,
-            editor,
-            element: this.$el as HTMLElement,
-            tippyOptions: this.tippyOptions,
-            shouldShow: this.shouldShow,
-          }))
+          editor.registerPlugin(
+            FloatingMenuPlugin({
+              pluginKey: this.pluginKey,
+              editor,
+              element: this.$el as HTMLElement,
+              options: this.options,
+              shouldShow: this.shouldShow,
+            }),
+          )
         })
       },
     },

package/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'