@milkdown/plugin-tooltip 6.5.4 → 7.0.0-next.0

package/lib/index.d.ts

@@ -1,8 +1,3 @@
-import { PluginKey } from '@milkdown/prose/state';
-import { AtomList } from '@milkdown/utils';
-import type { TooltipOptions } from './item';
-export declare const key: PluginKey<any>;
-export * from './item';
-export declare const tooltipPlugin: import("@milkdown/utils").WithExtend<string, TooltipOptions, import("@milkdown/utils").TypeMapping<string, string>, import("@milkdown/utils").PluginRest<string, string>>;
-export declare const tooltip: AtomList<import("@milkdown/utils").Metadata<import("@milkdown/utils").GetPlugin<string, TooltipOptions>> & import("@milkdown/core").MilkdownPlugin>;
+export * from './tooltip-provider';
+export * from './tooltip-plugin';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAA0B,MAAM,iBAAiB,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AAI5C,eAAO,MAAM,GAAG,gBAAoC,CAAA;AACpD,cAAc,QAAQ,CAAA;AAEtB,eAAO,MAAM,aAAa,2KA+BxB,CAAA;AAEF,eAAO,MAAM,OAAO,qJAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/lib/index.es.js

@@ -1,196 +1,82 @@
-import { TextSelection as p, PluginKey as T, Plugin as v } from "@milkdown/prose/state";
-import { createPlugin as $, AtomList as y } from "@milkdown/utils";
-import { schemaCtx as b, themeManagerCtx as L, ThemeIcon as k, commandsCtx as P, ThemeSize as h, ThemeBorder as E, ThemeShadow as x, ThemeColor as B } from "@milkdown/core";
-import { findParentNode as C, calculateTextPosition as M } from "@milkdown/prose";
-import { missingRootElement as A } from "@milkdown/exception";
-const m = (e, t) => {
-  if (!t)
-    return !1;
-  const { from: o, to: s } = e.selection;
-  return e.doc.rangeHasMark(o, o === s ? s + 1 : s, t);
-}, H = (e) => {
-  const { selection: t } = e;
-  return t instanceof p ? !!e.doc.textBetween(t.from, t.to) : !1;
-}, I = (e) => Boolean(C((t) => !!t.type.spec.code)(e.selection)), O = (e, t) => !H(e) || I(e) || m(e, t), u = (e, t, o, s) => ({
-  icon: e,
-  onClick: t,
-  isHidden: () => (n) => O(n.state, s),
-  isActive: () => (n) => m(n.state, o),
-  canAddToDOM: () => (n) => !!o && !!n.state.schema.marks[o.name]
-}), w = (e) => {
-  const t = e.get(b).marks;
-  return [
-    u("bold", "ToggleBold", t.strong),
-    u("italic", "ToggleItalic", t.em),
-    u("strikeThrough", "ToggleStrikeThrough", t.strike_through),
-    u("code", "ToggleInlineCode", t.code_inline),
-    u("link", "ToggleLink", t.link)
-  ];
-}, D = (e, t = w) => {
-  const o = ({ icon: s, onClick: n, isHidden: l, isActive: i, canAddToDOM: c }) => {
-    var r;
-    return {
-      $: typeof s == "function" ? s(e) : (r = e.get(L).get(k, s)) == null ? void 0 : r.dom,
-      command: typeof n == "string" ? () => e.get(P).call(n) : n(e),
-      disable: l(e),
-      active: i(e),
-      enable: c(e)
-    };
-  };
-  return t(e).map(o);
-}, W = (e, t, o) => {
-  e.classList.remove("hide"), M(t, e, (s, n, l, i) => {
-    const c = e.parentElement;
-    if (!c)
-      throw A();
-    const r = n.left - s.left;
-    let a = s.left - i.left - (l.width - r) / 2, d = s.top - i.top - l.height - 14 + c.scrollTop;
-    a < 0 && (a = 0);
-    const f = c.clientWidth - (l.width + 4);
-    return a > f && (a = f), (d < c.scrollTop || o && i.bottom - s.bottom > l.height) && (d = s.bottom - i.top + 14 + c.scrollTop), [d, a];
-  });
-}, q = (e, { css: t }) => {
-  const o = (n, l = 1) => e.get(B, [n, l]), s = e.get(h, "lineWidth");
-  return t`
-        display: inline-flex;
-        cursor: pointer;
-        justify-content: space-evenly;
-        position: absolute;
-        border-radius: ${e.get(h, "radius")};
-        z-index: 2;
-
-        ${e.get(E, void 0)}
-        ${e.get(x, void 0)}
-
-        overflow: hidden;
-        background: ${o("surface")};
-
-        .icon {
-            position: relative;
-            color: ${o("solid", 0.87)};
-
-            width: 48px;
-            line-height: 48px;
-            text-align: center;
-            transition: all 0.4s ease-in-out;
-            &:hover {
-                background-color: ${o("secondary", 0.12)};
-            }
-            &.active {
-                color: ${o("primary")};
-            }
-            &:not(:last-child)::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                right: calc(-0.5 * ${s});
-                width: ${s};
-                bottom: 0;
-                background: ${o("line")};
-            }
-        }
-        &.hide,
-        .hide {
-            display: none;
+var I = Object.defineProperty;
+var M = (o, t, e) => t in o ? I(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var c = (o, t, e) => (M(o, typeof t != "symbol" ? t + "" : t, e), e), x = (o, t, e) => {
+  if (!t.has(o))
+    throw TypeError("Cannot " + e);
+};
+var n = (o, t, e) => (x(o, t, "read from private field"), e ? e.call(o) : t.get(o)), r = (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);
+}, p = (o, t, e, s) => (x(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
+var $ = (o, t, e) => (x(o, t, "access private method"), e);
+import { posToDOMRect as R } from "@milkdown/prose";
+import { TextSelection as S, Plugin as _, PluginKey as w } from "@milkdown/prose/state";
+import C from "lodash.debounce";
+import E from "tippy.js";
+import { $ctx as F, $prose as K } from "@milkdown/utils";
+var i, m, u, a, y, f, b;
+class W {
+  constructor(t) {
+    r(this, f);
+    r(this, i, void 0);
+    c(this, "element");
+    r(this, m, void 0);
+    r(this, u, void 0);
+    r(this, a, void 0);
+    r(this, y, (t, e) => {
+      const { state: s, composing: l } = t, { selection: h, doc: g } = s, { ranges: d } = h, T = Math.min(...d.map((k) => k.$from.pos)), O = Math.max(...d.map((k) => k.$to.pos)), P = e && e.doc.eq(g) && e.selection.eq(h);
+      if (n(this, i) ?? p(this, i, E(t.dom, {
+        trigger: "manual",
+        interactive: !0,
+        ...n(this, m),
+        content: this.element
+      })), !(l || P)) {
+        if (!n(this, a).call(this, t, e)) {
+          this.hide();
+          return;
         }
-    `;
-}, N = (e, t, o) => {
-  const s = document.createElement("div");
-  return t.themeManager.onFlush(() => {
-    const n = t.getStyle((l) => q(t.themeManager, l)) || "";
-    n && s.classList.add(n);
-  }), s.classList.add(t.getClassName({}, o)), {
-    dom: s,
-    render: (n) => {
-      var l;
-      e.filter((i) => i.enable(n) && i.$ != null).forEach(({ $: i }) => s.appendChild(i)), (l = n.dom.parentNode) == null || l.appendChild(s);
-    }
-  };
-}, _ = (e, t) => Object.values(e).filter((o) => o.enable(t) && o.$ != null).every(({ $: o }) => o.classList.contains("hide")), j = (e, t) => (e.filter((o) => o.enable(t) && o.$ != null).forEach((o) => {
-  var l;
-  if ((l = o.disable) == null ? void 0 : l.call(o, t)) {
-    o.$.classList.add("hide");
-    return;
-  }
-  if (o.$.classList.remove("hide"), o.active(t)) {
-    o.$.classList.add("active");
-    return;
-  }
-  o.$.classList.remove("active");
-}), _(e, t)), g = (e, t, o, s) => {
-  const { dom: n, render: l } = N(e, t, s), i = (r) => {
-    const a = e.find(({ $: d }) => r.target instanceof Element && d.contains(r.target));
-    !a || (r.stopPropagation(), r.preventDefault(), a.command());
-  }, c = () => {
-    n.classList.add("hide");
-  };
-  return n.addEventListener("mousedown", i), {
-    destroy: () => {
-      n.removeEventListener("mousedown", i), n.remove();
-    },
-    hide: c,
-    update: (r) => {
-      if (j(e, r)) {
-        c();
-        return;
+        n(this, i).setProps({
+          getReferenceClientRect: () => R(t, T, O)
+        }), this.show();
       }
-      W(n, r, o);
-    },
-    render: l
-  };
-}, z = (e, t, o, s) => {
-  let n = g(e, t, o, s), l = !1;
-  const i = () => {
-    n.hide();
-  }, c = (r, a) => {
-    const { state: d } = r;
-    if (!r.editable || l) {
-      i();
-      return;
-    }
-    (a == null ? void 0 : a.doc.eq(d.doc)) && a.selection.eq(d.selection) || n.update(r);
-  };
-  return {
-    recreate: (r) => {
-      n = g(e, t, o, s), n.render(r), c(r);
-    },
-    update: c,
-    destroy: () => {
-      n.destroy();
-    },
-    render: (r) => {
-      n.render(r), c(r);
-    },
-    setHide: (r) => {
-      l = r;
-    }
-  };
-}, F = new T("MILKDOWN_TOOLTIP"), K = $((e, t) => ({
-  id: "tooltip",
-  prosePlugins: (o, s) => {
-    var i;
-    const n = z(D(s, t == null ? void 0 : t.items), e, (i = t == null ? void 0 : t.bottom) != null ? i : !1, "tooltip");
-    return [new v({
-      key: F,
-      props: {
-        handleClick: (c) => (n.setHide(!1), n.update(c), !1),
-        handleDOMEvents: {
-          mousedown: () => (n.setHide(!1), !1)
-        }
-      },
-      view: (c) => (n.recreate(c), {
-        update: n.update,
-        destroy: n.destroy
-      })
-    })];
+    });
+    c(this, "update", (t, e) => {
+      C(n(this, y), n(this, u))(t, e);
+    });
+    c(this, "destroy", () => {
+      var t;
+      (t = n(this, i)) == null || t.destroy();
+    });
+    c(this, "show", () => {
+      var t;
+      (t = n(this, i)) == null || t.show();
+    });
+    c(this, "hide", () => {
+      var t;
+      (t = n(this, i)) == null || t.hide();
+    });
+    c(this, "getInstance", () => n(this, i));
+    this.element = t.content, p(this, m, t.tippyOptions ?? {}), p(this, u, t.debounce ?? 200), p(this, a, t.shouldShow ?? $(this, f, b));
   }
-})), U = y.create([K()]);
+}
+i = new WeakMap(), m = new WeakMap(), u = new WeakMap(), a = new WeakMap(), y = new WeakMap(), f = new WeakSet(), b = function(t) {
+  const { doc: e, selection: s } = t.state, { empty: l, from: h, to: g } = s, d = !e.textBetween(h, g).length && t.state.selection instanceof S, T = this.element.contains(document.activeElement), O = !t.hasFocus() && !T, P = !t.editable;
+  return !(O || l || d || P);
+};
+const L = (o) => {
+  const t = F({}, `${o}_TOOLTIP_SPEC`), e = K((l) => {
+    const h = l.get(t.key);
+    return new _({
+      key: new w(`${o}_TOOLTIP`),
+      ...h
+    });
+  }), s = [t, e];
+  return s.key = t.key, s.pluginKey = e.key, s;
+}, j = L("MILKDOWN");
 export {
-  D as buttonMap,
-  u as createToggleIcon,
-  w as defaultButtons,
-  F as key,
-  U as tooltip,
-  K as tooltipPlugin
+  W as TooltipProvider,
+  j as tooltip,
+  L as tooltipFactory
 };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/utility/prosemirror.ts","../src/item.ts","../src/button-manager/calc-button-pos.ts","../src/button-manager/style.ts","../src/button-manager/create-tooltip.ts","../src/button-manager/no-active.ts","../src/button-manager/filter-button.ts","../src/button-manager/index.ts","../src/selection-marks-tooltip.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { findParentNode } from '@milkdown/prose'\nimport type { MarkType, Node, NodeType } from '@milkdown/prose/model'\nimport type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\n\nexport interface Position {\n  start: number\n  end: number\n}\n\nexport const hasMark = (editorState: EditorState, type?: MarkType): boolean => {\n  if (!type)\n    return false\n\n  const { from, to } = editorState.selection\n\n  return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type)\n}\n\nexport const isTextSelection = (editorState: EditorState): boolean => {\n  const { selection } = editorState\n  if (selection instanceof TextSelection) {\n    const text = editorState.doc.textBetween(selection.from, selection.to)\n\n    if (!text)\n      return false\n\n    return true\n  }\n  return false\n}\n\nexport const isInCodeFence = (editorState: EditorState): boolean =>\n  Boolean(findParentNode(node => !!node.type.spec.code)(editorState.selection))\n\nexport const isTextAndNotHasMark = (editorState: EditorState, mark?: MarkType): boolean =>\n  !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark)\n\nexport const equalNodeType = (nodeType: NodeType, node: Node) => {\n  return (Array.isArray(nodeType) && nodeType.includes(node.type)) || node.type === nodeType\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Ctx } from '@milkdown/core'\nimport { ThemeIcon, commandsCtx, schemaCtx, themeManagerCtx } from '@milkdown/core'\nimport type { Icon } from '@milkdown/design-system'\nimport type { MarkType } from '@milkdown/prose/model'\nimport type { EditorView } from '@milkdown/prose/view'\n\nimport { hasMark, isTextAndNotHasMark } from './utility'\n\nexport type Pred = (view: EditorView) => boolean\nexport type Updater = (view: EditorView, $: HTMLElement) => void\nexport type Event2Command = (e: Event) => void\n\nexport type OnClick = (ctx: Ctx) => void\n\nexport interface Item {\n  icon: Icon | ((ctx: Ctx) => HTMLElement)\n  onClick: string | ((ctx: Ctx) => () => void)\n  isHidden: (ctx: Ctx) => Pred\n  isActive: (ctx: Ctx) => Pred\n  canAddToDOM: (ctx: Ctx) => Pred\n}\n\nexport interface ButtonItem {\n  $: HTMLElement\n  command: () => void\n  active: Pred\n  disable?: Pred\n  enable: Pred\n}\n\nexport const createToggleIcon = (icon: Icon, onClick: string, mark?: MarkType, disableForMark?: MarkType): Item => ({\n  icon,\n  onClick,\n  isHidden: () => (view: EditorView) => isTextAndNotHasMark(view.state, disableForMark),\n  isActive: () => (view: EditorView) => hasMark(view.state, mark),\n  canAddToDOM: () => (view: EditorView) => !!mark && !!view.state.schema.marks[mark.name],\n})\n\nexport const defaultButtons = (ctx: Ctx) => {\n  const marks = ctx.get(schemaCtx).marks\n  return [\n    createToggleIcon('bold', 'ToggleBold', marks.strong),\n    createToggleIcon('italic', 'ToggleItalic', marks.em),\n    createToggleIcon('strikeThrough', 'ToggleStrikeThrough', marks.strike_through),\n    createToggleIcon('code', 'ToggleInlineCode', marks.code_inline),\n    createToggleIcon('link', 'ToggleLink', marks.link),\n  ]\n}\n\nexport type ButtonList = ButtonItem[]\n\nexport interface TooltipOptions {\n  bottom: boolean\n  items: (ctx: Ctx) => Array<Item>\n}\n\nexport const buttonMap = (ctx: Ctx, items: (ctx: Ctx) => Array<Item> = defaultButtons): ButtonList => {\n  const toButton = ({ icon, onClick, isHidden, isActive, canAddToDOM }: Item): ButtonItem => ({\n    $: typeof icon === 'function' ? icon(ctx) : (ctx.get(themeManagerCtx).get(ThemeIcon, icon)?.dom as HTMLElement),\n    command: typeof onClick === 'string' ? () => ctx.get(commandsCtx).call(onClick) : onClick(ctx),\n    disable: isHidden(ctx),\n    active: isActive(ctx),\n    enable: canAddToDOM(ctx),\n  })\n  return items(ctx).map(toButton)\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { missingRootElement } from '@milkdown/exception'\nimport { calculateTextPosition } from '@milkdown/prose'\nimport type { EditorView } from '@milkdown/prose/view'\n\nexport const calcButtonPos = (buttons: HTMLElement, view: EditorView, isBottom: boolean) => {\n  buttons.classList.remove('hide')\n  calculateTextPosition(view, buttons, (start, end, target, parent) => {\n    const $editor = buttons.parentElement\n    if (!$editor)\n      throw missingRootElement()\n\n    const selectionWidth = end.left - start.left\n    let left = start.left - parent.left - (target.width - selectionWidth) / 2\n    let top = start.top - parent.top - target.height - 14 + $editor.scrollTop\n\n    if (left < 0)\n      left = 0\n\n    const maxLeft = $editor.clientWidth - (target.width + 4)\n    if (left > maxLeft)\n      left = maxLeft\n\n    if (top < $editor.scrollTop || (isBottom && parent.bottom - start.bottom > target.height))\n      top = start.bottom - parent.top + 14 + $editor.scrollTop\n\n    return [top, left]\n  })\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Color, Emotion, ThemeManager } from '@milkdown/core'\nimport { ThemeBorder, ThemeColor, ThemeShadow, ThemeSize } from '@milkdown/core'\n\nexport const injectStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])\n  const lineWidth = themeManager.get(ThemeSize, 'lineWidth')\n  return css`\n        display: inline-flex;\n        cursor: pointer;\n        justify-content: space-evenly;\n        position: absolute;\n        border-radius: ${themeManager.get(ThemeSize, 'radius')};\n        z-index: 2;\n\n        ${themeManager.get(ThemeBorder, undefined)}\n        ${themeManager.get(ThemeShadow, undefined)}\n\n        overflow: hidden;\n        background: ${palette('surface')};\n\n        .icon {\n            position: relative;\n            color: ${palette('solid', 0.87)};\n\n            width: 48px;\n            line-height: 48px;\n            text-align: center;\n            transition: all 0.4s ease-in-out;\n            &:hover {\n                background-color: ${palette('secondary', 0.12)};\n            }\n            &.active {\n                color: ${palette('primary')};\n            }\n            &:not(:last-child)::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                right: calc(-0.5 * ${lineWidth});\n                width: ${lineWidth};\n                bottom: 0;\n                background: ${palette('line')};\n            }\n        }\n        &.hide,\n        .hide {\n            display: none;\n        }\n    `\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose/view'\nimport type { ThemeUtils } from '@milkdown/utils'\n\nimport type { ButtonList } from '../item'\nimport { injectStyle } from './style'\n\ninterface Tooltip {\n  dom: HTMLDivElement\n  render: (editorView: EditorView) => void\n}\n\nexport const createTooltip = (buttonMap: ButtonList, utils: ThemeUtils, className: string): Tooltip => {\n  const div = document.createElement('div')\n  utils.themeManager.onFlush(() => {\n    const style = utils.getStyle(emotion => injectStyle(utils.themeManager, emotion)) || ''\n    if (style)\n      div.classList.add(style)\n  })\n\n  div.classList.add(utils.getClassName({}, className))\n\n  return {\n    dom: div,\n    render: (editorView: EditorView) => {\n      buttonMap\n        .filter(item => item.enable(editorView) && item.$ != null)\n        .forEach(({ $ }) => div.appendChild($))\n\n      editorView.dom.parentNode?.appendChild(div)\n    },\n  }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose/view'\n\nimport type { ButtonList } from '../item'\n\nexport const noActive = (buttonMap: ButtonList, view: EditorView) => {\n  return Object.values(buttonMap)\n    .filter(item => item.enable(view) && item.$ != null)\n    .every(({ $ }) => $.classList.contains('hide'))\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose/view'\n\nimport type { ButtonList } from '../item'\nimport { noActive } from './no-active'\n\nexport const filterButton = (buttons: ButtonList, view: EditorView) => {\n  buttons\n    .filter(item => item.enable(view) && item.$ != null)\n    .forEach((item) => {\n      const disable = item.disable?.(view)\n      if (disable) {\n        item.$.classList.add('hide')\n        return\n      }\n\n      item.$.classList.remove('hide')\n\n      const active = item.active(view)\n      if (active) {\n        item.$.classList.add('active')\n        return\n      }\n      item.$.classList.remove('active')\n    })\n\n  return noActive(buttons, view)\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose/view'\nimport type { ThemeUtils } from '@milkdown/utils'\n\nimport type { ButtonList } from '../item'\nimport { calcButtonPos } from './calc-button-pos'\nimport { createTooltip } from './create-tooltip'\nimport { filterButton } from './filter-button'\n\nexport const createButtonManager = (\n  buttons: ButtonList,\n  utils: ThemeUtils,\n  bottom: boolean,\n  containerClassName: string,\n) => {\n  const { dom: buttonDOM, render } = createTooltip(buttons, utils, containerClassName)\n\n  const onClick = (e: Event) => {\n    const target = buttons.find(({ $ }) => e.target instanceof Element && $.contains(e.target))\n    if (!target)\n      return\n\n    e.stopPropagation()\n    e.preventDefault()\n    target.command()\n  }\n\n  const hide = () => {\n    buttonDOM.classList.add('hide')\n  }\n\n  buttonDOM.addEventListener('mousedown', onClick)\n\n  return {\n    destroy: () => {\n      buttonDOM.removeEventListener('mousedown', onClick)\n      buttonDOM.remove()\n    },\n    hide,\n    update: (editorView: EditorView) => {\n      const noActive = filterButton(buttons, editorView)\n      if (noActive) {\n        hide()\n        return\n      }\n      calcButtonPos(buttonDOM, editorView, bottom)\n    },\n    render,\n  }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorState } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport type { ThemeUtils } from '@milkdown/utils'\n\nimport { createButtonManager } from './button-manager'\nimport type { ButtonList } from './item'\n\nexport const createPlugin = (buttonMap: ButtonList, utils: ThemeUtils, bottom: boolean, containerClassName: string) => {\n  let buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName)\n  let shouldHide = false\n\n  const hide = () => {\n    buttonManager.hide()\n  }\n\n  const update = (view: EditorView, prevState?: EditorState) => {\n    const { state } = view\n\n    if (!view.editable || shouldHide) {\n      hide()\n      return\n    }\n\n    const isEqualSelection = prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection)\n    if (isEqualSelection)\n      return\n\n    buttonManager.update(view)\n  }\n\n  return {\n    recreate: (editorView: EditorView) => {\n      buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName)\n      buttonManager.render(editorView)\n      update(editorView)\n    },\n    update,\n    destroy: () => {\n      buttonManager.destroy()\n    },\n    render: (editorView: EditorView) => {\n      buttonManager.render(editorView)\n      update(editorView)\n    },\n    setHide: (isTyping: boolean) => {\n      shouldHide = isTyping\n    },\n  }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport { AtomList, createPlugin as create } from '@milkdown/utils'\n\nimport type { TooltipOptions } from './item'\nimport { buttonMap } from './item'\nimport { createPlugin } from './selection-marks-tooltip'\n\nexport const key = new PluginKey('MILKDOWN_TOOLTIP')\nexport * from './item'\n\nexport const tooltipPlugin = create<string, TooltipOptions>((utils, options) => {\n  return {\n    id: 'tooltip',\n    prosePlugins: (_, ctx) => {\n      const manager = createPlugin(buttonMap(ctx, options?.items), utils, options?.bottom ?? false, 'tooltip')\n      const plugin = new Plugin({\n        key,\n        props: {\n          handleClick: (view) => {\n            manager.setHide(false)\n            manager.update(view)\n            return false\n          },\n          handleDOMEvents: {\n            mousedown: () => {\n              manager.setHide(false)\n              return false\n            },\n          },\n        },\n        view: (editorView) => {\n          manager.recreate(editorView)\n          return {\n            update: manager.update,\n            destroy: manager.destroy,\n          }\n        },\n      })\n      return [plugin]\n    },\n  }\n})\n\nexport const tooltip = AtomList.create([tooltipPlugin()])\n"],"names":["hasMark","editorState","type","from","to","isTextSelection","selection","TextSelection","isInCodeFence","findParentNode","node","isTextAndNotHasMark","mark","createToggleIcon","icon","onClick","disableForMark","view","defaultButtons","ctx","marks","schemaCtx","buttonMap","items","toButton","isHidden","isActive","canAddToDOM","_a","themeManagerCtx","ThemeIcon","commandsCtx","calcButtonPos","buttons","isBottom","calculateTextPosition","start","end","target","parent","$editor","missingRootElement","selectionWidth","left","top","maxLeft","injectStyle","themeManager","css","palette","color","opacity","ThemeColor","lineWidth","ThemeSize","ThemeBorder","ThemeShadow","createTooltip","utils","className","div","style","emotion","editorView","item","$","noActive","filterButton","createButtonManager","bottom","containerClassName","buttonDOM","render","e","hide","createPlugin","buttonManager","shouldHide","update","prevState","state","isTyping","key","PluginKey","tooltipPlugin","create","options","_","manager","Plugin","tooltip","AtomList"],"mappings":";;;;;AAWa,MAAAA,IAAU,CAACC,GAA0BC,MAA6B;AAC7E,MAAI,CAACA;AACI,WAAA;AAET,QAAM,EAAE,MAAAC,GAAM,IAAAC,MAAOH,EAAY;AAE1B,SAAAA,EAAY,IAAI,aAAaE,GAAMA,MAASC,IAAKA,IAAK,IAAIA,GAAIF,CAAI;AAC3E,GAEaG,IAAkB,CAACJ,MAAsC;AAC9D,QAAA,EAAE,WAAAK,EAAc,IAAAL;AACtB,SAAIK,aAAqBC,IACV,EAAAN,EAAY,IAAI,YAAYK,EAAU,MAAMA,EAAU,EAAE,IAOhE;AACT,GAEaE,IAAgB,CAACP,MAC5B,QAAQQ,EAAe,CAAQC,MAAA,CAAC,CAACA,EAAK,KAAK,KAAK,IAAI,EAAET,EAAY,SAAS,CAAC,GAEjEU,IAAsB,CAACV,GAA0BW,MAC5D,CAACP,EAAgBJ,CAAW,KAAKO,EAAcP,CAAW,KAAKD,EAAQC,GAAaW,CAAI,GCN7EC,IAAmB,CAACC,GAAYC,GAAiBH,GAAiBI,OAAqC;AAAA,EAClH,MAAAF;AAAA,EACA,SAAAC;AAAA,EACA,UAAU,MAAM,CAACE,MAAqBN,EAAoBM,EAAK,OAAOD,CAAc;AAAA,EACpF,UAAU,MAAM,CAACC,MAAqBjB,EAAQiB,EAAK,OAAOL,CAAI;AAAA,EAC9D,aAAa,MAAM,CAACK,MAAqB,CAAC,CAACL,KAAQ,CAAC,CAACK,EAAK,MAAM,OAAO,MAAML,EAAK;AACpF,IAEaM,IAAiB,CAACC,MAAa;AAC1C,QAAMC,IAAQD,EAAI,IAAIE,CAAS,EAAE;AAC1B,SAAA;AAAA,IACLR,EAAiB,QAAQ,cAAcO,EAAM,MAAM;AAAA,IACnDP,EAAiB,UAAU,gBAAgBO,EAAM,EAAE;AAAA,IACnDP,EAAiB,iBAAiB,uBAAuBO,EAAM,cAAc;AAAA,IAC7EP,EAAiB,QAAQ,oBAAoBO,EAAM,WAAW;AAAA,IAC9DP,EAAiB,QAAQ,cAAcO,EAAM,IAAI;AAAA,EAAA;AAErD,GASaE,IAAY,CAACH,GAAUI,IAAmCL,MAA+B;AAC9F,QAAAM,IAAW,CAAC,EAAE,MAAAV,GAAM,SAAAC,GAAS,UAAAU,GAAU,UAAAC,GAAU,aAAAC,QAAqC;;AAAA;AAAA,MAC1F,GAAG,OAAOb,KAAS,aAAaA,EAAKK,CAAG,KAAKS,IAAAT,EAAI,IAAIU,CAAe,EAAE,IAAIC,GAAWhB,CAAI,MAA5C,gBAAAc,EAA+C;AAAA,MAC5F,SAAS,OAAOb,KAAY,WAAW,MAAMI,EAAI,IAAIY,CAAW,EAAE,KAAKhB,CAAO,IAAIA,EAAQI,CAAG;AAAA,MAC7F,SAASM,EAASN,CAAG;AAAA,MACrB,QAAQO,EAASP,CAAG;AAAA,MACpB,QAAQQ,EAAYR,CAAG;AAAA,IAAA;AAAA;AAEzB,SAAOI,EAAMJ,CAAG,EAAE,IAAIK,CAAQ;AAChC,GC7DaQ,IAAgB,CAACC,GAAsBhB,GAAkBiB,MAAsB;AAClF,EAAAD,EAAA,UAAU,OAAO,MAAM,GAC/BE,EAAsBlB,GAAMgB,GAAS,CAACG,GAAOC,GAAKC,GAAQC,MAAW;AACnE,UAAMC,IAAUP,EAAQ;AACxB,QAAI,CAACO;AACH,YAAMC,EAAmB;AAErB,UAAAC,IAAiBL,EAAI,OAAOD,EAAM;AACxC,QAAIO,IAAOP,EAAM,OAAOG,EAAO,QAAQD,EAAO,QAAQI,KAAkB,GACpEE,IAAMR,EAAM,MAAMG,EAAO,MAAMD,EAAO,SAAS,KAAKE,EAAQ;AAEhE,IAAIG,IAAO,MACFA,IAAA;AAET,UAAME,IAAUL,EAAQ,eAAeF,EAAO,QAAQ;AACtD,WAAIK,IAAOE,MACFF,IAAAE,KAELD,IAAMJ,EAAQ,aAAcN,KAAYK,EAAO,SAASH,EAAM,SAASE,EAAO,YAChFM,IAAMR,EAAM,SAASG,EAAO,MAAM,KAAKC,EAAQ,YAE1C,CAACI,GAAKD,CAAI;AAAA,EAAA,CAClB;AACH,GCxBaG,IAAc,CAACC,GAA4B,EAAE,KAAAC,QAAmB;AACrE,QAAAC,IAAU,CAACC,GAAcC,IAAU,MAAMJ,EAAa,IAAIK,GAAY,CAACF,GAAOC,CAAO,CAAC,GACtFE,IAAYN,EAAa,IAAIO,GAAW,WAAW;AAClD,SAAAN;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKgBD,EAAa,IAAIO,GAAW,QAAQ;AAAA;AAAA;AAAA,UAGnDP,EAAa,IAAIQ,GAAa,MAAS;AAAA,UACvCR,EAAa,IAAIS,GAAa,MAAS;AAAA;AAAA;AAAA,sBAG3BP,EAAQ,SAAS;AAAA;AAAA;AAAA;AAAA,qBAIlBA,EAAQ,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAONA,EAAQ,aAAa,IAAI;AAAA;AAAA;AAAA,yBAGpCA,EAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAMLI;AAAA,yBACZA;AAAA;AAAA,8BAEKJ,EAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5C,GCtCaQ,IAAgB,CAACnC,GAAuBoC,GAAmBC,MAA+B;AAC/F,QAAAC,IAAM,SAAS,cAAc,KAAK;AAClC,SAAAF,EAAA,aAAa,QAAQ,MAAM;AACzB,UAAAG,IAAQH,EAAM,SAAS,CAAAI,MAAWhB,EAAYY,EAAM,cAAcI,CAAO,CAAC,KAAK;AACjF,IAAAD,KACED,EAAA,UAAU,IAAIC,CAAK;AAAA,EAAA,CAC1B,GAEDD,EAAI,UAAU,IAAIF,EAAM,aAAa,CAAC,GAAGC,CAAS,CAAC,GAE5C;AAAA,IACL,KAAKC;AAAA,IACL,QAAQ,CAACG,MAA2B;;AAClC,MAAAzC,EACG,OAAO,CAAQ0C,MAAAA,EAAK,OAAOD,CAAU,KAAKC,EAAK,KAAK,IAAI,EACxD,QAAQ,CAAC,EAAE,GAAAC,EAAA,MAAQL,EAAI,YAAYK,CAAC,CAAC,IAE7BrC,IAAAmC,EAAA,IAAI,eAAJ,QAAAnC,EAAgB,YAAYgC;AAAA,IACzC;AAAA,EAAA;AAEJ,GC3BaM,IAAW,CAAC5C,GAAuBL,MACvC,OAAO,OAAOK,CAAS,EAC3B,OAAO,CAAQ0C,MAAAA,EAAK,OAAO/C,CAAI,KAAK+C,EAAK,KAAK,IAAI,EAClD,MAAM,CAAC,EAAE,GAAAC,EAAA,MAAQA,EAAE,UAAU,SAAS,MAAM,CAAC,GCFrCE,IAAe,CAAClC,GAAqBhB,OAChDgB,EACG,OAAO,CAAA+B,MAAQA,EAAK,OAAO/C,CAAI,KAAK+C,EAAK,KAAK,IAAI,EAClD,QAAQ,CAACA,MAAS;;AAEjB,OADgBpC,IAAAoC,EAAK,YAAL,gBAAApC,EAAA,KAAAoC,GAAe/C,IAClB;AACN,IAAA+C,EAAA,EAAE,UAAU,IAAI,MAAM;AAC3B;AAAA,EACF;AAKA,MAHKA,EAAA,EAAE,UAAU,OAAO,MAAM,GAEfA,EAAK,OAAO/C,CAAI,GACnB;AACL,IAAA+C,EAAA,EAAE,UAAU,IAAI,QAAQ;AAC7B;AAAA,EACF;AACK,EAAAA,EAAA,EAAE,UAAU,OAAO,QAAQ;AAAA,CACjC,GAEIE,EAASjC,GAAShB,CAAI,ICjBlBmD,IAAsB,CACjCnC,GACAyB,GACAW,GACAC,MACG;AACG,QAAA,EAAE,KAAKC,GAAW,QAAAC,EAAA,IAAWf,EAAcxB,GAASyB,GAAOY,CAAkB,GAE7EvD,IAAU,CAAC0D,MAAa;AAC5B,UAAMnC,IAASL,EAAQ,KAAK,CAAC,EAAE,GAAAgC,EAAE,MAAMQ,EAAE,kBAAkB,WAAWR,EAAE,SAASQ,EAAE,MAAM,CAAC;AAC1F,IAAI,CAACnC,MAGLmC,EAAE,gBAAgB,GAClBA,EAAE,eAAe,GACjBnC,EAAO,QAAQ;AAAA,EAAA,GAGXoC,IAAO,MAAM;AACP,IAAAH,EAAA,UAAU,IAAI,MAAM;AAAA,EAAA;AAGtB,SAAAA,EAAA,iBAAiB,aAAaxD,CAAO,GAExC;AAAA,IACL,SAAS,MAAM;AACH,MAAAwD,EAAA,oBAAoB,aAAaxD,CAAO,GAClDwD,EAAU,OAAO;AAAA,IACnB;AAAA,IACA,MAAAG;AAAA,IACA,QAAQ,CAACX,MAA2B;AAElC,UADiBI,EAAalC,GAAS8B,CAAU,GACnC;AACP,QAAAW;AACL;AAAA,MACF;AACc,MAAA1C,EAAAuC,GAAWR,GAAYM,CAAM;AAAA,IAC7C;AAAA,IACA,QAAAG;AAAA,EAAA;AAEJ,GCzCaG,IAAe,CAACrD,GAAuBoC,GAAmBW,GAAiBC,MAA+B;AACrH,MAAIM,IAAgBR,EAAoB9C,GAAWoC,GAAOW,GAAQC,CAAkB,GAChFO,IAAa;AAEjB,QAAMH,IAAO,MAAM;AACjB,IAAAE,EAAc,KAAK;AAAA,EAAA,GAGfE,IAAS,CAAC7D,GAAkB8D,MAA4B;AACtD,UAAA,EAAE,OAAAC,EAAU,IAAA/D;AAEd,QAAA,CAACA,EAAK,YAAY4D,GAAY;AAC3B,MAAAH;AACL;AAAA,IACF;AAGI,KADqBK,KAAA,gBAAAA,EAAW,IAAI,GAAGC,EAAM,SAAQD,EAAU,UAAU,GAAGC,EAAM,SAAS,KAI/FJ,EAAc,OAAO3D,CAAI;AAAA,EAAA;AAGpB,SAAA;AAAA,IACL,UAAU,CAAC8C,MAA2B;AACpC,MAAAa,IAAgBR,EAAoB9C,GAAWoC,GAAOW,GAAQC,CAAkB,GAChFM,EAAc,OAAOb,CAAU,GAC/Be,EAAOf,CAAU;AAAA,IACnB;AAAA,IACA,QAAAe;AAAA,IACA,SAAS,MAAM;AACb,MAAAF,EAAc,QAAQ;AAAA,IACxB;AAAA,IACA,QAAQ,CAACb,MAA2B;AAClC,MAAAa,EAAc,OAAOb,CAAU,GAC/Be,EAAOf,CAAU;AAAA,IACnB;AAAA,IACA,SAAS,CAACkB,MAAsB;AACjB,MAAAJ,IAAAI;AAAA,IACf;AAAA,EAAA;AAEJ,GCzCaC,IAAM,IAAIC,EAAU,kBAAkB,GAGtCC,IAAgBC,EAA+B,CAAC3B,GAAO4B,OAC3D;AAAA,EACL,IAAI;AAAA,EACJ,cAAc,CAACC,GAAGpE,MAAQ;;AAClB,UAAAqE,IAAUb,EAAarD,EAAUH,GAAKmE,KAAA,gBAAAA,EAAS,KAAK,GAAG5B,IAAO9B,IAAA0D,KAAA,gBAAAA,EAAS,WAAT,OAAA1D,IAAmB,IAAO,SAAS;AAwBvG,WAAO,CAvBQ,IAAI6D,EAAO;AAAA,MACxB,KAAAP;AAAA,MACA,OAAO;AAAA,QACL,aAAa,CAACjE,OACZuE,EAAQ,QAAQ,EAAK,GACrBA,EAAQ,OAAOvE,CAAI,GACZ;AAAA,QAET,iBAAiB;AAAA,UACf,WAAW,OACTuE,EAAQ,QAAQ,EAAK,GACd;AAAA,QAEX;AAAA,MACF;AAAA,MACA,MAAM,CAACzB,OACLyB,EAAQ,SAASzB,CAAU,GACpB;AAAA,QACL,QAAQyB,EAAQ;AAAA,QAChB,SAASA,EAAQ;AAAA,MAAA;AAAA,IAErB,CACD,CACa;AAAA,EAChB;AAAA,EAEH,GAEYE,IAAUC,EAAS,OAAO,CAACP,EAAA,CAAe,CAAC;"}
