@replohq/sandbox-runtime 1.7.13 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_vendor/schemas/errors.d.ts +1 -0
- package/_vendor/schemas/generated/selectMode.d.ts +25 -0
- package/_vendor/schemas/selectMode.d.ts +99 -0
- package/_vendor/schemas/selectMode.mjs +1 -1
- package/_vendor/schemas/selectModeIframeRpc.d.ts +144 -0
- package/_vendor/schemas/selectModeIframeRpc.mjs +1 -1
- package/_vendor/schemas/selectModeImage.d.ts +9 -0
- package/_vendor/schemas/selectModeImage.mjs +24 -0
- package/buildMetadata.js +3 -3
- package/{chunk-4T7WSMC3.mjs → chunk-XWNBKE63.mjs} +25 -1
- package/package.json +4 -4
- package/select-mode/descriptor/elementDescriptor.js +2 -0
- package/select-mode/hooks/useOptimisticOverrides.js +63 -10
- package/select-mode/hooks/useSelectionInteractions.js +1 -10
- package/select-mode/iframeRpcChannel.d.ts +42 -0
- package/select-mode/imageOverridePreview.d.ts +6 -0
- package/select-mode/imageOverridePreview.js +77 -0
- package/select-mode/imageSources.d.ts +3 -0
- package/select-mode/imageSources.js +68 -0
|
@@ -59,6 +59,7 @@ export type ReploAuthenticationErrorConfig = {
|
|
|
59
59
|
type: AuthErrorType;
|
|
60
60
|
userFacingDetails?: ErrorUserFacingDetailsWithMessage;
|
|
61
61
|
additionalData?: ReploErrorConfig["additionalData"];
|
|
62
|
+
cause?: ReploErrorConfig["cause"];
|
|
62
63
|
};
|
|
63
64
|
export declare class ReploAuthenticationError extends ReploError {
|
|
64
65
|
type: AuthErrorType;
|
|
@@ -53,6 +53,27 @@ export type SelectModeDefinedStyle = {
|
|
|
53
53
|
raw: string;
|
|
54
54
|
resolved: string;
|
|
55
55
|
};
|
|
56
|
+
export type SelectModeImageScope = {
|
|
57
|
+
kind: "all";
|
|
58
|
+
} | {
|
|
59
|
+
kind: "media";
|
|
60
|
+
media: string;
|
|
61
|
+
};
|
|
62
|
+
export type SelectModeImageSource = {
|
|
63
|
+
srcSet: string;
|
|
64
|
+
sizes: string;
|
|
65
|
+
media: string;
|
|
66
|
+
type: string;
|
|
67
|
+
previewUrl: string | null;
|
|
68
|
+
};
|
|
69
|
+
export type SelectModeImage = {
|
|
70
|
+
src: string;
|
|
71
|
+
currentSrc: string;
|
|
72
|
+
srcSet: string;
|
|
73
|
+
sizes: string;
|
|
74
|
+
previewUrl: string | null;
|
|
75
|
+
sources: SelectModeImageSource[];
|
|
76
|
+
};
|
|
56
77
|
export type SelectedElement = {
|
|
57
78
|
kind: "react-element";
|
|
58
79
|
selector: string;
|
|
@@ -62,6 +83,7 @@ export type SelectedElement = {
|
|
|
62
83
|
rect: SelectModeBoundingRect;
|
|
63
84
|
textMetrics: SelectModeTextMetrics | null;
|
|
64
85
|
outerHTML: string;
|
|
86
|
+
image?: SelectModeImage;
|
|
65
87
|
definedStyles: SelectModeDefinedStyle[];
|
|
66
88
|
inheritedStyles: {
|
|
67
89
|
[x: string]: string;
|
|
@@ -85,6 +107,9 @@ export type SelectablePlanPayload = {
|
|
|
85
107
|
export type SelectableDataPayload = SelectablePlanPayload;
|
|
86
108
|
export type SelectableData = SelectedElement | SelectablePlanData;
|
|
87
109
|
export type SelectModeOptimisticUpdatePayload = {
|
|
110
|
+
kind: "image";
|
|
111
|
+
image: SelectModeImage;
|
|
112
|
+
} | {
|
|
88
113
|
kind: "css";
|
|
89
114
|
fontSource?: "google" | "site";
|
|
90
115
|
property: string;
|
|
@@ -98,6 +98,33 @@ export declare function transformPoint({ point, offset, scale, }: {
|
|
|
98
98
|
scale?: number;
|
|
99
99
|
}): SelectModeClickPosition;
|
|
100
100
|
export declare function getIframeOffset(iframe: HTMLIFrameElement | null): RectOffset;
|
|
101
|
+
export declare const selectModeImageScopeSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
102
|
+
kind: z.ZodLiteral<"all">;
|
|
103
|
+
}, z.core.$strip>, z.ZodObject<{
|
|
104
|
+
kind: z.ZodLiteral<"media">;
|
|
105
|
+
media: z.ZodString;
|
|
106
|
+
}, z.core.$strip>], "kind">;
|
|
107
|
+
export declare const selectModeImageSourceSchema: z.ZodObject<{
|
|
108
|
+
srcSet: z.ZodString;
|
|
109
|
+
sizes: z.ZodString;
|
|
110
|
+
media: z.ZodString;
|
|
111
|
+
type: z.ZodString;
|
|
112
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
113
|
+
}, z.core.$strip>;
|
|
114
|
+
export declare const selectModeImageSchema: z.ZodObject<{
|
|
115
|
+
src: z.ZodString;
|
|
116
|
+
currentSrc: z.ZodString;
|
|
117
|
+
srcSet: z.ZodString;
|
|
118
|
+
sizes: z.ZodString;
|
|
119
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
120
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
121
|
+
srcSet: z.ZodString;
|
|
122
|
+
sizes: z.ZodString;
|
|
123
|
+
media: z.ZodString;
|
|
124
|
+
type: z.ZodString;
|
|
125
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
126
|
+
}, z.core.$strip>>;
|
|
127
|
+
}, z.core.$strip>;
|
|
101
128
|
export declare const selectedElementSchema: z.ZodObject<{
|
|
102
129
|
kind: z.ZodLiteral<"react-element">;
|
|
103
130
|
selector: z.ZodString;
|
|
@@ -120,6 +147,20 @@ export declare const selectedElementSchema: z.ZodObject<{
|
|
|
120
147
|
lineHeight: z.ZodNumber;
|
|
121
148
|
}, z.core.$strip>>;
|
|
122
149
|
outerHTML: z.ZodString;
|
|
150
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
151
|
+
src: z.ZodString;
|
|
152
|
+
currentSrc: z.ZodString;
|
|
153
|
+
srcSet: z.ZodString;
|
|
154
|
+
sizes: z.ZodString;
|
|
155
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
156
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
157
|
+
srcSet: z.ZodString;
|
|
158
|
+
sizes: z.ZodString;
|
|
159
|
+
media: z.ZodString;
|
|
160
|
+
type: z.ZodString;
|
|
161
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
162
|
+
}, z.core.$strip>>;
|
|
163
|
+
}, z.core.$strip>>;
|
|
123
164
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
124
165
|
property: z.ZodString;
|
|
125
166
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -204,6 +245,20 @@ export declare const selectableDataSchema: z.ZodDiscriminatedUnion<[z.ZodObject<
|
|
|
204
245
|
lineHeight: z.ZodNumber;
|
|
205
246
|
}, z.core.$strip>>;
|
|
206
247
|
outerHTML: z.ZodString;
|
|
248
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
249
|
+
src: z.ZodString;
|
|
250
|
+
currentSrc: z.ZodString;
|
|
251
|
+
srcSet: z.ZodString;
|
|
252
|
+
sizes: z.ZodString;
|
|
253
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
254
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
255
|
+
srcSet: z.ZodString;
|
|
256
|
+
sizes: z.ZodString;
|
|
257
|
+
media: z.ZodString;
|
|
258
|
+
type: z.ZodString;
|
|
259
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
260
|
+
}, z.core.$strip>>;
|
|
261
|
+
}, z.core.$strip>>;
|
|
207
262
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
208
263
|
property: z.ZodString;
|
|
209
264
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -274,6 +329,22 @@ export declare function readSelectablePayload(rawPayload: string | null): {
|
|
|
274
329
|
planId: string;
|
|
275
330
|
} | null;
|
|
276
331
|
export declare const selectModeOptimisticUpdatePayloadSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
332
|
+
kind: z.ZodLiteral<"image">;
|
|
333
|
+
image: z.ZodObject<{
|
|
334
|
+
src: z.ZodString;
|
|
335
|
+
currentSrc: z.ZodString;
|
|
336
|
+
srcSet: z.ZodString;
|
|
337
|
+
sizes: z.ZodString;
|
|
338
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
339
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
340
|
+
srcSet: z.ZodString;
|
|
341
|
+
sizes: z.ZodString;
|
|
342
|
+
media: z.ZodString;
|
|
343
|
+
type: z.ZodString;
|
|
344
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
345
|
+
}, z.core.$strip>>;
|
|
346
|
+
}, z.core.$strip>;
|
|
347
|
+
}, z.core.$strip>, z.ZodObject<{
|
|
277
348
|
kind: z.ZodLiteral<"css">;
|
|
278
349
|
fontSource: z.ZodOptional<z.ZodEnum<{
|
|
279
350
|
google: "google";
|
|
@@ -366,6 +437,20 @@ export declare const selectModeSelectionSchema: z.ZodDiscriminatedUnion<[z.ZodOb
|
|
|
366
437
|
lineHeight: z.ZodNumber;
|
|
367
438
|
}, z.core.$strip>>;
|
|
368
439
|
outerHTML: z.ZodString;
|
|
440
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
441
|
+
src: z.ZodString;
|
|
442
|
+
currentSrc: z.ZodString;
|
|
443
|
+
srcSet: z.ZodString;
|
|
444
|
+
sizes: z.ZodString;
|
|
445
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
446
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
447
|
+
srcSet: z.ZodString;
|
|
448
|
+
sizes: z.ZodString;
|
|
449
|
+
media: z.ZodString;
|
|
450
|
+
type: z.ZodString;
|
|
451
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
452
|
+
}, z.core.$strip>>;
|
|
453
|
+
}, z.core.$strip>>;
|
|
369
454
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
370
455
|
property: z.ZodString;
|
|
371
456
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -451,6 +536,20 @@ export declare const selectModeSelectionSchema: z.ZodDiscriminatedUnion<[z.ZodOb
|
|
|
451
536
|
lineHeight: z.ZodNumber;
|
|
452
537
|
}, z.core.$strip>>;
|
|
453
538
|
outerHTML: z.ZodString;
|
|
539
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
540
|
+
src: z.ZodString;
|
|
541
|
+
currentSrc: z.ZodString;
|
|
542
|
+
srcSet: z.ZodString;
|
|
543
|
+
sizes: z.ZodString;
|
|
544
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
545
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
546
|
+
srcSet: z.ZodString;
|
|
547
|
+
sizes: z.ZodString;
|
|
548
|
+
media: z.ZodString;
|
|
549
|
+
type: z.ZodString;
|
|
550
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
551
|
+
}, z.core.$strip>>;
|
|
552
|
+
}, z.core.$strip>>;
|
|
454
553
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
455
554
|
property: z.ZodString;
|
|
456
555
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-
|
|
1
|
+
export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-XWNBKE63.mjs';
|
|
2
2
|
import '../../chunk-JUKCUPQ6.mjs';
|
|
3
3
|
import '../../chunk-FLYEIRFK.mjs';
|
|
4
4
|
import '../../chunk-TESFJQID.mjs';
|
|
@@ -72,6 +72,20 @@ export declare const selectModeEventInputSchemas: {
|
|
|
72
72
|
lineHeight: z.ZodNumber;
|
|
73
73
|
}, z.core.$strip>>;
|
|
74
74
|
outerHTML: z.ZodString;
|
|
75
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
76
|
+
src: z.ZodString;
|
|
77
|
+
currentSrc: z.ZodString;
|
|
78
|
+
srcSet: z.ZodString;
|
|
79
|
+
sizes: z.ZodString;
|
|
80
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
81
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
82
|
+
srcSet: z.ZodString;
|
|
83
|
+
sizes: z.ZodString;
|
|
84
|
+
media: z.ZodString;
|
|
85
|
+
type: z.ZodString;
|
|
86
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
87
|
+
}, z.core.$strip>>;
|
|
88
|
+
}, z.core.$strip>>;
|
|
75
89
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
76
90
|
property: z.ZodString;
|
|
77
91
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -184,6 +198,20 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
|
|
|
184
198
|
lineHeight: z.ZodNumber;
|
|
185
199
|
}, z.core.$strip>>;
|
|
186
200
|
outerHTML: z.ZodString;
|
|
201
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
202
|
+
src: z.ZodString;
|
|
203
|
+
currentSrc: z.ZodString;
|
|
204
|
+
srcSet: z.ZodString;
|
|
205
|
+
sizes: z.ZodString;
|
|
206
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
207
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
208
|
+
srcSet: z.ZodString;
|
|
209
|
+
sizes: z.ZodString;
|
|
210
|
+
media: z.ZodString;
|
|
211
|
+
type: z.ZodString;
|
|
212
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
213
|
+
}, z.core.$strip>>;
|
|
214
|
+
}, z.core.$strip>>;
|
|
187
215
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
188
216
|
property: z.ZodString;
|
|
189
217
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -243,6 +271,20 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
|
|
|
243
271
|
lineHeight: z.ZodNumber;
|
|
244
272
|
}, z.core.$strip>>;
|
|
245
273
|
outerHTML: z.ZodString;
|
|
274
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
275
|
+
src: z.ZodString;
|
|
276
|
+
currentSrc: z.ZodString;
|
|
277
|
+
srcSet: z.ZodString;
|
|
278
|
+
sizes: z.ZodString;
|
|
279
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
280
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
281
|
+
srcSet: z.ZodString;
|
|
282
|
+
sizes: z.ZodString;
|
|
283
|
+
media: z.ZodString;
|
|
284
|
+
type: z.ZodString;
|
|
285
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
286
|
+
}, z.core.$strip>>;
|
|
287
|
+
}, z.core.$strip>>;
|
|
246
288
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
247
289
|
property: z.ZodString;
|
|
248
290
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -313,6 +355,22 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
|
|
|
313
355
|
inputSchema: z.ZodObject<{
|
|
314
356
|
editId: z.ZodString;
|
|
315
357
|
payload: z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
358
|
+
kind: z.ZodLiteral<"image">;
|
|
359
|
+
image: z.ZodObject<{
|
|
360
|
+
src: z.ZodString;
|
|
361
|
+
currentSrc: z.ZodString;
|
|
362
|
+
srcSet: z.ZodString;
|
|
363
|
+
sizes: z.ZodString;
|
|
364
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
365
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
366
|
+
srcSet: z.ZodString;
|
|
367
|
+
sizes: z.ZodString;
|
|
368
|
+
media: z.ZodString;
|
|
369
|
+
type: z.ZodString;
|
|
370
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
371
|
+
}, z.core.$strip>>;
|
|
372
|
+
}, z.core.$strip>;
|
|
373
|
+
}, z.core.$strip>, z.ZodObject<{
|
|
316
374
|
kind: z.ZodLiteral<"css">;
|
|
317
375
|
fontSource: z.ZodOptional<z.ZodEnum<{
|
|
318
376
|
google: "google";
|
|
@@ -405,6 +463,20 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
|
|
|
405
463
|
lineHeight: z.ZodNumber;
|
|
406
464
|
}, z.core.$strip>>;
|
|
407
465
|
outerHTML: z.ZodString;
|
|
466
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
467
|
+
src: z.ZodString;
|
|
468
|
+
currentSrc: z.ZodString;
|
|
469
|
+
srcSet: z.ZodString;
|
|
470
|
+
sizes: z.ZodString;
|
|
471
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
472
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
473
|
+
srcSet: z.ZodString;
|
|
474
|
+
sizes: z.ZodString;
|
|
475
|
+
media: z.ZodString;
|
|
476
|
+
type: z.ZodString;
|
|
477
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
478
|
+
}, z.core.$strip>>;
|
|
479
|
+
}, z.core.$strip>>;
|
|
408
480
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
409
481
|
property: z.ZodString;
|
|
410
482
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -482,6 +554,20 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
|
|
|
482
554
|
lineHeight: z.ZodNumber;
|
|
483
555
|
}, z.core.$strip>>;
|
|
484
556
|
outerHTML: z.ZodString;
|
|
557
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
558
|
+
src: z.ZodString;
|
|
559
|
+
currentSrc: z.ZodString;
|
|
560
|
+
srcSet: z.ZodString;
|
|
561
|
+
sizes: z.ZodString;
|
|
562
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
563
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
564
|
+
srcSet: z.ZodString;
|
|
565
|
+
sizes: z.ZodString;
|
|
566
|
+
media: z.ZodString;
|
|
567
|
+
type: z.ZodString;
|
|
568
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
569
|
+
}, z.core.$strip>>;
|
|
570
|
+
}, z.core.$strip>>;
|
|
485
571
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
486
572
|
property: z.ZodString;
|
|
487
573
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -647,6 +733,20 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
|
|
|
647
733
|
lineHeight: z.ZodNumber;
|
|
648
734
|
}, z.core.$strip>>;
|
|
649
735
|
outerHTML: z.ZodString;
|
|
736
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
737
|
+
src: z.ZodString;
|
|
738
|
+
currentSrc: z.ZodString;
|
|
739
|
+
srcSet: z.ZodString;
|
|
740
|
+
sizes: z.ZodString;
|
|
741
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
742
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
743
|
+
srcSet: z.ZodString;
|
|
744
|
+
sizes: z.ZodString;
|
|
745
|
+
media: z.ZodString;
|
|
746
|
+
type: z.ZodString;
|
|
747
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
748
|
+
}, z.core.$strip>>;
|
|
749
|
+
}, z.core.$strip>>;
|
|
650
750
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
651
751
|
property: z.ZodString;
|
|
652
752
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -774,6 +874,22 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
|
|
|
774
874
|
data: z.ZodObject<{
|
|
775
875
|
editId: z.ZodString;
|
|
776
876
|
payload: z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
877
|
+
kind: z.ZodLiteral<"image">;
|
|
878
|
+
image: z.ZodObject<{
|
|
879
|
+
src: z.ZodString;
|
|
880
|
+
currentSrc: z.ZodString;
|
|
881
|
+
srcSet: z.ZodString;
|
|
882
|
+
sizes: z.ZodString;
|
|
883
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
884
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
885
|
+
srcSet: z.ZodString;
|
|
886
|
+
sizes: z.ZodString;
|
|
887
|
+
media: z.ZodString;
|
|
888
|
+
type: z.ZodString;
|
|
889
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
890
|
+
}, z.core.$strip>>;
|
|
891
|
+
}, z.core.$strip>;
|
|
892
|
+
}, z.core.$strip>, z.ZodObject<{
|
|
777
893
|
kind: z.ZodLiteral<"css">;
|
|
778
894
|
fontSource: z.ZodOptional<z.ZodEnum<{
|
|
779
895
|
google: "google";
|
|
@@ -864,6 +980,20 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
|
|
|
864
980
|
lineHeight: z.ZodNumber;
|
|
865
981
|
}, z.core.$strip>>;
|
|
866
982
|
outerHTML: z.ZodString;
|
|
983
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
984
|
+
src: z.ZodString;
|
|
985
|
+
currentSrc: z.ZodString;
|
|
986
|
+
srcSet: z.ZodString;
|
|
987
|
+
sizes: z.ZodString;
|
|
988
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
989
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
990
|
+
srcSet: z.ZodString;
|
|
991
|
+
sizes: z.ZodString;
|
|
992
|
+
media: z.ZodString;
|
|
993
|
+
type: z.ZodString;
|
|
994
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
995
|
+
}, z.core.$strip>>;
|
|
996
|
+
}, z.core.$strip>>;
|
|
867
997
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
868
998
|
property: z.ZodString;
|
|
869
999
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -1024,6 +1154,20 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
|
|
|
1024
1154
|
lineHeight: z.ZodNumber;
|
|
1025
1155
|
}, z.core.$strip>>;
|
|
1026
1156
|
outerHTML: z.ZodString;
|
|
1157
|
+
image: z.ZodOptional<z.ZodObject<{
|
|
1158
|
+
src: z.ZodString;
|
|
1159
|
+
currentSrc: z.ZodString;
|
|
1160
|
+
srcSet: z.ZodString;
|
|
1161
|
+
sizes: z.ZodString;
|
|
1162
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
1163
|
+
sources: z.ZodArray<z.ZodObject<{
|
|
1164
|
+
srcSet: z.ZodString;
|
|
1165
|
+
sizes: z.ZodString;
|
|
1166
|
+
media: z.ZodString;
|
|
1167
|
+
type: z.ZodString;
|
|
1168
|
+
previewUrl: z.ZodNullable<z.ZodString>;
|
|
1169
|
+
}, z.core.$strip>>;
|
|
1170
|
+
}, z.core.$strip>>;
|
|
1027
1171
|
definedStyles: z.ZodDefault<z.ZodArray<z.ZodObject<{
|
|
1028
1172
|
property: z.ZodString;
|
|
1029
1173
|
variant: z.ZodNullable<z.ZodObject<{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-
|
|
1
|
+
import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-XWNBKE63.mjs';
|
|
2
2
|
import '../../chunk-JUKCUPQ6.mjs';
|
|
3
3
|
import '../../chunk-FLYEIRFK.mjs';
|
|
4
4
|
import '../../chunk-TESFJQID.mjs';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { SelectModeImage } from "./generated/selectMode";
|
|
2
|
+
export declare function getImageEditSnapshot(image: SelectModeImage | undefined, baseURI?: string): {
|
|
3
|
+
previewUrl: string | null;
|
|
4
|
+
sources: {
|
|
5
|
+
media: string;
|
|
6
|
+
type: string;
|
|
7
|
+
previewUrl: string | null;
|
|
8
|
+
}[];
|
|
9
|
+
} | null;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function getImageEditSnapshot(image, baseURI) {
|
|
2
|
+
if (!image) return null;
|
|
3
|
+
const baseUrl = baseURI ?? (URL.canParse(image.currentSrc) ? image.currentSrc : "https://replo.invalid");
|
|
4
|
+
const normalizeUrl = (url) => {
|
|
5
|
+
if (!url) return url;
|
|
6
|
+
try {
|
|
7
|
+
const parsed = new URL(url, baseUrl);
|
|
8
|
+
const original = parsed.pathname.endsWith("/_next/image") ? parsed.searchParams.get("url") : null;
|
|
9
|
+
return original ? new URL(original, parsed).href : parsed.href;
|
|
10
|
+
} catch {
|
|
11
|
+
return url;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
return {
|
|
15
|
+
previewUrl: normalizeUrl(image.previewUrl),
|
|
16
|
+
sources: image.sources.map(({ media, type, previewUrl }) => ({
|
|
17
|
+
media,
|
|
18
|
+
type,
|
|
19
|
+
previewUrl: normalizeUrl(previewUrl)
|
|
20
|
+
}))
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { getImageEditSnapshot };
|
package/buildMetadata.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const BUILD_METADATA = {
|
|
2
2
|
"packageName": "@replohq/sandbox-runtime",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"branch": "HEAD",
|
|
5
|
-
"commit": "
|
|
6
|
-
"builtAt": "2026-09-
|
|
5
|
+
"commit": "6ad933540e110b76d214b8700e7a356a551c869a",
|
|
6
|
+
"builtAt": "2026-09-24T18:57:19.451Z"
|
|
7
7
|
};
|
|
@@ -100,6 +100,25 @@ function getIframeOffset(iframe) {
|
|
|
100
100
|
const iframeRect = iframe.getBoundingClientRect();
|
|
101
101
|
return { left: iframeRect.left, top: iframeRect.top };
|
|
102
102
|
}
|
|
103
|
+
var selectModeImageScopeSchema = z.discriminatedUnion("kind", [
|
|
104
|
+
z.object({ kind: z.literal("all") }),
|
|
105
|
+
z.object({ kind: z.literal("media"), media: z.string() })
|
|
106
|
+
]).describe("SelectModeImageScope");
|
|
107
|
+
var selectModeImageSourceSchema = z.object({
|
|
108
|
+
srcSet: z.string(),
|
|
109
|
+
sizes: z.string(),
|
|
110
|
+
media: z.string(),
|
|
111
|
+
type: z.string(),
|
|
112
|
+
previewUrl: z.string().nullable()
|
|
113
|
+
}).describe("SelectModeImageSource");
|
|
114
|
+
var selectModeImageSchema = z.object({
|
|
115
|
+
src: z.string(),
|
|
116
|
+
currentSrc: z.string(),
|
|
117
|
+
srcSet: z.string(),
|
|
118
|
+
sizes: z.string(),
|
|
119
|
+
previewUrl: z.string().nullable(),
|
|
120
|
+
sources: z.array(selectModeImageSourceSchema)
|
|
121
|
+
}).describe("SelectModeImage");
|
|
103
122
|
var selectedElementSchema = z.object({
|
|
104
123
|
kind: z.literal("react-element"),
|
|
105
124
|
selector: z.string(),
|
|
@@ -109,6 +128,7 @@ var selectedElementSchema = z.object({
|
|
|
109
128
|
rect: selectModeBoundingRectSchema,
|
|
110
129
|
textMetrics: selectModeTextMetricsSchema.nullable(),
|
|
111
130
|
outerHTML: z.string(),
|
|
131
|
+
image: selectModeImageSchema.optional(),
|
|
112
132
|
definedStyles: z.array(selectModeDefinedStyleSchema).default([]),
|
|
113
133
|
inheritedStyles: z.record(z.string(), z.string()).default({}),
|
|
114
134
|
clickPosition: selectModeClickPositionSchema,
|
|
@@ -166,6 +186,10 @@ function readSelectablePayload(rawPayload) {
|
|
|
166
186
|
return parseSchemaOrNull(parsedPayload, selectableDataPayloadSchema);
|
|
167
187
|
}
|
|
168
188
|
var selectModeOptimisticUpdatePayloadSchema = z.discriminatedUnion("kind", [
|
|
189
|
+
z.object({
|
|
190
|
+
kind: z.literal("image"),
|
|
191
|
+
image: selectModeImageSchema
|
|
192
|
+
}),
|
|
169
193
|
z.object({
|
|
170
194
|
kind: z.literal("css"),
|
|
171
195
|
fontSource: z.enum(["google", "site"]).optional(),
|
|
@@ -208,4 +232,4 @@ var selectModeSelectionSchema = z.discriminatedUnion("type", [
|
|
|
208
232
|
})
|
|
209
233
|
]).describe("SelectModeSelection");
|
|
210
234
|
|
|
211
|
-
export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };
|
|
235
|
+
export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@replohq/sandbox-runtime",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"reploBuild": {
|
|
5
5
|
"packageName": "@replohq/sandbox-runtime",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.8.0",
|
|
7
7
|
"branch": "HEAD",
|
|
8
|
-
"commit": "
|
|
9
|
-
"builtAt": "2026-09-
|
|
8
|
+
"commit": "6ad933540e110b76d214b8700e7a356a551c869a",
|
|
9
|
+
"builtAt": "2026-09-24T18:57:19.451Z"
|
|
10
10
|
},
|
|
11
11
|
"description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
|
|
12
12
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE
|
|
5
5
|
} from "../../_vendor/schemas/selectMode.mjs";
|
|
6
6
|
import { getFiberChain } from "../fiber";
|
|
7
|
+
import { getImageDescriptor } from "../imageSources";
|
|
7
8
|
import { skipInlineTextMarkElements } from "../inlineTextMarks";
|
|
8
9
|
import { getElementBoundingRect } from "../interactions/selectionGeometry";
|
|
9
10
|
import { getDefinedStyles, getInheritedStyles } from "./styleExtraction";
|
|
@@ -185,6 +186,7 @@ function buildElementDescriptor({
|
|
|
185
186
|
rect: getElementBoundingRect(element),
|
|
186
187
|
textMetrics,
|
|
187
188
|
outerHTML: element.outerHTML.slice(0, 4e3),
|
|
189
|
+
image: getImageDescriptor(element),
|
|
188
190
|
definedStyles: getDefinedStyles(element),
|
|
189
191
|
inheritedStyles: getInheritedStyles(element),
|
|
190
192
|
clickPosition,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
2
|
import { buildGoogleFontsCssUrl, quoteFontFamily } from "../../_vendor/replo-utils/lib/fonts.mjs";
|
|
3
3
|
import { buildSelector } from "../descriptor/elementDescriptor";
|
|
4
|
+
import { createImagePreview } from "../imageOverridePreview";
|
|
4
5
|
import {
|
|
5
6
|
SELECT_MODE_OVERRIDE_ATTRIBUTE,
|
|
6
7
|
SELECT_MODE_OVERRIDE_STYLE_ATTRIBUTE
|
|
@@ -10,6 +11,7 @@ const OVERRIDE_REGISTRATION_TIMEOUT_MS = 15e3;
|
|
|
10
11
|
const SESSION_OUTCOME_RETENTION_MS = 6e4;
|
|
11
12
|
const OVERRIDE_REGISTRY_KEY = "reploSelectOverrideRegistryV2";
|
|
12
13
|
const SESSION_OUTCOME_REGISTRY_KEY = "reploSelectOverrideSessionOutcomesV2";
|
|
14
|
+
const imagePreviews = /* @__PURE__ */ new Map();
|
|
13
15
|
function getOverrideList() {
|
|
14
16
|
const existing = Reflect.get(window, OVERRIDE_REGISTRY_KEY);
|
|
15
17
|
if (Array.isArray(existing)) {
|
|
@@ -45,18 +47,12 @@ function getElementsForTargetMode({
|
|
|
45
47
|
})
|
|
46
48
|
];
|
|
47
49
|
}
|
|
48
|
-
function isImageSourcePayload({
|
|
49
|
-
element,
|
|
50
|
-
payload
|
|
51
|
-
}) {
|
|
52
|
-
return payload.kind === "attribute" && payload.name.toLowerCase() === "src" && element instanceof HTMLImageElement;
|
|
53
|
-
}
|
|
54
50
|
function getOriginalState({
|
|
55
51
|
element,
|
|
56
52
|
payload
|
|
57
53
|
}) {
|
|
58
54
|
if (payload.kind === "attribute") {
|
|
59
|
-
const names =
|
|
55
|
+
const names = [payload.name];
|
|
60
56
|
return {
|
|
61
57
|
kind: "attributes",
|
|
62
58
|
values: names.map((name) => ({
|
|
@@ -95,14 +91,12 @@ function applyPayload({
|
|
|
95
91
|
payload,
|
|
96
92
|
token
|
|
97
93
|
}) {
|
|
94
|
+
if (payload.kind === "image") return;
|
|
98
95
|
if (payload.kind === "css") {
|
|
99
96
|
addToken(element, token);
|
|
100
97
|
return;
|
|
101
98
|
}
|
|
102
99
|
if (payload.kind === "attribute") {
|
|
103
|
-
if (isImageSourcePayload({ element, payload })) {
|
|
104
|
-
element.removeAttribute("srcset");
|
|
105
|
-
}
|
|
106
100
|
element.setAttribute(payload.name, payload.value);
|
|
107
101
|
return;
|
|
108
102
|
}
|
|
@@ -207,6 +201,7 @@ function reapplyOverride({
|
|
|
207
201
|
override,
|
|
208
202
|
skipElement
|
|
209
203
|
}) {
|
|
204
|
+
if (override.payload.kind === "image") return;
|
|
210
205
|
for (const target of override.targets) {
|
|
211
206
|
const element = resolveTarget(target);
|
|
212
207
|
if (!element || skipElement && element.contains(skipElement)) {
|
|
@@ -222,6 +217,51 @@ function reapplyOverride({
|
|
|
222
217
|
applyPayload({ element, payload: override.payload, token: override.token });
|
|
223
218
|
}
|
|
224
219
|
}
|
|
220
|
+
function syncImagePreviews() {
|
|
221
|
+
const configurations = /* @__PURE__ */ new Map();
|
|
222
|
+
for (const override of getOverrideList()) {
|
|
223
|
+
if (override.payload.kind !== "image") continue;
|
|
224
|
+
for (const target of override.targets) {
|
|
225
|
+
const element = resolveTarget(target);
|
|
226
|
+
if (!(element instanceof HTMLImageElement)) continue;
|
|
227
|
+
const previous = configurations.get(element);
|
|
228
|
+
configurations.set(element, {
|
|
229
|
+
image: override.payload.image,
|
|
230
|
+
pending: !override.settled || Boolean(previous?.pending)
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
for (const [element, preview] of imagePreviews) {
|
|
235
|
+
if (configurations.has(element)) continue;
|
|
236
|
+
preview.dispose();
|
|
237
|
+
imagePreviews.delete(element);
|
|
238
|
+
}
|
|
239
|
+
const acknowledged = /* @__PURE__ */ new Set();
|
|
240
|
+
for (const [element, configuration] of configurations) {
|
|
241
|
+
let preview = imagePreviews.get(element);
|
|
242
|
+
if (!preview) {
|
|
243
|
+
preview = createImagePreview(element);
|
|
244
|
+
imagePreviews.set(element, preview);
|
|
245
|
+
}
|
|
246
|
+
if (!configuration.pending && preview.isPersisted(configuration.image)) {
|
|
247
|
+
preview.dispose();
|
|
248
|
+
imagePreviews.delete(element);
|
|
249
|
+
acknowledged.add(element);
|
|
250
|
+
} else {
|
|
251
|
+
preview.render(configuration.image);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
setOverrideList(
|
|
255
|
+
getOverrideList().filter((entry) => {
|
|
256
|
+
if (entry.payload.kind !== "image") return true;
|
|
257
|
+
entry.targets = entry.targets.filter((target) => {
|
|
258
|
+
const element = resolveTarget(target);
|
|
259
|
+
return !element || !acknowledged.has(element);
|
|
260
|
+
});
|
|
261
|
+
return entry.targets.length > 0;
|
|
262
|
+
})
|
|
263
|
+
);
|
|
264
|
+
}
|
|
225
265
|
function removeOverride({
|
|
226
266
|
editId,
|
|
227
267
|
outcome
|
|
@@ -233,6 +273,16 @@ function removeOverride({
|
|
|
233
273
|
return;
|
|
234
274
|
}
|
|
235
275
|
clearTimeout(override.registrationTimeout);
|
|
276
|
+
if (override.payload.kind === "image") {
|
|
277
|
+
override.settled = true;
|
|
278
|
+
setOverrideList(
|
|
279
|
+
getOverrideList().filter(
|
|
280
|
+
(entry) => entry !== override || outcome === "persisted"
|
|
281
|
+
)
|
|
282
|
+
);
|
|
283
|
+
syncImagePreviews();
|
|
284
|
+
return;
|
|
285
|
+
}
|
|
236
286
|
getStyleElement(override.token)?.remove();
|
|
237
287
|
for (const target of override.targets) {
|
|
238
288
|
const element = resolveTarget(target);
|
|
@@ -279,6 +329,7 @@ function useOptimisticOverrides() {
|
|
|
279
329
|
});
|
|
280
330
|
const token = `override-${editId}`;
|
|
281
331
|
const override = {
|
|
332
|
+
settled: false,
|
|
282
333
|
editId,
|
|
283
334
|
injectedFontFamily: null,
|
|
284
335
|
payload,
|
|
@@ -296,6 +347,7 @@ function useOptimisticOverrides() {
|
|
|
296
347
|
getOverrideList().push(override);
|
|
297
348
|
installCssRule(override);
|
|
298
349
|
reapplyOverride({ override, skipElement: null });
|
|
350
|
+
syncImagePreviews();
|
|
299
351
|
},
|
|
300
352
|
[]
|
|
301
353
|
);
|
|
@@ -304,6 +356,7 @@ function useOptimisticOverrides() {
|
|
|
304
356
|
for (const override of getOverrideList()) {
|
|
305
357
|
reapplyOverride({ override, skipElement });
|
|
306
358
|
}
|
|
359
|
+
syncImagePreviews();
|
|
307
360
|
},
|
|
308
361
|
[]
|
|
309
362
|
);
|
|
@@ -402,16 +402,7 @@ function useSelectionInteractions() {
|
|
|
402
402
|
const scrollOffset = snapshot.type === "drag" ? snapshot.scrollOffset : getDocumentScrollOffset();
|
|
403
403
|
const candidates = store().dragCandidates;
|
|
404
404
|
resetDragState({ notifyParentDragCleared: false });
|
|
405
|
-
if (
|
|
406
|
-
const targetElement = event.target;
|
|
407
|
-
if (!(targetElement instanceof Element)) {
|
|
408
|
-
return;
|
|
409
|
-
}
|
|
410
|
-
commitClickSelection({
|
|
411
|
-
targetElement,
|
|
412
|
-
pointerEvent: event,
|
|
413
|
-
candidates
|
|
414
|
-
});
|
|
405
|
+
if (snapshot.type !== "drag" || !dragStart) {
|
|
415
406
|
return;
|
|
416
407
|
}
|
|
417
408
|
const resolvedDragCurrent = dragCurrent ?? dragStart;
|
|
@@ -32,6 +32,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
|
|
|
32
32
|
lineHeight: import("zod").ZodNumber;
|
|
33
33
|
}, import("zod/v4/core").$strip>>;
|
|
34
34
|
outerHTML: import("zod").ZodString;
|
|
35
|
+
image: import("zod").ZodOptional<import("zod").ZodObject<{
|
|
36
|
+
src: import("zod").ZodString;
|
|
37
|
+
currentSrc: import("zod").ZodString;
|
|
38
|
+
srcSet: import("zod").ZodString;
|
|
39
|
+
sizes: import("zod").ZodString;
|
|
40
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
41
|
+
sources: import("zod").ZodArray<import("zod").ZodObject<{
|
|
42
|
+
srcSet: import("zod").ZodString;
|
|
43
|
+
sizes: import("zod").ZodString;
|
|
44
|
+
media: import("zod").ZodString;
|
|
45
|
+
type: import("zod").ZodString;
|
|
46
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
47
|
+
}, import("zod/v4/core").$strip>>;
|
|
48
|
+
}, import("zod/v4/core").$strip>>;
|
|
35
49
|
definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
|
|
36
50
|
property: import("zod").ZodString;
|
|
37
51
|
variant: import("zod").ZodNullable<import("zod").ZodObject<{
|
|
@@ -109,6 +123,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
|
|
|
109
123
|
lineHeight: import("zod").ZodNumber;
|
|
110
124
|
}, import("zod/v4/core").$strip>>;
|
|
111
125
|
outerHTML: import("zod").ZodString;
|
|
126
|
+
image: import("zod").ZodOptional<import("zod").ZodObject<{
|
|
127
|
+
src: import("zod").ZodString;
|
|
128
|
+
currentSrc: import("zod").ZodString;
|
|
129
|
+
srcSet: import("zod").ZodString;
|
|
130
|
+
sizes: import("zod").ZodString;
|
|
131
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
132
|
+
sources: import("zod").ZodArray<import("zod").ZodObject<{
|
|
133
|
+
srcSet: import("zod").ZodString;
|
|
134
|
+
sizes: import("zod").ZodString;
|
|
135
|
+
media: import("zod").ZodString;
|
|
136
|
+
type: import("zod").ZodString;
|
|
137
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
138
|
+
}, import("zod/v4/core").$strip>>;
|
|
139
|
+
}, import("zod/v4/core").$strip>>;
|
|
112
140
|
definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
|
|
113
141
|
property: import("zod").ZodString;
|
|
114
142
|
variant: import("zod").ZodNullable<import("zod").ZodObject<{
|
|
@@ -274,6 +302,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
|
|
|
274
302
|
lineHeight: import("zod").ZodNumber;
|
|
275
303
|
}, import("zod/v4/core").$strip>>;
|
|
276
304
|
outerHTML: import("zod").ZodString;
|
|
305
|
+
image: import("zod").ZodOptional<import("zod").ZodObject<{
|
|
306
|
+
src: import("zod").ZodString;
|
|
307
|
+
currentSrc: import("zod").ZodString;
|
|
308
|
+
srcSet: import("zod").ZodString;
|
|
309
|
+
sizes: import("zod").ZodString;
|
|
310
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
311
|
+
sources: import("zod").ZodArray<import("zod").ZodObject<{
|
|
312
|
+
srcSet: import("zod").ZodString;
|
|
313
|
+
sizes: import("zod").ZodString;
|
|
314
|
+
media: import("zod").ZodString;
|
|
315
|
+
type: import("zod").ZodString;
|
|
316
|
+
previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
|
|
317
|
+
}, import("zod/v4/core").$strip>>;
|
|
318
|
+
}, import("zod/v4/core").$strip>>;
|
|
277
319
|
definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
|
|
278
320
|
property: import("zod").ZodString;
|
|
279
321
|
variant: import("zod").ZodNullable<import("zod").ZodObject<{
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { getImageEditSnapshot } from "../_vendor/schemas/selectModeImage.mjs";
|
|
2
|
+
import { getImageDescriptor, getPictureSources } from "./imageSources";
|
|
3
|
+
function createImagePreview(image) {
|
|
4
|
+
const picture = document.createElement("picture");
|
|
5
|
+
picture.hidden = true;
|
|
6
|
+
picture.dataset.reploImageResolver = "true";
|
|
7
|
+
const resolver = document.createElement("img");
|
|
8
|
+
resolver.alt = "";
|
|
9
|
+
const style = document.createElement("style");
|
|
10
|
+
const token = crypto.randomUUID();
|
|
11
|
+
image.dataset.reploImagePreview = token;
|
|
12
|
+
document.head.append(style);
|
|
13
|
+
let configuration = "";
|
|
14
|
+
let disposed = false;
|
|
15
|
+
function paint() {
|
|
16
|
+
if (disposed) return;
|
|
17
|
+
const url = resolver.currentSrc || resolver.src;
|
|
18
|
+
if (!url) return;
|
|
19
|
+
const rule = `[data-replo-image-preview="${token}"] { content: url(${JSON.stringify(url)}) !important; }`;
|
|
20
|
+
if (style.textContent !== rule) style.textContent = rule;
|
|
21
|
+
}
|
|
22
|
+
resolver.addEventListener("load", paint);
|
|
23
|
+
return {
|
|
24
|
+
render(config) {
|
|
25
|
+
const next = JSON.stringify(config);
|
|
26
|
+
if (configuration !== next) {
|
|
27
|
+
configuration = next;
|
|
28
|
+
const originals = getPictureSources(image);
|
|
29
|
+
const sources = config.sources.map((source, index) => {
|
|
30
|
+
const original = originals.find((candidate) => {
|
|
31
|
+
return candidate.media.trim() === source.media && candidate.type === source.type;
|
|
32
|
+
}) ?? originals[index];
|
|
33
|
+
const node = document.createElement("source");
|
|
34
|
+
node.media = source.media;
|
|
35
|
+
node.type = resolveMetadata(source.type, original?.type);
|
|
36
|
+
node.srcset = resolveMetadata(source.srcSet, original?.srcset);
|
|
37
|
+
node.sizes = resolveMetadata(source.sizes, original?.sizes);
|
|
38
|
+
return node;
|
|
39
|
+
});
|
|
40
|
+
resolver.setAttribute(
|
|
41
|
+
"src",
|
|
42
|
+
resolveMetadata(config.src, image.getAttribute("src"))
|
|
43
|
+
);
|
|
44
|
+
resolver.setAttribute(
|
|
45
|
+
"srcset",
|
|
46
|
+
resolveMetadata(config.srcSet, image.getAttribute("srcset"))
|
|
47
|
+
);
|
|
48
|
+
resolver.setAttribute(
|
|
49
|
+
"sizes",
|
|
50
|
+
resolveMetadata(config.sizes, image.sizes)
|
|
51
|
+
);
|
|
52
|
+
picture.replaceChildren(...sources, resolver);
|
|
53
|
+
if (!picture.isConnected) document.body.append(picture);
|
|
54
|
+
}
|
|
55
|
+
paint();
|
|
56
|
+
},
|
|
57
|
+
isPersisted(config) {
|
|
58
|
+
return JSON.stringify(
|
|
59
|
+
getImageEditSnapshot(getImageDescriptor(image), image.baseURI)
|
|
60
|
+
) === JSON.stringify(getImageEditSnapshot(config, image.baseURI));
|
|
61
|
+
},
|
|
62
|
+
dispose() {
|
|
63
|
+
disposed = true;
|
|
64
|
+
resolver.removeEventListener("load", paint);
|
|
65
|
+
picture.remove();
|
|
66
|
+
style.remove();
|
|
67
|
+
if (image.dataset.reploImagePreview === token)
|
|
68
|
+
delete image.dataset.reploImagePreview;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
function resolveMetadata(value, original) {
|
|
73
|
+
return value === "[image metadata omitted]" ? original ?? "" : value;
|
|
74
|
+
}
|
|
75
|
+
export {
|
|
76
|
+
createImagePreview
|
|
77
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
function getPictureSources(image) {
|
|
2
|
+
const parent = image.parentElement;
|
|
3
|
+
if (parent?.tagName !== "PICTURE") {
|
|
4
|
+
return [];
|
|
5
|
+
}
|
|
6
|
+
return Array.from(parent.children).filter(
|
|
7
|
+
(child) => {
|
|
8
|
+
return child instanceof HTMLSourceElement && Boolean(
|
|
9
|
+
child.compareDocumentPosition(image) & Node.DOCUMENT_POSITION_FOLLOWING
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
const MAX_IMAGE_METADATA_LENGTH = 2048;
|
|
15
|
+
const MAX_PICTURE_SOURCES = 16;
|
|
16
|
+
function boundedImageMetadata(value) {
|
|
17
|
+
if (value.length > MAX_IMAGE_METADATA_LENGTH || /data:/i.test(value)) {
|
|
18
|
+
return "[image metadata omitted]";
|
|
19
|
+
}
|
|
20
|
+
return value;
|
|
21
|
+
}
|
|
22
|
+
function getPreviewUrl({
|
|
23
|
+
src,
|
|
24
|
+
srcSet,
|
|
25
|
+
baseURI
|
|
26
|
+
}) {
|
|
27
|
+
if (src.length > MAX_IMAGE_METADATA_LENGTH || srcSet.length > MAX_IMAGE_METADATA_LENGTH)
|
|
28
|
+
return null;
|
|
29
|
+
const candidate = src || srcSet.trim().split(/\s+/)[0]?.replace(/,+$/, "");
|
|
30
|
+
if (!candidate) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
try {
|
|
34
|
+
const url = new URL(candidate, baseURI);
|
|
35
|
+
return ["http:", "https:"].includes(url.protocol) ? url.href : null;
|
|
36
|
+
} catch {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
function getImageDescriptor(element) {
|
|
41
|
+
if (!(element instanceof HTMLImageElement)) {
|
|
42
|
+
return void 0;
|
|
43
|
+
}
|
|
44
|
+
const src = element.getAttribute("src") ?? "";
|
|
45
|
+
const srcSet = element.getAttribute("srcset") ?? "";
|
|
46
|
+
return {
|
|
47
|
+
src: boundedImageMetadata(src),
|
|
48
|
+
srcSet: boundedImageMetadata(srcSet),
|
|
49
|
+
sizes: boundedImageMetadata(element.sizes),
|
|
50
|
+
currentSrc: boundedImageMetadata(element.currentSrc),
|
|
51
|
+
previewUrl: getPreviewUrl({ src, srcSet, baseURI: element.baseURI }),
|
|
52
|
+
sources: getPictureSources(element).filter((source) => source.media.length <= MAX_IMAGE_METADATA_LENGTH).slice(0, MAX_PICTURE_SOURCES).map((source) => ({
|
|
53
|
+
srcSet: boundedImageMetadata(source.srcset),
|
|
54
|
+
sizes: boundedImageMetadata(source.sizes),
|
|
55
|
+
media: source.media.trim(),
|
|
56
|
+
type: boundedImageMetadata(source.type),
|
|
57
|
+
previewUrl: getPreviewUrl({
|
|
58
|
+
src: "",
|
|
59
|
+
srcSet: source.srcset,
|
|
60
|
+
baseURI: source.baseURI
|
|
61
|
+
})
|
|
62
|
+
}))
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
export {
|
|
66
|
+
getImageDescriptor,
|
|
67
|
+
getPictureSources
|
|
68
|
+
};
|