@pie-lib/editable-html-tip-tap 3.0.1-next.20261004235022 → 3.0.1-next.20261005000911

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 (4) hide show
  1. package/dist/components/MenuBar.js +163 -156
  2. package/dist/components/common/done-button.d.ts +8 -2
  3. package/dist/components/common/done-button.js +11 -9
  4. package/package.json +6 -6
package/dist/components/MenuBar.js CHANGED
@@ -5,34 +5,34 @@ import { ToolbarIcon as r } from "./respArea/ToolbarIcon.js";
5
5
  import { spanishConfig as i, specialConfig as a } from "./characters/characterUtils.js";
6
6
  import ee from "./icons/TextAlign.js";
7
7
  import te from "./icons/CssIcon.js";
8
- import { AddColumn as ne, AddRow as re, RemoveColumn as ie, RemoveRow as o, RemoveTable as s } from "./icons/TableIcons.js";
9
- import { CharacterIcon as c, CharacterPicker as l } from "./CharacterPicker.js";
10
- import { useLayoutEffect as ae, useMemo as u, useRef as d, useState as f } from "react";
11
- import { useEditorState as p } from "@tiptap/react";
12
- import { styled as m, useTheme as h } from "@mui/material/styles";
13
- import { NodeSelection as g } from "prosemirror-state";
14
- import _ from "@mui/icons-material/Delete";
8
+ import { AddColumn as ne, AddRow as o, RemoveColumn as s, RemoveRow as re, RemoveTable as ie } from "./icons/TableIcons.js";
9
+ import { CharacterIcon as c, CharacterPicker as ae } from "./CharacterPicker.js";
10
+ import { useLayoutEffect as l, useMemo as u, useRef as d, useState as oe } from "react";
11
+ import { useEditorState as f } from "@tiptap/react";
12
+ import { styled as p, useTheme as m } from "@mui/material/styles";
13
+ import { NodeSelection as h } from "prosemirror-state";
14
+ import g from "@mui/icons-material/Delete";
15
+ import _ from "@pie-lib/translator";
15
16
  import { jsx as v, jsxs as y } from "react/jsx-runtime";
16
17
  import { color as b } from "@pie-lib/render-ui";
17
- import x from "@pie-lib/translator";
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 oe from "@mui/icons-material/VolumeUp";
33
- import I from "@mui/icons-material/BorderAll";
18
+ import x from "@mui/icons-material/FormatBold";
19
+ import S from "@mui/icons-material/FormatItalic";
20
+ import C from "@mui/icons-material/FormatStrikethrough";
21
+ import w from "@mui/icons-material/Code";
22
+ import T from "@mui/icons-material/GridOn";
23
+ import E from "@mui/icons-material/FormatListBulleted";
24
+ import D from "@mui/icons-material/FormatListNumbered";
25
+ import O from "@mui/icons-material/FormatUnderlined";
26
+ import k from "@mui/icons-material/Functions";
27
+ import A from "@mui/icons-material/Image";
28
+ import j from "@mui/icons-material/Redo";
29
+ import M from "@mui/icons-material/Undo";
30
+ import N from "@mui/icons-material/FormatQuote";
31
+ import P from "@mui/icons-material/Theaters";
32
+ import F from "@mui/icons-material/VolumeUp";
33
+ import se from "@mui/icons-material/BorderAll";
34
34
  //#region src/components/MenuBar.tsx