+{"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\nexport type TooltipProviderOptions = {\n  content: HTMLElement\n  tippyOptions?: Partial<Props>\n  debounce?: number\n  shouldShow?: (view: EditorView, prevState?: EditorState) => boolean\n}\n\nexport class TooltipProvider {\n  #tippy: Instance | undefined\n\n  element: HTMLElement\n\n  #tippyOptions: Partial<Props>\n\n  #debounce: number\n\n  #shouldShow: (view: EditorView, prevState?: EditorState) => boolean\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  #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      ...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 = (view: EditorView, prevState?: EditorState): void => {\n    const updater = debounce(this.#onUpdate, this.#debounce)\n\n    updater(view, prevState)\n  }\n\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 = () => {\n    this.#tippy?.destroy()\n  }\n\n  show = () => {\n    this.#tippy?.show()\n  }\n\n  hide = () => {\n    this.#tippy?.hide()\n  }\n\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\nexport type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`\n\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\nexport const 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\n  return result\n}\n\nexport const tooltip = tooltipFactory('MILKDOWN')\n"],"names":["TooltipProvider","options","__privateAdd","__shouldShow","_tippy","__publicField","_tippyOptions","_debounce","_shouldShow","_onUpdate","view","prevState","state","composing","selection","doc","ranges","from","range","to","isSame","__privateGet","__privateSet","tippy","posToDOMRect","debounce","_a","__privateMethod","_shouldShow_fn","empty","isEmptyTextBlock","TextSelection","isTooltipChildren","notHasFocus","isReadonly","tooltipFactory","id","tooltipSpec","$ctx","tooltipPlugin","$prose","ctx","spec","Plugin","PluginKey","result","tooltip"],"mappings":"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"}

