@tiptap/vue-3 3.0.0 → 3.0.2

package/src/VueNodeViewRenderer.ts

@@ -1,23 +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 {
-  Component,
-  defineComponent,
-  PropType,
-  provide,
-  Ref,
-  ref,
-} from 'vue'
-
-import { Editor } from './Editor.js'
+/* eslint-disable no-underscore-dangle */
+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 type { Component, PropType, Ref } from 'vue'
+import { defineComponent, provide, ref } from 'vue'
+
+import type { Editor } from './Editor.js'
 import { VueRenderer } from './VueRenderer.js'
 
 export const nodeViewProps = {
@@ -53,15 +42,29 @@ export const nodeViewProps = {
     type: Function as PropType<NodeViewProps['deleteNode']>,
     required: true as const,
   },
+  view: {
+    type: Object as PropType<NodeViewProps['view']>,
+    required: true as const,
+  },
+  innerDecorations: {
+    type: Object as PropType<NodeViewProps['innerDecorations']>,
+    required: true as const,
+  },
+  HTMLAttributes: {
+    type: Object as PropType<NodeViewProps['HTMLAttributes']>,
+    required: true as const,
+  },
 }
 
 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
@@ -73,16 +76,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 +123,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,18 +144,51 @@ 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
     }
 
-    const contentElement = this.dom.querySelector('[data-node-view-content]')
+    return this.dom.querySelector('[data-node-view-content]') 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.props.selected) {
+        return
+      }
 
-    return (contentElement || this.dom) as HTMLElement | null
+      this.selectNode()
+    } else {
+      if (!this.renderer.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)
     }
@@ -150,16 +196,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 }),
       })
     }
 
@@ -167,18 +217,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,
@@ -188,6 +243,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,
@@ -209,21 +268,25 @@ 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 ? (component.__vccOpts as Component) : component
 
-    return new VueNodeView(component, props, options) as unknown as ProseMirrorNodeView
+    return new VueNodeView(normalizedComponent, props, options)
   }
 }

package/src/VueRenderer.ts

@@ -1,13 +1,12 @@
-import { Editor } from '@tiptap/core'
-import {
-  Component, DefineComponent, h, markRaw, reactive, render,
-} from 'vue'
+import type { Editor } from '@tiptap/core'
+import type { Component, DefineComponent } from 'vue'
+import { h, markRaw, reactive, render } from 'vue'
 
-import { Editor as ExtendedEditor } from './Editor.js'
+import type { Editor as ExtendedEditor } from './Editor.js'
 
 export interface VueRendererOptions {
-  editor: Editor,
-  props?: Record<string, any>,
+  editor: Editor
+  props?: Record<string, any>
 }
 
 type ExtendedVNode = ReturnType<typeof h> | null
@@ -22,8 +21,6 @@ interface RenderedComponent {
  * This class is used to render Vue components inside the editor.
  */
 export class VueRenderer {
-  id: string
-
   renderedComponent!: RenderedComponent
 
   editor: ExtendedEditor
@@ -35,7 +32,6 @@ export class VueRenderer {
   props: Record<string, any>
 
   constructor(component: Component, { props = {}, editor }: VueRendererOptions) {
-    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.editor = editor as ExtendedEditor
     this.component = markRaw(component)
     this.el = document.createElement('div')
@@ -47,13 +43,29 @@ export class VueRenderer {
     return this.renderedComponent.el
   }
 
+  get ref(): any {
+    // Composition API
+    if (this.renderedComponent.vNode?.component?.exposed) {
+      return this.renderedComponent.vNode.component.exposed
+    }
+    // Option API
+    return this.renderedComponent.vNode?.component?.proxy
+  }
+
   renderComponent() {
     let vNode: ExtendedVNode = h(this.component as DefineComponent, this.props)
 
-    if (typeof document !== 'undefined' && this.el) { render(vNode, this.el) }
+    if (this.editor.appContext) {
+      vNode.appContext = this.editor.appContext
+    }
+    if (typeof document !== 'undefined' && this.el) {
+      render(vNode, this.el)
+    }
 
     const destroy = () => {
-      if (this.el) { render(null, this.el) }
+      if (this.el) {
+        render(null, this.el)
+      }
       this.el = null
       vNode = null
     }
@@ -62,12 +74,9 @@ export class VueRenderer {
   }
 
   updateProps(props: Record<string, any> = {}): void {
-
-    Object
-      .entries(props)
-      .forEach(([key, value]) => {
-        this.props[key] = value
-      })
+    Object.entries(props).forEach(([key, value]) => {
+      this.props[key] = value
+    })
     this.renderComponent()
   }
 

package/src/index.ts

@@ -1,10 +1,9 @@
-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 './useEditor.js'
+export * from './VueMarkViewRenderer.js'
 export * from './VueNodeViewRenderer.js'
 export * from './VueRenderer.js'
 export * from '@tiptap/core'

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,78 @@
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, Teleport } from 'vue'
+
+export const BubbleMenu = defineComponent({
+  name: 'BubbleMenu',
+
+  props: {
+    pluginKey: {
+      type: [String, Object] as PropType<BubbleMenuPluginProps['pluginKey']>,
+      default: 'bubbleMenu',
+    },
+
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+      default: undefined,
+    },
+
+    resizeDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,
+      default: undefined,
+    },
+
+    options: {
+      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const { editor, options, pluginKey, resizeDelay, shouldShow, updateDelay } = props
+
+      if (!root.value) {
+        return
+      }
+
+      root.value.style.visibility = 'hidden'
+      root.value.style.position = 'absolute'
+
+      // remove the element from the DOM
+      root.value.remove()
+
+      editor.registerPlugin(
+        BubbleMenuPlugin({
+          editor,
+          element: root.value as HTMLElement,
+          options,
+          pluginKey,
+          resizeDelay,
+          shouldShow,
+          updateDelay,
+        }),
+      )
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
+    })
+
+    return () => h(Teleport, { to: 'body' }, h('div', { ref: root }, slots.default?.()))
+  },
+})

package/src/menus/FloatingMenu.ts

@@ -0,0 +1,68 @@
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, Teleport } from 'vue'
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: 'floatingMenu',
+    },
+
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    options: {
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<FloatingMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const { pluginKey, editor, options, shouldShow } = props
+
+      if (!root.value) {
+        return
+      }
+
+      root.value.style.visibility = 'hidden'
+      root.value.style.position = 'absolute'
+
+      // remove the element from the DOM
+      root.value.remove()
+
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey,
+          editor,
+          element: root.value as HTMLElement,
+          options,
+          shouldShow,
+        }),
+      )
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
+    })
+
+    return () => h(Teleport, { to: 'body' }, h('div', { ref: root }, slots.default?.()))
+  },
+})

package/src/menus/index.ts

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

package/src/useEditor.ts

@@ -1,4 +1,4 @@
-import { EditorOptions } from '@tiptap/core'
+import type { EditorOptions } from '@tiptap/core'
 import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
 
 import { Editor } from './Editor.js'
@@ -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()
   })