@tiptap/vue-2 3.0.0 → 3.0.2

package/dist/index.js

@@ -1,364 +1,325 @@
-import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
-import { Editor as Editor$1, NodeView } from '@tiptap/core';
-export * from '@tiptap/core';
-import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
-import Vue from 'vue';
-import { objectProp, booleanProp, functionProp } from 'vue-ts-types';
-
-const 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;
+  }
 };
 
-class Editor extends Editor$1 {
-    constructor() {
-        super(...arguments);
-        this.contentComponent = null;
+// src/EditorContent.ts
+var EditorContent = {
+  name: "EditorContent",
+  props: {
+    editor: {
+      default: null,
+      type: Object
     }
-}
-
-const 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: {},
+  },
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor) {
+        if (editor && editor.options.element) {
+          this.$nextTick(() => {
+            var _a;
+            const element = this.$el;
+            if (!element || !((_a = editor.options.element) == null ? void 0 : _a.firstChild)) {
+              return;
+            }
+            element.append(...editor.options.element.childNodes);
+            editor.contentComponent = this;
+            editor.setOptions({
+              element
             });
+            editor.createNodeViews();
+          });
         }
-        editor.contentComponent = null;
-        if (!editor.options.element.firstChild) {
-            return;
-        }
-        const newElement = document.createElement('div');
-        newElement.append(...editor.options.element.childNodes);
-        editor.setOptions({
-            element: newElement,
-        });
-    },
+      }
+    }
+  },
+  render(createElement) {
+    return createElement("div");
+  },
+  beforeDestroy() {
+    var _a;
+    const { editor } = this;
+    if (!editor) {
+      return;
+    }
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {}
+      });
+    }
+    editor.contentComponent = null;
+    if (!((_a = editor.options.element) == null ? void 0 : _a.firstChild)) {
+      return;
+    }
+    const newElement = document.createElement("div");
+    newElement.append(...editor.options.element.childNodes);
+    editor.setOptions({
+      element: newElement
+    });
+  }
 };
 
-const 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": ""
+      }
+    });
+  }
 };
 
-const NodeViewContent = {
-    props: {
-        as: {
-            type: String,
-            default: 'div',
+// 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"
         },
-    },
-    render(createElement) {
-        return createElement(this.as, {
-            style: {
-                whiteSpace: 'pre-wrap',
-            },
-            attrs: {
-                'data-node-view-content': '',
-            },
-        });
-    },
-};
-
-const NodeViewWrapper = {
-    props: {
-        as: {
-            type: String,
-            default: 'div',
+        attrs: {
+          "data-node-view-wrapper": ""
         },
-    },
-    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);
-    },
+        on: {
+          dragstart: this.onDragStart
+        }
+      },
+      this.$slots.default
+    );
+  }
 };
 
-/**
- * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.
- */
-class VueRenderer {
-    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;
-        }
-        // prevents `Avoid mutating a prop directly` error message
-        // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working
-        const currentVueConstructor = (_c = (_b = (_a = this.ref.$props.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.$options._base) !== null && _c !== void 0 ? _c : Vue; // eslint-disable-line
-        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
+import { NodeView } from "@tiptap/core";
+import Vue2 from "vue";
+import { booleanProp, functionProp, objectProp } from "vue-ts-types";
+
+// 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();
+  }
+};
 
