eddyter 1.3.44 → 1.3.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/LICENSE +24 -0
  2. package/README.md +7 -1
  3. package/dist/assets/style.css +1 -7989
  4. package/dist/{babel-d155920e.js → babel-1c4a328b.js} +2278 -2303
  5. package/dist/estree-2cbea43c.js +4667 -0
  6. package/dist/html-c18fb60e.js +2841 -0
  7. package/dist/html2pdf.bundle-ffb2feaa.js +34001 -0
  8. package/dist/html2pdf.bundle.min-1455f5bc.js +21964 -0
  9. package/dist/index-02397e44.js +111 -0
  10. package/dist/index-4b2cda16.js +35136 -0
  11. package/dist/index-ed633fb3.js +1002 -0
  12. package/dist/index.js +13 -14
  13. package/dist/markdown-39c3822b.js +3547 -0
  14. package/dist/postcss-bbcc713e.js +5151 -0
  15. package/dist/standalone-36ad3877.js +2600 -0
  16. package/dist/types.d.ts +2 -0
  17. package/dist/typescript-39d06710.js +13533 -0
  18. package/dist/ui/Icons.d.ts +2 -1
  19. package/package.json +2 -1
  20. package/dist/babel-d155920e.js.map +0 -1
  21. package/dist/estree-b1fff53b.js +0 -4706
  22. package/dist/estree-b1fff53b.js.map +0 -1
  23. package/dist/html-f95ee5dc.js +0 -2885
  24. package/dist/html-f95ee5dc.js.map +0 -1
  25. package/dist/html2pdf.bundle-71c6840e.js +0 -46128
  26. package/dist/html2pdf.bundle-71c6840e.js.map +0 -1
  27. package/dist/html2pdf.bundle.min-570c9085.js +0 -21987
  28. package/dist/html2pdf.bundle.min-570c9085.js.map +0 -1
  29. package/dist/index-6eb4d179.js +0 -46618
  30. package/dist/index-6eb4d179.js.map +0 -1
  31. package/dist/index-92744040.js +0 -1282
  32. package/dist/index-92744040.js.map +0 -1
  33. package/dist/index-bb293cb2.js +0 -161
  34. package/dist/index-bb293cb2.js.map +0 -1
  35. package/dist/index.js.map +0 -1
  36. package/dist/markdown-1d9e6c3f.js +0 -3759
  37. package/dist/markdown-1d9e6c3f.js.map +0 -1
  38. package/dist/postcss-c2592f3f.js +0 -5399
  39. package/dist/postcss-c2592f3f.js.map +0 -1
  40. package/dist/standalone-bcc7f37a.js +0 -2649
  41. package/dist/standalone-bcc7f37a.js.map +0 -1
  42. package/dist/typescript-48c10f50.js +0 -13601
  43. package/dist/typescript-48c10f50.js.map +0 -1
