@pie-lib/editable-html-tip-tap 3.1.3-next.20261024175806 → 3.1.3-next.20261026154827

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.
Files changed (5) hide show
  1. package/dist/components/CharacterPicker.d.ts +5 -1
  2. package/dist/components/CharacterPicker.js +92 -36
  3. package/dist/components/MenuBar.js +100 -82
  4. package/dist/components/TiptapContainer.js +2 -1
  5. package/package.json +8 -8
package/dist/components/CharacterPicker.d.ts CHANGED
@@ -8,16 +8,20 @@ declare const CharacterIcon: {
8
8
  letter: PropTypes.Requireable<string>;
9
9
  };
10
10
  };
11
- export declare function CharacterPicker({ editor, opts, onClose }: {
11
+ export declare function CharacterPicker({ editor, opts, onClose, triggerEl, focusOnOpen }: {
12
12
  editor: any;
13
13
  opts: any;
14
14
  onClose: any;
15
+ triggerEl: any;
16
+ focusOnOpen: any;
15
17
  }): React.JSX.Element | null;
16
18
  export declare namespace CharacterPicker {
17
19
  var propTypes: {
18
20
  editor: PropTypes.Requireable<object>;
19
21
  opts: PropTypes.Requireable<object>;
20
22
  onClose: PropTypes.Validator<(...args: any[]) => any>;
23
+ triggerEl: PropTypes.Requireable<object>;
24
+ focusOnOpen: PropTypes.Requireable<boolean>;
21
25
  };
22
26
  }
23
27
  export { CharacterIcon };
package/dist/components/CharacterPicker.js CHANGED
@@ -15,32 +15,46 @@ var m = ({ letter: e }) => /* @__PURE__ */ d("div", {
15
15
  children: e
16
16
  });
17
17
  m.propTypes = { letter: l.string };
18
- function h({ editor: l, opts: m, onClose: h }) {
18
+ var h = [
19
+ "ArrowLeft",
20
+ "ArrowRight",
21
+ "ArrowUp",
22
+ "ArrowDown"
23
+ ], g = "button, a[href], input, select, textarea, [contenteditable=\"true\"], [tabindex]", _ = (e) => {
24
+ let t = e.tabIndex >= 0, n = !e.disabled, r = !!e.closest("[inert]"), i = e.getClientRects().length > 0;
25
+ return t && n && !r && i;
26
+ }, v = (e) => Array.from(e.querySelectorAll(g)).filter(_), y = (e, t) => (e + t) % t, b = (e, t, n, r) => e[y(t + {
27
+ ArrowLeft: -1,
28
+ ArrowRight: 1,
29
+ ArrowUp: -r,
30
+ ArrowDown: r
31
+ }[n], e.length)];
32
+ function x({ editor: l, opts: m, onClose: g, triggerEl: _, focusOnOpen: y }) {
19
33
  if (!m?.characters?.length) return null;
20
- let g = a(null), _ = a(h), [v, y] = o({
34
+ let x = a(null), S = a(g), [C, w] = o({
21
35
  top: 0,
22
36
  left: 0
23
- }), [b, x] = o(null);
24
- _.current = h;
25
- let S = i(() => {
37
+ }), [T, E] = o(null);
38
+ S.current = g;
39
+ let D = i(() => {
26
40
  if (!m) return e;
27
41
  switch (!0) {
28
42
  case m.language === "spanish": return e;
29
43
  case m.language === "special": return t;
30
44
  default: return m;
31
45
  }
32
- }, [m]), C = i(() => S.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
33
- rows: S.characters.length,
46
+ }, [m]), O = i(() => D.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
47
+ rows: D.characters.length,
34
48
  columns: 0
35
- }), [S]), w = () => x(null);
49
+ }), [D]), k = () => E(null);
36
50
  r(() => () => {
37
- w();
51
+ k();
38
52
  }, []), r(() => {
39
53
  if (!l) return;
40
54
  let e = l.options.element, t = l.view.dom, n = () => {
41
- if (!g.current) return;
42
- let t = e.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = g.current.offsetHeight, a = g.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
43
- o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), y({
55
+ if (!x.current) return;
56
+ let t = e.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = x.current.offsetHeight, a = x.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
57
+ o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), w({
44
58
  top: o,
45
59
  left: s
46
60
  });
@@ -53,7 +67,7 @@ function h({ editor: l, opts: m, onClose: h }) {
53
67
  };
54
68
  window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
55
69
  let a = (e) => {
56
- g.current && !g.current.contains(e.target) && !t.contains(e.target) && _.current();
70
+ x.current && !x.current.contains(e.target) && !t.contains(e.target) && S.current();
57
71
  }, o = setTimeout(() => {
58
72
  document.addEventListener("click", a);
59
73
  });
@@ -61,32 +75,70 @@ function h({ editor: l, opts: m, onClose: h }) {
61
75
  clearTimeout(o), r !== null && cancelAnimationFrame(r), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), document.removeEventListener("click", a);
62
76
  };
63
77
  }, [l]);
