@tiptap/vue-2 2.0.0-beta.21 → 2.0.0-beta.210

package/dist/index.js

@@ -0,0 +1,397 @@
+// src/BubbleMenu.ts
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+var BubbleMenu = {
+  name: "BubbleMenu",
+  props: {
+    pluginKey: {
+      type: [String, Object],
+      default: "bubbleMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    updateDelay: {
+      type: Number
+    },
+    tippyOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor) {
+        if (!editor) {
+          return;
+        }
+        this.$nextTick(() => {
+          editor.registerPlugin(BubbleMenuPlugin({
+            updateDelay: this.updateDelay,
+            editor,
+            element: this.$el,
+            pluginKey: this.pluginKey,
+            shouldShow: this.shouldShow,
+            tippyOptions: this.tippyOptions
+          }));
+        });
+      }
+    }
+  },
+  render(createElement) {
+    return createElement("div", { style: { visibility: "hidden" } }, this.$slots.default);
+  },
+  beforeDestroy() {
+    this.editor.unregisterPlugin(this.pluginKey);
+  }
+};
+
+// src/Editor.ts
+import { Editor as CoreEditor } from "@tiptap/core";
+var Editor = class extends CoreEditor {
+  constructor() {
+    super(...arguments);
+    this.contentComponent = null;
+  }
+};
+
+// src/EditorContent.ts
+var EditorContent = {
+  name: "EditorContent",
+  props: {
+    editor: {
+      default: null,
+      type: Object
+    }
+  },
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor) {
+        if (editor && editor.options.element) {
+          this.$nextTick(() => {
+            const element = this.$el;
+            if (!element || !editor.options.element.firstChild) {
+              return;
+            }
+            element.append(...editor.options.element.childNodes);
+            editor.contentComponent = this;
+            editor.setOptions({
+              element
+            });
+            editor.createNodeViews();
+          });
+        }
+      }
+    }
+  },
+  render(createElement) {
+    return createElement("div");
+  },
+  beforeDestroy() {
+    const { editor } = this;
+    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
+    });
+  }
+};
+
+// src/FloatingMenu.ts
+import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
+var FloatingMenu = {
+  name: "FloatingMenu",
+  props: {
+    pluginKey: {
+      type: [String, Object],
+      default: "floatingMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    tippyOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor) {
+        if (!editor) {
+          return;
+        }
+        this.$nextTick(() => {
+          editor.registerPlugin(FloatingMenuPlugin({
+            pluginKey: this.pluginKey,
+            editor,
+            element: this.$el,
+            tippyOptions: this.tippyOptions,
+            shouldShow: this.shouldShow
+          }));
+        });
+      }
+    }
+  },
+  render(createElement) {
+    return createElement("div", { style: { visibility: "hidden" } }, this.$slots.default);
+  },
+  beforeDestroy() {
+    this.editor.unregisterPlugin(this.pluginKey);
+  }
+};
+
+// src/NodeViewContent.ts
+var NodeViewContent = {
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  render(createElement) {
+    return createElement(this.as, {
+      style: {
+        whiteSpace: "pre-wrap"
+      },
+      attrs: {
+        "data-node-view-content": ""
+      }
+    });
+  }
+};
+
+// src/NodeViewWrapper.ts
+var NodeViewWrapper = {
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  inject: ["onDragStart", "decorationClasses"],
+  render(createElement) {
+    return createElement(
+      this.as,
+      {
+        class: this.decorationClasses.value,
+        style: {
+          whiteSpace: "normal"
+        },
+        attrs: {
+          "data-node-view-wrapper": ""
+        },
+        on: {
+          dragstart: this.onDragStart
+        }
+      },
+      this.$slots.default
+    );
+  }
+};
+
+// src/VueNodeViewRenderer.ts
+import {
+  NodeView
+} from "@tiptap/core";
+import Vue2 from "vue";
+
+// src/VueRenderer.ts
+import Vue from "vue";
+var VueRenderer = class {
+  constructor(component, props) {
+    const Component = typeof component === "function" ? component : Vue.extend(component);
+    this.ref = new Component(props).$mount();
+  }
+  get element() {
+    return this.ref.$el;
+  }
+  updateProps(props = {}) {
+    var _a, _b, _c;
+    if (!this.ref.$props) {
+      return;
+    }
+    const currentVueConstructor = (_c = (_b = (_a = this.ref.$props.editor) == null ? void 0 : _a.contentComponent) == null ? void 0 : _b.$options._base) != null ? _c : Vue;
+    const originalSilent = currentVueConstructor.config.silent;
+    currentVueConstructor.config.silent = true;
+    Object.entries(props).forEach(([key, value]) => {
+      this.ref.$props[key] = value;
+    });
+    currentVueConstructor.config.silent = originalSilent;
+  }
+  destroy() {
+    this.ref.$destroy();
+  }
+};
+
+// 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() {
+    var _a, _b;
+    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 = Vue2.observable({
+      value: this.getDecorationClasses()
+    });
+    const vue = (_b = (_a = this.editor.contentComponent) == null ? void 0 : _a.$options._base) != null ? _b : Vue2;
+    const Component = vue.extend(this.component).extend({
+      props: Object.keys(props),
+      provide: () => {
+        return {
+          onDragStart,
+          decorationClasses: this.decorationClasses
+        };
+      }
+    });
+    this.renderer = new VueRenderer(Component, {
+      parent: this.editor.contentComponent,
+      propsData: 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
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-2",
   "description": "Vue components for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,23 +12,53 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-vue-2.cjs.js",
-  "umd": "dist/tiptap-vue-2.umd.js",
-  "module": "dist/tiptap-vue-2.esm.js",
-  "unpkg": "dist/tiptap-vue-2.bundle.umd.min.js",
-  "types": "dist/packages/vue-2/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.210",
+    "@tiptap/pm": "^2.0.0-beta.210",
+    "vue": "^2.6.0"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1",
-    "vue": "^2.6.12"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209",
+    "vue": "^2.6.0"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.6",
-    "prosemirror-view": "^1.18.2"
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.210",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.210"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/vue-2"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "bd9e15d78f9159afb05d09e7ba279ff7d74a85ea"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/BubbleMenu.ts

@@ -1,33 +1,58 @@
-import Vue, { PropType } from 'vue'
-import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import Vue, { Component, PropType } from 'vue'
 
-export const BubbleMenu = Vue.extend({
+export interface BubbleMenuInterface extends Vue {
+  pluginKey: BubbleMenuPluginProps['pluginKey'],
+  editor: BubbleMenuPluginProps['editor'],
+  tippyOptions: BubbleMenuPluginProps['tippyOptions'],
+  updateDelay: BubbleMenuPluginProps['updateDelay'],
+  shouldShow: BubbleMenuPluginProps['shouldShow'],
+}
+
+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']>,
+    },
+
     tippyOptions: {
       type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
       default: () => ({}),
     },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
   },
 
   watch: {
     editor: {
       immediate: true,
-      handler(editor: BubbleMenuPluginProps['editor']) {
+      handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {
         if (!editor) {
           return
         }
 
         this.$nextTick(() => {
           editor.registerPlugin(BubbleMenuPlugin({
+            updateDelay: this.updateDelay,
             editor,
             element: this.$el as HTMLElement,
+            pluginKey: this.pluginKey,
+            shouldShow: this.shouldShow,
             tippyOptions: this.tippyOptions,
           }))
         })
@@ -35,11 +60,11 @@ export const BubbleMenu = Vue.extend({
     },
   },
 
-  render(createElement) {
+  render(this: BubbleMenuInterface, createElement) {
     return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
   },
 
-  beforeDestroy() {
-    this.editor.unregisterPlugin(BubbleMenuPluginKey)
+  beforeDestroy(this: BubbleMenuInterface) {
+    this.editor.unregisterPlugin(this.pluginKey)
   },
-})
+}

package/src/EditorContent.ts

@@ -1,7 +1,12 @@
-import Vue, { PropType } from 'vue'
+import Vue, { Component, PropType } from 'vue'
+
 import { Editor } from './Editor'
 
-export const EditorContent = Vue.extend({
+export interface EditorContentInterface extends Vue {
+  editor: Editor,
+}
+
+export const EditorContent: Component = {
   name: 'EditorContent',
 
   props: {
@@ -14,7 +19,7 @@ export const EditorContent = Vue.extend({
   watch: {
     editor: {
       immediate: true,
-      handler(editor: Editor) {
+      handler(this: EditorContentInterface, editor: Editor) {
         if (editor && editor.options.element) {
           this.$nextTick(() => {
             const element = this.$el
@@ -23,8 +28,7 @@ export const EditorContent = Vue.extend({
               return
             }
 
-            element.appendChild(editor.options.element.firstChild)
-
+            element.append(...editor.options.element.childNodes)
             editor.contentComponent = this
 
             editor.setOptions({
@@ -42,9 +46,13 @@ export const EditorContent = Vue.extend({
     return createElement('div')
   },
 
-  beforeDestroy() {
+  beforeDestroy(this: EditorContentInterface) {
     const { editor } = this
 
+    if (!editor) {
+      return
+    }
+
     if (!editor.isDestroyed) {
       editor.view.setProps({
         nodeViews: {},
@@ -59,10 +67,10 @@ export const EditorContent = Vue.extend({
 
     const newElement = document.createElement('div')
 
-    newElement.appendChild(editor.options.element.firstChild)
+    newElement.append(...editor.options.element.childNodes)
 
     editor.setOptions({
       element: newElement,
     })
   },
-})
+}

package/src/FloatingMenu.ts

@@ -1,10 +1,22 @@
-import Vue, { PropType } from 'vue'
-import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import Vue, { Component, PropType } from 'vue'
 
-export const FloatingMenu = Vue.extend({
+export interface FloatingMenuInterface extends Vue {
+  pluginKey: FloatingMenuPluginProps['pluginKey'],
+  tippyOptions: FloatingMenuPluginProps['tippyOptions'],
+  editor: FloatingMenuPluginProps['editor'],
+  shouldShow: FloatingMenuPluginProps['shouldShow'],
+}
+
+export const FloatingMenu: Component = {
   name: 'FloatingMenu',
 
   props: {
+    pluginKey: {
+      type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      default: 'floatingMenu',
+    },
+
     editor: {
       type: Object as PropType<FloatingMenuPluginProps['editor']>,
       required: true,
@@ -14,32 +26,39 @@ export const FloatingMenu = Vue.extend({
       type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
       default: () => ({}),
     },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
   },
 
   watch: {
     editor: {
       immediate: true,
-      handler(editor: FloatingMenuPluginProps['editor']) {
+      handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {
         if (!editor) {
           return
         }
 
         this.$nextTick(() => {
           editor.registerPlugin(FloatingMenuPlugin({
+            pluginKey: this.pluginKey,
             editor,
             element: this.$el as HTMLElement,
             tippyOptions: this.tippyOptions,
+            shouldShow: this.shouldShow,
           }))
         })
       },
     },
   },
 
-  render(createElement) {
+  render(this: FloatingMenuInterface, createElement) {
     return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
   },
 
-  beforeDestroy() {
-    this.editor.unregisterPlugin(FloatingMenuPluginKey)
+  beforeDestroy(this: FloatingMenuInterface) {
+    this.editor.unregisterPlugin(this.pluginKey)
   },
-})
+}