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

package/README.md

@@ -7,8 +7,8 @@
 ## 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
-tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -0,0 +1,523 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _vue = require('vue');
+var BubbleMenu = _vue.defineComponent.call(void 0, {
+  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 = _vue.ref.call(void 0, null);
+    _vue.onMounted.call(void 0, () => {
+      const {
+        updateDelay,
+        editor,
+        pluginKey,
+        shouldShow,
+        tippyOptions
+      } = props;
+      editor.registerPlugin(_extensionbubblemenu.BubbleMenuPlugin.call(void 0, {
+        updateDelay,
+        editor,
+        element: root.value,
+        pluginKey,
+        shouldShow,
+        tippyOptions
+      }));
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return _vue.h.call(void 0, "div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+// src/Editor.ts
+var _core = require('@tiptap/core'); _createStarExport(_core);
+
+
+
+
+
+function useDebouncedRef(value) {
+  return _vue.customRef.call(void 0, (track, trigger) => {
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        value = newValue;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            trigger();
+          });
+        });
+      }
+    };
+  });
+}
+var Editor = class extends _core.Editor {
+  constructor(options = {}) {
+    super(options);
+    this.vueRenderers = _vue.reactive.call(void 0, /* @__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 _vue.markRaw.call(void 0, 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
+
+
+
+
+
+
+
+
+
+
+
+var EditorContent = _vue.defineComponent.call(void 0, {
+  name: "EditorContent",
+  props: {
+    editor: {
+      default: null,
+      type: Object
+    }
+  },
+  setup(props) {
+    const rootEl = _vue.ref.call(void 0, );
+    const instance = _vue.getCurrentInstance.call(void 0, );
+    _vue.watchEffect.call(void 0, () => {
+      const editor = props.editor;
+      if (editor && editor.options.element && rootEl.value) {
+        _vue.nextTick.call(void 0, () => {
+          if (!rootEl.value || !editor.options.element.firstChild) {
+            return;
+          }
+          const element = _vue.unref.call(void 0, rootEl.value);
+          rootEl.value.append(...editor.options.element.childNodes);
+          editor.contentComponent = instance.ctx._;
+          editor.setOptions({
+            element
+          });
+          editor.createNodeViews();
+        });
+      }
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      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 = _vue.h.call(void 0, 
+          _vue.Teleport,
+          {
+            to: vueRenderer.teleportElement,
+            key: vueRenderer.id
+          },
+          _vue.h.call(void 0, 
+            vueRenderer.component,
+            {
+              ref: vueRenderer.id,
+              ...vueRenderer.props
+            }
+          )
+        );
+        vueRenderers.push(node);
+      });
+    }
+    return _vue.h.call(void 0, 
+      "div",
+      {
+        ref: (el) => {
+          this.rootEl = el;
+        }
+      },
+      ...vueRenderers
+    );
+  }
+});
+
+// src/FloatingMenu.ts
+var _extensionfloatingmenu = require('@tiptap/extension-floating-menu');
+
+
+
+
+
+
+
+var FloatingMenu = _vue.defineComponent.call(void 0, {
+  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 = _vue.ref.call(void 0, null);
+    _vue.onMounted.call(void 0, () => {
+      const {
+        pluginKey,
+        editor,
+        tippyOptions,
+        shouldShow
+      } = props;
+      editor.registerPlugin(_extensionfloatingmenu.FloatingMenuPlugin.call(void 0, {
+        pluginKey,
+        editor,
+        element: root.value,
+        tippyOptions,
+        shouldShow
+      }));
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return _vue.h.call(void 0, "div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+
+// src/NodeViewContent.ts
+
+var NodeViewContent = _vue.defineComponent.call(void 0, {
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  render() {
+    return _vue.h.call(void 0, this.as, {
+      style: {
+        whiteSpace: "pre-wrap"
+      },
+      "data-node-view-content": ""
+    });
+  }
+});
+
+// src/NodeViewWrapper.ts
+
+var NodeViewWrapper = _vue.defineComponent.call(void 0, {
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  inject: ["onDragStart", "decorationClasses"],
+  render() {
+    var _a, _b;
+    return _vue.h.call(void 0, 
+      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
+
+var useEditor = (options = {}) => {
+  const editor = _vue.shallowRef.call(void 0, );
+  _vue.onMounted.call(void 0, () => {
+    editor.value = new Editor(options);
+  });
+  _vue.onBeforeUnmount.call(void 0, () => {
+    var _a;
+    (_a = editor.value) == null ? void 0 : _a.destroy();
+  });
+  return editor;
+};
+
+// src/VueNodeViewRenderer.ts
+
+
+
+
+
+
+
+
+
+// src/VueRenderer.ts
+
+var VueRenderer = class {
+  constructor(component, { props = {}, editor }) {
+    this.id = Math.floor(Math.random() * 4294967295).toString();
+    this.editor = editor;
+    this.component = _vue.markRaw.call(void 0, component);
+    this.teleportElement = document.createElement("div");
+    this.element = this.teleportElement;
+    this.props = _vue.reactive.call(void 0, 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 _core.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 = _vue.ref.call(void 0, this.getDecorationClasses());
+    const extendedComponent = _vue.defineComponent.call(void 0, {
+      extends: { ...this.component },
+      props: Object.keys(props),
+      template: this.component.template,
+      setup: (reactiveProps) => {
+        var _a, _b;
+        _vue.provide.call(void 0, "onDragStart", onDragStart);
+        _vue.provide.call(void 0, "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
+
+
+
+
+
+
+
+
+
+
+
+
+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; exports.useEditor = useEditor;