@milkdown/plugin-tooltip 7.3.6 → 7.5.0

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/lib/index.es.js

@@ -1,87 +1,93 @@
-var $ = (e, o, t) => {
-  if (!o.has(e))
-    throw TypeError("Cannot " + t);
+var w = (o, t, e) => {
+  if (!t.has(o))
+    throw TypeError("Cannot " + e);
 };
-var n = (e, o, t) => ($(e, o, "read from private field"), t ? t.call(e) : o.get(e)), c = (e, o, t) => {
-  if (o.has(e))
+var n = (o, t, e) => (w(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");
-  o instanceof WeakSet ? o.add(e) : o.set(e, t);
-}, l = (e, o, t, s) => ($(e, o, "write to private field"), s ? s.call(e, t) : o.set(e, t), t);
-var x = (e, o, t) => ($(e, o, "access private method"), t);
-import { posToDOMRect as S } from "@milkdown/prose";
-import { TextSelection as b, Plugin as C, PluginKey as R } from "@milkdown/prose/state";
-import _ from "lodash.debounce";
-import E from "tippy.js";
-import { $ctx as F, $prose as I } from "@milkdown/utils";
-var i, h, a, m, u, f, O;
-class D {
-  constructor(o) {
+  t instanceof WeakSet ? t.add(o) : t.set(o, e);
+}, c = (o, t, e, s) => (w(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
+var T = (o, t, e) => (w(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, h, a, u, y, C;
+class A {
+  constructor(t) {
     /// @internal
-    c(this, f);
+    l(this, y);
     /// @internal
-    c(this, i, void 0);
+    l(this, r, void 0);
     /// @internal
-    c(this, h, void 0);
+    l(this, d, void 0);
+    l(this, h, void 0);
     /// @internal
-    c(this, a, void 0);
-    /// @internal
-    c(this, m, void 0);
-    c(this, u, void 0);
-    l(this, u, (t, s) => {
-      const { state: r, composing: p } = t, { selection: d, doc: g } = r, { ranges: y } = d, k = Math.min(...y.map((T) => T.$from.pos)), P = Math.max(...y.map((T) => T.$to.pos)), w = s && s.doc.eq(g) && s.selection.eq(d);
-      if (n(this, i) ?? l(this, i, E(t.dom, {
-        trigger: "manual",
-        interactive: !0,
-        delay: 0,
-        arrow: !1,
-        duration: 0,
-        ...n(this, h),
-        content: this.element
-      })), !(p || w)) {
-        if (!n(this, m).call(this, t, s)) {
-          this.hide();
-          return;
-        }
-        n(this, i).setProps({
-          getReferenceClientRect: () => S(t, k, P)
-        }), this.show();
+    l(this, a, void 0);
+    l(this, u, void 0);
+    c(this, h, !1), this.onShow = () => {
+    }, this.onHide = () => {
+    }, c(this, u, (e, s) => {
+      var P;
+      const { state: i, composing: p } = e, { selection: f, doc: $ } = i, { ranges: g } = f, x = Math.min(...g.map((m) => m.$from.pos)), k = Math.max(...g.map((m) => m.$to.pos)), E = s && s.doc.eq($) && s.selection.eq(f);
+      if (n(this, h) || ((P = e.dom.parentElement) == null || P.appendChild(this.element), c(this, h, !0)), p || E)
+        return;
+      if (!n(this, d).call(this, e, s)) {
+        this.hide();
+        return;
       }
-    }), this.update = (t, s) => {
-      _(n(this, u), n(this, a))(t, s);
+      O({
+        getBoundingClientRect: () => R(e, x, k)
+      }, this.element, {
+        placement: "top",
+        middleware: [S(), b(n(this, a))]
+      }).then(({ x: m, y: _ }) => {
+        Object.assign(this.element.style, {
+          left: `${m}px`,
+          top: `${_}px`
+        });
+      }), this.show();
+    }), this.update = (e, s) => {
+      M(n(this, u), n(this, r))(e, s);
     }, this.destroy = () => {
-      var t;
-      (t = n(this, i)) == null || t.destroy();
-    }, this.show = () => {
-      var t;
-      (t = n(this, i)) == null || t.show();
+    }, this.show = (e) => {
+      this.element.dataset.show = "true", e && O(e, this.element, {
+        placement: "top",
+        middleware: [S(), b(n(this, a))]
+      }).then(({ x: s, y: i }) => {
+        Object.assign(this.element.style, {
+          left: `${s}px`,
+          top: `${i}px`
+        });
+      }), this.onShow();
     }, this.hide = () => {
-      var t;
-      (t = n(this, i)) == null || t.hide();
-    }, this.getInstance = () => n(this, i), this.element = o.content, l(this, h, o.tippyOptions ?? {}), l(this, a, o.debounce ?? 200), l(this, m, o.shouldShow ?? x(this, f, O));
+      this.element.dataset.show = "false", this.onHide();
+    }, this.element = t.content, c(this, r, t.debounce ?? 200), c(this, d, t.shouldShow ?? T(this, y, C)), c(this, a, t.offset);
   }
 }
-i = new WeakMap(), h = new WeakMap(), a = new WeakMap(), m = new WeakMap(), u = new WeakMap(), f = new WeakSet(), O = function(o) {
-  const { doc: t, selection: s } = o.state, { empty: r, from: p, to: d } = s, g = !t.textBetween(p, d).length && o.state.selection instanceof b, y = this.element.contains(document.activeElement), k = !o.hasFocus() && !y, P = !o.editable;
-  return !(k || r || g || P);
+r = new WeakMap(), d = new WeakMap(), h = 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, $ = !e.textBetween(p, f).length && t.state.selection instanceof B, g = this.element.contains(document.activeElement), x = !t.hasFocus() && !g, k = !t.editable;
+  return !(x || i || $ || k);
 };
-function H(e) {
-  const o = F({}, `${e}_TOOLTIP_SPEC`), t = I((r) => {
-    const p = r.get(o.key);
-    return new C({
-      key: new R(`${e}_TOOLTIP`),
+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
     });
-  }), s = [o, t];
-  return s.key = o.key, s.pluginKey = t.key, o.meta = {
+  }), s = [t, e];
+  return s.key = t.key, s.pluginKey = e.key, t.meta = {
     package: "@milkdown/plugin-tooltip",
-    displayName: `Ctx<tooltipSpec>|${e}`
-  }, t.meta = {
+    displayName: `Ctx<tooltipSpec>|${o}`
+  }, e.meta = {
     package: "@milkdown/plugin-tooltip",
-    displayName: `Prose<tooltip>|${e}`
+    displayName: `Prose<tooltip>|${o}`
   }, s;
 }
 export {
-  D as TooltipProvider,
-  H as tooltipFactory
+  A as TooltipProvider,
+  G 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":["/* Copyright 2021, Milkdown by Mirone. */\nimport { posToDOMRect } from '@milkdown/prose'\nimport 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 { Instance, Props } from 'tippy.js'\nimport tippy from 'tippy.js'\n\n/// Options for tooltip provider.\nexport interface TooltipProviderOptions {\n  /// The tooltip content.\n  content: HTMLElement\n  /// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.\n  tippyOptions?: Partial<Props>\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}\n\n/// A provider for creating tooltip.\nexport class TooltipProvider {\n  /// @internal\n  #tippy: Instance | undefined\n\n  /// @internal\n  #tippyOptions: Partial<Props>\n\n  /// @internal\n  #debounce: number\n\n  /// @internal\n  #shouldShow: (view: EditorView, prevState?: EditorState) => boolean\n\n  /// The root element of the tooltip.\n  element: HTMLElement\n\n  constructor(options: TooltipProviderOptions) {\n    this.element = options.content\n    this.#tippyOptions = options.tippyOptions ?? {}\n    this.#debounce = options.debounce ?? 200\n    this.#shouldShow = options.shouldShow ?? this.#_shouldShow\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    this.#tippy ??= tippy(view.dom, {\n      trigger: 'manual',\n      interactive: true,\n      delay: 0,\n      arrow: false,\n      duration: 0,\n      ...this.#tippyOptions,\n      content: this.element,\n    })\n\n    if (composing || isSame)\n      return\n\n    if (!this.#shouldShow(view, prevState)) {\n      this.hide()\n      return\n    }\n\n    this.#tippy.setProps({\n      getReferenceClientRect: () => posToDOMRect(view, from, to),\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    this.#tippy?.destroy()\n  }\n\n  /// Show the tooltip.\n  show = () => {\n    this.#tippy?.show()\n  }\n\n  /// Hide the tooltip.\n  hide = () => {\n    this.#tippy?.hide()\n  }\n\n  /// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance.\n  getInstance = () => {\n    return this.#tippy\n  }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport 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","_tippy","_tippyOptions","_debounce","_shouldShow","_onUpdate","__privateSet","view","prevState","state","composing","selection","doc","ranges","from","range","to","isSame","__privateGet","tippy","posToDOMRect","debounce","_a","__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 { 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  }\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    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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AACA,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,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"}

package/lib/tooltip-provider.d.ts

@@ -1,20 +1,25 @@
 import type { EditorState } from '@milkdown/prose/state';
 import type { EditorView } from '@milkdown/prose/view';
-import type { Instance, Props } from 'tippy.js';
+import type { VirtualElement } from '@floating-ui/dom';
 export interface TooltipProviderOptions {
     content: HTMLElement;
-    tippyOptions?: Partial<Props>;
     debounce?: number;
     shouldShow?: (view: EditorView, prevState?: EditorState) => boolean;
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+        alignmentAxis?: number | null;
+    };
 }
 export declare class TooltipProvider {
     #private;
     element: HTMLElement;
+    onShow: () => void;
+    onHide: () => void;
     constructor(options: TooltipProviderOptions);
     update: (view: EditorView, prevState?: EditorState) => void;
     destroy: () => void;
-    show: () => void;
+    show: (virtualElement?: VirtualElement) => void;
     hide: () => void;
-    getInstance: () => Instance<Props> | undefined;
 }
 //# sourceMappingURL=tooltip-provider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAI/C,MAAM,WAAW,sBAAsB;IAErC,OAAO,EAAE,WAAW,CAAA;IAEpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAE7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;CACpE;AAGD,qBAAa,eAAe;;IAc1B,OAAO,EAAE,WAAW,CAAA;gBAER,OAAO,EAAE,sBAAsB;IA0C3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IA2BD,OAAO,aAEN;IAGD,IAAI,aAEH;IAGD,IAAI,aAEH;IAGD,WAAW,oCAEV;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,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;IA+C3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IA2BD,OAAO,aAAW;IAGlB,IAAI,oBAAqB,cAAc,UAiBtC;IAGD,IAAI,aAIH;CACF"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@milkdown/plugin-tooltip",
   "type": "module",
-  "version": "7.3.6",
+  "version": "7.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Milkdown/milkdown.git",
-    "directory": "packages/plugin-tooltip"
+    "directory": "packages/plugins/plugin-tooltip"
   },
   "keywords": [
     "milkdown",
@@ -30,17 +30,18 @@
     "@milkdown/prose": "^7.2.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.5.1",
     "@types/lodash.debounce": "^4.0.7",
     "lodash.debounce": "^4.0.8",
     "tippy.js": "^6.3.7",
     "tslib": "^2.5.0",
-    "@milkdown/exception": "7.3.6",
-    "@milkdown/utils": "7.3.6"
+    "@milkdown/exception": "7.5.0",
+    "@milkdown/utils": "7.5.0"
   },
   "devDependencies": {
-    "@milkdown/core": "7.3.6",
-    "@milkdown/ctx": "7.3.6",
-    "@milkdown/prose": "7.3.6"
+    "@milkdown/core": "7.5.0",
+    "@milkdown/ctx": "7.5.0",
+    "@milkdown/prose": "7.5.0"
   },
   "nx": {
     "targets": {
@@ -49,19 +50,13 @@
           "{projectRoot}/lib"
         ],
         "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
+          "build"
         ]
       },
       "tsc": {
         "outputs": [],
         "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
+          "build"
         ]
       }
     }

package/src/index.ts

@@ -1,3 +1,2 @@
-/* Copyright 2021, Milkdown by Mirone. */
 export * from './tooltip-provider'
 export * from './tooltip-plugin'

package/src/tooltip-plugin.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { SliceType } from '@milkdown/ctx'
 import type { PluginSpec } from '@milkdown/prose/state'
 import { Plugin, PluginKey } from '@milkdown/prose/state'

package/src/tooltip-provider.ts

@@ -1,46 +1,59 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { posToDOMRect } from '@milkdown/prose'
 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 { Instance, Props } from 'tippy.js'
-import tippy from 'tippy.js'
+import type { VirtualElement } from '@floating-ui/dom'
+import { computePosition, flip, offset } from '@floating-ui/dom'
+import { posToDOMRect } from '@milkdown/prose'
 
 /// Options for tooltip provider.
 export interface TooltipProviderOptions {
   /// The tooltip content.
   content: HTMLElement
-  /// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.
-  tippyOptions?: Partial<Props>
   /// The debounce time for updating tooltip, 200ms by default.
   debounce?: number
   /// 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
+  }
 }
 
 /// A provider for creating tooltip.
 export class TooltipProvider {
   /// @internal
-  #tippy: Instance | undefined
+  readonly #debounce: number
 
   /// @internal
-  #tippyOptions: Partial<Props>
+  readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
 
   /// @internal
-  #debounce: number
+  #initialized = false
 
   /// @internal
-  #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
+  readonly #offset?: number | {
+    mainAxis?: number
+    crossAxis?: number
+    alignmentAxis?: number | null
+  }
 
   /// The root element of the tooltip.
   element: HTMLElement
 
+  /// On show callback.
+  onShow = () => {}
+
+  /// On hide callback.
+  onHide = () => {}
+
   constructor(options: TooltipProviderOptions) {
     this.element = options.content
-    this.#tippyOptions = options.tippyOptions ?? {}
     this.#debounce = options.debounce ?? 200
     this.#shouldShow = options.shouldShow ?? this.#_shouldShow
+    this.#offset = options.offset
   }
 
   /// @internal
@@ -52,15 +65,10 @@ export class TooltipProvider {
     const to = Math.max(...ranges.map(range => range.$to.pos))
     const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
 
-    this.#tippy ??= tippy(view.dom, {
-      trigger: 'manual',
-      interactive: true,
-      delay: 0,
-      arrow: false,
-      duration: 0,
-      ...this.#tippyOptions,
-      content: this.element,
-    })
+    if (!this.#initialized) {
+      view.dom.parentElement?.appendChild(this.element)
+      this.#initialized = true
+    }
 
     if (composing || isSame)
       return
@@ -70,9 +78,19 @@ export class TooltipProvider {
       return
     }
 
-    this.#tippy.setProps({
-      getReferenceClientRect: () => posToDOMRect(view, from, to),
+    const virtualEl: VirtualElement = {
+      getBoundingClientRect: () => posToDOMRect(view, from, to),
+    }
+    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`,
+        })
+      })
 
     this.show()
   }
@@ -109,22 +127,32 @@ export class TooltipProvider {
   }
 
   /// Destroy the tooltip.
-  destroy = () => {
-    this.#tippy?.destroy()
-  }
+  destroy = () => {}
 
   /// Show the tooltip.
-  show = () => {
-    this.#tippy?.show()
+  show = (virtualElement?: VirtualElement) => {
+    this.element.dataset.show = 'true'
+
+    if (virtualElement) {
+      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.onShow()
   }
 
   /// Hide the tooltip.
   hide = () => {
-    this.#tippy?.hide()
-  }
+    this.element.dataset.show = 'false'
 
-  /// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance.
-  getInstance = () => {
-    return this.#tippy
+    this.onHide()
   }
 }