35
- var { translator: L } = x, R = () => /* @__PURE__ */ v("svg", {
35
+ var { translator: I } = _, L = () => /* @__PURE__ */ v("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 } = x, R = () => /* @__PURE__ */ v("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__ */ v("svg", {
47
+ }), R = () => /* @__PURE__ */ v("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 } = x, R = () => /* @__PURE__ */ v("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__ */ v("svg", {
59
+ }), z = () => /* @__PURE__ */ v("svg", {
60
60
  width: "30",
61
61
  height: "28",
62
62
  viewBox: "0 0 30 28",
@@ -73,13 +73,13 @@ var { translator: L } = x, R = () => /* @__PURE__ */ v("svg", {
73
73
  fill: "currentColor"
74
74
  })
75
75
  });
76
- function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAreaProps: V, onChange: H, autoWidthToolbar: U, hasFocus: W, language: G }) {
77
- let [K, q] = f(!1), J = d(null), Y = x ?? {}, X = p({
78
- editor: m,
76
+ function B({ editor: p, classes: m, activePlugins: _, toolbarOpts: b, responseAreaProps: B, onChange: V, autoWidthToolbar: H, hasFocus: U, language: W }) {
77
+ let [G, K] = oe(!1), q = d(null), J = b ?? {}, Y = f({
78
+ editor: p,
79
79
  selector: (e) => {
80
80
  let { selection: t } = e.editor?.state || {}, n;
81
81
  if (!e.editor?.commandManager) return {};
82
- t instanceof g && (n = t.node);
82
+ t instanceof h && (n = t.node);
83
83
  let r = e.editor?.isActive("math") || e.editor?.isActive("explicit_constructed_response") || e.editor?.isActive("imageUploadNode") || e.editor?.isActive("drag_in_the_blank"), i = t && t.empty === !1 && e.editor.isActive("table");
84
84
  return {
85
85
  currentNode: n,
@@ -117,44 +117,44 @@ function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAr
117
117
  canRedo: e.editor.can().chain().redo().run() ?? !1
118
118
  };
119
119
  }
120
- }), Z = !!U, Q = X.hideDefaultToolbar && X.currentNode?.type?.name === "drag_in_the_blank", $ = Y.alwaysVisible || W && !X.toolbarOpened && (!X.hideDefaultToolbar || Q);
121
- ae(() => {
122
- J.current?.toggleAttribute("inert", !$);
123
- }, [$]);
124
- let se = n(h.toolbar, e, {
125
- [h.toolbarWithNoDone]: !0,
126
- [h.toolbarTop]: Y.position === "top",
127
- [h.toolbarRight]: Y.alignment === "right",
128
- [h.focused]: $,
129
- [h.autoWidth]: Z,
130
- [h.fullWidth]: !Z,
131
- [h.hidden]: Y.isHidden === !0
132
- }), ce = Y.minWidth === void 0 ? {} : { minWidth: Y.minWidth }, le = (e) => {
120
+ }), X = !!H, Z = Y.hideDefaultToolbar && Y.currentNode?.type?.name === "drag_in_the_blank", Q = J.alwaysVisible || U && !Y.toolbarOpened && (!Y.hideDefaultToolbar || Z);
121
+ l(() => {
122
+ q.current?.toggleAttribute("inert", !Q);
123
+ }, [Q]);
124
+ let ce = n(m.toolbar, e, {
125
+ [m.toolbarWithNoDone]: !0,
126
+ [m.toolbarTop]: J.position === "top",
127
+ [m.toolbarRight]: J.alignment === "right",
128
+ [m.focused]: Q,
129
+ [m.autoWidth]: X,
130
+ [m.fullWidth]: !X,
131
+ [m.hidden]: J.isHidden === !0
132
+ }), le = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, ue = (e) => {
133
133
  e.preventDefault();
134
- }, ue = u(() => [
134
+ }, $ = (e) => I.t(`editableHtml.buttons.${e}`, { lng: W }), de = u(() => [
135
135
  {
136
- icon: /* @__PURE__ */ v(E, {}),
137
- label: "Insert table",
136
+ icon: /* @__PURE__ */ v(T, {}),
137
+ label: $("insertTable"),
138
138
  onClick: (e) => e.chain().focus().insertTable({
139
139
  rows: 2,
140
140
  cols: 2,
141
141
  withHeaderRow: !1
142
142
  }).run(),
143
- hidden: (e) => !b?.includes("table") || e.isTable,
143
+ hidden: (e) => !_?.includes("table") || e.isTable,
144
144
  isActive: (e) => e.isTable,
145
145
  isDisabled: (e) => !e.canTable
146
146
  },
147
147
  {
148
- icon: /* @__PURE__ */ v(re, {}),
149
- label: "Add table row",
148
+ icon: /* @__PURE__ */ v(o, {}),
149
+ label: $("addTableRow"),
150
150
  onClick: (e) => e.chain().focus().addRowAfter().run(),
151
151
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
152
152
  isActive: (e) => e.isTable,
153
153
  isDisabled: (e) => !e.canTable
154
154
  },
155
155
  {
156
- icon: /* @__PURE__ */ v(o, {}),
157
- label: "Remove table row",
156
+ icon: /* @__PURE__ */ v(re, {}),
157
+ label: $("removeTableRow"),
158
158
  onClick: (e) => e.chain().focus().deleteRow().run(),
159
159
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
160
160
  isActive: (e) => e.isTable,
@@ -162,31 +162,31 @@ function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAr
162
162
  },
163
163
  {
164
164
  icon: /* @__PURE__ */ v(ne, {}),
165
- label: "Add table column",
165
+ label: $("addTableColumn"),
166
166
  onClick: (e) => e.chain().focus().addColumnAfter().run(),
167
167
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
168
168
  isActive: (e) => e.isTable,
169
169
  isDisabled: (e) => !e.canTable
170
170
  },
171
171
  {
172
- icon: /* @__PURE__ */ v(ie, {}),
173
- label: "Remove table column",
172
+ icon: /* @__PURE__ */ v(s, {}),
173
+ label: $("removeTableColumn"),
174
174
  onClick: (e) => e.chain().focus().deleteColumn().run(),
175
175
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
176
176
  isActive: (e) => e.isTable,
177
177
  isDisabled: (e) => !e.canTable
178
178
  },
179
179
  {
180
- icon: /* @__PURE__ */ v(s, {}),
181
- label: "Remove table",
180
+ icon: /* @__PURE__ */ v(ie, {}),
181
+ label: $("removeTable"),
182
182
  onClick: (e) => e.chain().focus().deleteTable().run(),
183
183
  hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
184
184
  isActive: (e) => e.isTable,
185
185
  isDisabled: (e) => !e.canTable
186
186
  },
187
187
  {
188
- icon: /* @__PURE__ */ v(I, {}),
189
- label: "Table borders",
188
+ icon: /* @__PURE__ */ v(se, {}),
189
+ label: $("tableBorders"),
190
190
  toggle: !0,
191
191
  onClick: (e) => {
192
192
  let t = e.getAttributes("table"), n = {
@@ -200,81 +200,81 @@ function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAr
200
200
  isDisabled: (e) => !e.canTable
201
201
  },
202
202
  {
203
- icon: /* @__PURE__ */ v(S, {}),
204
- label: "Bold",
203
+ icon: /* @__PURE__ */ v(x, {}),
204
+ label: $("bold"),
205
205
  toggle: !0,
206
206
  onClick: (e) => e.chain().focus().toggleBold().run(),
207
- hidden: () => !b?.includes("bold"),
207
+ hidden: () => !_?.includes("bold"),
208
208
  isActive: (e) => e.isBold,
209
209
  isDisabled: (e) => !e.canBold
210
210
  },
211
211
  {
212
- icon: /* @__PURE__ */ v(C, {}),
213
- label: "Italic",
212
+ icon: /* @__PURE__ */ v(S, {}),
213
+ label: $("italic"),
214
214
  toggle: !0,
215
215
  onClick: (e) => e.chain().focus().toggleItalic().run(),
216
- hidden: () => !b?.includes("italic"),
216
+ hidden: () => !_?.includes("italic"),
217
217
  isActive: (e) => e.isItalic,
218
218
  isDisabled: (e) => !e.canItalic
219
219
  },
220
220
  {
221
- icon: /* @__PURE__ */ v(w, {}),
222
- label: "Strikethrough",
221
+ icon: /* @__PURE__ */ v(C, {}),
222
+ label: $("strikethrough"),
223
223
  toggle: !0,
224
224
  onClick: (e) => e.chain().focus().toggleStrike().run(),
225
- hidden: () => !b?.includes("strikethrough"),
225
+ hidden: () => !_?.includes("strikethrough"),
226
226
  isActive: (e) => e.isStrike,
227
227
  isDisabled: (e) => !e.canStrike
228
228
  },
229
229
  {
230
- icon: /* @__PURE__ */ v(T, {}),
231
- label: "Code",
230
+ icon: /* @__PURE__ */ v(w, {}),
231
+ label: $("code"),
232
232
  toggle: !0,
233
233
  onClick: (e) => e.chain().focus().toggleCode().run(),
234
- hidden: () => !b?.includes("code"),
234
+ hidden: () => !_?.includes("code"),
235
235
  isActive: (e) => e.isCode,
236
236
  isDisabled: (e) => !e.canCode
237
237
  },
238
238
  {
239
- icon: /* @__PURE__ */ v(k, {}),
240
- label: "Underline",
239
+ icon: /* @__PURE__ */ v(O, {}),
240
+ label: $("underline"),
241
241
  toggle: !0,
242
242
  onClick: (e) => e.chain().focus().toggleUnderline().run(),
243
- hidden: () => !b?.includes("underline"),
243
+ hidden: () => !_?.includes("underline"),
244
244
  isActive: (e) => e.isUnderline
245
245
  },
246
246
  {
247
- icon: /* @__PURE__ */ v(z, {}),
248
- label: "Subscript",
247
+ icon: /* @__PURE__ */ v(R, {}),
248
+ label: $("subscript"),
249
249
  toggle: !0,
250
250
  onClick: (e) => e.chain().focus().toggleSubscript().run(),
251
- hidden: () => !b?.includes("subscript"),
251
+ hidden: () => !_?.includes("subscript"),
252
252
  isActive: (e) => e.isSubScript
253
253
  },
254
254
  {
255
- icon: /* @__PURE__ */ v(R, {}),
256
- label: "Superscript",
255
+ icon: /* @__PURE__ */ v(L, {}),
256
+ label: $("superscript"),
257
257
  toggle: !0,
258
258
  onClick: (e) => e.chain().focus().toggleSuperscript().run(),
259
- hidden: () => !b?.includes("superscript"),
259
+ hidden: () => !_?.includes("superscript"),
260
260
  isActive: (e) => e.isSuperScript
261
261
  },
262
262
  {
263
- icon: /* @__PURE__ */ v(j, {}),
264
- label: "Insert image",
265
- hidden: () => !b?.includes("image"),
263
+ icon: /* @__PURE__ */ v(A, {}),
264
+ label: $("insertImage"),
265
+ hidden: () => !_?.includes("image"),
266
266
  onClick: (e) => e.chain().focus().setImageUploadNode().run()
267
267
  },
268
268
  {
269
- icon: /* @__PURE__ */ v(F, {}),
270
- label: "Insert video",
271
- hidden: () => !b?.includes("video"),
269
+ icon: /* @__PURE__ */ v(P, {}),
270
+ label: $("insertVideo"),
271
+ hidden: () => !_?.includes("video"),
272
272
  onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
273
273
  },
274
274
  {
275
- icon: /* @__PURE__ */ v(oe, {}),
276
- label: "Insert audio",
277
- hidden: () => !b?.includes("audio"),
275
+ icon: /* @__PURE__ */ v(F, {}),
276
+ label: $("insertAudio"),
277
+ hidden: () => !_?.includes("audio"),
278
278
  onClick: (e) => e.chain().focus().insertMedia({
279
279
  type: "audio",
280
280
  tag: "audio"
@@ -282,116 +282,120 @@ function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAr
282
282
  },
283
283
  {
284
284
  icon: /* @__PURE__ */ v(te, {}),
285
- label: "CSS classes",
286
- hidden: () => !b?.includes("css"),
285
+ label: $("cssClasses"),
286
+ hidden: () => !_?.includes("css"),
287
287
  onClick: (e) => e.commands.openCSSClassDialog()
288
288
  },
289
289
  {
290
- icon: /* @__PURE__ */ v(P, {}),
291
- label: "Blockquote",
290
+ icon: /* @__PURE__ */ v(N, {}),
291
+ label: $("blockquote"),
292
292
  toggle: !0,
293
- hidden: () => !b?.includes("blockquote"),
293
+ hidden: () => !_?.includes("blockquote"),
294
294
  onClick: (e) => e.chain().focus().toggleBlockquote().run(),
295
295
  isActive: (e) => e.isBlockquote
296
296
  },
297
297
  {
298
- icon: /* @__PURE__ */ v(B, {}),
299
- label: "Heading",
298
+ icon: /* @__PURE__ */ v(z, {}),
299
+ label: $("heading"),
300
300
  toggle: !0,
301
- hidden: () => !b?.includes("h3"),
301
+ hidden: () => !_?.includes("h3"),
302
302
  onClick: (e) => e.chain().focus().toggleHeadingParagraph().run(),
303
303
  isActive: (e) => e.isHeadingParagraph
304
304
  },
305
305
  {
306
- icon: /* @__PURE__ */ v(A, {}),
307
- label: "Insert math",
308
- hidden: () => !b?.includes("math"),
306
+ icon: /* @__PURE__ */ v(k, {}),
307
+ label: $("insertMath"),
308
+ hidden: () => !_?.includes("math"),
309
309
  onClick: (e) => e.chain().focus().insertMath("").run()
310
310
  },
311
311
  {
312
312
  icon: /* @__PURE__ */ v(c, { letter: "ñ" }),
313
- label: "Spanish characters (ñ)",
314
- hidden: () => !b?.includes("languageCharacters"),
315
- onClick: () => q(i)
313
+ label: $("spanishCharacters"),
314
+ hidden: () => !_?.includes("languageCharacters"),
315
+ onClick: () => K(i)
316
316
  },
317
317
  {
318
318
  icon: /* @__PURE__ */ v(c, { letter: "€" }),
319
- label: "Special characters (€)",
320
- hidden: () => b?.filter((e) => e === "languageCharacters").length !== 2,
321
- onClick: () => q(a)
319
+ label: $("specialCharacters"),
320
+ hidden: () => _?.filter((e) => e === "languageCharacters").length !== 2,
321
+ onClick: () => K(a)
322
322
  },
323
323
  {
324
- icon: /* @__PURE__ */ v(ee, { editor: m }),
325
- label: "Text alignment",
326
- hidden: () => !b?.includes("text-align"),
324
+ icon: /* @__PURE__ */ v(ee, { editor: p }),
325
+ label: $("textAlignment"),
326
+ hidden: () => !_?.includes("text-align"),
327
327
  onClick: () => {}
328
328
  },
329
329
  {
330
- icon: /* @__PURE__ */ v(D, {}),
331
- label: "Bulleted list",
330
+ icon: /* @__PURE__ */ v(E, {}),
331
+ label: $("bulletedList"),
332
332
  toggle: !0,
333
- hidden: () => !b?.includes("bulleted-list"),
333
+ hidden: () => !_?.includes("bulleted-list"),
334
334
  onClick: (e) => e.chain().focus().toggleBulletList().run(),
335
335
  isActive: (e) => e.isBulletList
336
336
  },
337
337
  {
338
- icon: /* @__PURE__ */ v(O, {}),
339
- label: "Numbered list",
338
+ icon: /* @__PURE__ */ v(D, {}),
339
+ label: $("numberedList"),
340
340
  toggle: !0,
341
- hidden: () => !b?.includes("numbered-list"),
341
+ hidden: () => !_?.includes("numbered-list"),
342
342
  onClick: (e) => e.chain().focus().toggleOrderedList().run(),
343
343
  isActive: (e) => e.isOrderedList
344
344
  },
345
345
  {
346
- icon: /* @__PURE__ */ v(N, {}),
347
- label: "Undo",
348
- hidden: () => !b?.includes("undo"),
346
+ icon: /* @__PURE__ */ v(M, {}),
347
+ label: I.t("common:undo", { lng: W }),
348
+ hidden: () => !_?.includes("undo"),
349
349
  onClick: (e) => e.chain().focus().undo().run(),
350
350
  isDisabled: (e) => !e.canUndo
351
351
  },
352
352
  {
353
- icon: /* @__PURE__ */ v(M, {}),
354
- label: "Redo",
355
- hidden: () => !b?.includes("redo"),
353
+ icon: /* @__PURE__ */ v(j, {}),
354
+ label: I.t("graphing.redo", { lng: W }),
355
+ hidden: () => !_?.includes("redo"),
356
356
  onClick: (e) => e.chain().focus().redo().run(),
357
357
  isDisabled: (e) => !e.canRedo
358
358
  }
359
- ], [b, m]);
359
+ ], [
360
+ _,
361
+ p,
362
+ W
363
+ ]);
360
364
  return /* @__PURE__ */ y("div", {
361
- ref: J,
362
- className: se,
363
- style: { ...ce },
364
- onMouseDown: le,
365
+ ref: q,
366
+ className: ce,
367
+ style: { ...le },
368
+ onMouseDown: ue,
365
369
  children: [
366
- Q && /* @__PURE__ */ v("div", {
367
- className: h.defaultToolbar,
370
+ Z && /* @__PURE__ */ v("div", {
371
+ className: m.defaultToolbar,
368
372
  role: "toolbar",
369
373
  tabIndex: -1,
370
- "aria-label": L.t("editableHtml.responseAreaToolbar", { lng: G }),
374
+ "aria-label": I.t("editableHtml.responseAreaToolbar", { lng: W }),
371
375
  children: /* @__PURE__ */ v("div", {
372
- className: h.buttonsContainer,
376
+ className: m.buttonsContainer,
373
377
  children: /* @__PURE__ */ v("button", {
374
378
  type: "button",
375
- className: h.button,
379
+ className: m.button,
376
380
  onClick: (e) => {
377
- e.preventDefault(), m.chain().focus().deleteSelection().run(), H?.(m.getHTML());
381
+ e.preventDefault(), p.chain().focus().deleteSelection().run(), V?.(p.getHTML());
378
382
  },
379
383
  "aria-label": "Delete response area",
380
384
  title: "Delete response area",
381
- children: /* @__PURE__ */ v(_, {})
385
+ children: /* @__PURE__ */ v(g, {})
382
386
  })
383
387
  })
384
388
  }),
385
- !X.hideDefaultToolbar && /* @__PURE__ */ y("div", {
386
- className: h.defaultToolbar,
389
+ !Y.hideDefaultToolbar && /* @__PURE__ */ y("div", {
390
+ className: m.defaultToolbar,
387
391
  role: "toolbar",
388
392
  tabIndex: -1,
389
- "aria-label": L.t("editableHtml.toolbar", { lng: G }),
393
+ "aria-label": I.t("editableHtml.toolbar", { lng: W }),
390
394
  children: [
391
395
  /* @__PURE__ */ v("div", {
392
- className: h.buttonsContainer,
393
- children: ue.filter((e) => !e.hidden?.(X)).map((e, t) => {
394
- let r = e.isDisabled?.(X), i = e.isActive?.(X);
396
+ className: m.buttonsContainer,
397
+ children: de.filter((e) => !e.hidden?.(Y)).map((e, t) => {
398
+ let r = e.isDisabled?.(Y), i = e.isActive?.(Y);
395
399
  return /* @__PURE__ */ v("button", {
396
400
  type: "button",
397
401
  disabled: r,
@@ -399,42 +403,45 @@ function V({ editor: m, classes: h, activePlugins: b, toolbarOpts: x, responseAr
399
403
  title: e.label,
400
404
  "aria-pressed": e.toggle ? !!i : void 0,
401
405
  onClick: (t) => {
402
- t.preventDefault(), e.onClick(m);
406
+ t.preventDefault(), e.onClick(p);
403
407
  },
404
- className: n(h.button, { [h.active]: i }),
408
+ className: n(m.button, { [m.active]: i }),
405
409
  children: e.icon
406
410
  }, t);
407
411
  })
408
412
  }),
409
- b?.includes("responseArea") && /* @__PURE__ */ v("button", {
413
+ _?.includes("responseArea") && /* @__PURE__ */ v("button", {
410
414
  type: "button",
411
415
  "aria-label": "Insert response area",
412
416
  title: "Insert response area",
413
417
  onClick: () => {
414
- m.chain().focus().insertResponseArea(V.type).run();
418
+ p.chain().focus().insertResponseArea(B.type).run();
415
419
  },
416
- className: h.button,
420
+ className: m.button,
417
421
  children: /* @__PURE__ */ v(r, {})
418
422
  }),
419
- Y.showDone && /* @__PURE__ */ v(t, { onClick: () => {
420
- H?.(m.getHTML()), m.commands.blur();
421
- } })
423
+ J.showDone && /* @__PURE__ */ v(t, {
424
+ language: W,
425
+ onClick: () => {
426
+ V?.(p.getHTML()), p.commands.blur();
427
+ }
428
+ })
422
429
  ]
423
430
  }),
424
- K && /* @__PURE__ */ v(l, {
425
- editor: m,
431
+ G && /* @__PURE__ */ v(ae, {
432
+ editor: p,
426
433
  opts: {
427
- ...K,
434
+ ...G,
428
435
  renderPopOver: (e, t) => console.log("Show popover", t),
429
436
  closePopOver: () => console.log("Close popover")
430
437
  },
431
- onClose: () => q(!1)
438
+ onClose: () => K(!1)
432
439
  })
433
440
  ]
434
441
  });
435
442
  }
436
- var H = (e) => {
437
- h();
443
+ var V = (e) => {
444
+ m();
438
445
  let t = {
439
446
  defaultToolbar: "defaultToolbar",
440
447
  buttonsContainer: "buttonsContainer",
@@ -454,11 +461,11 @@ var H = (e) => {
454
461
  label: "label",
455
462
  shared: "shared"
456
463
  };
457
- return /* @__PURE__ */ v(U, { children: /* @__PURE__ */ v(V, {
464
+ return /* @__PURE__ */ v(H, { children: /* @__PURE__ */ v(B, {
458
465
  ...e,
459
466
  classes: t
460
467
  }) });
461
- }, U = m("div")(() => ({
468
+ }, H = p("div")(() => ({
462
469
  height: 0,
463
470
  overflow: "visible",
464
471
  "& .defaultToolbar": {
@@ -537,4 +544,4 @@ var H = (e) => {
537
544
  "& .shared": { display: "flex" }
538
545
  }));
539
546
  //#endregion
540
- export { H as default };
547
+ export { V as default };
package/dist/components/common/done-button.d.ts CHANGED
@@ -1,22 +1,28 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  export declare const RawDoneButton: {
4
- ({ onClick, doneButtonRef }: {
4
+ ({ onClick, doneButtonRef, language }: {
5
5
  onClick: any;
6
6
  doneButtonRef: any;
7
+ language: any;
7
8
  }): React.JSX.Element;
8
9
  propTypes: {
9
10
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
10
11
  doneButtonRef: PropTypes.Requireable<(...args: any[]) => any>;
12
+ /** The item language, which the button's name follows. */
13
+ language: PropTypes.Requireable<string>;
11
14
  };
12
15
  };
13
16
  export declare const DoneButton: {
14
- ({ onClick, doneButtonRef }: {
17
+ ({ onClick, doneButtonRef, language }: {
15
18
  onClick: any;
16
19
  doneButtonRef: any;
20
+ language: any;
17
21
  }): React.JSX.Element;
18
22
  propTypes: {
19
23
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
20
24
  doneButtonRef: PropTypes.Requireable<(...args: any[]) => any>;
25
+ /** The item language, which the button's name follows. */
26
+ language: PropTypes.Requireable<string>;
21
27
  };
22
28
  };
package/dist/components/common/done-button.js CHANGED
@@ -3,24 +3,26 @@ import { styled as e } from "@mui/material/styles";
3
3
  import t from "prop-types";
4
4
  import n from "@mui/material/IconButton";
5
5
  import r from "@mui/icons-material/Check";
6
- import { jsx as i } from "react/jsx-runtime";
6
+ import i from "@pie-lib/translator";
7
+ import { jsx as a } from "react/jsx-runtime";
7
8
  //#region src/components/common/done-button.tsx
8
- var a = e(n)({
9
+ var { translator: o } = i, s = e(n)({
9
10
  verticalAlign: "top",
10
11
  width: "28px",
11
12
  height: "28px",
12
13
  color: "var(--editable-html-toolbar-check, #388E3C)",
13
14
  padding: "4px"
14
- }), o = ({ onClick: e, doneButtonRef: t }) => /* @__PURE__ */ i(a, {
15
- "aria-label": "Done",
15
+ }), c = ({ onClick: e, doneButtonRef: t, language: n }) => /* @__PURE__ */ a(s, {
16
+ "aria-label": o.t("editableHtml.buttons.done", { lng: n }),
16
17
  buttonRef: t,
17
18
  onClick: e,
18
- children: /* @__PURE__ */ i(r, {})
19
+ children: /* @__PURE__ */ a(r, {})
19
20
  });
20
- o.propTypes = {
21
+ c.propTypes = {
21
22
  onClick: t.func,
22
- doneButtonRef: t.func
23
+ doneButtonRef: t.func,
24
+ language: t.string
23
25
  };
24
- var s = o;
26
+ var l = c;
25
27
  //#endregion
26
- export { s as DoneButton, o as RawDoneButton };
28
+ export { l as DoneButton, c as RawDoneButton };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/editable-html-tip-tap",
3
- "version": "3.0.1-next.20261004235022",
3
+ "version": "3.0.1-next.20261005000911",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -13,11 +13,11 @@
13
13
  "@dnd-kit/utilities": "3.2.2",
14
14
  "@mui/icons-material": "^7.3.4",
15
15
  "@mui/material": "^7.3.4",
16
- "@pie-lib/drag": "5.0.1-next.20261004173930",
17
- "@pie-lib/math-input": "9.0.1-next.20261004181842",
18
- "@pie-lib/math-toolbar": "4.0.1-next.20261004235022",
19
- "@pie-lib/render-ui": "8.0.1-next.20261004165705",
20
- "@pie-lib/translator": "5.0.1-next.20261004181842",
16
+ "@pie-lib/drag": "5.0.1-next.20261005000911",
17
+ "@pie-lib/math-input": "9.0.1-next.20261005000911",
18
+ "@pie-lib/math-toolbar": "4.0.1-next.20261005000911",
19
+ "@pie-lib/render-ui": "8.0.1-next.20261005000911",
20
+ "@pie-lib/translator": "5.0.1-next.20261005000911",
21
21
  "@tiptap/core": "3.31.3",
22
22
  "@tiptap/extension-character-count": "3.31.3",
23
23
  "@tiptap/extension-color": "3.31.3",