64
- let T = (e, t) => x({
78
+ let A = C.top !== 0 || C.left !== 0, j = () => Array.from(x.current?.querySelectorAll("button:not([disabled])") ?? []), M = a(!1);
79
+ r(() => {
80
+ if (!y || !A || M.current) return;
81
+ let e = j()[0];
82
+ e && (e.focus(), M.current = !0);
83
+ }, [y, A]), r(() => {
84
+ if (!_) return;
85
+ let e = () => {
86
+ S.current(), _.focus();
87
+ }, t = (e, t, n) => {
88
+ b(n, Math.max(0, n.indexOf(t.closest("button"))), e, O.columns || 1)?.focus();
89
+ }, n = () => {
90
+ let e = v(document.body).filter((e) => !x.current.contains(e)), t = e.indexOf(_);
91
+ ((t === -1 ? null : e[t + 1]) || _).focus();
92
+ }, r = (r) => {
93
+ if (!x.current) return;
94
+ let i = j();
95
+ if (!i.length) return;
96
+ let a = r.target, o = x.current.contains(a), s = i[0], c = i[i.length - 1];
97
+ if (o && r.key === "Escape") {
98
+ r.preventDefault(), r.stopPropagation(), e();
99
+ return;
100
+ }
101
+ if (o && h.includes(r.key)) {
102
+ r.preventDefault(), r.stopPropagation(), t(r.key, a, i);
103
+ return;
104
+ }
105
+ if (r.key !== "Tab") return;
106
+ let l = a === _ && !r.shiftKey, u = a === s && r.shiftKey, d = a === c && !r.shiftKey;
107
+ l ? (r.preventDefault(), s.focus()) : u ? (r.preventDefault(), _.focus()) : d && (r.preventDefault(), n());
108
+ };
109
+ return document.addEventListener("keydown", r, !0), () => document.removeEventListener("keydown", r, !0);
110
+ }, [_, O.columns]);
111
+ let N = (e, t) => E({
65
112
  anchorEl: e.currentTarget,
66
113
  el: t
67
- });
114
+ }), P = a("keyboard");
68
115
  return /* @__PURE__ */ f(u, { children: [c.createPortal(/* @__PURE__ */ d("div", {
69
- ref: g,
116
+ ref: x,
70
117
  className: "insert-character-dialog",
71
118
  "data-toolbar-for": l.instanceId,
119
+ onPointerDown: () => {
120
+ P.current = "pointer";
121
+ },
122
+ onKeyDown: () => {
123
+ P.current = "keyboard";
124
+ },
72
125
  style: {
73
- visibility: v.top === 0 && v.left === 0 ? "hidden" : "initial",
126
+ visibility: A ? "initial" : "hidden",
74
127
  position: "fixed",
75
- top: `${v.top}px`,
76
- left: `${v.left}px`,
128
+ top: `${C.top}px`,
129
+ left: `${C.left}px`,
77
130
  maxWidth: "500px",
78
131
  zIndex: 1e3
79
132
  },
80
133
  children: /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d(p, {
81
134
  keyPadCharacterRef: m.keyPadCharacterRef,
82
135
  setKeypadInteraction: m.setKeypadInteraction,
83
- autoFocus: !0,
84
136
  noDecimal: !0,
85
137
  hideInput: !0,
86
138
  noLatexHandling: !0,
87
139
  hideDoneButtonBackground: !0,
88
- layoutForKeyPad: C,
89
- additionalKeys: S.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
140
+ layoutForKeyPad: O,
141
+ additionalKeys: D.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
90
142
  name: s(e, "name") || e,
91
143
  write: s(e, "write") || e,
92
144
  label: s(e, "label") || e,
@@ -99,43 +151,47 @@ function h({ editor: l, opts: m, onClose: h }) {
99
151
  border: "1px solid #000"
100
152
  }
101
153
  },
102
- ...S.hasPreview ? { actions: {
103
- onMouseEnter: (t) => T(t, e),
104
- onMouseLeave: w
154
+ ...D.hasPreview ? { actions: {
155
+ onMouseEnter: (t) => N(t, e),
156
+ onMouseLeave: k
105
157
  } } : {}
106
158
  }))], e), []),
107
159
  keypadMode: "language",
108
160
  onChange: (e) => {
109
- typeof e == "string" && l.chain().focus().insertContent(e).run();
161
+ typeof e == "string" && (P.current === "pointer" ? l.chain().focus().insertContent(e).run() : l.chain().insertContent(e).run());
110
162
  },
111
- onDone: h
163
+ onDone: () => {
164
+ g(), _?.focus();
165
+ }
112
166
  }) })
