@underverse-ui/underverse 2.0.35 → 2.0.36
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/api-reference.json +1 -1
- package/dist/DatePicker-FDOTQMNL.js +15 -0
- package/dist/{EmojiPicker-6H52Q4YE.js → EmojiPicker-Z7QPW4DA.js} +5 -4
- package/dist/EmojiPicker-Z7QPW4DA.js.map +1 -0
- package/dist/chunk-5GMQ23IU.js +719 -0
- package/dist/chunk-5GMQ23IU.js.map +1 -0
- package/dist/{chunk-L73HBI6E.js → chunk-5VCM2Z7M.js} +6 -4
- package/dist/{chunk-L73HBI6E.js.map → chunk-5VCM2Z7M.js.map} +1 -1
- package/dist/{chunk-6FAHXNDQ.js → chunk-6XQTRIP6.js} +10 -349
- package/dist/chunk-6XQTRIP6.js.map +1 -0
- package/dist/chunk-EN33T3LJ.js +358 -0
- package/dist/chunk-EN33T3LJ.js.map +1 -0
- package/dist/{chunk-WFQV7XFC.js → chunk-JABD2ONI.js} +3 -3
- package/dist/chunk-JG3U26V6.js +1692 -0
- package/dist/chunk-JG3U26V6.js.map +1 -0
- package/dist/{chunk-H4AVZA4K.js → chunk-SCW2XGCE.js} +462 -353
- package/dist/chunk-SCW2XGCE.js.map +1 -0
- package/dist/{chunk-W3QTP2DM.js → chunk-TSBKJELM.js} +2 -2
- package/dist/{chunk-F2P3DJSC.js → chunk-V4VZZHV7.js} +322 -1029
- package/dist/chunk-V4VZZHV7.js.map +1 -0
- package/dist/index.cjs +13472 -13308
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.js +1942 -3569
- package/dist/index.js.map +1 -1
- package/dist/{menu-bar-MUISXLMR.js → menu-bar-MX3LXG6T.js} +6 -4
- package/dist/{menu-bar-MUISXLMR.js.map → menu-bar-MX3LXG6T.js.map} +1 -1
- package/dist/ueditor.cjs +2777 -1098
- package/dist/ueditor.cjs.map +1 -1
- package/dist/ueditor.js +6 -4
- package/package.json +1 -1
- package/dist/chunk-6FAHXNDQ.js.map +0 -1
- package/dist/chunk-F2P3DJSC.js.map +0 -1
- package/dist/chunk-H4AVZA4K.js.map +0 -1
- /package/dist/{EmojiPicker-6H52Q4YE.js.map → DatePicker-FDOTQMNL.js.map} +0 -0
- /package/dist/{chunk-WFQV7XFC.js.map → chunk-JABD2ONI.js.map} +0 -0
- /package/dist/{chunk-W3QTP2DM.js.map → chunk-TSBKJELM.js.map} +0 -0
|
@@ -1,732 +1,34 @@
|
|
|
1
1
|
import {
|
|
2
|
-
Tooltip
|
|
3
|
-
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-EN33T3LJ.js";
|
|
4
|
+
import {
|
|
5
|
+
Popover,
|
|
6
|
+
getBorderRadiusClass,
|
|
7
|
+
useUnderverseUIConfig
|
|
8
|
+
} from "./chunk-5GMQ23IU.js";
|
|
9
|
+
import {
|
|
4
10
|
cn,
|
|
5
11
|
formControlFixedClass,
|
|
6
12
|
formControlOutlineClass,
|
|
7
13
|
formControlSizeStyles,
|
|
8
14
|
formControlValueClass,
|
|
9
|
-
mergeRefs,
|
|
10
|
-
resolveUEditorPortalContainer,
|
|
11
15
|
setRefValue,
|
|
12
|
-
useSmartTranslations
|
|
13
|
-
|
|
14
|
-
} from "./chunk-6FAHXNDQ.js";
|
|
15
|
-
|
|
16
|
-
// src/contexts/UnderverseConfigContext.tsx
|
|
17
|
-
import * as React from "react";
|
|
18
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
19
|
-
var UnderverseUIConfigContext = React.createContext(null);
|
|
20
|
-
function useUnderverseUIConfig() {
|
|
21
|
-
return React.useContext(UnderverseUIConfigContext) ?? {};
|
|
22
|
-
}
|
|
23
|
-
function UnderverseConfigProvider({ children, config }) {
|
|
24
|
-
if (!config) return /* @__PURE__ */ jsx(Fragment, { children });
|
|
25
|
-
return /* @__PURE__ */ jsx(UnderverseUIConfigContext.Provider, { value: config, children });
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// src/utils/animations.ts
|
|
29
|
-
import { useEffect } from "react";
|
|
30
|
-
var shadcnAnimationStyles = `
|
|
31
|
-
/* ============================================
|
|
32
|
-
* DROPDOWN / POPOVER ANIMATIONS
|
|
33
|
-
* Uses spring-like cubic-bezier for natural feel
|
|
34
|
-
* ============================================ */
|
|
35
|
-
|
|
36
|
-
/* Native-like Combobox Animation - Mimics browser default select */
|
|
37
|
-
[data-state="open"][data-combobox-dropdown] {
|
|
38
|
-
animation: comboboxOpen 150ms cubic-bezier(0.2, 0, 0, 1);
|
|
39
|
-
transform-origin: top center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
[data-state="closed"][data-combobox-dropdown] {
|
|
43
|
-
animation: comboboxClose 120ms cubic-bezier(0.4, 0, 1, 1);
|
|
44
|
-
transform-origin: top center;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@keyframes comboboxOpen {
|
|
48
|
-
0% {
|
|
49
|
-
opacity: 0;
|
|
50
|
-
transform: translateY(-4px) scaleY(0.9);
|
|
51
|
-
}
|
|
52
|
-
100% {
|
|
53
|
-
opacity: 1;
|
|
54
|
-
transform: translateY(0) scaleY(1);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@keyframes comboboxClose {
|
|
59
|
-
0% {
|
|
60
|
-
opacity: 1;
|
|
61
|
-
transform: translateY(0) scaleY(1);
|
|
62
|
-
}
|
|
63
|
-
100% {
|
|
64
|
-
opacity: 0;
|
|
65
|
-
transform: translateY(-4px) scaleY(0.9);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Generic dropdown open/close */
|
|
70
|
-
[data-state="open"] {
|
|
71
|
-
animation: slideDownAndFade 220ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
[data-state="closed"] {
|
|
75
|
-
animation: slideUpAndFade 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@keyframes slideDownAndFade {
|
|
79
|
-
from {
|
|
80
|
-
opacity: 0;
|
|
81
|
-
transform: translateY(-4px) scale(0.98);
|
|
82
|
-
}
|
|
83
|
-
to {
|
|
84
|
-
opacity: 1;
|
|
85
|
-
transform: translateY(0) scale(1);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
@keyframes slideUpAndFade {
|
|
90
|
-
from {
|
|
91
|
-
opacity: 1;
|
|
92
|
-
transform: translateY(0) scale(1);
|
|
93
|
-
}
|
|
94
|
-
to {
|
|
95
|
-
opacity: 0;
|
|
96
|
-
transform: translateY(-4px) scale(0.98);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* ============================================
|
|
101
|
-
* DROPDOWN ITEMS - Native-like instant appearance
|
|
102
|
-
* ============================================ */
|
|
103
|
-
|
|
104
|
-
/* Fast staggered animation for native feel */
|
|
105
|
-
.dropdown-item {
|
|
106
|
-
opacity: 0;
|
|
107
|
-
animation: itemFadeIn 120ms cubic-bezier(0.2, 0, 0, 1) forwards;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
@keyframes itemFadeIn {
|
|
111
|
-
from {
|
|
112
|
-
opacity: 0;
|
|
113
|
-
transform: translateX(-4px);
|
|
114
|
-
}
|
|
115
|
-
to {
|
|
116
|
-
opacity: 1;
|
|
117
|
-
transform: translateX(0);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* Item stagger delays - minimal for speed */
|
|
122
|
-
.dropdown-item:nth-child(1) { animation-delay: 0ms; }
|
|
123
|
-
.dropdown-item:nth-child(2) { animation-delay: 15ms; }
|
|
124
|
-
.dropdown-item:nth-child(3) { animation-delay: 30ms; }
|
|
125
|
-
.dropdown-item:nth-child(4) { animation-delay: 45ms; }
|
|
126
|
-
.dropdown-item:nth-child(5) { animation-delay: 60ms; }
|
|
127
|
-
.dropdown-item:nth-child(6) { animation-delay: 75ms; }
|
|
128
|
-
.dropdown-item:nth-child(7) { animation-delay: 90ms; }
|
|
129
|
-
.dropdown-item:nth-child(8) { animation-delay: 105ms; }
|
|
130
|
-
.dropdown-item:nth-child(n+9) { animation-delay: 120ms; }
|
|
131
|
-
|
|
132
|
-
/* ============================================
|
|
133
|
-
* DATEPICKER ANIMATIONS
|
|
134
|
-
* ============================================ */
|
|
135
|
-
|
|
136
|
-
.datepicker-day {
|
|
137
|
-
opacity: 0;
|
|
138
|
-
animation: dayFadeIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
@keyframes dayFadeIn {
|
|
142
|
-
from {
|
|
143
|
-
opacity: 0;
|
|
144
|
-
transform: scale(0.8);
|
|
145
|
-
}
|
|
146
|
-
to {
|
|
147
|
-
opacity: 1;
|
|
148
|
-
transform: scale(1);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* ============================================
|
|
153
|
-
* TOOLTIP ANIMATIONS
|
|
154
|
-
* ============================================ */
|
|
155
|
-
|
|
156
|
-
[data-tooltip] {
|
|
157
|
-
animation: tooltipIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
@keyframes tooltipIn {
|
|
161
|
-
from {
|
|
162
|
-
opacity: 0;
|
|
163
|
-
transform: scale(0.95);
|
|
164
|
-
}
|
|
165
|
-
to {
|
|
166
|
-
opacity: 1;
|
|
167
|
-
transform: scale(1);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/* ============================================
|
|
172
|
-
* MODAL / DIALOG ANIMATIONS
|
|
173
|
-
* ============================================ */
|
|
174
|
-
|
|
175
|
-
.modal-content {
|
|
176
|
-
animation: scaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
@keyframes scaleIn {
|
|
180
|
-
from {
|
|
181
|
-
opacity: 0;
|
|
182
|
-
transform: scale(0.9);
|
|
183
|
-
}
|
|
184
|
-
to {
|
|
185
|
-
opacity: 1;
|
|
186
|
-
transform: scale(1);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/* Smooth backdrop blur transition */
|
|
191
|
-
.backdrop-animate {
|
|
192
|
-
transition: backdrop-filter 200ms ease, background-color 200ms ease;
|
|
193
|
-
}
|
|
194
|
-
`;
|
|
195
|
-
function ensureAnimationStylesInjected(targetDocument) {
|
|
196
|
-
const resolvedDocument = targetDocument ?? (typeof document !== "undefined" ? document : void 0);
|
|
197
|
-
if (resolvedDocument) {
|
|
198
|
-
const styleId = "shadcn-animations";
|
|
199
|
-
if (!resolvedDocument.getElementById(styleId)) {
|
|
200
|
-
const styleElement = resolvedDocument.createElement("style");
|
|
201
|
-
styleElement.id = styleId;
|
|
202
|
-
styleElement.textContent = shadcnAnimationStyles;
|
|
203
|
-
resolvedDocument.head.appendChild(styleElement);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
function useShadCNAnimations(targetDocument) {
|
|
208
|
-
useEffect(() => {
|
|
209
|
-
if (targetDocument === null) return;
|
|
210
|
-
ensureAnimationStylesInjected(targetDocument);
|
|
211
|
-
}, [targetDocument]);
|
|
212
|
-
}
|
|
213
|
-
function injectAnimationStyles(targetDocument) {
|
|
214
|
-
ensureAnimationStylesInjected(targetDocument);
|
|
215
|
-
}
|
|
216
|
-
function getAnimationStyles() {
|
|
217
|
-
return shadcnAnimationStyles;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
// src/components/Popover.tsx
|
|
221
|
-
import * as React2 from "react";
|
|
222
|
-
import { createPortal } from "react-dom";
|
|
223
|
-
|
|
224
|
-
// src/utils/radius.ts
|
|
225
|
-
var STANDARD_BORDER_MODES = ["none", "sm", "md", "lg", "xl", "2xl", "3xl", "full"];
|
|
226
|
-
var CUSTOM_BORDER_MAP = {
|
|
227
|
-
daewoo: "rounded",
|
|
228
|
-
infiniq: "rounded-full"
|
|
229
|
-
};
|
|
230
|
-
var BORDER_MODE_DOCS_TYPE = `"${STANDARD_BORDER_MODES.join('" | "')}" | "${Object.keys(CUSTOM_BORDER_MAP).join('" | "')}"`;
|
|
231
|
-
function getBorderRadiusClass(borderMode = "full") {
|
|
232
|
-
if (!borderMode) return "rounded-full";
|
|
233
|
-
if (borderMode in CUSTOM_BORDER_MAP) {
|
|
234
|
-
return CUSTOM_BORDER_MAP[borderMode];
|
|
235
|
-
}
|
|
236
|
-
if (STANDARD_BORDER_MODES.includes(borderMode)) {
|
|
237
|
-
return `rounded-${borderMode}`;
|
|
238
|
-
}
|
|
239
|
-
return borderMode;
|
|
240
|
-
}
|
|
241
|
-
function getPanelBorderRadiusClass(borderMode = "lg") {
|
|
242
|
-
const resolved = borderMode ?? "lg";
|
|
243
|
-
if (resolved === "full" || resolved === "infiniq") {
|
|
244
|
-
return "rounded-2xl";
|
|
245
|
-
}
|
|
246
|
-
return getBorderRadiusClass(resolved);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
// src/components/Popover.tsx
|
|
250
|
-
import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
251
|
-
function getTransformOrigin(side, align) {
|
|
252
|
-
if (side === "top") return `${align === "end" ? "right" : "left"} bottom`;
|
|
253
|
-
if (side === "bottom") return `${align === "end" ? "right" : "left"} top`;
|
|
254
|
-
if (side === "left") return "right top";
|
|
255
|
-
return "left top";
|
|
256
|
-
}
|
|
257
|
-
function normalizePlacement(placement) {
|
|
258
|
-
switch (placement) {
|
|
259
|
-
case "top":
|
|
260
|
-
return { side: "top", align: "start" };
|
|
261
|
-
case "bottom":
|
|
262
|
-
return { side: "bottom", align: "start" };
|
|
263
|
-
case "left":
|
|
264
|
-
return { side: "left", align: "start" };
|
|
265
|
-
case "right":
|
|
266
|
-
return { side: "right", align: "start" };
|
|
267
|
-
default: {
|
|
268
|
-
const [side, align] = placement.split("-");
|
|
269
|
-
return { side, align };
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
|
|
274
|
-
function overflowAmount(left, width, viewportWidth, padding) {
|
|
275
|
-
const min = padding;
|
|
276
|
-
const max = viewportWidth - padding;
|
|
277
|
-
const overflowLeft = Math.max(0, min - left);
|
|
278
|
-
const overflowRight = Math.max(0, left + width - max);
|
|
279
|
-
return overflowLeft + overflowRight;
|
|
280
|
-
}
|
|
281
|
-
function getScrollAncestors(trigger, ownerWindow) {
|
|
282
|
-
const ancestors = [];
|
|
283
|
-
let current = trigger.parentElement;
|
|
284
|
-
while (current) {
|
|
285
|
-
try {
|
|
286
|
-
const style = ownerWindow.getComputedStyle(current);
|
|
287
|
-
const overflow = `${style.overflow} ${style.overflowX} ${style.overflowY}`;
|
|
288
|
-
if (/(auto|scroll|overlay|hidden)/.test(overflow)) ancestors.push(current);
|
|
289
|
-
} catch {
|
|
290
|
-
}
|
|
291
|
-
current = current.parentElement;
|
|
292
|
-
}
|
|
293
|
-
return ancestors;
|
|
294
|
-
}
|
|
295
|
-
function isFiniteRect(rect) {
|
|
296
|
-
return [rect.top, rect.right, rect.bottom, rect.left, rect.width, rect.height].every(Number.isFinite);
|
|
297
|
-
}
|
|
298
|
-
function isFullyOutsideViewport(rect, viewportWidth, viewportHeight) {
|
|
299
|
-
return rect.bottom < 0 || rect.right < 0 || rect.top > viewportHeight || rect.left > viewportWidth;
|
|
300
|
-
}
|
|
301
|
-
function computePopoverPosition(args) {
|
|
302
|
-
const { triggerRect, contentSize, placement, offset, padding, viewport, constrainToAvailableHeight } = args;
|
|
303
|
-
let { side, align } = normalizePlacement(placement);
|
|
304
|
-
const availableBelow = Math.max(0, viewport.height - padding - triggerRect.bottom - offset);
|
|
305
|
-
const availableAbove = Math.max(0, triggerRect.top - padding - offset);
|
|
306
|
-
if (side === "bottom") {
|
|
307
|
-
if (constrainToAvailableHeight) {
|
|
308
|
-
if (contentSize.height > availableBelow && availableAbove > availableBelow) side = "top";
|
|
309
|
-
} else {
|
|
310
|
-
const bottomTop = triggerRect.bottom + offset;
|
|
311
|
-
const overflowsBottom = bottomTop + contentSize.height > viewport.height - padding;
|
|
312
|
-
const topTop = triggerRect.top - offset - contentSize.height;
|
|
313
|
-
const fitsTop = topTop >= padding;
|
|
314
|
-
if (overflowsBottom && fitsTop) side = "top";
|
|
315
|
-
}
|
|
316
|
-
} else if (side === "top") {
|
|
317
|
-
if (constrainToAvailableHeight) {
|
|
318
|
-
if (contentSize.height > availableAbove && availableBelow > availableAbove) side = "bottom";
|
|
319
|
-
} else {
|
|
320
|
-
const topTop = triggerRect.top - offset - contentSize.height;
|
|
321
|
-
const overflowsTop = topTop < padding;
|
|
322
|
-
const bottomTop = triggerRect.bottom + offset;
|
|
323
|
-
const fitsBottom = bottomTop + contentSize.height <= viewport.height - padding;
|
|
324
|
-
if (overflowsTop && fitsBottom) side = "bottom";
|
|
325
|
-
}
|
|
326
|
-
} else if (side === "right") {
|
|
327
|
-
const rightLeft = triggerRect.right + offset;
|
|
328
|
-
const overflowsRight = rightLeft + contentSize.width > viewport.width - padding;
|
|
329
|
-
const leftLeft = triggerRect.left - offset - contentSize.width;
|
|
330
|
-
const fitsLeft = leftLeft >= padding;
|
|
331
|
-
if (overflowsRight && fitsLeft) side = "left";
|
|
332
|
-
} else if (side === "left") {
|
|
333
|
-
const leftLeft = triggerRect.left - offset - contentSize.width;
|
|
334
|
-
const overflowsLeft = leftLeft < padding;
|
|
335
|
-
const rightLeft = triggerRect.right + offset;
|
|
336
|
-
const fitsRight = rightLeft + contentSize.width <= viewport.width - padding;
|
|
337
|
-
if (overflowsLeft && fitsRight) side = "right";
|
|
338
|
-
}
|
|
339
|
-
let top = 0;
|
|
340
|
-
let left = 0;
|
|
341
|
-
if (side === "top" || side === "bottom") {
|
|
342
|
-
const leftStart = triggerRect.left;
|
|
343
|
-
const leftEnd = triggerRect.right - contentSize.width;
|
|
344
|
-
const startOverflow = overflowAmount(leftStart, contentSize.width, viewport.width, padding);
|
|
345
|
-
const endOverflow = overflowAmount(leftEnd, contentSize.width, viewport.width, padding);
|
|
346
|
-
if (align === "start" && startOverflow > 0 && endOverflow < startOverflow) align = "end";
|
|
347
|
-
if (align === "end" && endOverflow > 0 && startOverflow < endOverflow) align = "start";
|
|
348
|
-
left = align === "end" ? leftEnd : leftStart;
|
|
349
|
-
const availableHeight = side === "top" ? availableAbove : availableBelow;
|
|
350
|
-
const renderedHeight = constrainToAvailableHeight ? Math.min(contentSize.height, availableHeight) : contentSize.height;
|
|
351
|
-
top = side === "top" ? triggerRect.top - offset - renderedHeight : triggerRect.bottom + offset;
|
|
352
|
-
left = clamp(left, padding, viewport.width - contentSize.width - padding);
|
|
353
|
-
top = clamp(top, padding, viewport.height - renderedHeight - padding);
|
|
354
|
-
return { top, left, side, align, availableHeight };
|
|
355
|
-
}
|
|
356
|
-
top = triggerRect.top;
|
|
357
|
-
left = side === "left" ? triggerRect.left - offset - contentSize.width : triggerRect.right + offset;
|
|
358
|
-
left = clamp(left, padding, viewport.width - contentSize.width - padding);
|
|
359
|
-
top = clamp(top, padding, viewport.height - contentSize.height - padding);
|
|
360
|
-
return { top, left, side, align, availableHeight: Math.max(0, viewport.height - padding * 2) };
|
|
361
|
-
}
|
|
362
|
-
var Popover = ({
|
|
363
|
-
trigger,
|
|
364
|
-
children,
|
|
365
|
-
className,
|
|
366
|
-
contentClassName,
|
|
367
|
-
contentProps,
|
|
368
|
-
contentScrollable = false,
|
|
369
|
-
placement = "bottom",
|
|
370
|
-
modal = false,
|
|
371
|
-
disabled = false,
|
|
372
|
-
open,
|
|
373
|
-
onOpenChange,
|
|
374
|
-
matchTriggerWidth = false,
|
|
375
|
-
contentWidth,
|
|
376
|
-
borderMode,
|
|
377
|
-
getPortalContainer,
|
|
378
|
-
constrainToAvailableHeight = false
|
|
379
|
-
}) => {
|
|
380
|
-
const isControlled = open !== void 0;
|
|
381
|
-
const [internalOpen, setInternalOpen] = React2.useState(false);
|
|
382
|
-
const triggerRef = React2.useRef(null);
|
|
383
|
-
const [triggerDocument, setTriggerDocument] = React2.useState(null);
|
|
384
|
-
const positionerRef = React2.useRef(null);
|
|
385
|
-
const panelRef = React2.useRef(null);
|
|
386
|
-
const pendingFrameRef = React2.useRef(null);
|
|
387
|
-
const closeRequestedRef = React2.useRef(false);
|
|
388
|
-
const lastAppliedRef = React2.useRef(null);
|
|
389
|
-
const globalConfig = useUnderverseUIConfig();
|
|
390
|
-
const resolvedBorderMode = borderMode ?? globalConfig.popover?.borderMode ?? globalConfig.borderMode;
|
|
391
|
-
const isOpen = isControlled ? open : internalOpen;
|
|
392
|
-
const contextGetPortalContainer = useUEditorPortalContainerGetter();
|
|
393
|
-
const requestedPortalContainer = isOpen && triggerDocument ? resolveUEditorPortalContainer(getPortalContainer, contextGetPortalContainer, triggerDocument) : null;
|
|
394
|
-
const portalContainer = requestedPortalContainer?.ownerDocument === triggerDocument ? requestedPortalContainer : triggerDocument?.body ?? null;
|
|
395
|
-
useShadCNAnimations(isOpen ? triggerDocument : null);
|
|
396
|
-
const setIsOpen = React2.useCallback(
|
|
397
|
-
(next) => {
|
|
398
|
-
if (!isControlled) setInternalOpen(next);
|
|
399
|
-
onOpenChange?.(next);
|
|
400
|
-
},
|
|
401
|
-
[isControlled, onOpenChange]
|
|
402
|
-
);
|
|
403
|
-
const offset = 4;
|
|
404
|
-
const padding = 8;
|
|
405
|
-
const initialPlacement = React2.useMemo(() => normalizePlacement(placement), [placement]);
|
|
406
|
-
const cancelScheduledPositionUpdate = React2.useCallback(() => {
|
|
407
|
-
const pending = pendingFrameRef.current;
|
|
408
|
-
if (!pending) return;
|
|
409
|
-
pendingFrameRef.current = null;
|
|
410
|
-
try {
|
|
411
|
-
pending.ownerWindow.cancelAnimationFrame(pending.frameId);
|
|
412
|
-
} catch {
|
|
413
|
-
}
|
|
414
|
-
}, []);
|
|
415
|
-
const closeWhenPositioningIsUnsafe = React2.useCallback(() => {
|
|
416
|
-
const positionerEl = positionerRef.current;
|
|
417
|
-
if (positionerEl) {
|
|
418
|
-
positionerEl.style.visibility = "hidden";
|
|
419
|
-
positionerEl.style.pointerEvents = "none";
|
|
420
|
-
}
|
|
421
|
-
if (closeRequestedRef.current) return;
|
|
422
|
-
closeRequestedRef.current = true;
|
|
423
|
-
setIsOpen(false);
|
|
424
|
-
}, [setIsOpen]);
|
|
425
|
-
const updatePosition = React2.useCallback(() => {
|
|
426
|
-
const triggerEl = triggerRef.current;
|
|
427
|
-
const positionerEl = positionerRef.current;
|
|
428
|
-
const panelEl = panelRef.current;
|
|
429
|
-
if (!triggerEl || !positionerEl || !panelEl) return;
|
|
430
|
-
const ownerDocument = triggerEl.ownerDocument;
|
|
431
|
-
const ownerWindow = ownerDocument.defaultView;
|
|
432
|
-
if (!ownerWindow || ownerWindow.closed || !triggerEl.isConnected || !positionerEl.isConnected || positionerEl.ownerDocument !== ownerDocument || panelEl.ownerDocument !== ownerDocument) {
|
|
433
|
-
closeWhenPositioningIsUnsafe();
|
|
434
|
-
return;
|
|
435
|
-
}
|
|
436
|
-
const contentEl = panelEl.firstElementChild;
|
|
437
|
-
if (!contentEl) {
|
|
438
|
-
closeWhenPositioningIsUnsafe();
|
|
439
|
-
return;
|
|
440
|
-
}
|
|
441
|
-
try {
|
|
442
|
-
const triggerRect = triggerEl.getBoundingClientRect();
|
|
443
|
-
const viewportWidth = ownerWindow.innerWidth;
|
|
444
|
-
const viewportHeight = ownerWindow.innerHeight;
|
|
445
|
-
if (!isFiniteRect(triggerRect) || !Number.isFinite(viewportWidth) || !Number.isFinite(viewportHeight) || viewportWidth <= 0 || viewportHeight <= 0 || isFullyOutsideViewport(triggerRect, viewportWidth, viewportHeight)) {
|
|
446
|
-
closeWhenPositioningIsUnsafe();
|
|
447
|
-
return;
|
|
448
|
-
}
|
|
449
|
-
const widthWanted = matchTriggerWidth ? triggerRect.width : contentWidth;
|
|
450
|
-
const widthPx = widthWanted == null ? void 0 : Math.max(0, Math.round(widthWanted));
|
|
451
|
-
if (widthPx == null) {
|
|
452
|
-
if (positionerEl.style.width) positionerEl.style.width = "";
|
|
453
|
-
} else if (positionerEl.style.width !== `${widthPx}px`) {
|
|
454
|
-
positionerEl.style.width = `${widthPx}px`;
|
|
455
|
-
}
|
|
456
|
-
const prevApplied = lastAppliedRef.current;
|
|
457
|
-
const measuredWidth = positionerEl.offsetWidth;
|
|
458
|
-
const measuredHeight = positionerEl.offsetHeight;
|
|
459
|
-
const contentRect = positionerEl.getBoundingClientRect();
|
|
460
|
-
const contentBoxWidth = measuredWidth || contentRect.width;
|
|
461
|
-
const contentBoxHeight = Math.max(measuredHeight, contentRect.height);
|
|
462
|
-
const next = computePopoverPosition({
|
|
463
|
-
triggerRect,
|
|
464
|
-
contentSize: { width: contentBoxWidth, height: contentBoxHeight },
|
|
465
|
-
placement,
|
|
466
|
-
offset,
|
|
467
|
-
padding,
|
|
468
|
-
viewport: {
|
|
469
|
-
width: viewportWidth,
|
|
470
|
-
height: viewportHeight
|
|
471
|
-
},
|
|
472
|
-
constrainToAvailableHeight
|
|
473
|
-
});
|
|
474
|
-
const top = Math.round(next.top);
|
|
475
|
-
const left = Math.round(next.left);
|
|
476
|
-
const applied = prevApplied && prevApplied.positioner === positionerEl && Math.abs(prevApplied.top - top) < 0.5 && Math.abs(prevApplied.left - left) < 0.5 && prevApplied.side === next.side && prevApplied.align === next.align && prevApplied.width === widthPx && prevApplied.availableHeight === next.availableHeight;
|
|
477
|
-
if (applied) return;
|
|
478
|
-
lastAppliedRef.current = {
|
|
479
|
-
positioner: positionerEl,
|
|
480
|
-
top,
|
|
481
|
-
left,
|
|
482
|
-
side: next.side,
|
|
483
|
-
align: next.align,
|
|
484
|
-
width: widthPx,
|
|
485
|
-
availableHeight: next.availableHeight
|
|
486
|
-
};
|
|
487
|
-
positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
|
|
488
|
-
positionerEl.style.setProperty("--underverse-popover-available-height", `${next.availableHeight}px`);
|
|
489
|
-
positionerEl.dataset.side = next.side;
|
|
490
|
-
positionerEl.dataset.align = next.align;
|
|
491
|
-
panelEl.style.transformOrigin = getTransformOrigin(next.side, next.align);
|
|
492
|
-
if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
|
|
493
|
-
if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
|
|
494
|
-
} catch {
|
|
495
|
-
closeWhenPositioningIsUnsafe();
|
|
496
|
-
}
|
|
497
|
-
}, [placement, matchTriggerWidth, contentWidth, constrainToAvailableHeight, closeWhenPositioningIsUnsafe]);
|
|
498
|
-
const schedulePositionUpdate = React2.useCallback(() => {
|
|
499
|
-
if (pendingFrameRef.current) return;
|
|
500
|
-
const triggerEl = triggerRef.current;
|
|
501
|
-
const ownerWindow = triggerEl?.ownerDocument.defaultView;
|
|
502
|
-
if (!triggerEl || !ownerWindow || ownerWindow.closed) {
|
|
503
|
-
closeWhenPositioningIsUnsafe();
|
|
504
|
-
return;
|
|
505
|
-
}
|
|
506
|
-
try {
|
|
507
|
-
const frameId = ownerWindow.requestAnimationFrame(() => {
|
|
508
|
-
pendingFrameRef.current = null;
|
|
509
|
-
updatePosition();
|
|
510
|
-
});
|
|
511
|
-
pendingFrameRef.current = { ownerWindow, frameId };
|
|
512
|
-
} catch {
|
|
513
|
-
closeWhenPositioningIsUnsafe();
|
|
514
|
-
}
|
|
515
|
-
}, [closeWhenPositioningIsUnsafe, updatePosition]);
|
|
516
|
-
React2.useLayoutEffect(() => {
|
|
517
|
-
if (isOpen) {
|
|
518
|
-
closeRequestedRef.current = false;
|
|
519
|
-
return;
|
|
520
|
-
}
|
|
521
|
-
lastAppliedRef.current = null;
|
|
522
|
-
cancelScheduledPositionUpdate();
|
|
523
|
-
}, [cancelScheduledPositionUpdate, isOpen]);
|
|
524
|
-
React2.useLayoutEffect(() => {
|
|
525
|
-
if (!isOpen || !portalContainer) return;
|
|
526
|
-
updatePosition();
|
|
527
|
-
schedulePositionUpdate();
|
|
528
|
-
return cancelScheduledPositionUpdate;
|
|
529
|
-
}, [cancelScheduledPositionUpdate, isOpen, portalContainer, schedulePositionUpdate, updatePosition]);
|
|
530
|
-
React2.useEffect(() => {
|
|
531
|
-
const triggerEl = triggerRef.current;
|
|
532
|
-
const positionerEl = positionerRef.current;
|
|
533
|
-
if (!isOpen || !triggerEl || !positionerEl || !portalContainer) return;
|
|
534
|
-
const ownerDocument = triggerEl.ownerDocument;
|
|
535
|
-
const ownerWindow = ownerDocument.defaultView;
|
|
536
|
-
if (!ownerWindow || ownerWindow.closed || portalContainer.ownerDocument !== ownerDocument) {
|
|
537
|
-
closeWhenPositioningIsUnsafe();
|
|
538
|
-
return;
|
|
539
|
-
}
|
|
540
|
-
const scrollAncestors = getScrollAncestors(triggerEl, ownerWindow);
|
|
541
|
-
const passiveOptions = { passive: true };
|
|
542
|
-
for (const ancestor of scrollAncestors) {
|
|
543
|
-
ancestor.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
|
|
544
|
-
}
|
|
545
|
-
ownerWindow.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
|
|
546
|
-
ownerWindow.addEventListener("resize", schedulePositionUpdate);
|
|
547
|
-
ownerDocument.addEventListener("scroll", schedulePositionUpdate, { capture: true, passive: true });
|
|
548
|
-
const visualViewport = ownerWindow.visualViewport;
|
|
549
|
-
visualViewport?.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
|
|
550
|
-
visualViewport?.addEventListener("resize", schedulePositionUpdate);
|
|
551
|
-
const ResizeObserverCtor = ownerWindow.ResizeObserver;
|
|
552
|
-
const resizeObserver = ResizeObserverCtor ? new ResizeObserverCtor(schedulePositionUpdate) : null;
|
|
553
|
-
resizeObserver?.observe(triggerEl);
|
|
554
|
-
resizeObserver?.observe(positionerEl);
|
|
555
|
-
const contentEl = panelRef.current?.firstElementChild;
|
|
556
|
-
if (contentEl) resizeObserver?.observe(contentEl);
|
|
557
|
-
const MutationObserverCtor = ownerWindow.MutationObserver;
|
|
558
|
-
const mutationObserver = MutationObserverCtor ? new MutationObserverCtor(() => {
|
|
559
|
-
const currentTrigger = triggerRef.current;
|
|
560
|
-
if (!currentTrigger || !currentTrigger.isConnected || currentTrigger.ownerDocument !== ownerDocument) {
|
|
561
|
-
closeWhenPositioningIsUnsafe();
|
|
562
|
-
}
|
|
563
|
-
}) : null;
|
|
564
|
-
if (mutationObserver && ownerDocument.documentElement) {
|
|
565
|
-
mutationObserver.observe(ownerDocument.documentElement, { childList: true, subtree: true });
|
|
566
|
-
}
|
|
567
|
-
schedulePositionUpdate();
|
|
568
|
-
return () => {
|
|
569
|
-
for (const ancestor of scrollAncestors) {
|
|
570
|
-
ancestor.removeEventListener("scroll", schedulePositionUpdate);
|
|
571
|
-
}
|
|
572
|
-
ownerWindow.removeEventListener("scroll", schedulePositionUpdate);
|
|
573
|
-
ownerWindow.removeEventListener("resize", schedulePositionUpdate);
|
|
574
|
-
ownerDocument.removeEventListener("scroll", schedulePositionUpdate, true);
|
|
575
|
-
visualViewport?.removeEventListener("scroll", schedulePositionUpdate);
|
|
576
|
-
visualViewport?.removeEventListener("resize", schedulePositionUpdate);
|
|
577
|
-
resizeObserver?.disconnect();
|
|
578
|
-
mutationObserver?.disconnect();
|
|
579
|
-
cancelScheduledPositionUpdate();
|
|
580
|
-
};
|
|
581
|
-
}, [
|
|
582
|
-
cancelScheduledPositionUpdate,
|
|
583
|
-
closeWhenPositioningIsUnsafe,
|
|
584
|
-
isOpen,
|
|
585
|
-
portalContainer,
|
|
586
|
-
schedulePositionUpdate
|
|
587
|
-
]);
|
|
588
|
-
React2.useEffect(() => {
|
|
589
|
-
const triggerEl = triggerRef.current;
|
|
590
|
-
if (!isOpen || !triggerEl || !portalContainer) return;
|
|
591
|
-
const ownerDocument = triggerEl.ownerDocument;
|
|
592
|
-
const ownerWindow = ownerDocument.defaultView;
|
|
593
|
-
if (!ownerWindow || portalContainer.ownerDocument !== ownerDocument) {
|
|
594
|
-
closeWhenPositioningIsUnsafe();
|
|
595
|
-
return;
|
|
596
|
-
}
|
|
597
|
-
const handleClickOutside = (event) => {
|
|
598
|
-
const target = event.target;
|
|
599
|
-
const currentTrigger = triggerRef.current;
|
|
600
|
-
const popoverEl = positionerRef.current;
|
|
601
|
-
if (!currentTrigger || !popoverEl) return;
|
|
602
|
-
if (currentTrigger.contains(target)) return;
|
|
603
|
-
if (popoverEl.contains(target)) return;
|
|
604
|
-
if (target instanceof ownerWindow.Element && target.closest("[data-popover]")) return;
|
|
605
|
-
setIsOpen(false);
|
|
606
|
-
};
|
|
607
|
-
const handleEscape = (event) => {
|
|
608
|
-
if (event.key === "Escape") {
|
|
609
|
-
setIsOpen(false);
|
|
610
|
-
}
|
|
611
|
-
};
|
|
612
|
-
ownerDocument.addEventListener("mousedown", handleClickOutside);
|
|
613
|
-
ownerDocument.addEventListener("keydown", handleEscape);
|
|
614
|
-
return () => {
|
|
615
|
-
ownerDocument.removeEventListener("mousedown", handleClickOutside);
|
|
616
|
-
ownerDocument.removeEventListener("keydown", handleEscape);
|
|
617
|
-
};
|
|
618
|
-
}, [closeWhenPositioningIsUnsafe, isOpen, portalContainer, setIsOpen]);
|
|
619
|
-
const handleTriggerClick = () => {
|
|
620
|
-
if (!disabled) {
|
|
621
|
-
setIsOpen(!isOpen);
|
|
622
|
-
}
|
|
623
|
-
};
|
|
624
|
-
const triggerProps = trigger.props;
|
|
625
|
-
const childRef = triggerProps.ref;
|
|
626
|
-
const setTriggerNode = React2.useCallback((node) => {
|
|
627
|
-
triggerRef.current = node;
|
|
628
|
-
if (node) {
|
|
629
|
-
setTriggerDocument((currentDocument) => currentDocument === node.ownerDocument ? currentDocument : node.ownerDocument);
|
|
630
|
-
}
|
|
631
|
-
}, []);
|
|
632
|
-
const composedTriggerRef = React2.useMemo(
|
|
633
|
-
() => mergeRefs(childRef, setTriggerNode),
|
|
634
|
-
[childRef, setTriggerNode]
|
|
635
|
-
);
|
|
636
|
-
const popoverContent = isOpen && portalContainer ? createPortal(
|
|
637
|
-
/* @__PURE__ */ jsx2(
|
|
638
|
-
"div",
|
|
639
|
-
{
|
|
640
|
-
ref: positionerRef,
|
|
641
|
-
"data-popover": true,
|
|
642
|
-
style: {
|
|
643
|
-
position: "fixed",
|
|
644
|
-
top: 0,
|
|
645
|
-
left: 0,
|
|
646
|
-
transform: "translate3d(0, 0, 0)",
|
|
647
|
-
zIndex: 99999,
|
|
648
|
-
visibility: "hidden",
|
|
649
|
-
pointerEvents: "none",
|
|
650
|
-
willChange: "transform"
|
|
651
|
-
},
|
|
652
|
-
className: "z-[99999]",
|
|
653
|
-
children: /* @__PURE__ */ jsx2(
|
|
654
|
-
"div",
|
|
655
|
-
{
|
|
656
|
-
ref: panelRef,
|
|
657
|
-
"data-state": "open",
|
|
658
|
-
role: modal ? "dialog" : void 0,
|
|
659
|
-
"aria-modal": modal || void 0,
|
|
660
|
-
style: {
|
|
661
|
-
transformOrigin: getTransformOrigin(initialPlacement.side, initialPlacement.align)
|
|
662
|
-
},
|
|
663
|
-
className: cn(
|
|
664
|
-
// shadcn-like enter animation
|
|
665
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
666
|
-
className
|
|
667
|
-
),
|
|
668
|
-
children: /* @__PURE__ */ jsx2(
|
|
669
|
-
"div",
|
|
670
|
-
{
|
|
671
|
-
...contentProps,
|
|
672
|
-
className: cn(
|
|
673
|
-
resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
|
|
674
|
-
"border bg-popover text-popover-foreground shadow-md",
|
|
675
|
-
"backdrop-blur-sm bg-popover/95 border-border/60 p-4",
|
|
676
|
-
contentProps?.className,
|
|
677
|
-
contentClassName
|
|
678
|
-
),
|
|
679
|
-
tabIndex: contentProps?.tabIndex ?? -1,
|
|
680
|
-
children
|
|
681
|
-
}
|
|
682
|
-
)
|
|
683
|
-
}
|
|
684
|
-
)
|
|
685
|
-
}
|
|
686
|
-
),
|
|
687
|
-
portalContainer
|
|
688
|
-
) : null;
|
|
689
|
-
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
690
|
-
(() => {
|
|
691
|
-
return React2.cloneElement(trigger, {
|
|
692
|
-
...triggerProps,
|
|
693
|
-
ref: composedTriggerRef,
|
|
694
|
-
onClick: chainEventHandlers(
|
|
695
|
-
(e) => {
|
|
696
|
-
triggerRef.current = e.currentTarget;
|
|
697
|
-
e.preventDefault();
|
|
698
|
-
e.stopPropagation();
|
|
699
|
-
handleTriggerClick();
|
|
700
|
-
},
|
|
701
|
-
triggerProps.onClick
|
|
702
|
-
),
|
|
703
|
-
onFocus: chainEventHandlers(
|
|
704
|
-
(e) => {
|
|
705
|
-
triggerRef.current = e.currentTarget;
|
|
706
|
-
},
|
|
707
|
-
triggerProps.onFocus
|
|
708
|
-
),
|
|
709
|
-
"aria-expanded": isOpen,
|
|
710
|
-
"aria-haspopup": triggerProps["aria-haspopup"] ?? "dialog"
|
|
711
|
-
});
|
|
712
|
-
})(),
|
|
713
|
-
popoverContent
|
|
714
|
-
] });
|
|
715
|
-
};
|
|
16
|
+
useSmartTranslations
|
|
17
|
+
} from "./chunk-6XQTRIP6.js";
|
|
716
18
|
|
|
717
19
|
// src/components/DropdownMenu.tsx
|
|
718
|
-
import
|
|
20
|
+
import React, { useState } from "react";
|
|
719
21
|
import { ChevronRight } from "lucide-react";
|
|
720
|
-
import { jsx
|
|
721
|
-
var DropdownMenuContext =
|
|
22
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
+
var DropdownMenuContext = React.createContext(null);
|
|
722
24
|
function useDropdownMenuClose() {
|
|
723
|
-
return
|
|
25
|
+
return React.useContext(DropdownMenuContext)?.closeMenu ?? (() => {
|
|
724
26
|
});
|
|
725
27
|
}
|
|
726
28
|
function useResettingIndex(resetToken) {
|
|
727
|
-
const [state, setState] =
|
|
29
|
+
const [state, setState] = React.useState({ resetToken, index: -1 });
|
|
728
30
|
const activeIndex = Object.is(state.resetToken, resetToken) ? state.index : -1;
|
|
729
|
-
const setActiveIndex =
|
|
31
|
+
const setActiveIndex = React.useCallback((nextIndex) => {
|
|
730
32
|
setState((prev) => {
|
|
731
33
|
const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : -1;
|
|
732
34
|
return {
|
|
@@ -753,9 +55,9 @@ var DropdownMenu = ({
|
|
|
753
55
|
borderMode,
|
|
754
56
|
getPortalContainer
|
|
755
57
|
}) => {
|
|
756
|
-
const [internalOpen, setInternalOpen] =
|
|
58
|
+
const [internalOpen, setInternalOpen] = useState(false);
|
|
757
59
|
const open = isOpen !== void 0 ? isOpen : internalOpen;
|
|
758
|
-
const setOpen =
|
|
60
|
+
const setOpen = React.useCallback(
|
|
759
61
|
(nextOpen) => {
|
|
760
62
|
if (isOpen === void 0) {
|
|
761
63
|
setInternalOpen(nextOpen);
|
|
@@ -764,18 +66,18 @@ var DropdownMenu = ({
|
|
|
764
66
|
},
|
|
765
67
|
[isOpen, onOpenChange]
|
|
766
68
|
);
|
|
767
|
-
const triggerRef =
|
|
768
|
-
const menuRef =
|
|
769
|
-
const itemsRef =
|
|
69
|
+
const triggerRef = React.useRef(null);
|
|
70
|
+
const menuRef = React.useRef(null);
|
|
71
|
+
const itemsRef = React.useRef([]);
|
|
770
72
|
const [activeIndex, setActiveIndex] = useResettingIndex(open);
|
|
771
|
-
const parentMenu =
|
|
772
|
-
const hoverCloseTimeoutRef =
|
|
773
|
-
const cancelHoverClose =
|
|
73
|
+
const parentMenu = React.useContext(DropdownMenuContext);
|
|
74
|
+
const hoverCloseTimeoutRef = React.useRef(null);
|
|
75
|
+
const cancelHoverClose = React.useCallback(() => {
|
|
774
76
|
if (hoverCloseTimeoutRef.current === null) return;
|
|
775
77
|
clearTimeout(hoverCloseTimeoutRef.current);
|
|
776
78
|
hoverCloseTimeoutRef.current = null;
|
|
777
79
|
}, []);
|
|
778
|
-
const scheduleHoverClose =
|
|
80
|
+
const scheduleHoverClose = React.useCallback(() => {
|
|
779
81
|
if (!openOnHover) return;
|
|
780
82
|
cancelHoverClose();
|
|
781
83
|
hoverCloseTimeoutRef.current = setTimeout(() => {
|
|
@@ -783,18 +85,18 @@ var DropdownMenu = ({
|
|
|
783
85
|
setOpen(false);
|
|
784
86
|
}, hoverCloseDelay);
|
|
785
87
|
}, [cancelHoverClose, hoverCloseDelay, openOnHover, setOpen]);
|
|
786
|
-
|
|
787
|
-
const closeMenu =
|
|
88
|
+
React.useEffect(() => () => cancelHoverClose(), [cancelHoverClose]);
|
|
89
|
+
const closeMenu = React.useCallback(() => {
|
|
788
90
|
cancelHoverClose();
|
|
789
91
|
setOpen(false);
|
|
790
92
|
parentMenu?.closeMenu();
|
|
791
93
|
}, [cancelHoverClose, parentMenu, setOpen]);
|
|
792
|
-
const getEnabledMenuItems =
|
|
94
|
+
const getEnabledMenuItems = React.useCallback(() => {
|
|
793
95
|
const menuEl = menuRef.current;
|
|
794
96
|
if (!menuEl) return [];
|
|
795
97
|
return Array.from(menuEl.querySelectorAll("[data-dropdown-menu-item]")).filter((el) => !el.disabled);
|
|
796
98
|
}, []);
|
|
797
|
-
const focusMenuItem =
|
|
99
|
+
const focusMenuItem = React.useCallback((index) => {
|
|
798
100
|
const enabled = getEnabledMenuItems();
|
|
799
101
|
const item = enabled[index];
|
|
800
102
|
if (!item) return;
|
|
@@ -804,7 +106,7 @@ var DropdownMenu = ({
|
|
|
804
106
|
}, [getEnabledMenuItems, setActiveIndex]);
|
|
805
107
|
const globalConfig = useUnderverseUIConfig();
|
|
806
108
|
const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
|
|
807
|
-
|
|
109
|
+
React.useEffect(() => {
|
|
808
110
|
if (!open) return;
|
|
809
111
|
const handleKeyNav = (e) => {
|
|
810
112
|
const triggerEl = triggerRef.current;
|
|
@@ -845,7 +147,7 @@ var DropdownMenu = ({
|
|
|
845
147
|
menuDocument.removeEventListener("keydown", handleKeyNav, true);
|
|
846
148
|
};
|
|
847
149
|
}, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
|
|
848
|
-
const menuContext =
|
|
150
|
+
const menuContext = React.useMemo(
|
|
849
151
|
() => ({
|
|
850
152
|
closeMenu,
|
|
851
153
|
closeOnSelect,
|
|
@@ -860,7 +162,7 @@ var DropdownMenu = ({
|
|
|
860
162
|
closeMenu();
|
|
861
163
|
}
|
|
862
164
|
};
|
|
863
|
-
const menuBody = /* @__PURE__ */
|
|
165
|
+
const menuBody = /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: menuContext, children: /* @__PURE__ */ jsx(
|
|
864
166
|
"div",
|
|
865
167
|
{
|
|
866
168
|
ref: menuRef,
|
|
@@ -878,7 +180,7 @@ var DropdownMenu = ({
|
|
|
878
180
|
} : void 0,
|
|
879
181
|
children: items ? items.map((item, index) => {
|
|
880
182
|
const IconComponent = item.icon;
|
|
881
|
-
return /* @__PURE__ */
|
|
183
|
+
return /* @__PURE__ */ jsxs(
|
|
882
184
|
"button",
|
|
883
185
|
{
|
|
884
186
|
ref: (el) => {
|
|
@@ -902,7 +204,7 @@ var DropdownMenu = ({
|
|
|
902
204
|
item.destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
|
|
903
205
|
),
|
|
904
206
|
children: [
|
|
905
|
-
IconComponent && /* @__PURE__ */
|
|
207
|
+
IconComponent && /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true", className: "h-4 w-4" }),
|
|
906
208
|
item.label
|
|
907
209
|
]
|
|
908
210
|
},
|
|
@@ -919,11 +221,11 @@ var DropdownMenu = ({
|
|
|
919
221
|
onMouseEnter: triggerOnMouseEnter,
|
|
920
222
|
onMouseLeave: triggerOnMouseLeave
|
|
921
223
|
} = triggerProps;
|
|
922
|
-
const setTriggerNode =
|
|
224
|
+
const setTriggerNode = React.useCallback((node) => {
|
|
923
225
|
setRefValue(childRef, node);
|
|
924
226
|
triggerRef.current = node;
|
|
925
227
|
}, [childRef]);
|
|
926
|
-
const handleTriggerKeyDown =
|
|
228
|
+
const handleTriggerKeyDown = React.useCallback((event) => {
|
|
927
229
|
const triggerWindow = event.currentTarget.ownerDocument.defaultView;
|
|
928
230
|
const scheduleFrame = (callback) => {
|
|
929
231
|
if (triggerWindow) triggerWindow.requestAnimationFrame(callback);
|
|
@@ -948,14 +250,14 @@ var DropdownMenu = ({
|
|
|
948
250
|
}
|
|
949
251
|
triggerOnKeyDown?.(event);
|
|
950
252
|
}, [disabled, focusMenuItem, getEnabledMenuItems, setOpen, triggerOnKeyDown]);
|
|
951
|
-
const handleTriggerClick =
|
|
253
|
+
const handleTriggerClick = React.useCallback((event) => {
|
|
952
254
|
if (openOnHover && !disabled) {
|
|
953
255
|
cancelHoverClose();
|
|
954
256
|
setOpen(true);
|
|
955
257
|
}
|
|
956
258
|
triggerOnClick?.(event);
|
|
957
259
|
}, [cancelHoverClose, disabled, openOnHover, setOpen, triggerOnClick]);
|
|
958
|
-
const handleTriggerMouseEnter =
|
|
260
|
+
const handleTriggerMouseEnter = React.useCallback((event) => {
|
|
959
261
|
if (openOnHover && !disabled) {
|
|
960
262
|
cancelHoverClose();
|
|
961
263
|
parentMenu?.cancelHoverClose();
|
|
@@ -963,11 +265,11 @@ var DropdownMenu = ({
|
|
|
963
265
|
}
|
|
964
266
|
triggerOnMouseEnter?.(event);
|
|
965
267
|
}, [cancelHoverClose, disabled, openOnHover, parentMenu, setOpen, triggerOnMouseEnter]);
|
|
966
|
-
const handleTriggerMouseLeave =
|
|
268
|
+
const handleTriggerMouseLeave = React.useCallback((event) => {
|
|
967
269
|
scheduleHoverClose();
|
|
968
270
|
triggerOnMouseLeave?.(event);
|
|
969
271
|
}, [scheduleHoverClose, triggerOnMouseLeave]);
|
|
970
|
-
const enhancedTrigger =
|
|
272
|
+
const enhancedTrigger = React.cloneElement(trigger, {
|
|
971
273
|
...triggerProps,
|
|
972
274
|
ref: setTriggerNode,
|
|
973
275
|
"aria-haspopup": "menu",
|
|
@@ -977,7 +279,7 @@ var DropdownMenu = ({
|
|
|
977
279
|
onMouseEnter: handleTriggerMouseEnter,
|
|
978
280
|
onMouseLeave: handleTriggerMouseLeave
|
|
979
281
|
});
|
|
980
|
-
return /* @__PURE__ */
|
|
282
|
+
return /* @__PURE__ */ jsx(
|
|
981
283
|
Popover,
|
|
982
284
|
{
|
|
983
285
|
open,
|
|
@@ -1006,11 +308,11 @@ var DropdownMenuItem = ({
|
|
|
1006
308
|
closeOnSelect,
|
|
1007
309
|
borderMode
|
|
1008
310
|
}) => {
|
|
1009
|
-
const menu =
|
|
311
|
+
const menu = React.useContext(DropdownMenuContext);
|
|
1010
312
|
const shouldCloseOnSelect = closeOnSelect ?? menu?.closeOnSelect ?? false;
|
|
1011
313
|
const globalConfig = useUnderverseUIConfig();
|
|
1012
314
|
const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
|
|
1013
|
-
return /* @__PURE__ */
|
|
315
|
+
return /* @__PURE__ */ jsxs(
|
|
1014
316
|
"button",
|
|
1015
317
|
{
|
|
1016
318
|
type: "button",
|
|
@@ -1036,26 +338,26 @@ var DropdownMenuItem = ({
|
|
|
1036
338
|
className
|
|
1037
339
|
),
|
|
1038
340
|
children: [
|
|
1039
|
-
Icon && /* @__PURE__ */
|
|
1040
|
-
/* @__PURE__ */
|
|
1041
|
-
label && /* @__PURE__ */
|
|
1042
|
-
description && /* @__PURE__ */
|
|
341
|
+
Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn("w-4 h-4 shrink-0", active ? "text-primary" : "opacity-60 group-hover:opacity-100") }),
|
|
342
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
|
|
343
|
+
label && /* @__PURE__ */ jsx("div", { className: cn("font-medium", description && "leading-tight"), children: label }),
|
|
344
|
+
description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description }),
|
|
1043
345
|
children
|
|
1044
346
|
] }),
|
|
1045
|
-
shortcut && /* @__PURE__ */
|
|
1046
|
-
active && /* @__PURE__ */
|
|
347
|
+
shortcut && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground opacity-60", children: shortcut }),
|
|
348
|
+
active && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "w-4 h-4 text-primary shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) })
|
|
1047
349
|
]
|
|
1048
350
|
}
|
|
1049
351
|
);
|
|
1050
352
|
};
|
|
1051
|
-
var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */
|
|
353
|
+
var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ jsx("div", { role: "separator", className: cn("h-px bg-border my-1", className) });
|
|
1052
354
|
var DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, getPortalContainer, children }) => {
|
|
1053
355
|
const globalConfig = useUnderverseUIConfig();
|
|
1054
356
|
const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
|
|
1055
|
-
return /* @__PURE__ */
|
|
357
|
+
return /* @__PURE__ */ jsx(
|
|
1056
358
|
DropdownMenu,
|
|
1057
359
|
{
|
|
1058
|
-
trigger: /* @__PURE__ */
|
|
360
|
+
trigger: /* @__PURE__ */ jsxs(
|
|
1059
361
|
"button",
|
|
1060
362
|
{
|
|
1061
363
|
type: "button",
|
|
@@ -1072,9 +374,9 @@ var DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, getPortalConta
|
|
|
1072
374
|
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
1073
375
|
),
|
|
1074
376
|
children: [
|
|
1075
|
-
Icon && /* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1077
|
-
/* @__PURE__ */
|
|
377
|
+
Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "w-4 h-4 shrink-0 opacity-60" }),
|
|
378
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
|
|
379
|
+
/* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "w-3 h-3 opacity-50" })
|
|
1078
380
|
]
|
|
1079
381
|
}
|
|
1080
382
|
),
|
|
@@ -1097,10 +399,10 @@ var SelectDropdown = ({
|
|
|
1097
399
|
}) => {
|
|
1098
400
|
const globalConfig = useUnderverseUIConfig();
|
|
1099
401
|
const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
|
|
1100
|
-
return /* @__PURE__ */
|
|
402
|
+
return /* @__PURE__ */ jsx(
|
|
1101
403
|
DropdownMenu,
|
|
1102
404
|
{
|
|
1103
|
-
trigger: /* @__PURE__ */
|
|
405
|
+
trigger: /* @__PURE__ */ jsxs(
|
|
1104
406
|
"button",
|
|
1105
407
|
{
|
|
1106
408
|
className: cn(
|
|
@@ -1113,8 +415,8 @@ var SelectDropdown = ({
|
|
|
1113
415
|
className
|
|
1114
416
|
),
|
|
1115
417
|
children: [
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
418
|
+
/* @__PURE__ */ jsx("span", { className: cn(formControlValueClass, "max-w-64 text-foreground/90"), children: value || placeholder }),
|
|
419
|
+
/* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "shrink-0 opacity-70", children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1118
420
|
]
|
|
1119
421
|
}
|
|
1120
422
|
),
|
|
@@ -2305,9 +1607,9 @@ var ClipboardImages = Extension.create({
|
|
|
2305
1607
|
});
|
|
2306
1608
|
|
|
2307
1609
|
// src/components/UEditor/inputs.tsx
|
|
2308
|
-
import { useEffect
|
|
1610
|
+
import { useEffect, useId, useRef, useState as useState2 } from "react";
|
|
2309
1611
|
import { Check, X } from "lucide-react";
|
|
2310
|
-
import { jsx as
|
|
1612
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2311
1613
|
function normalizeUrl(raw) {
|
|
2312
1614
|
return sanitizeUEditorUrl(raw, "link");
|
|
2313
1615
|
}
|
|
@@ -2317,12 +1619,12 @@ var LinkInput = ({
|
|
|
2317
1619
|
initialUrl = ""
|
|
2318
1620
|
}) => {
|
|
2319
1621
|
const t = useSmartTranslations("UEditor");
|
|
2320
|
-
const [url, setUrl] =
|
|
2321
|
-
const [error, setError] =
|
|
2322
|
-
const inputRef =
|
|
1622
|
+
const [url, setUrl] = useState2(initialUrl);
|
|
1623
|
+
const [error, setError] = useState2("");
|
|
1624
|
+
const inputRef = useRef(null);
|
|
2323
1625
|
const inputId = useId();
|
|
2324
1626
|
const errorId = useId();
|
|
2325
|
-
|
|
1627
|
+
useEffect(() => {
|
|
2326
1628
|
inputRef.current?.focus();
|
|
2327
1629
|
inputRef.current?.select();
|
|
2328
1630
|
}, []);
|
|
@@ -2336,10 +1638,10 @@ var LinkInput = ({
|
|
|
2336
1638
|
setError("");
|
|
2337
1639
|
onSubmit(normalized);
|
|
2338
1640
|
};
|
|
2339
|
-
return /* @__PURE__ */
|
|
2340
|
-
/* @__PURE__ */
|
|
2341
|
-
/* @__PURE__ */
|
|
2342
|
-
/* @__PURE__ */
|
|
1641
|
+
return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "p-2", children: [
|
|
1642
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: "sr-only", children: t("toolbar.link") }),
|
|
1643
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
|
|
1644
|
+
/* @__PURE__ */ jsx2(
|
|
2343
1645
|
"input",
|
|
2344
1646
|
{
|
|
2345
1647
|
ref: inputRef,
|
|
@@ -2359,22 +1661,22 @@ var LinkInput = ({
|
|
|
2359
1661
|
className: `flex-1 rounded-lg bg-muted/50 px-3 py-2 text-sm ${formControlOutlineClass} aria-invalid:border-destructive`
|
|
2360
1662
|
}
|
|
2361
1663
|
),
|
|
2362
|
-
/* @__PURE__ */
|
|
2363
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ jsx2("button", { type: "submit", "aria-label": t("toolbar.link"), className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ jsx2(Check, { "aria-hidden": "true", className: "w-4 h-4" }) }),
|
|
1665
|
+
/* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t("imageInput.cancelBtn"), onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ jsx2(X, { "aria-hidden": "true", className: "w-4 h-4" }) })
|
|
2364
1666
|
] }),
|
|
2365
|
-
error ? /* @__PURE__ */
|
|
1667
|
+
error ? /* @__PURE__ */ jsx2("p", { id: errorId, role: "alert", className: "mt-1.5 px-1 text-xs text-destructive", children: error }) : null
|
|
2366
1668
|
] });
|
|
2367
1669
|
};
|
|
2368
1670
|
var ImageInput = ({ onSubmit, onCancel }) => {
|
|
2369
1671
|
const t = useSmartTranslations("UEditor");
|
|
2370
|
-
const [url, setUrl] =
|
|
2371
|
-
const [alt, setAlt] =
|
|
2372
|
-
const [error, setError] =
|
|
2373
|
-
const inputRef =
|
|
1672
|
+
const [url, setUrl] = useState2("");
|
|
1673
|
+
const [alt, setAlt] = useState2("");
|
|
1674
|
+
const [error, setError] = useState2("");
|
|
1675
|
+
const inputRef = useRef(null);
|
|
2374
1676
|
const urlId = useId();
|
|
2375
1677
|
const altId = useId();
|
|
2376
1678
|
const errorId = useId();
|
|
2377
|
-
|
|
1679
|
+
useEffect(() => {
|
|
2378
1680
|
inputRef.current?.focus();
|
|
2379
1681
|
}, []);
|
|
2380
1682
|
const handleSubmit = (e) => {
|
|
@@ -2387,10 +1689,10 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
2387
1689
|
setError(t("imageInput.invalid"));
|
|
2388
1690
|
}
|
|
2389
1691
|
};
|
|
2390
|
-
return /* @__PURE__ */
|
|
2391
|
-
/* @__PURE__ */
|
|
2392
|
-
/* @__PURE__ */
|
|
2393
|
-
/* @__PURE__ */
|
|
1692
|
+
return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
|
|
1693
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
1694
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: urlId, className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
|
|
1695
|
+
/* @__PURE__ */ jsx2(
|
|
2394
1696
|
"input",
|
|
2395
1697
|
{
|
|
2396
1698
|
ref: inputRef,
|
|
@@ -2411,9 +1713,9 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
2411
1713
|
}
|
|
2412
1714
|
)
|
|
2413
1715
|
] }),
|
|
2414
|
-
/* @__PURE__ */
|
|
2415
|
-
/* @__PURE__ */
|
|
2416
|
-
/* @__PURE__ */
|
|
1716
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
1717
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: altId, className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
|
|
1718
|
+
/* @__PURE__ */ jsx2(
|
|
2417
1719
|
"input",
|
|
2418
1720
|
{
|
|
2419
1721
|
id: altId,
|
|
@@ -2427,9 +1729,9 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
2427
1729
|
}
|
|
2428
1730
|
)
|
|
2429
1731
|
] }),
|
|
2430
|
-
error ? /* @__PURE__ */
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
1732
|
+
error ? /* @__PURE__ */ jsx2("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error }) : null,
|
|
1733
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
|
|
1734
|
+
/* @__PURE__ */ jsx2(
|
|
2433
1735
|
"button",
|
|
2434
1736
|
{
|
|
2435
1737
|
type: "submit",
|
|
@@ -2438,7 +1740,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
2438
1740
|
children: t("imageInput.addBtn")
|
|
2439
1741
|
}
|
|
2440
1742
|
),
|
|
2441
|
-
/* @__PURE__ */
|
|
1743
|
+
/* @__PURE__ */ jsx2("button", { type: "button", onClick: onCancel, className: "px-4 py-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: t("imageInput.cancelBtn") })
|
|
2442
1744
|
] })
|
|
2443
1745
|
] });
|
|
2444
1746
|
};
|
|
@@ -2464,7 +1766,7 @@ function applyEditorLink(editor, href) {
|
|
|
2464
1766
|
}
|
|
2465
1767
|
|
|
2466
1768
|
// src/components/UEditor/toolbar.tsx
|
|
2467
|
-
import
|
|
1769
|
+
import React5, { useRef as useRef3, useState as useState3 } from "react";
|
|
2468
1770
|
import { useEditorState } from "@tiptap/react";
|
|
2469
1771
|
import {
|
|
2470
1772
|
AlignCenter,
|
|
@@ -2503,14 +1805,14 @@ import {
|
|
|
2503
1805
|
import { setCellAttr } from "@tiptap/pm/tables";
|
|
2504
1806
|
|
|
2505
1807
|
// src/components/UEditor/colors.tsx
|
|
2506
|
-
import
|
|
1808
|
+
import React4, { useMemo, useRef as useRef2 } from "react";
|
|
2507
1809
|
import { Check as Check2, Palette, Paintbrush, Grid } from "lucide-react";
|
|
2508
1810
|
|
|
2509
1811
|
// src/components/UEditor/figma-toolbar-icons.tsx
|
|
2510
|
-
import
|
|
2511
|
-
import { jsx as
|
|
1812
|
+
import React3 from "react";
|
|
1813
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
2512
1814
|
function createToolbarIcon(displayName, width, height, path) {
|
|
2513
|
-
const Icon =
|
|
1815
|
+
const Icon = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
2514
1816
|
"svg",
|
|
2515
1817
|
{
|
|
2516
1818
|
ref,
|
|
@@ -2521,7 +1823,7 @@ function createToolbarIcon(displayName, width, height, path) {
|
|
|
2521
1823
|
fill: "currentColor",
|
|
2522
1824
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2523
1825
|
...props,
|
|
2524
|
-
children: /* @__PURE__ */
|
|
1826
|
+
children: /* @__PURE__ */ jsx3("path", { d: path })
|
|
2525
1827
|
}
|
|
2526
1828
|
));
|
|
2527
1829
|
Icon.displayName = displayName;
|
|
@@ -2533,7 +1835,7 @@ var FigmaChevronDownIcon = createToolbarIcon(
|
|
|
2533
1835
|
512,
|
|
2534
1836
|
"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
|
|
2535
1837
|
);
|
|
2536
|
-
var FigmaTextStyleIcon = ({ className, ...props }) => /* @__PURE__ */
|
|
1838
|
+
var FigmaTextStyleIcon = ({ className, ...props }) => /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", className, fill: "currentColor", ...props, children: /* @__PURE__ */ jsx3("path", { d: "M4 4.25C4 3.56 4.56 3 5.25 3h13.5C19.44 3 20 3.56 20 4.25v2.5a1 1 0 1 1-2 0V5h-5v14h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2V5H6v1.75a1 1 0 1 1-2 0v-2.5Z" }) });
|
|
2537
1839
|
var FigmaLineHeightIcon = createToolbarIcon(
|
|
2538
1840
|
"FigmaLineHeightIcon",
|
|
2539
1841
|
576,
|
|
@@ -2650,12 +1952,12 @@ var FigmaHighlighterIcon = createToolbarIcon(
|
|
|
2650
1952
|
);
|
|
2651
1953
|
|
|
2652
1954
|
// src/components/UEditor/colors.tsx
|
|
2653
|
-
import { jsx as
|
|
1955
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
2654
1956
|
var TextColorIcon = ({ color }) => {
|
|
2655
1957
|
const underlineColor = color && color !== "inherit" ? color : "currentColor";
|
|
2656
|
-
return /* @__PURE__ */
|
|
2657
|
-
/* @__PURE__ */
|
|
2658
|
-
/* @__PURE__ */
|
|
1958
|
+
return /* @__PURE__ */ jsxs3("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
|
|
1959
|
+
/* @__PURE__ */ jsx4("span", { className: "text-[15px] font-semibold leading-none", children: "A" }),
|
|
1960
|
+
/* @__PURE__ */ jsx4(
|
|
2659
1961
|
"span",
|
|
2660
1962
|
{
|
|
2661
1963
|
"aria-hidden": "true",
|
|
@@ -2667,9 +1969,9 @@ var TextColorIcon = ({ color }) => {
|
|
|
2667
1969
|
};
|
|
2668
1970
|
var HighlightColorIcon = ({ color }) => {
|
|
2669
1971
|
const underlineColor = color || "currentColor";
|
|
2670
|
-
return /* @__PURE__ */
|
|
2671
|
-
/* @__PURE__ */
|
|
2672
|
-
/* @__PURE__ */
|
|
1972
|
+
return /* @__PURE__ */ jsxs3("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
|
|
1973
|
+
/* @__PURE__ */ jsx4(FigmaHighlighterIcon, { className: "h-4 w-4" }),
|
|
1974
|
+
/* @__PURE__ */ jsx4(
|
|
2673
1975
|
"span",
|
|
2674
1976
|
{
|
|
2675
1977
|
"aria-hidden": "true",
|
|
@@ -2681,9 +1983,9 @@ var HighlightColorIcon = ({ color }) => {
|
|
|
2681
1983
|
};
|
|
2682
1984
|
var CellBgColorIcon = ({ color }) => {
|
|
2683
1985
|
const underlineColor = color && color !== "inherit" ? color : "currentColor";
|
|
2684
|
-
return /* @__PURE__ */
|
|
2685
|
-
/* @__PURE__ */
|
|
2686
|
-
/* @__PURE__ */
|
|
1986
|
+
return /* @__PURE__ */ jsxs3("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
|
|
1987
|
+
/* @__PURE__ */ jsx4(Paintbrush, { className: "h-4 w-4" }),
|
|
1988
|
+
/* @__PURE__ */ jsx4(
|
|
2687
1989
|
"span",
|
|
2688
1990
|
{
|
|
2689
1991
|
"aria-hidden": "true",
|
|
@@ -2695,9 +1997,9 @@ var CellBgColorIcon = ({ color }) => {
|
|
|
2695
1997
|
};
|
|
2696
1998
|
var CellBorderIcon = ({ color }) => {
|
|
2697
1999
|
const underlineColor = color && color !== "inherit" ? color : "currentColor";
|
|
2698
|
-
return /* @__PURE__ */
|
|
2699
|
-
/* @__PURE__ */
|
|
2700
|
-
/* @__PURE__ */
|
|
2000
|
+
return /* @__PURE__ */ jsxs3("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
|
|
2001
|
+
/* @__PURE__ */ jsx4(Grid, { className: "h-4 w-4" }),
|
|
2002
|
+
/* @__PURE__ */ jsx4(
|
|
2701
2003
|
"span",
|
|
2702
2004
|
{
|
|
2703
2005
|
"aria-hidden": "true",
|
|
@@ -2783,7 +2085,7 @@ function getSwatchCheckClass(color) {
|
|
|
2783
2085
|
}
|
|
2784
2086
|
var useEditorColors = () => {
|
|
2785
2087
|
const t = useSmartTranslations("UEditor");
|
|
2786
|
-
const textColors =
|
|
2088
|
+
const textColors = useMemo(
|
|
2787
2089
|
() => [
|
|
2788
2090
|
{ name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
|
|
2789
2091
|
{ name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
|
|
@@ -2797,7 +2099,7 @@ var useEditorColors = () => {
|
|
|
2797
2099
|
],
|
|
2798
2100
|
[t]
|
|
2799
2101
|
);
|
|
2800
|
-
const highlightColors =
|
|
2102
|
+
const highlightColors = useMemo(
|
|
2801
2103
|
() => [
|
|
2802
2104
|
{ name: t("colors.default"), color: "", cssClass: "" },
|
|
2803
2105
|
{ name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
|
|
@@ -2822,12 +2124,12 @@ var EditorColorPalette = ({
|
|
|
2822
2124
|
label
|
|
2823
2125
|
}) => {
|
|
2824
2126
|
const t = useSmartTranslations("UEditor");
|
|
2825
|
-
const colorInputRef =
|
|
2127
|
+
const colorInputRef = useRef2(null);
|
|
2826
2128
|
const automaticColor = colors[0]?.color ?? "";
|
|
2827
2129
|
const paletteColors = colors.slice(1);
|
|
2828
2130
|
const customColorSelect = onCustomColorSelect ?? onSelect;
|
|
2829
|
-
const [hexInput, setHexInput] =
|
|
2830
|
-
|
|
2131
|
+
const [hexInput, setHexInput] = React4.useState(currentColor.startsWith("#") ? currentColor : "");
|
|
2132
|
+
React4.useEffect(() => {
|
|
2831
2133
|
setHexInput(currentColor.startsWith("#") ? currentColor : "");
|
|
2832
2134
|
}, [currentColor]);
|
|
2833
2135
|
const commitHex = (val) => {
|
|
@@ -2838,20 +2140,20 @@ var EditorColorPalette = ({
|
|
|
2838
2140
|
customColorSelect(formatted);
|
|
2839
2141
|
}
|
|
2840
2142
|
};
|
|
2841
|
-
|
|
2143
|
+
React4.useEffect(() => {
|
|
2842
2144
|
const input = colorInputRef.current;
|
|
2843
2145
|
if (!input) return;
|
|
2844
2146
|
const commitColor = () => customColorSelect(input.value);
|
|
2845
2147
|
input.addEventListener("change", commitColor);
|
|
2846
2148
|
return () => input.removeEventListener("change", commitColor);
|
|
2847
2149
|
}, [customColorSelect]);
|
|
2848
|
-
|
|
2150
|
+
React4.useEffect(() => {
|
|
2849
2151
|
const input = colorInputRef.current;
|
|
2850
2152
|
if (input) input.value = currentColor.startsWith("#") ? currentColor : "#000000";
|
|
2851
2153
|
}, [currentColor]);
|
|
2852
|
-
return /* @__PURE__ */
|
|
2853
|
-
/* @__PURE__ */
|
|
2854
|
-
/* @__PURE__ */
|
|
2154
|
+
return /* @__PURE__ */ jsxs3("div", { className: "w-56 p-2", "data-ueditor-keep-open": true, children: [
|
|
2155
|
+
/* @__PURE__ */ jsx4("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
|
|
2156
|
+
/* @__PURE__ */ jsxs3(
|
|
2855
2157
|
"button",
|
|
2856
2158
|
{
|
|
2857
2159
|
type: "button",
|
|
@@ -2863,12 +2165,12 @@ var EditorColorPalette = ({
|
|
|
2863
2165
|
currentColor === automaticColor ? "border-primary text-primary" : "border-transparent text-foreground"
|
|
2864
2166
|
),
|
|
2865
2167
|
children: [
|
|
2866
|
-
/* @__PURE__ */
|
|
2867
|
-
/* @__PURE__ */
|
|
2168
|
+
/* @__PURE__ */ jsx4("span", { className: "flex h-5 w-5 items-center justify-center rounded border border-border bg-background", children: currentColor === automaticColor && /* @__PURE__ */ jsx4(Check2, { className: "h-3.5 w-3.5" }) }),
|
|
2169
|
+
/* @__PURE__ */ jsx4("span", { className: "flex-1 text-center", children: t("colors.automatic") })
|
|
2868
2170
|
]
|
|
2869
2171
|
}
|
|
2870
2172
|
),
|
|
2871
|
-
/* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ jsx4("div", { className: "mt-2 grid grid-cols-8 gap-1", children: paletteColors.map((c) => /* @__PURE__ */ jsx4(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ jsx4(
|
|
2872
2174
|
"button",
|
|
2873
2175
|
{
|
|
2874
2176
|
type: "button",
|
|
@@ -2880,19 +2182,19 @@ var EditorColorPalette = ({
|
|
|
2880
2182
|
currentColor === c.color ? "border-primary ring-2 ring-primary/25" : "border-border/70"
|
|
2881
2183
|
),
|
|
2882
2184
|
style: { backgroundColor: c.color || "transparent" },
|
|
2883
|
-
children: currentColor === c.color && /* @__PURE__ */
|
|
2185
|
+
children: currentColor === c.color && /* @__PURE__ */ jsx4("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx4(Check2, { className: cn("h-3.5 w-3.5", getSwatchCheckClass(c.color)) }) })
|
|
2884
2186
|
}
|
|
2885
2187
|
) }, `${c.name}-${c.color}`)) }),
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
/* @__PURE__ */
|
|
2888
|
-
/* @__PURE__ */
|
|
2188
|
+
/* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center gap-2", children: [
|
|
2189
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex h-8 flex-1 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-2", children: [
|
|
2190
|
+
/* @__PURE__ */ jsx4(
|
|
2889
2191
|
"span",
|
|
2890
2192
|
{
|
|
2891
2193
|
className: "h-4 w-4 shrink-0 rounded-[2px] border border-border",
|
|
2892
2194
|
style: { backgroundColor: hexInput.startsWith("#") ? hexInput : currentColor.startsWith("#") ? currentColor : "transparent" }
|
|
2893
2195
|
}
|
|
2894
2196
|
),
|
|
2895
|
-
/* @__PURE__ */
|
|
2197
|
+
/* @__PURE__ */ jsx4(
|
|
2896
2198
|
"input",
|
|
2897
2199
|
{
|
|
2898
2200
|
type: "text",
|
|
@@ -2913,7 +2215,7 @@ var EditorColorPalette = ({
|
|
|
2913
2215
|
}
|
|
2914
2216
|
)
|
|
2915
2217
|
] }),
|
|
2916
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsx4(
|
|
2917
2219
|
"button",
|
|
2918
2220
|
{
|
|
2919
2221
|
type: "button",
|
|
@@ -2921,11 +2223,11 @@ var EditorColorPalette = ({
|
|
|
2921
2223
|
onClick: () => colorInputRef.current?.click(),
|
|
2922
2224
|
title: t("colors.moreColors"),
|
|
2923
2225
|
className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-input bg-muted/30 text-foreground transition-colors hover:bg-muted",
|
|
2924
|
-
children: /* @__PURE__ */
|
|
2226
|
+
children: /* @__PURE__ */ jsx4(Palette, { className: "h-4 w-4 text-muted-foreground" })
|
|
2925
2227
|
}
|
|
2926
2228
|
)
|
|
2927
2229
|
] }),
|
|
2928
|
-
/* @__PURE__ */
|
|
2230
|
+
/* @__PURE__ */ jsx4(
|
|
2929
2231
|
"input",
|
|
2930
2232
|
{
|
|
2931
2233
|
ref: colorInputRef,
|
|
@@ -4324,7 +3626,7 @@ function getDefaultLetterSpacings() {
|
|
|
4324
3626
|
}
|
|
4325
3627
|
|
|
4326
3628
|
// src/components/UEditor/toolbar.tsx
|
|
4327
|
-
import { Fragment
|
|
3629
|
+
import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
4328
3630
|
function getTableAnchorPos(editor) {
|
|
4329
3631
|
const tableInfo = findTableNodeInfoFromState(editor.state);
|
|
4330
3632
|
if (tableInfo) return editor.state.selection.from;
|
|
@@ -4430,7 +3732,7 @@ function getEditorUiRenderState(editor) {
|
|
|
4430
3732
|
editorUiRenderStateCache.set(editor, { state, value });
|
|
4431
3733
|
return value;
|
|
4432
3734
|
}
|
|
4433
|
-
var EditorUiRenderStateContext =
|
|
3735
|
+
var EditorUiRenderStateContext = React5.createContext(null);
|
|
4434
3736
|
function EditorUiRenderStateProvider({
|
|
4435
3737
|
children,
|
|
4436
3738
|
editor
|
|
@@ -4439,10 +3741,10 @@ function EditorUiRenderStateProvider({
|
|
|
4439
3741
|
editor,
|
|
4440
3742
|
selector: ({ editor: currentEditor }) => getEditorUiRenderState(currentEditor)
|
|
4441
3743
|
});
|
|
4442
|
-
return /* @__PURE__ */
|
|
3744
|
+
return /* @__PURE__ */ jsx5(EditorUiRenderStateContext.Provider, { value: { editor, value }, children });
|
|
4443
3745
|
}
|
|
4444
3746
|
function useSharedEditorUiRenderState(editor) {
|
|
4445
|
-
const context =
|
|
3747
|
+
const context = React5.useContext(EditorUiRenderStateContext);
|
|
4446
3748
|
if (!context || context.editor !== editor) {
|
|
4447
3749
|
throw new Error("UEditor chrome must be rendered inside EditorUiRenderStateProvider");
|
|
4448
3750
|
}
|
|
@@ -4451,8 +3753,8 @@ function useSharedEditorUiRenderState(editor) {
|
|
|
4451
3753
|
function formatTableInsertLabel(template, rows, cols) {
|
|
4452
3754
|
return template.replace("{rows}", String(rows)).replace("{cols}", String(cols));
|
|
4453
3755
|
}
|
|
4454
|
-
var ToolbarButton =
|
|
4455
|
-
const button = /* @__PURE__ */
|
|
3756
|
+
var ToolbarButton = React5.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
|
|
3757
|
+
const button = /* @__PURE__ */ jsx5(
|
|
4456
3758
|
"button",
|
|
4457
3759
|
{
|
|
4458
3760
|
ref,
|
|
@@ -4477,28 +3779,28 @@ var ToolbarButton = React7.forwardRef(({ onClick, onMouseDown, active, disabled,
|
|
|
4477
3779
|
}
|
|
4478
3780
|
);
|
|
4479
3781
|
if (title) {
|
|
4480
|
-
return /* @__PURE__ */
|
|
3782
|
+
return /* @__PURE__ */ jsx5(Tooltip, { content: title, placement: "top", delay: { open: 200, close: 0 }, children: button });
|
|
4481
3783
|
}
|
|
4482
3784
|
return button;
|
|
4483
3785
|
});
|
|
4484
3786
|
ToolbarButton.displayName = "ToolbarButton";
|
|
4485
|
-
var ToolbarDivider = () => /* @__PURE__ */
|
|
3787
|
+
var ToolbarDivider = () => /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", className: "mx-1 h-5 w-px shrink-0 bg-[rgba(123,129,132,0.24)]" });
|
|
4486
3788
|
var TableInsertGrid = ({
|
|
4487
3789
|
insertLabel,
|
|
4488
3790
|
previewTemplate,
|
|
4489
3791
|
onInsert
|
|
4490
3792
|
}) => {
|
|
4491
|
-
const [selection, setSelection] =
|
|
3793
|
+
const [selection, setSelection] = React5.useState({ rows: 3, cols: 3 });
|
|
4492
3794
|
const maxRows = 8;
|
|
4493
3795
|
const maxCols = 8;
|
|
4494
|
-
return /* @__PURE__ */
|
|
4495
|
-
/* @__PURE__ */
|
|
4496
|
-
/* @__PURE__ */
|
|
3796
|
+
return /* @__PURE__ */ jsxs4("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
|
|
3797
|
+
/* @__PURE__ */ jsx5("div", { className: "mb-2 text-sm font-medium text-foreground", children: formatTableInsertLabel(previewTemplate, selection.rows, selection.cols) }),
|
|
3798
|
+
/* @__PURE__ */ jsx5("div", { className: "grid grid-cols-8 gap-1", role: "grid", "aria-label": insertLabel, children: Array.from({ length: maxRows }).map(
|
|
4497
3799
|
(_, rowIndex) => Array.from({ length: maxCols }).map((__, colIndex) => {
|
|
4498
3800
|
const rows = rowIndex + 1;
|
|
4499
3801
|
const cols = colIndex + 1;
|
|
4500
3802
|
const active = rows <= selection.rows && cols <= selection.cols;
|
|
4501
|
-
return /* @__PURE__ */
|
|
3803
|
+
return /* @__PURE__ */ jsx5(
|
|
4502
3804
|
"button",
|
|
4503
3805
|
{
|
|
4504
3806
|
type: "button",
|
|
@@ -4528,7 +3830,7 @@ var TableInsertGrid = ({
|
|
|
4528
3830
|
);
|
|
4529
3831
|
})
|
|
4530
3832
|
) }),
|
|
4531
|
-
/* @__PURE__ */
|
|
3833
|
+
/* @__PURE__ */ jsx5("div", { className: "mt-2 text-xs text-muted-foreground", children: insertLabel })
|
|
4532
3834
|
] });
|
|
4533
3835
|
};
|
|
4534
3836
|
function applyTableCellAttribute(editor, name, value) {
|
|
@@ -4560,14 +3862,14 @@ var EditorToolbar = ({
|
|
|
4560
3862
|
const t = useSmartTranslations("UEditor");
|
|
4561
3863
|
const editorUiState = useSharedEditorUiRenderState(editor);
|
|
4562
3864
|
const { textColors, highlightColors } = useEditorColors();
|
|
4563
|
-
const [showImageInput, setShowImageInput] =
|
|
4564
|
-
const [showLinkInput, setShowLinkInput] =
|
|
4565
|
-
const [isTableMenuOpen, setIsTableMenuOpen] =
|
|
4566
|
-
const [fontSizeDraft, setFontSizeDraft] =
|
|
4567
|
-
const [isEditingFontSize, setIsEditingFontSize] =
|
|
4568
|
-
const fileInputRef =
|
|
4569
|
-
const [isUploadingImage, setIsUploadingImage] =
|
|
4570
|
-
const [imageUploadError, setImageUploadError] =
|
|
3865
|
+
const [showImageInput, setShowImageInput] = useState3(false);
|
|
3866
|
+
const [showLinkInput, setShowLinkInput] = useState3(false);
|
|
3867
|
+
const [isTableMenuOpen, setIsTableMenuOpen] = useState3(false);
|
|
3868
|
+
const [fontSizeDraft, setFontSizeDraft] = useState3("");
|
|
3869
|
+
const [isEditingFontSize, setIsEditingFontSize] = useState3(false);
|
|
3870
|
+
const fileInputRef = useRef3(null);
|
|
3871
|
+
const [isUploadingImage, setIsUploadingImage] = useState3(false);
|
|
3872
|
+
const [imageUploadError, setImageUploadError] = useState3(null);
|
|
4571
3873
|
const isImageSelected = editor.isActive("image");
|
|
4572
3874
|
const imageAttrs = editor.getAttributes("image");
|
|
4573
3875
|
const tableAnchorPos = getTableAnchorPos(editor);
|
|
@@ -4588,10 +3890,10 @@ var EditorToolbar = ({
|
|
|
4588
3890
|
const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
|
|
4589
3891
|
const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
|
|
4590
3892
|
const currentLetterSpacing = normalizeStyleValue(textStyleAttrs.letterSpacing);
|
|
4591
|
-
const availableFontFamilies =
|
|
4592
|
-
const availableFontSizes =
|
|
4593
|
-
const availableLineHeights =
|
|
4594
|
-
const availableLetterSpacings =
|
|
3893
|
+
const availableFontFamilies = React5.useMemo(() => fontFamilies ?? getDefaultFontFamilies(t), [fontFamilies, t]);
|
|
3894
|
+
const availableFontSizes = React5.useMemo(() => fontSizes ?? getDefaultFontSizes(), [fontSizes]);
|
|
3895
|
+
const availableLineHeights = React5.useMemo(() => lineHeights ?? getDefaultLineHeights(), [lineHeights]);
|
|
3896
|
+
const availableLetterSpacings = React5.useMemo(() => letterSpacings ?? getDefaultLetterSpacings(), [letterSpacings]);
|
|
4595
3897
|
const currentFontFamilyDisplayValue = currentFontFamily.split(",")[0]?.trim() ?? currentFontFamily;
|
|
4596
3898
|
const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? (currentFontFamilyDisplayValue || t("toolbar.fontDefault"));
|
|
4597
3899
|
const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? (currentFontSize.replace(/px$/i, "") || "13");
|
|
@@ -4641,46 +3943,46 @@ var EditorToolbar = ({
|
|
|
4641
3943
|
}
|
|
4642
3944
|
};
|
|
4643
3945
|
if (variant === "minimal") {
|
|
4644
|
-
return /* @__PURE__ */
|
|
4645
|
-
/* @__PURE__ */
|
|
4646
|
-
/* @__PURE__ */
|
|
4647
|
-
/* @__PURE__ */
|
|
4648
|
-
/* @__PURE__ */
|
|
4649
|
-
/* @__PURE__ */
|
|
4650
|
-
/* @__PURE__ */
|
|
3946
|
+
return /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border/35 bg-muted/30 p-1.5", children: [
|
|
3947
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx5(FigmaUndoIcon, { className: "h-4 w-4" }) }),
|
|
3948
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx5(FigmaRedoIcon, { className: "h-4 w-4" }) }),
|
|
3949
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
3950
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx5(FigmaBoldIcon, { className: "h-4 w-4" }) }),
|
|
3951
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx5(FigmaItalicIcon, { className: "h-4 w-4" }) }),
|
|
3952
|
+
/* @__PURE__ */ jsx5(
|
|
4651
3953
|
ToolbarButton,
|
|
4652
3954
|
{
|
|
4653
3955
|
onClick: () => editor.chain().focus().toggleBulletList().run(),
|
|
4654
3956
|
active: editor.isActive("bulletList"),
|
|
4655
3957
|
title: t("toolbar.bulletList"),
|
|
4656
|
-
children: /* @__PURE__ */
|
|
3958
|
+
children: /* @__PURE__ */ jsx5(FigmaListIcon, { className: "h-4 w-4" })
|
|
4657
3959
|
}
|
|
4658
3960
|
),
|
|
4659
|
-
/* @__PURE__ */
|
|
3961
|
+
/* @__PURE__ */ jsx5(
|
|
4660
3962
|
ToolbarButton,
|
|
4661
3963
|
{
|
|
4662
3964
|
onClick: () => editor.chain().focus().decreaseIndent().run(),
|
|
4663
3965
|
disabled: !editorUiState.can.decreaseIndent,
|
|
4664
3966
|
title: t("toolbar.decreaseIndent"),
|
|
4665
|
-
children: /* @__PURE__ */
|
|
3967
|
+
children: /* @__PURE__ */ jsx5(IndentDecrease, { className: "h-4 w-4" })
|
|
4666
3968
|
}
|
|
4667
3969
|
),
|
|
4668
|
-
/* @__PURE__ */
|
|
3970
|
+
/* @__PURE__ */ jsx5(
|
|
4669
3971
|
ToolbarButton,
|
|
4670
3972
|
{
|
|
4671
3973
|
onClick: () => editor.chain().focus().increaseIndent().run(),
|
|
4672
3974
|
disabled: !editorUiState.can.increaseIndent,
|
|
4673
3975
|
title: t("toolbar.increaseIndent"),
|
|
4674
|
-
children: /* @__PURE__ */
|
|
3976
|
+
children: /* @__PURE__ */ jsx5(IndentIncrease, { className: "h-4 w-4" })
|
|
4675
3977
|
}
|
|
4676
3978
|
),
|
|
4677
|
-
/* @__PURE__ */
|
|
3979
|
+
/* @__PURE__ */ jsxs4(
|
|
4678
3980
|
DropdownMenu,
|
|
4679
3981
|
{
|
|
4680
|
-
trigger: /* @__PURE__ */
|
|
4681
|
-
}, active: editor.isActive("formCheckbox"), title: t("slashCommand.formCheckbox"), children: /* @__PURE__ */
|
|
3982
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
3983
|
+
}, active: editor.isActive("formCheckbox"), title: t("slashCommand.formCheckbox"), children: /* @__PURE__ */ jsx5(SquareCheckBig, { className: "w-4 h-4" }) }),
|
|
4682
3984
|
children: [
|
|
4683
|
-
/* @__PURE__ */
|
|
3985
|
+
/* @__PURE__ */ jsx5(
|
|
4684
3986
|
DropdownMenuItem,
|
|
4685
3987
|
{
|
|
4686
3988
|
icon: SquareCheckBig,
|
|
@@ -4688,7 +3990,7 @@ var EditorToolbar = ({
|
|
|
4688
3990
|
onClick: () => editor.chain().focus().setFormCheckbox().run()
|
|
4689
3991
|
}
|
|
4690
3992
|
),
|
|
4691
|
-
/* @__PURE__ */
|
|
3993
|
+
/* @__PURE__ */ jsx5(
|
|
4692
3994
|
DropdownMenuItem,
|
|
4693
3995
|
{
|
|
4694
3996
|
icon: CircleCheckBig,
|
|
@@ -4699,12 +4001,12 @@ var EditorToolbar = ({
|
|
|
4699
4001
|
]
|
|
4700
4002
|
}
|
|
4701
4003
|
),
|
|
4702
|
-
/* @__PURE__ */
|
|
4004
|
+
/* @__PURE__ */ jsx5(
|
|
4703
4005
|
DropdownMenu,
|
|
4704
4006
|
{
|
|
4705
4007
|
contentClassName: "min-w-72",
|
|
4706
|
-
trigger: /* @__PURE__ */
|
|
4707
|
-
children: showLinkInput ? /* @__PURE__ */
|
|
4008
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => setShowLinkInput(!editor.isActive("link")), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ jsx5(FigmaLinkIcon, { className: "h-4 w-4" }) }),
|
|
4009
|
+
children: showLinkInput ? /* @__PURE__ */ jsx5(
|
|
4708
4010
|
LinkInput,
|
|
4709
4011
|
{
|
|
4710
4012
|
initialUrl: String(editor.getAttributes("link").href ?? ""),
|
|
@@ -4714,8 +4016,8 @@ var EditorToolbar = ({
|
|
|
4714
4016
|
},
|
|
4715
4017
|
onCancel: () => setShowLinkInput(false)
|
|
4716
4018
|
}
|
|
4717
|
-
) : /* @__PURE__ */
|
|
4718
|
-
/* @__PURE__ */
|
|
4019
|
+
) : /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4020
|
+
/* @__PURE__ */ jsx5(
|
|
4719
4021
|
DropdownMenuItem,
|
|
4720
4022
|
{
|
|
4721
4023
|
icon: LinkIcon,
|
|
@@ -4725,7 +4027,7 @@ var EditorToolbar = ({
|
|
|
4725
4027
|
closeOnSelect: false
|
|
4726
4028
|
}
|
|
4727
4029
|
),
|
|
4728
|
-
/* @__PURE__ */
|
|
4030
|
+
/* @__PURE__ */ jsx5(
|
|
4729
4031
|
DropdownMenuItem,
|
|
4730
4032
|
{
|
|
4731
4033
|
icon: Trash2,
|
|
@@ -4738,28 +4040,28 @@ var EditorToolbar = ({
|
|
|
4738
4040
|
] })
|
|
4739
4041
|
}
|
|
4740
4042
|
),
|
|
4741
|
-
onToggleMenuBar && /* @__PURE__ */
|
|
4043
|
+
onToggleMenuBar && /* @__PURE__ */ jsx5(
|
|
4742
4044
|
ToolbarButton,
|
|
4743
4045
|
{
|
|
4744
4046
|
onClick: onToggleMenuBar,
|
|
4745
4047
|
active: isMenuBarVisible,
|
|
4746
4048
|
title: t(isMenuBarVisible ? "toolbar.hideMenuBar" : "toolbar.showMenuBar"),
|
|
4747
|
-
children: isMenuBarVisible ? /* @__PURE__ */
|
|
4049
|
+
children: isMenuBarVisible ? /* @__PURE__ */ jsx5(PanelTopClose, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(PanelTopOpen, { className: "h-4 w-4" })
|
|
4748
4050
|
}
|
|
4749
4051
|
)
|
|
4750
4052
|
] });
|
|
4751
4053
|
}
|
|
4752
4054
|
const VerticalAlignActiveIcon = currentCellVerticalAlign === "middle" ? AlignCenterVertical : currentCellVerticalAlign === "bottom" ? AlignEndVertical : AlignStartVertical;
|
|
4753
|
-
return /* @__PURE__ */
|
|
4055
|
+
return /* @__PURE__ */ jsxs4(
|
|
4754
4056
|
"div",
|
|
4755
4057
|
{
|
|
4756
4058
|
role: "toolbar",
|
|
4757
4059
|
className: "flex min-h-9 flex-wrap items-center gap-0.5 border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-1.5 py-1 dark:bg-muted/60",
|
|
4758
4060
|
children: [
|
|
4759
|
-
isFull && /* @__PURE__ */
|
|
4061
|
+
isFull && /* @__PURE__ */ jsx5(
|
|
4760
4062
|
DropdownMenu,
|
|
4761
4063
|
{
|
|
4762
|
-
trigger: /* @__PURE__ */
|
|
4064
|
+
trigger: /* @__PURE__ */ jsxs4(
|
|
4763
4065
|
ToolbarButton,
|
|
4764
4066
|
{
|
|
4765
4067
|
onClick: () => {
|
|
@@ -4767,13 +4069,13 @@ var EditorToolbar = ({
|
|
|
4767
4069
|
title: t("toolbar.fontFamily"),
|
|
4768
4070
|
className: "h-7 w-40 max-w-40 justify-between gap-1.5 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
|
|
4769
4071
|
children: [
|
|
4770
|
-
/* @__PURE__ */
|
|
4771
|
-
/* @__PURE__ */
|
|
4072
|
+
/* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-left text-xs font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
|
|
4073
|
+
/* @__PURE__ */ jsx5(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
|
|
4772
4074
|
]
|
|
4773
4075
|
}
|
|
4774
4076
|
),
|
|
4775
4077
|
contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
|
|
4776
|
-
children: availableFontFamilies.map((option) => /* @__PURE__ */
|
|
4078
|
+
children: availableFontFamilies.map((option) => /* @__PURE__ */ jsx5(
|
|
4777
4079
|
DropdownMenuItem,
|
|
4778
4080
|
{
|
|
4779
4081
|
label: option.label,
|
|
@@ -4785,11 +4087,11 @@ var EditorToolbar = ({
|
|
|
4785
4087
|
))
|
|
4786
4088
|
}
|
|
4787
4089
|
),
|
|
4788
|
-
(isMediumFull || isFull) && /* @__PURE__ */
|
|
4090
|
+
(isMediumFull || isFull) && /* @__PURE__ */ jsx5(
|
|
4789
4091
|
DropdownMenu,
|
|
4790
4092
|
{
|
|
4791
|
-
trigger: /* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
4093
|
+
trigger: /* @__PURE__ */ jsxs4("div", { className: "flex h-7 w-14 items-center rounded-md border border-[rgba(196,197,213,0.6)] bg-white text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] dark:bg-background dark:text-foreground", children: [
|
|
4094
|
+
/* @__PURE__ */ jsx5(
|
|
4793
4095
|
"input",
|
|
4794
4096
|
{
|
|
4795
4097
|
type: "number",
|
|
@@ -4820,10 +4122,10 @@ var EditorToolbar = ({
|
|
|
4820
4122
|
className: "min-w-0 flex-1 bg-transparent px-2 text-xs font-normal leading-none outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
4821
4123
|
}
|
|
4822
4124
|
),
|
|
4823
|
-
/* @__PURE__ */
|
|
4125
|
+
/* @__PURE__ */ jsx5("button", { type: "button", "aria-label": t("toolbar.fontSize"), title: t("toolbar.fontSize"), className: "px-1 text-[#7B8184]", children: /* @__PURE__ */ jsx5(FigmaChevronDownIcon, { className: "h-3 w-3" }) })
|
|
4824
4126
|
] }),
|
|
4825
4127
|
contentClassName: "max-h-80 overflow-y-auto min-w-32 p-2",
|
|
4826
|
-
children: availableFontSizes.map((option) => /* @__PURE__ */
|
|
4128
|
+
children: availableFontSizes.map((option) => /* @__PURE__ */ jsx5(
|
|
4827
4129
|
DropdownMenuItem,
|
|
4828
4130
|
{
|
|
4829
4131
|
label: option.label,
|
|
@@ -4837,14 +4139,14 @@ var EditorToolbar = ({
|
|
|
4837
4139
|
))
|
|
4838
4140
|
}
|
|
4839
4141
|
),
|
|
4840
|
-
/* @__PURE__ */
|
|
4142
|
+
/* @__PURE__ */ jsxs4(
|
|
4841
4143
|
DropdownMenu,
|
|
4842
4144
|
{
|
|
4843
4145
|
contentClassName: "p-1",
|
|
4844
|
-
trigger: /* @__PURE__ */
|
|
4845
|
-
}, title: t("toolbar.textStyle"), className: "px-1.5 w-auto gap-0.5", children: /* @__PURE__ */
|
|
4146
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4147
|
+
}, title: t("toolbar.textStyle"), className: "px-1.5 w-auto gap-0.5", children: /* @__PURE__ */ jsx5(FigmaTextStyleIcon, { className: "h-4 w-4" }) }),
|
|
4846
4148
|
children: [
|
|
4847
|
-
/* @__PURE__ */
|
|
4149
|
+
/* @__PURE__ */ jsx5(
|
|
4848
4150
|
DropdownMenuItem,
|
|
4849
4151
|
{
|
|
4850
4152
|
icon: Type,
|
|
@@ -4853,7 +4155,7 @@ var EditorToolbar = ({
|
|
|
4853
4155
|
active: editor.isActive("paragraph")
|
|
4854
4156
|
}
|
|
4855
4157
|
),
|
|
4856
|
-
/* @__PURE__ */
|
|
4158
|
+
/* @__PURE__ */ jsx5(
|
|
4857
4159
|
DropdownMenuItem,
|
|
4858
4160
|
{
|
|
4859
4161
|
icon: Heading1Icon,
|
|
@@ -4863,7 +4165,7 @@ var EditorToolbar = ({
|
|
|
4863
4165
|
shortcut: "Ctrl+Alt+1"
|
|
4864
4166
|
}
|
|
4865
4167
|
),
|
|
4866
|
-
/* @__PURE__ */
|
|
4168
|
+
/* @__PURE__ */ jsx5(
|
|
4867
4169
|
DropdownMenuItem,
|
|
4868
4170
|
{
|
|
4869
4171
|
icon: Heading2Icon,
|
|
@@ -4873,7 +4175,7 @@ var EditorToolbar = ({
|
|
|
4873
4175
|
shortcut: "Ctrl+Alt+2"
|
|
4874
4176
|
}
|
|
4875
4177
|
),
|
|
4876
|
-
/* @__PURE__ */
|
|
4178
|
+
/* @__PURE__ */ jsx5(
|
|
4877
4179
|
DropdownMenuItem,
|
|
4878
4180
|
{
|
|
4879
4181
|
icon: Heading3Icon,
|
|
@@ -4886,15 +4188,15 @@ var EditorToolbar = ({
|
|
|
4886
4188
|
]
|
|
4887
4189
|
}
|
|
4888
4190
|
),
|
|
4889
|
-
isFull && /* @__PURE__ */
|
|
4890
|
-
/* @__PURE__ */
|
|
4191
|
+
isFull && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4192
|
+
/* @__PURE__ */ jsxs4(
|
|
4891
4193
|
DropdownMenu,
|
|
4892
4194
|
{
|
|
4893
|
-
trigger: /* @__PURE__ */
|
|
4894
|
-
}, title: t("toolbar.lineHeight"), className: "gap-0.5", children: /* @__PURE__ */
|
|
4195
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4196
|
+
}, title: t("toolbar.lineHeight"), className: "gap-0.5", children: /* @__PURE__ */ jsx5(FigmaLineHeightIcon, { className: "h-4 w-4" }) }),
|
|
4895
4197
|
contentClassName: "max-h-72 overflow-y-auto p-1",
|
|
4896
4198
|
children: [
|
|
4897
|
-
/* @__PURE__ */
|
|
4199
|
+
/* @__PURE__ */ jsx5(
|
|
4898
4200
|
DropdownMenuItem,
|
|
4899
4201
|
{
|
|
4900
4202
|
icon: Type,
|
|
@@ -4903,7 +4205,7 @@ var EditorToolbar = ({
|
|
|
4903
4205
|
active: !currentLineHeight
|
|
4904
4206
|
}
|
|
4905
4207
|
),
|
|
4906
|
-
availableLineHeights.map((option) => /* @__PURE__ */
|
|
4208
|
+
availableLineHeights.map((option) => /* @__PURE__ */ jsx5(
|
|
4907
4209
|
DropdownMenuItem,
|
|
4908
4210
|
{
|
|
4909
4211
|
label: option.label,
|
|
@@ -4915,14 +4217,14 @@ var EditorToolbar = ({
|
|
|
4915
4217
|
]
|
|
4916
4218
|
}
|
|
4917
4219
|
),
|
|
4918
|
-
/* @__PURE__ */
|
|
4220
|
+
/* @__PURE__ */ jsxs4(
|
|
4919
4221
|
DropdownMenu,
|
|
4920
4222
|
{
|
|
4921
|
-
trigger: /* @__PURE__ */
|
|
4922
|
-
}, title: t("toolbar.letterSpacing"), className: "gap-0.5", children: /* @__PURE__ */
|
|
4223
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4224
|
+
}, title: t("toolbar.letterSpacing"), className: "gap-0.5", children: /* @__PURE__ */ jsx5(FigmaLetterSpacingIcon, { className: "h-4 w-4" }) }),
|
|
4923
4225
|
contentClassName: "max-h-72 overflow-y-auto p-1",
|
|
4924
4226
|
children: [
|
|
4925
|
-
/* @__PURE__ */
|
|
4227
|
+
/* @__PURE__ */ jsx5(
|
|
4926
4228
|
DropdownMenuItem,
|
|
4927
4229
|
{
|
|
4928
4230
|
icon: Type,
|
|
@@ -4931,7 +4233,7 @@ var EditorToolbar = ({
|
|
|
4931
4233
|
active: !currentLetterSpacing
|
|
4932
4234
|
}
|
|
4933
4235
|
),
|
|
4934
|
-
availableLetterSpacings.map((option) => /* @__PURE__ */
|
|
4236
|
+
availableLetterSpacings.map((option) => /* @__PURE__ */ jsx5(
|
|
4935
4237
|
DropdownMenuItem,
|
|
4936
4238
|
{
|
|
4937
4239
|
label: option.label,
|
|
@@ -4944,16 +4246,16 @@ var EditorToolbar = ({
|
|
|
4944
4246
|
}
|
|
4945
4247
|
)
|
|
4946
4248
|
] }),
|
|
4947
|
-
/* @__PURE__ */
|
|
4948
|
-
(isMediumFull || isFull) && /* @__PURE__ */
|
|
4249
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4250
|
+
(isMediumFull || isFull) && /* @__PURE__ */ jsx5(
|
|
4949
4251
|
DropdownMenu,
|
|
4950
4252
|
{
|
|
4951
4253
|
isOpen: isTableMenuOpen,
|
|
4952
4254
|
onOpenChange: setIsTableMenuOpen,
|
|
4953
|
-
trigger: /* @__PURE__ */
|
|
4954
|
-
}, title: t("toolbar.table"), children: /* @__PURE__ */
|
|
4255
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4256
|
+
}, title: t("toolbar.table"), children: /* @__PURE__ */ jsx5(FigmaTableIcon, { className: "h-4 w-4" }) }),
|
|
4955
4257
|
contentClassName: "p-2 min-w-56",
|
|
4956
|
-
children: /* @__PURE__ */
|
|
4258
|
+
children: /* @__PURE__ */ jsx5(
|
|
4957
4259
|
TableInsertGrid,
|
|
4958
4260
|
{
|
|
4959
4261
|
insertLabel: t("tableMenu.insertTable"),
|
|
@@ -4966,45 +4268,45 @@ var EditorToolbar = ({
|
|
|
4966
4268
|
)
|
|
4967
4269
|
}
|
|
4968
4270
|
),
|
|
4969
|
-
/* @__PURE__ */
|
|
4970
|
-
/* @__PURE__ */
|
|
4971
|
-
/* @__PURE__ */
|
|
4271
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx5(FigmaBoldIcon, { className: "h-4 w-4" }) }),
|
|
4272
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx5(FigmaItalicIcon, { className: "h-4 w-4" }) }),
|
|
4273
|
+
/* @__PURE__ */ jsx5(
|
|
4972
4274
|
ToolbarButton,
|
|
4973
4275
|
{
|
|
4974
4276
|
onClick: () => editor.chain().focus().toggleUnderline().run(),
|
|
4975
4277
|
active: editor.isActive("underline"),
|
|
4976
4278
|
title: t("toolbar.underline"),
|
|
4977
|
-
children: /* @__PURE__ */
|
|
4279
|
+
children: /* @__PURE__ */ jsx5(FigmaUnderlineIcon, { className: "h-4 w-4" })
|
|
4978
4280
|
}
|
|
4979
4281
|
),
|
|
4980
|
-
/* @__PURE__ */
|
|
4981
|
-
(isMediumFull || isFull) && /* @__PURE__ */
|
|
4982
|
-
isFull && /* @__PURE__ */
|
|
4983
|
-
/* @__PURE__ */
|
|
4282
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ jsx5(FigmaStrikeIcon, { className: "h-4 w-4" }) }),
|
|
4283
|
+
(isMediumFull || isFull) && /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ jsx5(FigmaCodeIcon, { className: "h-4 w-4" }) }),
|
|
4284
|
+
isFull && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4285
|
+
/* @__PURE__ */ jsx5(
|
|
4984
4286
|
ToolbarButton,
|
|
4985
4287
|
{
|
|
4986
4288
|
onClick: () => editor.chain().focus().toggleSubscript().run(),
|
|
4987
4289
|
active: editor.isActive("subscript"),
|
|
4988
4290
|
title: t("toolbar.subscript"),
|
|
4989
|
-
children: /* @__PURE__ */
|
|
4291
|
+
children: /* @__PURE__ */ jsx5(FigmaSubscriptIcon, { className: "h-4 w-4" })
|
|
4990
4292
|
}
|
|
4991
4293
|
),
|
|
4992
|
-
/* @__PURE__ */
|
|
4294
|
+
/* @__PURE__ */ jsx5(
|
|
4993
4295
|
ToolbarButton,
|
|
4994
4296
|
{
|
|
4995
4297
|
onClick: () => editor.chain().focus().toggleSuperscript().run(),
|
|
4996
4298
|
active: editor.isActive("superscript"),
|
|
4997
4299
|
title: t("toolbar.superscript"),
|
|
4998
|
-
children: /* @__PURE__ */
|
|
4300
|
+
children: /* @__PURE__ */ jsx5(FigmaSuperscriptIcon, { className: "h-4 w-4" })
|
|
4999
4301
|
}
|
|
5000
4302
|
)
|
|
5001
4303
|
] }),
|
|
5002
|
-
/* @__PURE__ */
|
|
4304
|
+
/* @__PURE__ */ jsx5(
|
|
5003
4305
|
DropdownMenu,
|
|
5004
4306
|
{
|
|
5005
4307
|
contentClassName: "min-w-72",
|
|
5006
|
-
trigger: /* @__PURE__ */
|
|
5007
|
-
children: showLinkInput ? /* @__PURE__ */
|
|
4308
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => setShowLinkInput(!editor.isActive("link")), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ jsx5(FigmaLinkIcon, { className: "h-4 w-4" }) }),
|
|
4309
|
+
children: showLinkInput ? /* @__PURE__ */ jsx5(
|
|
5008
4310
|
LinkInput,
|
|
5009
4311
|
{
|
|
5010
4312
|
initialUrl: String(editor.getAttributes("link").href ?? ""),
|
|
@@ -5014,8 +4316,8 @@ var EditorToolbar = ({
|
|
|
5014
4316
|
},
|
|
5015
4317
|
onCancel: () => setShowLinkInput(false)
|
|
5016
4318
|
}
|
|
5017
|
-
) : /* @__PURE__ */
|
|
5018
|
-
/* @__PURE__ */
|
|
4319
|
+
) : /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4320
|
+
/* @__PURE__ */ jsx5(
|
|
5019
4321
|
DropdownMenuItem,
|
|
5020
4322
|
{
|
|
5021
4323
|
icon: LinkIcon,
|
|
@@ -5025,7 +4327,7 @@ var EditorToolbar = ({
|
|
|
5025
4327
|
closeOnSelect: false
|
|
5026
4328
|
}
|
|
5027
4329
|
),
|
|
5028
|
-
/* @__PURE__ */
|
|
4330
|
+
/* @__PURE__ */ jsx5(
|
|
5029
4331
|
DropdownMenuItem,
|
|
5030
4332
|
{
|
|
5031
4333
|
icon: Trash2,
|
|
@@ -5038,13 +4340,13 @@ var EditorToolbar = ({
|
|
|
5038
4340
|
] })
|
|
5039
4341
|
}
|
|
5040
4342
|
),
|
|
5041
|
-
/* @__PURE__ */
|
|
5042
|
-
/* @__PURE__ */
|
|
4343
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4344
|
+
/* @__PURE__ */ jsx5(
|
|
5043
4345
|
DropdownMenu,
|
|
5044
4346
|
{
|
|
5045
|
-
trigger: /* @__PURE__ */
|
|
5046
|
-
}, title: t("colors.textColor"), children: /* @__PURE__ */
|
|
5047
|
-
children: /* @__PURE__ */
|
|
4347
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4348
|
+
}, title: t("colors.textColor"), children: /* @__PURE__ */ jsx5(TextColorIcon, { color: currentTextColor }) }),
|
|
4349
|
+
children: /* @__PURE__ */ jsx5(
|
|
5048
4350
|
EditorColorPalette,
|
|
5049
4351
|
{
|
|
5050
4352
|
colors: textColors,
|
|
@@ -5061,12 +4363,12 @@ var EditorToolbar = ({
|
|
|
5061
4363
|
)
|
|
5062
4364
|
}
|
|
5063
4365
|
),
|
|
5064
|
-
/* @__PURE__ */
|
|
4366
|
+
/* @__PURE__ */ jsx5(
|
|
5065
4367
|
DropdownMenu,
|
|
5066
4368
|
{
|
|
5067
|
-
trigger: /* @__PURE__ */
|
|
5068
|
-
}, active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */
|
|
5069
|
-
children: /* @__PURE__ */
|
|
4369
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4370
|
+
}, active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */ jsx5(HighlightColorIcon, { color: currentHighlightColor }) }),
|
|
4371
|
+
children: /* @__PURE__ */ jsx5(
|
|
5070
4372
|
EditorColorPalette,
|
|
5071
4373
|
{
|
|
5072
4374
|
colors: highlightColors,
|
|
@@ -5083,15 +4385,15 @@ var EditorToolbar = ({
|
|
|
5083
4385
|
)
|
|
5084
4386
|
}
|
|
5085
4387
|
),
|
|
5086
|
-
(isMediumFull || isFull) && /* @__PURE__ */
|
|
5087
|
-
/* @__PURE__ */
|
|
5088
|
-
/* @__PURE__ */
|
|
4388
|
+
(isMediumFull || isFull) && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4389
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4390
|
+
/* @__PURE__ */ jsxs4(
|
|
5089
4391
|
DropdownMenu,
|
|
5090
4392
|
{
|
|
5091
|
-
trigger: /* @__PURE__ */
|
|
5092
|
-
}, title: t("toolbar.alignment"), children: /* @__PURE__ */
|
|
4393
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4394
|
+
}, title: t("toolbar.alignment"), children: /* @__PURE__ */ jsx5(FigmaAlignLeftIcon, { className: "h-4 w-4" }) }),
|
|
5093
4395
|
children: [
|
|
5094
|
-
/* @__PURE__ */
|
|
4396
|
+
/* @__PURE__ */ jsx5(
|
|
5095
4397
|
DropdownMenuItem,
|
|
5096
4398
|
{
|
|
5097
4399
|
icon: AlignLeft,
|
|
@@ -5100,7 +4402,7 @@ var EditorToolbar = ({
|
|
|
5100
4402
|
active: editor.isActive({ textAlign: "left" })
|
|
5101
4403
|
}
|
|
5102
4404
|
),
|
|
5103
|
-
/* @__PURE__ */
|
|
4405
|
+
/* @__PURE__ */ jsx5(
|
|
5104
4406
|
DropdownMenuItem,
|
|
5105
4407
|
{
|
|
5106
4408
|
icon: AlignCenter,
|
|
@@ -5109,7 +4411,7 @@ var EditorToolbar = ({
|
|
|
5109
4411
|
active: editor.isActive({ textAlign: "center" })
|
|
5110
4412
|
}
|
|
5111
4413
|
),
|
|
5112
|
-
/* @__PURE__ */
|
|
4414
|
+
/* @__PURE__ */ jsx5(
|
|
5113
4415
|
DropdownMenuItem,
|
|
5114
4416
|
{
|
|
5115
4417
|
icon: AlignRight,
|
|
@@ -5118,7 +4420,7 @@ var EditorToolbar = ({
|
|
|
5118
4420
|
active: editor.isActive({ textAlign: "right" })
|
|
5119
4421
|
}
|
|
5120
4422
|
),
|
|
5121
|
-
/* @__PURE__ */
|
|
4423
|
+
/* @__PURE__ */ jsx5(
|
|
5122
4424
|
DropdownMenuItem,
|
|
5123
4425
|
{
|
|
5124
4426
|
icon: AlignJustify,
|
|
@@ -5127,9 +4429,9 @@ var EditorToolbar = ({
|
|
|
5127
4429
|
active: editor.isActive({ textAlign: "justify" })
|
|
5128
4430
|
}
|
|
5129
4431
|
),
|
|
5130
|
-
hasTableContext && /* @__PURE__ */
|
|
5131
|
-
/* @__PURE__ */
|
|
5132
|
-
/* @__PURE__ */
|
|
4432
|
+
hasTableContext && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4433
|
+
/* @__PURE__ */ jsx5("div", { className: "my-1 border-t" }),
|
|
4434
|
+
/* @__PURE__ */ jsx5(
|
|
5133
4435
|
DropdownMenuItem,
|
|
5134
4436
|
{
|
|
5135
4437
|
icon: AlignStartVertical,
|
|
@@ -5138,7 +4440,7 @@ var EditorToolbar = ({
|
|
|
5138
4440
|
active: currentCellVerticalAlign === "top"
|
|
5139
4441
|
}
|
|
5140
4442
|
),
|
|
5141
|
-
/* @__PURE__ */
|
|
4443
|
+
/* @__PURE__ */ jsx5(
|
|
5142
4444
|
DropdownMenuItem,
|
|
5143
4445
|
{
|
|
5144
4446
|
icon: AlignCenterVertical,
|
|
@@ -5147,7 +4449,7 @@ var EditorToolbar = ({
|
|
|
5147
4449
|
active: currentCellVerticalAlign === "middle"
|
|
5148
4450
|
}
|
|
5149
4451
|
),
|
|
5150
|
-
/* @__PURE__ */
|
|
4452
|
+
/* @__PURE__ */ jsx5(
|
|
5151
4453
|
DropdownMenuItem,
|
|
5152
4454
|
{
|
|
5153
4455
|
icon: AlignEndVertical,
|
|
@@ -5160,14 +4462,14 @@ var EditorToolbar = ({
|
|
|
5160
4462
|
]
|
|
5161
4463
|
}
|
|
5162
4464
|
),
|
|
5163
|
-
hasTableContext && /* @__PURE__ */
|
|
5164
|
-
/* @__PURE__ */
|
|
4465
|
+
hasTableContext && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4466
|
+
/* @__PURE__ */ jsxs4(
|
|
5165
4467
|
DropdownMenu,
|
|
5166
4468
|
{
|
|
5167
|
-
trigger: /* @__PURE__ */
|
|
5168
|
-
}, title: t("tableMenu.textDirection"), children: currentCellTextDirection === "vertical" ? /* @__PURE__ */
|
|
4469
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4470
|
+
}, title: t("tableMenu.textDirection"), children: currentCellTextDirection === "vertical" ? /* @__PURE__ */ jsx5(ArrowDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx5(ArrowRight, { className: "w-4 h-4" }) }),
|
|
5169
4471
|
children: [
|
|
5170
|
-
/* @__PURE__ */
|
|
4472
|
+
/* @__PURE__ */ jsx5(
|
|
5171
4473
|
DropdownMenuItem,
|
|
5172
4474
|
{
|
|
5173
4475
|
icon: ArrowRight,
|
|
@@ -5176,7 +4478,7 @@ var EditorToolbar = ({
|
|
|
5176
4478
|
active: currentCellTextDirection === "horizontal"
|
|
5177
4479
|
}
|
|
5178
4480
|
),
|
|
5179
|
-
/* @__PURE__ */
|
|
4481
|
+
/* @__PURE__ */ jsx5(
|
|
5180
4482
|
DropdownMenuItem,
|
|
5181
4483
|
{
|
|
5182
4484
|
icon: ArrowDown,
|
|
@@ -5188,25 +4490,25 @@ var EditorToolbar = ({
|
|
|
5188
4490
|
]
|
|
5189
4491
|
}
|
|
5190
4492
|
),
|
|
5191
|
-
/* @__PURE__ */
|
|
4493
|
+
/* @__PURE__ */ jsx5(
|
|
5192
4494
|
ToolbarButton,
|
|
5193
4495
|
{
|
|
5194
4496
|
onClick: () => applyTableCellAttribute(editor, "textWrap", currentCellTextWrap === "nowrap" ? "wrap" : "nowrap"),
|
|
5195
4497
|
active: currentCellTextWrap !== "nowrap",
|
|
5196
4498
|
title: currentCellTextWrap === "nowrap" ? t("tableMenu.wrapText") : t("tableMenu.noWrapText"),
|
|
5197
|
-
children: /* @__PURE__ */
|
|
4499
|
+
children: /* @__PURE__ */ jsx5(WrapText, { className: "h-4 w-4" })
|
|
5198
4500
|
}
|
|
5199
4501
|
)
|
|
5200
4502
|
] })
|
|
5201
4503
|
] }),
|
|
5202
|
-
/* @__PURE__ */
|
|
5203
|
-
/* @__PURE__ */
|
|
4504
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4505
|
+
/* @__PURE__ */ jsxs4(
|
|
5204
4506
|
DropdownMenu,
|
|
5205
4507
|
{
|
|
5206
|
-
trigger: /* @__PURE__ */
|
|
5207
|
-
}, title: t("toolbar.bulletList"), children: /* @__PURE__ */
|
|
4508
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4509
|
+
}, title: t("toolbar.bulletList"), children: /* @__PURE__ */ jsx5(FigmaListIcon, { className: "h-4 w-4" }) }),
|
|
5208
4510
|
children: [
|
|
5209
|
-
/* @__PURE__ */
|
|
4511
|
+
/* @__PURE__ */ jsx5(
|
|
5210
4512
|
DropdownMenuItem,
|
|
5211
4513
|
{
|
|
5212
4514
|
icon: ListIcon,
|
|
@@ -5216,7 +4518,7 @@ var EditorToolbar = ({
|
|
|
5216
4518
|
shortcut: "Ctrl+Shift+8"
|
|
5217
4519
|
}
|
|
5218
4520
|
),
|
|
5219
|
-
/* @__PURE__ */
|
|
4521
|
+
/* @__PURE__ */ jsx5(
|
|
5220
4522
|
DropdownMenuItem,
|
|
5221
4523
|
{
|
|
5222
4524
|
icon: ListOrderedIcon,
|
|
@@ -5226,7 +4528,7 @@ var EditorToolbar = ({
|
|
|
5226
4528
|
shortcut: "Ctrl+Shift+7"
|
|
5227
4529
|
}
|
|
5228
4530
|
),
|
|
5229
|
-
/* @__PURE__ */
|
|
4531
|
+
/* @__PURE__ */ jsx5(
|
|
5230
4532
|
DropdownMenuItem,
|
|
5231
4533
|
{
|
|
5232
4534
|
icon: ListTodo,
|
|
@@ -5239,31 +4541,31 @@ var EditorToolbar = ({
|
|
|
5239
4541
|
]
|
|
5240
4542
|
}
|
|
5241
4543
|
),
|
|
5242
|
-
/* @__PURE__ */
|
|
4544
|
+
/* @__PURE__ */ jsx5(
|
|
5243
4545
|
ToolbarButton,
|
|
5244
4546
|
{
|
|
5245
4547
|
onClick: () => editor.chain().focus().decreaseIndent().run(),
|
|
5246
4548
|
disabled: !editorUiState.can.decreaseIndent,
|
|
5247
4549
|
title: t("toolbar.decreaseIndent"),
|
|
5248
|
-
children: /* @__PURE__ */
|
|
4550
|
+
children: /* @__PURE__ */ jsx5(IndentDecrease, { className: "h-4 w-4" })
|
|
5249
4551
|
}
|
|
5250
4552
|
),
|
|
5251
|
-
/* @__PURE__ */
|
|
4553
|
+
/* @__PURE__ */ jsx5(
|
|
5252
4554
|
ToolbarButton,
|
|
5253
4555
|
{
|
|
5254
4556
|
onClick: () => editor.chain().focus().increaseIndent().run(),
|
|
5255
4557
|
disabled: !editorUiState.can.increaseIndent,
|
|
5256
4558
|
title: t("toolbar.increaseIndent"),
|
|
5257
|
-
children: /* @__PURE__ */
|
|
4559
|
+
children: /* @__PURE__ */ jsx5(IndentIncrease, { className: "h-4 w-4" })
|
|
5258
4560
|
}
|
|
5259
4561
|
),
|
|
5260
|
-
/* @__PURE__ */
|
|
4562
|
+
/* @__PURE__ */ jsxs4(
|
|
5261
4563
|
DropdownMenu,
|
|
5262
4564
|
{
|
|
5263
|
-
trigger: /* @__PURE__ */
|
|
5264
|
-
}, active: editor.isActive("formCheckbox"), title: t("slashCommand.formCheckbox"), children: /* @__PURE__ */
|
|
4565
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4566
|
+
}, active: editor.isActive("formCheckbox"), title: t("slashCommand.formCheckbox"), children: /* @__PURE__ */ jsx5(SquareCheckBig, { className: "w-4 h-4" }) }),
|
|
5265
4567
|
children: [
|
|
5266
|
-
/* @__PURE__ */
|
|
4568
|
+
/* @__PURE__ */ jsx5(
|
|
5267
4569
|
DropdownMenuItem,
|
|
5268
4570
|
{
|
|
5269
4571
|
icon: SquareCheckBig,
|
|
@@ -5271,7 +4573,7 @@ var EditorToolbar = ({
|
|
|
5271
4573
|
onClick: () => editor.chain().focus().setFormCheckbox().run()
|
|
5272
4574
|
}
|
|
5273
4575
|
),
|
|
5274
|
-
/* @__PURE__ */
|
|
4576
|
+
/* @__PURE__ */ jsx5(
|
|
5275
4577
|
DropdownMenuItem,
|
|
5276
4578
|
{
|
|
5277
4579
|
icon: CircleCheckBig,
|
|
@@ -5282,14 +4584,14 @@ var EditorToolbar = ({
|
|
|
5282
4584
|
]
|
|
5283
4585
|
}
|
|
5284
4586
|
),
|
|
5285
|
-
isMediumFull && /* @__PURE__ */
|
|
5286
|
-
isFull && /* @__PURE__ */
|
|
4587
|
+
isMediumFull && /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), active: editor.isActive("blockquote"), title: t("toolbar.quote"), children: /* @__PURE__ */ jsx5(FigmaQuoteIcon, { className: "h-4 w-4" }) }),
|
|
4588
|
+
isFull && /* @__PURE__ */ jsxs4(
|
|
5287
4589
|
DropdownMenu,
|
|
5288
4590
|
{
|
|
5289
|
-
trigger: /* @__PURE__ */
|
|
5290
|
-
}, title: t("toolbar.quote"), children: /* @__PURE__ */
|
|
4591
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4592
|
+
}, title: t("toolbar.quote"), children: /* @__PURE__ */ jsx5(FigmaQuoteIcon, { className: "h-4 w-4" }) }),
|
|
5291
4593
|
children: [
|
|
5292
|
-
/* @__PURE__ */
|
|
4594
|
+
/* @__PURE__ */ jsx5(
|
|
5293
4595
|
DropdownMenuItem,
|
|
5294
4596
|
{
|
|
5295
4597
|
icon: QuoteIcon,
|
|
@@ -5299,7 +4601,7 @@ var EditorToolbar = ({
|
|
|
5299
4601
|
shortcut: "Ctrl+Shift+B"
|
|
5300
4602
|
}
|
|
5301
4603
|
),
|
|
5302
|
-
/* @__PURE__ */
|
|
4604
|
+
/* @__PURE__ */ jsx5(
|
|
5303
4605
|
DropdownMenuItem,
|
|
5304
4606
|
{
|
|
5305
4607
|
icon: FileCode,
|
|
@@ -5312,12 +4614,12 @@ var EditorToolbar = ({
|
|
|
5312
4614
|
]
|
|
5313
4615
|
}
|
|
5314
4616
|
),
|
|
5315
|
-
(isMediumFull || isFull) && /* @__PURE__ */
|
|
4617
|
+
(isMediumFull || isFull) && /* @__PURE__ */ jsx5(
|
|
5316
4618
|
DropdownMenu,
|
|
5317
4619
|
{
|
|
5318
|
-
trigger: /* @__PURE__ */
|
|
5319
|
-
}, title: t("toolbar.image"), children: /* @__PURE__ */
|
|
5320
|
-
children: showImageInput ? /* @__PURE__ */
|
|
4620
|
+
trigger: /* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => {
|
|
4621
|
+
}, title: t("toolbar.image"), children: /* @__PURE__ */ jsx5(FigmaImageIcon, { className: "h-4 w-4" }) }),
|
|
4622
|
+
children: showImageInput ? /* @__PURE__ */ jsx5(
|
|
5321
4623
|
ImageInput,
|
|
5322
4624
|
{
|
|
5323
4625
|
onSubmit: (url, alt) => {
|
|
@@ -5326,9 +4628,9 @@ var EditorToolbar = ({
|
|
|
5326
4628
|
},
|
|
5327
4629
|
onCancel: () => setShowImageInput(false)
|
|
5328
4630
|
}
|
|
5329
|
-
) : /* @__PURE__ */
|
|
5330
|
-
/* @__PURE__ */
|
|
5331
|
-
/* @__PURE__ */
|
|
4631
|
+
) : /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4632
|
+
/* @__PURE__ */ jsx5(DropdownMenuItem, { icon: LinkIcon, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true), closeOnSelect: false }),
|
|
4633
|
+
/* @__PURE__ */ jsx5(
|
|
5332
4634
|
DropdownMenuItem,
|
|
5333
4635
|
{
|
|
5334
4636
|
icon: Upload,
|
|
@@ -5338,8 +4640,8 @@ var EditorToolbar = ({
|
|
|
5338
4640
|
closeOnSelect: false
|
|
5339
4641
|
}
|
|
5340
4642
|
),
|
|
5341
|
-
imageUploadError && /* @__PURE__ */
|
|
5342
|
-
/* @__PURE__ */
|
|
4643
|
+
imageUploadError && /* @__PURE__ */ jsx5(DropdownMenuItem, { label: imageUploadError, disabled: true, destructive: true }),
|
|
4644
|
+
/* @__PURE__ */ jsx5(
|
|
5343
4645
|
"input",
|
|
5344
4646
|
{
|
|
5345
4647
|
ref: fileInputRef,
|
|
@@ -5354,8 +4656,8 @@ var EditorToolbar = ({
|
|
|
5354
4656
|
}
|
|
5355
4657
|
}
|
|
5356
4658
|
),
|
|
5357
|
-
/* @__PURE__ */
|
|
5358
|
-
/* @__PURE__ */
|
|
4659
|
+
/* @__PURE__ */ jsx5("div", { className: "my-1 border-t" }),
|
|
4660
|
+
/* @__PURE__ */ jsx5(
|
|
5359
4661
|
DropdownMenuItem,
|
|
5360
4662
|
{
|
|
5361
4663
|
icon: AlignCenter,
|
|
@@ -5365,7 +4667,7 @@ var EditorToolbar = ({
|
|
|
5365
4667
|
disabled: !isImageSelected
|
|
5366
4668
|
}
|
|
5367
4669
|
),
|
|
5368
|
-
/* @__PURE__ */
|
|
4670
|
+
/* @__PURE__ */ jsx5(
|
|
5369
4671
|
DropdownMenuItem,
|
|
5370
4672
|
{
|
|
5371
4673
|
icon: AlignLeft,
|
|
@@ -5375,7 +4677,7 @@ var EditorToolbar = ({
|
|
|
5375
4677
|
disabled: !isImageSelected
|
|
5376
4678
|
}
|
|
5377
4679
|
),
|
|
5378
|
-
/* @__PURE__ */
|
|
4680
|
+
/* @__PURE__ */ jsx5(
|
|
5379
4681
|
DropdownMenuItem,
|
|
5380
4682
|
{
|
|
5381
4683
|
icon: AlignRight,
|
|
@@ -5385,8 +4687,8 @@ var EditorToolbar = ({
|
|
|
5385
4687
|
disabled: !isImageSelected
|
|
5386
4688
|
}
|
|
5387
4689
|
),
|
|
5388
|
-
/* @__PURE__ */
|
|
5389
|
-
/* @__PURE__ */
|
|
4690
|
+
/* @__PURE__ */ jsx5("div", { className: "my-1 border-t" }),
|
|
4691
|
+
/* @__PURE__ */ jsx5(
|
|
5390
4692
|
DropdownMenuItem,
|
|
5391
4693
|
{
|
|
5392
4694
|
label: t("toolbar.imageWidthSm"),
|
|
@@ -5395,7 +4697,7 @@ var EditorToolbar = ({
|
|
|
5395
4697
|
disabled: !isImageSelected
|
|
5396
4698
|
}
|
|
5397
4699
|
),
|
|
5398
|
-
/* @__PURE__ */
|
|
4700
|
+
/* @__PURE__ */ jsx5(
|
|
5399
4701
|
DropdownMenuItem,
|
|
5400
4702
|
{
|
|
5401
4703
|
label: t("toolbar.imageWidthMd"),
|
|
@@ -5404,7 +4706,7 @@ var EditorToolbar = ({
|
|
|
5404
4706
|
disabled: !isImageSelected
|
|
5405
4707
|
}
|
|
5406
4708
|
),
|
|
5407
|
-
/* @__PURE__ */
|
|
4709
|
+
/* @__PURE__ */ jsx5(
|
|
5408
4710
|
DropdownMenuItem,
|
|
5409
4711
|
{
|
|
5410
4712
|
label: t("toolbar.imageWidthLg"),
|
|
@@ -5413,8 +4715,8 @@ var EditorToolbar = ({
|
|
|
5413
4715
|
disabled: !isImageSelected
|
|
5414
4716
|
}
|
|
5415
4717
|
),
|
|
5416
|
-
/* @__PURE__ */
|
|
5417
|
-
/* @__PURE__ */
|
|
4718
|
+
/* @__PURE__ */ jsx5("div", { className: "my-1 border-t" }),
|
|
4719
|
+
/* @__PURE__ */ jsx5(
|
|
5418
4720
|
DropdownMenuItem,
|
|
5419
4721
|
{
|
|
5420
4722
|
icon: RotateCcw,
|
|
@@ -5423,7 +4725,7 @@ var EditorToolbar = ({
|
|
|
5423
4725
|
disabled: !isImageSelected
|
|
5424
4726
|
}
|
|
5425
4727
|
),
|
|
5426
|
-
/* @__PURE__ */
|
|
4728
|
+
/* @__PURE__ */ jsx5(
|
|
5427
4729
|
DropdownMenuItem,
|
|
5428
4730
|
{
|
|
5429
4731
|
icon: Trash2,
|
|
@@ -5436,48 +4738,48 @@ var EditorToolbar = ({
|
|
|
5436
4738
|
] })
|
|
5437
4739
|
}
|
|
5438
4740
|
),
|
|
5439
|
-
/* @__PURE__ */
|
|
5440
|
-
/* @__PURE__ */
|
|
5441
|
-
/* @__PURE__ */
|
|
5442
|
-
hasTableContext && /* @__PURE__ */
|
|
5443
|
-
/* @__PURE__ */
|
|
5444
|
-
/* @__PURE__ */
|
|
4741
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4742
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx5(FigmaUndoIcon, { className: "h-4 w-4" }) }),
|
|
4743
|
+
/* @__PURE__ */ jsx5(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx5(FigmaRedoIcon, { className: "h-4 w-4" }) }),
|
|
4744
|
+
hasTableContext && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
4745
|
+
/* @__PURE__ */ jsx5(ToolbarDivider, {}),
|
|
4746
|
+
/* @__PURE__ */ jsx5(
|
|
5445
4747
|
ToolbarButton,
|
|
5446
4748
|
{
|
|
5447
4749
|
onClick: () => editor.chain().focus().addColumnBefore().run(),
|
|
5448
4750
|
disabled: !editor.can().addColumnBefore(),
|
|
5449
4751
|
title: t("tableMenu.addColumnBefore"),
|
|
5450
|
-
children: /* @__PURE__ */
|
|
4752
|
+
children: /* @__PURE__ */ jsx5(ArrowLeft, { className: "w-4 h-4" })
|
|
5451
4753
|
}
|
|
5452
4754
|
),
|
|
5453
|
-
/* @__PURE__ */
|
|
4755
|
+
/* @__PURE__ */ jsx5(
|
|
5454
4756
|
ToolbarButton,
|
|
5455
4757
|
{
|
|
5456
4758
|
onClick: () => editor.chain().focus().addColumnAfter().run(),
|
|
5457
4759
|
disabled: !editor.can().addColumnAfter(),
|
|
5458
4760
|
title: t("tableMenu.addColumnAfter"),
|
|
5459
|
-
children: /* @__PURE__ */
|
|
4761
|
+
children: /* @__PURE__ */ jsx5(ArrowRight, { className: "w-4 h-4" })
|
|
5460
4762
|
}
|
|
5461
4763
|
),
|
|
5462
|
-
/* @__PURE__ */
|
|
4764
|
+
/* @__PURE__ */ jsx5(
|
|
5463
4765
|
ToolbarButton,
|
|
5464
4766
|
{
|
|
5465
4767
|
onClick: () => editor.chain().focus().addRowBefore().run(),
|
|
5466
4768
|
disabled: !editor.can().addRowBefore(),
|
|
5467
4769
|
title: t("tableMenu.addRowBefore"),
|
|
5468
|
-
children: /* @__PURE__ */
|
|
4770
|
+
children: /* @__PURE__ */ jsx5(ArrowUp, { className: "w-4 h-4" })
|
|
5469
4771
|
}
|
|
5470
4772
|
),
|
|
5471
|
-
/* @__PURE__ */
|
|
4773
|
+
/* @__PURE__ */ jsx5(
|
|
5472
4774
|
ToolbarButton,
|
|
5473
4775
|
{
|
|
5474
4776
|
onClick: () => editor.chain().focus().addRowAfter().run(),
|
|
5475
4777
|
disabled: !editor.can().addRowAfter(),
|
|
5476
4778
|
title: t("tableMenu.addRowAfter"),
|
|
5477
|
-
children: /* @__PURE__ */
|
|
4779
|
+
children: /* @__PURE__ */ jsx5(ArrowDown, { className: "w-4 h-4" })
|
|
5478
4780
|
}
|
|
5479
4781
|
),
|
|
5480
|
-
/* @__PURE__ */
|
|
4782
|
+
/* @__PURE__ */ jsx5(
|
|
5481
4783
|
ToolbarButton,
|
|
5482
4784
|
{
|
|
5483
4785
|
onClick: () => {
|
|
@@ -5490,17 +4792,17 @@ var EditorToolbar = ({
|
|
|
5490
4792
|
active: canSplitCell,
|
|
5491
4793
|
disabled: !canMergeCells && !canSplitCell,
|
|
5492
4794
|
title: canSplitCell ? t("tableMenu.splitCell") : t("tableMenu.mergeCells"),
|
|
5493
|
-
children: /* @__PURE__ */
|
|
4795
|
+
children: /* @__PURE__ */ jsx5(TableCellsMerge, { className: "w-4 h-4" })
|
|
5494
4796
|
}
|
|
5495
4797
|
)
|
|
5496
4798
|
] }),
|
|
5497
|
-
onToggleMenuBar && /* @__PURE__ */
|
|
4799
|
+
onToggleMenuBar && /* @__PURE__ */ jsx5(
|
|
5498
4800
|
ToolbarButton,
|
|
5499
4801
|
{
|
|
5500
4802
|
onClick: onToggleMenuBar,
|
|
5501
4803
|
active: isMenuBarVisible,
|
|
5502
4804
|
title: t(isMenuBarVisible ? "toolbar.hideMenuBar" : "toolbar.showMenuBar"),
|
|
5503
|
-
children: isMenuBarVisible ? /* @__PURE__ */
|
|
4805
|
+
children: isMenuBarVisible ? /* @__PURE__ */ jsx5(PanelTopClose, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(PanelTopOpen, { className: "h-4 w-4" })
|
|
5504
4806
|
}
|
|
5505
4807
|
)
|
|
5506
4808
|
]
|
|
@@ -5715,15 +5017,6 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
|
|
|
5715
5017
|
);
|
|
5716
5018
|
|
|
5717
5019
|
export {
|
|
5718
|
-
getBorderRadiusClass,
|
|
5719
|
-
getPanelBorderRadiusClass,
|
|
5720
|
-
useUnderverseUIConfig,
|
|
5721
|
-
UnderverseConfigProvider,
|
|
5722
|
-
shadcnAnimationStyles,
|
|
5723
|
-
useShadCNAnimations,
|
|
5724
|
-
injectAnimationStyles,
|
|
5725
|
-
getAnimationStyles,
|
|
5726
|
-
Popover,
|
|
5727
5020
|
useDropdownMenuClose,
|
|
5728
5021
|
DropdownMenu,
|
|
5729
5022
|
DropdownMenuItem,
|
|
@@ -5827,4 +5120,4 @@ export {
|
|
|
5827
5120
|
EditorToolbar,
|
|
5828
5121
|
UEDITOR_PROSEMIRROR_CLASS_NAME
|
|
5829
5122
|
};
|
|
5830
|
-
//# sourceMappingURL=chunk-
|
|
5123
|
+
//# sourceMappingURL=chunk-V4VZZHV7.js.map
|