-const nodeViewProps = {
-    editor: objectProp().required,
-    node: objectProp().required,
-    decorations: objectProp().required,
-    selected: booleanProp().required,
-    extension: objectProp().required,
-    getPos: functionProp().required,
-    updateAttributes: functionProp().required,
-    deleteNode: functionProp().required,
+// src/VueNodeViewRenderer.ts
+var nodeViewProps = {
+  editor: objectProp().required,
+  node: objectProp().required,
+  decorations: objectProp().required,
+  selected: booleanProp().required,
+  extension: objectProp().required,
+  getPos: functionProp().required,
+  updateAttributes: functionProp().required,
+  deleteNode: functionProp().required
 };
-class VueNodeView 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(),
+var VueNodeView = class extends NodeView {
+  mount() {
+    var _a, _b;
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      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()
+    };
+    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
         };
-        const onDragStart = this.onDragStart.bind(this);
-        this.decorationClasses = Vue.observable({
-            value: this.getDecorationClasses(),
-        });
-        // @ts-ignore
-        const vue = (_b = (_a = this.editor.contentComponent) === null || _a === void 0 ? void 0 : _a.$options._base) !== null && _b !== void 0 ? _b : Vue; // eslint-disable-line
-        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,
-        });
+      }
+    });
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+    this.editor.on("selectionUpdate", this.handleSelectionUpdate);
+    this.renderer = new VueRenderer(Component, {
+      parent: this.editor.contentComponent,
+      propsData: props
+    });
+  }
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
+  get dom() {
+    if (!this.renderer.element.hasAttribute("data-node-view-wrapper")) {
+      throw Error("Please use the NodeViewWrapper component for your node view.");
     }
-    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;
+    return this.renderer.element;
+  }
+  /**
+   * 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;
     }
-    get contentDOM() {
-        if (this.node.isLeaf) {
-            return null;
-        }
-        const contentElement = this.dom.querySelector('[data-node-view-content]');
-        return (contentElement || this.dom);
+    return this.dom.querySelector("[data-node-view-content]");
+  }
+  /**
+   * 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;
     }
-    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,
-        });
-        this.renderer.element.classList.add('ProseMirror-selectednode');
+    if (from <= pos && to >= pos + this.node.nodeSize) {
+      if (this.renderer.ref.$props.selected) {
+        return;
+      }
+      this.selectNode();
+    } else {
+      if (!this.renderer.ref.$props.selected) {
+        return;
+      }
+      this.deselectNode();
     }
-    deselectNode() {
-        this.renderer.updateProps({
-            selected: false,
-        });
-        this.renderer.element.classList.remove('ProseMirror-selectednode');
+  }
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(node, decorations, innerDecorations) {
+    const rerenderComponent = (props) => {
+      this.decorationClasses.value = this.getDecorationClasses();
+      this.renderer.updateProps(props);
+    };
+    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,
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations })
+      });
     }
-    getDecorationClasses() {
-        return (this.decorations
-            // @ts-ignore
-            .map(item => item.type.attrs.class)
-            .flat()
-            .join(' '));
+    if (node.type !== this.node.type) {
+      return false;
     }
-    destroy() {
-        this.renderer.destroy();
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+      return true;
     }
-}
+    this.node = node;
+    this.decorations = decorations;
+    this.innerDecorations = innerDecorations;
+    rerenderComponent({ node, decorations, innerDecorations });
+    return true;
+  }
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true
+    });
+    this.renderer.element.classList.add("ProseMirror-selectednode");
+  }
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false
+    });
+    this.renderer.element.classList.remove("ProseMirror-selectednode");
+  }
+  getDecorationClasses() {
+    return this.decorations.map((item) => item.type.attrs.class).flat().join(" ");
+  }
+  destroy() {
+    this.renderer.destroy();
+    this.editor.off("selectionUpdate", this.handleSelectionUpdate);
+  }
+};
 function VueNodeViewRenderer(component, options) {
-    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.contentComponent) {
-            return {};
-        }
-        return new VueNodeView(component, props, options);
-    };
+  return (props) => {
+    if (!props.editor.contentComponent) {
+      return {};
+    }
+    return new VueNodeView(component, props, options);
+  };
 }
 
-export { BubbleMenu, Editor, EditorContent, FloatingMenu, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, VueRenderer, nodeViewProps };
-//# sourceMappingURL=index.js.map
+// src/index.ts
+export * from "@tiptap/core";
+export {
+  Editor,
+  EditorContent,
+  NodeViewContent,
+  NodeViewWrapper,
+  VueNodeViewRenderer,
+  VueRenderer,
+  nodeViewProps
+};
+//# sourceMappingURL=index.js.map