@bizapps/design-system-testing 1.0.11 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/editor.js ADDED
@@ -0,0 +1,1231 @@
1
+ "use client";
2
+ import { createContext, useId, useState, useCallback, useMemo, useRef, useEffect, useContext } from 'react';
3
+ import { EditorContent, ReactNodeViewRenderer, useEditorState, NodeViewWrapper } from '@tiptap/react';
4
+ import { clsx } from 'clsx';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { Slot, Label as Label$1, DropdownMenu as DropdownMenu$1, Dialog as Dialog$1 } from 'radix-ui';
7
+ import { jsx, jsxs } from 'react/jsx-runtime';
8
+ import { cva } from 'class-variance-authority';
9
+ import { Trash2, Ban, ChevronDown, Check, LoaderCircle, XIcon, UploadIcon, ExternalLink, Pencil, Unlink } from 'lucide-react';
10
+ import { motion, AnimatePresence } from 'motion/react';
11
+ import { useDropzone } from 'react-dropzone';
12
+ import { BubbleMenu } from '@tiptap/react/menus';
13
+ import { Image } from '@tiptap/extension-image';
14
+
15
+ // src/components/compounds/RichTextEditor/rich-text-editor.tsx
16
+ function cn(...inputs) {
17
+ return twMerge(clsx(inputs));
18
+ }
19
+ function Label({ className, ...props }) {
20
+ return /* @__PURE__ */ jsx(
21
+ Label$1.Root,
22
+ {
23
+ "data-slot": "label",
24
+ className: cn(
25
+ "text-foreground text-sm leading-6 font-medium transition-colors select-none",
26
+ "group-has-disabled/field:cursor-not-allowed group-has-disabled/field:opacity-50",
27
+ "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
28
+ "aria-invalid:text-destructive dark:aria-invalid:text-destructive/90",
29
+ className
30
+ ),
31
+ ...props
32
+ }
33
+ );
34
+ }
35
+ var buttonVariants = cva(
36
+ "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 data-[loading]:cursor-not-allowed data-[loading]:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0",
37
+ {
38
+ variants: {
39
+ variant: {
40
+ primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
41
+ secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
42
+ cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
43
+ outline: "border border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
44
+ ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30 border-none",
45
+ cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
46
+ },
47
+ size: {
48
+ sm: "h-8 px-3 text-xs",
49
+ md: "h-9 px-4 text-sm",
50
+ lg: "h-10 px-6 text-sm",
51
+ "icon-sm": "size-8 rounded-full p-0"
52
+ }
53
+ },
54
+ defaultVariants: {
55
+ variant: "primary",
56
+ size: "md"
57
+ }
58
+ }
59
+ );
60
+ function Button({
61
+ className,
62
+ variant = "primary",
63
+ size = "md",
64
+ asChild = false,
65
+ isLoading = false,
66
+ children,
67
+ onClick,
68
+ ...props
69
+ }) {
70
+ const Comp = asChild ? Slot.Root : "button";
71
+ function handleClick(e) {
72
+ if (isLoading) {
73
+ e.preventDefault();
74
+ return;
75
+ }
76
+ onClick?.(e);
77
+ }
78
+ return /* @__PURE__ */ jsxs(
79
+ Comp,
80
+ {
81
+ "data-slot": "button",
82
+ "data-variant": variant,
83
+ "data-size": size,
84
+ "data-loading": isLoading || void 0,
85
+ "aria-busy": isLoading || void 0,
86
+ className: cn(buttonVariants({ variant, size, className })),
87
+ onClick: handleClick,
88
+ ...props,
89
+ children: [
90
+ isLoading && /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin", "aria-hidden": "true" }),
91
+ children
92
+ ]
93
+ }
94
+ );
95
+ }
96
+ function RichTextToolbar({ editor, items }) {
97
+ return /* @__PURE__ */ jsx(
98
+ "div",
99
+ {
100
+ role: "toolbar",
101
+ "data-slot": "rich-text-toolbar",
102
+ className: "flex items-center gap-1 rounded-t-md border border-b-0 p-1",
103
+ children: items.map((item, index) => {
104
+ if (item.kind === "separator") {
105
+ return /* @__PURE__ */ jsx(
106
+ "div",
107
+ {
108
+ "data-slot": "rich-text-toolbar-separator",
109
+ "aria-hidden": "true",
110
+ className: "bg-border mx-1 h-5 w-px"
111
+ },
112
+ `separator-${index}`
113
+ );
114
+ }
115
+ if (item.kind === "custom") {
116
+ return /* @__PURE__ */ jsx("span", { children: item.render(editor) }, item.id);
117
+ }
118
+ const active = item.active ? editor?.isActive(item.active.name, item.active.attrs) ?? false : false;
119
+ return /* @__PURE__ */ jsx(
120
+ Button,
121
+ {
122
+ type: "button",
123
+ size: "sm",
124
+ variant: active ? "secondary" : "ghost",
125
+ disabled: !editor,
126
+ title: item.label,
127
+ "aria-label": item.label,
128
+ "aria-pressed": item.active ? active : void 0,
129
+ "data-slot": "rich-text-toolbar-button",
130
+ onClick: () => editor && item.run(editor),
131
+ children: item.icon
132
+ },
133
+ item.id
134
+ );
135
+ })
136
+ }
137
+ );
138
+ }
139
+ var EDITOR_CONTENT_STYLE = cn(
140
+ "min-h-[220px] px-3 py-2 text-sm outline-none",
141
+ "[&_h2]:text-lg [&_h2]:font-semibold",
142
+ "[&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-5",
143
+ "[&_blockquote]:border-secondary [&_blockquote]:my-4 [&_blockquote]:ml-4 [&_blockquote]:border-l-4 [&_blockquote]:pl-2",
144
+ "[&_a]:text-primary [&_a]:underline",
145
+ // last-of-type, not last-child: prosemirror-tables appends its
146
+ // .column-resize-handle widget inside the hovered cell, which makes the
147
+ // cell's <p> stop matching :last-child and springs mb-4 back on — the row
148
+ // grows 16px on hover. The handle is absolutely positioned but still counts
149
+ // as a child for structural selectors.
150
+ "[&_p]:mb-4 [&_p]:min-h-[1.25em] [&_p:last-of-type]:mb-0",
151
+ // Paragraphs inside a quote sit closer together than body copy. Every Enter
152
+ // inside a blockquote opens a new <p>, and at the body's mb-4 the lines of a
153
+ // single quote read as separate paragraphs. Declared after the rule above so
154
+ // it wins on equal specificity.
155
+ "[&_blockquote_p]:mb-1 [&_blockquote_p:last-of-type]:mb-0",
156
+ "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-md",
157
+ "[&_table]:my-3 [&_table]:w-full [&_table]:table-fixed [&_table]:border-collapse",
158
+ "[&_td]:relative [&_td]:border [&_td]:px-2 [&_td]:py-1 [&_td]:align-top",
159
+ "[&_th]:bg-muted [&_th]:relative [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
160
+ "[&_.selectedCell]:bg-primary/10",
161
+ // prosemirror-tables renders one handle PER ROW, so the column reads as a
162
+ // single bar down the table. At full primary it looked like the table had
163
+ // broken rather than like something to grab — hence the muted tint and the
164
+ // wider, border-straddling hit area (matches upstream's 4px).
165
+ "[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none [&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:bottom-0 [&_.column-resize-handle]:z-20 [&_.column-resize-handle]:w-1",
166
+ "[&.resize-cursor]:cursor-col-resize",
167
+ // Selected-node outline, scoped away from images.
168
+ //
169
+ // ProseMirror marks whichever node is selected, and this ring is the only
170
+ // cue for most of them — but an image already announces its selection with a
171
+ // visible resize handle, so the extra box only framed the picture.
172
+ //
173
+ // Excluded via `.node-image`, the class Tiptap puts on the wrapper it
174
+ // generates for a node view (`div.react-renderer.node-<name>`). That wrapper,
175
+ // not the NodeViewWrapper inside it, is what receives
176
+ // ProseMirror-selectednode — so a data-slot on our own element sits one level
177
+ // too deep to match.
178
+ "[&_.ProseMirror-selectednode:not(.node-image)]:outline-primary [&_.ProseMirror-selectednode:not(.node-image)]:outline-2 [&_.ProseMirror-selectednode:not(.node-image)]:outline-offset-2 [&_.ProseMirror-selectednode:not(.node-image)]:outline"
179
+ );
180
+ function RichTextEditor({ editor, items, label, error, footer, className }) {
181
+ const errorId = useId();
182
+ return /* @__PURE__ */ jsxs("div", { "data-slot": "rich-text-editor", className: cn("flex flex-col gap-1", className), children: [
183
+ label && /* @__PURE__ */ jsx(Label, { children: label }),
184
+ /* @__PURE__ */ jsx(RichTextToolbar, { editor, items }),
185
+ /* @__PURE__ */ jsx(
186
+ EditorContent,
187
+ {
188
+ editor,
189
+ "aria-invalid": !!error,
190
+ "aria-errormessage": error ? errorId : void 0,
191
+ onClick: () => editor?.commands.focus(),
192
+ className: cn(
193
+ "rounded-t-none rounded-b-md border shadow-xs",
194
+ "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-3",
195
+ error && "border-destructive"
196
+ )
197
+ }
198
+ ),
199
+ error && /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }),
200
+ footer
201
+ ] });
202
+ }
203
+ function DropdownMenu({ ...props }) {
204
+ return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { ...props });
205
+ }
206
+ function DropdownMenuTrigger({
207
+ ...props
208
+ }) {
209
+ return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
210
+ }
211
+ function DropdownMenuContent({
212
+ className,
213
+ align = "start",
214
+ sideOffset = 4,
215
+ ...props
216
+ }) {
217
+ return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
218
+ DropdownMenu$1.Content,
219
+ {
220
+ "data-slot": "dropdown-menu-content",
221
+ sideOffset,
222
+ align,
223
+ className: cn(
224
+ "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100 data-[state=closed]:overflow-hidden",
225
+ className
226
+ ),
227
+ ...props
228
+ }
229
+ ) });
230
+ }
231
+ function DropdownMenuItem({
232
+ className,
233
+ inset,
234
+ variant = "default",
235
+ ...props
236
+ }) {
237
+ return /* @__PURE__ */ jsx(
238
+ DropdownMenu$1.Item,
239
+ {
240
+ "data-slot": "dropdown-menu-item",
241
+ "data-inset": inset,
242
+ "data-variant": variant,
243
+ className: cn(
244
+ "group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
245
+ className
246
+ ),
247
+ ...props
248
+ }
249
+ );
250
+ }
251
+ function DropdownMenuSeparator({
252
+ className,
253
+ ...props
254
+ }) {
255
+ return /* @__PURE__ */ jsx(
256
+ DropdownMenu$1.Separator,
257
+ {
258
+ "data-slot": "dropdown-menu-separator",
259
+ className: cn("bg-border/50 -mx-1.5 my-1.5 h-px", className),
260
+ ...props
261
+ }
262
+ );
263
+ }
264
+ var DEFAULT_ROWS = 8;
265
+ var DEFAULT_COLUMNS = 10;
266
+ function TableMenu({
267
+ editor,
268
+ labels,
269
+ icon,
270
+ maxRows = DEFAULT_ROWS,
271
+ maxColumns = DEFAULT_COLUMNS
272
+ }) {
273
+ const [hovered, setHovered] = useState({ rows: 0, columns: 0 });
274
+ const insideTable = editor?.can().deleteTable() ?? false;
275
+ function insert(rows, columns) {
276
+ editor?.chain().focus().insertTable({ rows, cols: columns, withHeaderRow: true }).run();
277
+ }
278
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
279
+ /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
280
+ Button,
281
+ {
282
+ type: "button",
283
+ size: "sm",
284
+ variant: editor?.isActive("table") ? "secondary" : "ghost",
285
+ disabled: !editor,
286
+ title: labels.trigger,
287
+ "aria-label": labels.trigger,
288
+ "data-slot": "table-menu-trigger",
289
+ children: icon
290
+ }
291
+ ) }),
292
+ /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
293
+ /* @__PURE__ */ jsxs("div", { role: "none", className: "px-2 py-1.5", children: [
294
+ /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-1.5 text-xs", children: labels.insert }),
295
+ /* @__PURE__ */ jsx(
296
+ "div",
297
+ {
298
+ className: "grid gap-0.5",
299
+ style: { gridTemplateColumns: `repeat(${maxColumns}, 1fr)` },
300
+ onMouseLeave: () => setHovered({ rows: 0, columns: 0 }),
301
+ children: Array.from({ length: maxRows * maxColumns }, (_, index) => {
302
+ const rows = Math.floor(index / maxColumns) + 1;
303
+ const columns = index % maxColumns + 1;
304
+ const active = rows <= hovered.rows && columns <= hovered.columns;
305
+ return /* @__PURE__ */ jsx(
306
+ "button",
307
+ {
308
+ type: "button",
309
+ "aria-label": labels.dimensions(rows, columns),
310
+ className: cn(
311
+ "h-3.5 w-3.5 cursor-pointer rounded-[2px] border",
312
+ active ? "bg-primary border-primary" : "bg-background"
313
+ ),
314
+ onMouseEnter: () => setHovered({ rows, columns }),
315
+ onFocus: () => setHovered({ rows, columns }),
316
+ onClick: () => insert(rows, columns)
317
+ },
318
+ index
319
+ );
320
+ })
321
+ }
322
+ ),
323
+ /* @__PURE__ */ jsx(
324
+ "p",
325
+ {
326
+ "aria-live": "polite",
327
+ "data-slot": "table-menu-dimensions",
328
+ className: "text-muted-foreground mt-1.5 text-xs tabular-nums",
329
+ children: labels.dimensions(hovered.rows, hovered.columns)
330
+ }
331
+ )
332
+ ] }),
333
+ /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
334
+ /* @__PURE__ */ jsx(
335
+ DropdownMenuItem,
336
+ {
337
+ className: "cursor-pointer",
338
+ disabled: !insideTable,
339
+ onSelect: () => editor?.chain().focus().addRowBefore().run(),
340
+ children: labels.rowBefore
341
+ }
342
+ ),
343
+ /* @__PURE__ */ jsx(
344
+ DropdownMenuItem,
345
+ {
346
+ className: "cursor-pointer",
347
+ disabled: !insideTable,
348
+ onSelect: () => editor?.chain().focus().addRowAfter().run(),
349
+ children: labels.rowAfter
350
+ }
351
+ ),
352
+ /* @__PURE__ */ jsx(
353
+ DropdownMenuItem,
354
+ {
355
+ className: "cursor-pointer",
356
+ variant: "destructive",
357
+ disabled: !insideTable,
358
+ onSelect: () => editor?.chain().focus().deleteRow().run(),
359
+ children: labels.deleteRow
360
+ }
361
+ ),
362
+ /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
363
+ /* @__PURE__ */ jsx(
364
+ DropdownMenuItem,
365
+ {
366
+ className: "cursor-pointer",
367
+ disabled: !insideTable,
368
+ onSelect: () => editor?.chain().focus().addColumnBefore().run(),
369
+ children: labels.columnBefore
370
+ }
371
+ ),
372
+ /* @__PURE__ */ jsx(
373
+ DropdownMenuItem,
374
+ {
375
+ className: "cursor-pointer",
376
+ disabled: !insideTable,
377
+ onSelect: () => editor?.chain().focus().addColumnAfter().run(),
378
+ children: labels.columnAfter
379
+ }
380
+ ),
381
+ /* @__PURE__ */ jsx(
382
+ DropdownMenuItem,
383
+ {
384
+ className: "cursor-pointer",
385
+ variant: "destructive",
386
+ disabled: !insideTable,
387
+ onSelect: () => editor?.chain().focus().deleteColumn().run(),
388
+ children: labels.deleteColumn
389
+ }
390
+ ),
391
+ /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
392
+ /* @__PURE__ */ jsx(
393
+ DropdownMenuItem,
394
+ {
395
+ className: "cursor-pointer",
396
+ disabled: !insideTable,
397
+ onSelect: () => editor?.chain().focus().toggleHeaderRow().run(),
398
+ children: labels.toggleHeader
399
+ }
400
+ ),
401
+ /* @__PURE__ */ jsx(
402
+ DropdownMenuItem,
403
+ {
404
+ className: "cursor-pointer",
405
+ variant: "destructive",
406
+ disabled: !insideTable,
407
+ onSelect: () => editor?.chain().focus().deleteTable().run(),
408
+ children: labels.deleteTable
409
+ }
410
+ )
411
+ ] })
412
+ ] });
413
+ }
414
+
415
+ // src/tokens/animation.ts
416
+ var duration = {
417
+ normal: 0.25};
418
+ var ease = {
419
+ smooth: [0.4, 0, 0.2, 1]};
420
+ var spring = {
421
+ gentle: { type: "spring", stiffness: 260, damping: 28 }};
422
+ var transition = {
423
+ // Modal / dialog — más lento para dar peso al overlay
424
+ modal: {
425
+ ...spring.gentle
426
+ }};
427
+ var DialogContext = createContext(false);
428
+ function Dialog({ children, ...props }) {
429
+ const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
430
+ const isOpen = props.open !== void 0 ? props.open : internalOpen;
431
+ return /* @__PURE__ */ jsx(DialogContext.Provider, { value: isOpen, children: /* @__PURE__ */ jsx(
432
+ Dialog$1.Root,
433
+ {
434
+ "data-slot": "dialog",
435
+ open: isOpen,
436
+ onOpenChange: (v) => {
437
+ setInternalOpen(v);
438
+ props.onOpenChange?.(v);
439
+ },
440
+ ...props,
441
+ children
442
+ }
443
+ ) });
444
+ }
445
+ function DialogPortal({ children, ...props }) {
446
+ const isOpen = useContext(DialogContext);
447
+ return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
448
+ }
449
+ function DialogOverlay({ className, ...props }) {
450
+ return /* @__PURE__ */ jsx(Dialog$1.Overlay, { "data-slot": "dialog-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
451
+ motion.div,
452
+ {
453
+ className: cn(
454
+ "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
455
+ className
456
+ ),
457
+ initial: { opacity: 0 },
458
+ animate: { opacity: 1 },
459
+ exit: { opacity: 0 },
460
+ transition: { duration: duration.normal, ease: ease.smooth }
461
+ }
462
+ ) });
463
+ }
464
+ function DialogContent({
465
+ className,
466
+ children,
467
+ showCloseButton = false,
468
+ ...props
469
+ }) {
470
+ return /* @__PURE__ */ jsxs(DialogPortal, { children: [
471
+ /* @__PURE__ */ jsx(DialogOverlay, {}, "dialog-overlay"),
472
+ /* @__PURE__ */ jsx(
473
+ Dialog$1.Content,
474
+ {
475
+ "data-slot": "dialog-content",
476
+ asChild: true,
477
+ forceMount: true,
478
+ className: cn(
479
+ "bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg text-sm shadow-xl ring-1 outline-none sm:max-w-sm",
480
+ className
481
+ ),
482
+ ...props,
483
+ children: /* @__PURE__ */ jsxs(
484
+ motion.div,
485
+ {
486
+ className: "flex max-h-[85vh] flex-col",
487
+ initial: { opacity: 0, scale: 0.96, y: 8 },
488
+ animate: { opacity: 1, scale: 1, y: 0 },
489
+ exit: { opacity: 0, scale: 0.96, y: 4 },
490
+ transition: transition.modal,
491
+ children: [
492
+ children,
493
+ showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
494
+ Button,
495
+ {
496
+ variant: "ghost",
497
+ className: "absolute top-4 right-4",
498
+ size: "icon-sm",
499
+ children: [
500
+ /* @__PURE__ */ jsx(XIcon, {}),
501
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
502
+ ]
503
+ }
504
+ ) })
505
+ ]
506
+ }
507
+ )
508
+ },
509
+ "dialog-content"
510
+ )
511
+ ] });
512
+ }
513
+ function DialogHeader({ className, ...props }) {
514
+ return /* @__PURE__ */ jsx(
515
+ "div",
516
+ {
517
+ "data-slot": "dialog-header",
518
+ className: cn("flex shrink-0 flex-col gap-3 px-6 pt-6", className),
519
+ ...props
520
+ }
521
+ );
522
+ }
523
+ function DialogFooter({
524
+ className,
525
+ showCloseButton = false,
526
+ children,
527
+ ...props
528
+ }) {
529
+ return /* @__PURE__ */ jsxs(
530
+ "div",
531
+ {
532
+ "data-slot": "dialog-footer",
533
+ className: cn(
534
+ "border-border bg-muted/40 flex shrink-0 flex-wrap items-center justify-end gap-2 rounded-b-lg border-t px-6 pt-4 pb-4",
535
+ className
536
+ ),
537
+ ...props,
538
+ children: [
539
+ children,
540
+ showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Close" }) })
541
+ ]
542
+ }
543
+ );
544
+ }
545
+ function DialogTitle({ className, ...props }) {
546
+ return /* @__PURE__ */ jsx(
547
+ Dialog$1.Title,
548
+ {
549
+ "data-slot": "dialog-title",
550
+ className: cn("font-heading text-lg leading-none font-bold", className),
551
+ ...props
552
+ }
553
+ );
554
+ }
555
+ var renderBytes = (bytes) => {
556
+ const units = ["B", "KB", "MB", "GB", "TB", "PB"];
557
+ let size = bytes;
558
+ let unitIndex = 0;
559
+ while (size >= 1024 && unitIndex < units.length - 1) {
560
+ size /= 1024;
561
+ unitIndex++;
562
+ }
563
+ return `${size.toFixed(2)}${units[unitIndex]}`;
564
+ };
565
+ var DropzoneContext = createContext(void 0);
566
+ var dropzoneVariants = cva("", {
567
+ variants: {
568
+ border: {
569
+ default: "border border-solid border-foreground/15",
570
+ dashed: "border-dashed border-foreground/50"
571
+ }
572
+ },
573
+ defaultVariants: {
574
+ border: "default"
575
+ }
576
+ });
577
+ var Dropzone = ({
578
+ accept,
579
+ maxFiles = 1,
580
+ maxSize,
581
+ minSize,
582
+ onDrop,
583
+ onError,
584
+ disabled,
585
+ src,
586
+ className,
587
+ children,
588
+ border,
589
+ ...props
590
+ }) => {
591
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
592
+ accept,
593
+ maxFiles,
594
+ maxSize,
595
+ minSize,
596
+ onError,
597
+ disabled,
598
+ onDrop: (acceptedFiles, fileRejections, event) => {
599
+ if (fileRejections.length > 0) {
600
+ const message = fileRejections.at(0)?.errors.at(0)?.message;
601
+ onError?.(new Error(message));
602
+ }
603
+ if (acceptedFiles.length > 0) {
604
+ onDrop?.(acceptedFiles, fileRejections, event);
605
+ }
606
+ },
607
+ ...props
608
+ });
609
+ return /* @__PURE__ */ jsx(
610
+ DropzoneContext.Provider,
611
+ {
612
+ value: { src, accept, maxSize, minSize, maxFiles },
613
+ children: /* @__PURE__ */ jsxs(
614
+ Button,
615
+ {
616
+ "data-slot": "dropzone",
617
+ "data-border": border ?? "default",
618
+ className: cn(
619
+ "cursor-auto relative h-auto w-full flex-col overflow-hidden p-8",
620
+ dropzoneVariants({ border }),
621
+ isDragActive && "bg-foreground/10 outline-none",
622
+ className
623
+ ),
624
+ disabled,
625
+ type: "button",
626
+ variant: "ghost",
627
+ ...getRootProps(),
628
+ children: [
629
+ /* @__PURE__ */ jsx("input", { ...getInputProps(), disabled }),
630
+ children
631
+ ]
632
+ }
633
+ )
634
+ },
635
+ JSON.stringify(src)
636
+ );
637
+ };
638
+ var useDropzoneContext = () => {
639
+ const context = useContext(DropzoneContext);
640
+ if (!context) {
641
+ throw new Error("useDropzoneContext must be used within a Dropzone");
642
+ }
643
+ return context;
644
+ };
645
+ var maxLabelItems = 3;
646
+ var DropzoneContent = ({ children, className }) => {
647
+ const { src } = useDropzoneContext();
648
+ if (!src) {
649
+ return null;
650
+ }
651
+ if (children) {
652
+ return children;
653
+ }
654
+ return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center", className), children: [
655
+ /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
656
+ /* @__PURE__ */ jsx("p", { className: "text-foreground my-2 w-full truncate text-sm font-medium", children: src.length > maxLabelItems ? `${new Intl.ListFormat("en").format(
657
+ src.slice(0, maxLabelItems).map((file) => file.name)
658
+ )} and ${src.length - maxLabelItems} more` : new Intl.ListFormat("en").format(src.map((file) => file.name)) }),
659
+ /* @__PURE__ */ jsx("p", { className: "text-muted-foreground w-full text-xs font-normal text-wrap", children: "Drag and drop or click to replace" })
660
+ ] });
661
+ };
662
+ var DropzoneEmptyState = ({ children, className }) => {
663
+ const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
664
+ if (src) {
665
+ return null;
666
+ }
667
+ if (children) {
668
+ return children;
669
+ }
670
+ let caption = "";
671
+ if (accept) {
672
+ caption += "Accepts ";
673
+ caption += new Intl.ListFormat("en").format(Object.keys(accept));
674
+ }
675
+ if (minSize && maxSize) {
676
+ caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
677
+ } else if (minSize) {
678
+ caption += ` at least ${renderBytes(minSize)}`;
679
+ } else if (maxSize) {
680
+ caption += ` less than ${renderBytes(maxSize)}`;
681
+ }
682
+ return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center", className), children: [
683
+ /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
684
+ /* @__PURE__ */ jsxs("p", { className: "text-foreground my-2 w-full text-center text-sm font-medium text-wrap", children: [
685
+ "Upload ",
686
+ maxFiles === 1 ? "a file" : "files"
687
+ ] }),
688
+ /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-xs font-normal text-wrap", children: "Drag and drop or click to upload" }),
689
+ caption && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs font-normal text-wrap", children: [
690
+ caption,
691
+ "."
692
+ ] })
693
+ ] });
694
+ };
695
+ function Input({ className, type, ...props }) {
696
+ return /* @__PURE__ */ jsx(
697
+ "input",
698
+ {
699
+ type,
700
+ "data-slot": "input",
701
+ className: cn(
702
+ "border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
703
+ "placeholder:text-muted-foreground",
704
+ "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
705
+ "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
706
+ "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
707
+ "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
708
+ className
709
+ ),
710
+ ...props
711
+ }
712
+ );
713
+ }
714
+ var DEFAULT_MAX_SIZE = 5 * 1024 * 1024;
715
+ var DEFAULT_ACCEPT = { "image/*": [".png", ".jpg", ".jpeg", ".webp"] };
716
+ function InsertImageDialog({
717
+ open,
718
+ onOpenChange,
719
+ labels,
720
+ url,
721
+ onUrlChange,
722
+ alt,
723
+ onAltChange,
724
+ file,
725
+ onFileChange,
726
+ uploading,
727
+ onApply,
728
+ onCancel,
729
+ removable = false,
730
+ onRemove,
731
+ maxSizeBytes = DEFAULT_MAX_SIZE,
732
+ accept = DEFAULT_ACCEPT
733
+ }) {
734
+ const urlId = useId();
735
+ const altId = useId();
736
+ const canApply = Boolean(file || url.trim()) && Boolean(alt.trim()) && !uploading;
737
+ return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "px-4 py-2", "data-slot": "insert-image-dialog", children: [
738
+ /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
739
+ /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3", children: [
740
+ /* @__PURE__ */ jsxs(
741
+ Dropzone,
742
+ {
743
+ accept,
744
+ maxFiles: 1,
745
+ maxSize: maxSizeBytes,
746
+ disabled: uploading,
747
+ src: file ? [file] : [],
748
+ onDrop: (files) => onFileChange(files[0] ?? null),
749
+ children: [
750
+ /* @__PURE__ */ jsx(DropzoneEmptyState, {}),
751
+ /* @__PURE__ */ jsx(DropzoneContent, {})
752
+ ]
753
+ }
754
+ ),
755
+ file && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: file.name }),
756
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
757
+ /* @__PURE__ */ jsx(Label, { htmlFor: urlId, children: labels.urlLabel }),
758
+ /* @__PURE__ */ jsx(
759
+ Input,
760
+ {
761
+ id: urlId,
762
+ placeholder: labels.urlPlaceholder,
763
+ value: url,
764
+ onChange: (event) => onUrlChange(event.target.value),
765
+ onKeyDown: (event) => {
766
+ if (event.key === "Enter" && canApply) {
767
+ event.preventDefault();
768
+ onApply();
769
+ }
770
+ }
771
+ }
772
+ )
773
+ ] }),
774
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
775
+ /* @__PURE__ */ jsx(Label, { htmlFor: altId, children: labels.altLabel }),
776
+ /* @__PURE__ */ jsx(
777
+ Input,
778
+ {
779
+ id: altId,
780
+ value: alt,
781
+ onChange: (event) => onAltChange(event.target.value)
782
+ }
783
+ )
784
+ ] }),
785
+ /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: labels.hint })
786
+ ] }),
787
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
788
+ removable && onRemove && /* @__PURE__ */ jsxs(
789
+ Button,
790
+ {
791
+ type: "button",
792
+ variant: "ghost",
793
+ className: "text-destructive",
794
+ onClick: onRemove,
795
+ children: [
796
+ /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
797
+ labels.remove
798
+ ]
799
+ }
800
+ ),
801
+ /* @__PURE__ */ jsx(
802
+ Button,
803
+ {
804
+ type: "button",
805
+ variant: "outline",
806
+ onClick: () => {
807
+ if (onCancel) onCancel();
808
+ else onOpenChange(false);
809
+ },
810
+ children: labels.cancel
811
+ }
812
+ ),
813
+ /* @__PURE__ */ jsx(Button, { type: "button", onClick: onApply, disabled: !canApply, children: labels.apply })
814
+ ] })
815
+ ] }) });
816
+ }
817
+ function ColorMenu({ editor, labels, icon, swatches }) {
818
+ const active = swatches.find((swatch) => editor?.isActive(swatch.mark));
819
+ function apply(mark) {
820
+ if (!editor) return;
821
+ const chain = editor.chain().focus();
822
+ for (const swatch of swatches) chain.unsetMark(swatch.mark);
823
+ if (mark) chain.setMark(mark);
824
+ chain.run();
825
+ }
826
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
827
+ /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
828
+ Button,
829
+ {
830
+ type: "button",
831
+ size: "sm",
832
+ variant: active ? "secondary" : "ghost",
833
+ disabled: !editor,
834
+ title: labels.trigger,
835
+ "aria-label": labels.trigger,
836
+ "data-slot": "color-menu-trigger",
837
+ children: icon
838
+ }
839
+ ) }),
840
+ /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-auto", children: /* @__PURE__ */ jsxs(
841
+ "div",
842
+ {
843
+ role: "group",
844
+ "aria-label": labels.heading,
845
+ className: "flex items-center gap-1.5 px-1.5 py-1",
846
+ children: [
847
+ swatches.map((swatch) => /* @__PURE__ */ jsx(
848
+ "button",
849
+ {
850
+ type: "button",
851
+ "aria-label": swatch.label,
852
+ "aria-pressed": editor?.isActive(swatch.mark) ?? false,
853
+ title: swatch.label,
854
+ style: { backgroundColor: swatch.preview },
855
+ className: cn(
856
+ "h-7 w-7 cursor-pointer rounded-full border transition-transform",
857
+ "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
858
+ editor?.isActive(swatch.mark) ? "border-primary scale-110 border-2" : "border-border/60 hover:scale-110"
859
+ ),
860
+ onClick: () => apply(swatch.mark)
861
+ },
862
+ swatch.mark
863
+ )),
864
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-border mx-0.5 h-5 w-px" }),
865
+ /* @__PURE__ */ jsx(
866
+ "button",
867
+ {
868
+ type: "button",
869
+ "aria-label": labels.clear,
870
+ title: labels.clear,
871
+ disabled: !active,
872
+ className: cn(
873
+ "text-muted-foreground flex h-7 w-7 cursor-pointer items-center justify-center rounded-full",
874
+ "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
875
+ "hover:text-foreground disabled:cursor-default disabled:opacity-40"
876
+ ),
877
+ onClick: () => apply(""),
878
+ children: /* @__PURE__ */ jsx(Ban, { className: "h-4 w-4" })
879
+ }
880
+ )
881
+ ]
882
+ }
883
+ ) })
884
+ ] });
885
+ }
886
+ function ListMenu({ editor, triggerLabel, icon, options }) {
887
+ const active = options.find((option) => editor?.isActive(option.node));
888
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
889
+ /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
890
+ Button,
891
+ {
892
+ type: "button",
893
+ size: "sm",
894
+ variant: active ? "secondary" : "ghost",
895
+ disabled: !editor,
896
+ title: active ? active.label : triggerLabel,
897
+ "aria-label": active ? active.label : triggerLabel,
898
+ "data-slot": "list-menu-trigger",
899
+ children: [
900
+ active ? active.icon : icon,
901
+ /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-60" })
902
+ ]
903
+ }
904
+ ) }),
905
+ /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: options.map((option) => {
906
+ const isActive = editor?.isActive(option.node) ?? false;
907
+ return /* @__PURE__ */ jsxs(
908
+ DropdownMenuItem,
909
+ {
910
+ disabled: !editor,
911
+ className: "cursor-pointer",
912
+ onSelect: () => editor && option.run(editor),
913
+ children: [
914
+ option.icon,
915
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label }),
916
+ /* @__PURE__ */ jsx(
917
+ Check,
918
+ {
919
+ "aria-hidden": "true",
920
+ className: cn("h-4 w-4", isActive ? "opacity-100" : "opacity-0")
921
+ }
922
+ )
923
+ ]
924
+ },
925
+ option.node
926
+ );
927
+ }) })
928
+ ] });
929
+ }
930
+ function InsertLinkDialog({
931
+ open,
932
+ onOpenChange,
933
+ labels,
934
+ url,
935
+ onUrlChange,
936
+ text = "",
937
+ onTextChange,
938
+ needsText = false,
939
+ onApply,
940
+ onCancel
941
+ }) {
942
+ const urlId = useId();
943
+ const textId = useId();
944
+ const canApply = needsText ? Boolean(url.trim()) && Boolean(text.trim()) : true;
945
+ function submitOnEnter(event) {
946
+ if (event.key === "Enter" && canApply) {
947
+ event.preventDefault();
948
+ onApply();
949
+ }
950
+ }
951
+ return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "px-4 py-2", "data-slot": "insert-link-dialog", children: [
952
+ /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
953
+ /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3", children: [
954
+ needsText && onTextChange && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
955
+ /* @__PURE__ */ jsx(Label, { htmlFor: textId, children: labels.textLabel }),
956
+ /* @__PURE__ */ jsx(
957
+ Input,
958
+ {
959
+ id: textId,
960
+ placeholder: labels.textPlaceholder,
961
+ value: text,
962
+ onChange: (event) => onTextChange(event.target.value),
963
+ onKeyDown: submitOnEnter
964
+ }
965
+ )
966
+ ] }),
967
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
968
+ /* @__PURE__ */ jsx(Label, { htmlFor: urlId, children: labels.urlLabel }),
969
+ /* @__PURE__ */ jsx(
970
+ Input,
971
+ {
972
+ id: urlId,
973
+ placeholder: labels.urlPlaceholder,
974
+ value: url,
975
+ onChange: (event) => onUrlChange(event.target.value),
976
+ onKeyDown: submitOnEnter
977
+ }
978
+ ),
979
+ !needsText && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: labels.hint })
980
+ ] })
981
+ ] }),
982
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
983
+ /* @__PURE__ */ jsx(
984
+ Button,
985
+ {
986
+ type: "button",
987
+ variant: "outline",
988
+ onClick: () => {
989
+ if (onCancel) onCancel();
990
+ else onOpenChange(false);
991
+ },
992
+ children: labels.cancel
993
+ }
994
+ ),
995
+ /* @__PURE__ */ jsx(Button, { type: "button", onClick: onApply, disabled: !canApply, children: labels.apply })
996
+ ] })
997
+ ] }) });
998
+ }
999
+ function LinkActions({ editor, labels, onEdit, onOpen }) {
1000
+ const href = useEditorState({
1001
+ editor,
1002
+ selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
1003
+ });
1004
+ return /* @__PURE__ */ jsxs(
1005
+ "div",
1006
+ {
1007
+ "data-slot": "link-bubble-menu",
1008
+ className: "bg-popover text-popover-foreground flex items-center gap-1 rounded-md border p-1 shadow-md",
1009
+ children: [
1010
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
1011
+ /* @__PURE__ */ jsx(
1012
+ Button,
1013
+ {
1014
+ type: "button",
1015
+ size: "sm",
1016
+ variant: "ghost",
1017
+ title: labels.open,
1018
+ "aria-label": labels.open,
1019
+ disabled: !href,
1020
+ onClick: () => {
1021
+ if (!href) return;
1022
+ if (onOpen) {
1023
+ onOpen(href);
1024
+ return;
1025
+ }
1026
+ window.open(href, "_blank", "noopener,noreferrer");
1027
+ },
1028
+ children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
1029
+ }
1030
+ ),
1031
+ /* @__PURE__ */ jsx(
1032
+ Button,
1033
+ {
1034
+ type: "button",
1035
+ size: "sm",
1036
+ variant: "ghost",
1037
+ title: labels.edit,
1038
+ "aria-label": labels.edit,
1039
+ onClick: onEdit,
1040
+ children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
1041
+ }
1042
+ ),
1043
+ /* @__PURE__ */ jsx(
1044
+ Button,
1045
+ {
1046
+ type: "button",
1047
+ size: "sm",
1048
+ variant: "ghost",
1049
+ className: "text-destructive",
1050
+ title: labels.remove,
1051
+ "aria-label": labels.remove,
1052
+ onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
1053
+ children: /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
1054
+ }
1055
+ )
1056
+ ]
1057
+ }
1058
+ );
1059
+ }
1060
+ function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
1061
+ const shouldShow = useCallback(
1062
+ // Only while the caret is actually in a link — otherwise this bar would
1063
+ // compete with any other bubble menu the consumer adds.
1064
+ ({ editor: current }) => current.isActive("link"),
1065
+ []
1066
+ );
1067
+ const options = useMemo(() => ({ placement: "bottom", offset: 8 }), []);
1068
+ if (!editor) return null;
1069
+ return /* @__PURE__ */ jsx(BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
1070
+ }
1071
+ var DEFAULT_MIN_WIDTH = 120;
1072
+ var DEFAULT_START_WIDTH = 400;
1073
+ var DEFAULT_RATIO = 4 / 3;
1074
+ var KEYBOARD_STEP = 20;
1075
+ function ResizableImageView({ node, updateAttributes, selected, extension }) {
1076
+ const { src, alt, width, height } = node.attrs;
1077
+ const sizeRef = useRef({ width, height });
1078
+ sizeRef.current = { width, height };
1079
+ const { resizeLabel, minWidth = DEFAULT_MIN_WIDTH } = extension.options;
1080
+ const dragRef = useRef(null);
1081
+ const [dragging, setDragging] = useState(false);
1082
+ const resizeTo = useCallback(
1083
+ (nextWidth, ratio, maxWidth) => {
1084
+ const clamped = Math.max(minWidth, Math.min(Math.round(nextWidth), maxWidth));
1085
+ updateAttributes({ width: clamped, height: Math.round(clamped / ratio) });
1086
+ },
1087
+ [minWidth, updateAttributes]
1088
+ );
1089
+ const measure = useCallback((handle) => {
1090
+ const image = handle.parentElement?.querySelector("img") ?? null;
1091
+ const current = sizeRef.current;
1092
+ const editable = handle.closest(".ProseMirror");
1093
+ const available = editable?.clientWidth ?? 0;
1094
+ const naturalWidth = image?.naturalWidth ?? 0;
1095
+ const naturalHeight = image?.naturalHeight ?? 0;
1096
+ const ratio = current.width > 0 && current.height > 0 ? current.width / current.height : naturalWidth > 0 && naturalHeight > 0 ? naturalWidth / naturalHeight : DEFAULT_RATIO;
1097
+ const unbounded = current.width > 0 ? current.width : naturalWidth || DEFAULT_START_WIDTH;
1098
+ const startWidth = available > 0 ? Math.min(unbounded, available) : unbounded;
1099
+ return {
1100
+ width: startWidth,
1101
+ ratio,
1102
+ // jsdom reports clientWidth as 0, so a zero measure means "no
1103
+ // constraint" — the real clamp only applies in a browser.
1104
+ maxWidth: available > 0 ? available : Infinity
1105
+ };
1106
+ }, []);
1107
+ const imageRef = useRef(null);
1108
+ const fittedSrcRef = useRef(null);
1109
+ useEffect(() => {
1110
+ const img = imageRef.current;
1111
+ if (!img) return;
1112
+ if (sizeRef.current.width > 0 || fittedSrcRef.current === src) return;
1113
+ const fit = () => {
1114
+ const available = img.closest(".ProseMirror")?.clientWidth ?? 0;
1115
+ if (!img.naturalWidth || !img.naturalHeight || available <= 0) return;
1116
+ fittedSrcRef.current = src;
1117
+ const nextWidth = Math.min(img.naturalWidth, available);
1118
+ updateAttributes({
1119
+ width: nextWidth,
1120
+ height: Math.round(nextWidth / (img.naturalWidth / img.naturalHeight))
1121
+ });
1122
+ };
1123
+ if (img.complete) {
1124
+ fit();
1125
+ return;
1126
+ }
1127
+ img.addEventListener("load", fit, { once: true });
1128
+ return () => img.removeEventListener("load", fit);
1129
+ }, [src, updateAttributes]);
1130
+ const onPointerDown = useCallback(
1131
+ (event) => {
1132
+ event.preventDefault();
1133
+ event.stopPropagation();
1134
+ const start = measure(event.currentTarget);
1135
+ dragRef.current = { startX: event.clientX, ...start };
1136
+ setDragging(true);
1137
+ const onMove = (moveEvent) => {
1138
+ const drag = dragRef.current;
1139
+ if (!drag) return;
1140
+ resizeTo(drag.width + (moveEvent.clientX - drag.startX), drag.ratio, drag.maxWidth);
1141
+ };
1142
+ const onUp = () => {
1143
+ dragRef.current = null;
1144
+ setDragging(false);
1145
+ window.removeEventListener("pointermove", onMove);
1146
+ window.removeEventListener("pointerup", onUp);
1147
+ };
1148
+ window.addEventListener("pointermove", onMove);
1149
+ window.addEventListener("pointerup", onUp);
1150
+ },
1151
+ [measure, resizeTo]
1152
+ );
1153
+ const onKeyDown = useCallback(
1154
+ (event) => {
1155
+ const step = event.key === "ArrowRight" ? KEYBOARD_STEP : event.key === "ArrowLeft" ? -KEYBOARD_STEP : 0;
1156
+ if (step === 0) return;
1157
+ event.preventDefault();
1158
+ const start = measure(event.currentTarget);
1159
+ resizeTo(start.width + step, start.ratio, start.maxWidth);
1160
+ },
1161
+ [measure, resizeTo]
1162
+ );
1163
+ const sizeStyle = width > 0 ? { width, height: height > 0 ? height : void 0, maxWidth: "100%" } : void 0;
1164
+ return /* @__PURE__ */ jsxs(
1165
+ NodeViewWrapper,
1166
+ {
1167
+ "data-slot": "resizable-image",
1168
+ className: "group relative inline-block max-w-full",
1169
+ children: [
1170
+ /* @__PURE__ */ jsx(
1171
+ "img",
1172
+ {
1173
+ ref: imageRef,
1174
+ src,
1175
+ alt,
1176
+ className: "max-w-full rounded-md",
1177
+ style: sizeStyle,
1178
+ draggable: false
1179
+ }
1180
+ ),
1181
+ /* @__PURE__ */ jsx(
1182
+ "div",
1183
+ {
1184
+ role: "button",
1185
+ tabIndex: 0,
1186
+ "aria-label": resizeLabel,
1187
+ title: resizeLabel,
1188
+ "data-slot": "resizable-image-handle",
1189
+ onPointerDown,
1190
+ onKeyDown,
1191
+ className: cn(
1192
+ "border-primary absolute -right-1 -bottom-1 h-4 w-4 cursor-se-resize touch-none rounded-full border-2 bg-white transition-opacity",
1193
+ "focus-visible:ring-ring/50 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none",
1194
+ dragging || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
1195
+ )
1196
+ }
1197
+ )
1198
+ ]
1199
+ }
1200
+ );
1201
+ }
1202
+ function createResizableImage(options) {
1203
+ return Image.extend({
1204
+ addOptions() {
1205
+ return { ...this.parent(), ...options };
1206
+ },
1207
+ // The size attributes belong to the extension, not to the consumer: the
1208
+ // stock Image extension keeps width/height too, but they default to null
1209
+ // and render as HTML attributes, which pins the image to a fixed size.
1210
+ //
1211
+ // A numeric default with `rendered: false` is what makes resizing work
1212
+ // at all — Tiptap v3 gates DOM emission on `rendered`, so the size stays
1213
+ // out of the markup and lives only in the document JSON, where a
1214
+ // serializer can read it. Without these declarations the schema drops
1215
+ // every updateAttributes({ width }) call and the handle does nothing.
1216
+ addAttributes() {
1217
+ return {
1218
+ ...this.parent?.(),
1219
+ width: { default: 0, rendered: false },
1220
+ height: { default: 0, rendered: false }
1221
+ };
1222
+ },
1223
+ addNodeView() {
1224
+ return ReactNodeViewRenderer(ResizableImageView);
1225
+ }
1226
+ });
1227
+ }
1228
+
1229
+ export { ColorMenu, EDITOR_CONTENT_STYLE, InsertImageDialog, InsertLinkDialog, LinkBubbleMenu, ListMenu, RichTextEditor, RichTextToolbar, TableMenu, createResizableImage };
1230
+ //# sourceMappingURL=editor.js.map
1231
+ //# sourceMappingURL=editor.js.map