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.
- package/LICENSE +24 -0
- package/README.md +7 -1
- package/dist/assets/style.css +1 -7989
- package/dist/{babel-d155920e.js → babel-1c4a328b.js} +2278 -2303
- package/dist/estree-2cbea43c.js +4667 -0
- package/dist/html-c18fb60e.js +2841 -0
- package/dist/html2pdf.bundle-ffb2feaa.js +34001 -0
- package/dist/html2pdf.bundle.min-1455f5bc.js +21964 -0
- package/dist/index-02397e44.js +111 -0
- package/dist/index-4b2cda16.js +35136 -0
- package/dist/index-ed633fb3.js +1002 -0
- package/dist/index.js +13 -14
- package/dist/markdown-39c3822b.js +3547 -0
- package/dist/postcss-bbcc713e.js +5151 -0
- package/dist/standalone-36ad3877.js +2600 -0
- package/dist/types.d.ts +2 -0
- package/dist/typescript-39d06710.js +13533 -0
- package/dist/ui/Icons.d.ts +2 -1
- package/package.json +2 -1
- package/dist/babel-d155920e.js.map +0 -1
- package/dist/estree-b1fff53b.js +0 -4706
- package/dist/estree-b1fff53b.js.map +0 -1
- package/dist/html-f95ee5dc.js +0 -2885
- package/dist/html-f95ee5dc.js.map +0 -1
- package/dist/html2pdf.bundle-71c6840e.js +0 -46128
- package/dist/html2pdf.bundle-71c6840e.js.map +0 -1
- package/dist/html2pdf.bundle.min-570c9085.js +0 -21987
- package/dist/html2pdf.bundle.min-570c9085.js.map +0 -1
- package/dist/index-6eb4d179.js +0 -46618
- package/dist/index-6eb4d179.js.map +0 -1
- package/dist/index-92744040.js +0 -1282
- package/dist/index-92744040.js.map +0 -1
- package/dist/index-bb293cb2.js +0 -161
- package/dist/index-bb293cb2.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/markdown-1d9e6c3f.js +0 -3759
- package/dist/markdown-1d9e6c3f.js.map +0 -1
- package/dist/postcss-c2592f3f.js +0 -5399
- package/dist/postcss-c2592f3f.js.map +0 -1
- package/dist/standalone-bcc7f37a.js +0 -2649
- package/dist/standalone-bcc7f37a.js.map +0 -1
- package/dist/typescript-48c10f50.js +0 -13601
- package/dist/typescript-48c10f50.js.map +0 -1
package/dist/index-92744040.js
DELETED
|
@@ -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
|