package/lib/tooltip-plugin.d.ts

@@ -0,0 +1,11 @@
+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] & {
+    key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>;
+    pluginKey: $Prose['key'];
+};
+export declare const tooltipFactory: <Id extends string, State = any>(id: Id) => TooltipPlugin<Id, any>;
+export declare const tooltip: TooltipPlugin<"MILKDOWN", any>;
+//# sourceMappingURL=tooltip-plugin.d.ts.map

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

@@ -0,0 +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;AAGnD,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,IAAI,GAAG,EAAE,eAAe,CAAA;AAEnE,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;AAED,eAAO,MAAM,cAAc,oEAc1B,CAAA;AAED,eAAO,MAAM,OAAO,gCAA6B,CAAA"}

package/lib/tooltip-provider.d.ts

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

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

@@ -0,0 +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;AAG/C,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,WAAW,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;CACpE,CAAA;AAED,qBAAa,eAAe;;IAG1B,OAAO,EAAE,WAAW,CAAA;gBAQR,OAAO,EAAE,sBAAsB;IAqC3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IAyBD,OAAO,aAEN;IAED,IAAI,aAEH;IAED,IAAI,aAEH;IAED,WAAW,oCAEV;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/plugin-tooltip",
   "type": "module",
-  "version": "6.5.4",
+  "version": "7.0.0-next.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,18 +20,22 @@
     "src"
   ],
   "peerDependencies": {
-    "@milkdown/core": "^6.0.1",
-    "@milkdown/prose": "^6.0.1"
+    "@milkdown/core": "^7.0.0-next.0",
+    "@milkdown/ctx": "^7.0.0-next.0",
+    "@milkdown/prose": "^7.0.0-next.0"
   },
   "dependencies": {
+    "@types/lodash.debounce": "^4.0.7",
+    "lodash.debounce": "^4.0.8",
+    "tippy.js": "^6.3.7",
     "tslib": "^2.4.0",
-    "@milkdown/exception": "6.5.4",
-    "@milkdown/utils": "6.5.4"
+    "@milkdown/exception": "7.0.0-next.0",
+    "@milkdown/utils": "7.0.0-next.0"
   },
   "devDependencies": {
-    "@milkdown/core": "6.5.4",
-    "@milkdown/design-system": "6.5.4",
-    "@milkdown/prose": "6.5.4"
+    "@milkdown/core": "7.0.0-next.0",
+    "@milkdown/ctx": "7.0.0-next.0",
+    "@milkdown/prose": "7.0.0-next.0"
   },
   "nx": {
     "targets": {

package/src/index.ts

@@ -1,45 +1,3 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import { AtomList, createPlugin as create } from '@milkdown/utils'
-
-import type { TooltipOptions } from './item'
-import { buttonMap } from './item'
-import { createPlugin } from './selection-marks-tooltip'
-
-export const key = new PluginKey('MILKDOWN_TOOLTIP')
-export * from './item'
-
-export const tooltipPlugin = create<string, TooltipOptions>((utils, options) => {
-  return {
-    id: 'tooltip',
-    prosePlugins: (_, ctx) => {
-      const manager = createPlugin(buttonMap(ctx, options?.items), utils, options?.bottom ?? false, 'tooltip')
-      const plugin = new Plugin({
-        key,
-        props: {
-          handleClick: (view) => {
-            manager.setHide(false)
-            manager.update(view)
-            return false
-          },
-          handleDOMEvents: {
-            mousedown: () => {
-              manager.setHide(false)
-              return false
-            },
-          },
-        },
-        view: (editorView) => {
-          manager.recreate(editorView)
-          return {
-            update: manager.update,
-            destroy: manager.destroy,
-          }
-        },
-      })
-      return [plugin]
-    },
-  }
-})
-
-export const tooltip = AtomList.create([tooltipPlugin()])
+export * from './tooltip-provider'
+export * from './tooltip-plugin'

package/src/tooltip-plugin.ts

@@ -0,0 +1,31 @@
+/* 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'
+import type { $Ctx, $Prose } from '@milkdown/utils'
+import { $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] & {
+  key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>
+  pluginKey: $Prose['key']
+}
+
+export const tooltipFactory = <Id extends string, State = any>(id: Id) => {
+  const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>({}, `${id}_TOOLTIP_SPEC`)
+  const tooltipPlugin = $prose((ctx) => {
+    const spec = ctx.get(tooltipSpec.key)
+    return new Plugin({
+      key: new PluginKey(`${id}_TOOLTIP`),
+      ...spec,
+    })
+  })
+  const result = [tooltipSpec, tooltipPlugin] as TooltipPlugin<Id>
+  result.key = tooltipSpec.key
+  result.pluginKey = tooltipPlugin.key
+
+  return result
+}
+
+export const tooltip = tooltipFactory('MILKDOWN')

package/src/tooltip-provider.ts

@@ -0,0 +1,109 @@
+/* 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'
+
+export type TooltipProviderOptions = {
+  content: HTMLElement
+  tippyOptions?: Partial<Props>
+  debounce?: number
+  shouldShow?: (view: EditorView, prevState?: EditorState) => boolean
+}
+
+export class TooltipProvider {
+  #tippy: Instance | undefined
+
+  element: HTMLElement
+
+  #tippyOptions: Partial<Props>
+
+  #debounce: number
+
+  #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
+
+  constructor(options: TooltipProviderOptions) {
+    this.element = options.content
+    this.#tippyOptions = options.tippyOptions ?? {}
+    this.#debounce = options.debounce ?? 200
+    this.#shouldShow = options.shouldShow ?? this.#_shouldShow
+  }
+
+  #onUpdate = (view: EditorView, prevState?: EditorState): void => {
+    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)
+
+    this.#tippy ??= tippy(view.dom, {
+      trigger: 'manual',
+      interactive: true,
+      ...this.#tippyOptions,
+      content: this.element,
+    })
+
+    if (composing || isSame)
+      return
+
+    if (!this.#shouldShow(view, prevState)) {
+      this.hide()
+      return
+    }
+
+    this.#tippy.setProps({
+      getReferenceClientRect: () => posToDOMRect(view, from, to),
+    })
+
+    this.show()
+  }
+
+  update = (view: EditorView, prevState?: EditorState): void => {
+    const updater = debounce(this.#onUpdate, this.#debounce)
+
+    updater(view, prevState)
+  }
+
+  #_shouldShow(view: EditorView): boolean {
+    const { doc, selection } = view.state
+    const { empty, from, to } = selection
+
+    const isEmptyTextBlock = !doc.textBetween(from, to).length && view.state.selection instanceof TextSelection
+
+    const isTooltipChildren = this.element.contains(document.activeElement)
+
+    const notHasFocus = !view.hasFocus() && !isTooltipChildren
+
+    const isReadonly = !view.editable
+
+    if (
+      notHasFocus
+      || empty
+      || isEmptyTextBlock
+      || isReadonly
+    )
+      return false
+
+    return true
+  }
+
+  destroy = () => {
+    this.#tippy?.destroy()
+  }
+
+  show = () => {
+    this.#tippy?.show()
+  }
+
+  hide = () => {
+    this.#tippy?.hide()
+  }
+
+  getInstance = () => {
+    return this.#tippy
+  }
+}

package/lib/button-manager/calc-button-pos.d.ts

@@ -1,3 +0,0 @@
-import type { EditorView } from '@milkdown/prose/view';
-export declare const calcButtonPos: (buttons: HTMLElement, view: EditorView, isBottom: boolean) => void;
-//# sourceMappingURL=calc-button-pos.d.ts.map

package/lib/button-manager/calc-button-pos.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calc-button-pos.d.ts","sourceRoot":"","sources":["../../src/button-manager/calc-button-pos.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,eAAO,MAAM,aAAa,YAAa,WAAW,QAAQ,UAAU,YAAY,OAAO,SAuBtF,CAAA"}

package/lib/button-manager/create-tooltip.d.ts

@@ -1,10 +0,0 @@
-import type { EditorView } from '@milkdown/prose/view';
-import type { ThemeUtils } from '@milkdown/utils';
-import type { ButtonList } from '../item';
-interface Tooltip {
-    dom: HTMLDivElement;
-    render: (editorView: EditorView) => void;
-}
-export declare const createTooltip: (buttonMap: ButtonList, utils: ThemeUtils, className: string) => Tooltip;
-export {};
-//# sourceMappingURL=create-tooltip.d.ts.map

package/lib/button-manager/create-tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-tooltip.d.ts","sourceRoot":"","sources":["../../src/button-manager/create-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,UAAU,OAAO;IACf,GAAG,EAAE,cAAc,CAAA;IACnB,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,aAAa,iCAAkC,UAAU,aAAa,MAAM,KAAG,OAoB3F,CAAA"}

package/lib/button-manager/filter-button.d.ts

@@ -1,4 +0,0 @@
-import type { EditorView } from '@milkdown/prose/view';
-import type { ButtonList } from '../item';
-export declare const filterButton: (buttons: ButtonList, view: EditorView) => boolean;
-//# sourceMappingURL=filter-button.d.ts.map

package/lib/button-manager/filter-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter-button.d.ts","sourceRoot":"","sources":["../../src/button-manager/filter-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,eAAO,MAAM,YAAY,8BAA+B,UAAU,YAqBjE,CAAA"}

package/lib/button-manager/index.d.ts

@@ -1,10 +0,0 @@
-import type { EditorView } from '@milkdown/prose/view';
-import type { ThemeUtils } from '@milkdown/utils';
-import type { ButtonList } from '../item';
-export declare const createButtonManager: (buttons: ButtonList, utils: ThemeUtils, bottom: boolean, containerClassName: string) => {
-    destroy: () => void;
-    hide: () => void;
-    update: (editorView: EditorView) => void;
-    render: (editorView: EditorView) => void;
-};
-//# sourceMappingURL=index.d.ts.map

package/lib/button-manager/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button-manager/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAKzC,eAAO,MAAM,mBAAmB,+BAEvB,UAAU,UACT,OAAO,sBACK,MAAM;;;yBA0BH,UAAU;;CAUlC,CAAA"}

package/lib/button-manager/no-active.d.ts

@@ -1,4 +0,0 @@
-import type { EditorView } from '@milkdown/prose/view';
-import type { ButtonList } from '../item';
-export declare const noActive: (buttonMap: ButtonList, view: EditorView) => boolean;
-//# sourceMappingURL=no-active.d.ts.map

package/lib/button-manager/no-active.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"no-active.d.ts","sourceRoot":"","sources":["../../src/button-manager/no-active.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,eAAO,MAAM,QAAQ,gCAAiC,UAAU,YAI/D,CAAA"}

package/lib/button-manager/style.d.ts

@@ -1,3 +0,0 @@
-import type { Emotion, ThemeManager } from '@milkdown/core';
-export declare const injectStyle: (themeManager: ThemeManager, { css }: Emotion) => string;
-//# sourceMappingURL=style.d.ts.map

package/lib/button-manager/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/button-manager/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAS,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlE,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WA8CvE,CAAA"}

package/lib/item.d.ts

@@ -1,31 +0,0 @@
-import type { Ctx } from '@milkdown/core';
-import type { Icon } from '@milkdown/design-system';
-import type { MarkType } from '@milkdown/prose/model';
-import type { EditorView } from '@milkdown/prose/view';
-export type Pred = (view: EditorView) => boolean;
-export type Updater = (view: EditorView, $: HTMLElement) => void;
-export type Event2Command = (e: Event) => void;
-export type OnClick = (ctx: Ctx) => void;
-export interface Item {
-    icon: Icon | ((ctx: Ctx) => HTMLElement);
-    onClick: string | ((ctx: Ctx) => () => void);
-    isHidden: (ctx: Ctx) => Pred;
-    isActive: (ctx: Ctx) => Pred;
-    canAddToDOM: (ctx: Ctx) => Pred;
-}
-export interface ButtonItem {
-    $: HTMLElement;
-    command: () => void;
-    active: Pred;
-    disable?: Pred;
-    enable: Pred;
-}
-export declare const createToggleIcon: (icon: Icon, onClick: string, mark?: MarkType, disableForMark?: MarkType) => Item;
-export declare const defaultButtons: (ctx: Ctx) => Item[];
-export type ButtonList = ButtonItem[];
-export interface TooltipOptions {
-    bottom: boolean;
-    items: (ctx: Ctx) => Array<Item>;
-}
-export declare const buttonMap: (ctx: Ctx, items?: (ctx: Ctx) => Array<Item>) => ButtonList;
-//# sourceMappingURL=item.d.ts.map

package/lib/item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../src/item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,MAAM,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAA;AAChD,MAAM,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;AAChE,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;AAE9C,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;AAExC,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,WAAW,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,IAAI,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC5B,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC5B,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,WAAW,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,IAAI,CAAA;IACZ,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAAW,MAAM,SAAS,QAAQ,mBAAmB,QAAQ,KAAG,IAMzG,CAAA;AAEF,eAAO,MAAM,cAAc,QAAS,GAAG,WAStC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,EAAE,CAAA;AAErC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA;CACjC;AAED,eAAO,MAAM,SAAS,QAAS,GAAG,gBAAe,GAAG,KAAK,MAAM,IAAI,CAAC,eASnE,CAAA"}

package/lib/selection-marks-tooltip.d.ts

@@ -1,12 +0,0 @@
-import type { EditorState } from '@milkdown/prose/state';
-import type { EditorView } from '@milkdown/prose/view';
-import type { ThemeUtils } from '@milkdown/utils';
-import type { ButtonList } from './item';
-export declare const createPlugin: (buttonMap: ButtonList, utils: ThemeUtils, bottom: boolean, containerClassName: string) => {
-    recreate: (editorView: EditorView) => void;
-    update: (view: EditorView, prevState?: EditorState) => void;
-    destroy: () => void;
-    render: (editorView: EditorView) => void;
-    setHide: (isTyping: boolean) => void;
-};
-//# sourceMappingURL=selection-marks-tooltip.d.ts.map

package/lib/selection-marks-tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selection-marks-tooltip.d.ts","sourceRoot":"","sources":["../src/selection-marks-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,eAAO,MAAM,YAAY,iCAAkC,UAAU,UAAU,OAAO,sBAAsB,MAAM;2BAwBvF,UAAU;mBAhBb,UAAU,cAAc,WAAW;;yBAyBlC,UAAU;wBAIX,OAAO;CAI9B,CAAA"}

package/lib/utility/element.d.ts

@@ -1,2 +0,0 @@
-export declare const elementIsTag: (element: HTMLElement, tagName: string) => boolean;
-//# sourceMappingURL=element.d.ts.map

package/lib/utility/element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/utility/element.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,YAAa,WAAW,WAAW,MAAM,KAAG,OAC1B,CAAA"}

package/lib/utility/index.d.ts

@@ -1,3 +0,0 @@
-export * from './element';
-export * from './prosemirror';
-//# sourceMappingURL=index.d.ts.map

package/lib/utility/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utility/index.ts"],"names":[],"mappings":"AACA,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA"}

package/lib/utility/prosemirror.d.ts

@@ -1,12 +0,0 @@
-import type { MarkType, Node, NodeType } from '@milkdown/prose/model';
-import type { EditorState } from '@milkdown/prose/state';
-export interface Position {
-    start: number;
-    end: number;
-}
-export declare const hasMark: (editorState: EditorState, type?: MarkType) => boolean;
-export declare const isTextSelection: (editorState: EditorState) => boolean;
-export declare const isInCodeFence: (editorState: EditorState) => boolean;
-export declare const isTextAndNotHasMark: (editorState: EditorState, mark?: MarkType) => boolean;
-export declare const equalNodeType: (nodeType: NodeType, node: Node) => boolean;
-//# sourceMappingURL=prosemirror.d.ts.map

package/lib/utility/prosemirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prosemirror.d.ts","sourceRoot":"","sources":["../../src/utility/prosemirror.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAGxD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,eAAO,MAAM,OAAO,gBAAiB,WAAW,SAAS,QAAQ,KAAG,OAOnE,CAAA;AAED,eAAO,MAAM,eAAe,gBAAiB,WAAW,KAAG,OAW1D,CAAA;AAED,eAAO,MAAM,aAAa,gBAAiB,WAAW,KAAG,OACsB,CAAA;AAE/E,eAAO,MAAM,mBAAmB,gBAAiB,WAAW,SAAS,QAAQ,KAAG,OACW,CAAA;AAE3F,eAAO,MAAM,aAAa,aAAc,QAAQ,QAAQ,IAAI,YAE3D,CAAA"}

package/src/button-manager/calc-button-pos.ts

@@ -1,29 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { missingRootElement } from '@milkdown/exception'
-import { calculateTextPosition } from '@milkdown/prose'
-import type { EditorView } from '@milkdown/prose/view'
-
-export const calcButtonPos = (buttons: HTMLElement, view: EditorView, isBottom: boolean) => {
-  buttons.classList.remove('hide')
-  calculateTextPosition(view, buttons, (start, end, target, parent) => {
-    const $editor = buttons.parentElement
-    if (!$editor)
-      throw missingRootElement()
-
-    const selectionWidth = end.left - start.left
-    let left = start.left - parent.left - (target.width - selectionWidth) / 2
-    let top = start.top - parent.top - target.height - 14 + $editor.scrollTop
-
-    if (left < 0)
-      left = 0
-
-    const maxLeft = $editor.clientWidth - (target.width + 4)
-    if (left > maxLeft)
-      left = maxLeft
-
-    if (top < $editor.scrollTop || (isBottom && parent.bottom - start.bottom > target.height))
-      top = start.bottom - parent.top + 14 + $editor.scrollTop
-
-    return [top, left]
-  })
-}

package/src/button-manager/create-tooltip.ts

@@ -1,33 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorView } from '@milkdown/prose/view'
-import type { ThemeUtils } from '@milkdown/utils'
-
-import type { ButtonList } from '../item'
-import { injectStyle } from './style'
-
-interface Tooltip {
-  dom: HTMLDivElement
-  render: (editorView: EditorView) => void
-}
-
-export const createTooltip = (buttonMap: ButtonList, utils: ThemeUtils, className: string): Tooltip => {
-  const div = document.createElement('div')
-  utils.themeManager.onFlush(() => {
-    const style = utils.getStyle(emotion => injectStyle(utils.themeManager, emotion)) || ''
-    if (style)
-      div.classList.add(style)
-  })
-
-  div.classList.add(utils.getClassName({}, className))
-
-  return {
-    dom: div,
-    render: (editorView: EditorView) => {
-      buttonMap
-        .filter(item => item.enable(editorView) && item.$ != null)
-        .forEach(({ $ }) => div.appendChild($))
-
-      editorView.dom.parentNode?.appendChild(div)
-    },
-  }
-}

package/src/button-manager/filter-button.ts

@@ -1,28 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorView } from '@milkdown/prose/view'
-
-import type { ButtonList } from '../item'
-import { noActive } from './no-active'
-
-export const filterButton = (buttons: ButtonList, view: EditorView) => {
-  buttons
-    .filter(item => item.enable(view) && item.$ != null)
-    .forEach((item) => {
-      const disable = item.disable?.(view)
-      if (disable) {
-        item.$.classList.add('hide')
-        return
-      }
-
-      item.$.classList.remove('hide')
-
-      const active = item.active(view)
-      if (active) {
-        item.$.classList.add('active')
-        return
-      }
-      item.$.classList.remove('active')
-    })
-
-  return noActive(buttons, view)
-}

package/src/button-manager/index.ts

@@ -1,50 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorView } from '@milkdown/prose/view'
-import type { ThemeUtils } from '@milkdown/utils'
-
-import type { ButtonList } from '../item'
-import { calcButtonPos } from './calc-button-pos'
-import { createTooltip } from './create-tooltip'
-import { filterButton } from './filter-button'
-
-export const createButtonManager = (
-  buttons: ButtonList,
-  utils: ThemeUtils,
-  bottom: boolean,
-  containerClassName: string,
-) => {
-  const { dom: buttonDOM, render } = createTooltip(buttons, utils, containerClassName)
-
-  const onClick = (e: Event) => {
-    const target = buttons.find(({ $ }) => e.target instanceof Element && $.contains(e.target))
-    if (!target)
-      return
-
-    e.stopPropagation()
-    e.preventDefault()
-    target.command()
-  }
-
-  const hide = () => {
-    buttonDOM.classList.add('hide')
-  }
-
-  buttonDOM.addEventListener('mousedown', onClick)
-
-  return {
-    destroy: () => {
-      buttonDOM.removeEventListener('mousedown', onClick)
-      buttonDOM.remove()
-    },
-    hide,
-    update: (editorView: EditorView) => {
-      const noActive = filterButton(buttons, editorView)
-      if (noActive) {
-        hide()
-        return
-      }
-      calcButtonPos(buttonDOM, editorView, bottom)
-    },
-    render,
-  }
-}

package/src/button-manager/no-active.ts

@@ -1,10 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorView } from '@milkdown/prose/view'
-
-import type { ButtonList } from '../item'
-
-export const noActive = (buttonMap: ButtonList, view: EditorView) => {
-  return Object.values(buttonMap)
-    .filter(item => item.enable(view) && item.$ != null)
-    .every(({ $ }) => $.classList.contains('hide'))
-}

package/src/button-manager/style.ts

@@ -1,51 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Color, Emotion, ThemeManager } from '@milkdown/core'
-import { ThemeBorder, ThemeColor, ThemeShadow, ThemeSize } from '@milkdown/core'
-
-export const injectStyle = (themeManager: ThemeManager, { css }: Emotion) => {
-  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])
-  const lineWidth = themeManager.get(ThemeSize, 'lineWidth')
-  return css`
-        display: inline-flex;
-        cursor: pointer;
-        justify-content: space-evenly;
-        position: absolute;
-        border-radius: ${themeManager.get(ThemeSize, 'radius')};
-        z-index: 2;
-
-        ${themeManager.get(ThemeBorder, undefined)}
-        ${themeManager.get(ThemeShadow, undefined)}
-
-        overflow: hidden;
-        background: ${palette('surface')};
-
-        .icon {
-            position: relative;
-            color: ${palette('solid', 0.87)};
-
-            width: 48px;
-            line-height: 48px;
-            text-align: center;
-            transition: all 0.4s ease-in-out;
-            &:hover {
-                background-color: ${palette('secondary', 0.12)};
-            }
-            &.active {
-                color: ${palette('primary')};
-            }
-            &:not(:last-child)::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                right: calc(-0.5 * ${lineWidth});
-                width: ${lineWidth};
-                bottom: 0;
-                background: ${palette('line')};
-            }
-        }
-        &.hide,
-        .hide {
-            display: none;
-        }
-    `
-}

package/src/item.ts

@@ -1,67 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { ThemeIcon, commandsCtx, schemaCtx, themeManagerCtx } from '@milkdown/core'
-import type { Icon } from '@milkdown/design-system'
-import type { MarkType } from '@milkdown/prose/model'
-import type { EditorView } from '@milkdown/prose/view'
-
-import { hasMark, isTextAndNotHasMark } from './utility'
-
-export type Pred = (view: EditorView) => boolean
-export type Updater = (view: EditorView, $: HTMLElement) => void
-export type Event2Command = (e: Event) => void
-
-export type OnClick = (ctx: Ctx) => void
-
-export interface Item {
-  icon: Icon | ((ctx: Ctx) => HTMLElement)
-  onClick: string | ((ctx: Ctx) => () => void)
-  isHidden: (ctx: Ctx) => Pred
-  isActive: (ctx: Ctx) => Pred
-  canAddToDOM: (ctx: Ctx) => Pred
-}
-
-export interface ButtonItem {
-  $: HTMLElement
-  command: () => void
-  active: Pred
-  disable?: Pred
-  enable: Pred
-}
-
-export const createToggleIcon = (icon: Icon, onClick: string, mark?: MarkType, disableForMark?: MarkType): Item => ({
-  icon,
-  onClick,
-  isHidden: () => (view: EditorView) => isTextAndNotHasMark(view.state, disableForMark),
-  isActive: () => (view: EditorView) => hasMark(view.state, mark),
-  canAddToDOM: () => (view: EditorView) => !!mark && !!view.state.schema.marks[mark.name],
-})
-
-export const defaultButtons = (ctx: Ctx) => {
-  const marks = ctx.get(schemaCtx).marks
-  return [
-    createToggleIcon('bold', 'ToggleBold', marks.strong),
-    createToggleIcon('italic', 'ToggleItalic', marks.em),
-    createToggleIcon('strikeThrough', 'ToggleStrikeThrough', marks.strike_through),
-    createToggleIcon('code', 'ToggleInlineCode', marks.code_inline),
-    createToggleIcon('link', 'ToggleLink', marks.link),
-  ]
-}
-
-export type ButtonList = ButtonItem[]
-
-export interface TooltipOptions {
-  bottom: boolean
-  items: (ctx: Ctx) => Array<Item>
-}
-
-export const buttonMap = (ctx: Ctx, items: (ctx: Ctx) => Array<Item> = defaultButtons): ButtonList => {
-  const toButton = ({ icon, onClick, isHidden, isActive, canAddToDOM }: Item): ButtonItem => ({
-    $: typeof icon === 'function' ? icon(ctx) : (ctx.get(themeManagerCtx).get(ThemeIcon, icon)?.dom as HTMLElement),
-    command: typeof onClick === 'string' ? () => ctx.get(commandsCtx).call(onClick) : onClick(ctx),
-    disable: isHidden(ctx),
-    active: isActive(ctx),
-    enable: canAddToDOM(ctx),
-  })
-  return items(ctx).map(toButton)
-}

package/src/selection-marks-tooltip.ts

@@ -1,50 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { EditorState } from '@milkdown/prose/state'
-import type { EditorView } from '@milkdown/prose/view'
-import type { ThemeUtils } from '@milkdown/utils'
-
-import { createButtonManager } from './button-manager'
-import type { ButtonList } from './item'
-
-export const createPlugin = (buttonMap: ButtonList, utils: ThemeUtils, bottom: boolean, containerClassName: string) => {
-  let buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName)
-  let shouldHide = false
-
-  const hide = () => {
-    buttonManager.hide()
-  }
-
-  const update = (view: EditorView, prevState?: EditorState) => {
-    const { state } = view
-
-    if (!view.editable || shouldHide) {
-      hide()
-      return
-    }
-
-    const isEqualSelection = prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection)
-    if (isEqualSelection)
-      return
-
-    buttonManager.update(view)
-  }
-
-  return {
-    recreate: (editorView: EditorView) => {
-      buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName)
-      buttonManager.render(editorView)
-      update(editorView)
-    },
-    update,
-    destroy: () => {
-      buttonManager.destroy()
-    },
-    render: (editorView: EditorView) => {
-      buttonManager.render(editorView)
-      update(editorView)
-    },
-    setHide: (isTyping: boolean) => {
-      shouldHide = isTyping
-    },
-  }
-}

package/src/utility/element.ts

@@ -1,3 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-export const elementIsTag = (element: HTMLElement, tagName: string): boolean =>
-  element.tagName === tagName.toUpperCase()

package/src/utility/index.ts

@@ -1,3 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-export * from './element'
-export * from './prosemirror'

package/src/utility/prosemirror.ts

@@ -1,42 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { findParentNode } from '@milkdown/prose'
-import type { MarkType, Node, NodeType } from '@milkdown/prose/model'
-import type { EditorState } from '@milkdown/prose/state'
-import { TextSelection } from '@milkdown/prose/state'
-
-export interface Position {
-  start: number
-  end: number
-}
-
-export const hasMark = (editorState: EditorState, type?: MarkType): boolean => {
-  if (!type)
-    return false
-
-  const { from, to } = editorState.selection
-
-  return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type)
-}
-
-export const isTextSelection = (editorState: EditorState): boolean => {
-  const { selection } = editorState
-  if (selection instanceof TextSelection) {
-    const text = editorState.doc.textBetween(selection.from, selection.to)
-
-    if (!text)
-      return false
-
-    return true
-  }
-  return false
-}
-
-export const isInCodeFence = (editorState: EditorState): boolean =>
-  Boolean(findParentNode(node => !!node.type.spec.code)(editorState.selection))
-
-export const isTextAndNotHasMark = (editorState: EditorState, mark?: MarkType): boolean =>
-  !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark)
-
-export const equalNodeType = (nodeType: NodeType, node: Node) => {
-  return (Array.isArray(nodeType) && nodeType.includes(node.type)) || node.type === nodeType
-}