@tiptap/vue-3 2.0.0-beta.21 → 2.0.0-beta.211

package/dist/index.js

@@ -0,0 +1,523 @@
+// src/BubbleMenu.ts
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+var BubbleMenu = defineComponent({
+  name: "BubbleMenu",
+  props: {
+    pluginKey: {
+      type: null,
+      default: "bubbleMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    updateDelay: {
+      type: Number,
+      default: void 0
+    },
+    tippyOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const root = ref(null);
+    onMounted(() => {
+      const {
+        updateDelay,
+        editor,
+        pluginKey,
+        shouldShow,
+        tippyOptions
+      } = props;
+      editor.registerPlugin(BubbleMenuPlugin({
+        updateDelay,
+        editor,
+        element: root.value,
+        pluginKey,
+        shouldShow,
+        tippyOptions
+      }));
+    });
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+// src/Editor.ts
+import { Editor as CoreEditor } from "@tiptap/core";
+import {
+  customRef,
+  markRaw,
+  reactive
+} from "vue";
+function useDebouncedRef(value) {
+  return customRef((track, trigger) => {
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        value = newValue;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            trigger();
+          });
+        });
+      }
+    };
+  });
+}
+var Editor = class extends CoreEditor {
+  constructor(options = {}) {
+    super(options);
+    this.vueRenderers = reactive(/* @__PURE__ */ new Map());
+    this.contentComponent = null;
+    this.reactiveState = useDebouncedRef(this.view.state);
+    this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage);
+    this.on("transaction", () => {
+      this.reactiveState.value = this.view.state;
+      this.reactiveExtensionStorage.value = this.extensionStorage;
+    });
+    return markRaw(this);
+  }
+  get state() {
+    return this.reactiveState ? this.reactiveState.value : this.view.state;
+  }
+  get storage() {
+    return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage;
+  }
+  registerPlugin(plugin, handlePlugins) {
+    super.registerPlugin(plugin, handlePlugins);
+    this.reactiveState.value = this.view.state;
+  }
+  unregisterPlugin(nameOrPluginKey) {
+    super.unregisterPlugin(nameOrPluginKey);
+    this.reactiveState.value = this.view.state;
+  }
+};
+
+// src/EditorContent.ts
+import {
+  defineComponent as defineComponent2,
+  getCurrentInstance,
+  h as h2,
+  nextTick,
+  onBeforeUnmount as onBeforeUnmount2,
+  ref as ref2,
+  Teleport,
+  unref,
+  watchEffect
+} from "vue";
+var EditorContent = defineComponent2({
+  name: "EditorContent",
+  props: {
+    editor: {
+      default: null,
+      type: Object
+    }
+  },
+  setup(props) {
+    const rootEl = ref2();
+    const instance = getCurrentInstance();
+    watchEffect(() => {
+      const editor = props.editor;
+      if (editor && editor.options.element && rootEl.value) {
+        nextTick(() => {
+          if (!rootEl.value || !editor.options.element.firstChild) {
+            return;
+          }
+          const element = unref(rootEl.value);
+          rootEl.value.append(...editor.options.element.childNodes);
+          editor.contentComponent = instance.ctx._;
+          editor.setOptions({
+            element
+          });
+          editor.createNodeViews();
+        });
+      }
+    });
+    onBeforeUnmount2(() => {
+      const editor = props.editor;
+      if (!editor) {
+        return;
+      }
+      if (!editor.isDestroyed) {
+        editor.view.setProps({
+          nodeViews: {}
+        });
+      }
+      editor.contentComponent = null;
+      if (!editor.options.element.firstChild) {
+        return;
+      }
+      const newElement = document.createElement("div");
+      newElement.append(...editor.options.element.childNodes);
+      editor.setOptions({
+        element: newElement
+      });
+    });
+    return { rootEl };
+  },
+  render() {
+    const vueRenderers = [];
+    if (this.editor) {
+      this.editor.vueRenderers.forEach((vueRenderer) => {
+        const node = h2(
+          Teleport,
+          {
+            to: vueRenderer.teleportElement,
+            key: vueRenderer.id
+          },
+          h2(
+            vueRenderer.component,
+            {
+              ref: vueRenderer.id,
+              ...vueRenderer.props
+            }
+          )
+        );
+        vueRenderers.push(node);
+      });
+    }
+    return h2(
+      "div",
+      {
+        ref: (el) => {
+          this.rootEl = el;
+        }
+      },
+      ...vueRenderers
+    );
+  }
+});
+
+// src/FloatingMenu.ts
+import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
+import {
+  defineComponent as defineComponent3,
+  h as h3,
+  onBeforeUnmount as onBeforeUnmount3,
+  onMounted as onMounted2,
+  ref as ref3
+} from "vue";
+var FloatingMenu = defineComponent3({
+  name: "FloatingMenu",
+  props: {
+    pluginKey: {
+      type: null,
+      default: "floatingMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    tippyOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const root = ref3(null);
+    onMounted2(() => {
+      const {
+        pluginKey,
+        editor,
+        tippyOptions,
+        shouldShow
+      } = props;
+      editor.registerPlugin(FloatingMenuPlugin({
+        pluginKey,
+        editor,
+        element: root.value,
+        tippyOptions,
+        shouldShow
+      }));
+    });
+    onBeforeUnmount3(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return h3("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+// src/NodeViewContent.ts
+import { defineComponent as defineComponent4, h as h4 } from "vue";
+var NodeViewContent = defineComponent4({
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  render() {
+    return h4(this.as, {
+      style: {
+        whiteSpace: "pre-wrap"
+      },
+      "data-node-view-content": ""
+    });
+  }
+});
+
+// src/NodeViewWrapper.ts
+import { defineComponent as defineComponent5, h as h5 } from "vue";
+var NodeViewWrapper = defineComponent5({
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  inject: ["onDragStart", "decorationClasses"],
+  render() {
+    var _a, _b;
+    return h5(
+      this.as,
+      {
+        class: this.decorationClasses,
+        style: {
+          whiteSpace: "normal"
+        },
+        "data-node-view-wrapper": "",
+        onDragstart: this.onDragStart
+      },
+      (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)
+    );
+  }
+});
+
+// src/useEditor.ts
+import { onBeforeUnmount as onBeforeUnmount4, onMounted as onMounted3, shallowRef } from "vue";
+var useEditor = (options = {}) => {
+  const editor = shallowRef();
+  onMounted3(() => {
+    editor.value = new Editor(options);
+  });
+  onBeforeUnmount4(() => {
+    var _a;
+    (_a = editor.value) == null ? void 0 : _a.destroy();
+  });
+  return editor;
+};
+
+// src/VueNodeViewRenderer.ts
+import {
+  NodeView
+} from "@tiptap/core";
+import {
+  defineComponent as defineComponent6,
+  provide,
+  ref as ref4
+} from "vue";
+
+// src/VueRenderer.ts
+import { markRaw as markRaw2, reactive as reactive2 } from "vue";
+var VueRenderer = class {
+  constructor(component, { props = {}, editor }) {
+    this.id = Math.floor(Math.random() * 4294967295).toString();
+    this.editor = editor;
+    this.component = markRaw2(component);
+    this.teleportElement = document.createElement("div");
+    this.element = this.teleportElement;
+    this.props = reactive2(props);
+    this.editor.vueRenderers.set(this.id, this);
+    if (this.editor.contentComponent) {
+      this.editor.contentComponent.update();
+      if (this.teleportElement.children.length !== 1) {
+        throw Error("VueRenderer doesn\u2019t support multiple child elements.");
+      }
+      this.element = this.teleportElement.firstElementChild;
+    }
+  }
+  get ref() {
+    var _a;
+    return (_a = this.editor.contentComponent) == null ? void 0 : _a.refs[this.id];
+  }
+  updateProps(props = {}) {
+    Object.entries(props).forEach(([key, value]) => {
+      this.props[key] = value;
+    });
+  }
+  destroy() {
+    this.editor.vueRenderers.delete(this.id);
+  }
+};
+
+// src/VueNodeViewRenderer.ts
+var nodeViewProps = {
+  editor: {
+    type: Object,
+    required: true
+  },
+  node: {
+    type: Object,
+    required: true
+  },
+  decorations: {
+    type: Object,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    required: true
+  },
+  extension: {
+    type: Object,
+    required: true
+  },
+  getPos: {
+    type: Function,
+    required: true
+  },
+  updateAttributes: {
+    type: Function,
+    required: true
+  },
+  deleteNode: {
+    type: Function,
+    required: true
+  }
+};
+var VueNodeView = class extends NodeView {
+  mount() {
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode()
+    };
+    const onDragStart = this.onDragStart.bind(this);
+    this.decorationClasses = ref4(this.getDecorationClasses());
+    const extendedComponent = defineComponent6({
+      extends: { ...this.component },
+      props: Object.keys(props),
+      template: this.component.template,
+      setup: (reactiveProps) => {
+        var _a, _b;
+        provide("onDragStart", onDragStart);
+        provide("decorationClasses", this.decorationClasses);
+        return (_b = (_a = this.component).setup) == null ? void 0 : _b.call(_a, reactiveProps, {
+          expose: () => void 0
+        });
+      },
+      __scopeId: this.component.__scopeId,
+      __cssModules: this.component.__cssModules
+    });
+    this.renderer = new VueRenderer(extendedComponent, {
+      editor: this.editor,
+      props
+    });
+  }
+  get dom() {
+    if (!this.renderer.element.hasAttribute("data-node-view-wrapper")) {
+      throw Error("Please use the NodeViewWrapper component for your node view.");
+    }
+    return this.renderer.element;
+  }
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null;
+    }
+    const contentElement = this.dom.querySelector("[data-node-view-content]");
+    return contentElement || this.dom;
+  }
+  update(node, decorations) {
+    const updateProps = (props) => {
+      this.decorationClasses.value = this.getDecorationClasses();
+      this.renderer.updateProps(props);
+    };
+    if (typeof this.options.update === "function") {
+      const oldNode = this.node;
+      const oldDecorations = this.decorations;
+      this.node = node;
+      this.decorations = decorations;
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations })
+      });
+    }
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    if (node === this.node && this.decorations === decorations) {
+      return true;
+    }
+    this.node = node;
+    this.decorations = decorations;
+    updateProps({ node, decorations });
+    return true;
+  }
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true
+    });
+  }
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false
+    });
+  }
+  getDecorationClasses() {
+    return this.decorations.map((item) => item.type.attrs.class).flat().join(" ");
+  }
+  destroy() {
+    this.renderer.destroy();
+  }
+};
+function VueNodeViewRenderer(component, options) {
+  return (props) => {
+    if (!props.editor.contentComponent) {
+      return {};
+    }
+    return new VueNodeView(component, props, options);
+  };
+}
+
+// src/index.ts
+export * from "@tiptap/core";
+export {
+  BubbleMenu,
+  Editor,
+  EditorContent,
+  FloatingMenu,
+  NodeViewContent,
+  NodeViewWrapper,
+  VueNodeViewRenderer,
+  VueRenderer,
+  nodeViewProps,
+  useEditor
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.211",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,24 +12,53 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-vue-3.cjs.js",
-  "umd": "dist/tiptap-vue-3.umd.js",
-  "module": "dist/tiptap-vue-3.esm.js",
-  "unpkg": "dist/tiptap-vue-3.bundle.umd.min.js",
-  "types": "dist/packages/vue-3/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
   "files": [
     "src",
     "dist"
   ],
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.211",
+    "@tiptap/pm": "^2.0.0-beta.211",
+    "vue": "^3.0.0"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209",
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.6",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.3",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.18.2",
-    "vue": "^3.0.0"
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.211",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.211"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/vue-3"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "634c1ae4931a8a268c7251f702b2a7d5121f02d2"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/BubbleMenu.ts

@@ -1,45 +1,71 @@
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import {
+  defineComponent,
   h,
-  ref,
-  PropType,
-  onMounted,
   onBeforeUnmount,
-  defineComponent,
+  onMounted,
+  PropType,
+  ref,
 } from 'vue'
-import {
-  BubbleMenuPlugin,
-  BubbleMenuPluginKey,
-  BubbleMenuPluginProps,
-} from '@tiptap/extension-bubble-menu'
 
 export const BubbleMenu = defineComponent({
   name: 'BubbleMenu',
 
   props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: 'bubbleMenu',
+    },
+
     editor: {
       type: Object as PropType<BubbleMenuPluginProps['editor']>,
       required: true,
     },
 
-    keepInBounds: {
-      type: Boolean as PropType<BubbleMenuPluginProps['keepInBounds']>,
-      default: true,
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+      default: undefined,
+    },
+
+    tippyOptions: {
+      type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['shouldShow'], null>>,
+      default: null,
     },
   },
 
-  setup({ editor, keepInBounds }, { slots }) {
+  setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
+      const {
+        updateDelay,
+        editor,
+        pluginKey,
+        shouldShow,
+        tippyOptions,
+      } = props
+
       editor.registerPlugin(BubbleMenuPlugin({
+        updateDelay,
         editor,
         element: root.value as HTMLElement,
-        keepInBounds,
+        pluginKey,
+        shouldShow,
+        tippyOptions,
       }))
     })
 
     onBeforeUnmount(() => {
-      editor.unregisterPlugin(BubbleMenuPluginKey)
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
     })
 
     return () => h('div', { ref: root }, slots.default?.())