@pie-lib/editable-html-tip-tap 3.0.1-next.20261004165705 → 3.0.1-next.20261004173930
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/dist/components/MenuBar.js +151 -142
- package/dist/components/TiptapContainer.js +41 -33
- package/package.json +5 -4
|
@@ -3,35 +3,36 @@ import { DoneButton as t } from "./common/done-button.js";
|
|
|
3
3
|
import { clsx as n } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
|
|
4
4
|
import { ToolbarIcon as r } from "./respArea/ToolbarIcon.js";
|
|
5
5
|
import { spanishConfig as i, specialConfig as a } from "./characters/characterUtils.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { AddColumn as
|
|
9
|
-
import { CharacterIcon as
|
|
10
|
-
import { useMemo as
|
|
11
|
-
import { useEditorState as
|
|
12
|
-
import { styled as
|
|
13
|
-
import { NodeSelection as
|
|
14
|
-
import
|
|
15
|
-
import { jsx as
|
|
16
|
-
import { color as
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import
|
|
6
|
+
import ee from "./icons/TextAlign.js";
|
|
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";
|
|
15
|
+
import { jsx as v, jsxs as y } from "react/jsx-runtime";
|
|
16
|
+
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";
|
|
33
34
|
//#region src/components/MenuBar.tsx
|
|
34
|
-
var
|
|
35
|
+
var { translator: L } = x, R = () => /* @__PURE__ */ v("svg", {
|
|
35
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
36
37
|
height: "24px",
|
|
37
38
|
viewBox: "0 0 24 24",
|
|
@@ -39,11 +40,11 @@ var B = () => /* @__PURE__ */ S("svg", {
|
|
|
39
40
|
fill: "none",
|
|
40
41
|
"aria-hidden": "true",
|
|
41
42
|
focusable: "false",
|
|
42
|
-
children: /* @__PURE__ */
|
|
43
|
+
children: /* @__PURE__ */ v("path", {
|
|
43
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",
|
|
44
45
|
fill: "currentColor"
|
|
45
46
|
})
|
|
46
|
-
}),
|
|
47
|
+
}), z = () => /* @__PURE__ */ v("svg", {
|
|
47
48
|
xmlns: "http://www.w3.org/2000/svg",
|
|
48
49
|
height: "24px",
|
|
49
50
|
viewBox: "0 0 24 24",
|
|
@@ -51,11 +52,11 @@ var B = () => /* @__PURE__ */ S("svg", {
|
|
|
51
52
|
fill: "none",
|
|
52
53
|
"aria-hidden": "true",
|
|
53
54
|
focusable: "false",
|
|
54
|
-
children: /* @__PURE__ */
|
|
55
|
+
children: /* @__PURE__ */ v("path", {
|
|
55
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",
|
|
56
57
|
fill: "currentColor"
|
|
57
58
|
})
|
|
58
|
-
}),
|
|
59
|
+
}), B = () => /* @__PURE__ */ v("svg", {
|
|
59
60
|
width: "30",
|
|
60
61
|
height: "28",
|
|
61
62
|
viewBox: "0 0 30 28",
|
|
@@ -67,24 +68,23 @@ var B = () => /* @__PURE__ */ S("svg", {
|
|
|
67
68
|
},
|
|
68
69
|
"aria-hidden": "true",
|
|
69
70
|
focusable: "false",
|
|
70
|
-
children: /* @__PURE__ */
|
|
71
|
+
children: /* @__PURE__ */ v("path", {
|
|
71
72
|
d: "M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z",
|
|
72
73
|
fill: "currentColor"
|
|
73
74
|
})
|
|
74
75
|
});
|
|
75
|
-
function
|
|
76
|
-
let [
|
|
77
|
-
editor:
|
|
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,
|
|
78
79
|
selector: (e) => {
|
|
79
80
|
let { selection: t } = e.editor?.state || {}, n;
|
|
80
81
|
if (!e.editor?.commandManager) return {};
|
|
81
|
-
t instanceof
|
|
82
|
+
t instanceof g && (n = t.node);
|
|
82
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");
|
|
83
84
|
return {
|
|
84
85
|
currentNode: n,
|
|
85
86
|
hideDefaultToolbar: r,
|
|
86
87
|
hasTextSelectionInTable: i,
|
|
87
|
-
isFocused: e.editor?.isFocused,
|
|
88
88
|
toolbarOpened: e.editor?._toolbarOpened ?? !1,
|
|
89
89
|
isBold: e.editor.isActive("bold") ?? !1,
|
|
90
90
|
canBold: e.editor.can().chain().toggleBold().run() ?? !1,
|
|
@@ -117,31 +117,35 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
117
117
|
canRedo: e.editor.can().chain().redo().run() ?? !1
|
|
118
118
|
};
|
|
119
119
|
}
|
|
120
|
-
}), Z = !!
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
[
|
|
126
|
-
[
|
|
127
|
-
[
|
|
128
|
-
|
|
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) => {
|
|
129
133
|
e.preventDefault();
|
|
130
|
-
},
|
|
134
|
+
}, ue = u(() => [
|
|
131
135
|
{
|
|
132
|
-
icon: /* @__PURE__ */
|
|
136
|
+
icon: /* @__PURE__ */ v(E, {}),
|
|
133
137
|
label: "Insert table",
|
|
134
138
|
onClick: (e) => e.chain().focus().insertTable({
|
|
135
139
|
rows: 2,
|
|
136
140
|
cols: 2,
|
|
137
141
|
withHeaderRow: !1
|
|
138
142
|
}).run(),
|
|
139
|
-
hidden: (e) => !
|
|
143
|
+
hidden: (e) => !b?.includes("table") || e.isTable,
|
|
140
144
|
isActive: (e) => e.isTable,
|
|
141
145
|
isDisabled: (e) => !e.canTable
|
|
142
146
|
},
|
|
143
147
|
{
|
|
144
|
-
icon: /* @__PURE__ */
|
|
148
|
+
icon: /* @__PURE__ */ v(re, {}),
|
|
145
149
|
label: "Add table row",
|
|
146
150
|
onClick: (e) => e.chain().focus().addRowAfter().run(),
|
|
147
151
|
hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
|
|
@@ -149,7 +153,7 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
149
153
|
isDisabled: (e) => !e.canTable
|
|
150
154
|
},
|
|
151
155
|
{
|
|
152
|
-
icon: /* @__PURE__ */
|
|
156
|
+
icon: /* @__PURE__ */ v(o, {}),
|
|
153
157
|
label: "Remove table row",
|
|
154
158
|
onClick: (e) => e.chain().focus().deleteRow().run(),
|
|
155
159
|
hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
|
|
@@ -157,7 +161,7 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
157
161
|
isDisabled: (e) => !e.canTable
|
|
158
162
|
},
|
|
159
163
|
{
|
|
160
|
-
icon: /* @__PURE__ */
|
|
164
|
+
icon: /* @__PURE__ */ v(ne, {}),
|
|
161
165
|
label: "Add table column",
|
|
162
166
|
onClick: (e) => e.chain().focus().addColumnAfter().run(),
|
|
163
167
|
hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
|
|
@@ -165,7 +169,7 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
165
169
|
isDisabled: (e) => !e.canTable
|
|
166
170
|
},
|
|
167
171
|
{
|
|
168
|
-
icon: /* @__PURE__ */
|
|
172
|
+
icon: /* @__PURE__ */ v(ie, {}),
|
|
169
173
|
label: "Remove table column",
|
|
170
174
|
onClick: (e) => e.chain().focus().deleteColumn().run(),
|
|
171
175
|
hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
|
|
@@ -173,7 +177,7 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
173
177
|
isDisabled: (e) => !e.canTable
|
|
174
178
|
},
|
|
175
179
|
{
|
|
176
|
-
icon: /* @__PURE__ */
|
|
180
|
+
icon: /* @__PURE__ */ v(s, {}),
|
|
177
181
|
label: "Remove table",
|
|
178
182
|
onClick: (e) => e.chain().focus().deleteTable().run(),
|
|
179
183
|
hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
|
|
@@ -181,7 +185,7 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
181
185
|
isDisabled: (e) => !e.canTable
|
|
182
186
|
},
|
|
183
187
|
{
|
|
184
|
-
icon: /* @__PURE__ */
|
|
188
|
+
icon: /* @__PURE__ */ v(I, {}),
|
|
185
189
|
label: "Table borders",
|
|
186
190
|
toggle: !0,
|
|
187
191
|
onClick: (e) => {
|
|
@@ -196,236 +200,241 @@ function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAr
|
|
|
196
200
|
isDisabled: (e) => !e.canTable
|
|
197
201
|
},
|
|
198
202
|
{
|
|
199
|
-
icon: /* @__PURE__ */ S
|
|
203
|
+
icon: /* @__PURE__ */ v(S, {}),
|
|
200
204
|
label: "Bold",
|
|
201
205
|
toggle: !0,
|
|
202
206
|
onClick: (e) => e.chain().focus().toggleBold().run(),
|
|
203
|
-
hidden: () => !
|
|
207
|
+
hidden: () => !b?.includes("bold"),
|
|
204
208
|
isActive: (e) => e.isBold,
|
|
205
209
|
isDisabled: (e) => !e.canBold
|
|
206
210
|
},
|
|
207
211
|
{
|
|
208
|
-
icon: /* @__PURE__ */
|
|
212
|
+
icon: /* @__PURE__ */ v(C, {}),
|
|
209
213
|
label: "Italic",
|
|
210
214
|
toggle: !0,
|
|
211
215
|
onClick: (e) => e.chain().focus().toggleItalic().run(),
|
|
212
|
-
hidden: () => !
|
|
216
|
+
hidden: () => !b?.includes("italic"),
|
|
213
217
|
isActive: (e) => e.isItalic,
|
|
214
218
|
isDisabled: (e) => !e.canItalic
|
|
215
219
|
},
|
|
216
220
|
{
|
|
217
|
-
icon: /* @__PURE__ */
|
|
221
|
+
icon: /* @__PURE__ */ v(w, {}),
|
|
218
222
|
label: "Strikethrough",
|
|
219
223
|
toggle: !0,
|
|
220
224
|
onClick: (e) => e.chain().focus().toggleStrike().run(),
|
|
221
|
-
hidden: () => !
|
|
225
|
+
hidden: () => !b?.includes("strikethrough"),
|
|
222
226
|
isActive: (e) => e.isStrike,
|
|
223
227
|
isDisabled: (e) => !e.canStrike
|
|
224
228
|
},
|
|
225
229
|
{
|
|
226
|
-
icon: /* @__PURE__ */
|
|
230
|
+
icon: /* @__PURE__ */ v(T, {}),
|
|
227
231
|
label: "Code",
|
|
228
232
|
toggle: !0,
|
|
229
233
|
onClick: (e) => e.chain().focus().toggleCode().run(),
|
|
230
|
-
hidden: () => !
|
|
234
|
+
hidden: () => !b?.includes("code"),
|
|
231
235
|
isActive: (e) => e.isCode,
|
|
232
236
|
isDisabled: (e) => !e.canCode
|
|
233
237
|
},
|
|
234
238
|
{
|
|
235
|
-
icon: /* @__PURE__ */
|
|
239
|
+
icon: /* @__PURE__ */ v(k, {}),
|
|
236
240
|
label: "Underline",
|
|
237
241
|
toggle: !0,
|
|
238
242
|
onClick: (e) => e.chain().focus().toggleUnderline().run(),
|
|
239
|
-
hidden: () => !
|
|
243
|
+
hidden: () => !b?.includes("underline"),
|
|
240
244
|
isActive: (e) => e.isUnderline
|
|
241
245
|
},
|
|
242
246
|
{
|
|
243
|
-
icon: /* @__PURE__ */
|
|
247
|
+
icon: /* @__PURE__ */ v(z, {}),
|
|
244
248
|
label: "Subscript",
|
|
245
249
|
toggle: !0,
|
|
246
250
|
onClick: (e) => e.chain().focus().toggleSubscript().run(),
|
|
247
|
-
hidden: () => !
|
|
251
|
+
hidden: () => !b?.includes("subscript"),
|
|
248
252
|
isActive: (e) => e.isSubScript
|
|
249
253
|
},
|
|
250
254
|
{
|
|
251
|
-
icon: /* @__PURE__ */
|
|
255
|
+
icon: /* @__PURE__ */ v(R, {}),
|
|
252
256
|
label: "Superscript",
|
|
253
257
|
toggle: !0,
|
|
254
258
|
onClick: (e) => e.chain().focus().toggleSuperscript().run(),
|
|
255
|
-
hidden: () => !
|
|
259
|
+
hidden: () => !b?.includes("superscript"),
|
|
256
260
|
isActive: (e) => e.isSuperScript
|
|
257
261
|
},
|
|
258
262
|
{
|
|
259
|
-
icon: /* @__PURE__ */
|
|
263
|
+
icon: /* @__PURE__ */ v(j, {}),
|
|
260
264
|
label: "Insert image",
|
|
261
|
-
hidden: () => !
|
|
265
|
+
hidden: () => !b?.includes("image"),
|
|
262
266
|
onClick: (e) => e.chain().focus().setImageUploadNode().run()
|
|
263
267
|
},
|
|
264
268
|
{
|
|
265
|
-
icon: /* @__PURE__ */
|
|
269
|
+
icon: /* @__PURE__ */ v(F, {}),
|
|
266
270
|
label: "Insert video",
|
|
267
|
-
hidden: () => !
|
|
271
|
+
hidden: () => !b?.includes("video"),
|
|
268
272
|
onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
|
|
269
273
|
},
|
|
270
274
|
{
|
|
271
|
-
icon: /* @__PURE__ */
|
|
275
|
+
icon: /* @__PURE__ */ v(oe, {}),
|
|
272
276
|
label: "Insert audio",
|
|
273
|
-
hidden: () => !
|
|
277
|
+
hidden: () => !b?.includes("audio"),
|
|
274
278
|
onClick: (e) => e.chain().focus().insertMedia({
|
|
275
279
|
type: "audio",
|
|
276
280
|
tag: "audio"
|
|
277
281
|
}).run()
|
|
278
282
|
},
|
|
279
283
|
{
|
|
280
|
-
icon: /* @__PURE__ */
|
|
284
|
+
icon: /* @__PURE__ */ v(te, {}),
|
|
281
285
|
label: "CSS classes",
|
|
282
|
-
hidden: () => !
|
|
286
|
+
hidden: () => !b?.includes("css"),
|
|
283
287
|
onClick: (e) => e.commands.openCSSClassDialog()
|
|
284
288
|
},
|
|
285
289
|
{
|
|
286
|
-
icon: /* @__PURE__ */
|
|
290
|
+
icon: /* @__PURE__ */ v(P, {}),
|
|
287
291
|
label: "Blockquote",
|
|
288
292
|
toggle: !0,
|
|
289
|
-
hidden: () => !
|
|
293
|
+
hidden: () => !b?.includes("blockquote"),
|
|
290
294
|
onClick: (e) => e.chain().focus().toggleBlockquote().run(),
|
|
291
295
|
isActive: (e) => e.isBlockquote
|
|
292
296
|
},
|
|
293
297
|
{
|
|
294
|
-
icon: /* @__PURE__ */
|
|
298
|
+
icon: /* @__PURE__ */ v(B, {}),
|
|
295
299
|
label: "Heading",
|
|
296
300
|
toggle: !0,
|
|
297
|
-
hidden: () => !
|
|
301
|
+
hidden: () => !b?.includes("h3"),
|
|
298
302
|
onClick: (e) => e.chain().focus().toggleHeadingParagraph().run(),
|
|
299
303
|
isActive: (e) => e.isHeadingParagraph
|
|
300
304
|
},
|
|
301
305
|
{
|
|
302
|
-
icon: /* @__PURE__ */
|
|
306
|
+
icon: /* @__PURE__ */ v(A, {}),
|
|
303
307
|
label: "Insert math",
|
|
304
|
-
hidden: () => !
|
|
308
|
+
hidden: () => !b?.includes("math"),
|
|
305
309
|
onClick: (e) => e.chain().focus().insertMath("").run()
|
|
306
310
|
},
|
|
307
311
|
{
|
|
308
|
-
icon: /* @__PURE__ */
|
|
312
|
+
icon: /* @__PURE__ */ v(c, { letter: "ñ" }),
|
|
309
313
|
label: "Spanish characters (ñ)",
|
|
310
|
-
hidden: () => !
|
|
311
|
-
onClick: () =>
|
|
314
|
+
hidden: () => !b?.includes("languageCharacters"),
|
|
315
|
+
onClick: () => q(i)
|
|
312
316
|
},
|
|
313
317
|
{
|
|
314
|
-
icon: /* @__PURE__ */
|
|
318
|
+
icon: /* @__PURE__ */ v(c, { letter: "€" }),
|
|
315
319
|
label: "Special characters (€)",
|
|
316
|
-
hidden: () =>
|
|
317
|
-
onClick: () =>
|
|
320
|
+
hidden: () => b?.filter((e) => e === "languageCharacters").length !== 2,
|
|
321
|
+
onClick: () => q(a)
|
|
318
322
|
},
|
|
319
323
|
{
|
|
320
|
-
icon: /* @__PURE__ */
|
|
324
|
+
icon: /* @__PURE__ */ v(ee, { editor: m }),
|
|
321
325
|
label: "Text alignment",
|
|
322
|
-
hidden: () => !
|
|
326
|
+
hidden: () => !b?.includes("text-align"),
|
|
323
327
|
onClick: () => {}
|
|
324
328
|
},
|
|
325
329
|
{
|
|
326
|
-
icon: /* @__PURE__ */
|
|
330
|
+
icon: /* @__PURE__ */ v(D, {}),
|
|
327
331
|
label: "Bulleted list",
|
|
328
332
|
toggle: !0,
|
|
329
|
-
hidden: () => !
|
|
333
|
+
hidden: () => !b?.includes("bulleted-list"),
|
|
330
334
|
onClick: (e) => e.chain().focus().toggleBulletList().run(),
|
|
331
335
|
isActive: (e) => e.isBulletList
|
|
332
336
|
},
|
|
333
337
|
{
|
|
334
|
-
icon: /* @__PURE__ */
|
|
338
|
+
icon: /* @__PURE__ */ v(O, {}),
|
|
335
339
|
label: "Numbered list",
|
|
336
340
|
toggle: !0,
|
|
337
|
-
hidden: () => !
|
|
341
|
+
hidden: () => !b?.includes("numbered-list"),
|
|
338
342
|
onClick: (e) => e.chain().focus().toggleOrderedList().run(),
|
|
339
343
|
isActive: (e) => e.isOrderedList
|
|
340
344
|
},
|
|
341
345
|
{
|
|
342
|
-
icon: /* @__PURE__ */
|
|
346
|
+
icon: /* @__PURE__ */ v(N, {}),
|
|
343
347
|
label: "Undo",
|
|
344
|
-
hidden: () => !
|
|
348
|
+
hidden: () => !b?.includes("undo"),
|
|
345
349
|
onClick: (e) => e.chain().focus().undo().run(),
|
|
346
350
|
isDisabled: (e) => !e.canUndo
|
|
347
351
|
},
|
|
348
352
|
{
|
|
349
|
-
icon: /* @__PURE__ */
|
|
353
|
+
icon: /* @__PURE__ */ v(M, {}),
|
|
350
354
|
label: "Redo",
|
|
351
|
-
hidden: () => !
|
|
355
|
+
hidden: () => !b?.includes("redo"),
|
|
352
356
|
onClick: (e) => e.chain().focus().redo().run(),
|
|
353
357
|
isDisabled: (e) => !e.canRedo
|
|
354
358
|
}
|
|
355
|
-
], [
|
|
356
|
-
return /* @__PURE__ */
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
359
|
+
], [b, m]);
|
|
360
|
+
return /* @__PURE__ */ y("div", {
|
|
361
|
+
ref: J,
|
|
362
|
+
className: se,
|
|
363
|
+
style: { ...ce },
|
|
364
|
+
onMouseDown: le,
|
|
360
365
|
children: [
|
|
361
|
-
|
|
362
|
-
className:
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
366
|
+
Q && /* @__PURE__ */ v("div", {
|
|
367
|
+
className: h.defaultToolbar,
|
|
368
|
+
role: "toolbar",
|
|
369
|
+
tabIndex: -1,
|
|
370
|
+
"aria-label": L.t("editableHtml.responseAreaToolbar", { lng: G }),
|
|
371
|
+
children: /* @__PURE__ */ v("div", {
|
|
372
|
+
className: h.buttonsContainer,
|
|
373
|
+
children: /* @__PURE__ */ v("button", {
|
|
367
374
|
type: "button",
|
|
368
|
-
className:
|
|
375
|
+
className: h.button,
|
|
369
376
|
onClick: (e) => {
|
|
370
|
-
e.preventDefault(),
|
|
377
|
+
e.preventDefault(), m.chain().focus().deleteSelection().run(), H?.(m.getHTML());
|
|
371
378
|
},
|
|
372
379
|
"aria-label": "Delete response area",
|
|
373
380
|
title: "Delete response area",
|
|
374
|
-
children: /* @__PURE__ */
|
|
381
|
+
children: /* @__PURE__ */ v(_, {})
|
|
375
382
|
})
|
|
376
383
|
})
|
|
377
384
|
}),
|
|
378
|
-
!X.hideDefaultToolbar && /* @__PURE__ */
|
|
379
|
-
className:
|
|
380
|
-
|
|
385
|
+
!X.hideDefaultToolbar && /* @__PURE__ */ y("div", {
|
|
386
|
+
className: h.defaultToolbar,
|
|
387
|
+
role: "toolbar",
|
|
388
|
+
tabIndex: -1,
|
|
389
|
+
"aria-label": L.t("editableHtml.toolbar", { lng: G }),
|
|
381
390
|
children: [
|
|
382
|
-
/* @__PURE__ */
|
|
383
|
-
className:
|
|
384
|
-
children:
|
|
391
|
+
/* @__PURE__ */ v("div", {
|
|
392
|
+
className: h.buttonsContainer,
|
|
393
|
+
children: ue.filter((e) => !e.hidden?.(X)).map((e, t) => {
|
|
385
394
|
let r = e.isDisabled?.(X), i = e.isActive?.(X);
|
|
386
|
-
return /* @__PURE__ */
|
|
395
|
+
return /* @__PURE__ */ v("button", {
|
|
387
396
|
type: "button",
|
|
388
397
|
disabled: r,
|
|
389
398
|
"aria-label": e.label,
|
|
390
399
|
title: e.label,
|
|
391
400
|
"aria-pressed": e.toggle ? !!i : void 0,
|
|
392
401
|
onClick: (t) => {
|
|
393
|
-
t.preventDefault(), e.onClick(
|
|
402
|
+
t.preventDefault(), e.onClick(m);
|
|
394
403
|
},
|
|
395
|
-
className: n(
|
|
404
|
+
className: n(h.button, { [h.active]: i }),
|
|
396
405
|
children: e.icon
|
|
397
406
|
}, t);
|
|
398
407
|
})
|
|
399
408
|
}),
|
|
400
|
-
|
|
409
|
+
b?.includes("responseArea") && /* @__PURE__ */ v("button", {
|
|
401
410
|
type: "button",
|
|
402
411
|
"aria-label": "Insert response area",
|
|
403
412
|
title: "Insert response area",
|
|
404
413
|
onClick: () => {
|
|
405
|
-
|
|
414
|
+
m.chain().focus().insertResponseArea(V.type).run();
|
|
406
415
|
},
|
|
407
|
-
className:
|
|
408
|
-
children: /* @__PURE__ */
|
|
416
|
+
className: h.button,
|
|
417
|
+
children: /* @__PURE__ */ v(r, {})
|
|
409
418
|
}),
|
|
410
|
-
Y.showDone && /* @__PURE__ */
|
|
411
|
-
|
|
419
|
+
Y.showDone && /* @__PURE__ */ v(t, { onClick: () => {
|
|
420
|
+
H?.(m.getHTML()), m.commands.blur();
|
|
412
421
|
} })
|
|
413
422
|
]
|
|
414
423
|
}),
|
|
415
|
-
|
|
416
|
-
editor:
|
|
424
|
+
K && /* @__PURE__ */ v(l, {
|
|
425
|
+
editor: m,
|
|
417
426
|
opts: {
|
|
418
|
-
...
|
|
427
|
+
...K,
|
|
419
428
|
renderPopOver: (e, t) => console.log("Show popover", t),
|
|
420
429
|
closePopOver: () => console.log("Close popover")
|
|
421
430
|
},
|
|
422
|
-
onClose: () =>
|
|
431
|
+
onClose: () => q(!1)
|
|
423
432
|
})
|
|
424
433
|
]
|
|
425
434
|
});
|
|
426
435
|
}
|
|
427
|
-
var
|
|
428
|
-
|
|
436
|
+
var H = (e) => {
|
|
437
|
+
h();
|
|
429
438
|
let t = {
|
|
430
439
|
defaultToolbar: "defaultToolbar",
|
|
431
440
|
buttonsContainer: "buttonsContainer",
|
|
@@ -445,11 +454,11 @@ var W = (e) => {
|
|
|
445
454
|
label: "label",
|
|
446
455
|
shared: "shared"
|
|
447
456
|
};
|
|
448
|
-
return /* @__PURE__ */
|
|
457
|
+
return /* @__PURE__ */ v(U, { children: /* @__PURE__ */ v(V, {
|
|
449
458
|
...e,
|
|
450
459
|
classes: t
|
|
451
460
|
}) });
|
|
452
|
-
},
|
|
461
|
+
}, U = m("div")(() => ({
|
|
453
462
|
height: 0,
|
|
454
463
|
overflow: "visible",
|
|
455
464
|
"& .defaultToolbar": {
|
|
@@ -473,14 +482,14 @@ var W = (e) => {
|
|
|
473
482
|
width: "24px",
|
|
474
483
|
height: "24px"
|
|
475
484
|
},
|
|
476
|
-
"&:hover": { color:
|
|
477
|
-
"&:focus": { outline: `2px solid ${
|
|
485
|
+
"&:hover": { color: b.text() },
|
|
486
|
+
"&:focus": { outline: `2px solid ${b.buttonFocusOutline()}` }
|
|
478
487
|
},
|
|
479
|
-
"& .active": { color:
|
|
488
|
+
"& .active": { color: b.text() },
|
|
480
489
|
"& .disabled": {
|
|
481
490
|
opacity: .7,
|
|
482
491
|
cursor: "not-allowed",
|
|
483
|
-
"& :hover": { color:
|
|
492
|
+
"& :hover": { color: b.disabled() }
|
|
484
493
|
},
|
|
485
494
|
"& .isActive": {
|
|
486
495
|
background: "var(--purple)",
|
|
@@ -528,4 +537,4 @@ var W = (e) => {
|
|
|
528
537
|
"& .shared": { display: "flex" }
|
|
529
538
|
}));
|
|
530
539
|
//#endregion
|
|
531
|
-
export {
|
|
540
|
+
export { H as default };
|
|
@@ -94,18 +94,18 @@ var u = o("div", { shouldForwardProp: (e) => !["noBorder", "error"].includes(e)
|
|
|
94
94
|
}
|
|
95
95
|
})), f = o("div", { shouldForwardProp: (e) => e !== "noPadding" })(({ noPadding: e }) => ({ padding: e ? 0 : "10px 8px" }));
|
|
96
96
|
function p(o) {
|
|
97
|
-
let [l, p] = a(null), m = i(null), { editor:
|
|
97
|
+
let [l, p] = a(null), [m, h] = a(!1), g = i(null), { editor: _, disabled: v, children: y, disableScrollbar: b, activePlugins: x, toolbarOpts: S, responseAreaProps: C, autoFocus: w, minWidth: T, width: E, maxWidth: D, minHeight: O, height: k, maxHeight: A, highlightShape: j, ref: M } = o;
|
|
98
98
|
n(() => {
|
|
99
|
-
|
|
100
|
-
}, [
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
_ && g.current && (_._tiptapContainerEl = g.current);
|
|
100
|
+
}, [_, g.current]), n(() => {
|
|
101
|
+
_ && w && Promise.resolve().then(() => {
|
|
102
|
+
_.commands.focus("end");
|
|
103
103
|
});
|
|
104
|
-
}, [
|
|
104
|
+
}, [_, w]), n(() => {
|
|
105
105
|
if (o.adjustWidthForLimit) {
|
|
106
106
|
let e = document.createElement("p");
|
|
107
107
|
e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = "W".repeat(o.charactersLimit);
|
|
108
|
-
let t = window.getComputedStyle(
|
|
108
|
+
let t = window.getComputedStyle(g.current);
|
|
109
109
|
[
|
|
110
110
|
"fontFamily",
|
|
111
111
|
"fontSize",
|
|
@@ -120,46 +120,54 @@ function p(o) {
|
|
|
120
120
|
}), document.body.appendChild(e), p(`${e.offsetWidth + 27}px`), e.remove();
|
|
121
121
|
}
|
|
122
122
|
}, [o.adjustWidthForLimit, o.charactersLimit]);
|
|
123
|
-
let
|
|
124
|
-
width: e(l ||
|
|
125
|
-
minWidth: e(
|
|
126
|
-
maxWidth: e(
|
|
127
|
-
height: e(
|
|
128
|
-
minHeight: e(
|
|
129
|
-
maxHeight: e(
|
|
123
|
+
let N = r(() => ({
|
|
124
|
+
width: e(l || E),
|
|
125
|
+
minWidth: e(T),
|
|
126
|
+
maxWidth: e(D),
|
|
127
|
+
height: e(k),
|
|
128
|
+
minHeight: e(O),
|
|
129
|
+
maxHeight: e(A)
|
|
130
130
|
}), [
|
|
131
131
|
l,
|
|
132
|
-
C,
|
|
133
|
-
w,
|
|
134
132
|
T,
|
|
135
133
|
E,
|
|
136
134
|
D,
|
|
137
|
-
O
|
|
135
|
+
O,
|
|
136
|
+
k,
|
|
137
|
+
A
|
|
138
138
|
]);
|
|
139
139
|
return /* @__PURE__ */ c(u, {
|
|
140
|
-
noBorder:
|
|
141
|
-
error:
|
|
140
|
+
noBorder: S && S.noBorder,
|
|
141
|
+
error: S && S.error,
|
|
142
142
|
className: o.className,
|
|
143
143
|
style: {
|
|
144
|
-
width:
|
|
145
|
-
minWidth:
|
|
146
|
-
maxWidth:
|
|
144
|
+
width: N.width,
|
|
145
|
+
minWidth: N.minWidth,
|
|
146
|
+
maxWidth: N.maxWidth
|
|
147
|
+
},
|
|
148
|
+
ref: g,
|
|
149
|
+
onFocus: (e) => {
|
|
150
|
+
e.currentTarget.contains(e.target) && h(!0);
|
|
151
|
+
},
|
|
152
|
+
onBlur: (e) => {
|
|
153
|
+
e.currentTarget.contains(e.relatedTarget) || h(!1);
|
|
147
154
|
},
|
|
148
|
-
ref: m,
|
|
149
155
|
children: [/* @__PURE__ */ s(d, {
|
|
150
|
-
disableScrollbar:
|
|
151
|
-
highlightShape:
|
|
156
|
+
disableScrollbar: b,
|
|
157
|
+
highlightShape: j,
|
|
152
158
|
children: /* @__PURE__ */ s(f, {
|
|
153
|
-
noPadding:
|
|
154
|
-
children:
|
|
159
|
+
noPadding: S && S.noPadding,
|
|
160
|
+
children: y
|
|
155
161
|
})
|
|
156
|
-
}),
|
|
157
|
-
editor:
|
|
158
|
-
responseAreaProps:
|
|
159
|
-
toolbarOpts:
|
|
160
|
-
activePlugins:
|
|
162
|
+
}), _ && /* @__PURE__ */ s(t, {
|
|
163
|
+
editor: _,
|
|
164
|
+
responseAreaProps: C,
|
|
165
|
+
toolbarOpts: S,
|
|
166
|
+
activePlugins: x,
|
|
161
167
|
onChange: o.onChange,
|
|
162
|
-
autoWidthToolbar: o.autoWidthToolbar
|
|
168
|
+
autoWidthToolbar: o.autoWidthToolbar,
|
|
169
|
+
hasFocus: m,
|
|
170
|
+
language: o.language
|
|
163
171
|
})]
|
|
164
172
|
});
|
|
165
173
|
}
|
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.
|
|
3
|
+
"version": "3.0.1-next.20261004173930",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,10 +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.
|
|
17
|
-
"@pie-lib/math-input": "9.0.1-next.
|
|
18
|
-
"@pie-lib/math-toolbar": "4.0.1-next.
|
|
16
|
+
"@pie-lib/drag": "5.0.1-next.20261004173930",
|
|
17
|
+
"@pie-lib/math-input": "9.0.1-next.20261004173930",
|
|
18
|
+
"@pie-lib/math-toolbar": "4.0.1-next.20261004173930",
|
|
19
19
|
"@pie-lib/render-ui": "8.0.1-next.20261004165705",
|
|
20
|
+
"@pie-lib/translator": "5.0.1-next.20261004173930",
|
|
20
21
|
"@tiptap/core": "3.31.3",
|
|
21
22
|
"@tiptap/extension-character-count": "3.31.3",
|
|
22
23
|
"@tiptap/extension-color": "3.31.3",
|