113
- }), document.body), b && c.createPortal(/* @__PURE__ */ f(n, {
114
- onClose: w,
115
- anchorEl: b.anchorEl,
167
+ }), document.body), T && c.createPortal(/* @__PURE__ */ f(n, {
168
+ onClose: k,
169
+ anchorEl: T.anchorEl,
116
170
  children: [
117
- /* @__PURE__ */ d("div", { children: b.el.label }),
171
+ /* @__PURE__ */ d("div", { children: T.el.label }),
118
172
  /* @__PURE__ */ d("div", {
119
173
  style: {
120
174
  fontSize: 20,
121
175
  lineHeight: "20px"
122
176
  },
123
- children: b.el.description
177
+ children: T.el.description
124
178
  }),
125
179
  /* @__PURE__ */ d("div", {
126
180
  style: {
127
181
  fontSize: 20,
128
182
  lineHeight: "20px"
129
183
  },
130
- children: b.el.unicode
184
+ children: T.el.unicode
131
185
  })
132
186
  ]
133
187
  }), document.body)] });
134
188
  }
135
- h.propTypes = {
189
+ x.propTypes = {
136
190
  editor: l.object,
137
191
  opts: l.object,
138
- onClose: l.func.isRequired
192
+ onClose: l.func.isRequired,
193
+ triggerEl: l.object,
194
+ focusOnOpen: l.bool
139
195
  };
140
196
  //#endregion
141
- export { m as CharacterIcon, h as CharacterPicker };
197
+ export { m as CharacterIcon, x as CharacterPicker };
package/dist/components/MenuBar.js CHANGED
@@ -5,34 +5,34 @@ import { ToolbarIcon as i } from "./respArea/ToolbarIcon.js";
5
5
  import { spanishConfig as a, specialConfig as ee } from "./characters/characterUtils.js";
6
6
  import te from "./icons/TextAlign.js";
7
7
  import o from "./icons/CssIcon.js";
8
- import { AddColumn as s, AddRow as ne, RemoveColumn as re, RemoveRow as ie, RemoveTable as c } from "./icons/TableIcons.js";
9
- import { CharacterIcon as l, CharacterPicker as u } from "./CharacterPicker.js";
10
- import { useLayoutEffect as d, useMemo as ae, useRef as f, useState as p } from "react";
11
- import { useEditorState as m } from "@tiptap/react";
8
+ import { AddColumn as s, AddRow as c, RemoveColumn as ne, RemoveRow as l, RemoveTable as re } from "./icons/TableIcons.js";
9
+ import { CharacterIcon as u, CharacterPicker as d } from "./CharacterPicker.js";
10
+ import { useEffect as f, useLayoutEffect as ie, useMemo as ae, useRef as p, useState as m } from "react";
11
+ import { useEditorState as oe } from "@tiptap/react";
12
12
  import { styled as h, useTheme as g } from "@mui/material/styles";
13
13
  import { NodeSelection as _ } from "prosemirror-state";
14
14
  import { color as v } from "@pie-lib/render-ui";
15
- import oe from "@mui/icons-material/Delete";
15
+ import se from "@mui/icons-material/Delete";
16
16
  import y from "@pie-lib/translator";
17
17
  import { jsx as b, jsxs as x } from "react/jsx-runtime";
18
- import S from "@mui/icons-material/FormatBold";
19
- import C from "@mui/icons-material/FormatItalic";
20
- import w from "@mui/icons-material/FormatStrikethrough";
21
- import T from "@mui/icons-material/Code";
22
- import E from "@mui/icons-material/GridOn";
23
- import D from "@mui/icons-material/FormatListBulleted";
24
- import O from "@mui/icons-material/FormatListNumbered";
25
- import k from "@mui/icons-material/FormatUnderlined";
26
- import A from "@mui/icons-material/Functions";
27
- import j from "@mui/icons-material/Image";
28
- import M from "@mui/icons-material/Redo";
29
- import N from "@mui/icons-material/Undo";
30
- import P from "@mui/icons-material/FormatQuote";
31
- import F from "@mui/icons-material/Theaters";
32
- import I from "@mui/icons-material/VolumeUp";
33
- import se from "@mui/icons-material/BorderAll";
18
+ import ce from "@mui/icons-material/FormatBold";
19
+ import le from "@mui/icons-material/FormatItalic";
20
+ import ue from "@mui/icons-material/FormatStrikethrough";
21
+ import de from "@mui/icons-material/Code";
22
+ import fe from "@mui/icons-material/GridOn";
23
+ import S from "@mui/icons-material/FormatListBulleted";
24
+ import C from "@mui/icons-material/FormatListNumbered";
25
+ import w from "@mui/icons-material/FormatUnderlined";
26
+ import T from "@mui/icons-material/Functions";
27
+ import E from "@mui/icons-material/Image";
28
+ import D from "@mui/icons-material/Redo";
29
+ import O from "@mui/icons-material/Undo";
30
+ import k from "@mui/icons-material/FormatQuote";
31
+ import A from "@mui/icons-material/Theaters";
32
+ import j from "@mui/icons-material/VolumeUp";
33
+ import M from "@mui/icons-material/BorderAll";
34
34
  //#region src/components/MenuBar.tsx
35
- var { translator: L } = y, R = () => /* @__PURE__ */ b("svg", {
35
+ var { translator: N } = y, P = () => /* @__PURE__ */ b("svg", {
36
36
  xmlns: "http://www.w3.org/2000/svg",
37
37
  height: "24px",
38
38
  viewBox: "0 0 24 24",
@@ -44,7 +44,7 @@ var { translator: L } = y, R = () => /* @__PURE__ */ b("svg", {
44
44
  d: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z",
45
45
  fill: "currentColor"
46
46
  })
47
- }), z = () => /* @__PURE__ */ b("svg", {
47
+ }), F = () => /* @__PURE__ */ b("svg", {
48
48
  xmlns: "http://www.w3.org/2000/svg",
49
49
  height: "24px",
50
50
  viewBox: "0 0 24 24",
@@ -56,7 +56,7 @@ var { translator: L } = y, R = () => /* @__PURE__ */ b("svg", {
56
56
  d: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z",
57
57
  fill: "currentColor"
58
58
  })
59
- }), B = () => /* @__PURE__ */ b("svg", {
59
+ }), I = () => /* @__PURE__ */ b("svg", {
60
60
  width: "30",
61
61
  height: "28",
62
62
  viewBox: "0 0 30 28",
@@ -73,8 +73,16 @@ var { translator: L } = y, R = () => /* @__PURE__ */ b("svg", {
73
73
  fill: "currentColor"
74
74
  })
75
75
  });
76
- function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAreaProps: y, onChange: V, autoWidthToolbar: H, hasFocus: U, language: W }) {
77
- let [G, K] = p(!1), q = f(null), J = v ?? {}, Y = m({
76
+ function L({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAreaProps: y, onChange: L, autoWidthToolbar: R, hasFocus: z, language: B }) {
77
+ let [V, H] = m(!1), [U, pe] = m({
78
+ el: null,
79
+ keyboard: !1
80
+ }), [W, G] = m(!1), K = p(null), q = (e, t) => {
81
+ pe({
82
+ el: t?.currentTarget ?? null,
83
+ keyboard: t?.detail === 0
84
+ }), H(e);
85
+ }, J = v ?? {}, Y = oe({
78
86
  editor: t,
79
87
  selector: (e) => {
80
88
  let { selection: t } = e.editor?.state || {}, n;
@@ -117,11 +125,19 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
117
125
  canRedo: e.editor.can().chain().redo().run() ?? !1
118
126
  };
119
127
  }
120
- }), X = !!H, Z = Y.hideDefaultToolbar && Y.currentNode?.type?.name === "drag_in_the_blank", Q = J.alwaysVisible || U && !Y.toolbarOpened && (!Y.hideDefaultToolbar || Z);
121
- d(() => {
122
- q.current?.toggleAttribute("inert", !Q);
128
+ }), X = !!R, Z = Y.hideDefaultToolbar && Y.currentNode?.type?.name === "drag_in_the_blank", Q = J.alwaysVisible || z && !W && !Y.toolbarOpened && (!Y.hideDefaultToolbar || Z);
129
+ f(() => {
130
+ z || G(!1);
131
+ }, [z]), f(() => {
132
+ if (!W || !t) return;
133
+ let e = () => G(!1), n = t.view.dom;
134
+ return t.on("update", e), t.on("selectionUpdate", e), n.addEventListener("mousedown", e), () => {
135
+ t.off("update", e), t.off("selectionUpdate", e), n.removeEventListener("mousedown", e);
136
+ };
137
+ }, [W, t]), ie(() => {
138
+ K.current?.toggleAttribute("inert", !Q);
123
139
  }, [Q]);
124
- let ce = r(h.toolbar, e, {
140
+ let me = r(h.toolbar, e, {
125
141
  [h.toolbarWithNoDone]: !0,
126
142
  [h.toolbarTop]: J.position === "top",
127
143
  [h.toolbarRight]: J.alignment === "right",
@@ -129,11 +145,11 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
129
145
  [h.autoWidth]: X,
130
146
  [h.fullWidth]: !X,
131
147
  [h.hidden]: J.isHidden === !0
132
- }), le = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, ue = (e) => {
148
+ }), he = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, ge = (e) => {
133
149
  e.preventDefault();
134
- }, $ = (e) => L.t(`editableHtml.buttons.${e}`, { lng: W }), de = ae(() => [
150
+ }, $ = (e) => N.t(`editableHtml.buttons.${e}`, { lng: B }), _e = ae(() => [
135
151
  {
136
- icon: /* @__PURE__ */ b(E, {}),
152
+ icon: /* @__PURE__ */ b(fe, {}),
137
153
  label: $("insertTable"),
138
154
  onClick: (e) => e.chain().focus().insertTable({
139
155
  rows: 2,
@@ -145,7 +161,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
145
161
  isDisabled: (e) => !e.canTable
146
162
  },
147
163
  {
148
- icon: /* @__PURE__ */ b(ne, {}),
164
+ icon: /* @__PURE__ */ b(c, {}),
149
165
  label: $("addTableRow"),
150
166
  onClick: (e) => e.chain().focus().addRowAfter().run(),
151
167
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -153,7 +169,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
153
169
  isDisabled: (e) => !e.canTable
154
170
  },
155
171
  {
156
- icon: /* @__PURE__ */ b(ie, {}),
172
+ icon: /* @__PURE__ */ b(l, {}),
157
173
  label: $("removeTableRow"),
158
174
  onClick: (e) => e.chain().focus().deleteRow().run(),
159
175
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -169,7 +185,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
169
185
  isDisabled: (e) => !e.canTable
170
186
  },
171
187
  {
172
- icon: /* @__PURE__ */ b(re, {}),
188
+ icon: /* @__PURE__ */ b(ne, {}),
173
189
  label: $("removeTableColumn"),
174
190
  onClick: (e) => e.chain().focus().deleteColumn().run(),
175
191
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -177,7 +193,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
177
193
  isDisabled: (e) => !e.canTable
178
194
  },
179
195
  {
180
- icon: /* @__PURE__ */ b(c, {}),
196
+ icon: /* @__PURE__ */ b(re, {}),
181
197
  label: $("removeTable"),
182
198
  onClick: (e) => e.chain().focus().deleteTable().run(),
183
199
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -185,7 +201,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
185
201
  isDisabled: (e) => !e.canTable
186
202
  },
187
203
  {
188
- icon: /* @__PURE__ */ b(se, {}),
204
+ icon: /* @__PURE__ */ b(M, {}),
189
205
  label: $("tableBorders"),
190
206
  toggle: !0,
191
207
  onClick: (e) => {
@@ -200,7 +216,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
200
216
  isDisabled: (e) => !e.canTable
201
217
  },
202
218
  {
203
- icon: /* @__PURE__ */ b(S, {}),
219
+ icon: /* @__PURE__ */ b(ce, {}),
204
220
  label: $("bold"),
205
221
  toggle: !0,
206
222
  onClick: (e) => e.chain().focus().toggleBold().run(),
@@ -209,7 +225,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
209
225
  isDisabled: (e) => !e.canBold
210
226
  },
211
227
  {
212
- icon: /* @__PURE__ */ b(C, {}),
228
+ icon: /* @__PURE__ */ b(le, {}),
213
229
  label: $("italic"),
214
230
  toggle: !0,
215
231
  onClick: (e) => e.chain().focus().toggleItalic().run(),
@@ -218,7 +234,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
218
234
  isDisabled: (e) => !e.canItalic
219
235
  },
220
236
  {
221
- icon: /* @__PURE__ */ b(w, {}),
237
+ icon: /* @__PURE__ */ b(ue, {}),
222
238
  label: $("strikethrough"),
223
239
  toggle: !0,
224
240
  onClick: (e) => e.chain().focus().toggleStrike().run(),
@@ -227,7 +243,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
227
243
  isDisabled: (e) => !e.canStrike
228
244
  },
229
245
  {
230
- icon: /* @__PURE__ */ b(T, {}),
246
+ icon: /* @__PURE__ */ b(de, {}),
231
247
  label: $("code"),
232
248
  toggle: !0,
233
249
  onClick: (e) => e.chain().focus().toggleCode().run(),
@@ -236,7 +252,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
236
252
  isDisabled: (e) => !e.canCode
237
253
  },
238
254
  {
239
- icon: /* @__PURE__ */ b(k, {}),
255
+ icon: /* @__PURE__ */ b(w, {}),
240
256
  label: $("underline"),
241
257
  toggle: !0,
242
258
  onClick: (e) => e.chain().focus().toggleUnderline().run(),
@@ -244,7 +260,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
244
260
  isActive: (e) => e.isUnderline
245
261
  },
246
262
  {
247
- icon: /* @__PURE__ */ b(z, {}),
263
+ icon: /* @__PURE__ */ b(F, {}),
248
264
  label: $("subscript"),
249
265
  toggle: !0,
250
266
  onClick: (e) => e.chain().focus().toggleSubscript().run(),
@@ -252,7 +268,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
252
268
  isActive: (e) => e.isSubScript
253
269
  },
254
270
  {
255
- icon: /* @__PURE__ */ b(R, {}),
271
+ icon: /* @__PURE__ */ b(P, {}),
256
272
  label: $("superscript"),
257
273
  toggle: !0,
258
274
  onClick: (e) => e.chain().focus().toggleSuperscript().run(),
@@ -260,19 +276,19 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
260
276
  isActive: (e) => e.isSuperScript
261
277
  },
262
278
  {
263
- icon: /* @__PURE__ */ b(j, {}),
279
+ icon: /* @__PURE__ */ b(E, {}),
264
280
  label: $("insertImage"),
265
281
  hidden: () => !g?.includes("image"),
266
282
  onClick: (e) => e.chain().focus().setImageUploadNode().run()
267
283
  },
268
284
  {
269
- icon: /* @__PURE__ */ b(F, {}),
285
+ icon: /* @__PURE__ */ b(A, {}),
270
286
  label: $("insertVideo"),
271
287
  hidden: () => !g?.includes("video"),
272
288
  onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
273
289
  },
274
290
  {
275
- icon: /* @__PURE__ */ b(I, {}),
291
+ icon: /* @__PURE__ */ b(j, {}),
276
292
  label: $("insertAudio"),
277
293
  hidden: () => !g?.includes("audio"),
278
294
  onClick: (e) => e.chain().focus().insertMedia({
@@ -287,7 +303,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
287
303
  onClick: (e) => e.commands.openCSSClassDialog()
288
304
  },
289
305
  {
290
- icon: /* @__PURE__ */ b(P, {}),
306
+ icon: /* @__PURE__ */ b(k, {}),
291
307
  label: $("blockquote"),
292
308
  toggle: !0,
293
309
  hidden: () => !g?.includes("blockquote"),
@@ -295,7 +311,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
295
311
  isActive: (e) => e.isBlockquote
296
312
  },
297
313
  {
298
- icon: /* @__PURE__ */ b(B, {}),
314
+ icon: /* @__PURE__ */ b(I, {}),
299
315
  label: $("heading"),
300
316
  toggle: !0,
301
317
  hidden: () => !g?.includes("h3"),
@@ -303,22 +319,22 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
303
319
  isActive: (e) => e.isHeadingParagraph
304
320
  },
305
321
  {
306
- icon: /* @__PURE__ */ b(A, {}),
322
+ icon: /* @__PURE__ */ b(T, {}),
307
323
  label: $("insertMath"),
308
324
  hidden: () => !g?.includes("math"),
309
325
  onClick: (e) => e.chain().focus().insertMath("").run()
310
326
  },
311
327
  {
312
- icon: /* @__PURE__ */ b(l, { letter: "ñ" }),
328
+ icon: /* @__PURE__ */ b(u, { letter: "ñ" }),
313
329
  label: $("spanishCharacters"),
314
330
  hidden: () => !g?.includes("languageCharacters"),
315
- onClick: () => K(a)
331
+ onClick: (e, t) => q(a, t)
316
332
  },
317
333
  {
318
- icon: /* @__PURE__ */ b(l, { letter: "€" }),
334
+ icon: /* @__PURE__ */ b(u, { letter: "€" }),
319
335
  label: $("specialCharacters"),
320
336
  hidden: () => g?.filter((e) => e === "languageCharacters").length !== 2,
321
- onClick: () => K(ee)
337
+ onClick: (e, t) => q(ee, t)
322
338
  },
323
339
  {
324
340
  icon: /* @__PURE__ */ b(te, { editor: t }),
@@ -327,7 +343,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
327
343
  onClick: () => {}
328
344
  },
329
345
  {
330
- icon: /* @__PURE__ */ b(D, {}),
346
+ icon: /* @__PURE__ */ b(S, {}),
331
347
  label: $("bulletedList"),
332
348
  toggle: !0,
333
349
  hidden: () => !g?.includes("bulleted-list"),
@@ -335,7 +351,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
335
351
  isActive: (e) => e.isBulletList
336
352
  },
337
353
  {
338
- icon: /* @__PURE__ */ b(O, {}),
354
+ icon: /* @__PURE__ */ b(C, {}),
339
355
  label: $("numberedList"),
340
356
  toggle: !0,
341
357
  hidden: () => !g?.includes("numbered-list"),
@@ -343,15 +359,15 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
343
359
  isActive: (e) => e.isOrderedList
344
360
  },
345
361
  {
346
- icon: /* @__PURE__ */ b(N, {}),
347
- label: L.t("common:undo", { lng: W }),
362
+ icon: /* @__PURE__ */ b(O, {}),
363
+ label: N.t("common:undo", { lng: B }),
348
364
  hidden: () => !g?.includes("undo"),
349
365
  onClick: (e) => e.chain().focus().undo().run(),
350
366
  isDisabled: (e) => !e.canUndo
351
367
  },
352
368
  {
353
- icon: /* @__PURE__ */ b(M, {}),
354
- label: L.t("graphing.redo", { lng: W }),
369
+ icon: /* @__PURE__ */ b(D, {}),
370
+ label: N.t("graphing.redo", { lng: B }),
355
371
  hidden: () => !g?.includes("redo"),
356
372
  onClick: (e) => e.chain().focus().redo().run(),
357
373
  isDisabled: (e) => !e.canRedo
@@ -359,30 +375,30 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
359
375
  ], [
360
376
  g,
361
377
  t,
362
- W
378
+ B
363
379
  ]);
364
380
  return /* @__PURE__ */ x("div", {
365
- ref: q,
366
- className: ce,
367
- style: { ...le },
368
- onMouseDown: ue,
381
+ ref: K,
382
+ className: me,
383
+ style: { ...he },
384
+ onMouseDown: ge,
369
385
  children: [
370
386
  Z && /* @__PURE__ */ b("div", {
371
387
  className: h.defaultToolbar,
372
388
  role: "toolbar",
373
389
  tabIndex: -1,
374
- "aria-label": L.t("editableHtml.responseAreaToolbar", { lng: W }),
390
+ "aria-label": N.t("editableHtml.responseAreaToolbar", { lng: B }),
375
391
  children: /* @__PURE__ */ b("div", {
376
392
  className: h.buttonsContainer,
377
393
  children: /* @__PURE__ */ b("button", {
378
394
  type: "button",
379
395
  className: h.button,
380
396
  onClick: (e) => {
381
- e.preventDefault(), t.chain().focus().deleteSelection().run(), V?.(t.getHTML());
397
+ e.preventDefault(), t.chain().focus().deleteSelection().run(), L?.(t.getHTML());
382
398
  },
383
399
  "aria-label": "Delete response area",
384
400
  title: "Delete response area",
385
- children: /* @__PURE__ */ b(oe, {})
401
+ children: /* @__PURE__ */ b(se, {})
386
402
  })
387
403
  })
388
404
  }),
@@ -390,11 +406,11 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
390
406
  className: h.defaultToolbar,
391
407
  role: "toolbar",
392
408
  tabIndex: -1,
393
- "aria-label": L.t("editableHtml.toolbar", { lng: W }),
409
+ "aria-label": N.t("editableHtml.toolbar", { lng: B }),
394
410
  children: [
395
411
  /* @__PURE__ */ b("div", {
396
412
  className: h.buttonsContainer,
397
- children: de.filter((e) => !e.hidden?.(Y)).map((e, n) => {
413
+ children: _e.filter((e) => !e.hidden?.(Y)).map((e, n) => {
398
414
  let i = e.isDisabled?.(Y), a = e.isActive?.(Y);
399
415
  return /* @__PURE__ */ b("button", {
400
416
  type: "button",
@@ -403,7 +419,7 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
403
419
  title: e.label,
404
420
  "aria-pressed": e.toggle ? !!a : void 0,
405
421
  onClick: (n) => {
406
- n.preventDefault(), e.onClick(t);
422
+ n.preventDefault(), e.onClick(t, n);
407
423
  },
408
424
  className: r(h.button, { [h.active]: a }),
409
425
  children: e.icon
@@ -421,26 +437,28 @@ function V({ editor: t, classes: h, activePlugins: g, toolbarOpts: v, responseAr
421
437
  children: /* @__PURE__ */ b(i, {})
422
438
  }),
423
439
  J.showDone && /* @__PURE__ */ b(n, {
424
- language: W,
425
- onClick: () => {
426
- V?.(t.getHTML()), t.commands.blur();
440
+ language: B,
441
+ onClick: (e) => {
442
+ L?.(t.getHTML()), e.detail === 0 ? (t.view.focus(), t.commands.focus("end"), G(!0)) : t.commands.blur();
427
443
  }
428
444
  })
429
445
  ]
430
446
  }),
431
- G && /* @__PURE__ */ b(u, {
447
+ V && /* @__PURE__ */ b(d, {
432
448
  editor: t,
449
+ triggerEl: U.el,
450
+ focusOnOpen: U.keyboard,
433
451
  opts: {
434
- ...G,
452
+ ...V,
435
453
  renderPopOver: (e, t) => console.log("Show popover", t),
436
454
  closePopOver: () => console.log("Close popover")
437
455
  },
438
- onClose: () => K(!1)
456
+ onClose: () => H(!1)
439
457
  })
440
458
  ]
441
459
  });
442
460
  }
443
- var H = (e) => {
461
+ var R = (e) => {
444
462
  g();
445
463
  let t = {
446
464
  defaultToolbar: "defaultToolbar",
@@ -461,11 +479,11 @@ var H = (e) => {
461
479
  label: "label",
462
480
  shared: "shared"
463
481
  };
464
- return /* @__PURE__ */ b(U, { children: /* @__PURE__ */ b(V, {
482
+ return /* @__PURE__ */ b(z, { children: /* @__PURE__ */ b(L, {
465
483
  ...e,
466
484
  classes: t
467
485
  }) });
468
- }, U = h("div")(() => ({
486
+ }, z = h("div")(() => ({
469
487
  height: 0,
470
488
  overflow: "visible",
471
489
  "& .defaultToolbar": {
@@ -544,4 +562,4 @@ var H = (e) => {
544
562
  "& .shared": { display: "flex" }
545
563
  }));
546
564
  //#endregion
547
- export { H as default };
565
+ export { R as default };
package/dist/components/TiptapContainer.js CHANGED
@@ -151,7 +151,8 @@ function p(o) {
151
151
  e.currentTarget.contains(e.target) && h(!0);
152
152
  },
153
153
  onBlur: (e) => {
154
- e.currentTarget.contains(e.relatedTarget) || h(!1);
154
+ let t = e.relatedTarget?.closest?.(`.insert-character-dialog[data-toolbar-for="${_?.instanceId}"]`);
155
+ !e.currentTarget.contains(e.relatedTarget) && !t && h(!1);
155
156
  },
156
157
  children: [/* @__PURE__ */ c(d, {
157
158
  disableScrollbar: b,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/editable-html-tip-tap",
3
- "version": "3.1.3-next.20261024175806",
3
+ "version": "3.1.3-next.20261026154827",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,11 +14,11 @@
14
14
  "@mui/icons-material": "^7.3.4",
15
15
  "@mui/material": "^7.3.4",
16
16
  "@pie-framework/mathml-to-latex": "1.4.4",
17
- "@pie-lib/drag": "5.0.8-next.20261024175806",
18
- "@pie-lib/math-input": "9.0.8-next.20261024175806",
19
- "@pie-lib/math-toolbar": "4.0.8-next.20261024175806",
20
- "@pie-lib/render-ui": "8.0.8-next.20261024175806",
21
- "@pie-lib/translator": "5.0.3-next.20261023101922",
17
+ "@pie-lib/drag": "5.0.8-next.20261026144318",
18
+ "@pie-lib/math-input": "9.0.8-next.20261026144318",
19
+ "@pie-lib/math-toolbar": "4.0.8-next.20261026144318",
20
+ "@pie-lib/render-ui": "8.0.8-next.20261026144318",
21
+ "@pie-lib/translator": "5.0.3-next.20261026144318",
22
22
  "@tiptap/core": "3.32.0",
23
23
  "@tiptap/extension-character-count": "3.32.0",
24
24
  "@tiptap/extension-color": "3.32.0",
@@ -43,10 +43,10 @@
43
43
  "react-portal": "^4.2.0",
44
44
  "tippy.js": "latest",
45
45
  "to-style": "^1.3.3",
46
- "@pie-element/shared-lodash": "0.1.4-next.20261023101922",
46
+ "@pie-element/shared-lodash": "0.1.4-next.20261026144318",
47
47
  "clsx": "^2.1.1",
48
48
  "prosemirror-state": "^1.4.4",
49
- "@pie-element/shared-math-rendering-mathjax": "0.1.9-next.20261023101922",
49
+ "@pie-element/shared-math-rendering-mathjax": "0.1.9-next.20261026144318",
50
50
  "@tiptap/extensions": "3.32.0",
51
51
  "@tiptap/extension-list": "3.32.0",
52
52
  "@tiptap/extension-bubble-menu": "3.32.0",