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

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,14 +1,18 @@
 # @tiptap/vue-3
+
 [![Version](https://img.shields.io/npm/v/@tiptap/vue-3.svg?label=version)](https://www.npmjs.com/package/@tiptap/vue-3)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/vue-3.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
 [![License](https://img.shields.io/npm/l/@tiptap/vue-3.svg)](https://www.npmjs.com/package/@tiptap/vue-3)
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
 ## Introduction
-Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
 
 ## Official Documentation
+
 Documentation can be found on the [Tiptap website](https://tiptap.dev).
 
 ## License
+
 Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -19,95 +19,28 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  BubbleMenu: () => BubbleMenu,
+var index_exports = {};
+__export(index_exports, {
   Editor: () => Editor,
   EditorContent: () => EditorContent,
-  FloatingMenu: () => FloatingMenu,
+  MarkViewContent: () => MarkViewContent,
   NodeViewContent: () => NodeViewContent,
   NodeViewWrapper: () => NodeViewWrapper,
+  VueMarkView: () => VueMarkView,
+  VueMarkViewRenderer: () => VueMarkViewRenderer,
   VueNodeViewRenderer: () => VueNodeViewRenderer,
   VueRenderer: () => VueRenderer,
+  markViewProps: () => markViewProps,
   nodeViewProps: () => nodeViewProps,
   useEditor: () => useEditor
 });
-module.exports = __toCommonJS(src_exports);
-
-// src/BubbleMenu.ts
-var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
-var import_vue = require("vue");
-var BubbleMenu = (0, import_vue.defineComponent)({
-  name: "BubbleMenu",
-  props: {
-    pluginKey: {
-      type: [String, Object],
-      default: "bubbleMenu"
-    },
-    editor: {
-      type: Object,
-      required: true
-    },
-    updateDelay: {
-      type: Number,
-      default: void 0
-    },
-    resizeDelay: {
-      type: Number,
-      default: void 0
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    shouldShow: {
-      type: Function,
-      default: null
-    }
-  },
-  setup(props, { slots }) {
-    const root = (0, import_vue.ref)(null);
-    (0, import_vue.onMounted)(() => {
-      const {
-        editor,
-        options,
-        pluginKey,
-        resizeDelay,
-        shouldShow,
-        updateDelay
-      } = props;
-      if (!root.value) {
-        return;
-      }
-      root.value.style.visibility = "hidden";
-      root.value.style.position = "absolute";
-      root.value.remove();
-      editor.registerPlugin((0, import_extension_bubble_menu.BubbleMenuPlugin)({
-        editor,
-        element: root.value,
-        options,
-        pluginKey,
-        resizeDelay,
-        shouldShow,
-        updateDelay
-      }));
-    });
-    (0, import_vue.onBeforeUnmount)(() => {
-      const { pluginKey, editor } = props;
-      editor.unregisterPlugin(pluginKey);
-    });
-    return () => {
-      var _a;
-      return (0, import_vue.h)(import_vue.Teleport, { to: "body" }, (0, import_vue.h)("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
-    };
-  }
-});
+module.exports = __toCommonJS(index_exports);
 
 // src/Editor.ts
 var import_core = require("@tiptap/core");
-var import_vue2 = require("vue");
+var import_vue = require("vue");
 function useDebouncedRef(value) {
-  return (0, import_vue2.customRef)((track, trigger) => {
+  return (0, import_vue.customRef)((track, trigger) => {
     return {
       get() {
         track();
@@ -135,7 +68,7 @@ var Editor = class extends import_core.Editor {
       this.reactiveState.value = nextState;
       this.reactiveExtensionStorage.value = this.extensionStorage;
     });
-    return (0, import_vue2.markRaw)(this);
+    return (0, import_vue.markRaw)(this);
   }
   get state() {
     return this.reactiveState ? this.reactiveState.value : this.view.state;
@@ -166,8 +99,8 @@ var Editor = class extends import_core.Editor {
 };
 
 // src/EditorContent.ts
-var import_vue3 = require("vue");
-var EditorContent = (0, import_vue3.defineComponent)({
+var import_vue2 = require("vue");
+var EditorContent = (0, import_vue2.defineComponent)({
   name: "EditorContent",
   props: {
     editor: {
@@ -176,16 +109,17 @@ var EditorContent = (0, import_vue3.defineComponent)({
     }
   },
   setup(props) {
-    const rootEl = (0, import_vue3.ref)();
-    const instance = (0, import_vue3.getCurrentInstance)();
-    (0, import_vue3.watchEffect)(() => {
+    const rootEl = (0, import_vue2.ref)();
+    const instance = (0, import_vue2.getCurrentInstance)();
+    (0, import_vue2.watchEffect)(() => {
       const editor = props.editor;
       if (editor && editor.options.element && rootEl.value) {
-        (0, import_vue3.nextTick)(() => {
-          if (!rootEl.value || !editor.options.element.firstChild) {
+        (0, import_vue2.nextTick)(() => {
+          var _a;
+          if (!rootEl.value || !((_a = editor.options.element) == null ? void 0 : _a.firstChild)) {
             return;
           }
-          const element = (0, import_vue3.unref)(rootEl.value);
+          const element = (0, import_vue2.unref)(rootEl.value);
           rootEl.value.append(...editor.options.element.childNodes);
           editor.contentComponent = instance.ctx._;
           if (instance) {
@@ -204,7 +138,7 @@ var EditorContent = (0, import_vue3.defineComponent)({
         });
       }
     });
-    (0, import_vue3.onBeforeUnmount)(() => {
+    (0, import_vue2.onBeforeUnmount)(() => {
       const editor = props.editor;
       if (!editor) {
         return;
@@ -215,79 +149,17 @@ var EditorContent = (0, import_vue3.defineComponent)({
     return { rootEl };
   },
   render() {
-    return (0, import_vue3.h)(
-      "div",
-      {
-        ref: (el) => {
-          this.rootEl = el;
-        }
-      }
-    );
-  }
-});
-
-// src/FloatingMenu.ts
-var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
-var import_vue4 = require("vue");
-var FloatingMenu = (0, import_vue4.defineComponent)({
-  name: "FloatingMenu",
-  props: {
-    pluginKey: {
-      // TODO: TypeScript breaks :(
-      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
-      type: null,
-      default: "floatingMenu"
-    },
-    editor: {
-      type: Object,
-      required: true
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    shouldShow: {
-      type: Function,
-      default: null
-    }
-  },
-  setup(props, { slots }) {
-    const root = (0, import_vue4.ref)(null);
-    (0, import_vue4.onMounted)(() => {
-      const {
-        pluginKey,
-        editor,
-        options,
-        shouldShow
-      } = props;
-      if (!root.value) {
-        return;
+    return (0, import_vue2.h)("div", {
+      ref: (el) => {
+        this.rootEl = el;
       }
-      root.value.style.visibility = "hidden";
-      root.value.style.position = "absolute";
-      root.value.remove();
-      editor.registerPlugin((0, import_extension_floating_menu.FloatingMenuPlugin)({
-        pluginKey,
-        editor,
-        element: root.value,
-        options,
-        shouldShow
-      }));
     });
-    (0, import_vue4.onBeforeUnmount)(() => {
-      const { pluginKey, editor } = props;
-      editor.unregisterPlugin(pluginKey);
-    });
-    return () => {
-      var _a;
-      return (0, import_vue4.h)(import_vue4.Teleport, { to: "body" }, (0, import_vue4.h)("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
-    };
   }
 });
 
 // src/NodeViewContent.ts
-var import_vue5 = require("vue");
-var NodeViewContent = (0, import_vue5.defineComponent)({
+var import_vue3 = require("vue");
+var NodeViewContent = (0, import_vue3.defineComponent)({
   name: "NodeViewContent",
   props: {
     as: {
@@ -296,7 +168,7 @@ var NodeViewContent = (0, import_vue5.defineComponent)({
     }
   },
   render() {
-    return (0, import_vue5.h)(this.as, {
+    return (0, import_vue3.h)(this.as, {
       style: {
         whiteSpace: "pre-wrap"
       },
@@ -306,8 +178,8 @@ var NodeViewContent = (0, import_vue5.defineComponent)({
 });
 
 // src/NodeViewWrapper.ts
-var import_vue6 = require("vue");
-var NodeViewWrapper = (0, import_vue6.defineComponent)({
+var import_vue4 = require("vue");
+var NodeViewWrapper = (0, import_vue4.defineComponent)({
   name: "NodeViewWrapper",
   props: {
     as: {
@@ -318,7 +190,7 @@ var NodeViewWrapper = (0, import_vue6.defineComponent)({
   inject: ["onDragStart", "decorationClasses"],
   render() {
     var _a, _b;
-    return (0, import_vue6.h)(
+    return (0, import_vue4.h)(
       this.as,
       {
         // @ts-ignore
@@ -336,13 +208,13 @@ var NodeViewWrapper = (0, import_vue6.defineComponent)({
 });
 
 // src/useEditor.ts
-var import_vue7 = require("vue");
+var import_vue5 = require("vue");
 var useEditor = (options = {}) => {
-  const editor = (0, import_vue7.shallowRef)();
-  (0, import_vue7.onMounted)(() => {
+  const editor = (0, import_vue5.shallowRef)();
+  (0, import_vue5.onMounted)(() => {
     editor.value = new Editor(options);
   });
-  (0, import_vue7.onBeforeUnmount)(() => {
+  (0, import_vue5.onBeforeUnmount)(() => {
     var _a, _b, _c;
     const nodes = (_a = editor.value) == null ? void 0 : _a.options.element;
     const newEl = nodes == null ? void 0 : nodes.cloneNode(true);
@@ -352,18 +224,18 @@ var useEditor = (options = {}) => {
   return editor;
 };
 
-// src/VueNodeViewRenderer.ts
+// src/VueMarkViewRenderer.ts
 var import_core2 = require("@tiptap/core");
-var import_vue9 = require("vue");
+var import_vue7 = require("vue");
 
 // src/VueRenderer.ts
-var import_vue8 = require("vue");
+var import_vue6 = require("vue");
 var VueRenderer = class {
   constructor(component, { props = {}, editor }) {
     this.editor = editor;
-    this.component = (0, import_vue8.markRaw)(component);
+    this.component = (0, import_vue6.markRaw)(component);
     this.el = document.createElement("div");
-    this.props = (0, import_vue8.reactive)(props);
+    this.props = (0, import_vue6.reactive)(props);
     this.renderedComponent = this.renderComponent();
   }
   get element() {
@@ -377,16 +249,16 @@ var VueRenderer = class {
     return (_d = (_c = this.renderedComponent.vNode) == null ? void 0 : _c.component) == null ? void 0 : _d.proxy;
   }
   renderComponent() {
-    let vNode = (0, import_vue8.h)(this.component, this.props);
+    let vNode = (0, import_vue6.h)(this.component, this.props);
     if (this.editor.appContext) {
       vNode.appContext = this.editor.appContext;
     }
     if (typeof document !== "undefined" && this.el) {
-      (0, import_vue8.render)(vNode, this.el);
+      (0, import_vue6.render)(vNode, this.el);
     }
     const destroy = () => {
       if (this.el) {
-        (0, import_vue8.render)(null, this.el);
+        (0, import_vue6.render)(null, this.el);
       }
       this.el = null;
       vNode = null;
@@ -404,7 +276,92 @@ var VueRenderer = class {
   }
 };
 
+// src/VueMarkViewRenderer.ts
+var markViewProps = {
+  editor: {
+    type: Object,
+    required: true
+  },
+  mark: {
+    type: Object,
+    required: true
+  },
+  extension: {
+    type: Object,
+    required: true
+  },
+  inline: {
+    type: Boolean,
+    required: true
+  },
+  view: {
+    type: Object,
+    required: true
+  }
+};
+var MarkViewContent = (0, import_vue7.defineComponent)({
+  name: "MarkViewContent",
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    }
+  },
+  render() {
+    return (0, import_vue7.h)(this.as, {
+      style: {
+        whiteSpace: "inherit"
+      },
+      "data-mark-view-content": ""
+    });
+  }
+});
+var VueMarkView = class extends import_core2.MarkView {
+  constructor(component, props, options) {
+    super(component, props, options);
+    const extendedComponent = (0, import_vue7.defineComponent)({
+      extends: { ...component },
+      props: Object.keys(props),
+      template: this.component.template,
+      setup: (reactiveProps) => {
+        var _a;
+        return (_a = component.setup) == null ? void 0 : _a.call(component, reactiveProps, {
+          expose: () => void 0
+        });
+      },
+      // Add support for scoped styles
+      __scopeId: component.__scopeId,
+      __cssModules: component.__cssModules,
+      __name: component.__name,
+      __file: component.__file
+    });
+    this.renderer = new VueRenderer(extendedComponent, {
+      editor: this.editor,
+      props
+    });
+  }
+  get dom() {
+    return this.renderer.element;
+  }
+  get contentDOM() {
+    return this.dom.querySelector("[data-mark-view-content]");
+  }
+  destroy() {
+    this.renderer.destroy();
+  }
+};
+function VueMarkViewRenderer(component, options = {}) {
+  return (props) => {
+    if (!props.editor.contentComponent) {
+      return {};
+    }
+    return new VueMarkView(component, props, options);
+  };
+}
+
 // src/VueNodeViewRenderer.ts
+var import_core3 = require("@tiptap/core");
+var import_vue8 = require("vue");
 var nodeViewProps = {
   editor: {
     type: Object,
@@ -437,9 +394,21 @@ var nodeViewProps = {
   deleteNode: {
     type: Function,
     required: true
+  },
+  view: {
+    type: Object,
+    required: true
+  },
+  innerDecorations: {
+    type: Object,
+    required: true
+  },
+  HTMLAttributes: {
+    type: Object,
+    required: true
   }
 };
-var VueNodeView = class extends import_core2.NodeView {
+var VueNodeView = class extends import_core3.NodeView {
   mount() {
     const props = {
       editor: this.editor,
@@ -455,15 +424,15 @@ var VueNodeView = class extends import_core2.NodeView {
       deleteNode: () => this.deleteNode()
     };
     const onDragStart = this.onDragStart.bind(this);
-    this.decorationClasses = (0, import_vue9.ref)(this.getDecorationClasses());
-    const extendedComponent = (0, import_vue9.defineComponent)({
+    this.decorationClasses = (0, import_vue8.ref)(this.getDecorationClasses());
+    const extendedComponent = (0, import_vue8.defineComponent)({
       extends: { ...this.component },
       props: Object.keys(props),
       template: this.component.template,
       setup: (reactiveProps) => {
         var _a, _b;
-        (0, import_vue9.provide)("onDragStart", onDragStart);
-        (0, import_vue9.provide)("decorationClasses", this.decorationClasses);
+        (0, import_vue8.provide)("onDragStart", onDragStart);
+        (0, import_vue8.provide)("decorationClasses", this.decorationClasses);
         return (_b = (_a = this.component).setup) == null ? void 0 : _b.call(_a, reactiveProps, {
           expose: () => void 0
         });
@@ -614,17 +583,19 @@ function VueNodeViewRenderer(component, options) {
 }
 
 // src/index.ts
-__reExport(src_exports, require("@tiptap/core"), module.exports);
+__reExport(index_exports, require("@tiptap/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BubbleMenu,
   Editor,
   EditorContent,
-  FloatingMenu,
+  MarkViewContent,
   NodeViewContent,
   NodeViewWrapper,
+  VueMarkView,
+  VueMarkViewRenderer,
   VueNodeViewRenderer,
   VueRenderer,
+  markViewProps,
   nodeViewProps,
   useEditor,
   ...require("@tiptap/core")