@milkdown/plugin-tooltip 7.3.5 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts.map +1 -1
- package/lib/index.es.js +82 -67
- package/lib/index.es.js.map +1 -1
- package/lib/tooltip-plugin.d.ts.map +1 -1
- package/lib/tooltip-provider.d.ts +9 -4
- package/lib/tooltip-provider.d.ts.map +1 -1
- package/package.json +8 -6
- package/src/index.ts +0 -1
- package/src/tooltip-plugin.ts +0 -1
- package/src/tooltip-provider.ts +71 -32
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"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
CHANGED
|
@@ -1,87 +1,102 @@
|
|
|
1
|
-
var
|
|
2
|
-
if (!
|
|
3
|
-
throw TypeError("Cannot " +
|
|
1
|
+
var k = (o, t, e) => {
|
|
2
|
+
if (!t.has(o))
|
|
3
|
+
throw TypeError("Cannot " + e);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
if (
|
|
5
|
+
var a = (o, t, e) => (k(o, t, "read from private field"), e ? e.call(o) : t.get(o)), l = (o, t, e) => {
|
|
6
|
+
if (t.has(o))
|
|
7
7
|
throw TypeError("Cannot add the same private member more than once");
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
var
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
t instanceof WeakSet ? t.add(o) : t.set(o, e);
|
|
9
|
+
}, c = (o, t, e, s) => (k(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
|
|
10
|
+
var T = (o, t, e) => (k(o, t, "access private method"), e);
|
|
11
|
+
import { TextSelection as F, Plugin as H, PluginKey as M } from "@milkdown/prose/state";
|
|
12
|
+
import R from "lodash.debounce";
|
|
13
|
+
import { computePosition as S, flip as b, platform as y, offset as j } from "@floating-ui/dom";
|
|
14
|
+
import { posToDOMRect as q } from "@milkdown/prose";
|
|
15
|
+
import { offsetParent as C } from "composed-offset-position";
|
|
16
|
+
import { $ctx as I, $prose as K } from "@milkdown/utils";
|
|
17
|
+
var p, m, h, f, d, P, E;
|
|
18
|
+
class Q {
|
|
19
|
+
constructor(t) {
|
|
19
20
|
/// @internal
|
|
20
|
-
|
|
21
|
+
l(this, P);
|
|
21
22
|
/// @internal
|
|
22
|
-
|
|
23
|
+
l(this, p, void 0);
|
|
23
24
|
/// @internal
|
|
24
|
-
|
|
25
|
+
l(this, m, void 0);
|
|
26
|
+
l(this, h, void 0);
|
|
25
27
|
/// @internal
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
c(this,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
...n(this, h),
|
|
39
|
-
content: this.element
|
|
40
|
-
})), !(p || w)) {
|
|
41
|
-
if (!n(this, m).call(this, t, s)) {
|
|
42
|
-
this.hide();
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
n(this, i).setProps({
|
|
46
|
-
getReferenceClientRect: () => S(t, k, P)
|
|
47
|
-
}), this.show();
|
|
28
|
+
l(this, f, void 0);
|
|
29
|
+
l(this, d, void 0);
|
|
30
|
+
c(this, h, !1), this.onShow = () => {
|
|
31
|
+
}, this.onHide = () => {
|
|
32
|
+
}, c(this, d, (e, s) => {
|
|
33
|
+
var w;
|
|
34
|
+
const { state: n, composing: r } = e, { selection: u, doc: $ } = n, { ranges: g } = u, x = Math.min(...g.map((i) => i.$from.pos)), O = Math.max(...g.map((i) => i.$to.pos)), _ = s && s.doc.eq($) && s.selection.eq(u);
|
|
35
|
+
if (a(this, h) || ((w = e.dom.parentElement) == null || w.appendChild(this.element), c(this, h, !0)), r || _)
|
|
36
|
+
return;
|
|
37
|
+
if (!a(this, m).call(this, e, s)) {
|
|
38
|
+
this.hide();
|
|
39
|
+
return;
|
|
48
40
|
}
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
S({
|
|
42
|
+
getBoundingClientRect: () => q(e, x, O)
|
|
43
|
+
}, this.element, {
|
|
44
|
+
placement: "top",
|
|
45
|
+
middleware: [b()],
|
|
46
|
+
platform: {
|
|
47
|
+
...y,
|
|
48
|
+
getOffsetParent: (i) => y.getOffsetParent(i, C)
|
|
49
|
+
}
|
|
50
|
+
}).then(({ x: i, y: B }) => {
|
|
51
|
+
Object.assign(this.element.style, {
|
|
52
|
+
left: `${i}px`,
|
|
53
|
+
top: `${B}px`
|
|
54
|
+
});
|
|
55
|
+
}), this.show();
|
|
56
|
+
}), this.update = (e, s) => {
|
|
57
|
+
R(a(this, d), a(this, p))(e, s);
|
|
51
58
|
}, this.destroy = () => {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
}, this.show = (e) => {
|
|
60
|
+
this.element.dataset.show = "true", e && S(e, this.element, {
|
|
61
|
+
placement: "top",
|
|
62
|
+
middleware: [b(), j(a(this, f))],
|
|
63
|
+
platform: {
|
|
64
|
+
...y,
|
|
65
|
+
getOffsetParent: (s) => y.getOffsetParent(s, C)
|
|
66
|
+
}
|
|
67
|
+
}).then(({ x: s, y: n }) => {
|
|
68
|
+
Object.assign(this.element.style, {
|
|
69
|
+
left: `${s}px`,
|
|
70
|
+
top: `${n}px`
|
|
71
|
+
});
|
|
72
|
+
}), this.onShow();
|
|
57
73
|
}, this.hide = () => {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}, 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));
|
|
74
|
+
this.element.dataset.show = "false", this.onHide();
|
|
75
|
+
}, this.element = t.content, c(this, p, t.debounce ?? 200), c(this, m, t.shouldShow ?? T(this, P, E)), c(this, f, t.offset);
|
|
61
76
|
}
|
|
62
77
|
}
|
|
63
|
-
|
|
64
|
-
const { doc:
|
|
65
|
-
return !(
|
|
78
|
+
p = new WeakMap(), m = new WeakMap(), h = new WeakMap(), f = new WeakMap(), d = new WeakMap(), P = new WeakSet(), E = function(t) {
|
|
79
|
+
const { doc: e, selection: s } = t.state, { empty: n, from: r, to: u } = s, $ = !e.textBetween(r, u).length && t.state.selection instanceof F, g = this.element.contains(document.activeElement), x = !t.hasFocus() && !g, O = !t.editable;
|
|
80
|
+
return !(x || n || $ || O);
|
|
66
81
|
};
|
|
67
|
-
function
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
return new
|
|
71
|
-
key: new
|
|
72
|
-
...
|
|
82
|
+
function V(o) {
|
|
83
|
+
const t = I({}, `${o}_TOOLTIP_SPEC`), e = K((n) => {
|
|
84
|
+
const r = n.get(t.key);
|
|
85
|
+
return new H({
|
|
86
|
+
key: new M(`${o}_TOOLTIP`),
|
|
87
|
+
...r
|
|
73
88
|
});
|
|
74
|
-
}), s = [
|
|
75
|
-
return s.key =
|
|
89
|
+
}), s = [t, e];
|
|
90
|
+
return s.key = t.key, s.pluginKey = e.key, t.meta = {
|
|
76
91
|
package: "@milkdown/plugin-tooltip",
|
|
77
|
-
displayName: `Ctx<tooltipSpec>|${
|
|
78
|
-
},
|
|
92
|
+
displayName: `Ctx<tooltipSpec>|${o}`
|
|
93
|
+
}, e.meta = {
|
|
79
94
|
package: "@milkdown/plugin-tooltip",
|
|
80
|
-
displayName: `Prose<tooltip>|${
|
|
95
|
+
displayName: `Prose<tooltip>|${o}`
|
|
81
96
|
}, s;
|
|
82
97
|
}
|
|
83
98
|
export {
|
|
84
|
-
|
|
85
|
-
|
|
99
|
+
Q as TooltipProvider,
|
|
100
|
+
V as tooltipFactory
|
|
86
101
|
};
|
|
87
102
|
//# sourceMappingURL=index.es.js.map
|
package/lib/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["import type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport debounce from 'lodash.debounce'\nimport type { VirtualElement } from '@floating-ui/dom'\nimport { computePosition, flip, offset, platform } from '@floating-ui/dom'\nimport { posToDOMRect } from '@milkdown/prose'\nimport { offsetParent } from 'composed-offset-position'\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()],\n platform: {\n ...platform,\n getOffsetParent: element =>\n platform.getOffsetParent(element, offsetParent),\n },\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 platform: {\n ...platform,\n getOffsetParent: element =>\n platform.getOffsetParent(element, offsetParent),\n },\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","platform","element","offsetParent","x","y","debounce","virtualElement","offset","__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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAInD,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,IAAI,GAAG,EAAE,eAAe,CAAA;AAGnE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IACjH,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,CAAA;IACpD,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;CACzB,CAAA;AAGD,wBAAgB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,EAAE,EAAE,EAAE,0BAsBpE"}
|
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
import type { EditorState } from '@milkdown/prose/state';
|
|
2
2
|
import type { EditorView } from '@milkdown/prose/view';
|
|
3
|
-
import type {
|
|
3
|
+
import type { VirtualElement } from '@floating-ui/dom';
|
|
4
4
|
export interface TooltipProviderOptions {
|
|
5
5
|
content: HTMLElement;
|
|
6
|
-
tippyOptions?: Partial<Props>;
|
|
7
6
|
debounce?: number;
|
|
8
7
|
shouldShow?: (view: EditorView, prevState?: EditorState) => boolean;
|
|
8
|
+
offset?: number | {
|
|
9
|
+
mainAxis?: number;
|
|
10
|
+
crossAxis?: number;
|
|
11
|
+
alignmentAxis?: number | null;
|
|
12
|
+
};
|
|
9
13
|
}
|
|
10
14
|
export declare class TooltipProvider {
|
|
11
15
|
#private;
|
|
12
16
|
element: HTMLElement;
|
|
17
|
+
onShow: () => void;
|
|
18
|
+
onHide: () => void;
|
|
13
19
|
constructor(options: TooltipProviderOptions);
|
|
14
20
|
update: (view: EditorView, prevState?: EditorState) => void;
|
|
15
21
|
destroy: () => void;
|
|
16
|
-
show: () => void;
|
|
22
|
+
show: (virtualElement?: VirtualElement) => void;
|
|
17
23
|
hide: () => void;
|
|
18
|
-
getInstance: () => Instance<Props> | undefined;
|
|
19
24
|
}
|
|
20
25
|
//# sourceMappingURL=tooltip-provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMtD,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;IAoD3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IA2BD,OAAO,aAAW;IAGlB,IAAI,oBAAqB,cAAc,UAsBtC;IAGD,IAAI,aAIH;CACF"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/plugin-tooltip",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "7.
|
|
4
|
+
"version": "7.4.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -30,17 +30,19 @@
|
|
|
30
30
|
"@milkdown/prose": "^7.2.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"@floating-ui/dom": "^1.5.1",
|
|
33
34
|
"@types/lodash.debounce": "^4.0.7",
|
|
35
|
+
"composed-offset-position": "^0.0.4",
|
|
34
36
|
"lodash.debounce": "^4.0.8",
|
|
35
37
|
"tippy.js": "^6.3.7",
|
|
36
38
|
"tslib": "^2.5.0",
|
|
37
|
-
"@milkdown/exception": "7.
|
|
38
|
-
"@milkdown/utils": "7.
|
|
39
|
+
"@milkdown/exception": "7.4.0",
|
|
40
|
+
"@milkdown/utils": "7.4.0"
|
|
39
41
|
},
|
|
40
42
|
"devDependencies": {
|
|
41
|
-
"@milkdown/core": "7.
|
|
42
|
-
"@milkdown/ctx": "7.
|
|
43
|
-
"@milkdown/prose": "7.
|
|
43
|
+
"@milkdown/core": "7.4.0",
|
|
44
|
+
"@milkdown/ctx": "7.4.0",
|
|
45
|
+
"@milkdown/prose": "7.4.0"
|
|
44
46
|
},
|
|
45
47
|
"nx": {
|
|
46
48
|
"targets": {
|
package/src/index.ts
CHANGED
package/src/tooltip-plugin.ts
CHANGED
package/src/tooltip-provider.ts
CHANGED
|
@@ -1,46 +1,60 @@
|
|
|
1
|
-
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import { posToDOMRect } from '@milkdown/prose'
|
|
3
1
|
import type { EditorState } from '@milkdown/prose/state'
|
|
4
2
|
import { TextSelection } from '@milkdown/prose/state'
|
|
5
3
|
import type { EditorView } from '@milkdown/prose/view'
|
|
6
4
|
import debounce from 'lodash.debounce'
|
|
7
|
-
import type {
|
|
8
|
-
import
|
|
5
|
+
import type { VirtualElement } from '@floating-ui/dom'
|
|
6
|
+
import { computePosition, flip, offset, platform } from '@floating-ui/dom'
|
|
7
|
+
import { posToDOMRect } from '@milkdown/prose'
|
|
8
|
+
import { offsetParent } from 'composed-offset-position'
|
|
9
9
|
|
|
10
10
|
/// Options for tooltip provider.
|
|
11
11
|
export interface TooltipProviderOptions {
|
|
12
12
|
/// The tooltip content.
|
|
13
13
|
content: HTMLElement
|
|
14
|
-
/// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.
|
|
15
|
-
tippyOptions?: Partial<Props>
|
|
16
14
|
/// The debounce time for updating tooltip, 200ms by default.
|
|
17
15
|
debounce?: number
|
|
18
16
|
/// The function to determine whether the tooltip should be shown.
|
|
19
17
|
shouldShow?: (view: EditorView, prevState?: EditorState) => boolean
|
|
18
|
+
/// The offset to get the block. Default is 0.
|
|
19
|
+
offset?: number | {
|
|
20
|
+
mainAxis?: number
|
|
21
|
+
crossAxis?: number
|
|
22
|
+
alignmentAxis?: number | null
|
|
23
|
+
}
|
|
20
24
|
}
|
|
21
25
|
|
|
22
26
|
/// A provider for creating tooltip.
|
|
23
27
|
export class TooltipProvider {
|
|
24
28
|
/// @internal
|
|
25
|
-
#
|
|
29
|
+
readonly #debounce: number
|
|
26
30
|
|
|
27
31
|
/// @internal
|
|
28
|
-
#
|
|
32
|
+
readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
|
|
29
33
|
|
|
30
34
|
/// @internal
|
|
31
|
-
#
|
|
35
|
+
#initialized = false
|
|
32
36
|
|
|
33
37
|
/// @internal
|
|
34
|
-
#
|
|
38
|
+
readonly #offset?: number | {
|
|
39
|
+
mainAxis?: number
|
|
40
|
+
crossAxis?: number
|
|
41
|
+
alignmentAxis?: number | null
|
|
42
|
+
}
|
|
35
43
|
|
|
36
44
|
/// The root element of the tooltip.
|
|
37
45
|
element: HTMLElement
|
|
38
46
|
|
|
47
|
+
/// On show callback.
|
|
48
|
+
onShow = () => {}
|
|
49
|
+
|
|
50
|
+
/// On hide callback.
|
|
51
|
+
onHide = () => {}
|
|
52
|
+
|
|
39
53
|
constructor(options: TooltipProviderOptions) {
|
|
40
54
|
this.element = options.content
|
|
41
|
-
this.#tippyOptions = options.tippyOptions ?? {}
|
|
42
55
|
this.#debounce = options.debounce ?? 200
|
|
43
56
|
this.#shouldShow = options.shouldShow ?? this.#_shouldShow
|
|
57
|
+
this.#offset = options.offset
|
|
44
58
|
}
|
|
45
59
|
|
|
46
60
|
/// @internal
|
|
@@ -52,15 +66,10 @@ export class TooltipProvider {
|
|
|
52
66
|
const to = Math.max(...ranges.map(range => range.$to.pos))
|
|
53
67
|
const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
|
|
54
68
|
|
|
55
|
-
this.#
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
arrow: false,
|
|
60
|
-
duration: 0,
|
|
61
|
-
...this.#tippyOptions,
|
|
62
|
-
content: this.element,
|
|
63
|
-
})
|
|
69
|
+
if (!this.#initialized) {
|
|
70
|
+
view.dom.parentElement?.appendChild(this.element)
|
|
71
|
+
this.#initialized = true
|
|
72
|
+
}
|
|
64
73
|
|
|
65
74
|
if (composing || isSame)
|
|
66
75
|
return
|
|
@@ -70,9 +79,24 @@ export class TooltipProvider {
|
|
|
70
79
|
return
|
|
71
80
|
}
|
|
72
81
|
|
|
73
|
-
|
|
74
|
-
|
|
82
|
+
const virtualEl: VirtualElement = {
|
|
83
|
+
getBoundingClientRect: () => posToDOMRect(view, from, to),
|
|
84
|
+
}
|
|
85
|
+
computePosition(virtualEl, this.element, {
|
|
86
|
+
placement: 'top',
|
|
87
|
+
middleware: [flip()],
|
|
88
|
+
platform: {
|
|
89
|
+
...platform,
|
|
90
|
+
getOffsetParent: element =>
|
|
91
|
+
platform.getOffsetParent(element, offsetParent),
|
|
92
|
+
},
|
|
75
93
|
})
|
|
94
|
+
.then(({ x, y }) => {
|
|
95
|
+
Object.assign(this.element.style, {
|
|
96
|
+
left: `${x}px`,
|
|
97
|
+
top: `${y}px`,
|
|
98
|
+
})
|
|
99
|
+
})
|
|
76
100
|
|
|
77
101
|
this.show()
|
|
78
102
|
}
|
|
@@ -109,22 +133,37 @@ export class TooltipProvider {
|
|
|
109
133
|
}
|
|
110
134
|
|
|
111
135
|
/// Destroy the tooltip.
|
|
112
|
-
destroy = () => {
|
|
113
|
-
this.#tippy?.destroy()
|
|
114
|
-
}
|
|
136
|
+
destroy = () => {}
|
|
115
137
|
|
|
116
138
|
/// Show the tooltip.
|
|
117
|
-
show = () => {
|
|
118
|
-
this
|
|
139
|
+
show = (virtualElement?: VirtualElement) => {
|
|
140
|
+
this.element.dataset.show = 'true'
|
|
141
|
+
|
|
142
|
+
if (virtualElement) {
|
|
143
|
+
computePosition(virtualElement, this.element, {
|
|
144
|
+
placement: 'top',
|
|
145
|
+
middleware: [flip(), offset(this.#offset)],
|
|
146
|
+
platform: {
|
|
147
|
+
...platform,
|
|
148
|
+
getOffsetParent: element =>
|
|
149
|
+
platform.getOffsetParent(element, offsetParent),
|
|
150
|
+
},
|
|
151
|
+
})
|
|
152
|
+
.then(({ x, y }) => {
|
|
153
|
+
Object.assign(this.element.style, {
|
|
154
|
+
left: `${x}px`,
|
|
155
|
+
top: `${y}px`,
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
this.onShow()
|
|
119
161
|
}
|
|
120
162
|
|
|
121
163
|
/// Hide the tooltip.
|
|
122
164
|
hide = () => {
|
|
123
|
-
this
|
|
124
|
-
}
|
|
165
|
+
this.element.dataset.show = 'false'
|
|
125
166
|
|
|
126
|
-
|
|
127
|
-
getInstance = () => {
|
|
128
|
-
return this.#tippy
|
|
167
|
+
this.onHide()
|
|
129
168
|
}
|
|
130
169
|
}
|