@@ -1,1282 +0,0 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { CodeNode } from "@lexical/code";
3
- import { LinkNode } from "@lexical/link";
4
- import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
5
- import { useCollaborationContext } from "@lexical/react/LexicalCollaborationContext";
6
- import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
7
- import { ContentEditable } from "@lexical/react/LexicalContentEditable";
8
- import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
9
- import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
10
- import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
11
- import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
12
- import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
13
- import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
14
- import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
15
- import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
16
- import { RootNode, TextNode, LineBreakNode, ParagraphNode, $getSelection, $isNodeSelection, $isParagraphNode, $setSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, createCommand, $getNodeByKey } from "lexical";
17
- import { useRef, useState, useEffect, useCallback, Suspense } from "react";
18
- import { d as createLucideIcon, e as Dialog, f as DialogContent, h as DialogHeader, i as DialogTitle, j as DialogDescription, k as DialogFooter, B as Button, L as LocalStoragePlugin, l as initialConfig, m as $isImageNode, W as WrapTextLeftIcon, n as WrapTextRightIcon, A as AlignLeftIcon, o as AlignCenterIcon, p as AlignRightIcon, q as Type, r as LinkIcon, S as Sparkles, E as ExternalLinkIcon, s as TrashIcon, t as toast, u as AiJsonResponse, v as ApiKeyRequiredError, C as CreditError } from "./index-6eb4d179.js";
19
- import "axios";
20
- import "react-dom";
21
- import "@emotion/styled";
22
- import "@lexical/html";
23
- import "@lexical/react/LexicalCheckListPlugin";
24
- import "@lexical/react/LexicalComposer";
25
- import "@lexical/react/LexicalHorizontalRulePlugin";
26
- import "@lexical/react/LexicalListPlugin";
27
- import "@lexical/react/LexicalTablePlugin";
28
- import "@lexical/table";
29
- import "@lexical/list";
30
- import "@lexical/rich-text";
31
- import "@lexical/selection";
32
- import "@lexical/react/LexicalHorizontalRuleNode";
33
- import "@lexical/react/LexicalDecoratorBlockNode";
34
- import "emoji-picker-react";
35
- import "@lexical/react/LexicalLinkPlugin";
36
- import "@lexical/react/LexicalTypeaheadMenuPlugin";
37
- /**
38
- * @license lucide-react v0.344.0 - ISC
39
- *
40
- * This source code is licensed under the ISC license.
41
- * See the LICENSE file in the root directory of this source tree.
42
- */
43
- const Link2 = createLucideIcon("Link2", [
44
- ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
45
- ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
46
- ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
47
- ]);
48
- const imageCaptionStyles = "";
49
- const ImageComparisonDialog = ({
50
- open,
51
- onOpenChange,
52
- oldImageUrl,
53
- newImageUrl,
54
- onReplace,
55
- onCancel
56
- }) => {
57
- return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[800px] max-h-[90vh] overflow-y-auto", children: [
58
- /* @__PURE__ */ jsxs(DialogHeader, { children: [
59
- /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [
60
- /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "🔄" }),
61
- "Compare Images"
62
- ] }),
63
- /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm pt-1", children: "Choose whether to replace the original image with the refined version." })
64
- ] }),
65
- /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
66
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
67
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
68
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: "Refined Image" }),
69
- /* @__PURE__ */ jsx("span", { className: "text-xs px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400", children: "New" })
70
- ] }),
71
- /* @__PURE__ */ jsx("div", { className: "relative aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 border-2 border-blue-500 dark:border-blue-600", children: /* @__PURE__ */ jsx(
72
- "img",
73
- {
74
- src: newImageUrl,
75
- alt: "Refined",
76
- className: "w-full h-full object-contain"
77
- }
78
- ) })
79
- ] }) }),
80
- /* @__PURE__ */ jsx("div", { className: "p-3 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-blue-800 dark:text-blue-200", children: [
81
- /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Note:" }),
82
- ' Clicking "Replace" will update the image in your document. This action cannot be undone.'
83
- ] }) })
84
- ] }),
85
- /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
86
- /* @__PURE__ */ jsx(
87
- Button,
88
- {
89
- variant: "outline",
90
- onClick: onCancel,
91
- children: "Keep Original"
92
- }
93
- ),
94
- /* @__PURE__ */ jsxs(
95
- Button,
96
- {
97
- onClick: onReplace,
98
- className: "bg-blue-500 hover:bg-blue-600 text-white",
99
- children: [
100
- /* @__PURE__ */ jsx("span", { className: "mr-2", children: "✓" }),
101
- "Replace Image"
102
- ]
103
- }
104
- )
105
- ] })
106
- ] }) });
107
- };
108
- const signatureCaption = "";
109
- function SignatureCaption({
110
- caption
111
- }) {
112
- return /* @__PURE__ */ jsx("div", { className: "signature-caption-container", children: /* @__PURE__ */ jsxs(
113
- LexicalNestedComposer,
114
- {
115
- initialEditor: caption,
116
- initialNodes: [
117
- RootNode,
118
- TextNode,
119
- LineBreakNode,
120
- ParagraphNode,
121
- LinkNode,
122
- CodeNode
123
- ],
124
- children: [
125
- /* @__PURE__ */ jsx(
126
- RichTextPlugin,
127
- {
128
- contentEditable: /* @__PURE__ */ jsx(
129
- ContentEditable,
130
- {
131
- "aria-placeholder": "Enter signature name...",
132
- placeholder: /* @__PURE__ */ jsx("div", { style: {
133
- position: "absolute",
134
- top: "4px",
135
- left: "8px",
136
- right: "8px",
137
- textAlign: "center",
138
- pointerEvents: "none",
139
- color: "hsla(var(--cteditorf47ac10b-foreground) / 0.4)",
140
- fontStyle: "italic"
141
- }, children: "Enter signature name..." }),
142
- className: "signature-caption-editable"
143
- }
144
- ),
145
- ErrorBoundary: LexicalErrorBoundary
146
- }
147
- ),
148
- /* @__PURE__ */ jsx(OnChangePlugin, { onChange: () => {
149
- } }),
150
- /* @__PURE__ */ jsx(HistoryPlugin, {}),
151
- /* @__PURE__ */ jsx(LocalStoragePlugin, { namespace: initialConfig.namespace })
152
- ]
153
- }
154
- ) });
155
- }
156
- function clamp(value, min, max) {
157
- return Math.min(Math.max(value, min), max);
158
- }
159
- const Direction = {
160
- east: 1 << 0,
161
- north: 1 << 3,
162
- south: 1 << 1,
163
- west: 1 << 2
164
- };
165
- function ImageResizer({
166
- onResizeStart,
167
- onResizeEnd,
168
- buttonRef,
169
- imageRef,
170
- maxWidth,
171
- editor,
172
- showCaption,
173
- setShowCaption,
174
- captionsEnabled
175
- }) {
176
- const controlWrapperRef = useRef(null);
177
- const userSelect = useRef({
178
- priority: "",
179
- value: "default"
180
- });
181
- const positioningRef = useRef({
182
- currentHeight: 0,
183
- currentWidth: 0,
184
- direction: 0,
185
- isResizing: false,
186
- ratio: 0,
187
- startHeight: 0,
188
- startWidth: 0,
189
- startX: 0,
190
- startY: 0
191
- });
192
- const editorRootElement = editor.getRootElement();
193
- const maxWidthContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
194
- const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
195
- const minWidth = 100;
196
- const minHeight = 100;
197
- const setStartCursor = (direction) => {
198
- const ew = direction === Direction.east || direction === Direction.west;
199
- const ns = direction === Direction.north || direction === Direction.south;
200
- const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
201
- const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
202
- if (editorRootElement !== null) {
203
- editorRootElement.style.setProperty(
204
- "cursor",
205
- `${cursorDir}-resize`,
206
- "important"
207
- );
208
- }
209
- if (document.body !== null) {
210
- document.body.style.setProperty(
211
- "cursor",
212
- `${cursorDir}-resize`,
213
- "important"
214
- );
215
- userSelect.current.value = document.body.style.getPropertyValue(
216
- "-webkit-user-select"
217
- );
218
- userSelect.current.priority = document.body.style.getPropertyPriority(
219
- "-webkit-user-select"
220
- );
221
- document.body.style.setProperty(
222
- "-webkit-user-select",
223
- `none`,
224
- "important"
225
- );
226
- }
227
- };
228
- const setEndCursor = () => {
229
- if (editorRootElement !== null) {
230
- editorRootElement.style.setProperty("cursor", "text");
231
- }
232
- if (document.body !== null) {
233
- document.body.style.setProperty("cursor", "default");
234
- document.body.style.setProperty(
235
- "-webkit-user-select",
236
- userSelect.current.value,
237
- userSelect.current.priority
238
- );
239
- }
240
- };
241
- const handlePointerDown = (event, direction) => {
242
- if (!editor.isEditable()) {
243
- return;
244
- }
245
- const image = imageRef.current;
246
- const controlWrapper = controlWrapperRef.current;
247
- if (image !== null && controlWrapper !== null) {
248
- event.preventDefault();
249
- const { width, height } = image.getBoundingClientRect();
250
- const zoom = calculateZoomLevel(image);
251
- const positioning = positioningRef.current;
252
- positioning.startWidth = width;
253
- positioning.startHeight = height;
254
- positioning.ratio = width / height;
255
- positioning.currentWidth = width;
256
- positioning.currentHeight = height;
257
- positioning.startX = event.clientX / zoom;
258
- positioning.startY = event.clientY / zoom;
259
- positioning.isResizing = true;
260
- positioning.direction = direction;
261
- setStartCursor(direction);
262
- onResizeStart();
263
- controlWrapper.classList.add("image-control-wrapper--resizing");
264
- image.style.height = `${height}px`;
265
- image.style.width = `${width}px`;
266
- document.addEventListener("pointermove", handlePointerMove);
267
- document.addEventListener("pointerup", handlePointerUp);
268
- }
269
- };
270
- const handlePointerMove = (event) => {
271
- const image = imageRef.current;
272
- const positioning = positioningRef.current;
273
- const isHorizontal = positioning.direction & (Direction.east | Direction.west);
274
- const isVertical = positioning.direction & (Direction.south | Direction.north);
275
- if (image !== null && positioning.isResizing) {
276
- const zoom = calculateZoomLevel(image);
277
- if (isHorizontal && isVertical) {
278
- let diff = Math.floor(positioning.startX - event.clientX / zoom);
279
- diff = positioning.direction & Direction.east ? -diff : diff;
280
- const width = clamp(
281
- positioning.startWidth + diff,
282
- minWidth,
283
- maxWidthContainer
284
- );
285
- const height = width / positioning.ratio;
286
- image.style.width = `${width}px`;
287
- image.style.height = `${height}px`;
288
- positioning.currentHeight = height;
289
- positioning.currentWidth = width;
290
- } else if (isVertical) {
291
- let diff = Math.floor(positioning.startY - event.clientY / zoom);
292
- diff = positioning.direction & Direction.south ? -diff : diff;
293
- const height = clamp(
294
- positioning.startHeight + diff,
295
- minHeight,
296
- maxHeightContainer
297
- );
298
- image.style.height = `${height}px`;
299
- positioning.currentHeight = height;
300
- } else {
301
- let diff = Math.floor(positioning.startX - event.clientX / zoom);
302
- diff = positioning.direction & Direction.east ? -diff : diff;
303
- const width = clamp(
304
- positioning.startWidth + diff,
305
- minWidth,
306
- maxWidthContainer
307
- );
308
- image.style.width = `${width}px`;
309
- positioning.currentWidth = width;
310
- }
311
- }
312
- };
313
- const handlePointerUp = () => {
314
- const image = imageRef.current;
315
- const positioning = positioningRef.current;
316
- const controlWrapper = controlWrapperRef.current;
317
- if (image !== null && controlWrapper !== null && positioning.isResizing) {
318
- const width = positioning.currentWidth;
319
- const height = positioning.currentHeight;
320
- positioning.startWidth = 0;
321
- positioning.startHeight = 0;
322
- positioning.ratio = 0;
323
- positioning.startX = 0;
324
- positioning.startY = 0;
325
- positioning.currentWidth = 0;
326
- positioning.currentHeight = 0;
327
- positioning.isResizing = false;
328
- controlWrapper.classList.remove("image-control-wrapper--resizing");
329
- setEndCursor();
330
- onResizeEnd(width, height);
331
- document.removeEventListener("pointermove", handlePointerMove);
332
- document.removeEventListener("pointerup", handlePointerUp);
333
- }
334
- };
335
- return /* @__PURE__ */ jsxs("div", { ref: controlWrapperRef, children: [
336
- !showCaption && captionsEnabled && /* @__PURE__ */ jsx(
337
- "button",
338
- {
339
- className: "image-caption-button",
340
- ref: buttonRef,
341
- onClick: () => {
342
- setShowCaption(!showCaption);
343
- },
344
- children: "Add Caption"
345
- }
346
- ),
347
- /* @__PURE__ */ jsx(
348
- "div",
349
- {
350
- className: "image-resizer image-resizer-n",
351
- onPointerDown: (event) => {
352
- handlePointerDown(event, Direction.north);
353
- }
354
- }
355
- ),
356
- /* @__PURE__ */ jsx(
357
- "div",
358
- {
359
- className: "image-resizer image-resizer-ne",
360
- onPointerDown: (event) => {
361
- handlePointerDown(event, Direction.north | Direction.east);
362
- }
363
- }
364
- ),
365
- /* @__PURE__ */ jsx(
366
- "div",
367
- {
368
- className: "image-resizer image-resizer-e",
369
- onPointerDown: (event) => {
370
- handlePointerDown(event, Direction.east);
371
- }
372
- }
373
- ),
374
- /* @__PURE__ */ jsx(
375
- "div",
376
- {
377
- className: "image-resizer image-resizer-se",
378
- onPointerDown: (event) => {
379
- handlePointerDown(event, Direction.south | Direction.east);
380
- }
381
- }
382
- ),
383
- /* @__PURE__ */ jsx(
384
- "div",
385
- {
386
- className: "image-resizer image-resizer-s",
387
- onPointerDown: (event) => {
388
- handlePointerDown(event, Direction.south);
389
- }
390
- }
391
- ),
392
- /* @__PURE__ */ jsx(
393
- "div",
394
- {
395
- className: "image-resizer image-resizer-sw",
396
- onPointerDown: (event) => {
397
- handlePointerDown(event, Direction.south | Direction.west);
398
- }
399
- }
400
- ),
401
- /* @__PURE__ */ jsx(
402
- "div",
403
- {
404
- className: "image-resizer image-resizer-w",
405
- onPointerDown: (event) => {
406
- handlePointerDown(event, Direction.west);
407
- }
408
- }
409
- ),
410
- /* @__PURE__ */ jsx(
411
- "div",
412
- {
413
- className: "image-resizer image-resizer-nw",
414
- onPointerDown: (event) => {
415
- handlePointerDown(event, Direction.north | Direction.west);
416
- }
417
- }
418
- )
419
- ] });
420
- }
421
- const imageCache = /* @__PURE__ */ new Set();
422
- const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
423
- function useSuspenseImage(src) {
424
- if (!imageCache.has(src)) {
425
- throw new Promise((resolve) => {
426
- const img = new Image();
427
- img.src = src;
428
- img.onload = () => {
429
- imageCache.add(src);
430
- resolve(null);
431
- };
432
- img.onerror = () => {
433
- imageCache.add(src);
434
- };
435
- });
436
- }
437
- }
438
- function LazyImage({
439
- altText,
440
- className,
441
- imageRef,
442
- src,
443
- width,
444
- height,
445
- maxWidth,
446
- onError
447
- }) {
448
- useSuspenseImage(src);
449
- const hasExplicitSize = typeof width === "number" && typeof height === "number";
450
- const computedWidth = typeof width === "number" ? width : "auto";
451
- const computedHeight = typeof height === "number" ? height : "auto";
452
- return /* @__PURE__ */ jsx(
453
- "img",
454
- {
455
- className: className || void 0,
456
- src,
457
- alt: altText,
458
- ref: imageRef,
459
- style: hasExplicitSize ? {
460
- // User has set a numeric size or original dimensions are provided
461
- width: computedWidth,
462
- height: computedHeight,
463
- maxWidth: "100%"
464
- } : {
465
- // No dimensions specified - use original image size
466
- maxWidth: "100%",
467
- height: "auto"
468
- },
469
- onError,
470
- draggable: "false"
471
- }
472
- );
473
- }
474
- function BrokenImage() {
475
- return /* @__PURE__ */ jsx(
476
- "img",
477
- {
478
- src: "",
479
- style: {
480
- height: 200,
481
- opacity: 0.2,
482
- width: 200
483
- },
484
- draggable: "false"
485
- }
486
- );
487
- }
488
- function ImageComponent({
489
- src,
490
- altText,
491
- nodeKey,
492
- width,
493
- height,
494
- maxWidth,
495
- resizable,
496
- showCaption,
497
- caption,
498
- captionsEnabled,
499
- originalPrompt,
500
- position = "none",
501
- linkUrl
502
- }) {
503
- const imageRef = useRef(null);
504
- const buttonRef = useRef(null);
505
- const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
506
- const [isResizing, setIsResizing] = useState(false);
507
- useCollaborationContext();
508
- const [editor] = useLexicalComposerContext();
509
- const [selection, setSelection] = useState(null);
510
- const activeEditorRef = useRef(null);
511
- const [isLoadError, setIsLoadError] = useState(false);
512
- const isEditable = useLexicalEditable();
513
- const [showRefineInput, setShowRefineInput] = useState(false);
514
- const [refinementPrompt, setRefinementPrompt] = useState("");
515
- const [isRefining, setIsRefining] = useState(false);
516
- const [showComparisonDialog, setShowComparisonDialog] = useState(false);
517
- const [newImageUrl, setNewImageUrl] = useState("");
518
- const [newCombinedPrompt, setNewCombinedPrompt] = useState("");
519
- const [showLinkPreview, setShowLinkPreview] = useState(false);
520
- const linkPreviewTimeoutRef = useRef(null);
521
- const [imageWidth, setImageWidth] = useState(0);
522
- const shouldPositionBelow = imageWidth > 0 && imageWidth < 350;
523
- useEffect(() => {
524
- if (imageRef.current) {
525
- const updateWidth = () => {
526
- if (imageRef.current) {
527
- setImageWidth(imageRef.current.offsetWidth);
528
- }
529
- };
530
- updateWidth();
531
- const resizeObserver = new ResizeObserver(updateWidth);
532
- resizeObserver.observe(imageRef.current);
533
- return () => resizeObserver.disconnect();
534
- }
535
- }, [width, height, isSelected]);
536
- const $onDelete = useCallback(
537
- (payload) => {
538
- const deleteSelection = $getSelection();
539
- if (isSelected && $isNodeSelection(deleteSelection)) {
540
- const event = payload;
541
- event.preventDefault();
542
- editor.update(() => {
543
- deleteSelection.getNodes().forEach((node) => {
544
- if ($isImageNode(node)) {
545
- const parent = node.getParent();
546
- node.remove();
547
- if (parent && $isParagraphNode(parent) && parent.getChildrenSize() === 0) {
548
- parent.setFormat("left");
549
- }
550
- }
551
- });
552
- });
553
- }
554
- return false;
555
- },
556
- [editor, isSelected]
557
- );
558
- const $onEnter = useCallback(
559
- (event) => {
560
- const latestSelection = $getSelection();
561
- const buttonElem = buttonRef.current;
562
- if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
563
- if (showCaption) {
564
- $setSelection(null);
565
- event.preventDefault();
566
- caption.focus();
567
- return true;
568
- } else if (buttonElem !== null && buttonElem !== document.activeElement) {
569
- event.preventDefault();
570
- buttonElem.focus();
571
- return true;
572
- }
573
- }
574
- return false;
575
- },
576
- [caption, isSelected, showCaption]
577
- );
578
- const $onEscape = useCallback(
579
- (event) => {
580
- if (activeEditorRef.current === caption || buttonRef.current === event.target) {
581
- $setSelection(null);
582
- editor.update(() => {
583
- setSelected(true);
584
- const parentRootElement = editor.getRootElement();
585
- if (parentRootElement !== null) {
586
- parentRootElement.focus();
587
- }
588
- });
589
- return true;
590
- }
591
- return false;
592
- },
593
- [caption, editor, setSelected]
594
- );
595
- const onClick = useCallback(
596
- (payload) => {
597
- const event = payload;
598
- if (isResizing) {
599
- return true;
600
- }
601
- const target = event.target;
602
- const isClickOnImage = target === imageRef.current;
603
- let isClickWithinImageBounds = false;
604
- if (!isClickOnImage && imageRef.current) {
605
- const imageRect = imageRef.current.getBoundingClientRect();
606
- isClickWithinImageBounds = event.clientX >= imageRect.left && event.clientX <= imageRect.right && event.clientY >= imageRect.top && event.clientY <= imageRect.bottom;
607
- }
608
- if (isClickOnImage || isClickWithinImageBounds) {
609
- if (event.shiftKey) {
610
- setSelected(!isSelected);
611
- } else {
612
- clearSelection();
613
- setSelected(true);
614
- }
615
- return true;
616
- }
617
- return false;
618
- },
619
- [isResizing, isSelected, setSelected, clearSelection]
620
- );
621
- const onRightClick = useCallback(
622
- (event) => {
623
- editor.getEditorState().read(() => {
624
- const latestSelection = $getSelection();
625
- const domElement = event.target;
626
- if (domElement.tagName === "IMG" && $isRangeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
627
- editor.dispatchCommand(
628
- RIGHT_CLICK_IMAGE_COMMAND,
629
- event
630
- );
631
- }
632
- });
633
- },
634
- [editor]
635
- );
636
- useEffect(() => {
637
- let isMounted = true;
638
- const rootElement = editor.getRootElement();
639
- const unregister = mergeRegister(
640
- editor.registerUpdateListener(({ editorState }) => {
641
- if (isMounted) {
642
- setSelection(editorState.read(() => $getSelection()));
643
- }
644
- }),
645
- editor.registerCommand(
646
- SELECTION_CHANGE_COMMAND,
647
- (_, activeEditor) => {
648
- activeEditorRef.current = activeEditor;
649
- return false;
650
- },
651
- COMMAND_PRIORITY_LOW
652
- ),
653
- editor.registerCommand(
654
- CLICK_COMMAND,
655
- onClick,
656
- COMMAND_PRIORITY_LOW
657
- ),
658
- editor.registerCommand(
659
- RIGHT_CLICK_IMAGE_COMMAND,
660
- onClick,
661
- COMMAND_PRIORITY_LOW
662
- ),
663
- editor.registerCommand(
664
- DRAGSTART_COMMAND,
665
- (event) => {
666
- if (event.target === imageRef.current) {
667
- event.preventDefault();
668
- return true;
669
- }
670
- return false;
671
- },
672
- COMMAND_PRIORITY_LOW
673
- ),
674
- editor.registerCommand(
675
- KEY_DELETE_COMMAND,
676
- $onDelete,
677
- COMMAND_PRIORITY_LOW
678
- ),
679
- editor.registerCommand(
680
- KEY_BACKSPACE_COMMAND,
681
- $onDelete,
682
- COMMAND_PRIORITY_LOW
683
- ),
684
- editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW),
685
- editor.registerCommand(
686
- KEY_ESCAPE_COMMAND,
687
- $onEscape,
688
- COMMAND_PRIORITY_LOW
689
- )
690
- );
691
- rootElement == null ? void 0 : rootElement.addEventListener("contextmenu", onRightClick);
692
- return () => {
693
- isMounted = false;
694
- unregister();
695
- rootElement == null ? void 0 : rootElement.removeEventListener("contextmenu", onRightClick);
696
- };
697
- }, [
698
- clearSelection,
699
- editor,
700
- isResizing,
701
- isSelected,
702
- nodeKey,
703
- $onDelete,
704
- $onEnter,
705
- $onEscape,
706
- onClick,
707
- onRightClick,
708
- setSelected
709
- ]);
710
- const setShowCaption = () => {
711
- editor.update(() => {
712
- const node = $getNodeByKey(nodeKey);
713
- if ($isImageNode(node)) {
714
- node.setShowCaption(true);
715
- }
716
- });
717
- };
718
- const onResizeEnd = (nextWidth, nextHeight) => {
719
- setTimeout(() => {
720
- setIsResizing(false);
721
- }, 200);
722
- editor.update(() => {
723
- const node = $getNodeByKey(nodeKey);
724
- if ($isImageNode(node)) {
725
- node.setWidthAndHeight(nextWidth, nextHeight);
726
- }
727
- });
728
- };
729
- const onResizeStart = () => {
730
- setIsResizing(true);
731
- };
732
- const handleOpenInNewTab = (e) => {
733
- e.preventDefault();
734
- e.stopPropagation();
735
- if (src.startsWith("data:")) {
736
- const newWindow = window.open("", "_blank");
737
- if (newWindow) {
738
- newWindow.document.write(`
739
- <!DOCTYPE html>
740
- <html>
741
- <head>
742
- <title>${altText || "Image"}</title>
743
- <style>
744
- body {
745
- margin: 0;
746
- display: flex;
747
- justify-content: center;
748
- align-items: center;
749
- min-height: 100vh;
750
- background-color: #1a1a1a;
751
- }
752
- img {
753
- max-width: 100%;
754
- max-height: 100vh;
755
- object-fit: contain;
756
- }
757
- </style>
758
- </head>
759
- <body>
760
- <img src="${src}" alt="${altText || "Image"}" />
761
- </body>
762
- </html>
763
- `);
764
- newWindow.document.close();
765
- }
766
- } else {
767
- window.open(src, "_blank");
768
- }
769
- };
770
- const handleDeleteImage = (e) => {
771
- e.preventDefault();
772
- e.stopPropagation();
773
- editor.update(() => {
774
- const node = $getNodeByKey(nodeKey);
775
- if ($isImageNode(node)) {
776
- const parent = node.getParent();
777
- node.remove();
778
- if (parent && $isParagraphNode(parent) && parent.getChildrenSize() === 0) {
779
- parent.setFormat("left");
780
- }
781
- }
782
- });
783
- };
784
- const handlePositionChange = (e, newPosition) => {
785
- e.preventDefault();
786
- e.stopPropagation();
787
- editor.update(() => {
788
- const node = $getNodeByKey(nodeKey);
789
- if ($isImageNode(node)) {
790
- node.setPosition(newPosition);
791
- }
792
- });
793
- };
794
- const handleRefineClick = (e) => {
795
- e.preventDefault();
796
- e.stopPropagation();
797
- setShowRefineInput(!showRefineInput);
798
- };
799
- const handleImageMouseEnter = useCallback(() => {
800
- if (linkUrl && !isSelected) {
801
- linkPreviewTimeoutRef.current = setTimeout(() => {
802
- setShowLinkPreview(true);
803
- }, 300);
804
- }
805
- }, [linkUrl, isSelected]);
806
- const handleImageMouseLeave = useCallback(() => {
807
- if (linkPreviewTimeoutRef.current) {
808
- clearTimeout(linkPreviewTimeoutRef.current);
809
- linkPreviewTimeoutRef.current = null;
810
- }
811
- setShowLinkPreview(false);
812
- }, []);
813
- const handleLinkClick = useCallback((e) => {
814
- e.preventDefault();
815
- e.stopPropagation();
816
- if (linkUrl) {
817
- window.open(linkUrl, "_blank", "noopener,noreferrer");
818
- }
819
- }, [linkUrl]);
820
- useEffect(() => {
821
- return () => {
822
- if (linkPreviewTimeoutRef.current) {
823
- clearTimeout(linkPreviewTimeoutRef.current);
824
- }
825
- };
826
- }, []);
827
- const handleRefineImage = async () => {
828
- if (!refinementPrompt.trim() || isRefining)
829
- return;
830
- setIsRefining(true);
831
- const loadingToast = toast.loading("Refining image...", {
832
- description: "This may take 10-30 seconds. Please wait."
833
- });
834
- try {
835
- let combinedPrompt = refinementPrompt.trim();
836
- if (originalPrompt && originalPrompt.trim()) {
837
- const original = originalPrompt.trim();
838
- const refinement = refinementPrompt.trim();
839
- const cleanedRefinement = refinement.replace(/^(add|also add|include|with|and)\s+(some|a|an)\s+/gi, "").replace(/^(add|also add|include|with|and)\s+/gi, "").trim();
840
- combinedPrompt = `${original} with ${cleanedRefinement}`;
841
- } else {
842
- if (altText && altText !== "Generated image" && altText.trim()) {
843
- const cleanedRefinement = refinementPrompt.trim().replace(/^(add|also add|include|with|and)\s+(some|a|an)\s+/gi, "").replace(/^(add|also add|include|with|and)\s+/gi, "").trim();
844
- combinedPrompt = `${altText} with ${cleanedRefinement}`;
845
- }
846
- }
847
- const response = await AiJsonResponse({
848
- content: `Generate Image: ${combinedPrompt}`
849
- });
850
- const htmlString = response == null ? void 0 : response.data;
851
- if (!htmlString) {
852
- throw new Error("Failed to generate image - empty response");
853
- }
854
- const parser = new DOMParser();
855
- const dom = parser.parseFromString(htmlString, "text/html");
856
- const imgElement = dom.querySelector("img");
857
- if (!imgElement || !imgElement.src) {
858
- throw new Error(`No image found in response`);
859
- }
860
- const generatedImageUrl = imgElement.src;
861
- toast.dismiss(loadingToast);
862
- toast.success("Image refined successfully!", {
863
- description: "Compare the images and choose which to keep."
864
- });
865
- setNewImageUrl(generatedImageUrl);
866
- setNewCombinedPrompt(combinedPrompt);
867
- setShowComparisonDialog(true);
868
- setRefinementPrompt("");
869
- setShowRefineInput(false);
870
- } catch (error) {
871
- toast.dismiss(loadingToast);
872
- if (error instanceof ApiKeyRequiredError) {
873
- const title = error.code === "API_KEYS_DISABLED" ? "API Keys Disabled" : "API Key Required";
874
- toast.error(title, {
875
- description: error.message,
876
- duration: 8e3
877
- });
878
- } else if (error instanceof CreditError) {
879
- toast.error("Credits Issue", {
880
- description: error.message,
881
- duration: 8e3
882
- });
883
- } else {
884
- toast.error("Failed to refine image", {
885
- description: error instanceof Error ? error.message : "Unknown error. Please try again."
886
- });
887
- }
888
- } finally {
889
- setIsRefining(false);
890
- }
891
- };
892
- const handleReplaceImage = () => {
893
- editor.update(() => {
894
- const node = $getNodeByKey(nodeKey);
895
- if ($isImageNode(node)) {
896
- node.setSrc(newImageUrl);
897
- node.setOriginalPrompt(newCombinedPrompt);
898
- const currentSelection = $getSelection();
899
- if (currentSelection) {
900
- $setSelection(currentSelection.clone());
901
- }
902
- }
903
- });
904
- setShowComparisonDialog(false);
905
- setNewImageUrl("");
906
- setNewCombinedPrompt("");
907
- toast.success("Image replaced successfully!", {
908
- description: "The image has been updated with the refined version."
909
- });
910
- };
911
- const handleCancelReplace = () => {
912
- setShowComparisonDialog(false);
913
- setNewImageUrl("");
914
- setNewCombinedPrompt("");
915
- };
916
- const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
917
- const isFocused = (isSelected || isResizing) && isEditable;
918
- const getPositionStyles = () => {
919
- if (position === "left" || position === "right") {
920
- return {
921
- position: "relative",
922
- display: "block",
923
- width: "100%"
924
- // Fill the floated container
925
- };
926
- }
927
- if (position === "full") {
928
- return {
929
- position: "relative",
930
- display: "inline-block"
931
- // Use inline-block to respect text-align: center from parent
932
- };
933
- }
934
- if (position === "inline-left" || position === "inline-center" || position === "inline-right") {
935
- return {
936
- position: "relative",
937
- display: "inline-block"
938
- // Use inline-block to respect text-align from parent
939
- };
940
- }
941
- return {
942
- position: "relative",
943
- display: "inline-block"
944
- };
945
- };
946
- const handleDirectClick = useCallback(
947
- (e) => {
948
- if (isResizing) {
949
- return;
950
- }
951
- if (e.target.closest("button")) {
952
- return;
953
- }
954
- const target = e.target;
955
- const isClickOnImage = target === imageRef.current;
956
- let isClickWithinImageBounds = false;
957
- if (!isClickOnImage && imageRef.current) {
958
- const imageRect = imageRef.current.getBoundingClientRect();
959
- isClickWithinImageBounds = e.clientX >= imageRect.left && e.clientX <= imageRect.right && e.clientY >= imageRect.top && e.clientY <= imageRect.bottom;
960
- }
961
- if (!isClickOnImage && !isClickWithinImageBounds) {
962
- return;
963
- }
964
- e.stopPropagation();
965
- if (e.shiftKey) {
966
- setSelected(!isSelected);
967
- } else {
968
- clearSelection();
969
- setSelected(true);
970
- }
971
- },
972
- [isResizing, isSelected, setSelected, clearSelection]
973
- );
974
- return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
975
- /* @__PURE__ */ jsxs(
976
- "div",
977
- {
978
- draggable,
979
- style: getPositionStyles(),
980
- onClick: handleDirectClick,
981
- onMouseEnter: handleImageMouseEnter,
982
- onMouseLeave: handleImageMouseLeave,
983
- children: [
984
- isLoadError ? /* @__PURE__ */ jsx(BrokenImage, {}) : /* @__PURE__ */ jsx(
985
- LazyImage,
986
- {
987
- className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : linkUrl ? "cteditor-cursor-pointer" : null,
988
- src,
989
- altText,
990
- imageRef,
991
- width,
992
- height,
993
- maxWidth,
994
- onError: () => setIsLoadError(true)
995
- }
996
- ),
997
- showLinkPreview && linkUrl && !isSelected && /* @__PURE__ */ jsxs(
998
- "div",
999
- {
1000
- className: "cteditor-absolute cteditor-bottom-2 cteditor-left-2 cteditor-right-2 cteditor-bg-background cteditor-rounded-lg cteditor-shadow-lg cteditor-border cteditor-border-border cteditor-p-2 cteditor-flex cteditor-items-center cteditor-gap-2",
1001
- style: { zIndex: 10 },
1002
- children: [
1003
- /* @__PURE__ */ jsx(Link2, { className: "cteditor-w-4 cteditor-h-4 cteditor-text-muted-foreground cteditor-flex-shrink-0" }),
1004
- /* @__PURE__ */ jsx("span", { className: "cteditor-text-sm cteditor-text-foreground cteditor-truncate cteditor-flex-1", children: linkUrl }),
1005
- /* @__PURE__ */ jsx(
1006
- "button",
1007
- {
1008
- onClick: handleLinkClick,
1009
- className: "cteditor-px-2 cteditor-py-1.5 cteditor-text-xs cteditor-rounded cteditor-bg-primary cteditor-text-primary-foreground hover:cteditor-bg-primary/90 cteditor-transition-colors cteditor-flex-shrink-0",
1010
- children: "Open"
1011
- }
1012
- )
1013
- ]
1014
- }
1015
- ),
1016
- isSelected && $isNodeSelection(selection) && !isLoadError && /* @__PURE__ */ jsxs(
1017
- "div",
1018
- {
1019
- className: `cteditor-absolute cteditor-flex cteditor-gap-1 z-10 ${shouldPositionBelow ? "cteditor-left-1/2 cteditor--translate-x-1/2 cteditor-bottom-0 cteditor-translate-y-full cteditor-mt-1" : "cteditor-top-2 cteditor-right-2"}`,
1020
- children: [
1021
- /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-0.5 cteditor-bg-background/80 cteditor-rounded-md cteditor-shadow-md cteditor-border cteditor-border-border cteditor-p-0.5", children: [
1022
- /* @__PURE__ */ jsx(
1023
- "button",
1024
- {
1025
- onClick: (e) => handlePositionChange(e, "left"),
1026
- className: ` cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "left" ? "cteditor-bg-accent" : ""}`,
1027
- "aria-label": "Wrap text left",
1028
- title: "Wrap text left",
1029
- children: /* @__PURE__ */ jsx(WrapTextLeftIcon, {})
1030
- }
1031
- ),
1032
- /* @__PURE__ */ jsx(
1033
- "button",
1034
- {
1035
- onClick: (e) => handlePositionChange(e, "right"),
1036
- className: ` cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "right" ? "cteditor-bg-accent" : ""}`,
1037
- "aria-label": "Wrap text right",
1038
- title: "Wrap text right",
1039
- children: /* @__PURE__ */ jsx(WrapTextRightIcon, {})
1040
- }
1041
- ),
1042
- /* @__PURE__ */ jsx("div", { className: "cteditor-w-px cteditor-h-5 cteditor-bg-border cteditor-mx-0.5" }),
1043
- /* @__PURE__ */ jsx(
1044
- "button",
1045
- {
1046
- onClick: (e) => handlePositionChange(e, "inline-left"),
1047
- className: `cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "inline-left" ? "cteditor-bg-accent" : ""}`,
1048
- "aria-label": "Align left",
1049
- title: "Align left (no text wrap)",
1050
- children: /* @__PURE__ */ jsx(AlignLeftIcon, {})
1051
- }
1052
- ),
1053
- /* @__PURE__ */ jsx(
1054
- "button",
1055
- {
1056
- onClick: (e) => handlePositionChange(e, "inline-center"),
1057
- className: `cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "inline-center" || position === "full" ? "cteditor-bg-accent" : ""}`,
1058
- "aria-label": "Align center",
1059
- title: "Align center (no text wrap)",
1060
- children: /* @__PURE__ */ jsx(AlignCenterIcon, {})
1061
- }
1062
- ),
1063
- /* @__PURE__ */ jsx(
1064
- "button",
1065
- {
1066
- onClick: (e) => handlePositionChange(e, "inline-right"),
1067
- className: `cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "inline-right" ? "cteditor-bg-accent" : ""}`,
1068
- "aria-label": "Align right",
1069
- title: "Align right (no text wrap)",
1070
- children: /* @__PURE__ */ jsx(AlignRightIcon, {})
1071
- }
1072
- ),
1073
- /* @__PURE__ */ jsx("div", { className: "cteditor-w-px cteditor-h-5 cteditor-bg-border cteditor-mx-0.5" }),
1074
- /* @__PURE__ */ jsx(
1075
- "button",
1076
- {
1077
- onClick: (e) => handlePositionChange(e, "none"),
1078
- className: `cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded hover:cteditor-bg-accent cteditor-transition-colors ${position === "none" ? "cteditor-bg-accent" : ""}`,
1079
- "aria-label": "Inline",
1080
- title: "Inline with text",
1081
- children: /* @__PURE__ */ jsx(Type, { className: "cteditor-w-4 cteditor-h-4 cteditor-text-foreground" })
1082
- }
1083
- )
1084
- ] }),
1085
- linkUrl && /* @__PURE__ */ jsx(
1086
- "button",
1087
- {
1088
- onClick: handleLinkClick,
1089
- className: " cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded-md cteditor-bg-background/80 hover:cteditor-bg-accent cteditor-transition-colors cteditor-shadow-md cteditor-border cteditor-border-border",
1090
- "aria-label": "Visit link",
1091
- title: `Visit: ${linkUrl}`,
1092
- children: /* @__PURE__ */ jsx(LinkIcon, {})
1093
- }
1094
- ),
1095
- originalPrompt && /* @__PURE__ */ jsx(
1096
- "button",
1097
- {
1098
- onClick: (e) => {
1099
- e.stopPropagation();
1100
- handleRefineClick(e);
1101
- },
1102
- className: " cteditor-size-6 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded-md cteditor-bg-background/80 hover:cteditor-bg-accent cteditor-transition-colors cteditor-shadow-md cteditor-border cteditor-border-border",
1103
- "aria-label": "Refine image",
1104
- title: "Refine image",
1105
- children: /* @__PURE__ */ jsx(Sparkles, { className: "cteditor-w-4 cteditor-h-4 cteditor-text-foreground" })
1106
- }
1107
- ),
1108
- /* @__PURE__ */ jsx(
1109
- "button",
1110
- {
1111
- onClick: (e) => {
1112
- e.stopPropagation();
1113
- handleOpenInNewTab(e);
1114
- },
1115
- className: " cteditor-size-8 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded-md cteditor-bg-background/80 hover:cteditor-bg-accent cteditor-transition-colors cteditor-shadow-md cteditor-border cteditor-border-border",
1116
- "aria-label": "Open image in new tab",
1117
- title: "Open in new tab",
1118
- children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
1119
- }
1120
- ),
1121
- /* @__PURE__ */ jsx(
1122
- "button",
1123
- {
1124
- onClick: (e) => {
1125
- e.stopPropagation();
1126
- handleDeleteImage(e);
1127
- },
1128
- className: " cteditor-size-8 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-rounded-md cteditor-bg-background/80 hover:cteditor-bg-destructive hover:cteditor-text-destructive-foreground cteditor-transition-colors cteditor-shadow-md cteditor-border cteditor-border-border",
1129
- "aria-label": "Delete image",
1130
- title: "Delete image",
1131
- children: /* @__PURE__ */ jsx(TrashIcon, {})
1132
- }
1133
- )
1134
- ]
1135
- }
1136
- ),
1137
- showRefineInput && isSelected && !isLoadError && originalPrompt && /* @__PURE__ */ jsx(
1138
- "div",
1139
- {
1140
- className: "cteditor-absolute cteditor-bottom-2 cteditor-left-2 cteditor-right-2 cteditor-bg-background cteditor-rounded-lg cteditor-shadow-xl cteditor-border cteditor-border-border cteditor-p-3",
1141
- style: { zIndex: 10 },
1142
- onClick: (e) => e.stopPropagation(),
1143
- onKeyDown: (e) => e.stopPropagation(),
1144
- onKeyUp: (e) => e.stopPropagation(),
1145
- children: /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-flex-col cteditor-gap-2", children: [
1146
- /* @__PURE__ */ jsx("label", { className: "cteditor-text-xs cteditor-font-medium cteditor-text-foreground", children: "What else do you want in this scene?" }),
1147
- /* @__PURE__ */ jsx(
1148
- "input",
1149
- {
1150
- type: "text",
1151
- value: refinementPrompt,
1152
- onChange: (e) => setRefinementPrompt(e.target.value),
1153
- onKeyDown: (e) => {
1154
- e.stopPropagation();
1155
- if (e.key === "Enter" && refinementPrompt.trim() && !isRefining) {
1156
- handleRefineImage();
1157
- }
1158
- if (e.key === "Escape") {
1159
- setShowRefineInput(false);
1160
- setRefinementPrompt("");
1161
- }
1162
- },
1163
- onKeyUp: (e) => {
1164
- e.stopPropagation();
1165
- },
1166
- onClick: (e) => {
1167
- e.stopPropagation();
1168
- },
1169
- placeholder: "e.g., flying birds, golden sunset, stormy clouds...",
1170
- className: "cteditor-w-full cteditor-px-3 cteditor-py-2 cteditor-text-sm cteditor-border cteditor-border-border cteditor-rounded-md cteditor-bg-background cteditor-text-foreground focus:cteditor-outline-none focus:cteditor-ring-2 focus:cteditor-ring-blue-500",
1171
- disabled: isRefining,
1172
- autoFocus: true
1173
- }
1174
- ),
1175
- /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-gap-2", children: [
1176
- /* @__PURE__ */ jsx(
1177
- "button",
1178
- {
1179
- onClick: (e) => {
1180
- e.stopPropagation();
1181
- handleRefineImage();
1182
- },
1183
- disabled: isRefining || !refinementPrompt.trim(),
1184
- className: "cteditor-flex-1 cteditor-px-3 cteditor-py-2 cteditor-text-sm cteditor-rounded-md cteditor-bg-blue-500 cteditor-text-white hover:cteditor-bg-blue-600 disabled:cteditor-opacity-50 disabled:cteditor-cursor-not-allowed cteditor-transition-colors",
1185
- children: isRefining ? /* @__PURE__ */ jsxs("span", { className: "cteditor-flex cteditor-items-center cteditor-justify-center cteditor-gap-2", children: [
1186
- /* @__PURE__ */ jsx("span", { className: "cteditor-inline-block cteditor-w-4 cteditor-h-4 cteditor-border-2 cteditor-border-white cteditor-border-t-transparent cteditor-rounded-full cteditor-animate-spin" }),
1187
- "Refining..."
1188
- ] }) : "Refine Image"
1189
- }
1190
- ),
1191
- /* @__PURE__ */ jsx(
1192
- "button",
1193
- {
1194
- onClick: (e) => {
1195
- e.stopPropagation();
1196
- setShowRefineInput(false);
1197
- setRefinementPrompt("");
1198
- },
1199
- disabled: isRefining,
1200
- className: "cteditor-px-3 cteditor-py-2 cteditor-text-sm cteditor-rounded-md cteditor-bg-background cteditor-border cteditor-border-border cteditor-text-foreground hover:cteditor-bg-accent disabled:cteditor-opacity-50 disabled:cteditor-cursor-not-allowed cteditor-transition-colors",
1201
- children: "Cancel"
1202
- }
1203
- )
1204
- ] })
1205
- ] })
1206
- }
1207
- ),
1208
- resizable && $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
1209
- ImageResizer,
1210
- {
1211
- showCaption,
1212
- setShowCaption,
1213
- editor,
1214
- buttonRef,
1215
- imageRef,
1216
- maxWidth,
1217
- onResizeStart,
1218
- onResizeEnd,
1219
- captionsEnabled: !isLoadError && captionsEnabled
1220
- }
1221
- )
1222
- ]
1223
- }
1224
- ),
1225
- showCaption && (altText.startsWith("Signature by") ? /* @__PURE__ */ jsx(SignatureCaption, { caption }) : /* @__PURE__ */ jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ jsxs(
1226
- LexicalNestedComposer,
1227
- {
1228
- initialEditor: caption,
1229
- initialNodes: [
1230
- RootNode,
1231
- TextNode,
1232
- LineBreakNode,
1233
- ParagraphNode,
1234
- LinkNode,
1235
- CodeNode
1236
- ],
1237
- children: [
1238
- /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
1239
- /* @__PURE__ */ jsx(
1240
- RichTextPlugin,
1241
- {
1242
- contentEditable: /* @__PURE__ */ jsx(
1243
- ContentEditable,
1244
- {
1245
- "aria-placeholder": "Enter a caption...",
1246
- placeholder: () => /* @__PURE__ */ jsx("span", { className: "cteditor-text-xs", children: "Enter a caption..." }),
1247
- className: "ImageNode__contentEditable"
1248
- }
1249
- ),
1250
- ErrorBoundary: LexicalErrorBoundary
1251
- }
1252
- ),
1253
- /* @__PURE__ */ jsx(
1254
- OnChangePlugin,
1255
- {
1256
- onChange: () => {
1257
- }
1258
- }
1259
- ),
1260
- /* @__PURE__ */ jsx(HistoryPlugin, {}),
1261
- /* @__PURE__ */ jsx(LocalStoragePlugin, { namespace: initialConfig.namespace })
1262
- ]
1263
- }
1264
- ) })),
1265
- /* @__PURE__ */ jsx(
1266
- ImageComparisonDialog,
1267
- {
1268
- open: showComparisonDialog,
1269
- onOpenChange: setShowComparisonDialog,
1270
- oldImageUrl: src,
1271
- newImageUrl,
1272
- onReplace: handleReplaceImage,
1273
- onCancel: handleCancelReplace
1274
- }
1275
- )
1276
- ] }) });
1277
- }
1278
- export {
1279
- RIGHT_CLICK_IMAGE_COMMAND,
1280
- ImageComponent as default
1281
- };
1282
- //# sourceMappingURL=index-92744040.js.map