@tiptap/vue-3 3.0.0 → 3.0.2

package/dist/menus/index.cjs

@@ -0,0 +1,693 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menus/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BubbleMenu: () => BubbleMenu2,
+  FloatingMenu: () => FloatingMenu2
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../extension-bubble-menu/dist/index.js
+var import_core = require("@tiptap/core");
+var import_dom = require("@floating-ui/dom");
+var import_core2 = require("@tiptap/core");
+var import_state = require("@tiptap/pm/state");
+var import_tables = require("@tiptap/pm/tables");
+function combineDOMRects(rect1, rect2) {
+  const top = Math.min(rect1.top, rect2.top);
+  const bottom = Math.max(rect1.bottom, rect2.bottom);
+  const left = Math.min(rect1.left, rect2.left);
+  const right = Math.max(rect1.right, rect2.right);
+  const width = right - left;
+  const height = bottom - top;
+  const x = left;
+  const y = top;
+  return new DOMRect(x, y, width, height);
+}
+var BubbleMenuView = class {
+  constructor({
+    editor,
+    element,
+    view,
+    updateDelay = 250,
+    resizeDelay = 60,
+    shouldShow,
+    options
+  }) {
+    this.preventHide = false;
+    this.isVisible = false;
+    this.floatingUIOptions = {
+      strategy: "absolute",
+      placement: "top",
+      offset: 8,
+      flip: {},
+      shift: {},
+      arrow: false,
+      size: false,
+      autoPlacement: false,
+      hide: false,
+      inline: false,
+      onShow: void 0,
+      onHide: void 0,
+      onUpdate: void 0,
+      onDestroy: void 0
+    };
+    this.shouldShow = ({ view: view2, state, from, to }) => {
+      const { doc, selection } = state;
+      const { empty } = selection;
+      const isEmptyTextBlock = !doc.textBetween(from, to).length && (0, import_core2.isTextSelection)(state.selection);
+      const isChildOfMenu = this.element.contains(document.activeElement);
+      const hasEditorFocus = view2.hasFocus() || isChildOfMenu;
+      if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
+        return false;
+      }
+      return true;
+    };
+    this.mousedownHandler = () => {
+      this.preventHide = true;
+    };
+    this.dragstartHandler = () => {
+      this.hide();
+    };
+    this.resizeHandler = () => {
+      if (this.resizeDebounceTimer) {
+        clearTimeout(this.resizeDebounceTimer);
+      }
+      this.resizeDebounceTimer = window.setTimeout(() => {
+        this.updatePosition();
+      }, this.resizeDelay);
+    };
+    this.focusHandler = () => {
+      setTimeout(() => this.update(this.editor.view));
+    };
+    this.blurHandler = ({ event }) => {
+      var _a;
+      if (this.preventHide) {
+        this.preventHide = false;
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
+        return;
+      }
+      this.hide();
+    };
+    this.handleDebouncedUpdate = (view2, oldState) => {
+      const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view2.state.selection));
+      const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view2.state.doc));
+      if (!selectionChanged && !docChanged) {
+        return;
+      }
+      if (this.updateDebounceTimer) {
+        clearTimeout(this.updateDebounceTimer);
+      }
+      this.updateDebounceTimer = window.setTimeout(() => {
+        this.updateHandler(view2, selectionChanged, docChanged, oldState);
+      }, this.updateDelay);
+    };
+    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
+      const { composing } = view2;
+      const isSame = !selectionChanged && !docChanged;
+      if (composing || isSame) {
+        return;
+      }
+      const shouldShow2 = this.getShouldShow(oldState);
+      if (!shouldShow2) {
+        this.hide();
+        return;
+      }
+      this.updatePosition();
+      this.show();
+    };
+    this.editor = editor;
+    this.element = element;
+    this.view = view;
+    this.updateDelay = updateDelay;
+    this.resizeDelay = resizeDelay;
+    this.floatingUIOptions = {
+      ...this.floatingUIOptions,
+      ...options
+    };
+    this.element.tabIndex = 0;
+    if (shouldShow) {
+      this.shouldShow = shouldShow;
+    }
+    this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
+    this.editor.on("focus", this.focusHandler);
+    this.editor.on("blur", this.blurHandler);
+    window.addEventListener("resize", this.resizeHandler);
+    this.update(view, view.state);
+    if (this.getShouldShow()) {
+      this.show();
+    }
+  }
+  get middlewares() {
+    const middlewares = [];
+    if (this.floatingUIOptions.flip) {
+      middlewares.push((0, import_dom.flip)(typeof this.floatingUIOptions.flip !== "boolean" ? this.floatingUIOptions.flip : void 0));
+    }
+    if (this.floatingUIOptions.shift) {
+      middlewares.push(
+        (0, import_dom.shift)(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0)
+      );
+    }
+    if (this.floatingUIOptions.offset) {
+      middlewares.push(
+        (0, import_dom.offset)(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0)
+      );
+    }
+    if (this.floatingUIOptions.arrow) {
+      middlewares.push((0, import_dom.arrow)(this.floatingUIOptions.arrow));
+    }
+    if (this.floatingUIOptions.size) {
+      middlewares.push((0, import_dom.size)(typeof this.floatingUIOptions.size !== "boolean" ? this.floatingUIOptions.size : void 0));
+    }
+    if (this.floatingUIOptions.autoPlacement) {
+      middlewares.push(
+        (0, import_dom.autoPlacement)(
+          typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.hide) {
+      middlewares.push((0, import_dom.hide)(typeof this.floatingUIOptions.hide !== "boolean" ? this.floatingUIOptions.hide : void 0));
+    }
+    if (this.floatingUIOptions.inline) {
+      middlewares.push(
+        (0, import_dom.inline)(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0)
+      );
+    }
+    return middlewares;
+  }
+  updatePosition() {
+    const { selection } = this.editor.state;
+    let virtualElement = {
+      getBoundingClientRect: () => (0, import_core2.posToDOMRect)(this.view, selection.from, selection.to)
+    };
+    if (selection instanceof import_tables.CellSelection) {
+      const { $anchorCell, $headCell } = selection;
+      const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
+      const to = $headCell ? $headCell.pos : $anchorCell.pos;
+      const fromDOM = this.view.nodeDOM(from);
+      const toDOM = this.view.nodeDOM(to);
+      if (!fromDOM || !toDOM) {
+        return;
+      }
+      const clientRect = fromDOM === toDOM ? fromDOM.getBoundingClientRect() : combineDOMRects(
+        fromDOM.getBoundingClientRect(),
+        toDOM.getBoundingClientRect()
+      );
+      virtualElement = {
+        getBoundingClientRect: () => clientRect
+      };
+    }
+    (0, import_dom.computePosition)(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares
+    }).then(({ x, y, strategy }) => {
+      this.element.style.width = "max-content";
+      this.element.style.position = strategy;
+      this.element.style.left = `${x}px`;
+      this.element.style.top = `${y}px`;
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate();
+      }
+    });
+  }
+  update(view, oldState) {
+    const { state } = view;
+    const hasValidSelection = state.selection.from !== state.selection.to;
+    if (this.updateDelay > 0 && hasValidSelection) {
+      this.handleDebouncedUpdate(view, oldState);
+      return;
+    }
+    const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
+    const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
+    this.updateHandler(view, selectionChanged, docChanged, oldState);
+  }
+  getShouldShow(oldState) {
+    var _a;
+    const { state } = this.view;
+    const { selection } = state;
+    const { ranges } = selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    const shouldShow = (_a = this.shouldShow) == null ? void 0 : _a.call(this, {
+      editor: this.editor,
+      element: this.element,
+      view: this.view,
+      state,
+      oldState,
+      from,
+      to
+    });
+    return shouldShow;
+  }
+  show() {
+    var _a;
+    if (this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "visible";
+    this.element.style.opacity = "1";
+    (_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow();
+    }
+    this.isVisible = true;
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "hidden";
+    this.element.style.opacity = "0";
+    this.element.remove();
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide();
+    }
+    this.isVisible = false;
+  }
+  destroy() {
+    this.hide();
+    this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+    this.editor.off("focus", this.focusHandler);
+    this.editor.off("blur", this.blurHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
+  }
+};
+var BubbleMenuPlugin = (options) => {
+  return new import_state.Plugin({
+    key: typeof options.pluginKey === "string" ? new import_state.PluginKey(options.pluginKey) : options.pluginKey,
+    view: (view) => new BubbleMenuView({ view, ...options })
+  });
+};
+var BubbleMenu = import_core.Extension.create({
+  name: "bubbleMenu",
+  addOptions() {
+    return {
+      element: null,
+      pluginKey: "bubbleMenu",
+      updateDelay: void 0,
+      shouldShow: null
+    };
+  },
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return [];
+    }
+    return [
+      BubbleMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        updateDelay: this.options.updateDelay,
+        options: this.options.options,
+        shouldShow: this.options.shouldShow
+      })
+    ];
+  }
+});
+
+// src/menus/BubbleMenu.ts
+var import_vue = require("vue");
+var BubbleMenu2 = (0, import_vue.defineComponent)({
+  name: "BubbleMenu",
+  props: {
+    pluginKey: {
+      type: [String, Object],
+      default: "bubbleMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    updateDelay: {
+      type: Number,
+      default: void 0
+    },
+    resizeDelay: {
+      type: Number,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const root = (0, import_vue.ref)(null);
+    (0, import_vue.onMounted)(() => {
+      const { editor, options, pluginKey, resizeDelay, shouldShow, updateDelay } = props;
+      if (!root.value) {
+        return;
+      }
+      root.value.style.visibility = "hidden";
+      root.value.style.position = "absolute";
+      root.value.remove();
+      editor.registerPlugin(
+        BubbleMenuPlugin({
+          editor,
+          element: root.value,
+          options,
+          pluginKey,
+          resizeDelay,
+          shouldShow,
+          updateDelay
+        })
+      );
+    });
+    (0, import_vue.onBeforeUnmount)(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return (0, import_vue.h)(import_vue.Teleport, { to: "body" }, (0, import_vue.h)("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
+    };
+  }
+});
+
+// ../extension-floating-menu/dist/index.js
+var import_core3 = require("@tiptap/core");
+var import_dom2 = require("@floating-ui/dom");
+var import_core4 = require("@tiptap/core");
+var import_state2 = require("@tiptap/pm/state");
+var FloatingMenuView = class {
+  constructor({ editor, element, view, options, shouldShow }) {
+    this.preventHide = false;
+    this.isVisible = false;
+    this.shouldShow = ({ view: view2, state }) => {
+      const { selection } = state;
+      const { $anchor, empty } = selection;
+      const isRootDepth = $anchor.depth === 1;
+      const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent && $anchor.parent.childCount === 0 && !this.getTextContent($anchor.parent);
+      if (!view2.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
+        return false;
+      }
+      return true;
+    };
+    this.floatingUIOptions = {
+      strategy: "absolute",
+      placement: "right",
+      offset: 8,
+      flip: {},
+      shift: {},
+      arrow: false,
+      size: false,
+      autoPlacement: false,
+      hide: false,
+      inline: false
+    };
+    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
+      const { composing } = view2;
+      const isSame = !selectionChanged && !docChanged;
+      if (composing || isSame) {
+        return;
+      }
+      const shouldShow2 = this.getShouldShow(oldState);
+      if (!shouldShow2) {
+        this.hide();
+        return;
+      }
+      this.updatePosition();
+      this.show();
+    };
+    this.mousedownHandler = () => {
+      this.preventHide = true;
+    };
+    this.focusHandler = () => {
+      setTimeout(() => this.update(this.editor.view));
+    };
+    this.blurHandler = ({ event }) => {
+      var _a;
+      if (this.preventHide) {
+        this.preventHide = false;
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
+        return;
+      }
+      this.hide();
+    };
+    this.editor = editor;
+    this.element = element;
+    this.view = view;
+    this.floatingUIOptions = {
+      ...this.floatingUIOptions,
+      ...options
+    };
+    this.element.tabIndex = 0;
+    if (shouldShow) {
+      this.shouldShow = shouldShow;
+    }
+    this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.editor.on("focus", this.focusHandler);
+    this.editor.on("blur", this.blurHandler);
+    this.update(view, view.state);
+    if (this.getShouldShow()) {
+      this.show();
+    }
+  }
+  getTextContent(node) {
+    return (0, import_core4.getText)(node, { textSerializers: (0, import_core4.getTextSerializersFromSchema)(this.editor.schema) });
+  }
+  get middlewares() {
+    const middlewares = [];
+    if (this.floatingUIOptions.flip) {
+      middlewares.push((0, import_dom2.flip)(typeof this.floatingUIOptions.flip !== "boolean" ? this.floatingUIOptions.flip : void 0));
+    }
+    if (this.floatingUIOptions.shift) {
+      middlewares.push(
+        (0, import_dom2.shift)(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0)
+      );
+    }
+    if (this.floatingUIOptions.offset) {
+      middlewares.push(
+        (0, import_dom2.offset)(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0)
+      );
+    }
+    if (this.floatingUIOptions.arrow) {
+      middlewares.push((0, import_dom2.arrow)(this.floatingUIOptions.arrow));
+    }
+    if (this.floatingUIOptions.size) {
+      middlewares.push((0, import_dom2.size)(typeof this.floatingUIOptions.size !== "boolean" ? this.floatingUIOptions.size : void 0));
+    }
+    if (this.floatingUIOptions.autoPlacement) {
+      middlewares.push(
+        (0, import_dom2.autoPlacement)(
+          typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.hide) {
+      middlewares.push((0, import_dom2.hide)(typeof this.floatingUIOptions.hide !== "boolean" ? this.floatingUIOptions.hide : void 0));
+    }
+    if (this.floatingUIOptions.inline) {
+      middlewares.push(
+        (0, import_dom2.inline)(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0)
+      );
+    }
+    return middlewares;
+  }
+  getShouldShow(oldState) {
+    var _a;
+    const { state } = this.view;
+    const { selection } = state;
+    const { ranges } = selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    const shouldShow = (_a = this.shouldShow) == null ? void 0 : _a.call(this, {
+      editor: this.editor,
+      view: this.view,
+      state,
+      oldState,
+      from,
+      to
+    });
+    return shouldShow;
+  }
+  updatePosition() {
+    const { selection } = this.editor.state;
+    const virtualElement = {
+      getBoundingClientRect: () => (0, import_core4.posToDOMRect)(this.view, selection.from, selection.to)
+    };
+    (0, import_dom2.computePosition)(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares
+    }).then(({ x, y, strategy }) => {
+      this.element.style.width = "max-content";
+      this.element.style.position = strategy;
+      this.element.style.left = `${x}px`;
+      this.element.style.top = `${y}px`;
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate();
+      }
+    });
+  }
+  update(view, oldState) {
+    const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
+    const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
+    this.updateHandler(view, selectionChanged, docChanged, oldState);
+  }
+  show() {
+    var _a;
+    if (this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "visible";
+    this.element.style.opacity = "1";
+    (_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow();
+    }
+    this.isVisible = true;
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "hidden";
+    this.element.style.opacity = "0";
+    this.element.remove();
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide();
+    }
+    this.isVisible = false;
+  }
+  destroy() {
+    this.hide();
+    this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.editor.off("focus", this.focusHandler);
+    this.editor.off("blur", this.blurHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
+  }
+};
+var FloatingMenuPlugin = (options) => {
+  return new import_state2.Plugin({
+    key: typeof options.pluginKey === "string" ? new import_state2.PluginKey(options.pluginKey) : options.pluginKey,
+    view: (view) => new FloatingMenuView({ view, ...options })
+  });
+};
+var FloatingMenu = import_core3.Extension.create({
+  name: "floatingMenu",
+  addOptions() {
+    return {
+      element: null,
+      options: {},
+      pluginKey: "floatingMenu",
+      shouldShow: null
+    };
+  },
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return [];
+    }
+    return [
+      FloatingMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        options: this.options.options,
+        shouldShow: this.options.shouldShow
+      })
+    ];
+  }
+});
+
+// src/menus/FloatingMenu.ts
+var import_vue2 = require("vue");
+var FloatingMenu2 = (0, import_vue2.defineComponent)({
+  name: "FloatingMenu",
+  props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: "floatingMenu"
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const root = (0, import_vue2.ref)(null);
+    (0, import_vue2.onMounted)(() => {
+      const { pluginKey, editor, options, shouldShow } = props;
+      if (!root.value) {
+        return;
+      }
+      root.value.style.visibility = "hidden";
+      root.value.style.position = "absolute";
+      root.value.remove();
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey,
+          editor,
+          element: root.value,
+          options,
+          shouldShow
+        })
+      );
+    });
+    (0, import_vue2.onBeforeUnmount)(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return (0, import_vue2.h)(import_vue2.Teleport, { to: "body" }, (0, import_vue2.h)("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BubbleMenu,
+  FloatingMenu
+});
+//# sourceMappingURL=index.cjs.map