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

package/README.md

@@ -7,7 +7,7 @@
 ## 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*.
 
-## Offical Documentation
+## Official Documentation
 Documentation can be found on the [tiptap website](https://tiptap.dev).
 
 ## License

package/dist/index.cjs

@@ -0,0 +1,397 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }// src/BubbleMenu.ts
+var _extensionbubblemenu = require('@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(_extensionbubblemenu.BubbleMenuPlugin.call(void 0, {
+            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
+var _core = require('@tiptap/core'); _createStarExport(_core);
+var Editor = class extends _core.Editor {
+  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
+var _extensionfloatingmenu = require('@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(_extensionfloatingmenu.FloatingMenuPlugin.call(void 0, {
+            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
+
+
+
+var _vue = require('vue'); var _vue2 = _interopRequireDefault(_vue);
+
+// src/VueRenderer.ts
+
+var VueRenderer = class {
+  constructor(component, props) {
+    const Component = typeof component === "function" ? component : _vue2.default.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 : _vue2.default;
+    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 _core.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.default.observable({
+      value: this.getDecorationClasses()
+    });
+    const vue = (_b = (_a = this.editor.contentComponent) == null ? void 0 : _a.$options._base) != null ? _b : _vue2.default;
+    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
+
+
+
+
+
+
+
+
+
+
+
+exports.BubbleMenu = BubbleMenu; exports.Editor = Editor; exports.EditorContent = EditorContent; exports.FloatingMenu = FloatingMenu; exports.NodeViewContent = NodeViewContent; exports.NodeViewWrapper = NodeViewWrapper; exports.VueNodeViewRenderer = VueNodeViewRenderer; exports.VueRenderer = VueRenderer; exports.nodeViewProps = nodeViewProps;

package/dist/index.d.ts

@@ -0,0 +1,104 @@
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import Vue, { Component } from 'vue';
+import * as _tiptap_core from '@tiptap/core';
+import { Editor as Editor$1, NodeViewRendererOptions, NodeViewRenderer } from '@tiptap/core';
+export * from '@tiptap/core';
+import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
+import { Node } from '@tiptap/pm/model';
+import { Decoration } from '@tiptap/pm/view';
+import { PropType, VueConstructor } from 'vue/types/umd';
+
+interface BubbleMenuInterface extends Vue {
+    pluginKey: BubbleMenuPluginProps['pluginKey'];
+    editor: BubbleMenuPluginProps['editor'];
+    tippyOptions: BubbleMenuPluginProps['tippyOptions'];
+    updateDelay: BubbleMenuPluginProps['updateDelay'];
+    shouldShow: BubbleMenuPluginProps['shouldShow'];
+}
+declare const BubbleMenu: Component;
+
+declare class Editor extends Editor$1 {
+    contentComponent: Vue | null;
+}
+
+interface EditorContentInterface extends Vue {
+    editor: Editor;
+}
+declare const EditorContent: Component;
+
+interface FloatingMenuInterface extends Vue {
+    pluginKey: FloatingMenuPluginProps['pluginKey'];
+    tippyOptions: FloatingMenuPluginProps['tippyOptions'];
+    editor: FloatingMenuPluginProps['editor'];
+    shouldShow: FloatingMenuPluginProps['shouldShow'];
+}
+declare const FloatingMenu: Component;
+
+interface NodeViewContentInterface extends Vue {
+    as: string;
+}
+declare const NodeViewContent: Component;
+
+interface NodeViewWrapperInterface extends Vue {
+    as: string;
+    decorationClasses: {
+        value: string;
+    };
+    onDragStart: Function;
+}
+declare const NodeViewWrapper: Component;
+
+declare const nodeViewProps: {
+    editor: {
+        type: PropType<_tiptap_core.Editor>;
+        required: true;
+    };
+    node: {
+        type: PropType<Node>;
+        required: true;
+    };
+    decorations: {
+        type: PropType<Decoration[]>;
+        required: true;
+    };
+    selected: {
+        type: PropType<boolean>;
+        required: true;
+    };
+    extension: {
+        type: PropType<_tiptap_core.Node<any, any>>;
+        required: true;
+    };
+    getPos: {
+        type: PropType<() => number>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<(attributes: Record<string, any>) => void>;
+        required: true;
+    };
+    deleteNode: {
+        type: PropType<() => void>;
+        required: true;
+    };
+};
+interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
+    update: ((props: {
+        oldNode: Node;
+        oldDecorations: Decoration[];
+        newNode: Node;
+        newDecorations: Decoration[];
+        updateProps: () => void;
+    }) => boolean) | null;
+}
+declare function VueNodeViewRenderer(component: Vue | VueConstructor, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;
+
+declare class VueRenderer {
+    ref: Vue;
+    constructor(component: Vue | VueConstructor, props: any);
+    get element(): Element;
+    updateProps(props?: Record<string, any>): void;
+    destroy(): void;
+}
+
+export { BubbleMenu, BubbleMenuInterface, Editor, EditorContent, EditorContentInterface, FloatingMenu, FloatingMenuInterface, NodeViewContent, NodeViewContentInterface, NodeViewWrapper, NodeViewWrapperInterface, VueNodeViewRenderer, VueNodeViewRendererOptions, VueRenderer, nodeViewProps };