@youcan/celeste 0.6.70 → 0.6.71

package/dist/es/chunks/index2.js

@@ -1,4 +1,4 @@
-import { getCurrentScope, onScopeDispose, computed, toRefs, toValue, watch, isRef, reactive, unref, getCurrentInstance, hasInjectionContext, inject } from "vue";
+import { watch, getCurrentScope, onScopeDispose, getCurrentInstance, hasInjectionContext, inject, computed, isRef, reactive, unref, toRefs, toValue } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -80,9 +80,9 @@ function watchImmediate(source, cb, options) {
 }
 export {
   tryOnScopeDispose as a,
-  isObject as b,
+  injectLocal as b,
   isDef as c,
-  injectLocal as d,
+  isObject as d,
   isClient as i,
   pxValue as p,
   reactiveOmit as r,

package/dist/es/chunks/index3.js

@@ -1,5 +1,5 @@
-import { i as isClient, t as toArray, w as watchImmediate, a as tryOnScopeDispose, p as pxValue, b as isObject, c as isDef, d as injectLocal } from "./index2.js";
-import { computed, toValue, shallowRef, watchEffect, getCurrentInstance, ref, watch, nextTick, unref, hasInjectionContext, onMounted } from "vue";
+import { p as pxValue, t as toArray, w as watchImmediate, a as tryOnScopeDispose, i as isClient, b as injectLocal, c as isDef, d as isObject } from "./index2.js";
+import { shallowRef, watchEffect, toValue, computed, getCurrentInstance, ref, watch, nextTick, hasInjectionContext, onMounted, unref } from "vue";
 const defaultWindow = isClient ? window : void 0;
 const defaultDocument = isClient ? window.document : void 0;
 function unrefElement(elRef) {

package/dist/es/chunks/index4.js

@@ -1,6 +1,6 @@
-import { P as PluginKey, S as Selection, k as keydownHandler, a as SelectionRange, T as TextSelection, F as Fragment, b as Slice, E as Extension, c as Plugin, i as isTextSelection, p as posToDOMRect, g as getText, d as getTextSerializersFromSchema } from "./index5.js";
 import { aN as flip, aO as shift, aP as offset, aQ as arrow$1, aR as size, aS as autoPlacement, aT as hide, aU as inline, aV as computePosition } from "./index.js";
-import { defineComponent, ref, onMounted, onBeforeUnmount, h, Teleport } from "vue";
+import { S as Selection, a as SelectionRange, T as TextSelection, F as Fragment, b as Slice, P as PluginKey, k as keydownHandler, c as Plugin, i as isTextSelection, p as posToDOMRect, N as NodeSelection, g as getText, d as getTextSerializersFromSchema } from "./index5.js";
+import { defineComponent, ref, onMounted, nextTick, onBeforeUnmount, h } from "vue";
 var readFromCache;
 var addToCache;
 if (typeof WeakMap != "undefined") {
@@ -823,10 +823,13 @@ var BubbleMenuView = class {
     updateDelay = 250,
     resizeDelay = 60,
     shouldShow,
+    appendTo,
+    getReferencedVirtualElement,
     options
   }) {
     this.preventHide = false;
     this.isVisible = false;
+    this.scrollTarget = window;
     this.floatingUIOptions = {
       strategy: "absolute",
       placement: "top",
@@ -872,12 +875,16 @@ var BubbleMenuView = class {
       setTimeout(() => this.update(this.editor.view));
     };
     this.blurHandler = ({ event }) => {
-      var _a;
+      var _a2;
+      if (this.editor.isDestroyed) {
+        this.destroy();
+        return;
+      }
       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))) {
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a2 = this.element.parentNode) == null ? void 0 : _a2.contains(event.relatedTarget))) {
         return;
       }
       if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
@@ -912,11 +919,21 @@ var BubbleMenuView = class {
       this.updatePosition();
       this.show();
     };
+    this.transactionHandler = ({ transaction: tr }) => {
+      const meta = tr.getMeta("bubbleMenu");
+      if (meta === "updatePosition") {
+        this.updatePosition();
+      }
+    };
+    var _a;
     this.editor = editor;
     this.element = element;
     this.view = view;
     this.updateDelay = updateDelay;
     this.resizeDelay = resizeDelay;
