@tiptap/vue-2 3.23.6 → 3.25.0

package/package.json

@@ -1,17 +1,31 @@
 {
   "name": "@tiptap/vue-2",
+  "version": "3.25.0",
   "description": "Vue components for tiptap",
-  "version": "3.23.6",
-  "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
     "tiptap vue components"
   ],
+  "homepage": "https://tiptap.dev",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/vue-2"
+  },
   "funding": {
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": {
@@ -30,39 +44,24 @@
       "require": "./dist/menus/index.cjs"
     }
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
-  "files": [
-    "src",
-    "dist"
-  ],
   "dependencies": {
     "vue-ts-types": "1.6.2"
   },
   "devDependencies": {
     "vue": "^2.7.16",
-    "@tiptap/pm": "^3.23.6",
-    "@tiptap/core": "^3.23.6"
-  },
-  "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.23.6",
-    "@tiptap/extension-floating-menu": "^3.23.6"
+    "@tiptap/core": "^3.25.0",
+    "@tiptap/pm": "^3.25.0"
   },
   "peerDependencies": {
     "vue": "^2.6.0",
-    "@tiptap/core": "3.23.6",
-    "@tiptap/pm": "3.23.6"
+    "@tiptap/core": "3.25.0",
+    "@tiptap/pm": "3.25.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ueberdosis/tiptap",
-    "directory": "packages/vue-2"
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.25.0",
+    "@tiptap/extension-floating-menu": "^3.25.0"
   },
-  "sideEffects": false,
   "scripts": {
-    "build": "tsup",
-    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
+    "build": "tsup"
   }
 }

package/src/NodeViewContent.ts

@@ -13,6 +13,22 @@ export const NodeViewContent: Component = {
     },
   },
 
+  inject: {
+    nodeViewContentRef: { default: undefined },
+  },
+
+  mounted(this: any) {
+    if (this.nodeViewContentRef && this.$el) {
+      this.nodeViewContentRef(this.$el)
+    }
+  },
+
+  beforeDestroy(this: any) {
+    if (this.nodeViewContentRef) {
+      this.nodeViewContentRef(null)
+    }
+  },
+
   render(this: NodeViewContentInterface, createElement: CreateElement) {
     return createElement(this.as, {
       style: {

package/src/VueNodeViewRenderer.ts

@@ -47,6 +47,15 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     value: string
   }
 
+  /**
+   * The element that holds the rich-text content of the node.
+   * Always created for non-leaf nodes to guarantee a valid contentDOM,
+   * even when the user's component does not include a NodeViewContent.
+   * Must NOT have an initializer because class field initializers run
+   * after super() and would overwrite the value set by mount().
+   */
+  contentDOMElement!: HTMLElement | null
+
   private currentPos: number | undefined
 
   constructor(
@@ -70,6 +79,9 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     this.renderer.updateProps({ getPos: () => this.getPos() })
   }
 
+  /**
+   * Called when the node view is mounted.
+   */
   mount() {
     const props: Record<string, any> = {
       editor: this.editor,
@@ -94,7 +106,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     })
 
     // @ts-ignore
-    const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line
+    const vue = this.editor.contentComponent?.$options._base ?? Vue // oxlint-disable-line
 
     const Component = vue.extend(this.component).extend({
       props: Object.keys(props),
@@ -102,6 +114,14 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
         return {
           onDragStart,
           decorationClasses: this.decorationClasses,
+          nodeViewContentRef: (el: HTMLElement | null) => {
+            if (!this.contentDOMElement) return
+
+            if (el && el.firstChild !== this.contentDOMElement) {
+              // NodeViewContent mounted: move the contentDOMElement inside it
+              el.appendChild(this.contentDOMElement)
+            }
+          },
         }
       },
     })
@@ -111,6 +131,15 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
 
     this.currentPos = this.getPos()
 
+    if (!this.node.isLeaf) {
+      this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div')
+      this.contentDOMElement.style.whiteSpace = 'inherit'
+      // Use a distinct attribute to avoid clashing with the user's
+      // <node-view-content> element (which carries data-node-view-content).
+      // Matches React's data-node-view-content-react convention.
+      this.contentDOMElement.dataset.nodeViewContentVue = ''
+    }
+
     this.renderer = new VueRenderer(Component, {
       parent: this.editor.contentComponent,
       propsData: mountProps,
@@ -138,7 +167,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
       return null
     }
 
-    return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null
+    return this.contentDOMElement
   }
 
   /**
@@ -178,7 +207,11 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
    * 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 {
+  update(
+    node: ProseMirrorNode,
+    decorations: readonly Decoration[],
+    innerDecorations: DecorationSource,
+  ): boolean {
     const rerenderComponent = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)
@@ -282,6 +315,8 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     if (this.options.trackNodeViewPosition) {
       this.editor.off('update', this.handlePositionUpdate)
     }
+
+    this.contentDOMElement = null
   }
 }
 

package/src/VueRenderer.ts

@@ -25,7 +25,7 @@ export class VueRenderer {
 
     // prevents `Avoid mutating a prop directly` error message
     // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working
-    const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line
+    const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // oxlint-disable-line
     const originalSilent = currentVueConstructor.config.silent
 
     currentVueConstructor.config.silent = true