@milkdown/plugin-tooltip 7.5.3 → 7.5.9

package/lib/index.es.js

@@ -1,81 +1,83 @@
-var k = (o, t, e) => {
-  if (!t.has(o))
-    throw TypeError("Cannot " + e);
+var S = (o) => {
+  throw TypeError(o);
 };
-var n = (o, t, e) => (k(o, t, "read from private field"), e ? e.call(o) : t.get(o)), l = (o, t, e) => {
-  if (t.has(o))
-    throw TypeError("Cannot add the same private member more than once");
-  t instanceof WeakSet ? t.add(o) : t.set(o, e);
-}, h = (o, t, e, s) => (k(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
-var T = (o, t, e) => (k(o, t, "access private method"), e);
-import { TextSelection as B, Plugin as F, PluginKey as H } from "@milkdown/prose/state";
-import M from "lodash.debounce";
-import { computePosition as O, flip as S, offset as b } from "@floating-ui/dom";
-import { posToDOMRect as R } from "@milkdown/prose";
-import { $ctx as j, $prose as q } from "@milkdown/utils";
-var r, d, c, a, u, y, C;
-class A {
+var P = (o, t, e) => t.has(o) || S("Cannot " + e);
+var i = (o, t, e) => (P(o, t, "read from private field"), e ? e.call(o) : t.get(o)), n = (o, t, e) => t.has(o) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), l = (o, t, e, s) => (P(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e), b = (o, t, e) => (P(o, t, "access private method"), e);
+import { TextSelection as H, Plugin as M, PluginKey as R } from "@milkdown/prose/state";
+import U from "lodash.debounce";
+import { computePosition as C, flip as E, offset as I, shift as j } from "@floating-ui/dom";
+import { posToDOMRect as q } from "@milkdown/prose";
+import { $ctx as K, $prose as L } from "@milkdown/utils";
+var r, d, u, f, a, c, g, $, _;
+class V {
   constructor(t) {
+    n(this, $);
     /// @internal
-    l(this, y);
+    n(this, r);
     /// @internal
-    l(this, r, void 0);
+    n(this, d);
     /// @internal
-    l(this, d, void 0);
-    l(this, c, void 0);
+    n(this, u);
     /// @internal
-    l(this, a, void 0);
-    l(this, u, void 0);
-    h(this, c, !1), this.onShow = () => {
+    n(this, f);
+    n(this, a);
+    /// @internal
+    n(this, c);
+    n(this, g);
+    l(this, a, !1), this.onShow = () => {
     }, this.onHide = () => {
-    }, h(this, u, (e, s) => {
-      var P;
-      const { state: i, composing: p } = e, { selection: f, doc: w } = i, { ranges: g } = f, $ = Math.min(...g.map((m) => m.$from.pos)), x = Math.max(...g.map((m) => m.$to.pos)), E = s && s.doc.eq(w) && s.selection.eq(f);
-      if (n(this, c) || ((P = e.dom.parentElement) == null || P.appendChild(this.element), h(this, c, !0)), p || E)
-        return;
-      if (!n(this, d).call(this, e, s)) {
+    }, l(this, g, (e, s) => {
+      var T;
+      const { state: h, composing: m } = e, { selection: y, doc: x } = h, { ranges: w } = y, k = Math.min(...w.map((p) => p.$from.pos)), O = Math.max(...w.map((p) => p.$to.pos)), B = s && s.doc.eq(x) && s.selection.eq(y);
+      if (i(this, a) || ((T = e.dom.parentElement) == null || T.appendChild(this.element), l(this, a, !0)), m || B) return;
+      if (!i(this, d).call(this, e, s)) {
         this.hide();
         return;
       }
-      O({
-        getBoundingClientRect: () => R(e, $, x)
+      C({
+        getBoundingClientRect: () => q(e, k, O)
       }, this.element, {
         placement: "top",
-        middleware: [S(), b(n(this, a))]
-      }).then(({ x: m, y: _ }) => {
+        middleware: [E(), I(i(this, c)), j(), ...i(this, u)]
+      }).then(({ x: p, y: F }) => {
         Object.assign(this.element.style, {
-          left: `${m}px`,
-          top: `${_}px`
+          left: `${p}px`,
+          top: `${F}px`
         });
       }), this.show();
     }), this.update = (e, s) => {
-      M(n(this, u), n(this, r))(e, s);
+      U(i(this, g), i(this, r))(e, s);
     }, this.destroy = () => {
     }, this.show = (e) => {
-      this.element.dataset.show = "true", e && O(e, this.element, {
+      this.element.dataset.show = "true", e && C(e, this.element, {
         placement: "top",
-        middleware: [S(), b(n(this, a))]
-      }).then(({ x: s, y: i }) => {
+        middleware: [E(), I(i(this, c))],
+        ...i(this, f)
+      }).then(({ x: s, y: h }) => {
         Object.assign(this.element.style, {
           left: `${s}px`,
-          top: `${i}px`
+          top: `${h}px`
         });
       }), this.onShow();
     }, this.hide = () => {
       this.element.dataset.show !== "false" && (this.element.dataset.show = "false", this.onHide());
-    }, this.element = t.content, h(this, r, t.debounce ?? 200), h(this, d, t.shouldShow ?? T(this, y, C)), h(this, a, t.offset), this.element.dataset.show = "false";
+    }, this.element = t.content, l(this, r, t.debounce ?? 200), l(this, d, t.shouldShow ?? b(this, $, _)), l(this, c, t.offset), l(this, u, t.middleware ?? []), l(this, f, t.floatingUIOptions ?? {}), this.element.dataset.show = "false";
   }
 }
-r = new WeakMap(), d = new WeakMap(), c = new WeakMap(), a = new WeakMap(), u = new WeakMap(), y = new WeakSet(), C = function(t) {
-  const { doc: e, selection: s } = t.state, { empty: i, from: p, to: f } = s, w = !e.textBetween(p, f).length && t.state.selection instanceof B, g = this.element.contains(document.activeElement), $ = !t.hasFocus() && !g, x = !t.editable;
-  return !($ || i || w || x);
+r = new WeakMap(), d = new WeakMap(), u = new WeakMap(), f = new WeakMap(), a = new WeakMap(), c = new WeakMap(), g = new WeakMap(), $ = new WeakSet(), /// @internal
+_ = function(t) {
+  const { doc: e, selection: s } = t.state, { empty: h, from: m, to: y } = s, x = !e.textBetween(m, y).length && t.state.selection instanceof H, w = this.element.contains(document.activeElement), k = !t.hasFocus() && !w, O = !t.editable;
+  return !(k || h || x || O);
 };
-function G(o) {
-  const t = j({}, `${o}_TOOLTIP_SPEC`), e = q((i) => {
-    const p = i.get(t.key);
-    return new F({
-      key: new H(`${o}_TOOLTIP`),
-      ...p
+function W(o) {
+  const t = K(
+    {},
+    `${o}_TOOLTIP_SPEC`
+  ), e = L((h) => {
+    const m = h.get(t.key);
+    return new M({
+      key: new R(`${o}_TOOLTIP`),
+      ...m
     });
   }), s = [t, e];
   return s.key = t.key, s.pluginKey = e.key, t.meta = {
@@ -87,7 +89,7 @@ function G(o) {
   }, s;
 }
 export {
-  A as TooltipProvider,
-  G as tooltipFactory
+  V as TooltipProvider,
+  W as tooltipFactory
 };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["import type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport debounce from 'lodash.debounce'\nimport type { VirtualElement } from '@floating-ui/dom'\nimport { computePosition, flip, offset } from '@floating-ui/dom'\nimport { posToDOMRect } from '@milkdown/prose'\n\n/// Options for tooltip provider.\nexport interface TooltipProviderOptions {\n  /// The tooltip content.\n  content: HTMLElement\n  /// The debounce time for updating tooltip, 200ms by default.\n  debounce?: number\n  /// The function to determine whether the tooltip should be shown.\n  shouldShow?: (view: EditorView, prevState?: EditorState) => boolean\n  /// The offset to get the block. Default is 0.\n  offset?: number | {\n    mainAxis?: number\n    crossAxis?: number\n    alignmentAxis?: number | null\n  }\n}\n\n/// A provider for creating tooltip.\nexport class TooltipProvider {\n  /// @internal\n  readonly #debounce: number\n\n  /// @internal\n  readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean\n\n  /// @internal\n  #initialized = false\n\n  /// @internal\n  readonly #offset?: number | {\n    mainAxis?: number\n    crossAxis?: number\n    alignmentAxis?: number | null\n  }\n\n  /// The root element of the tooltip.\n  element: HTMLElement\n\n  /// On show callback.\n  onShow = () => {}\n\n  /// On hide callback.\n  onHide = () => {}\n\n  constructor(options: TooltipProviderOptions) {\n    this.element = options.content\n    this.#debounce = options.debounce ?? 200\n    this.#shouldShow = options.shouldShow ?? this.#_shouldShow\n    this.#offset = options.offset\n    this.element.dataset.show = 'false'\n  }\n\n  /// @internal\n  #onUpdate = (view: EditorView, prevState?: EditorState): void => {\n    const { state, composing } = view\n    const { selection, doc } = state\n    const { ranges } = selection\n    const from = Math.min(...ranges.map(range => range.$from.pos))\n    const to = Math.max(...ranges.map(range => range.$to.pos))\n    const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)\n\n    if (!this.#initialized) {\n      view.dom.parentElement?.appendChild(this.element)\n      this.#initialized = true\n    }\n\n    if (composing || isSame)\n      return\n\n    if (!this.#shouldShow(view, prevState)) {\n      this.hide()\n      return\n    }\n\n    const virtualEl: VirtualElement = {\n      getBoundingClientRect: () => posToDOMRect(view, from, to),\n    }\n    computePosition(virtualEl, this.element, {\n      placement: 'top',\n      middleware: [flip(), offset(this.#offset)],\n    })\n      .then(({ x, y }) => {\n        Object.assign(this.element.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        })\n      })\n\n    this.show()\n  }\n\n  /// Update provider state by editor view.\n  update = (view: EditorView, prevState?: EditorState): void => {\n    const updater = debounce(this.#onUpdate, this.#debounce)\n\n    updater(view, prevState)\n  }\n\n  /// @internal\n  #_shouldShow(view: EditorView): boolean {\n    const { doc, selection } = view.state\n    const { empty, from, to } = selection\n\n    const isEmptyTextBlock = !doc.textBetween(from, to).length && view.state.selection instanceof TextSelection\n\n    const isTooltipChildren = this.element.contains(document.activeElement)\n\n    const notHasFocus = !view.hasFocus() && !isTooltipChildren\n\n    const isReadonly = !view.editable\n\n    if (\n      notHasFocus\n      || empty\n      || isEmptyTextBlock\n      || isReadonly\n    )\n      return false\n\n    return true\n  }\n\n  /// Destroy the tooltip.\n  destroy = () => {}\n\n  /// Show the tooltip.\n  show = (virtualElement?: VirtualElement) => {\n    this.element.dataset.show = 'true'\n\n    if (virtualElement) {\n      computePosition(virtualElement, this.element, {\n        placement: 'top',\n        middleware: [flip(), offset(this.#offset)],\n      })\n        .then(({ x, y }) => {\n          Object.assign(this.element.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n          })\n        })\n    }\n\n    this.onShow()\n  }\n\n  /// Hide the tooltip.\n  hide = () => {\n    if (this.element.dataset.show === 'false')\n      return\n    this.element.dataset.show = 'false'\n\n    this.onHide()\n  }\n}\n","import type { SliceType } from '@milkdown/ctx'\nimport type { PluginSpec } from '@milkdown/prose/state'\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport type { $Ctx, $Prose } from '@milkdown/utils'\nimport { $ctx, $prose } from '@milkdown/utils'\n\n/// @internal\nexport type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`\n\n/// @internal\nexport type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, TooltipSpecId<Id>>, $Prose] & {\n  key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>\n  pluginKey: $Prose['key']\n}\n\n/// Create a tooltip plugin with a unique id.\nexport function tooltipFactory<Id extends string, State = any>(id: Id) {\n  const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>({}, `${id}_TOOLTIP_SPEC`)\n  const tooltipPlugin = $prose((ctx) => {\n    const spec = ctx.get(tooltipSpec.key)\n    return new Plugin({\n      key: new PluginKey(`${id}_TOOLTIP`),\n      ...spec,\n    })\n  })\n  const result = [tooltipSpec, tooltipPlugin] as TooltipPlugin<Id>\n  result.key = tooltipSpec.key\n  result.pluginKey = tooltipPlugin.key\n  tooltipSpec.meta = {\n    package: '@milkdown/plugin-tooltip',\n    displayName: `Ctx<tooltipSpec>|${id}`,\n  }\n  tooltipPlugin.meta = {\n    package: '@milkdown/plugin-tooltip',\n    displayName: `Prose<tooltip>|${id}`,\n  }\n\n  return result\n}\n"],"names":["TooltipProvider","options","__privateAdd","__shouldShow","_debounce","_shouldShow","_initialized","_offset","_onUpdate","__privateSet","view","prevState","state","composing","selection","doc","ranges","from","range","to","isSame","__privateGet","_a","computePosition","posToDOMRect","flip","offset","x","y","debounce","virtualElement","__privateMethod","_shouldShow_fn","empty","isEmptyTextBlock","TextSelection","isTooltipChildren","notHasFocus","isReadonly","tooltipFactory","id","tooltipSpec","$ctx","tooltipPlugin","$prose","ctx","spec","Plugin","PluginKey","result"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["import type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport debounce from 'lodash.debounce'\nimport type {\n  ComputePositionConfig,\n  Middleware,\n  VirtualElement,\n} from '@floating-ui/dom'\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { posToDOMRect } from '@milkdown/prose'\n\n/// Options for tooltip provider.\nexport interface TooltipProviderOptions {\n  /// The tooltip content.\n  content: HTMLElement\n  /// The debounce time for updating tooltip, 200ms by default.\n  debounce?: number\n  /// The function to determine whether the tooltip should be shown.\n  shouldShow?: (view: EditorView, prevState?: EditorState) => boolean\n  /// The offset to get the block. Default is 0.\n  offset?:\n    | number\n    | {\n        mainAxis?: number\n        crossAxis?: number\n        alignmentAxis?: number | null\n      }\n  /// Other middlewares for floating ui. This will be added after the internal middlewares.\n  middleware?: Middleware[]\n  /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.\n  floatingUIOptions?: Partial<ComputePositionConfig>\n}\n\n/// A provider for creating tooltip.\nexport class TooltipProvider {\n  /// @internal\n  readonly #debounce: number\n\n  /// @internal\n  readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean\n\n  /// @internal\n  readonly #middleware: Middleware[]\n\n  /// @internal\n  readonly #floatingUIOptions: Partial<ComputePositionConfig>\n\n  /// @internal\n  #initialized = false\n\n  /// @internal\n  readonly #offset?:\n    | number\n    | {\n        mainAxis?: number\n        crossAxis?: number\n        alignmentAxis?: number | null\n      }\n\n  /// The root element of the tooltip.\n  element: HTMLElement\n\n  /// On show callback.\n  onShow = () => {}\n\n  /// On hide callback.\n  onHide = () => {}\n\n  constructor(options: TooltipProviderOptions) {\n    this.element = options.content\n    this.#debounce = options.debounce ?? 200\n    this.#shouldShow = options.shouldShow ?? this.#_shouldShow\n    this.#offset = options.offset\n    this.#middleware = options.middleware ?? []\n    this.#floatingUIOptions = options.floatingUIOptions ?? {}\n    this.element.dataset.show = 'false'\n  }\n\n  /// @internal\n  #onUpdate = (view: EditorView, prevState?: EditorState): void => {\n    const { state, composing } = view\n    const { selection, doc } = state\n    const { ranges } = selection\n    const from = Math.min(...ranges.map((range) => range.$from.pos))\n    const to = Math.max(...ranges.map((range) => range.$to.pos))\n    const isSame =\n      prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)\n\n    if (!this.#initialized) {\n      view.dom.parentElement?.appendChild(this.element)\n      this.#initialized = true\n    }\n\n    if (composing || isSame) return\n\n    if (!this.#shouldShow(view, prevState)) {\n      this.hide()\n      return\n    }\n\n    const virtualEl: VirtualElement = {\n      getBoundingClientRect: () => posToDOMRect(view, from, to),\n    }\n    computePosition(virtualEl, this.element, {\n      placement: 'top',\n      middleware: [flip(), offset(this.#offset), shift(), ...this.#middleware],\n    }).then(({ x, y }) => {\n      Object.assign(this.element.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      })\n    })\n\n    this.show()\n  }\n\n  /// Update provider state by editor view.\n  update = (view: EditorView, prevState?: EditorState): void => {\n    const updater = debounce(this.#onUpdate, this.#debounce)\n\n    updater(view, prevState)\n  }\n\n  /// @internal\n  #_shouldShow(view: EditorView): boolean {\n    const { doc, selection } = view.state\n    const { empty, from, to } = selection\n\n    const isEmptyTextBlock =\n      !doc.textBetween(from, to).length &&\n      view.state.selection instanceof TextSelection\n\n    const isTooltipChildren = this.element.contains(document.activeElement)\n\n    const notHasFocus = !view.hasFocus() && !isTooltipChildren\n\n    const isReadonly = !view.editable\n\n    if (notHasFocus || empty || isEmptyTextBlock || isReadonly) return false\n\n    return true\n  }\n\n  /// Destroy the tooltip.\n  destroy = () => {}\n\n  /// Show the tooltip.\n  show = (virtualElement?: VirtualElement) => {\n    this.element.dataset.show = 'true'\n\n    if (virtualElement) {\n      computePosition(virtualElement, this.element, {\n        placement: 'top',\n        middleware: [flip(), offset(this.#offset)],\n        ...this.#floatingUIOptions,\n      }).then(({ x, y }) => {\n        Object.assign(this.element.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        })\n      })\n    }\n\n    this.onShow()\n  }\n\n  /// Hide the tooltip.\n  hide = () => {\n    if (this.element.dataset.show === 'false') return\n    this.element.dataset.show = 'false'\n\n    this.onHide()\n  }\n}\n","import type { SliceType } from '@milkdown/ctx'\nimport type { PluginSpec } from '@milkdown/prose/state'\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport type { $Ctx, $Prose } from '@milkdown/utils'\nimport { $ctx, $prose } from '@milkdown/utils'\n\n/// @internal\nexport type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`\n\n/// @internal\nexport type TooltipPlugin<Id extends string, State = any> = [\n  $Ctx<PluginSpec<State>, TooltipSpecId<Id>>,\n  $Prose,\n] & {\n  key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>\n  pluginKey: $Prose['key']\n}\n\n/// Create a tooltip plugin with a unique id.\nexport function tooltipFactory<Id extends string, State = any>(id: Id) {\n  const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>(\n    {},\n    `${id}_TOOLTIP_SPEC`\n  )\n  const tooltipPlugin = $prose((ctx) => {\n    const spec = ctx.get(tooltipSpec.key)\n    return new Plugin({\n      key: new PluginKey(`${id}_TOOLTIP`),\n      ...spec,\n    })\n  })\n  const result = [tooltipSpec, tooltipPlugin] as TooltipPlugin<Id>\n  result.key = tooltipSpec.key\n  result.pluginKey = tooltipPlugin.key\n  tooltipSpec.meta = {\n    package: '@milkdown/plugin-tooltip',\n    displayName: `Ctx<tooltipSpec>|${id}`,\n  }\n  tooltipPlugin.meta = {\n    package: '@milkdown/plugin-tooltip',\n    displayName: `Prose<tooltip>|${id}`,\n  }\n\n  return result\n}\n"],"names":["TooltipProvider","options","__privateAdd","_TooltipProvider_instances","_debounce","_shouldShow","_middleware","_floatingUIOptions","_initialized","_offset","_onUpdate","__privateSet","view","prevState","state","composing","selection","doc","ranges","from","range","to","isSame","__privateGet","_a","computePosition","posToDOMRect","flip","offset","shift","x","y","debounce","virtualElement","__privateMethod","_shouldShow_fn","empty","isEmptyTextBlock","TextSelection","isTooltipChildren","notHasFocus","isReadonly","tooltipFactory","id","tooltipSpec","$ctx","tooltipPlugin","$prose","ctx","spec","Plugin","PluginKey","result"],"mappings":"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"}

package/lib/tooltip-plugin.d.ts

@@ -2,7 +2,10 @@ import type { SliceType } from '@milkdown/ctx';
 import type { PluginSpec } from '@milkdown/prose/state';
 import type { $Ctx, $Prose } from '@milkdown/utils';
 export type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`;
-export type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, TooltipSpecId<Id>>, $Prose] & {
+export type TooltipPlugin<Id extends string, State = any> = [
+    $Ctx<PluginSpec<State>, TooltipSpecId<Id>>,
+    $Prose
+] & {
     key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>;
     pluginKey: $Prose['key'];
 };

package/lib/tooltip-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAInD,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,IAAI,GAAG,EAAE,eAAe,CAAA;AAGnE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IACjH,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,CAAA;IACpD,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;CACzB,CAAA;AAGD,wBAAgB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,EAAE,EAAE,EAAE,0BAsBpE"}
+{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAInD,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,IAAI,GAAG,EAAE,eAAe,CAAA;AAGnE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,IAAI;IAC1D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC;IAC1C,MAAM;CACP,GAAG;IACF,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,CAAA;IACpD,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;CACzB,CAAA;AAGD,wBAAgB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,EAAE,EAAE,EAAE,0BAyBpE"}

package/lib/tooltip-provider.d.ts

@@ -1,6 +1,6 @@
 import type { EditorState } from '@milkdown/prose/state';
 import type { EditorView } from '@milkdown/prose/view';
-import type { VirtualElement } from '@floating-ui/dom';
+import type { ComputePositionConfig, Middleware, VirtualElement } from '@floating-ui/dom';
 export interface TooltipProviderOptions {
     content: HTMLElement;
     debounce?: number;
@@ -10,6 +10,8 @@ export interface TooltipProviderOptions {
         crossAxis?: number;
         alignmentAxis?: number | null;
     };
+    middleware?: Middleware[];
+    floatingUIOptions?: Partial<ComputePositionConfig>;
 }
 export declare class TooltipProvider {
     #private;

package/lib/tooltip-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAKtD,MAAM,WAAW,sBAAsB;IAErC,OAAO,EAAE,WAAW,CAAA;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;IAEnE,MAAM,CAAC,EAAE,MAAM,GAAG;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAC9B,CAAA;CACF;AAGD,qBAAa,eAAe;;IAkB1B,OAAO,EAAE,WAAW,CAAA;IAGpB,MAAM,aAAW;IAGjB,MAAM,aAAW;gBAEL,OAAO,EAAE,sBAAsB;IAgD3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IA2BD,OAAO,aAAW;IAGlB,IAAI,oBAAqB,cAAc,UAiBtC;IAGD,IAAI,aAMH;CACF"}
+{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EACV,qBAAqB,EACrB,UAAU,EACV,cAAc,EACf,MAAM,kBAAkB,CAAA;AAKzB,MAAM,WAAW,sBAAsB;IAErC,OAAO,EAAE,WAAW,CAAA;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;IAEnE,MAAM,CAAC,EACH,MAAM,GACN;QACE,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAC9B,CAAA;IAEL,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IAEzB,iBAAiB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAA;CACnD;AAGD,qBAAa,eAAe;;IA0B1B,OAAO,EAAE,WAAW,CAAA;IAGpB,MAAM,aAAW;IAGjB,MAAM,aAAW;gBAEL,OAAO,EAAE,sBAAsB;IAiD3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IAuBD,OAAO,aAAW;IAGlB,IAAI,oBAAqB,cAAc,UAiBtC;IAGD,IAAI,aAKH;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/plugin-tooltip",
   "type": "module",
-  "version": "7.5.3",
+  "version": "7.5.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,13 +35,13 @@
     "lodash.debounce": "^4.0.8",
     "tippy.js": "^6.3.7",
     "tslib": "^2.5.0",
-    "@milkdown/exception": "7.5.0",
-    "@milkdown/utils": "7.5.0"
+    "@milkdown/exception": "7.5.9",
+    "@milkdown/utils": "7.5.9"
   },
   "devDependencies": {
-    "@milkdown/core": "7.5.0",
-    "@milkdown/ctx": "7.5.0",
-    "@milkdown/prose": "7.5.0"
+    "@milkdown/core": "7.5.9",
+    "@milkdown/ctx": "7.5.9",
+    "@milkdown/prose": "7.5.9"
   },
   "nx": {
     "targets": {

package/src/tooltip-plugin.ts

@@ -8,14 +8,20 @@ import { $ctx, $prose } from '@milkdown/utils'
 export type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`
 
 /// @internal
-export type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, TooltipSpecId<Id>>, $Prose] & {
+export type TooltipPlugin<Id extends string, State = any> = [
+  $Ctx<PluginSpec<State>, TooltipSpecId<Id>>,
+  $Prose,
+] & {
   key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>
   pluginKey: $Prose['key']
 }
 
 /// Create a tooltip plugin with a unique id.
 export function tooltipFactory<Id extends string, State = any>(id: Id) {
-  const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>({}, `${id}_TOOLTIP_SPEC`)
+  const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>(
+    {},
+    `${id}_TOOLTIP_SPEC`
+  )
   const tooltipPlugin = $prose((ctx) => {
     const spec = ctx.get(tooltipSpec.key)
     return new Plugin({

package/src/tooltip-provider.ts

@@ -2,8 +2,12 @@ import type { EditorState } from '@milkdown/prose/state'
 import { TextSelection } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 import debounce from 'lodash.debounce'
-import type { VirtualElement } from '@floating-ui/dom'
-import { computePosition, flip, offset } from '@floating-ui/dom'
+import type {
+  ComputePositionConfig,
+  Middleware,
+  VirtualElement,
+} from '@floating-ui/dom'
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { posToDOMRect } from '@milkdown/prose'
 
 /// Options for tooltip provider.
@@ -15,11 +19,17 @@ export interface TooltipProviderOptions {
   /// The function to determine whether the tooltip should be shown.
   shouldShow?: (view: EditorView, prevState?: EditorState) => boolean
   /// The offset to get the block. Default is 0.
-  offset?: number | {
-    mainAxis?: number
-    crossAxis?: number
-    alignmentAxis?: number | null
-  }
+  offset?:
+    | number
+    | {
+        mainAxis?: number
+        crossAxis?: number
+        alignmentAxis?: number | null
+      }
+  /// Other middlewares for floating ui. This will be added after the internal middlewares.
+  middleware?: Middleware[]
+  /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
+  floatingUIOptions?: Partial<ComputePositionConfig>
 }
 
 /// A provider for creating tooltip.
@@ -30,15 +40,23 @@ export class TooltipProvider {
   /// @internal
   readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
 
+  /// @internal
+  readonly #middleware: Middleware[]
+
+  /// @internal
+  readonly #floatingUIOptions: Partial<ComputePositionConfig>
+
   /// @internal
   #initialized = false
 
   /// @internal
-  readonly #offset?: number | {
-    mainAxis?: number
-    crossAxis?: number
-    alignmentAxis?: number | null
-  }
+  readonly #offset?:
+    | number
+    | {
+        mainAxis?: number
+        crossAxis?: number
+        alignmentAxis?: number | null
+      }
 
   /// The root element of the tooltip.
   element: HTMLElement
@@ -54,6 +72,8 @@ export class TooltipProvider {
     this.#debounce = options.debounce ?? 200
     this.#shouldShow = options.shouldShow ?? this.#_shouldShow
     this.#offset = options.offset
+    this.#middleware = options.middleware ?? []
+    this.#floatingUIOptions = options.floatingUIOptions ?? {}
     this.element.dataset.show = 'false'
   }
 
@@ -62,17 +82,17 @@ export class TooltipProvider {
     const { state, composing } = view
     const { selection, doc } = 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 isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
+    const from = Math.min(...ranges.map((range) => range.$from.pos))
+    const to = Math.max(...ranges.map((range) => range.$to.pos))
+    const isSame =
+      prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
 
     if (!this.#initialized) {
       view.dom.parentElement?.appendChild(this.element)
       this.#initialized = true
     }
 
-    if (composing || isSame)
-      return
+    if (composing || isSame) return
 
     if (!this.#shouldShow(view, prevState)) {
       this.hide()
@@ -84,14 +104,13 @@ export class TooltipProvider {
     }
     computePosition(virtualEl, this.element, {
       placement: 'top',
-      middleware: [flip(), offset(this.#offset)],
-    })
-      .then(({ x, y }) => {
-        Object.assign(this.element.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        })
+      middleware: [flip(), offset(this.#offset), shift(), ...this.#middleware],
+    }).then(({ x, y }) => {
+      Object.assign(this.element.style, {
+        left: `${x}px`,
+        top: `${y}px`,
       })
+    })
 
     this.show()
   }
@@ -108,7 +127,9 @@ export class TooltipProvider {
     const { doc, selection } = view.state
     const { empty, from, to } = selection
 
-    const isEmptyTextBlock = !doc.textBetween(from, to).length && view.state.selection instanceof TextSelection
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length &&
+      view.state.selection instanceof TextSelection
 
     const isTooltipChildren = this.element.contains(document.activeElement)
 
@@ -116,13 +137,7 @@ export class TooltipProvider {
 
     const isReadonly = !view.editable
 
-    if (
-      notHasFocus
-      || empty
-      || isEmptyTextBlock
-      || isReadonly
-    )
-      return false
+    if (notHasFocus || empty || isEmptyTextBlock || isReadonly) return false
 
     return true
   }
@@ -138,13 +153,13 @@ export class TooltipProvider {
       computePosition(virtualElement, this.element, {
         placement: 'top',
         middleware: [flip(), offset(this.#offset)],
-      })
-        .then(({ x, y }) => {
-          Object.assign(this.element.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
+        ...this.#floatingUIOptions,
+      }).then(({ x, y }) => {
+        Object.assign(this.element.style, {
+          left: `${x}px`,
+          top: `${y}px`,
         })
+      })
     }
 
     this.onShow()
@@ -152,8 +167,7 @@ export class TooltipProvider {
 
   /// Hide the tooltip.
   hide = () => {
-    if (this.element.dataset.show === 'false')
-      return
+    if (this.element.dataset.show === 'false') return
     this.element.dataset.show = 'false'
 
     this.onHide()