+    this.appendTo = appendTo;
+    this.scrollTarget = (_a = options == null ? void 0 : options.scrollTarget) != null ? _a : window;
+    this.getReferencedVirtualElement = getReferencedVirtualElement;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -929,10 +946,13 @@ var BubbleMenuView = class {
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
+    this.editor.on("transaction", this.transactionHandler);
     window.addEventListener("resize", this.resizeHandler);
+    this.scrollTarget.addEventListener("scroll", this.resizeHandler);
     this.update(view, view.state);
     if (this.getShouldShow()) {
       this.show();
+      this.updatePosition();
     }
   }
   get middlewares() {
@@ -973,13 +993,31 @@ var BubbleMenuView = class {
     }
     return middlewares;
   }
-  updatePosition() {
+  get virtualElement() {
+    var _a;
     const { selection } = this.editor.state;
+    const referencedVirtualElement = (_a = this.getReferencedVirtualElement) == null ? void 0 : _a.call(this);
+    if (referencedVirtualElement) {
+      return referencedVirtualElement;
+    }
     const domRect = posToDOMRect(this.view, selection.from, selection.to);
     let virtualElement = {
       getBoundingClientRect: () => domRect,
       getClientRects: () => [domRect]
     };
+    if (selection instanceof NodeSelection) {
+      let node = this.view.nodeDOM(selection.from);
+      const nodeViewWrapper = node.dataset.nodeViewWrapper ? node : node.querySelector("[data-node-view-wrapper]");
+      if (nodeViewWrapper) {
+        node = nodeViewWrapper;
+      }
+      if (node) {
+        virtualElement = {
+          getBoundingClientRect: () => node.getBoundingClientRect(),
+          getClientRects: () => [node.getBoundingClientRect()]
+        };
+      }
+    }
     if (selection instanceof CellSelection) {
       const { $anchorCell, $headCell } = selection;
       const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
@@ -998,6 +1036,13 @@ var BubbleMenuView = class {
         getClientRects: () => [clientRect]
       };
     }
+    return virtualElement;
+  }
+  updatePosition() {
+    const virtualElement = this.virtualElement;
+    if (!virtualElement) {
+      return;
+    }
     computePosition(virtualElement, this.element, {
       placement: this.floatingUIOptions.placement,
       strategy: this.floatingUIOptions.strategy,
@@ -1039,7 +1084,7 @@ var BubbleMenuView = class {
       from,
       to
     });
-    return shouldShow;
+    return shouldShow || false;
   }
   show() {
     var _a;
@@ -1048,7 +1093,8 @@ var BubbleMenuView = class {
     }
     this.element.style.visibility = "visible";
     this.element.style.opacity = "1";
-    (_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    const appendToElement = typeof this.appendTo === "function" ? this.appendTo() : this.appendTo;
+    (_a = appendToElement != null ? appendToElement : this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
     if (this.floatingUIOptions.onShow) {
       this.floatingUIOptions.onShow();
     }
@@ -1071,8 +1117,10 @@ var BubbleMenuView = class {
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
     window.removeEventListener("resize", this.resizeHandler);
+    this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    this.editor.off("transaction", this.transactionHandler);
     if (this.floatingUIOptions.onDestroy) {
       this.floatingUIOptions.onDestroy();
     }
@@ -1084,34 +1132,9 @@ var BubbleMenuPlugin = (options) => {
     view: (view) => new BubbleMenuView({ view, ...options })
   });
 };
-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
-      })
-    ];
-  }
-});
-var BubbleMenu2 = defineComponent({
+var BubbleMenu = defineComponent({
   name: "BubbleMenu",
+  inheritAttrs: false,
   props: {
     pluginKey: {
       type: [String, Object],
@@ -1133,32 +1156,54 @@ var BubbleMenu2 = defineComponent({
       type: Object,
       default: () => ({})
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
+    },
+    getReferencedVirtualElement: {
+      type: Function,
+      default: void 0
     }
   },
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const root = ref(null);
     onMounted(() => {
-      const { editor, options, pluginKey, resizeDelay, shouldShow, updateDelay } = props;
-      if (!root.value) {
+      const {
+        editor,
+        options,
+        pluginKey,
+        resizeDelay,
+        appendTo,
+        shouldShow,
+        getReferencedVirtualElement,
+        updateDelay
+      } = props;
+      const el = root.value;
+      if (!el) {
         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
-        })
-      );
+      el.style.visibility = "hidden";
+      el.style.position = "absolute";
+      el.remove();
+      nextTick(() => {
+        editor.registerPlugin(
+          BubbleMenuPlugin({
+            editor,
+            element: el,
+            options,
+            pluginKey,
+            resizeDelay,
+            appendTo,
+            shouldShow,
+            getReferencedVirtualElement,
+            updateDelay
+          })
+        );
+      });
     });
     onBeforeUnmount(() => {
       const { pluginKey, editor } = props;
@@ -1166,12 +1211,12 @@ var BubbleMenu2 = defineComponent({
     });
     return () => {
       var _a;
-      return h(Teleport, { to: "body" }, h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
+      return h("div", { ref: root, ...attrs }, (_a = slots.default) == null ? void 0 : _a.call(slots));
     };
   }
 });
 var FloatingMenuView = class {
-  constructor({ editor, element, view, options, shouldShow }) {
+  constructor({ editor, element, view, options, appendTo, shouldShow }) {
     this.preventHide = false;
     this.isVisible = false;
     this.shouldShow = ({ view: view2, state }) => {
@@ -1233,6 +1278,7 @@ var FloatingMenuView = class {
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.appendTo = appendTo;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -1247,6 +1293,7 @@ var FloatingMenuView = class {
     this.update(view, view.state);
     if (this.getShouldShow()) {
       this.show();
+      this.updatePosition();
     }
   }
   getTextContent(node) {
@@ -1340,7 +1387,8 @@ var FloatingMenuView = class {
     }
     this.element.style.visibility = "visible";
     this.element.style.opacity = "1";
-    (_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    const appendToElement = typeof this.appendTo === "function" ? this.appendTo() : this.appendTo;
+    (_a = appendToElement != null ? appendToElement : this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
     if (this.floatingUIOptions.onShow) {
       this.floatingUIOptions.onShow();
     }
@@ -1374,33 +1422,9 @@ var FloatingMenuPlugin = (options) => {
     view: (view) => new FloatingMenuView({ view, ...options })
   });
 };
-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
-      })
-    ];
-  }
-});
-var FloatingMenu2 = defineComponent({
+defineComponent({
   name: "FloatingMenu",
+  inheritAttrs: false,
   props: {
     pluginKey: {
       // TODO: TypeScript breaks :(
@@ -1416,27 +1440,33 @@ var FloatingMenu2 = defineComponent({
       type: Object,
       default: () => ({})
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
     }
   },
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const root = ref(null);
     onMounted(() => {
-      const { pluginKey, editor, options, shouldShow } = props;
-      if (!root.value) {
+      const { pluginKey, editor, options, appendTo, shouldShow } = props;
+      const el = root.value;
+      if (!el) {
         return;
       }
-      root.value.style.visibility = "hidden";
-      root.value.style.position = "absolute";
-      root.value.remove();
+      el.style.visibility = "hidden";
+      el.style.position = "absolute";
+      el.remove();
       editor.registerPlugin(
         FloatingMenuPlugin({
           pluginKey,
           editor,
-          element: root.value,
+          element: el,
           options,
+          appendTo,
           shouldShow
         })
       );
@@ -1447,11 +1477,10 @@ var FloatingMenu2 = defineComponent({
     });
     return () => {
       var _a;
-      return h(Teleport, { to: "body" }, h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
+      return h("div", { ref: root, ...attrs }, (_a = slots.default) == null ? void 0 : _a.call(slots));
     };
   }
 });
 export {
-  BubbleMenu2 as BubbleMenu,
-  FloatingMenu2 as FloatingMenu
+  BubbleMenu
 };