@preprio/toolkit 0.5.0-rc.2 → 0.5.0-rc.3
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/README.md +207 -10
- package/dist/astro/index.cjs +1174 -1
- package/dist/astro/index.d.cts +47 -1
- package/dist/astro/index.d.ts +47 -1
- package/dist/astro/index.js +1177 -1
- package/dist/chunk-42Z2VW7G.js +1161 -0
- package/dist/chunk-6WY3MWCX.js +246 -0
- package/dist/chunk-MDAV2FLM.js +26 -0
- package/dist/{chunk-FLPNN3CV.js → chunk-PP3O7RB4.js} +1370 -623
- package/dist/chunk-S3VT4UWM.js +75 -0
- package/dist/chunk-SXUDBGLZ.js +184 -0
- package/dist/chunk-URXSDJOU.js +356 -0
- package/dist/index.cjs +3108 -392
- package/dist/index.d.cts +238 -4
- package/dist/index.d.ts +238 -4
- package/dist/index.js +189 -149
- package/dist/live-preview-EADA3ZL4.js +18 -0
- package/dist/nextjs/components.cjs +1522 -359
- package/dist/nextjs/components.d.cts +1 -1
- package/dist/nextjs/components.d.ts +1 -1
- package/dist/nextjs/components.js +4 -1
- package/dist/nextjs/index.cjs +1065 -6
- package/dist/nextjs/index.d.cts +73 -1
- package/dist/nextjs/index.d.ts +73 -1
- package/dist/nextjs/index.js +1059 -7
- package/dist/nextjs/live-action.cjs +285 -0
- package/dist/nextjs/live-action.d.cts +12 -0
- package/dist/nextjs/live-action.d.ts +12 -0
- package/dist/nextjs/live-action.js +68 -0
- package/dist/nextjs/live.cjs +1838 -0
- package/dist/nextjs/live.d.cts +52 -0
- package/dist/nextjs/live.d.ts +52 -0
- package/dist/nextjs/live.js +265 -0
- package/dist/nuxt/index.cjs +1 -1
- package/dist/nuxt/index.js +1 -1
- package/dist/nuxt/live-preview-PTEC3GPC.js +1462 -0
- package/dist/nuxt/live.cjs +1662 -0
- package/dist/nuxt/live.d.cts +43 -0
- package/dist/nuxt/live.d.ts +43 -0
- package/dist/nuxt/live.js +94 -0
- package/dist/{pixel-B3oQNbZ3.d.cts → pixel-CX422dCO.d.cts} +10 -1
- package/dist/{pixel-B3oQNbZ3.d.ts → pixel-CX422dCO.d.ts} +10 -1
- package/dist/react/components.cjs +1522 -359
- package/dist/react/components.d.cts +9 -0
- package/dist/react/components.d.ts +9 -0
- package/dist/react/components.js +1522 -359
- package/dist/sveltekit/index.cjs +1 -1
- package/dist/sveltekit/index.js +1 -1
- package/package.json +12 -1
- package/src/astro/PreprToolbar.astro +7 -1
package/dist/index.cjs
CHANGED
|
@@ -34,9 +34,14 @@ __export(src_exports, {
|
|
|
34
34
|
getPreprUUIDFromHeaders: () => getPreprUUIDFromHeaders,
|
|
35
35
|
getToolbarPropsFromHeaders: () => getToolbarPropsFromHeaders,
|
|
36
36
|
loadTrackingPixel: () => loadTrackingPixel,
|
|
37
|
+
normalizeQuery: () => normalizeQuery,
|
|
38
|
+
parsePatchLog: () => parsePatchLog,
|
|
39
|
+
previewAttrs: () => previewAttrs,
|
|
37
40
|
processPreprRequest: () => processPreprRequest,
|
|
41
|
+
readLiveLogFromRequest: () => readLiveLogFromRequest,
|
|
38
42
|
resolveFeatures: () => resolveFeatures,
|
|
39
43
|
setTrackingParam: () => setTrackingParam,
|
|
44
|
+
startHtmlLivePreview: () => startHtmlLivePreview,
|
|
40
45
|
stegaClean: () => stegaClean,
|
|
41
46
|
trackEvent: () => trackEvent,
|
|
42
47
|
validatePreprToken: () => validatePreprToken
|
|
@@ -44,7 +49,7 @@ __export(src_exports, {
|
|
|
44
49
|
module.exports = __toCommonJS(src_exports);
|
|
45
50
|
|
|
46
51
|
// src/version.ts
|
|
47
|
-
var VERSION = "0.5.0-rc.
|
|
52
|
+
var VERSION = "0.5.0-rc.3";
|
|
48
53
|
|
|
49
54
|
// src/core/features.ts
|
|
50
55
|
function isEnabled(config) {
|
|
@@ -75,6 +80,7 @@ var PARAM_SEGMENT = "prepr_preview_segment";
|
|
|
75
80
|
var PARAM_VARIANT = "prepr_preview_ab";
|
|
76
81
|
var PARAM_HIDE_BAR = "prepr_hide_bar";
|
|
77
82
|
var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
|
|
83
|
+
var HEADER_LIVE_RENDER = "x-prepr-live";
|
|
78
84
|
|
|
79
85
|
// src/core/cookies.ts
|
|
80
86
|
function getCookie(name) {
|
|
@@ -116,6 +122,40 @@ function crossSiteCookieOptions() {
|
|
|
116
122
|
return { sameSite: "None", secure: true };
|
|
117
123
|
}
|
|
118
124
|
|
|
125
|
+
// src/core/locales/de.json
|
|
126
|
+
var de_default = {
|
|
127
|
+
common: {
|
|
128
|
+
viewingAs: "Ansicht als:",
|
|
129
|
+
user: "Benutzer",
|
|
130
|
+
off: "Aus",
|
|
131
|
+
on: "An",
|
|
132
|
+
reset: "Zur\xFCcksetzen",
|
|
133
|
+
toolbar: "Symbolleiste"
|
|
134
|
+
},
|
|
135
|
+
adaptiveContent: {
|
|
136
|
+
adaptiveContent: "Adaptive Inhalte",
|
|
137
|
+
enablePreview: "Vorschaumodus",
|
|
138
|
+
segment: "Segment",
|
|
139
|
+
ABVariant: "A/B-Variante",
|
|
140
|
+
chooseSegment: "Segment w\xE4hlen",
|
|
141
|
+
searchSegments: "Segmente suchen",
|
|
142
|
+
none: "Keine Segmente",
|
|
143
|
+
allOtherUsers: "Alle anderen Benutzer",
|
|
144
|
+
offDescription: "Die Website als echter Benutzer ansehen (Cookies verwenden)",
|
|
145
|
+
onDescription: "Mit der Symbolleiste Segmente und A/B-Varianten simulieren"
|
|
146
|
+
},
|
|
147
|
+
editingTools: {
|
|
148
|
+
editingTools: "Bearbeitungswerkzeuge",
|
|
149
|
+
editMode: "Bearbeitungsmodus",
|
|
150
|
+
ariaCloseEditMode: "Bearbeitungsmodus schlie\xDFen"
|
|
151
|
+
},
|
|
152
|
+
visualEditor: {
|
|
153
|
+
edit: "Bearbeiten",
|
|
154
|
+
otherItem: "anderes Element",
|
|
155
|
+
linkedItem: "verkn\xFCpftes Element"
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
|
|
119
159
|
// src/core/locales/en.json
|
|
120
160
|
var en_default = {
|
|
121
161
|
common: {
|
|
@@ -142,6 +182,45 @@ var en_default = {
|
|
|
142
182
|
editingTools: "Editing tools",
|
|
143
183
|
editMode: "Edit mode",
|
|
144
184
|
ariaCloseEditMode: "Close edit mode"
|
|
185
|
+
},
|
|
186
|
+
visualEditor: {
|
|
187
|
+
edit: "Edit",
|
|
188
|
+
otherItem: "other item",
|
|
189
|
+
linkedItem: "linked item"
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
// src/core/locales/fr.json
|
|
194
|
+
var fr_default = {
|
|
195
|
+
common: {
|
|
196
|
+
viewingAs: "Affichage en tant que :",
|
|
197
|
+
user: "Utilisateur",
|
|
198
|
+
off: "D\xE9sactiv\xE9",
|
|
199
|
+
on: "Activ\xE9",
|
|
200
|
+
reset: "R\xE9initialiser",
|
|
201
|
+
toolbar: "Barre d'outils"
|
|
202
|
+
},
|
|
203
|
+
adaptiveContent: {
|
|
204
|
+
adaptiveContent: "Contenu adaptatif",
|
|
205
|
+
enablePreview: "Mode aper\xE7u",
|
|
206
|
+
segment: "Segment",
|
|
207
|
+
ABVariant: "Variante A/B",
|
|
208
|
+
chooseSegment: "Choisir un segment",
|
|
209
|
+
searchSegments: "Rechercher des segments",
|
|
210
|
+
none: "Aucun segment",
|
|
211
|
+
allOtherUsers: "Tous les autres utilisateurs",
|
|
212
|
+
offDescription: "Voir le site comme un vrai utilisateur (utiliser les cookies)",
|
|
213
|
+
onDescription: "Utilisez la barre d'outils pour simuler des segments et des variantes A/B"
|
|
214
|
+
},
|
|
215
|
+
editingTools: {
|
|
216
|
+
editingTools: "Outils d'\xE9dition",
|
|
217
|
+
editMode: "Mode \xE9dition",
|
|
218
|
+
ariaCloseEditMode: "Fermer le mode \xE9dition"
|
|
219
|
+
},
|
|
220
|
+
visualEditor: {
|
|
221
|
+
edit: "Modifier",
|
|
222
|
+
otherItem: "autre \xE9l\xE9ment",
|
|
223
|
+
linkedItem: "\xE9l\xE9ment li\xE9"
|
|
145
224
|
}
|
|
146
225
|
};
|
|
147
226
|
|
|
@@ -171,13 +250,20 @@ var nl_default = {
|
|
|
171
250
|
editingTools: "Editing Tools",
|
|
172
251
|
editMode: "Edit mode",
|
|
173
252
|
ariaCloseEditMode: "Edit mode sluiten"
|
|
253
|
+
},
|
|
254
|
+
visualEditor: {
|
|
255
|
+
edit: "Bewerken",
|
|
256
|
+
otherItem: "ander item",
|
|
257
|
+
linkedItem: "gekoppeld item"
|
|
174
258
|
}
|
|
175
259
|
};
|
|
176
260
|
|
|
177
261
|
// src/core/i18n.ts
|
|
178
262
|
var dictionaries = {
|
|
179
263
|
en: en_default,
|
|
180
|
-
nl: nl_default
|
|
264
|
+
nl: nl_default,
|
|
265
|
+
fr: fr_default,
|
|
266
|
+
de: de_default
|
|
181
267
|
};
|
|
182
268
|
var LOCALES = Object.keys(dictionaries);
|
|
183
269
|
function isLocale(value) {
|
|
@@ -211,6 +297,9 @@ var trustedParentOrigin = null;
|
|
|
211
297
|
function setTrustedParentOrigin(origin) {
|
|
212
298
|
trustedParentOrigin = origin;
|
|
213
299
|
}
|
|
300
|
+
function getTrustedParentOrigin() {
|
|
301
|
+
return trustedParentOrigin;
|
|
302
|
+
}
|
|
214
303
|
function sendPreprEvent(event, data, options) {
|
|
215
304
|
if (typeof window !== "undefined") {
|
|
216
305
|
const message = {
|
|
@@ -270,49 +359,47 @@ function createScopedLogger(scopeName) {
|
|
|
270
359
|
prefix: `[Prepr][${scopeName}]`
|
|
271
360
|
});
|
|
272
361
|
}
|
|
273
|
-
function throttle(func, delay) {
|
|
274
|
-
let timeoutId = null;
|
|
275
|
-
let lastExecTime = 0;
|
|
276
|
-
const throttledFunc = ((...args) => {
|
|
277
|
-
const currentTime = Date.now();
|
|
278
|
-
const timeSinceLastExec = currentTime - lastExecTime;
|
|
279
|
-
if (timeSinceLastExec >= delay) {
|
|
280
|
-
func(...args);
|
|
281
|
-
lastExecTime = currentTime;
|
|
282
|
-
} else {
|
|
283
|
-
if (timeoutId) {
|
|
284
|
-
clearTimeout(timeoutId);
|
|
285
|
-
}
|
|
286
|
-
timeoutId = setTimeout(() => {
|
|
287
|
-
func(...args);
|
|
288
|
-
lastExecTime = Date.now();
|
|
289
|
-
timeoutId = null;
|
|
290
|
-
}, delay - timeSinceLastExec);
|
|
291
|
-
}
|
|
292
|
-
});
|
|
293
|
-
throttledFunc.cancel = () => {
|
|
294
|
-
if (timeoutId) {
|
|
295
|
-
clearTimeout(timeoutId);
|
|
296
|
-
timeoutId = null;
|
|
297
|
-
}
|
|
298
|
-
};
|
|
299
|
-
return throttledFunc;
|
|
300
|
-
}
|
|
301
|
-
function createElementCache(query, ttl = 1e3) {
|
|
302
|
-
let cache = null;
|
|
303
|
-
let lastCacheTime = 0;
|
|
304
|
-
return () => {
|
|
305
|
-
const now = Date.now();
|
|
306
|
-
if (!cache || now - lastCacheTime > ttl) {
|
|
307
|
-
cache = document.querySelectorAll(query);
|
|
308
|
-
lastCacheTime = now;
|
|
309
|
-
}
|
|
310
|
-
return cache;
|
|
311
|
-
};
|
|
312
|
-
}
|
|
313
362
|
|
|
314
363
|
// src/core/iframe-bridge.ts
|
|
315
364
|
var debug = createScopedLogger("iframe-bridge");
|
|
365
|
+
var MAX_REFERENCES = 500;
|
|
366
|
+
var MAX_HREF_LENGTH = 8192;
|
|
367
|
+
var MAX_ASSETS = 500;
|
|
368
|
+
var MAX_ASSET_KEY_LENGTH = 2048;
|
|
369
|
+
var MAX_ASSET_FIELD_LENGTH = 512;
|
|
370
|
+
function parseIds(value) {
|
|
371
|
+
if (!Array.isArray(value)) return void 0;
|
|
372
|
+
return value.slice(0, MAX_REFERENCES).filter((id) => typeof id === "string" && id.length > 0);
|
|
373
|
+
}
|
|
374
|
+
function parseReferences(value) {
|
|
375
|
+
if (!Array.isArray(value)) return void 0;
|
|
376
|
+
const list = [];
|
|
377
|
+
for (const entry of value.slice(0, MAX_REFERENCES)) {
|
|
378
|
+
const id = entry?.id;
|
|
379
|
+
const field = entry?.field;
|
|
380
|
+
if (typeof id === "string" && id && typeof field === "string" && field) {
|
|
381
|
+
list.push({ id, field });
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
return list;
|
|
385
|
+
}
|
|
386
|
+
function boundedString(value, max) {
|
|
387
|
+
return typeof value === "string" && value && value.length <= max ? value : void 0;
|
|
388
|
+
}
|
|
389
|
+
function parseAssets(value) {
|
|
390
|
+
if (!Array.isArray(value)) return void 0;
|
|
391
|
+
const list = [];
|
|
392
|
+
for (const entry of value.slice(0, MAX_ASSETS)) {
|
|
393
|
+
if (!entry || typeof entry !== "object") continue;
|
|
394
|
+
const raw = entry;
|
|
395
|
+
const key = boundedString(raw.key, MAX_ASSET_KEY_LENGTH);
|
|
396
|
+
const field = boundedString(raw.field, MAX_ASSET_FIELD_LENGTH);
|
|
397
|
+
if (!key || !field) continue;
|
|
398
|
+
const entryId = boundedString(raw.entryId, MAX_ASSET_FIELD_LENGTH);
|
|
399
|
+
list.push(entryId ? { key, field, entryId } : { key, field });
|
|
400
|
+
}
|
|
401
|
+
return list;
|
|
402
|
+
}
|
|
316
403
|
var EDITOR_BASE_DOMAIN = "prepr.io";
|
|
317
404
|
function isAllowedEditorOrigin(origin, allowed) {
|
|
318
405
|
if (allowed) {
|
|
@@ -334,6 +421,10 @@ function isAllowedEditorOrigin(origin, allowed) {
|
|
|
334
421
|
function createIframeBridge(store, options = {}) {
|
|
335
422
|
const allowedOrigins = options.allowedEditorOrigins;
|
|
336
423
|
const onScrollToField = options.onScrollToField;
|
|
424
|
+
const onHandshake = options.onHandshake;
|
|
425
|
+
const onReferences = options.onReferences;
|
|
426
|
+
const onAssets = options.onAssets;
|
|
427
|
+
const onAllowNavigation = options.onAllowNavigation;
|
|
337
428
|
let parentOrigin = null;
|
|
338
429
|
const onKeyDown = (event) => {
|
|
339
430
|
const key = event.key.toLowerCase();
|
|
@@ -354,8 +445,43 @@ function createIframeBridge(store, options = {}) {
|
|
|
354
445
|
setTimeout(() => window.scrollTo(0, top), 1);
|
|
355
446
|
}
|
|
356
447
|
store?.set({ previewMode: true, editMode: data.editMode ?? true });
|
|
448
|
+
const itemId = typeof data.itemId === "string" && data.itemId ? data.itemId : void 0;
|
|
449
|
+
const referencedIds = parseReferences(data.referencedIds);
|
|
450
|
+
const componentIds = parseIds(data.componentIds);
|
|
451
|
+
const uiLocale = isLocale(data.uiLocale) ? data.uiLocale : void 0;
|
|
452
|
+
const navigationGuard = data.navigationGuard === true;
|
|
453
|
+
const assets = parseAssets(data.assets);
|
|
454
|
+
try {
|
|
455
|
+
onHandshake?.({
|
|
456
|
+
...itemId && { itemId },
|
|
457
|
+
...referencedIds && { referencedIds },
|
|
458
|
+
...componentIds && { componentIds },
|
|
459
|
+
...uiLocale && { uiLocale },
|
|
460
|
+
...navigationGuard && { navigationGuard },
|
|
461
|
+
...assets && { assets }
|
|
462
|
+
});
|
|
463
|
+
} catch (error) {
|
|
464
|
+
debug.warn("handshake handler failed", error);
|
|
465
|
+
}
|
|
357
466
|
}
|
|
358
467
|
if (!parentOrigin || evt.origin !== parentOrigin) return;
|
|
468
|
+
if (data?.event === "prepr:references") {
|
|
469
|
+
const assets = parseAssets(data.assets);
|
|
470
|
+
if (assets) {
|
|
471
|
+
try {
|
|
472
|
+
onAssets?.(assets);
|
|
473
|
+
} catch (error) {
|
|
474
|
+
debug.warn("assets handler failed", error);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
const referencedIds = parseReferences(data.referencedIds);
|
|
478
|
+
if (!referencedIds) return;
|
|
479
|
+
try {
|
|
480
|
+
onReferences?.(referencedIds, parseIds(data.componentIds));
|
|
481
|
+
} catch (error) {
|
|
482
|
+
debug.warn("references handler failed", error);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
359
485
|
if (data?.event === "prepr:getScrollPosition") {
|
|
360
486
|
const currentScrollY = window.scrollY || document.documentElement.scrollTop;
|
|
361
487
|
sendPreprEvent("getScrollPosition", { value: currentScrollY });
|
|
@@ -363,12 +489,32 @@ function createIframeBridge(store, options = {}) {
|
|
|
363
489
|
if (data?.event === "prepr:scrollToField") {
|
|
364
490
|
if (typeof data.field !== "string" || !data.field) return;
|
|
365
491
|
if (data.id !== void 0 && typeof data.id !== "string") return;
|
|
492
|
+
const block = typeof data.block === "number" && Number.isInteger(data.block) ? data.block : void 0;
|
|
493
|
+
const entryId = typeof data.entryId === "string" && data.entryId ? data.entryId : void 0;
|
|
494
|
+
const fieldById = typeof data.fieldById === "string" && data.fieldById ? data.fieldById : void 0;
|
|
366
495
|
try {
|
|
367
|
-
onScrollToField?.({
|
|
496
|
+
onScrollToField?.({
|
|
497
|
+
field: data.field,
|
|
498
|
+
id: data.id,
|
|
499
|
+
block,
|
|
500
|
+
entryId,
|
|
501
|
+
fieldById
|
|
502
|
+
});
|
|
368
503
|
} catch (error) {
|
|
369
504
|
debug.warn("scrollToField handler failed", error);
|
|
370
505
|
}
|
|
371
506
|
}
|
|
507
|
+
if (data?.event === "prepr:allowNavigation") {
|
|
508
|
+
const href = data.href;
|
|
509
|
+
if (typeof href !== "string" || !href || href.length > MAX_HREF_LENGTH) {
|
|
510
|
+
return;
|
|
511
|
+
}
|
|
512
|
+
try {
|
|
513
|
+
onAllowNavigation?.(href);
|
|
514
|
+
} catch (error) {
|
|
515
|
+
debug.warn("allowNavigation handler failed", error);
|
|
516
|
+
}
|
|
517
|
+
}
|
|
372
518
|
};
|
|
373
519
|
return {
|
|
374
520
|
start() {
|
|
@@ -476,29 +622,43 @@ function tagEncodedElement(element, decoded) {
|
|
|
476
622
|
element.setAttribute("data-prepr-origin", decoded.origin);
|
|
477
623
|
const { id, field, locale } = parseEditHref(decoded.href);
|
|
478
624
|
setOrRemove(element, "data-prepr-id", id);
|
|
479
|
-
|
|
625
|
+
const fieldHint = element.getAttribute("data-prepr-edit-target")?.trim() || void 0;
|
|
626
|
+
setOrRemove(element, "data-prepr-field", field ?? fieldHint);
|
|
480
627
|
setOrRemove(element, "data-prepr-locale", locale);
|
|
481
628
|
}
|
|
629
|
+
function readEditPayload(element) {
|
|
630
|
+
return {
|
|
631
|
+
href: element.getAttribute("data-prepr-href") ?? "",
|
|
632
|
+
origin: element.getAttribute("data-prepr-origin") ?? "",
|
|
633
|
+
id: element.getAttribute("data-prepr-id") ?? void 0,
|
|
634
|
+
field: element.getAttribute("data-prepr-field") ?? void 0,
|
|
635
|
+
locale: element.getAttribute("data-prepr-locale") ?? void 0,
|
|
636
|
+
entryId: element.getAttribute("data-prepr-entry-id") || void 0
|
|
637
|
+
};
|
|
638
|
+
}
|
|
482
639
|
|
|
483
640
|
// src/core/stega/auto-clean.ts
|
|
484
641
|
var debug3 = createScopedLogger("stega:auto-clean");
|
|
642
|
+
var cleanedNodes = /* @__PURE__ */ new WeakMap();
|
|
485
643
|
function createStegaAutoClean(options) {
|
|
486
644
|
const stripText = options?.enabled ?? true;
|
|
487
645
|
let observer = null;
|
|
488
646
|
let processing = false;
|
|
489
|
-
let cleaned = /* @__PURE__ */ new WeakMap();
|
|
490
647
|
let pendingHidden = /* @__PURE__ */ new Set();
|
|
491
648
|
let pendingDirty = /* @__PURE__ */ new Set();
|
|
492
649
|
let debounceTimeout = null;
|
|
493
650
|
function cleanTextNode(textNode) {
|
|
494
651
|
if (isIgnoredTextNode(textNode)) return false;
|
|
495
652
|
const textContent = textNode.textContent;
|
|
496
|
-
const info =
|
|
653
|
+
const info = cleanedNodes.get(textNode);
|
|
497
654
|
const settled = stripText ? info?.cleaned : info?.original;
|
|
498
655
|
if (info && textContent === settled) {
|
|
499
656
|
if (!info.decoded) return false;
|
|
500
657
|
const shown = resolveEditTarget(textNode);
|
|
501
|
-
if (!shown)
|
|
658
|
+
if (!shown) {
|
|
659
|
+
pendingHidden.add(textNode);
|
|
660
|
+
return false;
|
|
661
|
+
}
|
|
502
662
|
pendingHidden.delete(textNode);
|
|
503
663
|
if (shown.hasAttribute("data-prepr-encoded")) return false;
|
|
504
664
|
tagEncodedElement(shown, info.decoded);
|
|
@@ -509,7 +669,7 @@ function createStegaAutoClean(options) {
|
|
|
509
669
|
if (!encoded || stripped === textContent) return false;
|
|
510
670
|
const decoded = decodeStega(textContent);
|
|
511
671
|
if (!decoded?.href && !stripText) return false;
|
|
512
|
-
|
|
672
|
+
cleanedNodes.set(textNode, {
|
|
513
673
|
original: textContent,
|
|
514
674
|
cleaned: stripped,
|
|
515
675
|
decoded: decoded?.href ? decoded : null
|
|
@@ -551,7 +711,7 @@ function createStegaAutoClean(options) {
|
|
|
551
711
|
}
|
|
552
712
|
if (mutation.type === "characterData" && mutation.target.nodeType === Node.TEXT_NODE) {
|
|
553
713
|
const textNode = mutation.target;
|
|
554
|
-
const info =
|
|
714
|
+
const info = cleanedNodes.get(textNode);
|
|
555
715
|
const text = textNode.textContent ?? "";
|
|
556
716
|
const settled = stripText ? info?.cleaned : info?.original;
|
|
557
717
|
if (text !== settled && (0, import_stega2.vercelStegaSplit)(text).encoded) {
|
|
@@ -594,7 +754,16 @@ function createStegaAutoClean(options) {
|
|
|
594
754
|
retryPendingHidden();
|
|
595
755
|
}, 50);
|
|
596
756
|
}
|
|
757
|
+
let resizeTimeout = null;
|
|
758
|
+
function handleResize() {
|
|
759
|
+
if (pendingHidden.size === 0 || resizeTimeout) return;
|
|
760
|
+
resizeTimeout = setTimeout(() => {
|
|
761
|
+
resizeTimeout = null;
|
|
762
|
+
retryPendingHidden();
|
|
763
|
+
}, 100);
|
|
764
|
+
}
|
|
597
765
|
function setupObserver() {
|
|
766
|
+
window.addEventListener("resize", handleResize, { passive: true });
|
|
598
767
|
observer = new MutationObserver(handleMutations);
|
|
599
768
|
observer.observe(document.body, {
|
|
600
769
|
childList: true,
|
|
@@ -617,11 +786,15 @@ function createStegaAutoClean(options) {
|
|
|
617
786
|
clearTimeout(debounceTimeout);
|
|
618
787
|
debounceTimeout = null;
|
|
619
788
|
}
|
|
789
|
+
if (resizeTimeout) {
|
|
790
|
+
clearTimeout(resizeTimeout);
|
|
791
|
+
resizeTimeout = null;
|
|
792
|
+
}
|
|
620
793
|
if (observer) {
|
|
621
794
|
observer.disconnect();
|
|
622
795
|
observer = null;
|
|
796
|
+
window.removeEventListener("resize", handleResize);
|
|
623
797
|
}
|
|
624
|
-
cleaned = /* @__PURE__ */ new WeakMap();
|
|
625
798
|
pendingHidden = /* @__PURE__ */ new Set();
|
|
626
799
|
pendingDirty = /* @__PURE__ */ new Set();
|
|
627
800
|
debug3.log("stega auto-clean stopped");
|
|
@@ -629,6 +802,439 @@ function createStegaAutoClean(options) {
|
|
|
629
802
|
return { start, stop };
|
|
630
803
|
}
|
|
631
804
|
|
|
805
|
+
// src/core/visual-editor/overlay.ts
|
|
806
|
+
var HOST_TAG = "prepr-visual-editor";
|
|
807
|
+
var SCROLL_SETTLE_MS = 120;
|
|
808
|
+
var LABEL_SPACE_PX = 22;
|
|
809
|
+
var BOX_PADDING_PX = 3;
|
|
810
|
+
var LABEL_MARGIN_PX = 4;
|
|
811
|
+
var PROBE_POINTS = [
|
|
812
|
+
[0.5, 0.5],
|
|
813
|
+
[0.15, 0.2],
|
|
814
|
+
[0.85, 0.2],
|
|
815
|
+
[0.15, 0.8],
|
|
816
|
+
[0.85, 0.8]
|
|
817
|
+
];
|
|
818
|
+
function overlapsBox(area, rect) {
|
|
819
|
+
return area.left < rect.right + BOX_PADDING_PX && area.right > rect.left - BOX_PADDING_PX && area.top < rect.bottom + BOX_PADDING_PX && area.bottom > rect.top - BOX_PADDING_PX;
|
|
820
|
+
}
|
|
821
|
+
function overlaps(a2, b2) {
|
|
822
|
+
return a2.left < b2.right && b2.left < a2.right && a2.top < b2.bottom && b2.top < a2.bottom;
|
|
823
|
+
}
|
|
824
|
+
function coverOf(hit, target, x2, y2) {
|
|
825
|
+
let cover = hit.getBoundingClientRect();
|
|
826
|
+
for (let el = hit.parentElement; el && !el.contains(target) && el !== document.body; el = el.parentElement) {
|
|
827
|
+
const r2 = el.getBoundingClientRect();
|
|
828
|
+
if (x2 < r2.left || x2 >= r2.right || y2 < r2.top || y2 >= r2.bottom) break;
|
|
829
|
+
cover = r2;
|
|
830
|
+
}
|
|
831
|
+
return cover;
|
|
832
|
+
}
|
|
833
|
+
function mergeAreas(areas) {
|
|
834
|
+
const merged = areas.slice();
|
|
835
|
+
for (let i2 = 0; i2 < merged.length; i2++) {
|
|
836
|
+
for (let j2 = i2 + 1; j2 < merged.length; j2++) {
|
|
837
|
+
if (!overlaps(merged[i2], merged[j2])) continue;
|
|
838
|
+
merged[i2] = {
|
|
839
|
+
left: Math.min(merged[i2].left, merged[j2].left),
|
|
840
|
+
top: Math.min(merged[i2].top, merged[j2].top),
|
|
841
|
+
right: Math.max(merged[i2].right, merged[j2].right),
|
|
842
|
+
bottom: Math.max(merged[i2].bottom, merged[j2].bottom)
|
|
843
|
+
};
|
|
844
|
+
merged.splice(j2, 1);
|
|
845
|
+
j2 = i2;
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
return merged;
|
|
849
|
+
}
|
|
850
|
+
function findCovers(target, rect) {
|
|
851
|
+
const width = window.innerWidth;
|
|
852
|
+
const height = window.innerHeight;
|
|
853
|
+
const covers = [];
|
|
854
|
+
const seen = /* @__PURE__ */ new Set();
|
|
855
|
+
let probed = false;
|
|
856
|
+
let reached = false;
|
|
857
|
+
for (const [fx, fy] of PROBE_POINTS) {
|
|
858
|
+
const x2 = rect.left + rect.width * fx;
|
|
859
|
+
const y2 = rect.top + rect.height * fy;
|
|
860
|
+
if (x2 < 0 || y2 < 0 || x2 >= width || y2 >= height) continue;
|
|
861
|
+
probed = true;
|
|
862
|
+
const hit = document.elementFromPoint(x2, y2);
|
|
863
|
+
if (!hit || hit === target || target.contains(hit)) {
|
|
864
|
+
reached = true;
|
|
865
|
+
continue;
|
|
866
|
+
}
|
|
867
|
+
if (seen.has(hit)) continue;
|
|
868
|
+
seen.add(hit);
|
|
869
|
+
if (covers.some(
|
|
870
|
+
(c2) => x2 >= c2.left && x2 < c2.right && y2 >= c2.top && y2 < c2.bottom
|
|
871
|
+
)) {
|
|
872
|
+
continue;
|
|
873
|
+
}
|
|
874
|
+
covers.push(coverOf(hit, target, x2, y2));
|
|
875
|
+
}
|
|
876
|
+
if (!probed) return [];
|
|
877
|
+
return reached ? mergeAreas(covers) : null;
|
|
878
|
+
}
|
|
879
|
+
function clipPath(x2, y2, covers) {
|
|
880
|
+
const far = 1e5;
|
|
881
|
+
const points = [
|
|
882
|
+
`${-far}px ${-far}px`,
|
|
883
|
+
`${far}px ${-far}px`,
|
|
884
|
+
`${far}px ${far}px`,
|
|
885
|
+
`${-far}px ${far}px`,
|
|
886
|
+
`${-far}px ${-far}px`
|
|
887
|
+
];
|
|
888
|
+
for (const c2 of covers) {
|
|
889
|
+
const l2 = c2.left - x2;
|
|
890
|
+
const t3 = c2.top - y2;
|
|
891
|
+
const r2 = c2.right - x2;
|
|
892
|
+
const b2 = c2.bottom - y2;
|
|
893
|
+
points.push(
|
|
894
|
+
`${l2}px ${t3}px`,
|
|
895
|
+
`${r2}px ${t3}px`,
|
|
896
|
+
`${r2}px ${b2}px`,
|
|
897
|
+
`${l2}px ${b2}px`,
|
|
898
|
+
`${l2}px ${t3}px`,
|
|
899
|
+
`${-far}px ${-far}px`
|
|
900
|
+
);
|
|
901
|
+
}
|
|
902
|
+
return `polygon(evenodd, ${points.join(", ")})`;
|
|
903
|
+
}
|
|
904
|
+
var STYLES = `
|
|
905
|
+
:host {
|
|
906
|
+
all: initial;
|
|
907
|
+
position: fixed;
|
|
908
|
+
inset: 0;
|
|
909
|
+
pointer-events: none;
|
|
910
|
+
z-index: 2147483646;
|
|
911
|
+
contain: strict;
|
|
912
|
+
}
|
|
913
|
+
.box {
|
|
914
|
+
position: absolute;
|
|
915
|
+
top: 0;
|
|
916
|
+
left: 0;
|
|
917
|
+
box-sizing: border-box;
|
|
918
|
+
border-radius: 6px;
|
|
919
|
+
opacity: 0;
|
|
920
|
+
will-change: transform, width, height;
|
|
921
|
+
transition:
|
|
922
|
+
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
923
|
+
width 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
924
|
+
height 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
925
|
+
opacity 140ms ease;
|
|
926
|
+
}
|
|
927
|
+
.box[data-visible] { opacity: 1; }
|
|
928
|
+
.box[data-instant], :host([data-scrolling]) .box {
|
|
929
|
+
transition: opacity 140ms ease;
|
|
930
|
+
}
|
|
931
|
+
.hover {
|
|
932
|
+
border: 1.5px solid rgba(79, 70, 229, 0.9);
|
|
933
|
+
background: rgba(79, 70, 229, 0.06);
|
|
934
|
+
}
|
|
935
|
+
.selected {
|
|
936
|
+
border: 2px solid #4f46e5;
|
|
937
|
+
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
|
|
938
|
+
}
|
|
939
|
+
.label {
|
|
940
|
+
position: absolute;
|
|
941
|
+
left: -2px;
|
|
942
|
+
bottom: 100%;
|
|
943
|
+
margin-bottom: 4px;
|
|
944
|
+
padding: 3px 7px;
|
|
945
|
+
border-radius: 5px;
|
|
946
|
+
background: #4f46e5;
|
|
947
|
+
color: #fff;
|
|
948
|
+
font: 500 11px/1.3 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
949
|
+
letter-spacing: 0.01em;
|
|
950
|
+
white-space: nowrap;
|
|
951
|
+
display: flex;
|
|
952
|
+
max-width: 240px;
|
|
953
|
+
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
|
|
954
|
+
}
|
|
955
|
+
.text {
|
|
956
|
+
min-width: 0;
|
|
957
|
+
overflow: hidden;
|
|
958
|
+
text-overflow: ellipsis;
|
|
959
|
+
}
|
|
960
|
+
.hover .label { background: rgba(79, 70, 229, 0.92); }
|
|
961
|
+
/* Content of another item than the one open in the editor: still clickable,
|
|
962
|
+
but visibly not part of the item being edited. */
|
|
963
|
+
.hover[data-item-kind='other'] {
|
|
964
|
+
border: 1.5px dashed #a5b4fc;
|
|
965
|
+
background: rgba(100, 116, 139, 0.05);
|
|
966
|
+
}
|
|
967
|
+
.hover[data-item-kind='other'] .label { background: #64748b; }
|
|
968
|
+
.hover[data-item-kind='referenced'] {
|
|
969
|
+
border: 1.5px solid #a5b4fc;
|
|
970
|
+
background: rgba(79, 70, 229, 0.03);
|
|
971
|
+
}
|
|
972
|
+
.hover[data-item-kind='referenced'] .label { background: #818cf8; }
|
|
973
|
+
.box[data-label-covered] .label { visibility: hidden; }
|
|
974
|
+
.box[data-label-inside] .label {
|
|
975
|
+
bottom: auto;
|
|
976
|
+
top: 2px;
|
|
977
|
+
left: 2px;
|
|
978
|
+
margin: 0;
|
|
979
|
+
}
|
|
980
|
+
/* A clickable hover label (edit mode on the live site). Only while shown, so
|
|
981
|
+
a fading box never leaves an invisible click target behind. */
|
|
982
|
+
:host([data-label-action]) .hover[data-visible] .label {
|
|
983
|
+
pointer-events: auto;
|
|
984
|
+
cursor: pointer;
|
|
985
|
+
}
|
|
986
|
+
:host([data-label-action]) .hover .label::after {
|
|
987
|
+
content: '\\2197';
|
|
988
|
+
margin-left: 5px;
|
|
989
|
+
}
|
|
990
|
+
:host([data-label-action]) .hover .label:hover { background: #4338ca; }
|
|
991
|
+
/* Bridges the gap between the label and its element, so the pointer can
|
|
992
|
+
travel from one to the other without the hover ending on the way. */
|
|
993
|
+
:host([data-label-action]) .hover .label::before {
|
|
994
|
+
content: '';
|
|
995
|
+
position: absolute;
|
|
996
|
+
left: 0;
|
|
997
|
+
right: 0;
|
|
998
|
+
top: 100%;
|
|
999
|
+
height: ${LABEL_MARGIN_PX + BOX_PADDING_PX + 2}px;
|
|
1000
|
+
}
|
|
1001
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1002
|
+
.box { transition: opacity 80ms linear; }
|
|
1003
|
+
}
|
|
1004
|
+
`;
|
|
1005
|
+
var VisualEditorOverlay = class {
|
|
1006
|
+
constructor(options = {}) {
|
|
1007
|
+
this.host = null;
|
|
1008
|
+
this.hoverBox = null;
|
|
1009
|
+
this.selectedBox = null;
|
|
1010
|
+
this.frame = null;
|
|
1011
|
+
this.scrollTimeout = null;
|
|
1012
|
+
this.resizeObserver = null;
|
|
1013
|
+
this.onLabelClick = options.onLabelClick;
|
|
1014
|
+
}
|
|
1015
|
+
mount() {
|
|
1016
|
+
if (this.host) return;
|
|
1017
|
+
const host = document.createElement(HOST_TAG);
|
|
1018
|
+
const shadow = host.attachShadow({ mode: "open" });
|
|
1019
|
+
const style = document.createElement("style");
|
|
1020
|
+
style.textContent = STYLES;
|
|
1021
|
+
shadow.appendChild(style);
|
|
1022
|
+
this.hoverBox = this.createBox(shadow, "hover");
|
|
1023
|
+
this.selectedBox = this.createBox(shadow, "selected");
|
|
1024
|
+
const onLabelClick = this.onLabelClick;
|
|
1025
|
+
if (onLabelClick) {
|
|
1026
|
+
host.setAttribute("data-label-action", "");
|
|
1027
|
+
const hoverBox = this.hoverBox;
|
|
1028
|
+
hoverBox.label.addEventListener("click", () => {
|
|
1029
|
+
if (hoverBox.target) onLabelClick(hoverBox.target);
|
|
1030
|
+
});
|
|
1031
|
+
}
|
|
1032
|
+
document.documentElement.appendChild(host);
|
|
1033
|
+
this.host = host;
|
|
1034
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
1035
|
+
this.resizeObserver = new ResizeObserver(() => this.schedule());
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
1038
|
+
unmount() {
|
|
1039
|
+
if (this.frame !== null) cancelAnimationFrame(this.frame);
|
|
1040
|
+
if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
|
|
1041
|
+
this.frame = null;
|
|
1042
|
+
this.scrollTimeout = null;
|
|
1043
|
+
this.resizeObserver?.disconnect();
|
|
1044
|
+
this.resizeObserver = null;
|
|
1045
|
+
this.host?.remove();
|
|
1046
|
+
this.host = null;
|
|
1047
|
+
this.hoverBox = null;
|
|
1048
|
+
this.selectedBox = null;
|
|
1049
|
+
}
|
|
1050
|
+
/**
|
|
1051
|
+
* Whether a pointer event target is this chrome: events from inside the
|
|
1052
|
+
* shadow root reach the page retargeted to its host.
|
|
1053
|
+
*/
|
|
1054
|
+
owns(node) {
|
|
1055
|
+
return node !== null && node === this.host;
|
|
1056
|
+
}
|
|
1057
|
+
getHoverTarget() {
|
|
1058
|
+
return this.hoverBox?.target ?? null;
|
|
1059
|
+
}
|
|
1060
|
+
getSelectedTarget() {
|
|
1061
|
+
return this.selectedBox?.target ?? null;
|
|
1062
|
+
}
|
|
1063
|
+
setHover(target, label, options = {}) {
|
|
1064
|
+
if (target) {
|
|
1065
|
+
this.hoverBox?.root.setAttribute(
|
|
1066
|
+
"data-item-kind",
|
|
1067
|
+
options.kind ?? "current"
|
|
1068
|
+
);
|
|
1069
|
+
}
|
|
1070
|
+
this.retarget(this.hoverBox, target, label);
|
|
1071
|
+
}
|
|
1072
|
+
setSelected(target, label) {
|
|
1073
|
+
this.retarget(this.selectedBox, target, label);
|
|
1074
|
+
}
|
|
1075
|
+
/** Call on every scroll; positions follow in the next frame, untransitioned. */
|
|
1076
|
+
onScroll() {
|
|
1077
|
+
if (!this.host) return;
|
|
1078
|
+
this.host.setAttribute("data-scrolling", "");
|
|
1079
|
+
if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
|
|
1080
|
+
this.scrollTimeout = setTimeout(() => {
|
|
1081
|
+
this.host?.removeAttribute("data-scrolling");
|
|
1082
|
+
this.scrollTimeout = null;
|
|
1083
|
+
}, SCROLL_SETTLE_MS);
|
|
1084
|
+
this.schedule();
|
|
1085
|
+
}
|
|
1086
|
+
/** Re-measure both boxes in the next animation frame. */
|
|
1087
|
+
schedule() {
|
|
1088
|
+
if (this.frame !== null || !this.host) return;
|
|
1089
|
+
this.frame = requestAnimationFrame(() => {
|
|
1090
|
+
this.frame = null;
|
|
1091
|
+
this.render();
|
|
1092
|
+
});
|
|
1093
|
+
}
|
|
1094
|
+
createBox(shadow, kind) {
|
|
1095
|
+
const root = document.createElement("div");
|
|
1096
|
+
root.className = `box ${kind}`;
|
|
1097
|
+
const label = document.createElement("div");
|
|
1098
|
+
label.className = "label";
|
|
1099
|
+
const text = document.createElement("span");
|
|
1100
|
+
text.className = "text";
|
|
1101
|
+
label.appendChild(text);
|
|
1102
|
+
root.appendChild(label);
|
|
1103
|
+
shadow.appendChild(root);
|
|
1104
|
+
return { root, label, text, target: null };
|
|
1105
|
+
}
|
|
1106
|
+
retarget(box, target, label) {
|
|
1107
|
+
if (!box || box.target === target) return;
|
|
1108
|
+
const previous = box.target;
|
|
1109
|
+
if (previous) this.resizeObserver?.unobserve(previous);
|
|
1110
|
+
box.target = target;
|
|
1111
|
+
if (target) {
|
|
1112
|
+
this.resizeObserver?.observe(target);
|
|
1113
|
+
box.text.textContent = label;
|
|
1114
|
+
if (!box.root.hasAttribute("data-visible")) {
|
|
1115
|
+
box.root.setAttribute("data-instant", "");
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
this.schedule();
|
|
1119
|
+
}
|
|
1120
|
+
render() {
|
|
1121
|
+
const hover = this.hoverBox ? this.measure(this.hoverBox) : null;
|
|
1122
|
+
const selected = this.selectedBox ? this.measure(this.selectedBox) : null;
|
|
1123
|
+
if (this.hoverBox) this.paint(this.hoverBox, hover, selected);
|
|
1124
|
+
if (this.selectedBox) this.paint(this.selectedBox, selected, hover);
|
|
1125
|
+
}
|
|
1126
|
+
measure(box) {
|
|
1127
|
+
const target = box.target;
|
|
1128
|
+
if (!target) return null;
|
|
1129
|
+
if (!target.isConnected) {
|
|
1130
|
+
this.resizeObserver?.unobserve(target);
|
|
1131
|
+
box.target = null;
|
|
1132
|
+
return null;
|
|
1133
|
+
}
|
|
1134
|
+
const rect = target.getBoundingClientRect();
|
|
1135
|
+
if (rect.width === 0 && rect.height === 0) return null;
|
|
1136
|
+
const covers = findCovers(target, rect);
|
|
1137
|
+
if (!covers) return null;
|
|
1138
|
+
return {
|
|
1139
|
+
rect,
|
|
1140
|
+
covers,
|
|
1141
|
+
labelWidth: covers.length ? box.label.offsetWidth : 0,
|
|
1142
|
+
labelHeight: covers.length ? box.label.offsetHeight : 0
|
|
1143
|
+
};
|
|
1144
|
+
}
|
|
1145
|
+
paint(box, measurement, other = null) {
|
|
1146
|
+
const root = box.root;
|
|
1147
|
+
if (!measurement) {
|
|
1148
|
+
root.removeAttribute("data-visible");
|
|
1149
|
+
return;
|
|
1150
|
+
}
|
|
1151
|
+
const { rect, covers } = measurement;
|
|
1152
|
+
const x2 = rect.left - BOX_PADDING_PX;
|
|
1153
|
+
const y2 = rect.top - BOX_PADDING_PX;
|
|
1154
|
+
const labelAbove = {
|
|
1155
|
+
left: x2 - 2,
|
|
1156
|
+
top: y2 - LABEL_SPACE_PX,
|
|
1157
|
+
right: x2 - 2 + (measurement.labelWidth || Math.min(240, rect.width)),
|
|
1158
|
+
bottom: y2
|
|
1159
|
+
};
|
|
1160
|
+
const labelInside = y2 < LABEL_SPACE_PX || other !== null && other.rect !== rect && overlapsBox(labelAbove, other.rect);
|
|
1161
|
+
root.style.transform = `translate3d(${x2}px, ${y2}px, 0)`;
|
|
1162
|
+
root.style.width = `${rect.width + BOX_PADDING_PX * 2}px`;
|
|
1163
|
+
root.style.height = `${rect.height + BOX_PADDING_PX * 2}px`;
|
|
1164
|
+
root.toggleAttribute("data-label-inside", labelInside);
|
|
1165
|
+
root.style.clipPath = covers.length ? clipPath(x2, y2, covers) : "";
|
|
1166
|
+
const labelLeft = labelInside ? x2 + 2 : x2 - 2;
|
|
1167
|
+
const labelTop = labelInside ? y2 + 2 : y2 - LABEL_MARGIN_PX - measurement.labelHeight;
|
|
1168
|
+
const label = {
|
|
1169
|
+
left: labelLeft,
|
|
1170
|
+
top: labelTop,
|
|
1171
|
+
right: labelLeft + measurement.labelWidth,
|
|
1172
|
+
bottom: labelTop + measurement.labelHeight
|
|
1173
|
+
};
|
|
1174
|
+
root.toggleAttribute(
|
|
1175
|
+
"data-label-covered",
|
|
1176
|
+
covers.some((c2) => overlaps(c2, label))
|
|
1177
|
+
);
|
|
1178
|
+
if (root.hasAttribute("data-instant")) {
|
|
1179
|
+
root.setAttribute("data-visible", "");
|
|
1180
|
+
requestAnimationFrame(() => root.removeAttribute("data-instant"));
|
|
1181
|
+
return;
|
|
1182
|
+
}
|
|
1183
|
+
root.setAttribute("data-visible", "");
|
|
1184
|
+
}
|
|
1185
|
+
};
|
|
1186
|
+
|
|
1187
|
+
// src/core/visual-editor/field-path.ts
|
|
1188
|
+
var INDEX_SEGMENT = /^\d+$/;
|
|
1189
|
+
var WORD_SEPARATORS = /[_-]+/g;
|
|
1190
|
+
function normalizeFieldPath(path) {
|
|
1191
|
+
return path.split(".").map(
|
|
1192
|
+
(segment) => INDEX_SEGMENT.test(segment) ? String(Number.parseInt(segment, 10)) : segment
|
|
1193
|
+
).join(".");
|
|
1194
|
+
}
|
|
1195
|
+
var GENERIC_LEAVES = /* @__PURE__ */ new Set(["value", "text", "body", "content", "label"]);
|
|
1196
|
+
function humanize(name) {
|
|
1197
|
+
const words = name.replace(WORD_SEPARATORS, " ").trim();
|
|
1198
|
+
return words.charAt(0).toUpperCase() + words.slice(1);
|
|
1199
|
+
}
|
|
1200
|
+
function fieldLabel(path, locale = "en") {
|
|
1201
|
+
if (!path) return t("visualEditor.edit", locale);
|
|
1202
|
+
const segments = path.split(".").filter((s2) => s2 && s2 !== "items" && !INDEX_SEGMENT.test(s2));
|
|
1203
|
+
const name = segments[segments.length - 1];
|
|
1204
|
+
if (!name) return t("visualEditor.edit", locale);
|
|
1205
|
+
const parent = segments[segments.length - 2];
|
|
1206
|
+
if (parent && GENERIC_LEAVES.has(name)) {
|
|
1207
|
+
return `${humanize(parent)} \u203A ${humanize(name)}`;
|
|
1208
|
+
}
|
|
1209
|
+
return humanize(name);
|
|
1210
|
+
}
|
|
1211
|
+
function findFieldElement(lookup) {
|
|
1212
|
+
if (!lookup.field) return null;
|
|
1213
|
+
const candidates = document.querySelectorAll(
|
|
1214
|
+
"[data-prepr-encoded]"
|
|
1215
|
+
);
|
|
1216
|
+
if (lookup.entryId) {
|
|
1217
|
+
for (const candidate of candidates) {
|
|
1218
|
+
if (candidate.getAttribute("data-prepr-entry-id") === lookup.entryId) {
|
|
1219
|
+
return candidate;
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
}
|
|
1223
|
+
for (const path of [lookup.field, lookup.fieldById]) {
|
|
1224
|
+
if (!path) continue;
|
|
1225
|
+
const wanted = normalizeFieldPath(path);
|
|
1226
|
+
for (const candidate of candidates) {
|
|
1227
|
+
const field = candidate.getAttribute("data-prepr-field");
|
|
1228
|
+
if (!field || normalizeFieldPath(field) !== wanted) continue;
|
|
1229
|
+
if (lookup.id && candidate.getAttribute("data-prepr-id") !== lookup.id) {
|
|
1230
|
+
continue;
|
|
1231
|
+
}
|
|
1232
|
+
return candidate;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
return null;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
632
1238
|
// src/core/stega/elements.ts
|
|
633
1239
|
var debug4 = createScopedLogger("stega:elements");
|
|
634
1240
|
var StegaElements = class {
|
|
@@ -718,235 +1324,22 @@ var StegaElements = class {
|
|
|
718
1324
|
attributeFilter: ["class", "style", "hidden", "open", "aria-expanded"]
|
|
719
1325
|
});
|
|
720
1326
|
}
|
|
721
|
-
/**
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
1327
|
+
/**
|
|
1328
|
+
* Stops watching for new content. Tags stay on their elements: the page's
|
|
1329
|
+
* stega characters are stripped once they are read, so a tag removed here
|
|
1330
|
+
* could never be rebuilt when edit mode is turned back on.
|
|
1331
|
+
*/
|
|
1332
|
+
disconnect() {
|
|
726
1333
|
if (this.observer) {
|
|
727
1334
|
this.observer.disconnect();
|
|
728
1335
|
this.observer = null;
|
|
729
1336
|
}
|
|
730
|
-
document.querySelectorAll("[data-prepr-encoded]").forEach((element) => {
|
|
731
|
-
element.removeAttribute("data-prepr-encoded");
|
|
732
|
-
element.removeAttribute("data-prepr-href");
|
|
733
|
-
element.removeAttribute("data-prepr-origin");
|
|
734
|
-
element.removeAttribute("data-prepr-id");
|
|
735
|
-
element.removeAttribute("data-prepr-field");
|
|
736
|
-
element.removeAttribute("data-prepr-locale");
|
|
737
|
-
element.classList.remove("prepr-overlay-active");
|
|
738
|
-
});
|
|
739
1337
|
this.elements = void 0;
|
|
740
1338
|
}
|
|
741
1339
|
};
|
|
742
1340
|
|
|
743
|
-
// src/core/stega/overlay.ts
|
|
744
|
-
var debug5 = createScopedLogger("stega:overlay");
|
|
745
|
-
var StegaOverlay = class {
|
|
746
|
-
constructor(onEdit) {
|
|
747
|
-
this.overlay = null;
|
|
748
|
-
this.tooltip = null;
|
|
749
|
-
this.hideTimeout = null;
|
|
750
|
-
this.currentElement = null;
|
|
751
|
-
this.onEdit = onEdit;
|
|
752
|
-
}
|
|
753
|
-
create() {
|
|
754
|
-
const overlay = document.createElement("div");
|
|
755
|
-
overlay.className = "prepr-overlay";
|
|
756
|
-
overlay.style.display = "none";
|
|
757
|
-
const tooltip = document.createElement("div");
|
|
758
|
-
tooltip.className = "prepr-tooltip";
|
|
759
|
-
tooltip.style.display = "none";
|
|
760
|
-
document.body.appendChild(overlay);
|
|
761
|
-
document.body.appendChild(tooltip);
|
|
762
|
-
this.overlay = overlay;
|
|
763
|
-
this.tooltip = tooltip;
|
|
764
|
-
return { overlay, tooltip };
|
|
765
|
-
}
|
|
766
|
-
getTooltip() {
|
|
767
|
-
return this.tooltip;
|
|
768
|
-
}
|
|
769
|
-
hasCurrentElement() {
|
|
770
|
-
return this.currentElement !== null;
|
|
771
|
-
}
|
|
772
|
-
clearHideTimeout() {
|
|
773
|
-
if (this.hideTimeout) {
|
|
774
|
-
clearTimeout(this.hideTimeout);
|
|
775
|
-
this.hideTimeout = null;
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
show(element) {
|
|
779
|
-
if (!this.overlay || !this.tooltip) return;
|
|
780
|
-
this.clearHideTimeout();
|
|
781
|
-
if (this.currentElement && this.currentElement !== element) {
|
|
782
|
-
this.currentElement.classList.remove("prepr-overlay-active");
|
|
783
|
-
}
|
|
784
|
-
const rect = element.getBoundingClientRect();
|
|
785
|
-
const href = element.getAttribute("data-prepr-href");
|
|
786
|
-
const origin = element.getAttribute("data-prepr-origin");
|
|
787
|
-
const id = element.getAttribute("data-prepr-id") ?? void 0;
|
|
788
|
-
const field = element.getAttribute("data-prepr-field") ?? void 0;
|
|
789
|
-
const locale = element.getAttribute("data-prepr-locale") ?? void 0;
|
|
790
|
-
debug5.log("showing overlay", { href, origin });
|
|
791
|
-
const overlay = this.overlay;
|
|
792
|
-
overlay.style.display = "block";
|
|
793
|
-
overlay.style.top = `${rect.top + window.scrollY - 2}px`;
|
|
794
|
-
overlay.style.left = `${rect.left + window.scrollX - 4}px`;
|
|
795
|
-
overlay.style.width = `${rect.width + 8}px`;
|
|
796
|
-
overlay.style.height = `${rect.height + 4}px`;
|
|
797
|
-
const tooltip = this.tooltip;
|
|
798
|
-
if (href && origin) {
|
|
799
|
-
const MIN_WIDTH_FOR_TEXT = 80;
|
|
800
|
-
const isCompact = rect.width < MIN_WIDTH_FOR_TEXT;
|
|
801
|
-
tooltip.textContent = isCompact ? "\u2197" : `${origin} \u2197`;
|
|
802
|
-
tooltip.style.display = "block";
|
|
803
|
-
tooltip.style.minWidth = isCompact ? "auto" : "80px";
|
|
804
|
-
requestAnimationFrame(() => {
|
|
805
|
-
let top = rect.top + window.scrollY - tooltip.clientHeight - 2;
|
|
806
|
-
let left = rect.right + 4 - tooltip.clientWidth;
|
|
807
|
-
const minTop = window.scrollY + 4;
|
|
808
|
-
const maxTop = window.scrollY + window.innerHeight - tooltip.clientHeight - 4;
|
|
809
|
-
const minLeft = window.scrollX + 4;
|
|
810
|
-
const maxLeft = window.scrollX + window.innerWidth - tooltip.clientWidth - 4;
|
|
811
|
-
const below = top < minTop;
|
|
812
|
-
if (below) {
|
|
813
|
-
top = rect.bottom + window.scrollY + 2;
|
|
814
|
-
}
|
|
815
|
-
top = Math.max(minTop, Math.min(top, maxTop));
|
|
816
|
-
left = Math.max(minLeft, Math.min(left, maxLeft));
|
|
817
|
-
tooltip.dataset.preprPlacement = below ? "below" : "above";
|
|
818
|
-
tooltip.style.top = `${top}px`;
|
|
819
|
-
tooltip.style.left = `${left}px`;
|
|
820
|
-
});
|
|
821
|
-
tooltip.onclick = () => {
|
|
822
|
-
this.onEdit({ href, origin, id, field, locale });
|
|
823
|
-
};
|
|
824
|
-
}
|
|
825
|
-
this.currentElement = element;
|
|
826
|
-
element.classList.add("prepr-overlay-active");
|
|
827
|
-
}
|
|
828
|
-
hideImmediate() {
|
|
829
|
-
this.clearHideTimeout();
|
|
830
|
-
if (this.overlay) this.overlay.style.display = "none";
|
|
831
|
-
if (this.tooltip) this.tooltip.style.display = "none";
|
|
832
|
-
if (this.currentElement) {
|
|
833
|
-
this.currentElement.classList.remove("prepr-overlay-active");
|
|
834
|
-
this.currentElement = null;
|
|
835
|
-
}
|
|
836
|
-
}
|
|
837
|
-
hide() {
|
|
838
|
-
if (!this.overlay || !this.tooltip) return;
|
|
839
|
-
this.clearHideTimeout();
|
|
840
|
-
this.hideTimeout = setTimeout(() => this.hideImmediate(), 100);
|
|
841
|
-
}
|
|
842
|
-
cleanup() {
|
|
843
|
-
this.clearHideTimeout();
|
|
844
|
-
if (this.overlay) {
|
|
845
|
-
this.overlay.style.display = "none";
|
|
846
|
-
this.overlay.parentNode?.removeChild(this.overlay);
|
|
847
|
-
this.overlay = null;
|
|
848
|
-
}
|
|
849
|
-
if (this.tooltip) {
|
|
850
|
-
this.tooltip.style.display = "none";
|
|
851
|
-
this.tooltip.parentNode?.removeChild(this.tooltip);
|
|
852
|
-
this.tooltip = null;
|
|
853
|
-
}
|
|
854
|
-
if (this.currentElement) {
|
|
855
|
-
this.currentElement.classList.remove("prepr-overlay-active");
|
|
856
|
-
this.currentElement = null;
|
|
857
|
-
}
|
|
858
|
-
}
|
|
859
|
-
};
|
|
860
|
-
|
|
861
|
-
// src/core/stega/proximity.ts
|
|
862
|
-
var debug6 = createScopedLogger("stega:proximity");
|
|
863
|
-
var StegaProximity = class {
|
|
864
|
-
constructor() {
|
|
865
|
-
this.highlighted = /* @__PURE__ */ new Set();
|
|
866
|
-
this.visible = /* @__PURE__ */ new Set();
|
|
867
|
-
this.observer = null;
|
|
868
|
-
this.getEncodedElements = createElementCache(
|
|
869
|
-
"[data-prepr-encoded]",
|
|
870
|
-
200
|
|
871
|
-
);
|
|
872
|
-
}
|
|
873
|
-
/** Call after the encoded element set changes — rebuilds the observer. */
|
|
874
|
-
refreshObserving() {
|
|
875
|
-
try {
|
|
876
|
-
if (typeof IntersectionObserver === "undefined") return;
|
|
877
|
-
if (this.observer) {
|
|
878
|
-
this.observer.disconnect();
|
|
879
|
-
this.observer = null;
|
|
880
|
-
}
|
|
881
|
-
this.visible = /* @__PURE__ */ new Set();
|
|
882
|
-
this.observer = new IntersectionObserver(
|
|
883
|
-
(entries) => {
|
|
884
|
-
entries.forEach((entry) => {
|
|
885
|
-
const el = entry.target;
|
|
886
|
-
if (entry.isIntersecting) {
|
|
887
|
-
this.visible.add(el);
|
|
888
|
-
} else {
|
|
889
|
-
this.visible.delete(el);
|
|
890
|
-
}
|
|
891
|
-
});
|
|
892
|
-
},
|
|
893
|
-
{ root: null, rootMargin: "0px", threshold: 0 }
|
|
894
|
-
);
|
|
895
|
-
const nodes = this.getEncodedElements();
|
|
896
|
-
nodes.forEach((el) => this.observer.observe(el));
|
|
897
|
-
debug6.log("observing", nodes.length, "encoded elements");
|
|
898
|
-
} catch (error) {
|
|
899
|
-
debug6.log("error setting up IntersectionObserver", error);
|
|
900
|
-
}
|
|
901
|
-
}
|
|
902
|
-
stopObserving() {
|
|
903
|
-
if (this.observer) {
|
|
904
|
-
this.observer.disconnect();
|
|
905
|
-
this.observer = null;
|
|
906
|
-
this.visible.clear();
|
|
907
|
-
}
|
|
908
|
-
}
|
|
909
|
-
updateElementGradients(cursorX, cursorY) {
|
|
910
|
-
const candidates = this.visible.size > 0 ? Array.from(this.visible) : Array.from(this.getEncodedElements());
|
|
911
|
-
const newHighlighted = /* @__PURE__ */ new Set();
|
|
912
|
-
candidates.forEach((element) => {
|
|
913
|
-
const rect = element.getBoundingClientRect();
|
|
914
|
-
const distance = Math.min(
|
|
915
|
-
Math.abs(cursorX - rect.left),
|
|
916
|
-
Math.abs(cursorX - rect.right),
|
|
917
|
-
Math.abs(cursorY - rect.top),
|
|
918
|
-
Math.abs(cursorY - rect.bottom)
|
|
919
|
-
);
|
|
920
|
-
if (distance < 150) {
|
|
921
|
-
const relativeX = cursorX - rect.left;
|
|
922
|
-
const relativeY = cursorY - rect.top;
|
|
923
|
-
element.style.setProperty("--cursor-x", `${relativeX}px`);
|
|
924
|
-
element.style.setProperty("--cursor-y", `${relativeY}px`);
|
|
925
|
-
const baseGradientSize = Math.max(
|
|
926
|
-
150,
|
|
927
|
-
Math.max(rect.width, rect.height) * 1.1
|
|
928
|
-
);
|
|
929
|
-
const distanceScale = Math.max(0, (400 - distance) / 400);
|
|
930
|
-
const gradientSize = baseGradientSize * distanceScale;
|
|
931
|
-
element.style.setProperty("--gradient-size", `${gradientSize}px`);
|
|
932
|
-
element.classList.add("prepr-proximity-highlight");
|
|
933
|
-
newHighlighted.add(element);
|
|
934
|
-
} else {
|
|
935
|
-
element.classList.remove("prepr-proximity-highlight");
|
|
936
|
-
}
|
|
937
|
-
});
|
|
938
|
-
this.highlighted = newHighlighted;
|
|
939
|
-
}
|
|
940
|
-
clearAllHighlights() {
|
|
941
|
-
this.highlighted.forEach(
|
|
942
|
-
(element) => element.classList.remove("prepr-proximity-highlight")
|
|
943
|
-
);
|
|
944
|
-
this.highlighted.clear();
|
|
945
|
-
}
|
|
946
|
-
};
|
|
947
|
-
|
|
948
1341
|
// src/core/stega/stega.generated.ts
|
|
949
|
-
var STEGA_STYLES = '
|
|
1342
|
+
var STEGA_STYLES = '@property --prepr-presence{syntax:"<number>";inherits:true;initial-value:1}[data-prepr-encoded]{outline:1px dashed rgba(79,70,229,calc(.3 * var(--prepr-presence,1)));outline-offset:2px}';
|
|
950
1343
|
|
|
951
1344
|
// src/core/stega/styles.ts
|
|
952
1345
|
var STEGA_STYLE_MARKER = "data-prepr-stega";
|
|
@@ -966,46 +1359,80 @@ function removeStegaStyles() {
|
|
|
966
1359
|
}
|
|
967
1360
|
|
|
968
1361
|
// src/core/stega/scan.ts
|
|
969
|
-
var
|
|
1362
|
+
var debug5 = createScopedLogger("stega:scan");
|
|
1363
|
+
var ENCODED_SELECTOR = "[data-prepr-encoded]";
|
|
1364
|
+
var PRESENCE_FADE_MS = 400;
|
|
970
1365
|
var EDITOR_MODE_STYLES = "[data-prepr-encoded]{cursor:pointer}";
|
|
1366
|
+
function fadeInPresence() {
|
|
1367
|
+
const root = document.documentElement;
|
|
1368
|
+
if (typeof root.animate !== "function") return;
|
|
1369
|
+
if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
|
|
1370
|
+
root.animate(
|
|
1371
|
+
{ "--prepr-presence": ["0", "1"] },
|
|
1372
|
+
{ duration: PRESENCE_FADE_MS, easing: "ease-out" }
|
|
1373
|
+
);
|
|
1374
|
+
}
|
|
971
1375
|
function createStegaController(opts) {
|
|
972
1376
|
const tooltipEnabled = opts.tooltip ?? true;
|
|
973
|
-
const
|
|
974
|
-
const proximity = new StegaProximity();
|
|
1377
|
+
const locale = opts.locale ?? "en";
|
|
975
1378
|
const elements = new StegaElements();
|
|
1379
|
+
const overlay = new VisualEditorOverlay({
|
|
1380
|
+
onLabelClick: (target) => opts.onEdit(readEditPayload(target))
|
|
1381
|
+
});
|
|
976
1382
|
let initialized = false;
|
|
977
|
-
let
|
|
978
|
-
|
|
979
|
-
|
|
1383
|
+
let pointerFrame = null;
|
|
1384
|
+
let pointerTarget = null;
|
|
1385
|
+
let pointerX = 0;
|
|
1386
|
+
let pointerY = 0;
|
|
1387
|
+
let hitTestPending = false;
|
|
1388
|
+
const updateHover = () => {
|
|
1389
|
+
pointerFrame = null;
|
|
1390
|
+
if (hitTestPending) {
|
|
1391
|
+
hitTestPending = false;
|
|
1392
|
+
pointerTarget = document.elementFromPoint(pointerX, pointerY);
|
|
1393
|
+
}
|
|
1394
|
+
if (overlay.owns(pointerTarget)) return;
|
|
1395
|
+
const encoded = pointerTarget instanceof Element ? pointerTarget.closest(ENCODED_SELECTOR) : null;
|
|
1396
|
+
overlay.setHover(
|
|
1397
|
+
encoded,
|
|
1398
|
+
encoded ? fieldLabel(encoded.getAttribute("data-prepr-field"), locale) : ""
|
|
1399
|
+
);
|
|
980
1400
|
};
|
|
981
|
-
const
|
|
982
|
-
if (
|
|
983
|
-
|
|
1401
|
+
const scheduleHover = () => {
|
|
1402
|
+
if (pointerFrame === null) {
|
|
1403
|
+
pointerFrame = requestAnimationFrame(updateHover);
|
|
984
1404
|
}
|
|
985
1405
|
};
|
|
1406
|
+
const handlePointer = (e2) => {
|
|
1407
|
+
pointerTarget = e2.target;
|
|
1408
|
+
pointerX = e2.clientX;
|
|
1409
|
+
pointerY = e2.clientY;
|
|
1410
|
+
hitTestPending = false;
|
|
1411
|
+
scheduleHover();
|
|
1412
|
+
};
|
|
1413
|
+
const handlePointerLeave = () => {
|
|
1414
|
+
pointerTarget = null;
|
|
1415
|
+
hitTestPending = false;
|
|
1416
|
+
overlay.setHover(null, "");
|
|
1417
|
+
};
|
|
986
1418
|
const handleScroll = () => {
|
|
987
|
-
overlay.
|
|
988
|
-
|
|
1419
|
+
overlay.onScroll();
|
|
1420
|
+
if (pointerTarget === null) return;
|
|
1421
|
+
hitTestPending = true;
|
|
1422
|
+
scheduleHover();
|
|
989
1423
|
};
|
|
1424
|
+
const handleResize = () => overlay.schedule();
|
|
990
1425
|
const handleClick = (e2) => {
|
|
991
1426
|
const target = e2.target;
|
|
992
|
-
const encoded = target?.closest(
|
|
993
|
-
"[data-prepr-encoded]"
|
|
994
|
-
);
|
|
1427
|
+
const encoded = target?.closest(ENCODED_SELECTOR);
|
|
995
1428
|
if (!encoded) return;
|
|
996
1429
|
e2.preventDefault();
|
|
997
1430
|
e2.stopPropagation();
|
|
998
|
-
opts.onEdit(
|
|
999
|
-
href: encoded.getAttribute("data-prepr-href") ?? "",
|
|
1000
|
-
origin: encoded.getAttribute("data-prepr-origin") ?? "",
|
|
1001
|
-
id: encoded.getAttribute("data-prepr-id") ?? void 0,
|
|
1002
|
-
field: encoded.getAttribute("data-prepr-field") ?? void 0,
|
|
1003
|
-
locale: encoded.getAttribute("data-prepr-locale") ?? void 0
|
|
1004
|
-
});
|
|
1431
|
+
opts.onEdit(readEditPayload(encoded));
|
|
1005
1432
|
};
|
|
1006
1433
|
const start = () => {
|
|
1007
1434
|
if (initialized) {
|
|
1008
|
-
|
|
1435
|
+
debug5.log("already initialized, skipping setup");
|
|
1009
1436
|
return;
|
|
1010
1437
|
}
|
|
1011
1438
|
if (!tooltipEnabled) {
|
|
@@ -1015,73 +1442,64 @@ function createStegaController(opts) {
|
|
|
1015
1442
|
});
|
|
1016
1443
|
document.addEventListener("click", handleClick, { capture: true });
|
|
1017
1444
|
initialized = true;
|
|
1018
|
-
|
|
1445
|
+
debug5.log("stega controller started (headless)");
|
|
1019
1446
|
return;
|
|
1020
1447
|
}
|
|
1021
1448
|
injectStegaStyles();
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
tooltip.addEventListener("mouseleave", handleTooltipMouseLeave);
|
|
1449
|
+
fadeInPresence();
|
|
1450
|
+
overlay.mount();
|
|
1025
1451
|
elements.scanDocument(true);
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
const target = mouseEvent.target;
|
|
1031
|
-
if (!target) return;
|
|
1032
|
-
if (target.closest(".prepr-tooltip")) return;
|
|
1033
|
-
proximity.updateElementGradients(mouseEvent.clientX, mouseEvent.clientY);
|
|
1034
|
-
const encoded = target.closest("[data-prepr-encoded]");
|
|
1035
|
-
if (encoded) {
|
|
1036
|
-
overlay.show(encoded);
|
|
1037
|
-
} else {
|
|
1038
|
-
overlay.hide();
|
|
1039
|
-
}
|
|
1040
|
-
}, 16);
|
|
1041
|
-
document.addEventListener("mousemove", throttledMouseMove, {
|
|
1042
|
-
passive: true
|
|
1452
|
+
elements.setupMutationObserver(() => {
|
|
1453
|
+
if (pointerTarget === null) return;
|
|
1454
|
+
hitTestPending = true;
|
|
1455
|
+
scheduleHover();
|
|
1043
1456
|
});
|
|
1457
|
+
document.addEventListener("pointermove", handlePointer, { passive: true });
|
|
1458
|
+
document.addEventListener("pointerdown", handlePointer, { passive: true });
|
|
1459
|
+
document.documentElement.addEventListener(
|
|
1460
|
+
"pointerleave",
|
|
1461
|
+
handlePointerLeave
|
|
1462
|
+
);
|
|
1044
1463
|
window.addEventListener("scroll", handleScroll, {
|
|
1045
1464
|
capture: true,
|
|
1046
1465
|
passive: true
|
|
1047
1466
|
});
|
|
1467
|
+
window.addEventListener("resize", handleResize, { passive: true });
|
|
1048
1468
|
initialized = true;
|
|
1049
|
-
|
|
1469
|
+
debug5.log("stega controller started");
|
|
1050
1470
|
};
|
|
1051
1471
|
const stop = () => {
|
|
1052
1472
|
if (!initialized) return;
|
|
1473
|
+
initialized = false;
|
|
1053
1474
|
if (!tooltipEnabled) {
|
|
1054
1475
|
document.removeEventListener("click", handleClick, { capture: true });
|
|
1055
|
-
elements.
|
|
1476
|
+
elements.disconnect();
|
|
1056
1477
|
removeStegaStyles();
|
|
1057
|
-
|
|
1058
|
-
debug7.log("stega controller stopped (editor mode)");
|
|
1478
|
+
debug5.log("stega controller stopped (headless)");
|
|
1059
1479
|
return;
|
|
1060
1480
|
}
|
|
1061
|
-
if (
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1481
|
+
if (pointerFrame !== null) cancelAnimationFrame(pointerFrame);
|
|
1482
|
+
pointerFrame = null;
|
|
1483
|
+
pointerTarget = null;
|
|
1484
|
+
hitTestPending = false;
|
|
1485
|
+
document.removeEventListener("pointermove", handlePointer);
|
|
1486
|
+
document.removeEventListener("pointerdown", handlePointer);
|
|
1487
|
+
document.documentElement.removeEventListener(
|
|
1488
|
+
"pointerleave",
|
|
1489
|
+
handlePointerLeave
|
|
1490
|
+
);
|
|
1066
1491
|
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
tooltip.removeEventListener("mouseleave", handleTooltipMouseLeave);
|
|
1071
|
-
}
|
|
1072
|
-
overlay.cleanup();
|
|
1073
|
-
proximity.clearAllHighlights();
|
|
1074
|
-
proximity.stopObserving();
|
|
1075
|
-
elements.cleanup();
|
|
1492
|
+
window.removeEventListener("resize", handleResize);
|
|
1493
|
+
overlay.unmount();
|
|
1494
|
+
elements.disconnect();
|
|
1076
1495
|
removeStegaStyles();
|
|
1077
|
-
|
|
1078
|
-
debug7.log("stega controller stopped");
|
|
1496
|
+
debug5.log("stega controller stopped");
|
|
1079
1497
|
};
|
|
1080
1498
|
return { start, stop };
|
|
1081
1499
|
}
|
|
1082
1500
|
|
|
1083
1501
|
// src/core/stega/scroll-to-field.ts
|
|
1084
|
-
var
|
|
1502
|
+
var debug6 = createScopedLogger("stega:scroll");
|
|
1085
1503
|
var FLASH_DURATION_MS = 1200;
|
|
1086
1504
|
var flashTimeout = null;
|
|
1087
1505
|
function scrollToField(request) {
|
|
@@ -1098,7 +1516,7 @@ function scrollToField(request) {
|
|
|
1098
1516
|
break;
|
|
1099
1517
|
}
|
|
1100
1518
|
if (!target) {
|
|
1101
|
-
|
|
1519
|
+
debug6.log("no element found for field", field);
|
|
1102
1520
|
return false;
|
|
1103
1521
|
}
|
|
1104
1522
|
target.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
@@ -1528,7 +1946,7 @@ var CLOSE_ICON_SVG = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none
|
|
|
1528
1946
|
</svg>`;
|
|
1529
1947
|
|
|
1530
1948
|
// src/core/ui/toolbar.generated.ts
|
|
1531
|
-
var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle>span{display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill[data-interactive=false]{cursor:default;opacity:1;color:#fff}.prepr-status-pill[data-interactive=true]:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
|
|
1949
|
+
var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle>span{display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}@media (pointer:coarse){.prepr-segment-search{font-size:16px}}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill[data-interactive=false]{cursor:default;opacity:1;color:#fff}.prepr-status-pill[data-interactive=true]:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
|
|
1532
1950
|
|
|
1533
1951
|
// ../../node_modules/.pnpm/preact@10.29.7/node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
|
|
1534
1952
|
var f2 = 0;
|
|
@@ -2223,49 +2641,767 @@ function definePreprToolbar() {
|
|
|
2223
2641
|
}
|
|
2224
2642
|
}
|
|
2225
2643
|
|
|
2226
|
-
// src/core/
|
|
2227
|
-
var
|
|
2228
|
-
var
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2644
|
+
// src/core/visual-editor/asset-images.ts
|
|
2645
|
+
var MAX_URL_LENGTH = 4096;
|
|
2646
|
+
var MIN_KEY_SEGMENTS = 2;
|
|
2647
|
+
var TRANSFORM_OPTION = /^[a-z]{1,3}_[\w.-]*$/i;
|
|
2648
|
+
var FORMAT_PLACEHOLDER = "{format}";
|
|
2649
|
+
var PROXY_PARAMS = ["url", "href", "src", "image"];
|
|
2650
|
+
var ABSOLUTE_HTTP = /^https?:\/\//i;
|
|
2651
|
+
var SOURCE_URL_ATTRIBUTES = ["src", "data-src"];
|
|
2652
|
+
var SOURCE_SET_ATTRIBUTES = ["srcset", "data-srcset"];
|
|
2653
|
+
var ASSET_ATTR = "data-prepr-asset";
|
|
2654
|
+
var ASSET_SOURCE_ATTRIBUTES = [
|
|
2655
|
+
...SOURCE_URL_ATTRIBUTES,
|
|
2656
|
+
...SOURCE_SET_ATTRIBUTES
|
|
2657
|
+
];
|
|
2658
|
+
var TAG_ATTRIBUTES = [
|
|
2659
|
+
"data-prepr-encoded",
|
|
2660
|
+
"data-prepr-id",
|
|
2661
|
+
"data-prepr-field",
|
|
2662
|
+
"data-prepr-entry-id",
|
|
2663
|
+
ASSET_ATTR
|
|
2664
|
+
];
|
|
2665
|
+
function decodeSegment(segment) {
|
|
2666
|
+
try {
|
|
2667
|
+
return decodeURIComponent(segment);
|
|
2668
|
+
} catch {
|
|
2669
|
+
return segment;
|
|
2670
|
+
}
|
|
2234
2671
|
}
|
|
2235
|
-
function
|
|
2672
|
+
function isTransformSegment(segment) {
|
|
2673
|
+
return segment === FORMAT_PLACEHOLDER || segment.split(",").every((option) => TRANSFORM_OPTION.test(option));
|
|
2674
|
+
}
|
|
2675
|
+
function assetKey(url, depth = 0) {
|
|
2676
|
+
if (!url || url.length > MAX_URL_LENGTH) return null;
|
|
2677
|
+
let parsed;
|
|
2236
2678
|
try {
|
|
2237
|
-
|
|
2238
|
-
return url.protocol === "https:" || url.protocol === "http:" ? url.href : null;
|
|
2679
|
+
parsed = new URL(url, "https://base.invalid");
|
|
2239
2680
|
} catch {
|
|
2240
2681
|
return null;
|
|
2241
2682
|
}
|
|
2683
|
+
if (parsed.protocol !== "https:" && parsed.protocol !== "http:") return null;
|
|
2684
|
+
if (depth === 0) {
|
|
2685
|
+
for (const name of PROXY_PARAMS) {
|
|
2686
|
+
const inner = parsed.searchParams.get(name);
|
|
2687
|
+
if (inner && ABSOLUTE_HTTP.test(inner)) return assetKey(inner, 1);
|
|
2688
|
+
}
|
|
2689
|
+
}
|
|
2690
|
+
const segments = parsed.pathname.split("/").filter(Boolean).map(decodeSegment);
|
|
2691
|
+
const file = segments.pop();
|
|
2692
|
+
if (!file) return null;
|
|
2693
|
+
const kept = segments.filter((segment) => !isTransformSegment(segment));
|
|
2694
|
+
kept.push(file);
|
|
2695
|
+
return kept.length >= MIN_KEY_SEGMENTS ? kept.join("/") : null;
|
|
2242
2696
|
}
|
|
2243
|
-
function
|
|
2244
|
-
|
|
2697
|
+
function srcsetUrls(srcset) {
|
|
2698
|
+
const urls = [];
|
|
2699
|
+
let expectUrl = true;
|
|
2700
|
+
for (const token of srcset.split(/\s+/)) {
|
|
2701
|
+
if (!token) continue;
|
|
2702
|
+
if (!expectUrl) {
|
|
2703
|
+
const comma = token.indexOf(",");
|
|
2704
|
+
if (comma === -1) continue;
|
|
2705
|
+
expectUrl = true;
|
|
2706
|
+
const rest = token.slice(comma + 1);
|
|
2707
|
+
if (!rest) continue;
|
|
2708
|
+
urls.push(rest.replace(/,+$/, ""));
|
|
2709
|
+
expectUrl = rest.endsWith(",");
|
|
2710
|
+
continue;
|
|
2711
|
+
}
|
|
2712
|
+
const url = token.replace(/^,+|,+$/g, "");
|
|
2713
|
+
if (url) urls.push(url);
|
|
2714
|
+
expectUrl = token.endsWith(",");
|
|
2715
|
+
}
|
|
2716
|
+
return urls;
|
|
2245
2717
|
}
|
|
2246
|
-
function
|
|
2247
|
-
const
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
const match = candidates.filter(Boolean).map((l2) => l2.toLowerCase().split("-")[0]).find(isLocale);
|
|
2252
|
-
if (match) return match;
|
|
2718
|
+
function createAssetIndex(assets) {
|
|
2719
|
+
const index = /* @__PURE__ */ new Map();
|
|
2720
|
+
for (const asset of assets) {
|
|
2721
|
+
const key = assetKey(asset.key);
|
|
2722
|
+
if (key && !index.has(key)) index.set(key, asset);
|
|
2253
2723
|
}
|
|
2254
|
-
return
|
|
2724
|
+
return index;
|
|
2255
2725
|
}
|
|
2256
|
-
function
|
|
2257
|
-
const
|
|
2258
|
-
const
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2726
|
+
function urlsOf(img) {
|
|
2727
|
+
const urls = [];
|
|
2728
|
+
const collect = (el) => {
|
|
2729
|
+
for (const name of SOURCE_URL_ATTRIBUTES) {
|
|
2730
|
+
const value = el.getAttribute(name);
|
|
2731
|
+
if (value) urls.push(value);
|
|
2732
|
+
}
|
|
2733
|
+
for (const name of SOURCE_SET_ATTRIBUTES) {
|
|
2734
|
+
const value = el.getAttribute(name);
|
|
2735
|
+
if (value) urls.push(...srcsetUrls(value));
|
|
2736
|
+
}
|
|
2737
|
+
};
|
|
2738
|
+
collect(img);
|
|
2739
|
+
const picture = img.parentElement;
|
|
2740
|
+
if (picture?.tagName === "PICTURE") {
|
|
2741
|
+
for (const source of picture.children) {
|
|
2742
|
+
if (source.tagName === "SOURCE") collect(source);
|
|
2743
|
+
}
|
|
2264
2744
|
}
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2745
|
+
return urls;
|
|
2746
|
+
}
|
|
2747
|
+
function matchAsset(img, index, keys) {
|
|
2748
|
+
for (const url of urlsOf(img)) {
|
|
2749
|
+
let key = keys.get(url);
|
|
2750
|
+
if (key === void 0) {
|
|
2751
|
+
key = assetKey(url);
|
|
2752
|
+
keys.set(url, key);
|
|
2753
|
+
}
|
|
2754
|
+
const asset = key ? index.get(key) : void 0;
|
|
2755
|
+
if (asset) return asset;
|
|
2756
|
+
}
|
|
2757
|
+
return void 0;
|
|
2758
|
+
}
|
|
2759
|
+
function setIfChanged(el, name, value) {
|
|
2760
|
+
if (value === null) {
|
|
2761
|
+
if (el.hasAttribute(name)) el.removeAttribute(name);
|
|
2762
|
+
} else if (el.getAttribute(name) !== value) {
|
|
2763
|
+
el.setAttribute(name, value);
|
|
2764
|
+
}
|
|
2765
|
+
}
|
|
2766
|
+
function untagAssetImage(img) {
|
|
2767
|
+
for (const name of TAG_ATTRIBUTES) img.removeAttribute(name);
|
|
2768
|
+
}
|
|
2769
|
+
function tagAssetImages(index, itemId, keys) {
|
|
2770
|
+
for (const img of document.getElementsByTagName("img")) {
|
|
2771
|
+
const ours = img.hasAttribute(ASSET_ATTR);
|
|
2772
|
+
if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
|
|
2773
|
+
const asset = index.size ? matchAsset(img, index, keys) : void 0;
|
|
2774
|
+
if (!asset) {
|
|
2775
|
+
if (ours) untagAssetImage(img);
|
|
2776
|
+
continue;
|
|
2777
|
+
}
|
|
2778
|
+
setIfChanged(img, "data-prepr-encoded", "");
|
|
2779
|
+
setIfChanged(img, ASSET_ATTR, "");
|
|
2780
|
+
setIfChanged(img, "data-prepr-id", itemId);
|
|
2781
|
+
setIfChanged(img, "data-prepr-field", asset.field);
|
|
2782
|
+
setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
|
|
2783
|
+
}
|
|
2784
|
+
}
|
|
2785
|
+
function untagAssetImages() {
|
|
2786
|
+
document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
// src/core/visual-editor/navigation-guard.ts
|
|
2790
|
+
var debug7 = createScopedLogger("navigation-guard");
|
|
2791
|
+
var trimSlash = (path) => path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
|
|
2792
|
+
function resolve(url) {
|
|
2793
|
+
try {
|
|
2794
|
+
return new URL(url, document.baseURI);
|
|
2795
|
+
} catch {
|
|
2796
|
+
return null;
|
|
2797
|
+
}
|
|
2798
|
+
}
|
|
2799
|
+
function leavesPage(url) {
|
|
2800
|
+
if (url.protocol !== "http:" && url.protocol !== "https:") return false;
|
|
2801
|
+
const here = window.location;
|
|
2802
|
+
return url.origin !== here.origin || trimSlash(url.pathname) !== trimSlash(here.pathname);
|
|
2803
|
+
}
|
|
2804
|
+
function leavingLinkHref(target) {
|
|
2805
|
+
if (!(target instanceof Element)) return null;
|
|
2806
|
+
const link = target.closest("a[href]");
|
|
2807
|
+
if (!link || link.hasAttribute("download")) return null;
|
|
2808
|
+
const linkTarget = link.getAttribute("target");
|
|
2809
|
+
if (linkTarget && linkTarget !== "_self") return null;
|
|
2810
|
+
const href = link.getAttribute("href") ?? "";
|
|
2811
|
+
if (href.startsWith("#")) return null;
|
|
2812
|
+
const url = resolve(href);
|
|
2813
|
+
return url && leavesPage(url) ? url.href : null;
|
|
2814
|
+
}
|
|
2815
|
+
function submitterAttr(submitter, attr) {
|
|
2816
|
+
if (!submitter?.hasAttribute(attr)) return null;
|
|
2817
|
+
if (attr === "formaction") return submitter.formAction;
|
|
2818
|
+
if (attr === "formmethod") return submitter.formMethod;
|
|
2819
|
+
return submitter.formTarget;
|
|
2820
|
+
}
|
|
2821
|
+
function submissionUrl(form, submitter) {
|
|
2822
|
+
const method = (submitterAttr(submitter, "formmethod") ?? form.method).toLowerCase();
|
|
2823
|
+
if (method === "dialog") return null;
|
|
2824
|
+
const target = submitterAttr(submitter, "formtarget") ?? form.target;
|
|
2825
|
+
if (target && target !== "_self") return null;
|
|
2826
|
+
const url = resolve(
|
|
2827
|
+
submitterAttr(submitter, "formaction") ?? (form.action || location.href)
|
|
2828
|
+
);
|
|
2829
|
+
if (!url) return null;
|
|
2830
|
+
if (method === "get") {
|
|
2831
|
+
let data;
|
|
2832
|
+
try {
|
|
2833
|
+
data = new FormData(form, submitter);
|
|
2834
|
+
} catch {
|
|
2835
|
+
data = new FormData(form);
|
|
2836
|
+
}
|
|
2837
|
+
const query = new URLSearchParams();
|
|
2838
|
+
data.forEach((value, key) => {
|
|
2839
|
+
query.append(key, typeof value === "string" ? value : value.name);
|
|
2840
|
+
});
|
|
2841
|
+
url.search = query.toString();
|
|
2842
|
+
}
|
|
2843
|
+
return url;
|
|
2844
|
+
}
|
|
2845
|
+
function createNavigationGuard(opts) {
|
|
2846
|
+
let active = false;
|
|
2847
|
+
let permitted = null;
|
|
2848
|
+
let pendingForm = null;
|
|
2849
|
+
let originalPush = null;
|
|
2850
|
+
let guardedPush = null;
|
|
2851
|
+
const isPermitted = (url) => permitted === url.href;
|
|
2852
|
+
const guarding = () => active && opts.showsEditedContent();
|
|
2853
|
+
const report = (href) => {
|
|
2854
|
+
debug7.log("blocked navigation to", href);
|
|
2855
|
+
opts.onBlocked(href);
|
|
2856
|
+
};
|
|
2857
|
+
const onSubmit = (e2) => {
|
|
2858
|
+
if (e2.defaultPrevented || !(e2.target instanceof HTMLFormElement)) return;
|
|
2859
|
+
if (!guarding()) return;
|
|
2860
|
+
const submitter = e2.submitter ?? null;
|
|
2861
|
+
const url = submissionUrl(e2.target, submitter);
|
|
2862
|
+
if (!url || !leavesPage(url) || isPermitted(url)) return;
|
|
2863
|
+
e2.preventDefault();
|
|
2864
|
+
pendingForm = { form: e2.target, submitter, href: url.href };
|
|
2865
|
+
report(url.href);
|
|
2866
|
+
};
|
|
2867
|
+
const onNavigate = (event) => {
|
|
2868
|
+
const e2 = event;
|
|
2869
|
+
if (e2.navigationType === "traverse" || e2.navigationType === "reload") {
|
|
2870
|
+
return;
|
|
2871
|
+
}
|
|
2872
|
+
if (!e2.cancelable || e2.hashChange || e2.downloadRequest !== null) return;
|
|
2873
|
+
if (!guarding()) return;
|
|
2874
|
+
if (e2.navigationType === "replace" && e2.destination.sameDocument) return;
|
|
2875
|
+
const url = resolve(e2.destination.url);
|
|
2876
|
+
if (!url || !leavesPage(url) || isPermitted(url)) return;
|
|
2877
|
+
e2.preventDefault();
|
|
2878
|
+
report(url.href);
|
|
2879
|
+
if (e2.destination.sameDocument) window.location.reload();
|
|
2880
|
+
};
|
|
2881
|
+
const navigation = () => window.navigation;
|
|
2882
|
+
function installPushGuard() {
|
|
2883
|
+
const original = history.pushState;
|
|
2884
|
+
const guard = function(data, unused, url) {
|
|
2885
|
+
if (guarding() && guardedPush === guard && url != null) {
|
|
2886
|
+
const target = resolve(url);
|
|
2887
|
+
if (target && leavesPage(target) && !isPermitted(target)) {
|
|
2888
|
+
report(target.href);
|
|
2889
|
+
window.location.reload();
|
|
2890
|
+
return;
|
|
2891
|
+
}
|
|
2892
|
+
}
|
|
2893
|
+
return original.call(this, data, unused, url);
|
|
2894
|
+
};
|
|
2895
|
+
originalPush = original;
|
|
2896
|
+
guardedPush = guard;
|
|
2897
|
+
history.pushState = guard;
|
|
2898
|
+
}
|
|
2899
|
+
function uninstallPushGuard() {
|
|
2900
|
+
if (history.pushState === guardedPush && originalPush) {
|
|
2901
|
+
history.pushState = originalPush;
|
|
2902
|
+
}
|
|
2903
|
+
originalPush = null;
|
|
2904
|
+
guardedPush = null;
|
|
2905
|
+
}
|
|
2906
|
+
return {
|
|
2907
|
+
start() {
|
|
2908
|
+
if (active) return;
|
|
2909
|
+
active = true;
|
|
2910
|
+
installPushGuard();
|
|
2911
|
+
window.addEventListener("submit", onSubmit);
|
|
2912
|
+
navigation()?.addEventListener("navigate", onNavigate);
|
|
2913
|
+
},
|
|
2914
|
+
stop() {
|
|
2915
|
+
if (!active) return;
|
|
2916
|
+
active = false;
|
|
2917
|
+
uninstallPushGuard();
|
|
2918
|
+
window.removeEventListener("submit", onSubmit);
|
|
2919
|
+
navigation()?.removeEventListener("navigate", onNavigate);
|
|
2920
|
+
pendingForm = null;
|
|
2921
|
+
},
|
|
2922
|
+
isActive: guarding,
|
|
2923
|
+
block(href) {
|
|
2924
|
+
report(href);
|
|
2925
|
+
},
|
|
2926
|
+
permit(href) {
|
|
2927
|
+
permitted = resolve(href)?.href ?? null;
|
|
2928
|
+
},
|
|
2929
|
+
allow(href) {
|
|
2930
|
+
const url = resolve(href);
|
|
2931
|
+
if (!url || url.protocol !== "http:" && url.protocol !== "https:") {
|
|
2932
|
+
debug7.warn("ignored navigation to unsupported URL");
|
|
2933
|
+
return;
|
|
2934
|
+
}
|
|
2935
|
+
permitted = url.href;
|
|
2936
|
+
const form = pendingForm;
|
|
2937
|
+
pendingForm = null;
|
|
2938
|
+
if (form && form.href === url.href && form.form.isConnected) {
|
|
2939
|
+
try {
|
|
2940
|
+
form.form.requestSubmit(form.submitter ?? void 0);
|
|
2941
|
+
} catch {
|
|
2942
|
+
form.form.requestSubmit();
|
|
2943
|
+
}
|
|
2944
|
+
return;
|
|
2945
|
+
}
|
|
2946
|
+
window.location.assign(url.href);
|
|
2947
|
+
}
|
|
2948
|
+
};
|
|
2949
|
+
}
|
|
2950
|
+
|
|
2951
|
+
// src/core/visual-editor/index.ts
|
|
2952
|
+
var debug8 = createScopedLogger("visual-editor");
|
|
2953
|
+
var ENCODED_SELECTOR2 = "[data-prepr-encoded]";
|
|
2954
|
+
var REFERENCE_ATTR = "data-prepr-reference";
|
|
2955
|
+
var REFERENCE_SELECTOR = `[${REFERENCE_ATTR}]`;
|
|
2956
|
+
var CURSOR_STYLE_MARKER = "data-prepr-visual-editor";
|
|
2957
|
+
var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}`;
|
|
2958
|
+
var SUSPENDED_ATTR = "data-prepr-ve-suspended";
|
|
2959
|
+
var FIND_RETRY_MS = 150;
|
|
2960
|
+
var FIND_RETRIES = 6;
|
|
2961
|
+
var MAX_CACHED_KEYS = 2e3;
|
|
2962
|
+
var LAYOUT_MUTATIONS = {
|
|
2963
|
+
childList: true,
|
|
2964
|
+
subtree: true,
|
|
2965
|
+
characterData: true,
|
|
2966
|
+
attributes: true,
|
|
2967
|
+
attributeFilter: [
|
|
2968
|
+
"class",
|
|
2969
|
+
"style",
|
|
2970
|
+
"hidden",
|
|
2971
|
+
"open",
|
|
2972
|
+
"data-prepr-encoded",
|
|
2973
|
+
// An image swapped by a carousel or lazy loader can show another asset.
|
|
2974
|
+
...ASSET_SOURCE_ATTRIBUTES
|
|
2975
|
+
]
|
|
2976
|
+
};
|
|
2977
|
+
function scrollIntoFrame(el) {
|
|
2978
|
+
const rect = el.getBoundingClientRect();
|
|
2979
|
+
const offset = Math.max(0, (window.innerHeight - rect.height) / 2);
|
|
2980
|
+
window.scrollTo({
|
|
2981
|
+
top: Math.max(0, window.scrollY + rect.top - offset),
|
|
2982
|
+
behavior: "smooth"
|
|
2983
|
+
});
|
|
2984
|
+
}
|
|
2985
|
+
var isVisible = (el) => typeof el.checkVisibility === "function" ? el.checkVisibility() : el.getClientRects().length > 0;
|
|
2986
|
+
function createVisualEditor(opts) {
|
|
2987
|
+
const overlay = new VisualEditorOverlay();
|
|
2988
|
+
let running = false;
|
|
2989
|
+
let currentItemId = null;
|
|
2990
|
+
let locale = opts.locale ?? "en";
|
|
2991
|
+
let suspended = false;
|
|
2992
|
+
let pointerFrame = null;
|
|
2993
|
+
let lastPointerTarget = null;
|
|
2994
|
+
let lastPointerX = 0;
|
|
2995
|
+
let lastPointerY = 0;
|
|
2996
|
+
let mutationFrame = null;
|
|
2997
|
+
let mutationObserver = null;
|
|
2998
|
+
let selection = null;
|
|
2999
|
+
let findTimeout = null;
|
|
3000
|
+
let settlePendingFind = null;
|
|
3001
|
+
let guardEnabled = false;
|
|
3002
|
+
let assetIndex = /* @__PURE__ */ new Map();
|
|
3003
|
+
const assetKeys = /* @__PURE__ */ new Map();
|
|
3004
|
+
const guard = createNavigationGuard({
|
|
3005
|
+
onBlocked: (href) => opts.onNavigationBlocked?.(href),
|
|
3006
|
+
showsEditedContent: () => showsEditedContent()
|
|
3007
|
+
});
|
|
3008
|
+
const encodedFrom = (node) => node instanceof Element ? node.closest(ENCODED_SELECTOR2) : null;
|
|
3009
|
+
const labelFor = (el) => fieldLabel(el.getAttribute("data-prepr-field"), locale);
|
|
3010
|
+
let references = null;
|
|
3011
|
+
let ownComponents = /* @__PURE__ */ new Set();
|
|
3012
|
+
const isCurrentItem = (el) => {
|
|
3013
|
+
if (currentItemId === null) return true;
|
|
3014
|
+
const id = el.getAttribute("data-prepr-id");
|
|
3015
|
+
return !id || id === currentItemId || ownComponents.has(id);
|
|
3016
|
+
};
|
|
3017
|
+
const showsEditedContent = () => {
|
|
3018
|
+
for (const el of document.querySelectorAll(ENCODED_SELECTOR2)) {
|
|
3019
|
+
if (isCurrentItem(el) && isVisible(el)) return true;
|
|
3020
|
+
}
|
|
3021
|
+
return false;
|
|
3022
|
+
};
|
|
3023
|
+
const linkedIdOf = (el) => {
|
|
3024
|
+
if (!references) return null;
|
|
3025
|
+
const id = el.getAttribute("data-prepr-id") ?? "";
|
|
3026
|
+
if (references.has(id)) return id;
|
|
3027
|
+
let container = el.closest(REFERENCE_SELECTOR);
|
|
3028
|
+
while (container) {
|
|
3029
|
+
const linked = container.getAttribute(REFERENCE_ATTR) ?? "";
|
|
3030
|
+
if (references.has(linked)) return linked;
|
|
3031
|
+
container = container.parentElement?.closest(REFERENCE_SELECTOR) ?? null;
|
|
3032
|
+
}
|
|
3033
|
+
return null;
|
|
3034
|
+
};
|
|
3035
|
+
const itemKind = (el) => {
|
|
3036
|
+
if (isCurrentItem(el)) return "current";
|
|
3037
|
+
if (!references) return "other";
|
|
3038
|
+
return linkedIdOf(el) ? "referenced" : null;
|
|
3039
|
+
};
|
|
3040
|
+
const referenceFieldOf = (el) => {
|
|
3041
|
+
const linked = linkedIdOf(el);
|
|
3042
|
+
return linked ? references?.get(linked) : void 0;
|
|
3043
|
+
};
|
|
3044
|
+
const hoverLabel = (el, kind) => {
|
|
3045
|
+
if (kind === "other") {
|
|
3046
|
+
return `${labelFor(el)} \xB7 ${t("visualEditor.otherItem", locale)}`;
|
|
3047
|
+
}
|
|
3048
|
+
if (kind === "referenced") {
|
|
3049
|
+
const via = referenceFieldOf(el);
|
|
3050
|
+
const prefix = via ? `${fieldLabel(via, locale)} \u203A ` : "";
|
|
3051
|
+
return `${prefix}${labelFor(el)} \xB7 ${t("visualEditor.linkedItem", locale)}`;
|
|
3052
|
+
}
|
|
3053
|
+
return labelFor(el);
|
|
3054
|
+
};
|
|
3055
|
+
const setSuspended = (value) => {
|
|
3056
|
+
if (suspended === value) return;
|
|
3057
|
+
suspended = value;
|
|
3058
|
+
document.documentElement.toggleAttribute(SUSPENDED_ATTR, value);
|
|
3059
|
+
if (value) overlay.setHover(null, "");
|
|
3060
|
+
};
|
|
3061
|
+
const updateHover = () => {
|
|
3062
|
+
pointerFrame = null;
|
|
3063
|
+
overlay.schedule();
|
|
3064
|
+
if (suspended) return;
|
|
3065
|
+
const encoded = encodedFrom(lastPointerTarget);
|
|
3066
|
+
const target = encoded === overlay.getSelectedTarget() ? null : encoded;
|
|
3067
|
+
if (!target) {
|
|
3068
|
+
overlay.setHover(null, "");
|
|
3069
|
+
return;
|
|
3070
|
+
}
|
|
3071
|
+
const kind = itemKind(target);
|
|
3072
|
+
if (!kind) {
|
|
3073
|
+
overlay.setHover(null, "");
|
|
3074
|
+
return;
|
|
3075
|
+
}
|
|
3076
|
+
overlay.setHover(target, hoverLabel(target, kind), { kind });
|
|
3077
|
+
};
|
|
3078
|
+
const handlePointerMove = (e2) => {
|
|
3079
|
+
setSuspended(e2.altKey);
|
|
3080
|
+
lastPointerTarget = e2.target;
|
|
3081
|
+
lastPointerX = e2.clientX;
|
|
3082
|
+
lastPointerY = e2.clientY;
|
|
3083
|
+
if (pointerFrame === null) {
|
|
3084
|
+
pointerFrame = requestAnimationFrame(updateHover);
|
|
3085
|
+
}
|
|
3086
|
+
};
|
|
3087
|
+
const handlePointerLeave = () => {
|
|
3088
|
+
lastPointerTarget = null;
|
|
3089
|
+
overlay.setHover(null, "");
|
|
3090
|
+
};
|
|
3091
|
+
const handleClick = (e2) => {
|
|
3092
|
+
if (e2.altKey) {
|
|
3093
|
+
const href = leavingLinkHref(e2.target);
|
|
3094
|
+
if (href && guard.isActive()) guard.permit(href);
|
|
3095
|
+
return;
|
|
3096
|
+
}
|
|
3097
|
+
const encoded = encodedFrom(e2.target);
|
|
3098
|
+
const kind = encoded ? itemKind(encoded) : null;
|
|
3099
|
+
if (!encoded || !kind) {
|
|
3100
|
+
clearSelection();
|
|
3101
|
+
if (e2.ctrlKey || e2.metaKey || e2.shiftKey || !showsEditedContent()) return;
|
|
3102
|
+
const href = leavingLinkHref(e2.target);
|
|
3103
|
+
if (!href) return;
|
|
3104
|
+
e2.preventDefault();
|
|
3105
|
+
if (guard.isActive()) {
|
|
3106
|
+
e2.stopPropagation();
|
|
3107
|
+
guard.block(href);
|
|
3108
|
+
}
|
|
3109
|
+
return;
|
|
3110
|
+
}
|
|
3111
|
+
e2.preventDefault();
|
|
3112
|
+
e2.stopPropagation();
|
|
3113
|
+
const item = listItemIn(encoded, e2.target);
|
|
3114
|
+
if (kind === "current")
|
|
3115
|
+
select(item?.element ?? encoded, encoded, item?.index);
|
|
3116
|
+
const referenceField = kind === "referenced" ? referenceFieldOf(encoded) : void 0;
|
|
3117
|
+
const linkedId = kind === "referenced" ? linkedIdOf(encoded) : null;
|
|
3118
|
+
opts.onEdit({
|
|
3119
|
+
...readEditPayload(encoded),
|
|
3120
|
+
...linkedId && { id: linkedId },
|
|
3121
|
+
...item && { block: item.index },
|
|
3122
|
+
...referenceField && { referenceField }
|
|
3123
|
+
});
|
|
3124
|
+
};
|
|
3125
|
+
const handleKey = (e2) => {
|
|
3126
|
+
if (e2.key === "Alt") setSuspended(e2.type === "keydown");
|
|
3127
|
+
if (e2.type === "keydown" && e2.key === "Escape") {
|
|
3128
|
+
clearSelection();
|
|
3129
|
+
}
|
|
3130
|
+
};
|
|
3131
|
+
const handleBlur = () => setSuspended(false);
|
|
3132
|
+
const handleScroll = () => overlay.onScroll();
|
|
3133
|
+
const handleResize = () => overlay.schedule();
|
|
3134
|
+
const handleSettled = () => overlay.schedule();
|
|
3135
|
+
function listItemIn(encoded, target) {
|
|
3136
|
+
if (!(target instanceof Element)) return null;
|
|
3137
|
+
const li = target.closest("li");
|
|
3138
|
+
if (!li || !encoded.contains(li) || !li.parentElement) return null;
|
|
3139
|
+
const items = Array.from(li.parentElement.children).filter(
|
|
3140
|
+
(child) => child.tagName === "LI"
|
|
3141
|
+
);
|
|
3142
|
+
return { element: li, index: items.indexOf(li) };
|
|
3143
|
+
}
|
|
3144
|
+
function nthListItem(encoded, block) {
|
|
3145
|
+
const list = encoded.querySelector("ul, ol");
|
|
3146
|
+
if (!list) return null;
|
|
3147
|
+
const items = Array.from(list.children).filter(
|
|
3148
|
+
(child) => child.tagName === "LI"
|
|
3149
|
+
);
|
|
3150
|
+
return items[block] ?? null;
|
|
3151
|
+
}
|
|
3152
|
+
function select(el, field, block) {
|
|
3153
|
+
const entryId = field.getAttribute("data-prepr-entry-id");
|
|
3154
|
+
selection = {
|
|
3155
|
+
lookup: {
|
|
3156
|
+
field: field.getAttribute("data-prepr-field") ?? "",
|
|
3157
|
+
id: field.getAttribute("data-prepr-id") ?? void 0,
|
|
3158
|
+
...entryId && { entryId },
|
|
3159
|
+
...block !== void 0 && { block }
|
|
3160
|
+
},
|
|
3161
|
+
label: field
|
|
3162
|
+
};
|
|
3163
|
+
overlay.setSelected(el, labelFor(field));
|
|
3164
|
+
if (overlay.getHoverTarget() === el) overlay.setHover(null, "");
|
|
3165
|
+
}
|
|
3166
|
+
function clearSelection() {
|
|
3167
|
+
selection = null;
|
|
3168
|
+
overlay.setSelected(null, "");
|
|
3169
|
+
}
|
|
3170
|
+
function reselect() {
|
|
3171
|
+
if (!selection) return;
|
|
3172
|
+
const current = overlay.getSelectedTarget();
|
|
3173
|
+
if (current?.isConnected && selection.label.isConnected) return;
|
|
3174
|
+
const found = findFieldElement(selection.lookup);
|
|
3175
|
+
if (!found || !isCurrentItem(found)) {
|
|
3176
|
+
overlay.setSelected(null, "");
|
|
3177
|
+
return;
|
|
3178
|
+
}
|
|
3179
|
+
const { block } = selection.lookup;
|
|
3180
|
+
const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
|
|
3181
|
+
select(el, found, block);
|
|
3182
|
+
}
|
|
3183
|
+
function tagAssets() {
|
|
3184
|
+
if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
|
|
3185
|
+
tagAssetImages(assetIndex, currentItemId, assetKeys);
|
|
3186
|
+
}
|
|
3187
|
+
const handleLayoutFrame = () => {
|
|
3188
|
+
mutationFrame = null;
|
|
3189
|
+
if (assetIndex.size) tagAssets();
|
|
3190
|
+
reselect();
|
|
3191
|
+
const hovered = overlay.getHoverTarget();
|
|
3192
|
+
if (hovered && !hovered.isConnected) {
|
|
3193
|
+
lastPointerTarget = document.elementFromPoint(lastPointerX, lastPointerY);
|
|
3194
|
+
updateHover();
|
|
3195
|
+
return;
|
|
3196
|
+
}
|
|
3197
|
+
overlay.schedule();
|
|
3198
|
+
};
|
|
3199
|
+
const handleMutations = () => {
|
|
3200
|
+
if (mutationFrame !== null) return;
|
|
3201
|
+
if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
|
|
3202
|
+
mutationFrame = requestAnimationFrame(handleLayoutFrame);
|
|
3203
|
+
};
|
|
3204
|
+
function injectCursorStyles() {
|
|
3205
|
+
if (document.querySelector(`style[${CURSOR_STYLE_MARKER}]`)) return;
|
|
3206
|
+
const style = document.createElement("style");
|
|
3207
|
+
style.setAttribute(CURSOR_STYLE_MARKER, "");
|
|
3208
|
+
style.textContent = CURSOR_STYLES;
|
|
3209
|
+
document.head.appendChild(style);
|
|
3210
|
+
}
|
|
3211
|
+
function start() {
|
|
3212
|
+
if (running) return;
|
|
3213
|
+
running = true;
|
|
3214
|
+
overlay.mount();
|
|
3215
|
+
injectCursorStyles();
|
|
3216
|
+
document.addEventListener("pointermove", handlePointerMove, {
|
|
3217
|
+
passive: true
|
|
3218
|
+
});
|
|
3219
|
+
document.documentElement.addEventListener(
|
|
3220
|
+
"pointerleave",
|
|
3221
|
+
handlePointerLeave
|
|
3222
|
+
);
|
|
3223
|
+
document.addEventListener("click", handleClick, { capture: true });
|
|
3224
|
+
window.addEventListener("keydown", handleKey);
|
|
3225
|
+
window.addEventListener("keyup", handleKey);
|
|
3226
|
+
window.addEventListener("blur", handleBlur);
|
|
3227
|
+
window.addEventListener("scroll", handleScroll, {
|
|
3228
|
+
capture: true,
|
|
3229
|
+
passive: true
|
|
3230
|
+
});
|
|
3231
|
+
window.addEventListener("resize", handleResize, { passive: true });
|
|
3232
|
+
document.addEventListener("transitionend", handleSettled, {
|
|
3233
|
+
capture: true,
|
|
3234
|
+
passive: true
|
|
3235
|
+
});
|
|
3236
|
+
document.addEventListener("animationend", handleSettled, {
|
|
3237
|
+
capture: true,
|
|
3238
|
+
passive: true
|
|
3239
|
+
});
|
|
3240
|
+
mutationObserver = new MutationObserver(handleMutations);
|
|
3241
|
+
mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
|
|
3242
|
+
if (assetIndex.size) tagAssets();
|
|
3243
|
+
syncGuard();
|
|
3244
|
+
debug8.log("visual editor started");
|
|
3245
|
+
}
|
|
3246
|
+
function stop() {
|
|
3247
|
+
if (!running) return;
|
|
3248
|
+
running = false;
|
|
3249
|
+
if (pointerFrame !== null) cancelAnimationFrame(pointerFrame);
|
|
3250
|
+
if (mutationFrame !== null) cancelAnimationFrame(mutationFrame);
|
|
3251
|
+
mutationObserver?.disconnect();
|
|
3252
|
+
mutationObserver = null;
|
|
3253
|
+
cancelFind();
|
|
3254
|
+
pointerFrame = null;
|
|
3255
|
+
mutationFrame = null;
|
|
3256
|
+
selection = null;
|
|
3257
|
+
lastPointerTarget = null;
|
|
3258
|
+
setSuspended(false);
|
|
3259
|
+
document.removeEventListener("pointermove", handlePointerMove);
|
|
3260
|
+
document.documentElement.removeEventListener(
|
|
3261
|
+
"pointerleave",
|
|
3262
|
+
handlePointerLeave
|
|
3263
|
+
);
|
|
3264
|
+
document.removeEventListener("click", handleClick, { capture: true });
|
|
3265
|
+
window.removeEventListener("keydown", handleKey);
|
|
3266
|
+
window.removeEventListener("keyup", handleKey);
|
|
3267
|
+
window.removeEventListener("blur", handleBlur);
|
|
3268
|
+
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
3269
|
+
window.removeEventListener("resize", handleResize);
|
|
3270
|
+
document.removeEventListener("transitionend", handleSettled, {
|
|
3271
|
+
capture: true
|
|
3272
|
+
});
|
|
3273
|
+
document.removeEventListener("animationend", handleSettled, {
|
|
3274
|
+
capture: true
|
|
3275
|
+
});
|
|
3276
|
+
document.querySelectorAll(`style[${CURSOR_STYLE_MARKER}]`).forEach((node) => node.remove());
|
|
3277
|
+
overlay.unmount();
|
|
3278
|
+
untagAssetImages();
|
|
3279
|
+
guard.stop();
|
|
3280
|
+
debug8.log("visual editor stopped");
|
|
3281
|
+
}
|
|
3282
|
+
function cancelFind() {
|
|
3283
|
+
if (findTimeout) clearTimeout(findTimeout);
|
|
3284
|
+
findTimeout = null;
|
|
3285
|
+
settlePendingFind?.();
|
|
3286
|
+
settlePendingFind = null;
|
|
3287
|
+
}
|
|
3288
|
+
function focusField(lookup) {
|
|
3289
|
+
cancelFind();
|
|
3290
|
+
return new Promise((resolve2) => {
|
|
3291
|
+
let attempt = 0;
|
|
3292
|
+
const finish = (found) => {
|
|
3293
|
+
settlePendingFind = null;
|
|
3294
|
+
resolve2(found);
|
|
3295
|
+
};
|
|
3296
|
+
settlePendingFind = () => resolve2(false);
|
|
3297
|
+
const tryFind = () => {
|
|
3298
|
+
findTimeout = null;
|
|
3299
|
+
const found = findFieldElement(lookup);
|
|
3300
|
+
if (found) {
|
|
3301
|
+
const el = lookup.block !== void 0 ? nthListItem(found, lookup.block) ?? found : found;
|
|
3302
|
+
scrollIntoFrame(el);
|
|
3303
|
+
if (running && isCurrentItem(found)) select(el, found, lookup.block);
|
|
3304
|
+
finish(true);
|
|
3305
|
+
return;
|
|
3306
|
+
}
|
|
3307
|
+
if (++attempt >= FIND_RETRIES) {
|
|
3308
|
+
debug8.log("no element renders field", lookup.field);
|
|
3309
|
+
finish(false);
|
|
3310
|
+
return;
|
|
3311
|
+
}
|
|
3312
|
+
findTimeout = setTimeout(tryFind, FIND_RETRY_MS);
|
|
3313
|
+
};
|
|
3314
|
+
tryFind();
|
|
3315
|
+
});
|
|
3316
|
+
}
|
|
3317
|
+
function setCurrentItem(itemId, referenceList, componentIds) {
|
|
3318
|
+
currentItemId = itemId;
|
|
3319
|
+
if (referenceList) setReferences(referenceList, componentIds);
|
|
3320
|
+
else if (componentIds) ownComponents = new Set(componentIds);
|
|
3321
|
+
if (running && assetIndex.size) tagAssets();
|
|
3322
|
+
const selected = overlay.getSelectedTarget();
|
|
3323
|
+
const owner = selected ? encodedFrom(selected) : null;
|
|
3324
|
+
if (owner && !isCurrentItem(owner)) clearSelection();
|
|
3325
|
+
}
|
|
3326
|
+
function setAssets(assets) {
|
|
3327
|
+
const hadAssets = assetIndex.size > 0;
|
|
3328
|
+
assetIndex = createAssetIndex(assets);
|
|
3329
|
+
if (running && (hadAssets || assetIndex.size)) tagAssets();
|
|
3330
|
+
}
|
|
3331
|
+
function setReferences(referenceList, componentIds) {
|
|
3332
|
+
if (componentIds) ownComponents = new Set(componentIds);
|
|
3333
|
+
references = /* @__PURE__ */ new Map();
|
|
3334
|
+
for (const { id, field } of referenceList) {
|
|
3335
|
+
if (!references.has(id)) references.set(id, field);
|
|
3336
|
+
}
|
|
3337
|
+
}
|
|
3338
|
+
function setLocale(value) {
|
|
3339
|
+
locale = value;
|
|
3340
|
+
}
|
|
3341
|
+
function syncGuard() {
|
|
3342
|
+
if (running && guardEnabled) guard.start();
|
|
3343
|
+
else guard.stop();
|
|
3344
|
+
}
|
|
3345
|
+
function setNavigationGuard(enabled) {
|
|
3346
|
+
guardEnabled = enabled;
|
|
3347
|
+
syncGuard();
|
|
3348
|
+
}
|
|
3349
|
+
return {
|
|
3350
|
+
start,
|
|
3351
|
+
stop,
|
|
3352
|
+
setCurrentItem,
|
|
3353
|
+
setReferences,
|
|
3354
|
+
setAssets,
|
|
3355
|
+
setLocale,
|
|
3356
|
+
focusField,
|
|
3357
|
+
setNavigationGuard,
|
|
3358
|
+
allowNavigation: (href) => guard.allow(href)
|
|
3359
|
+
};
|
|
3360
|
+
}
|
|
3361
|
+
|
|
3362
|
+
// src/core/create-preview.ts
|
|
3363
|
+
var debug9 = createScopedLogger("create-preview");
|
|
3364
|
+
var controllerStores = /* @__PURE__ */ new WeakMap();
|
|
3365
|
+
function defaultNavigation() {
|
|
3366
|
+
return {
|
|
3367
|
+
navigate: (url) => window.location.assign(url),
|
|
3368
|
+
currentPath: () => window.location.pathname + window.location.search
|
|
3369
|
+
};
|
|
3370
|
+
}
|
|
3371
|
+
function safeEditUrl(href) {
|
|
3372
|
+
try {
|
|
3373
|
+
const url = new URL(href, window.location.href);
|
|
3374
|
+
return url.protocol === "https:" || url.protocol === "http:" ? url.href : null;
|
|
3375
|
+
} catch {
|
|
3376
|
+
return null;
|
|
3377
|
+
}
|
|
3378
|
+
}
|
|
3379
|
+
function buildSegments(data) {
|
|
3380
|
+
return [{ _id: "all_other_users", name: "All other users" }, ...data];
|
|
3381
|
+
}
|
|
3382
|
+
function resolveLocale(options) {
|
|
3383
|
+
const explicit = options?.locale;
|
|
3384
|
+
if (isLocale(explicit)) return explicit;
|
|
3385
|
+
if (typeof navigator !== "undefined") {
|
|
3386
|
+
const candidates = Array.isArray(navigator.languages) && navigator.languages.length ? navigator.languages : [navigator.language];
|
|
3387
|
+
const match = candidates.filter(Boolean).map((l2) => l2.toLowerCase().split("-")[0]).find(isLocale);
|
|
3388
|
+
if (match) return match;
|
|
3389
|
+
}
|
|
3390
|
+
return "en";
|
|
3391
|
+
}
|
|
3392
|
+
function createPreprPreview(opts = {}) {
|
|
3393
|
+
const { props, options } = opts;
|
|
3394
|
+
const navigation = opts.navigation ?? defaultNavigation();
|
|
3395
|
+
initDebugLogger(options?.debug ?? false);
|
|
3396
|
+
const noop = () => ({ destroy: () => {
|
|
3397
|
+
} });
|
|
3398
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
3399
|
+
return noop();
|
|
3400
|
+
}
|
|
3401
|
+
const isIframe = window.parent !== window;
|
|
3402
|
+
const search = new URLSearchParams(window.location.search);
|
|
3403
|
+
const hideBar = search.get(PARAM_HIDE_BAR) === "true";
|
|
3404
|
+
if (hideBar) {
|
|
2269
3405
|
debug9.log(`${PARAM_HIDE_BAR}=true \u2014 no visible toolbar`);
|
|
2270
3406
|
}
|
|
2271
3407
|
const mountUi = (options?.ui ?? true) && !isIframe && !hideBar;
|
|
@@ -2295,29 +3431,45 @@ function createPreprPreview(opts = {}) {
|
|
|
2295
3431
|
el.connect(store, (key) => t(key, locale));
|
|
2296
3432
|
}
|
|
2297
3433
|
const editingEnabled = features.editMode || isIframe;
|
|
2298
|
-
const
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
if (isIframe) {
|
|
2312
|
-
sendPreprEvent("field_edit_requested", {
|
|
2313
|
-
id,
|
|
2314
|
-
field,
|
|
2315
|
-
locale: contentLocale
|
|
2316
|
-
});
|
|
2317
|
-
} else if (safeHref) {
|
|
2318
|
-
window.open(safeHref, "_blank", "noopener,noreferrer");
|
|
2319
|
-
}
|
|
3434
|
+
const onEdit = ({
|
|
3435
|
+
href,
|
|
3436
|
+
id,
|
|
3437
|
+
field,
|
|
3438
|
+
locale: contentLocale,
|
|
3439
|
+
block,
|
|
3440
|
+
entryId,
|
|
3441
|
+
referenceField
|
|
3442
|
+
}) => {
|
|
3443
|
+
const safeHref = href ? safeEditUrl(href) : null;
|
|
3444
|
+
if (href && !safeHref) {
|
|
3445
|
+
debug9.warn("ignored edit request with unsupported href scheme");
|
|
3446
|
+
return;
|
|
2320
3447
|
}
|
|
3448
|
+
if (isIframe) {
|
|
3449
|
+
sendPreprEvent("field_edit_requested", {
|
|
3450
|
+
id,
|
|
3451
|
+
field,
|
|
3452
|
+
locale: contentLocale,
|
|
3453
|
+
...block !== void 0 && { block },
|
|
3454
|
+
...entryId && { entryId },
|
|
3455
|
+
...referenceField && { referenceField }
|
|
3456
|
+
});
|
|
3457
|
+
} else if (safeHref) {
|
|
3458
|
+
window.open(safeHref, "_blank", "noopener,noreferrer");
|
|
3459
|
+
}
|
|
3460
|
+
};
|
|
3461
|
+
const visualEditor = isIframe ? createVisualEditor({
|
|
3462
|
+
onEdit,
|
|
3463
|
+
locale,
|
|
3464
|
+
onNavigationBlocked: (href) => sendPreprEvent("navigation_blocked", { href })
|
|
3465
|
+
}) : null;
|
|
3466
|
+
const stega = visualEditor ?? createStegaController({
|
|
3467
|
+
// The edit-mode marks and hover label are chrome, so they follow the
|
|
3468
|
+
// same decision as the bar: unwanted in a headless preview that asked
|
|
3469
|
+
// for no UI.
|
|
3470
|
+
tooltip: mountUi,
|
|
3471
|
+
onEdit,
|
|
3472
|
+
locale
|
|
2321
3473
|
});
|
|
2322
3474
|
const autoClean = createStegaAutoClean({
|
|
2323
3475
|
enabled: options?.autoClean
|
|
@@ -2340,10 +3492,30 @@ function createPreprPreview(opts = {}) {
|
|
|
2340
3492
|
});
|
|
2341
3493
|
const bridge = createIframeBridge(store, {
|
|
2342
3494
|
allowedEditorOrigins: options?.allowedEditorOrigins,
|
|
3495
|
+
onHandshake: ({
|
|
3496
|
+
itemId,
|
|
3497
|
+
referencedIds,
|
|
3498
|
+
componentIds,
|
|
3499
|
+
uiLocale,
|
|
3500
|
+
navigationGuard,
|
|
3501
|
+
assets
|
|
3502
|
+
}) => {
|
|
3503
|
+
if (uiLocale) visualEditor?.setLocale(uiLocale);
|
|
3504
|
+
visualEditor?.setCurrentItem(itemId ?? null, referencedIds, componentIds);
|
|
3505
|
+
visualEditor?.setNavigationGuard(navigationGuard === true);
|
|
3506
|
+
if (assets) visualEditor?.setAssets(assets);
|
|
3507
|
+
},
|
|
3508
|
+
onAssets: (assets) => visualEditor?.setAssets(assets),
|
|
3509
|
+
onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
|
|
3510
|
+
onReferences: (referencedIds, componentIds) => visualEditor?.setReferences(referencedIds, componentIds),
|
|
2343
3511
|
// The editor selecting a field scrolls the matching element into view. The
|
|
2344
3512
|
// lookup relies on the attributes the stega scan writes, so it finds
|
|
2345
3513
|
// nothing until encoded content has been tagged.
|
|
2346
|
-
onScrollToField: ({ field, id }) => {
|
|
3514
|
+
onScrollToField: ({ field, id, block, entryId, fieldById }) => {
|
|
3515
|
+
if (visualEditor) {
|
|
3516
|
+
void visualEditor.focusField({ field, id, block, entryId, fieldById });
|
|
3517
|
+
return;
|
|
3518
|
+
}
|
|
2347
3519
|
if (!scrollToField({ field, id })) {
|
|
2348
3520
|
debug9.log("no element on this page renders field", field);
|
|
2349
3521
|
}
|
|
@@ -2374,6 +3546,1545 @@ function createPreprPreview(opts = {}) {
|
|
|
2374
3546
|
return controller;
|
|
2375
3547
|
}
|
|
2376
3548
|
|
|
3549
|
+
// src/core/preview-attrs.ts
|
|
3550
|
+
function previewAttrs(target, options) {
|
|
3551
|
+
if (!options.enabled || !target.id || !target.field) return {};
|
|
3552
|
+
const attrs = {
|
|
3553
|
+
"data-prepr-encoded": "",
|
|
3554
|
+
"data-prepr-id": target.id,
|
|
3555
|
+
"data-prepr-field": target.field
|
|
3556
|
+
};
|
|
3557
|
+
if (target.locale) attrs["data-prepr-locale"] = target.locale;
|
|
3558
|
+
if (target.entryId) attrs["data-prepr-entry-id"] = target.entryId;
|
|
3559
|
+
return attrs;
|
|
3560
|
+
}
|
|
3561
|
+
|
|
3562
|
+
// src/core/live-preview/normalize-query.ts
|
|
3563
|
+
var import_stega6 = require("@vercel/stega");
|
|
3564
|
+
|
|
3565
|
+
// src/core/live-preview/field-name.ts
|
|
3566
|
+
var UPPERCASE_BOUNDARY = /(.)(?=[A-Z])/g;
|
|
3567
|
+
function graphqlFieldName(apiId) {
|
|
3568
|
+
return apiId.replace(UPPERCASE_BOUNDARY, "$1_").toLowerCase();
|
|
3569
|
+
}
|
|
3570
|
+
function fieldKeyIn(record, apiId) {
|
|
3571
|
+
if (Object.prototype.hasOwnProperty.call(record, apiId)) return apiId;
|
|
3572
|
+
const name = graphqlFieldName(apiId);
|
|
3573
|
+
return Object.prototype.hasOwnProperty.call(record, name) ? name : void 0;
|
|
3574
|
+
}
|
|
3575
|
+
|
|
3576
|
+
// src/core/live-preview/index-snapshot.ts
|
|
3577
|
+
var debug10 = createScopedLogger("live-preview");
|
|
3578
|
+
function indexSnapshot(data) {
|
|
3579
|
+
const index = /* @__PURE__ */ new Map();
|
|
3580
|
+
const visited = /* @__PURE__ */ new WeakSet();
|
|
3581
|
+
const path = [];
|
|
3582
|
+
function walk(node) {
|
|
3583
|
+
if (node === null || typeof node !== "object") return;
|
|
3584
|
+
if (visited.has(node)) return;
|
|
3585
|
+
visited.add(node);
|
|
3586
|
+
if (Array.isArray(node)) {
|
|
3587
|
+
for (let i2 = 0; i2 < node.length; i2++) {
|
|
3588
|
+
path.push(i2);
|
|
3589
|
+
walk(node[i2]);
|
|
3590
|
+
path.pop();
|
|
3591
|
+
}
|
|
3592
|
+
return;
|
|
3593
|
+
}
|
|
3594
|
+
const record = node;
|
|
3595
|
+
if (typeof record._id === "string") {
|
|
3596
|
+
const paths = index.get(record._id);
|
|
3597
|
+
if (paths) paths.push([...path]);
|
|
3598
|
+
else index.set(record._id, [[...path]]);
|
|
3599
|
+
} else if (typeof record.__typename === "string") {
|
|
3600
|
+
debug10.log("item without _id will not live-update", {
|
|
3601
|
+
__typename: record.__typename
|
|
3602
|
+
});
|
|
3603
|
+
}
|
|
3604
|
+
for (const key in record) {
|
|
3605
|
+
if (!Object.prototype.hasOwnProperty.call(record, key)) continue;
|
|
3606
|
+
path.push(key);
|
|
3607
|
+
walk(record[key]);
|
|
3608
|
+
path.pop();
|
|
3609
|
+
}
|
|
3610
|
+
}
|
|
3611
|
+
walk(data);
|
|
3612
|
+
return index;
|
|
3613
|
+
}
|
|
3614
|
+
|
|
3615
|
+
// src/core/live-preview/patch.ts
|
|
3616
|
+
var import_stega5 = require("@vercel/stega");
|
|
3617
|
+
var INDEX_SEGMENT2 = /^\d+$/;
|
|
3618
|
+
var FORBIDDEN_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
|
|
3619
|
+
function isPlainObject(value) {
|
|
3620
|
+
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
3621
|
+
}
|
|
3622
|
+
function mergeObject(current, incoming) {
|
|
3623
|
+
let changed = false;
|
|
3624
|
+
const next = { ...current };
|
|
3625
|
+
for (const key of Object.keys(current)) {
|
|
3626
|
+
if (!(key in incoming) || incoming[key] === void 0) continue;
|
|
3627
|
+
const value = isPlainObject(current[key]) && isPlainObject(incoming[key]) ? mergeObject(current[key], incoming[key]) : incoming[key];
|
|
3628
|
+
if (value !== current[key]) {
|
|
3629
|
+
next[key] = value;
|
|
3630
|
+
changed = true;
|
|
3631
|
+
}
|
|
3632
|
+
}
|
|
3633
|
+
return changed ? next : current;
|
|
3634
|
+
}
|
|
3635
|
+
function shapeLike(template, incoming) {
|
|
3636
|
+
const out = {};
|
|
3637
|
+
for (const key of Object.keys(template)) {
|
|
3638
|
+
const value = incoming[key];
|
|
3639
|
+
out[key] = value === void 0 ? null : isPlainObject(template[key]) && isPlainObject(value) ? shapeLike(template[key], value) : value;
|
|
3640
|
+
}
|
|
3641
|
+
return out;
|
|
3642
|
+
}
|
|
3643
|
+
function mergeStructured(current, incoming) {
|
|
3644
|
+
if (incoming === null || Array.isArray(incoming) && !incoming.length) {
|
|
3645
|
+
if (Array.isArray(current)) return current.length ? [] : current;
|
|
3646
|
+
return null;
|
|
3647
|
+
}
|
|
3648
|
+
const list = Array.isArray(incoming) ? incoming : [incoming];
|
|
3649
|
+
if (current === null || current === void 0) return incoming;
|
|
3650
|
+
if (Array.isArray(current)) {
|
|
3651
|
+
const template = current.find(isPlainObject);
|
|
3652
|
+
return list.map((entry) => {
|
|
3653
|
+
const match = current.find(
|
|
3654
|
+
(c2) => isPlainObject(c2) && c2._id !== void 0 && c2._id === entry._id
|
|
3655
|
+
);
|
|
3656
|
+
if (isPlainObject(match)) return mergeObject(match, entry);
|
|
3657
|
+
return isPlainObject(template) ? shapeLike(template, entry) : entry;
|
|
3658
|
+
});
|
|
3659
|
+
}
|
|
3660
|
+
if (isPlainObject(current)) return mergeObject(current, list[0]);
|
|
3661
|
+
return current;
|
|
3662
|
+
}
|
|
3663
|
+
function isPatchable(current) {
|
|
3664
|
+
return current === null || typeof current === "string" || typeof current === "number" || typeof current === "boolean";
|
|
3665
|
+
}
|
|
3666
|
+
function cloneNode(node) {
|
|
3667
|
+
return Array.isArray(node) ? [...node] : { ...node };
|
|
3668
|
+
}
|
|
3669
|
+
function patchSnapshot(snapshot, index, itemId, field, value) {
|
|
3670
|
+
const paths = index.get(itemId);
|
|
3671
|
+
if (!paths?.length) return snapshot;
|
|
3672
|
+
let root = snapshot;
|
|
3673
|
+
let changed = false;
|
|
3674
|
+
for (const path of paths) {
|
|
3675
|
+
root = patchAtPath(root, path, field, value, () => {
|
|
3676
|
+
changed = true;
|
|
3677
|
+
});
|
|
3678
|
+
}
|
|
3679
|
+
return changed ? root : snapshot;
|
|
3680
|
+
}
|
|
3681
|
+
function patchAtPath(root, path, field, value, markChanged) {
|
|
3682
|
+
const segments = field.split(".");
|
|
3683
|
+
if (segments.some((s2) => FORBIDDEN_SEGMENTS.has(s2))) return root;
|
|
3684
|
+
let node = root;
|
|
3685
|
+
for (const step of path) {
|
|
3686
|
+
node = node[step];
|
|
3687
|
+
}
|
|
3688
|
+
const fullPath = [...path];
|
|
3689
|
+
for (const segment of segments) {
|
|
3690
|
+
let step = segment;
|
|
3691
|
+
if (INDEX_SEGMENT2.test(segment)) {
|
|
3692
|
+
step = Number(segment);
|
|
3693
|
+
} else if (node !== null && typeof node === "object") {
|
|
3694
|
+
step = fieldKeyIn(node, segment) ?? segment;
|
|
3695
|
+
}
|
|
3696
|
+
fullPath.push(step);
|
|
3697
|
+
node = node !== null && typeof node === "object" ? node[step] : void 0;
|
|
3698
|
+
}
|
|
3699
|
+
return writeAtPath(root, fullPath, value, markChanged);
|
|
3700
|
+
}
|
|
3701
|
+
function writeAtPath(root, fullPath, value, markChanged = () => {
|
|
3702
|
+
}) {
|
|
3703
|
+
if (!fullPath.length) return root;
|
|
3704
|
+
if (fullPath.some((s2) => FORBIDDEN_SEGMENTS.has(String(s2)))) return root;
|
|
3705
|
+
const last = fullPath.length - 1;
|
|
3706
|
+
let node = root;
|
|
3707
|
+
for (let i2 = 0; i2 < last; i2++) {
|
|
3708
|
+
if (node === null || typeof node !== "object") return root;
|
|
3709
|
+
node = node[fullPath[i2]];
|
|
3710
|
+
}
|
|
3711
|
+
if (node === null || typeof node !== "object") return root;
|
|
3712
|
+
const container = node;
|
|
3713
|
+
const key = fullPath[last];
|
|
3714
|
+
if (!(key in container)) return root;
|
|
3715
|
+
let next;
|
|
3716
|
+
if (value === null || typeof value === "object") {
|
|
3717
|
+
next = mergeStructured(container[key], value);
|
|
3718
|
+
} else if (!isPatchable(container[key])) {
|
|
3719
|
+
return root;
|
|
3720
|
+
} else {
|
|
3721
|
+
next = keepEditLink(container[key], value);
|
|
3722
|
+
}
|
|
3723
|
+
if (container[key] === next) return root;
|
|
3724
|
+
const newRoot = cloneNode(root);
|
|
3725
|
+
let cursor = newRoot;
|
|
3726
|
+
for (let i2 = 0; i2 < last; i2++) {
|
|
3727
|
+
const child = cloneNode(cursor[fullPath[i2]]);
|
|
3728
|
+
cursor[fullPath[i2]] = child;
|
|
3729
|
+
cursor = child;
|
|
3730
|
+
}
|
|
3731
|
+
cursor[key] = next;
|
|
3732
|
+
markChanged();
|
|
3733
|
+
return newRoot;
|
|
3734
|
+
}
|
|
3735
|
+
function listKeysOf(entry) {
|
|
3736
|
+
if (!isPlainObject(entry)) return [];
|
|
3737
|
+
const keys = [];
|
|
3738
|
+
if (typeof entry._id === "string") keys.push(entry._id);
|
|
3739
|
+
const first = Array.isArray(entry.items) ? entry.items[0] : null;
|
|
3740
|
+
if (isPlainObject(first) && typeof first._id === "string") {
|
|
3741
|
+
keys.push(first._id);
|
|
3742
|
+
}
|
|
3743
|
+
return keys;
|
|
3744
|
+
}
|
|
3745
|
+
var TAG_PATTERN = /<[^>]+>/g;
|
|
3746
|
+
function buildText(entry, template) {
|
|
3747
|
+
const body = typeof entry.body === "string" ? entry.body : "";
|
|
3748
|
+
const full = {
|
|
3749
|
+
__typename: "Text",
|
|
3750
|
+
_id: entry._id,
|
|
3751
|
+
body,
|
|
3752
|
+
html: body,
|
|
3753
|
+
text: body.replace(TAG_PATTERN, ""),
|
|
3754
|
+
format: entry.format ?? null
|
|
3755
|
+
};
|
|
3756
|
+
if (!template) return full;
|
|
3757
|
+
const out = {};
|
|
3758
|
+
for (const key of Object.keys(template)) {
|
|
3759
|
+
out[key] = key in full ? full[key] : null;
|
|
3760
|
+
}
|
|
3761
|
+
return out;
|
|
3762
|
+
}
|
|
3763
|
+
function syncList(current, entries, build) {
|
|
3764
|
+
if (current === null || current === void 0) {
|
|
3765
|
+
const built = syncList([], entries, build);
|
|
3766
|
+
return built.length ? built : current;
|
|
3767
|
+
}
|
|
3768
|
+
if (!Array.isArray(current)) return current;
|
|
3769
|
+
const byKey = /* @__PURE__ */ new Map();
|
|
3770
|
+
const templates = /* @__PURE__ */ new Map();
|
|
3771
|
+
for (const c2 of current) {
|
|
3772
|
+
for (const key of listKeysOf(c2)) byKey.set(key, c2);
|
|
3773
|
+
if (isPlainObject(c2) && typeof c2.__typename === "string") {
|
|
3774
|
+
if (!templates.has(c2.__typename)) templates.set(c2.__typename, c2);
|
|
3775
|
+
}
|
|
3776
|
+
}
|
|
3777
|
+
if (!entries.length) return current.length ? [] : current;
|
|
3778
|
+
if (current.length && !byKey.size) return current;
|
|
3779
|
+
if (current.length && !entries.some((e2) => byKey.has(e2._id))) return current;
|
|
3780
|
+
const next = [];
|
|
3781
|
+
for (const entry of entries) {
|
|
3782
|
+
const existing = byKey.get(entry._id);
|
|
3783
|
+
const built = existing === void 0 && entry.fields ? build?.(entry) : void 0;
|
|
3784
|
+
if (existing !== void 0) {
|
|
3785
|
+
next.push(existing);
|
|
3786
|
+
} else if (built) {
|
|
3787
|
+
next.push(built);
|
|
3788
|
+
} else if (entry.__typename === "Text") {
|
|
3789
|
+
next.push(buildText(entry, templates.get("Text")));
|
|
3790
|
+
}
|
|
3791
|
+
}
|
|
3792
|
+
const same = next.length === current.length && next.every((n2, i2) => n2 === current[i2]);
|
|
3793
|
+
return same ? current : next;
|
|
3794
|
+
}
|
|
3795
|
+
function syncListSnapshot(snapshot, index, itemId, field, entries) {
|
|
3796
|
+
const paths = index.get(itemId);
|
|
3797
|
+
if (!paths?.length) return snapshot;
|
|
3798
|
+
const fieldPath = field.split(".");
|
|
3799
|
+
if (fieldPath.some((s2) => FORBIDDEN_SEGMENTS.has(s2))) return snapshot;
|
|
3800
|
+
let root = snapshot;
|
|
3801
|
+
for (const path of paths) {
|
|
3802
|
+
root = syncListAtPath(root, [...path, ...fieldPath], entries);
|
|
3803
|
+
}
|
|
3804
|
+
return root;
|
|
3805
|
+
}
|
|
3806
|
+
function syncListAtPath(root, fullPath, entries, build) {
|
|
3807
|
+
if (!fullPath.length) return root;
|
|
3808
|
+
if (fullPath.some((s2) => FORBIDDEN_SEGMENTS.has(String(s2)))) return root;
|
|
3809
|
+
let node = root;
|
|
3810
|
+
for (const key of fullPath) {
|
|
3811
|
+
node = node !== null && typeof node === "object" ? node[key] : void 0;
|
|
3812
|
+
}
|
|
3813
|
+
const next = syncList(node, entries, build);
|
|
3814
|
+
if (next === node) return root;
|
|
3815
|
+
const newRoot = cloneNode(root);
|
|
3816
|
+
let cursor = newRoot;
|
|
3817
|
+
for (let i2 = 0; i2 < fullPath.length - 1; i2++) {
|
|
3818
|
+
const child = cloneNode(cursor[fullPath[i2]]);
|
|
3819
|
+
cursor[fullPath[i2]] = child;
|
|
3820
|
+
cursor = child;
|
|
3821
|
+
}
|
|
3822
|
+
cursor[fullPath[fullPath.length - 1]] = next;
|
|
3823
|
+
return newRoot;
|
|
3824
|
+
}
|
|
3825
|
+
function keepEditLink(current, value) {
|
|
3826
|
+
if (typeof current !== "string" || typeof value !== "string") return value;
|
|
3827
|
+
const { encoded } = (0, import_stega5.vercelStegaSplit)(current);
|
|
3828
|
+
if (!encoded || (0, import_stega5.vercelStegaSplit)(value).encoded) return value;
|
|
3829
|
+
return value + encoded;
|
|
3830
|
+
}
|
|
3831
|
+
|
|
3832
|
+
// src/core/live-preview/query-document.ts
|
|
3833
|
+
var NAME_START = /[_A-Za-z]/;
|
|
3834
|
+
var NAME_CONTINUE = /[_0-9A-Za-z]/;
|
|
3835
|
+
var PUNCT = /* @__PURE__ */ new Set([
|
|
3836
|
+
"!",
|
|
3837
|
+
"$",
|
|
3838
|
+
"&",
|
|
3839
|
+
"(",
|
|
3840
|
+
")",
|
|
3841
|
+
":",
|
|
3842
|
+
"=",
|
|
3843
|
+
"@",
|
|
3844
|
+
"[",
|
|
3845
|
+
"]",
|
|
3846
|
+
"{",
|
|
3847
|
+
"|",
|
|
3848
|
+
"}"
|
|
3849
|
+
]);
|
|
3850
|
+
function tokenize(source) {
|
|
3851
|
+
const tokens = [];
|
|
3852
|
+
let i2 = 0;
|
|
3853
|
+
const n2 = source.length;
|
|
3854
|
+
while (i2 < n2) {
|
|
3855
|
+
const ch = source[i2];
|
|
3856
|
+
if (ch === " " || ch === " " || ch === "\n" || ch === "\r" || ch === "," || ch === "\uFEFF") {
|
|
3857
|
+
i2++;
|
|
3858
|
+
} else if (ch === "#") {
|
|
3859
|
+
while (i2 < n2 && source[i2] !== "\n" && source[i2] !== "\r") i2++;
|
|
3860
|
+
} else if (ch === "." && source.startsWith("...", i2)) {
|
|
3861
|
+
tokens.push({ type: "punct", value: "..." });
|
|
3862
|
+
i2 += 3;
|
|
3863
|
+
} else if (PUNCT.has(ch)) {
|
|
3864
|
+
tokens.push({ type: "punct", value: ch });
|
|
3865
|
+
i2++;
|
|
3866
|
+
} else if (NAME_START.test(ch)) {
|
|
3867
|
+
const start = i2;
|
|
3868
|
+
while (i2 < n2 && NAME_CONTINUE.test(source[i2])) i2++;
|
|
3869
|
+
tokens.push({ type: "name", value: source.slice(start, i2) });
|
|
3870
|
+
} else if (ch === '"') {
|
|
3871
|
+
if (source.startsWith('"""', i2)) {
|
|
3872
|
+
i2 += 3;
|
|
3873
|
+
while (i2 < n2 && !source.startsWith('"""', i2)) {
|
|
3874
|
+
i2 += source.startsWith('\\"""', i2) ? 4 : 1;
|
|
3875
|
+
}
|
|
3876
|
+
if (i2 >= n2) throw new SyntaxError("Unterminated block string");
|
|
3877
|
+
i2 += 3;
|
|
3878
|
+
} else {
|
|
3879
|
+
i2++;
|
|
3880
|
+
while (i2 < n2 && source[i2] !== '"') {
|
|
3881
|
+
if (source[i2] === "\n" || source[i2] === "\r") {
|
|
3882
|
+
throw new SyntaxError("Unterminated string");
|
|
3883
|
+
}
|
|
3884
|
+
i2 += source[i2] === "\\" ? 2 : 1;
|
|
3885
|
+
}
|
|
3886
|
+
if (i2 >= n2) throw new SyntaxError("Unterminated string");
|
|
3887
|
+
i2++;
|
|
3888
|
+
}
|
|
3889
|
+
tokens.push({ type: "value" });
|
|
3890
|
+
} else if (ch === "-" || ch >= "0" && ch <= "9") {
|
|
3891
|
+
i2++;
|
|
3892
|
+
while (i2 < n2 && /[0-9.eE+-]/.test(source[i2])) i2++;
|
|
3893
|
+
tokens.push({ type: "value" });
|
|
3894
|
+
} else {
|
|
3895
|
+
throw new SyntaxError(`Unexpected character "${ch}"`);
|
|
3896
|
+
}
|
|
3897
|
+
}
|
|
3898
|
+
return tokens;
|
|
3899
|
+
}
|
|
3900
|
+
function parseSource(source, operationName) {
|
|
3901
|
+
const tokens = tokenize(source);
|
|
3902
|
+
let pos = 0;
|
|
3903
|
+
const peek = () => tokens[pos];
|
|
3904
|
+
const isPunct = (value) => {
|
|
3905
|
+
const t3 = tokens[pos];
|
|
3906
|
+
return t3?.type === "punct" && t3.value === value;
|
|
3907
|
+
};
|
|
3908
|
+
const expectPunct = (value) => {
|
|
3909
|
+
if (!isPunct(value)) throw new SyntaxError(`Expected "${value}"`);
|
|
3910
|
+
pos++;
|
|
3911
|
+
};
|
|
3912
|
+
const expectName = () => {
|
|
3913
|
+
const t3 = tokens[pos];
|
|
3914
|
+
if (t3?.type !== "name") throw new SyntaxError("Expected a name");
|
|
3915
|
+
pos++;
|
|
3916
|
+
return t3.value;
|
|
3917
|
+
};
|
|
3918
|
+
const skipParens = () => {
|
|
3919
|
+
expectPunct("(");
|
|
3920
|
+
let depth = 1;
|
|
3921
|
+
while (depth > 0) {
|
|
3922
|
+
const t3 = tokens[pos++];
|
|
3923
|
+
if (!t3) throw new SyntaxError("Unbalanced parentheses");
|
|
3924
|
+
if (t3.type === "punct" && t3.value === "(") depth++;
|
|
3925
|
+
else if (t3.type === "punct" && t3.value === ")") depth--;
|
|
3926
|
+
}
|
|
3927
|
+
};
|
|
3928
|
+
const skipDirectives = () => {
|
|
3929
|
+
while (isPunct("@")) {
|
|
3930
|
+
pos++;
|
|
3931
|
+
expectName();
|
|
3932
|
+
if (isPunct("(")) skipParens();
|
|
3933
|
+
}
|
|
3934
|
+
};
|
|
3935
|
+
const parseSelectionSet = () => {
|
|
3936
|
+
expectPunct("{");
|
|
3937
|
+
const selections = [];
|
|
3938
|
+
while (!isPunct("}")) {
|
|
3939
|
+
if (!peek()) throw new SyntaxError("Unterminated selection set");
|
|
3940
|
+
selections.push(parseSelection());
|
|
3941
|
+
}
|
|
3942
|
+
pos++;
|
|
3943
|
+
return selections;
|
|
3944
|
+
};
|
|
3945
|
+
const parseSelection = () => {
|
|
3946
|
+
if (isPunct("...")) {
|
|
3947
|
+
pos++;
|
|
3948
|
+
const t3 = peek();
|
|
3949
|
+
if (t3?.type === "name" && t3.value !== "on") {
|
|
3950
|
+
pos++;
|
|
3951
|
+
skipDirectives();
|
|
3952
|
+
return { kind: "spread", name: t3.value };
|
|
3953
|
+
}
|
|
3954
|
+
let on = null;
|
|
3955
|
+
if (t3?.type === "name") {
|
|
3956
|
+
pos++;
|
|
3957
|
+
on = expectName();
|
|
3958
|
+
}
|
|
3959
|
+
skipDirectives();
|
|
3960
|
+
return { kind: "inline", on, selections: parseSelectionSet() };
|
|
3961
|
+
}
|
|
3962
|
+
let name = expectName();
|
|
3963
|
+
const key = name;
|
|
3964
|
+
if (isPunct(":")) {
|
|
3965
|
+
pos++;
|
|
3966
|
+
name = expectName();
|
|
3967
|
+
}
|
|
3968
|
+
let hasArgs = false;
|
|
3969
|
+
if (isPunct("(")) {
|
|
3970
|
+
hasArgs = true;
|
|
3971
|
+
skipParens();
|
|
3972
|
+
}
|
|
3973
|
+
skipDirectives();
|
|
3974
|
+
const selections = isPunct("{") ? parseSelectionSet() : null;
|
|
3975
|
+
return { kind: "field", name, key, hasArgs, selections };
|
|
3976
|
+
};
|
|
3977
|
+
const fragments = /* @__PURE__ */ new Map();
|
|
3978
|
+
const operations = [];
|
|
3979
|
+
while (pos < tokens.length) {
|
|
3980
|
+
if (isPunct("{")) {
|
|
3981
|
+
operations.push({ name: null, selections: parseSelectionSet() });
|
|
3982
|
+
continue;
|
|
3983
|
+
}
|
|
3984
|
+
const keyword = expectName();
|
|
3985
|
+
if (keyword === "fragment") {
|
|
3986
|
+
const name = expectName();
|
|
3987
|
+
if (expectName() !== "on") throw new SyntaxError('Expected "on"');
|
|
3988
|
+
const on = expectName();
|
|
3989
|
+
skipDirectives();
|
|
3990
|
+
fragments.set(name, { on, selections: parseSelectionSet() });
|
|
3991
|
+
} else if (keyword === "query" || keyword === "mutation" || keyword === "subscription") {
|
|
3992
|
+
const t3 = peek();
|
|
3993
|
+
let name = null;
|
|
3994
|
+
if (t3?.type === "name") name = expectName();
|
|
3995
|
+
if (isPunct("(")) skipParens();
|
|
3996
|
+
skipDirectives();
|
|
3997
|
+
operations.push({ name, selections: parseSelectionSet() });
|
|
3998
|
+
} else {
|
|
3999
|
+
throw new SyntaxError(`Unexpected "${keyword}"`);
|
|
4000
|
+
}
|
|
4001
|
+
}
|
|
4002
|
+
return { operation: pickOperation(operations, operationName), fragments };
|
|
4003
|
+
}
|
|
4004
|
+
function pickOperation(operations, operationName) {
|
|
4005
|
+
const op = operationName ? operations.find((o2) => o2.name === operationName) : operations[0];
|
|
4006
|
+
if (!op) throw new SyntaxError("The document has no operation");
|
|
4007
|
+
return op.selections;
|
|
4008
|
+
}
|
|
4009
|
+
function fromAstSelections(set) {
|
|
4010
|
+
return set.selections.map((s2) => {
|
|
4011
|
+
if (s2.kind === "FragmentSpread")
|
|
4012
|
+
return { kind: "spread", name: s2.name.value };
|
|
4013
|
+
if (s2.kind === "InlineFragment") {
|
|
4014
|
+
return {
|
|
4015
|
+
kind: "inline",
|
|
4016
|
+
on: s2.typeCondition?.name.value ?? null,
|
|
4017
|
+
selections: fromAstSelections(s2.selectionSet)
|
|
4018
|
+
};
|
|
4019
|
+
}
|
|
4020
|
+
const name = s2.name.value;
|
|
4021
|
+
return {
|
|
4022
|
+
kind: "field",
|
|
4023
|
+
name,
|
|
4024
|
+
key: s2.alias?.value ?? name,
|
|
4025
|
+
hasArgs: Boolean(s2.arguments?.length),
|
|
4026
|
+
selections: s2.selectionSet ? fromAstSelections(s2.selectionSet) : null
|
|
4027
|
+
};
|
|
4028
|
+
});
|
|
4029
|
+
}
|
|
4030
|
+
function fromAst(doc, operationName) {
|
|
4031
|
+
const fragments = /* @__PURE__ */ new Map();
|
|
4032
|
+
const operations = [];
|
|
4033
|
+
for (const def of doc.definitions ?? []) {
|
|
4034
|
+
if (def.kind === "FragmentDefinition" && def.name && def.typeCondition && def.selectionSet) {
|
|
4035
|
+
fragments.set(def.name.value, {
|
|
4036
|
+
on: def.typeCondition.name.value,
|
|
4037
|
+
selections: fromAstSelections(def.selectionSet)
|
|
4038
|
+
});
|
|
4039
|
+
} else if (def.kind === "OperationDefinition" && def.selectionSet) {
|
|
4040
|
+
operations.push({
|
|
4041
|
+
name: def.name?.value ?? null,
|
|
4042
|
+
selections: fromAstSelections(def.selectionSet)
|
|
4043
|
+
});
|
|
4044
|
+
}
|
|
4045
|
+
}
|
|
4046
|
+
return { operation: pickOperation(operations, operationName), fragments };
|
|
4047
|
+
}
|
|
4048
|
+
var astCache = /* @__PURE__ */ new WeakMap();
|
|
4049
|
+
var sourceCache = /* @__PURE__ */ new Map();
|
|
4050
|
+
var SOURCE_CACHE_LIMIT = 200;
|
|
4051
|
+
function readQueryDocument(query, operationName) {
|
|
4052
|
+
const cacheKey = operationName ?? "";
|
|
4053
|
+
if (typeof query === "object" && query !== null && query.kind === "Document") {
|
|
4054
|
+
let byName = astCache.get(query);
|
|
4055
|
+
if (!byName) astCache.set(query, byName = /* @__PURE__ */ new Map());
|
|
4056
|
+
let parsed2 = byName.get(cacheKey);
|
|
4057
|
+
if (!parsed2) {
|
|
4058
|
+
parsed2 = fromAst(
|
|
4059
|
+
query,
|
|
4060
|
+
operationName
|
|
4061
|
+
);
|
|
4062
|
+
byName.set(cacheKey, parsed2);
|
|
4063
|
+
}
|
|
4064
|
+
return parsed2;
|
|
4065
|
+
}
|
|
4066
|
+
const source = String(query);
|
|
4067
|
+
const sourceKey = `${cacheKey}
|
|
4068
|
+
${source}`;
|
|
4069
|
+
let parsed = sourceCache.get(sourceKey);
|
|
4070
|
+
if (!parsed) {
|
|
4071
|
+
parsed = parseSource(source, operationName);
|
|
4072
|
+
if (sourceCache.size >= SOURCE_CACHE_LIMIT) {
|
|
4073
|
+
sourceCache.delete(sourceCache.keys().next().value);
|
|
4074
|
+
}
|
|
4075
|
+
sourceCache.set(sourceKey, parsed);
|
|
4076
|
+
}
|
|
4077
|
+
return parsed;
|
|
4078
|
+
}
|
|
4079
|
+
var fieldsCache = /* @__PURE__ */ new WeakMap();
|
|
4080
|
+
function collectFields(selections, typename, doc, options = {}) {
|
|
4081
|
+
const cacheKey = `${options.strict ? "s" : "l"}:${typename ?? ""}`;
|
|
4082
|
+
let cached = fieldsCache.get(selections);
|
|
4083
|
+
if (!cached) {
|
|
4084
|
+
cached = /* @__PURE__ */ new Map();
|
|
4085
|
+
fieldsCache.set(selections, cached);
|
|
4086
|
+
}
|
|
4087
|
+
const hit = cached.get(cacheKey);
|
|
4088
|
+
if (hit) return hit;
|
|
4089
|
+
const fields = resolveFields(selections, typename, doc, options);
|
|
4090
|
+
cached.set(cacheKey, fields);
|
|
4091
|
+
return fields;
|
|
4092
|
+
}
|
|
4093
|
+
function resolveFields(selections, typename, doc, options) {
|
|
4094
|
+
const exact = /* @__PURE__ */ new Map();
|
|
4095
|
+
const loose = /* @__PURE__ */ new Map();
|
|
4096
|
+
const merged = /* @__PURE__ */ new Map();
|
|
4097
|
+
const walkedMatched = /* @__PURE__ */ new Set();
|
|
4098
|
+
const walkedLoose = /* @__PURE__ */ new Set();
|
|
4099
|
+
const add = (target, s2) => {
|
|
4100
|
+
let field = target.get(s2.key);
|
|
4101
|
+
if (!field) {
|
|
4102
|
+
field = { name: s2.name, key: s2.key, hasArgs: s2.hasArgs, selections: [] };
|
|
4103
|
+
target.set(s2.key, field);
|
|
4104
|
+
merged.set(field, /* @__PURE__ */ new Set());
|
|
4105
|
+
}
|
|
4106
|
+
const done = merged.get(field);
|
|
4107
|
+
if (s2.selections && !done.has(s2.selections)) {
|
|
4108
|
+
done.add(s2.selections);
|
|
4109
|
+
field.selections = [...field.selections, ...s2.selections];
|
|
4110
|
+
}
|
|
4111
|
+
};
|
|
4112
|
+
const applies = (on, list) => conditionMatches(on, typename) || typename !== void 0 && typeConditions(list, doc).includes(typename);
|
|
4113
|
+
const walk = (list, matched) => {
|
|
4114
|
+
for (const s2 of list) {
|
|
4115
|
+
if (s2.kind === "field") {
|
|
4116
|
+
add(matched ? exact : loose, s2);
|
|
4117
|
+
} else if (s2.kind === "inline") {
|
|
4118
|
+
walk(s2.selections, matched && applies(s2.on, s2.selections));
|
|
4119
|
+
} else {
|
|
4120
|
+
const fragment = doc.fragments.get(s2.name);
|
|
4121
|
+
if (!fragment) continue;
|
|
4122
|
+
const asMatched = matched && applies(fragment.on, fragment.selections);
|
|
4123
|
+
if (walkedMatched.has(fragment)) continue;
|
|
4124
|
+
if (!asMatched && walkedLoose.has(fragment)) continue;
|
|
4125
|
+
(asMatched ? walkedMatched : walkedLoose).add(fragment);
|
|
4126
|
+
walk(fragment.selections, asMatched);
|
|
4127
|
+
}
|
|
4128
|
+
}
|
|
4129
|
+
};
|
|
4130
|
+
walk(selections, true);
|
|
4131
|
+
if (!options.strict) {
|
|
4132
|
+
for (const [key, field] of loose) {
|
|
4133
|
+
if (!exact.has(key)) exact.set(key, field);
|
|
4134
|
+
}
|
|
4135
|
+
}
|
|
4136
|
+
return exact;
|
|
4137
|
+
}
|
|
4138
|
+
function conditionMatches(on, typename) {
|
|
4139
|
+
return on === null || typename === void 0 || on === typename;
|
|
4140
|
+
}
|
|
4141
|
+
var conditionsCache = /* @__PURE__ */ new WeakMap();
|
|
4142
|
+
function typeConditions(selections, doc) {
|
|
4143
|
+
const hit = conditionsCache.get(selections);
|
|
4144
|
+
if (hit) return hit;
|
|
4145
|
+
const names = /* @__PURE__ */ new Set();
|
|
4146
|
+
const seen = /* @__PURE__ */ new Set();
|
|
4147
|
+
const walk = (list) => {
|
|
4148
|
+
for (const s2 of list) {
|
|
4149
|
+
if (s2.kind === "inline") {
|
|
4150
|
+
if (s2.on) names.add(s2.on);
|
|
4151
|
+
walk(s2.selections);
|
|
4152
|
+
} else if (s2.kind === "spread") {
|
|
4153
|
+
const fragment = doc.fragments.get(s2.name);
|
|
4154
|
+
if (!fragment || seen.has(fragment)) continue;
|
|
4155
|
+
seen.add(fragment);
|
|
4156
|
+
names.add(fragment.on);
|
|
4157
|
+
walk(fragment.selections);
|
|
4158
|
+
}
|
|
4159
|
+
}
|
|
4160
|
+
};
|
|
4161
|
+
walk(selections);
|
|
4162
|
+
const conditions = [...names];
|
|
4163
|
+
conditionsCache.set(selections, conditions);
|
|
4164
|
+
return conditions;
|
|
4165
|
+
}
|
|
4166
|
+
|
|
4167
|
+
// src/core/live-preview/validate.ts
|
|
4168
|
+
function isScalar(v2) {
|
|
4169
|
+
return typeof v2 === "string" || typeof v2 === "number" || typeof v2 === "boolean";
|
|
4170
|
+
}
|
|
4171
|
+
var MAX_DEPTH = 3;
|
|
4172
|
+
var MAX_ENTRIES = 50;
|
|
4173
|
+
var FORBIDDEN_KEYS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
|
|
4174
|
+
var SAFE_URL = /^https?:\/\//i;
|
|
4175
|
+
var URL_KEY = /^(?:url|href|src|link)$|(?:_url|Url)$/;
|
|
4176
|
+
var URL_IGNORED_ANYWHERE = /[\t\n\r]/g;
|
|
4177
|
+
var SCRIPT_SCHEME = /^(?:javascript|vbscript|data):/i;
|
|
4178
|
+
function isSafeLinkValue(value) {
|
|
4179
|
+
const stripped = value.replace(URL_IGNORED_ANYWHERE, "");
|
|
4180
|
+
let start = 0;
|
|
4181
|
+
while (start < stripped.length && stripped.charCodeAt(start) <= 32) start++;
|
|
4182
|
+
return !SCRIPT_SCHEME.test(stripped.slice(start));
|
|
4183
|
+
}
|
|
4184
|
+
function isUrlKey(key) {
|
|
4185
|
+
return URL_KEY.test(key);
|
|
4186
|
+
}
|
|
4187
|
+
function isSafeKeyValue(key, value) {
|
|
4188
|
+
if (typeof value !== "string") return true;
|
|
4189
|
+
if (key === "url") return SAFE_URL.test(value);
|
|
4190
|
+
return !isUrlKey(key) || isSafeLinkValue(value);
|
|
4191
|
+
}
|
|
4192
|
+
function isLiveValue(v2, depth = 0) {
|
|
4193
|
+
if (v2 === null || isScalar(v2)) return true;
|
|
4194
|
+
if (depth >= MAX_DEPTH) return false;
|
|
4195
|
+
if (Array.isArray(v2)) {
|
|
4196
|
+
return depth === 0 && v2.length <= MAX_ENTRIES && v2.every((entry) => isPlainRecord(entry) && isLiveValue(entry, depth + 1));
|
|
4197
|
+
}
|
|
4198
|
+
if (!isPlainRecord(v2)) return false;
|
|
4199
|
+
const keys = Object.keys(v2);
|
|
4200
|
+
if (keys.length > MAX_ENTRIES) return false;
|
|
4201
|
+
return keys.every((key) => {
|
|
4202
|
+
if (FORBIDDEN_KEYS.has(key)) return false;
|
|
4203
|
+
const value = v2[key];
|
|
4204
|
+
if (!isSafeKeyValue(key, value)) return false;
|
|
4205
|
+
return !Array.isArray(value) && isLiveValue(value, depth + 1);
|
|
4206
|
+
});
|
|
4207
|
+
}
|
|
4208
|
+
function isLiveFieldChange(field, value) {
|
|
4209
|
+
if (!isLiveValue(value)) return false;
|
|
4210
|
+
const name = field.slice(field.lastIndexOf(".") + 1);
|
|
4211
|
+
return typeof value !== "string" || !isUrlKey(name) || isSafeLinkValue(value);
|
|
4212
|
+
}
|
|
4213
|
+
var MAX_LIST_ENTRIES = 200;
|
|
4214
|
+
function parseListEntries(value) {
|
|
4215
|
+
if (!Array.isArray(value) || value.length > MAX_LIST_ENTRIES) return null;
|
|
4216
|
+
const list = [];
|
|
4217
|
+
for (const raw of value) {
|
|
4218
|
+
if (!isPlainRecord(raw) || typeof raw._id !== "string" || !raw._id) {
|
|
4219
|
+
return null;
|
|
4220
|
+
}
|
|
4221
|
+
const entry = { _id: raw._id };
|
|
4222
|
+
if (typeof raw.__typename === "string") entry.__typename = raw.__typename;
|
|
4223
|
+
if (typeof raw.body === "string") entry.body = raw.body;
|
|
4224
|
+
if (typeof raw.format === "string" || raw.format === null) {
|
|
4225
|
+
entry.format = raw.format;
|
|
4226
|
+
}
|
|
4227
|
+
if (typeof raw.typeName === "string" && raw.typeName.length <= 200) {
|
|
4228
|
+
entry.typeName = raw.typeName;
|
|
4229
|
+
}
|
|
4230
|
+
if (raw.fields !== void 0) {
|
|
4231
|
+
if (!isPlainRecord(raw.fields) || !isFieldValue(raw.fields, 0)) {
|
|
4232
|
+
return null;
|
|
4233
|
+
}
|
|
4234
|
+
entry.fields = raw.fields;
|
|
4235
|
+
}
|
|
4236
|
+
list.push(entry);
|
|
4237
|
+
}
|
|
4238
|
+
return list;
|
|
4239
|
+
}
|
|
4240
|
+
function isPlainRecord(v2) {
|
|
4241
|
+
return v2 !== null && typeof v2 === "object" && Object.getPrototypeOf(v2) === Object.prototype;
|
|
4242
|
+
}
|
|
4243
|
+
var MAX_FIELD_DEPTH = 6;
|
|
4244
|
+
var MAX_FIELD_KEYS = 100;
|
|
4245
|
+
function isFieldValue(v2, depth) {
|
|
4246
|
+
if (v2 === null || isScalar(v2)) return true;
|
|
4247
|
+
if (depth >= MAX_FIELD_DEPTH) return false;
|
|
4248
|
+
if (Array.isArray(v2)) {
|
|
4249
|
+
return v2.length <= MAX_ENTRIES && v2.every(
|
|
4250
|
+
(entry) => isScalar(entry) || isPlainRecord(entry) && isFieldValue(entry, depth + 1)
|
|
4251
|
+
);
|
|
4252
|
+
}
|
|
4253
|
+
if (!isPlainRecord(v2)) return false;
|
|
4254
|
+
const keys = Object.keys(v2);
|
|
4255
|
+
if (keys.length > MAX_FIELD_KEYS) return false;
|
|
4256
|
+
return keys.every((key) => {
|
|
4257
|
+
if (FORBIDDEN_KEYS.has(key)) return false;
|
|
4258
|
+
const value = v2[key];
|
|
4259
|
+
if (!isSafeKeyValue(key, value)) return false;
|
|
4260
|
+
return isFieldValue(value, depth + 1);
|
|
4261
|
+
});
|
|
4262
|
+
}
|
|
4263
|
+
var MAX_EDIT_LENGTH = 1e3;
|
|
4264
|
+
function parseEditTarget(raw) {
|
|
4265
|
+
if (!isPlainRecord(raw)) return void 0;
|
|
4266
|
+
const { item, field } = raw;
|
|
4267
|
+
if (typeof item !== "string" || !item || item.length > MAX_EDIT_LENGTH) {
|
|
4268
|
+
return void 0;
|
|
4269
|
+
}
|
|
4270
|
+
if (typeof field !== "string" || !field || field.length > MAX_EDIT_LENGTH) {
|
|
4271
|
+
return void 0;
|
|
4272
|
+
}
|
|
4273
|
+
return { item, field };
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4276
|
+
// src/core/live-preview/normalize-query.ts
|
|
4277
|
+
var debug11 = createScopedLogger("live-preview:normalize");
|
|
4278
|
+
var MAX_LOG_ENTRIES = 500;
|
|
4279
|
+
var MAX_LOG_SOURCE_LENGTH = 1e6;
|
|
4280
|
+
var INDEX_SEGMENT3 = /^\d+$/;
|
|
4281
|
+
var FORBIDDEN_SEGMENTS2 = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
|
|
4282
|
+
var ENVELOPE_KEYS = /* @__PURE__ */ new Set(["data", "errors", "extensions"]);
|
|
4283
|
+
function parsePatchLog(raw) {
|
|
4284
|
+
let value = raw;
|
|
4285
|
+
if (typeof value === "string") {
|
|
4286
|
+
if (!value || value.length > MAX_LOG_SOURCE_LENGTH) return [];
|
|
4287
|
+
try {
|
|
4288
|
+
value = JSON.parse(value);
|
|
4289
|
+
} catch {
|
|
4290
|
+
return [];
|
|
4291
|
+
}
|
|
4292
|
+
}
|
|
4293
|
+
if (!Array.isArray(value)) return [];
|
|
4294
|
+
const log = [];
|
|
4295
|
+
for (const entry of value.slice(-MAX_LOG_ENTRIES)) {
|
|
4296
|
+
if (!isPlainRecord(entry)) continue;
|
|
4297
|
+
const { type, itemId, field } = entry;
|
|
4298
|
+
if (typeof itemId !== "string" || !itemId) continue;
|
|
4299
|
+
if (typeof field !== "string" || !field) continue;
|
|
4300
|
+
if (type === "field" && isLiveFieldChange(field, entry.value)) {
|
|
4301
|
+
const edit = parseEditTarget(entry.edit);
|
|
4302
|
+
log.push(
|
|
4303
|
+
edit ? { type, itemId, field, value: entry.value, edit } : { type, itemId, field, value: entry.value }
|
|
4304
|
+
);
|
|
4305
|
+
} else if (type === "list") {
|
|
4306
|
+
const entries = parseListEntries(entry.entries);
|
|
4307
|
+
if (entries) log.push({ type, itemId, field, entries });
|
|
4308
|
+
}
|
|
4309
|
+
}
|
|
4310
|
+
return log;
|
|
4311
|
+
}
|
|
4312
|
+
function normalizeQuery(query, result, options = {}) {
|
|
4313
|
+
return applyPatchLog(
|
|
4314
|
+
query,
|
|
4315
|
+
result,
|
|
4316
|
+
parsePatchLog(options.log),
|
|
4317
|
+
options.operationName
|
|
4318
|
+
);
|
|
4319
|
+
}
|
|
4320
|
+
function applyPatchLog(query, result, log, operationName) {
|
|
4321
|
+
if (!log.length || result === null || typeof result !== "object") {
|
|
4322
|
+
return result;
|
|
4323
|
+
}
|
|
4324
|
+
if (isEnvelope(result)) {
|
|
4325
|
+
const data = applyPatchLog(query, result.data, log, operationName);
|
|
4326
|
+
return data === result.data ? result : { ...result, data };
|
|
4327
|
+
}
|
|
4328
|
+
let doc = null;
|
|
4329
|
+
try {
|
|
4330
|
+
doc = readQueryDocument(query, operationName);
|
|
4331
|
+
} catch (error) {
|
|
4332
|
+
debug11.log("could not read the query; applying fields by literal path", {
|
|
4333
|
+
error: String(error)
|
|
4334
|
+
});
|
|
4335
|
+
}
|
|
4336
|
+
let root = result;
|
|
4337
|
+
let index = null;
|
|
4338
|
+
for (const patch of log) {
|
|
4339
|
+
try {
|
|
4340
|
+
index ?? (index = indexSnapshot(root));
|
|
4341
|
+
const next = applyPatch(root, index, patch, doc, result);
|
|
4342
|
+
if (next !== root) {
|
|
4343
|
+
root = next;
|
|
4344
|
+
if (patch.type === "list" || !isScalarValue(patch.value)) {
|
|
4345
|
+
index = null;
|
|
4346
|
+
}
|
|
4347
|
+
}
|
|
4348
|
+
} catch (error) {
|
|
4349
|
+
debug11.log("could not apply a change", {
|
|
4350
|
+
itemId: patch.itemId,
|
|
4351
|
+
field: patch.field,
|
|
4352
|
+
error: String(error)
|
|
4353
|
+
});
|
|
4354
|
+
}
|
|
4355
|
+
}
|
|
4356
|
+
return root;
|
|
4357
|
+
}
|
|
4358
|
+
function isScalarValue(value) {
|
|
4359
|
+
return value === null || typeof value !== "object";
|
|
4360
|
+
}
|
|
4361
|
+
function applyPatch(root, index, patch, doc, result) {
|
|
4362
|
+
const ownerPaths = index.get(patch.itemId);
|
|
4363
|
+
if (!ownerPaths?.length) return root;
|
|
4364
|
+
const segments = patch.field.split(".");
|
|
4365
|
+
if (segments.some((s2) => !s2 || FORBIDDEN_SEGMENTS2.has(s2))) return root;
|
|
4366
|
+
const targets = [];
|
|
4367
|
+
for (const ownerPath of ownerPaths) {
|
|
4368
|
+
if (doc) {
|
|
4369
|
+
const resolved = resolveTargets(root, doc, ownerPath, segments);
|
|
4370
|
+
root = resolved.root;
|
|
4371
|
+
targets.push(...resolved.targets);
|
|
4372
|
+
} else {
|
|
4373
|
+
targets.push([...ownerPath, ...segments.map(toPathSegment)]);
|
|
4374
|
+
}
|
|
4375
|
+
}
|
|
4376
|
+
if (!targets.length) {
|
|
4377
|
+
debug11.log("no field in the query matches", {
|
|
4378
|
+
itemId: patch.itemId,
|
|
4379
|
+
field: patch.field
|
|
4380
|
+
});
|
|
4381
|
+
return root;
|
|
4382
|
+
}
|
|
4383
|
+
if (patch.type === "field") {
|
|
4384
|
+
for (const target of targets) {
|
|
4385
|
+
let value = keepEditLink(readAtPath(root, target), patch.value);
|
|
4386
|
+
if (patch.edit && typeof value === "string" && !(0, import_stega6.vercelStegaSplit)(value).encoded) {
|
|
4387
|
+
value = editLinksFor(result, patch.edit.item)?.encode(
|
|
4388
|
+
value,
|
|
4389
|
+
patch.edit.field
|
|
4390
|
+
) ?? value;
|
|
4391
|
+
}
|
|
4392
|
+
root = writeAtPath(root, target, value);
|
|
4393
|
+
}
|
|
4394
|
+
} else {
|
|
4395
|
+
for (const target of targets) {
|
|
4396
|
+
const selections = doc ? selectionsAt(root, doc, target) : null;
|
|
4397
|
+
const build = doc && selections ? (entry) => buildEntry(doc, selections, entry, {
|
|
4398
|
+
links: editLinks(result, entry),
|
|
4399
|
+
lists: listKeysIn(result)
|
|
4400
|
+
}) : void 0;
|
|
4401
|
+
root = syncListAtPath(root, target, patch.entries, build);
|
|
4402
|
+
}
|
|
4403
|
+
}
|
|
4404
|
+
return root;
|
|
4405
|
+
}
|
|
4406
|
+
function readAtPath(root, path) {
|
|
4407
|
+
let node = root;
|
|
4408
|
+
for (const step of path) {
|
|
4409
|
+
if (node === null || typeof node !== "object") return void 0;
|
|
4410
|
+
node = node[step];
|
|
4411
|
+
}
|
|
4412
|
+
return node;
|
|
4413
|
+
}
|
|
4414
|
+
function isEnvelope(value) {
|
|
4415
|
+
if (Array.isArray(value) || !("data" in value)) return false;
|
|
4416
|
+
return Object.keys(value).every((key) => ENVELOPE_KEYS.has(key));
|
|
4417
|
+
}
|
|
4418
|
+
function toPathSegment(segment) {
|
|
4419
|
+
return INDEX_SEGMENT3.test(segment) ? Number(segment) : segment;
|
|
4420
|
+
}
|
|
4421
|
+
function typenameOf(node) {
|
|
4422
|
+
const typename = node.__typename;
|
|
4423
|
+
return typeof typename === "string" ? typename : void 0;
|
|
4424
|
+
}
|
|
4425
|
+
function selectionsAt(root, doc, path) {
|
|
4426
|
+
let node = root;
|
|
4427
|
+
let selections = doc.operation;
|
|
4428
|
+
for (const step of path) {
|
|
4429
|
+
if (Array.isArray(node)) {
|
|
4430
|
+
node = node[step];
|
|
4431
|
+
continue;
|
|
4432
|
+
}
|
|
4433
|
+
if (node === null || typeof node !== "object") return null;
|
|
4434
|
+
const field = collectFields(selections, typenameOf(node), doc).get(
|
|
4435
|
+
String(step)
|
|
4436
|
+
);
|
|
4437
|
+
if (!field) return null;
|
|
4438
|
+
selections = field.selections;
|
|
4439
|
+
node = node[String(step)];
|
|
4440
|
+
}
|
|
4441
|
+
return selections;
|
|
4442
|
+
}
|
|
4443
|
+
function resolveTargets(root, doc, ownerPath, segments) {
|
|
4444
|
+
let owner = root;
|
|
4445
|
+
for (const step of ownerPath) {
|
|
4446
|
+
owner = owner[step];
|
|
4447
|
+
}
|
|
4448
|
+
const selections = selectionsAt(root, doc, ownerPath);
|
|
4449
|
+
if (!selections) return { root, targets: [] };
|
|
4450
|
+
let current = root;
|
|
4451
|
+
const out = [];
|
|
4452
|
+
const walk = (node, sel, i2, path) => {
|
|
4453
|
+
if (i2 === segments.length) {
|
|
4454
|
+
out.push(path);
|
|
4455
|
+
return;
|
|
4456
|
+
}
|
|
4457
|
+
const segment = segments[i2];
|
|
4458
|
+
if (Array.isArray(node)) {
|
|
4459
|
+
if (INDEX_SEGMENT3.test(segment)) {
|
|
4460
|
+
const position = Number(segment);
|
|
4461
|
+
if (position < node.length) {
|
|
4462
|
+
walk(node[position], sel, i2 + 1, [...path, position]);
|
|
4463
|
+
}
|
|
4464
|
+
} else if (segment === "items") {
|
|
4465
|
+
walk(node, sel, i2 + 1, path);
|
|
4466
|
+
}
|
|
4467
|
+
return;
|
|
4468
|
+
}
|
|
4469
|
+
if (node === null || typeof node !== "object") return;
|
|
4470
|
+
const record = node;
|
|
4471
|
+
const wanted = graphqlFieldName(segment);
|
|
4472
|
+
let matched = false;
|
|
4473
|
+
for (const field of collectFields(sel, typenameOf(node), doc).values()) {
|
|
4474
|
+
if (field.name !== segment && field.name !== wanted) continue;
|
|
4475
|
+
if (!Object.prototype.hasOwnProperty.call(record, field.key)) continue;
|
|
4476
|
+
matched = true;
|
|
4477
|
+
const fieldPath = [...path, field.key];
|
|
4478
|
+
let value = record[field.key];
|
|
4479
|
+
const next = segments[i2 + 1];
|
|
4480
|
+
if (value === null && field.selections.length && next !== void 0 && next !== "items" && !INDEX_SEGMENT3.test(next)) {
|
|
4481
|
+
const typename = resolveTypename(
|
|
4482
|
+
doc,
|
|
4483
|
+
field.selections,
|
|
4484
|
+
void 0,
|
|
4485
|
+
void 0
|
|
4486
|
+
);
|
|
4487
|
+
if (typename !== void 0) {
|
|
4488
|
+
value = fillObject(doc, field.selections, typename, {}, void 0, {
|
|
4489
|
+
links: null,
|
|
4490
|
+
lists: listKeysIn(root)
|
|
4491
|
+
});
|
|
4492
|
+
current = writeAtPath(current, fieldPath, value);
|
|
4493
|
+
}
|
|
4494
|
+
}
|
|
4495
|
+
walk(value, field.selections, i2 + 1, fieldPath);
|
|
4496
|
+
}
|
|
4497
|
+
if (!matched && segment === "items") walk(node, sel, i2 + 1, path);
|
|
4498
|
+
};
|
|
4499
|
+
walk(owner, selections, 0, ownerPath);
|
|
4500
|
+
return { root: current, targets: out };
|
|
4501
|
+
}
|
|
4502
|
+
var NON_ALPHANUMERIC = /[^a-z0-9]/gi;
|
|
4503
|
+
var typeKey = (name) => name.replace(NON_ALPHANUMERIC, "").toLowerCase();
|
|
4504
|
+
function resolveTypename(doc, selections, typename, typeName) {
|
|
4505
|
+
const known = typeConditions(selections, doc);
|
|
4506
|
+
const explicit = typeof typename === "string" ? typename : void 0;
|
|
4507
|
+
if (!known.length) return explicit ?? null;
|
|
4508
|
+
if (explicit && known.includes(explicit)) return explicit;
|
|
4509
|
+
for (const candidate of [explicit, typeName]) {
|
|
4510
|
+
if (typeof candidate !== "string" || !candidate) continue;
|
|
4511
|
+
const match = known.find((name) => typeKey(name) === typeKey(candidate));
|
|
4512
|
+
if (match) return match;
|
|
4513
|
+
}
|
|
4514
|
+
const named = explicit !== void 0 || typeof typeName === "string";
|
|
4515
|
+
return known.length === 1 && !named ? known[0] : void 0;
|
|
4516
|
+
}
|
|
4517
|
+
function buildEntry(doc, selections, entry, ctx) {
|
|
4518
|
+
const typename = resolveTypename(
|
|
4519
|
+
doc,
|
|
4520
|
+
selections,
|
|
4521
|
+
entry.__typename,
|
|
4522
|
+
entry.typeName
|
|
4523
|
+
);
|
|
4524
|
+
if (typename === void 0) return void 0;
|
|
4525
|
+
return fillObject(
|
|
4526
|
+
doc,
|
|
4527
|
+
selections,
|
|
4528
|
+
typename,
|
|
4529
|
+
entry.fields ?? {},
|
|
4530
|
+
entry._id,
|
|
4531
|
+
ctx
|
|
4532
|
+
);
|
|
4533
|
+
}
|
|
4534
|
+
function fillObject(doc, selections, typename, values, id, ctx) {
|
|
4535
|
+
const out = {};
|
|
4536
|
+
const { links } = ctx;
|
|
4537
|
+
const lists = ctx.lists(typename);
|
|
4538
|
+
const edit = isPlainRecord(values.__edit) ? values.__edit : null;
|
|
4539
|
+
const apiIdOf = /* @__PURE__ */ new Map();
|
|
4540
|
+
for (const key of Object.keys(values)) {
|
|
4541
|
+
apiIdOf.set(key, key);
|
|
4542
|
+
const name = graphqlFieldName(key);
|
|
4543
|
+
if (!apiIdOf.has(name)) apiIdOf.set(name, key);
|
|
4544
|
+
}
|
|
4545
|
+
if (edit && isPlainRecord(edit.apiIds)) {
|
|
4546
|
+
for (const [name, apiId] of Object.entries(edit.apiIds)) {
|
|
4547
|
+
if (typeof apiId === "string") apiIdOf.set(name, apiId);
|
|
4548
|
+
}
|
|
4549
|
+
}
|
|
4550
|
+
const valueOf = (name) => {
|
|
4551
|
+
if (Object.prototype.hasOwnProperty.call(values, name)) return values[name];
|
|
4552
|
+
const key = apiIdOf.get(name);
|
|
4553
|
+
return key !== void 0 && key in values ? values[key] : void 0;
|
|
4554
|
+
};
|
|
4555
|
+
const editField = (name) => {
|
|
4556
|
+
if (!edit) return null;
|
|
4557
|
+
if (typeof edit.field === "string")
|
|
4558
|
+
return name === "body" ? edit.field : null;
|
|
4559
|
+
if (typeof edit.path !== "string") return null;
|
|
4560
|
+
const apiId = apiIdOf.get(name) ?? name;
|
|
4561
|
+
const text = Array.isArray(edit.text) ? edit.text : [];
|
|
4562
|
+
if (!text.includes(apiId) && !text.includes(name)) return null;
|
|
4563
|
+
return `${edit.path}.items.${apiId}`;
|
|
4564
|
+
};
|
|
4565
|
+
const fields = collectFields(selections, typename ?? void 0, doc, {
|
|
4566
|
+
strict: true
|
|
4567
|
+
});
|
|
4568
|
+
for (const field of fields.values()) {
|
|
4569
|
+
if (field.name === "__typename") {
|
|
4570
|
+
out[field.key] = typename;
|
|
4571
|
+
} else if (field.name === "_id") {
|
|
4572
|
+
out[field.key] = typeof id === "string" ? id : values._id ?? null;
|
|
4573
|
+
} else if (field.selections.length) {
|
|
4574
|
+
const value = valueOf(field.name);
|
|
4575
|
+
out[field.key] = value == null && lists.has(field.key) ? [] : fillNested(doc, field.selections, value, ctx);
|
|
4576
|
+
} else {
|
|
4577
|
+
const value = valueOf(field.name);
|
|
4578
|
+
if (Array.isArray(value) && value.every(isScalarItem)) {
|
|
4579
|
+
out[field.key] = value;
|
|
4580
|
+
continue;
|
|
4581
|
+
}
|
|
4582
|
+
if (value == null && lists.has(field.key)) {
|
|
4583
|
+
out[field.key] = [];
|
|
4584
|
+
continue;
|
|
4585
|
+
}
|
|
4586
|
+
const scalar = value === void 0 || value !== null && typeof value === "object" ? null : value;
|
|
4587
|
+
const target = typeof scalar === "string" ? editField(field.name) : null;
|
|
4588
|
+
out[field.key] = target && links ? links.encode(scalar, target) : scalar;
|
|
4589
|
+
}
|
|
4590
|
+
}
|
|
4591
|
+
return out;
|
|
4592
|
+
}
|
|
4593
|
+
function fillNested(doc, selections, value, ctx) {
|
|
4594
|
+
const one = (item) => {
|
|
4595
|
+
if (!isPlainRecord(item)) return null;
|
|
4596
|
+
const typename = resolveTypename(
|
|
4597
|
+
doc,
|
|
4598
|
+
selections,
|
|
4599
|
+
item.__typename,
|
|
4600
|
+
item.typeName
|
|
4601
|
+
);
|
|
4602
|
+
if (typename === void 0) return null;
|
|
4603
|
+
return fillObject(doc, selections, typename, item, item._id, ctx);
|
|
4604
|
+
};
|
|
4605
|
+
if (Array.isArray(value)) return value.map(one).filter((v2) => v2 !== null);
|
|
4606
|
+
return value === void 0 ? null : one(value);
|
|
4607
|
+
}
|
|
4608
|
+
function isScalarItem(value) {
|
|
4609
|
+
return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
|
|
4610
|
+
}
|
|
4611
|
+
var NO_KEYS = /* @__PURE__ */ new Set();
|
|
4612
|
+
var listKeysCache = /* @__PURE__ */ new WeakMap();
|
|
4613
|
+
function listKeysIn(result) {
|
|
4614
|
+
return (typename) => {
|
|
4615
|
+
if (!typename || result === null || typeof result !== "object") {
|
|
4616
|
+
return NO_KEYS;
|
|
4617
|
+
}
|
|
4618
|
+
let byType = listKeysCache.get(result);
|
|
4619
|
+
if (!byType) {
|
|
4620
|
+
byType = /* @__PURE__ */ new Map();
|
|
4621
|
+
const seen = /* @__PURE__ */ new WeakSet();
|
|
4622
|
+
const walk = (node) => {
|
|
4623
|
+
if (node === null || typeof node !== "object" || seen.has(node)) return;
|
|
4624
|
+
seen.add(node);
|
|
4625
|
+
if (Array.isArray(node)) {
|
|
4626
|
+
node.forEach(walk);
|
|
4627
|
+
return;
|
|
4628
|
+
}
|
|
4629
|
+
const record = node;
|
|
4630
|
+
const type = typeof record.__typename === "string" ? record.__typename : null;
|
|
4631
|
+
for (const [key, value] of Object.entries(record)) {
|
|
4632
|
+
if (type && Array.isArray(value)) {
|
|
4633
|
+
let keys = byType.get(type);
|
|
4634
|
+
if (!keys) byType.set(type, keys = /* @__PURE__ */ new Set());
|
|
4635
|
+
keys.add(key);
|
|
4636
|
+
}
|
|
4637
|
+
walk(value);
|
|
4638
|
+
}
|
|
4639
|
+
};
|
|
4640
|
+
walk(result);
|
|
4641
|
+
listKeysCache.set(result, byType);
|
|
4642
|
+
}
|
|
4643
|
+
return byType.get(typename) ?? NO_KEYS;
|
|
4644
|
+
};
|
|
4645
|
+
}
|
|
4646
|
+
var EDIT_PATH = /\/content\/edit\/[^/?#]+/;
|
|
4647
|
+
function editLinks(result, entry) {
|
|
4648
|
+
const edit = entry.fields?.__edit;
|
|
4649
|
+
if (!isPlainRecord(edit) || typeof edit.item !== "string") return null;
|
|
4650
|
+
return editLinksFor(result, edit.item);
|
|
4651
|
+
}
|
|
4652
|
+
var ITEM_ID = /^[A-Za-z0-9_-]+$/;
|
|
4653
|
+
function editLinksFor(result, item) {
|
|
4654
|
+
if (!ITEM_ID.test(item)) return null;
|
|
4655
|
+
const template = findEditLink(result);
|
|
4656
|
+
if (!template) return null;
|
|
4657
|
+
return {
|
|
4658
|
+
encode(text, field) {
|
|
4659
|
+
if ((0, import_stega6.vercelStegaSplit)(text).encoded) return text;
|
|
4660
|
+
let href;
|
|
4661
|
+
try {
|
|
4662
|
+
href = new URL(template.href);
|
|
4663
|
+
} catch {
|
|
4664
|
+
return text;
|
|
4665
|
+
}
|
|
4666
|
+
href.pathname = href.pathname.replace(
|
|
4667
|
+
EDIT_PATH,
|
|
4668
|
+
() => `/content/edit/${item}`
|
|
4669
|
+
);
|
|
4670
|
+
href.searchParams.set("field", field);
|
|
4671
|
+
const link = href.toString().replace(/%2E/gi, ".").replace(/%2F/gi, "/");
|
|
4672
|
+
return (0, import_stega6.vercelStegaCombine)(text, { origin: template.origin, href: link });
|
|
4673
|
+
}
|
|
4674
|
+
};
|
|
4675
|
+
}
|
|
4676
|
+
var linkCache = /* @__PURE__ */ new WeakMap();
|
|
4677
|
+
function findEditLink(root) {
|
|
4678
|
+
if (root === null || typeof root !== "object") return null;
|
|
4679
|
+
if (linkCache.has(root)) return linkCache.get(root) ?? null;
|
|
4680
|
+
let found = null;
|
|
4681
|
+
const seen = /* @__PURE__ */ new WeakSet();
|
|
4682
|
+
const walk = (node) => {
|
|
4683
|
+
if (found) return;
|
|
4684
|
+
if (typeof node === "string") {
|
|
4685
|
+
if (!(0, import_stega6.vercelStegaSplit)(node).encoded) return;
|
|
4686
|
+
try {
|
|
4687
|
+
const decoded = (0, import_stega6.vercelStegaDecode)(node);
|
|
4688
|
+
if (typeof decoded?.origin === "string" && typeof decoded.href === "string" && EDIT_PATH.test(decoded.href)) {
|
|
4689
|
+
found = { origin: decoded.origin, href: decoded.href };
|
|
4690
|
+
}
|
|
4691
|
+
} catch {
|
|
4692
|
+
}
|
|
4693
|
+
return;
|
|
4694
|
+
}
|
|
4695
|
+
if (node === null || typeof node !== "object" || seen.has(node)) return;
|
|
4696
|
+
seen.add(node);
|
|
4697
|
+
for (const value of Object.values(node)) walk(value);
|
|
4698
|
+
};
|
|
4699
|
+
walk(root);
|
|
4700
|
+
linkCache.set(root, found);
|
|
4701
|
+
return found;
|
|
4702
|
+
}
|
|
4703
|
+
|
|
4704
|
+
// src/core/live-preview/bridge-events.ts
|
|
4705
|
+
var debug12 = createScopedLogger("live-preview:bridge");
|
|
4706
|
+
function createLiveBridge(store, options = {}) {
|
|
4707
|
+
let parentOrigin = null;
|
|
4708
|
+
const onMessage = (evt) => {
|
|
4709
|
+
const data = evt?.data;
|
|
4710
|
+
if (data?.event === "prepr:initVE" && !parentOrigin) {
|
|
4711
|
+
if (isAllowedEditorOrigin(evt.origin, options.allowedEditorOrigins?.())) {
|
|
4712
|
+
parentOrigin = evt.origin;
|
|
4713
|
+
} else {
|
|
4714
|
+
debug12.warn("ignored live preview handshake from origin", evt.origin);
|
|
4715
|
+
}
|
|
4716
|
+
return;
|
|
4717
|
+
}
|
|
4718
|
+
const trusted = parentOrigin ?? getTrustedParentOrigin();
|
|
4719
|
+
if (!trusted || evt.origin !== trusted) return;
|
|
4720
|
+
if (data?.event === "prepr:fieldChange") {
|
|
4721
|
+
if (typeof data.itemId === "string" && typeof data.field === "string" && data.field && isLiveFieldChange(data.field, data.value)) {
|
|
4722
|
+
const edit = parseEditTarget(data.edit);
|
|
4723
|
+
if (edit) store.pushPatch(data.itemId, data.field, data.value, edit);
|
|
4724
|
+
else store.pushPatch(data.itemId, data.field, data.value);
|
|
4725
|
+
} else {
|
|
4726
|
+
debug12.log("dropped malformed fieldChange", data);
|
|
4727
|
+
}
|
|
4728
|
+
return;
|
|
4729
|
+
}
|
|
4730
|
+
if (data?.event === "prepr:listChange") {
|
|
4731
|
+
const list = parseListEntries(data.entries);
|
|
4732
|
+
if (typeof data.itemId === "string" && typeof data.field === "string" && data.field && list) {
|
|
4733
|
+
store.pushList(data.itemId, data.field, list);
|
|
4734
|
+
} else {
|
|
4735
|
+
debug12.log("dropped malformed listChange", data);
|
|
4736
|
+
}
|
|
4737
|
+
return;
|
|
4738
|
+
}
|
|
4739
|
+
if (data?.event === "prepr:itemChanged") {
|
|
4740
|
+
if (typeof data.itemId === "string") {
|
|
4741
|
+
store.invalidate(data.itemId);
|
|
4742
|
+
} else {
|
|
4743
|
+
debug12.log("dropped malformed itemChanged", data);
|
|
4744
|
+
}
|
|
4745
|
+
}
|
|
4746
|
+
};
|
|
4747
|
+
return {
|
|
4748
|
+
start() {
|
|
4749
|
+
window.addEventListener("message", onMessage);
|
|
4750
|
+
sendPreprEvent(
|
|
4751
|
+
"live_ready",
|
|
4752
|
+
options.strictMode?.() ? { strictMode: true } : void 0,
|
|
4753
|
+
{ allowUntrustedTarget: true }
|
|
4754
|
+
);
|
|
4755
|
+
},
|
|
4756
|
+
stop() {
|
|
4757
|
+
window.removeEventListener("message", onMessage);
|
|
4758
|
+
}
|
|
4759
|
+
};
|
|
4760
|
+
}
|
|
4761
|
+
|
|
4762
|
+
// src/core/live-preview/live-store.ts
|
|
4763
|
+
var debug13 = createScopedLogger("live-preview");
|
|
4764
|
+
var INVALIDATE_DEBOUNCE_MS = 150;
|
|
4765
|
+
var MAX_LOG_ENTRIES2 = 500;
|
|
4766
|
+
function withPatch(log, patch) {
|
|
4767
|
+
let previous = -1;
|
|
4768
|
+
for (let i2 = log.length - 1; i2 >= 0; i2--) {
|
|
4769
|
+
const p2 = log[i2];
|
|
4770
|
+
if (p2.type === patch.type && p2.itemId === patch.itemId && p2.field === patch.field) {
|
|
4771
|
+
previous = i2;
|
|
4772
|
+
break;
|
|
4773
|
+
}
|
|
4774
|
+
}
|
|
4775
|
+
if (previous === -1) return [...log, patch];
|
|
4776
|
+
const since = log.slice(previous + 1);
|
|
4777
|
+
const listPrefix = `${patch.field}.`;
|
|
4778
|
+
const dependsOnPosition = since.some(
|
|
4779
|
+
(p2) => p2.type === "list" || patch.type === "list" && p2.itemId === patch.itemId && p2.field.startsWith(listPrefix)
|
|
4780
|
+
);
|
|
4781
|
+
if (dependsOnPosition) return [...log, patch];
|
|
4782
|
+
return [...log.slice(0, previous), ...since, patch];
|
|
4783
|
+
}
|
|
4784
|
+
function createLiveStore(options = {}) {
|
|
4785
|
+
const accepts = (patch) => options.accept ? options.accept(patch) : true;
|
|
4786
|
+
const entries = /* @__PURE__ */ new Set();
|
|
4787
|
+
const invalidateListeners = /* @__PURE__ */ new Set();
|
|
4788
|
+
const pendingInvalidates = /* @__PURE__ */ new Map();
|
|
4789
|
+
let defaultFetcher = null;
|
|
4790
|
+
let log = [];
|
|
4791
|
+
const logListeners = /* @__PURE__ */ new Set();
|
|
4792
|
+
function record(patch) {
|
|
4793
|
+
log = withPatch(log, patch).slice(-MAX_LOG_ENTRIES2);
|
|
4794
|
+
logListeners.forEach((fn) => fn(log));
|
|
4795
|
+
}
|
|
4796
|
+
function notify(entry) {
|
|
4797
|
+
entry.listeners.forEach((fn) => fn());
|
|
4798
|
+
}
|
|
4799
|
+
async function refetch(entry) {
|
|
4800
|
+
const fetcher = entry.opts.fetcher ?? defaultFetcher;
|
|
4801
|
+
if (!fetcher || entry.opts.query == null) return;
|
|
4802
|
+
const token = ++entry.fetchToken;
|
|
4803
|
+
try {
|
|
4804
|
+
const result = await fetcher(entry.opts.query, entry.opts.variables);
|
|
4805
|
+
if (token !== entry.fetchToken || !entries.has(entry)) return;
|
|
4806
|
+
entry.snapshot = result;
|
|
4807
|
+
entry.index = indexSnapshot(result);
|
|
4808
|
+
notify(entry);
|
|
4809
|
+
} catch (error) {
|
|
4810
|
+
debug13.log("refetch failed, keeping previous snapshot", error);
|
|
4811
|
+
}
|
|
4812
|
+
}
|
|
4813
|
+
function runInvalidate(itemId) {
|
|
4814
|
+
pendingInvalidates.delete(itemId);
|
|
4815
|
+
invalidateListeners.forEach((fn) => fn(itemId));
|
|
4816
|
+
for (const entry of entries) {
|
|
4817
|
+
if (entry.index.has(itemId)) void refetch(entry);
|
|
4818
|
+
}
|
|
4819
|
+
}
|
|
4820
|
+
return {
|
|
4821
|
+
register(data, opts = {}) {
|
|
4822
|
+
const entry = {
|
|
4823
|
+
snapshot: data,
|
|
4824
|
+
index: indexSnapshot(data),
|
|
4825
|
+
opts,
|
|
4826
|
+
listeners: /* @__PURE__ */ new Set(),
|
|
4827
|
+
fetchToken: 0
|
|
4828
|
+
};
|
|
4829
|
+
for (const patch of log) {
|
|
4830
|
+
if (patch.type === "field") {
|
|
4831
|
+
entry.snapshot = patchSnapshot(
|
|
4832
|
+
entry.snapshot,
|
|
4833
|
+
entry.index,
|
|
4834
|
+
patch.itemId,
|
|
4835
|
+
patch.field,
|
|
4836
|
+
patch.value
|
|
4837
|
+
);
|
|
4838
|
+
} else {
|
|
4839
|
+
const next = syncListSnapshot(
|
|
4840
|
+
entry.snapshot,
|
|
4841
|
+
entry.index,
|
|
4842
|
+
patch.itemId,
|
|
4843
|
+
patch.field,
|
|
4844
|
+
patch.entries
|
|
4845
|
+
);
|
|
4846
|
+
if (next !== entry.snapshot) {
|
|
4847
|
+
entry.snapshot = next;
|
|
4848
|
+
entry.index = indexSnapshot(next);
|
|
4849
|
+
}
|
|
4850
|
+
}
|
|
4851
|
+
}
|
|
4852
|
+
entries.add(entry);
|
|
4853
|
+
return {
|
|
4854
|
+
getSnapshot: () => entry.snapshot,
|
|
4855
|
+
subscribe(fn) {
|
|
4856
|
+
entry.listeners.add(fn);
|
|
4857
|
+
return () => entry.listeners.delete(fn);
|
|
4858
|
+
},
|
|
4859
|
+
unregister() {
|
|
4860
|
+
entry.listeners.clear();
|
|
4861
|
+
entries.delete(entry);
|
|
4862
|
+
}
|
|
4863
|
+
};
|
|
4864
|
+
},
|
|
4865
|
+
pushPatch(itemId, field, value, edit) {
|
|
4866
|
+
const patch = edit ? { type: "field", itemId, field, value, edit } : { type: "field", itemId, field, value };
|
|
4867
|
+
if (!accepts(patch)) return;
|
|
4868
|
+
record(patch);
|
|
4869
|
+
for (const entry of entries) {
|
|
4870
|
+
const next = patchSnapshot(
|
|
4871
|
+
entry.snapshot,
|
|
4872
|
+
entry.index,
|
|
4873
|
+
itemId,
|
|
4874
|
+
field,
|
|
4875
|
+
value
|
|
4876
|
+
);
|
|
4877
|
+
if (next !== entry.snapshot) {
|
|
4878
|
+
entry.snapshot = next;
|
|
4879
|
+
notify(entry);
|
|
4880
|
+
}
|
|
4881
|
+
}
|
|
4882
|
+
},
|
|
4883
|
+
pushList(itemId, field, list) {
|
|
4884
|
+
const patch = { type: "list", itemId, field, entries: list };
|
|
4885
|
+
if (!accepts(patch)) return;
|
|
4886
|
+
record(patch);
|
|
4887
|
+
for (const entry of entries) {
|
|
4888
|
+
const next = syncListSnapshot(
|
|
4889
|
+
entry.snapshot,
|
|
4890
|
+
entry.index,
|
|
4891
|
+
itemId,
|
|
4892
|
+
field,
|
|
4893
|
+
list
|
|
4894
|
+
);
|
|
4895
|
+
if (next !== entry.snapshot) {
|
|
4896
|
+
entry.snapshot = next;
|
|
4897
|
+
entry.index = indexSnapshot(next);
|
|
4898
|
+
notify(entry);
|
|
4899
|
+
}
|
|
4900
|
+
}
|
|
4901
|
+
},
|
|
4902
|
+
invalidate(itemId) {
|
|
4903
|
+
if (log.length) {
|
|
4904
|
+
log = [];
|
|
4905
|
+
logListeners.forEach((fn) => fn(log));
|
|
4906
|
+
}
|
|
4907
|
+
const pending = pendingInvalidates.get(itemId);
|
|
4908
|
+
if (pending) clearTimeout(pending);
|
|
4909
|
+
pendingInvalidates.set(
|
|
4910
|
+
itemId,
|
|
4911
|
+
setTimeout(() => runInvalidate(itemId), INVALIDATE_DEBOUNCE_MS)
|
|
4912
|
+
);
|
|
4913
|
+
},
|
|
4914
|
+
setFetcher(fetcher) {
|
|
4915
|
+
defaultFetcher = fetcher;
|
|
4916
|
+
},
|
|
4917
|
+
onInvalidate(fn) {
|
|
4918
|
+
invalidateListeners.add(fn);
|
|
4919
|
+
return () => invalidateListeners.delete(fn);
|
|
4920
|
+
},
|
|
4921
|
+
getLog: () => log,
|
|
4922
|
+
onLogChange(fn) {
|
|
4923
|
+
logListeners.add(fn);
|
|
4924
|
+
return () => logListeners.delete(fn);
|
|
4925
|
+
}
|
|
4926
|
+
};
|
|
4927
|
+
}
|
|
4928
|
+
|
|
4929
|
+
// src/core/live-preview/morph.ts
|
|
4930
|
+
function morphElement(current, next) {
|
|
4931
|
+
syncAttributes(current, next);
|
|
4932
|
+
morphChildren(current, next);
|
|
4933
|
+
}
|
|
4934
|
+
var SKIP_ATTR = "data-prepr-morph-skip";
|
|
4935
|
+
var RUNTIME_ATTR_PREFIXES = ["data-prepr-"];
|
|
4936
|
+
function isRuntimeAttribute(name) {
|
|
4937
|
+
return RUNTIME_ATTR_PREFIXES.some((prefix) => name.startsWith(prefix));
|
|
4938
|
+
}
|
|
4939
|
+
function syncAttributes(current, next) {
|
|
4940
|
+
for (const { name } of Array.from(current.attributes)) {
|
|
4941
|
+
if (!next.hasAttribute(name) && !isRuntimeAttribute(name)) {
|
|
4942
|
+
current.removeAttribute(name);
|
|
4943
|
+
}
|
|
4944
|
+
}
|
|
4945
|
+
for (const { name, value } of Array.from(next.attributes)) {
|
|
4946
|
+
if (current.getAttribute(name) !== value) current.setAttribute(name, value);
|
|
4947
|
+
}
|
|
4948
|
+
}
|
|
4949
|
+
function isSkipped(node) {
|
|
4950
|
+
return node.nodeType === Node.ELEMENT_NODE && (node.hasAttribute(SKIP_ATTR) || node.localName === "prepr-toolbar");
|
|
4951
|
+
}
|
|
4952
|
+
function sameKind(a2, b2) {
|
|
4953
|
+
if (a2.nodeType !== b2.nodeType) return false;
|
|
4954
|
+
if (a2.nodeType !== Node.ELEMENT_NODE) return true;
|
|
4955
|
+
const ea = a2;
|
|
4956
|
+
const eb = b2;
|
|
4957
|
+
return ea.localName === eb.localName && ea.id === eb.id;
|
|
4958
|
+
}
|
|
4959
|
+
function morphChildren(current, next) {
|
|
4960
|
+
const wanted = Array.from(next.childNodes).filter((n2) => !isSkipped(n2));
|
|
4961
|
+
const existing = Array.from(current.childNodes).filter((n2) => !isSkipped(n2));
|
|
4962
|
+
wanted.forEach((target, i2) => {
|
|
4963
|
+
const node = existing[i2];
|
|
4964
|
+
if (node && sameKind(node, target)) {
|
|
4965
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
4966
|
+
const element = node;
|
|
4967
|
+
if (element.localName === "script") return;
|
|
4968
|
+
if (element.localName === "astro-island" && !element.isEqualNode(target)) {
|
|
4969
|
+
element.replaceWith(adopt(target, current));
|
|
4970
|
+
return;
|
|
4971
|
+
}
|
|
4972
|
+
morphElement(element, target);
|
|
4973
|
+
} else if (node.nodeValue !== target.nodeValue) {
|
|
4974
|
+
node.nodeValue = target.nodeValue;
|
|
4975
|
+
}
|
|
4976
|
+
return;
|
|
4977
|
+
}
|
|
4978
|
+
const replacement = adopt(target, current);
|
|
4979
|
+
if (node) node.replaceWith(replacement);
|
|
4980
|
+
else current.appendChild(replacement);
|
|
4981
|
+
});
|
|
4982
|
+
for (const extra of existing.slice(wanted.length)) extra.remove();
|
|
4983
|
+
}
|
|
4984
|
+
function adopt(node, parent) {
|
|
4985
|
+
const copy = parent.ownerDocument.importNode(node, true);
|
|
4986
|
+
if (copy.nodeType === Node.ELEMENT_NODE) {
|
|
4987
|
+
const element = copy;
|
|
4988
|
+
const scripts = element.localName === "script" ? [element] : Array.from(element.querySelectorAll("script"));
|
|
4989
|
+
scripts.forEach((s2) => s2.setAttribute("data-prepr-morphed", ""));
|
|
4990
|
+
}
|
|
4991
|
+
return copy;
|
|
4992
|
+
}
|
|
4993
|
+
|
|
4994
|
+
// src/core/live-preview/html-live.ts
|
|
4995
|
+
var debug14 = createScopedLogger("live-preview:html");
|
|
4996
|
+
var COMPLETE_DOCUMENT = /<\/html>\s*$/i;
|
|
4997
|
+
var SYNC_DEBOUNCE_MS = 150;
|
|
4998
|
+
function startHtmlLivePreview(options = {}) {
|
|
4999
|
+
if (typeof window === "undefined" || window.self === window.top) {
|
|
5000
|
+
return { stop() {
|
|
5001
|
+
} };
|
|
5002
|
+
}
|
|
5003
|
+
const store = createLiveStore();
|
|
5004
|
+
const bridge = createLiveBridge(store, {
|
|
5005
|
+
allowedEditorOrigins: () => options.allowedEditorOrigins,
|
|
5006
|
+
strictMode: () => options.strictMode
|
|
5007
|
+
});
|
|
5008
|
+
bridge.start();
|
|
5009
|
+
let timer = null;
|
|
5010
|
+
let inFlight = false;
|
|
5011
|
+
let pending = null;
|
|
5012
|
+
let stopped = false;
|
|
5013
|
+
const render = async (log) => {
|
|
5014
|
+
inFlight = true;
|
|
5015
|
+
try {
|
|
5016
|
+
const response = await fetch(window.location.href, {
|
|
5017
|
+
method: log.length ? "POST" : "GET",
|
|
5018
|
+
headers: log.length ? { "Content-Type": "application/json", [HEADER_LIVE_RENDER]: "1" } : {},
|
|
5019
|
+
body: log.length ? JSON.stringify({ log }) : void 0,
|
|
5020
|
+
credentials: "same-origin",
|
|
5021
|
+
cache: "no-store"
|
|
5022
|
+
});
|
|
5023
|
+
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
5024
|
+
const html = await response.text();
|
|
5025
|
+
if (stopped) return;
|
|
5026
|
+
if (!COMPLETE_DOCUMENT.test(html)) {
|
|
5027
|
+
throw new Error("incomplete page; a component failed to render");
|
|
5028
|
+
}
|
|
5029
|
+
const next = new DOMParser().parseFromString(html, "text/html");
|
|
5030
|
+
if (next.title && next.title !== document.title)
|
|
5031
|
+
document.title = next.title;
|
|
5032
|
+
morphElement(document.body, next.body);
|
|
5033
|
+
} catch (error) {
|
|
5034
|
+
debug14.log("re-render failed", error);
|
|
5035
|
+
} finally {
|
|
5036
|
+
inFlight = false;
|
|
5037
|
+
}
|
|
5038
|
+
if (pending && !stopped) {
|
|
5039
|
+
const queued = pending;
|
|
5040
|
+
pending = null;
|
|
5041
|
+
void render(queued);
|
|
5042
|
+
}
|
|
5043
|
+
};
|
|
5044
|
+
const schedule = (log) => {
|
|
5045
|
+
if (timer) clearTimeout(timer);
|
|
5046
|
+
timer = setTimeout(() => {
|
|
5047
|
+
timer = null;
|
|
5048
|
+
if (inFlight) pending = log;
|
|
5049
|
+
else void render(log);
|
|
5050
|
+
}, SYNC_DEBOUNCE_MS);
|
|
5051
|
+
};
|
|
5052
|
+
const offLog = store.onLogChange((log) => {
|
|
5053
|
+
if (log.length) schedule(log);
|
|
5054
|
+
});
|
|
5055
|
+
const offInvalidate = store.onInvalidate(() => schedule([]));
|
|
5056
|
+
return {
|
|
5057
|
+
stop() {
|
|
5058
|
+
stopped = true;
|
|
5059
|
+
if (timer) clearTimeout(timer);
|
|
5060
|
+
offLog();
|
|
5061
|
+
offInvalidate();
|
|
5062
|
+
bridge.stop();
|
|
5063
|
+
}
|
|
5064
|
+
};
|
|
5065
|
+
}
|
|
5066
|
+
|
|
5067
|
+
// src/core/live-preview/live-request.ts
|
|
5068
|
+
var MAX_BODY_BYTES = 1e6;
|
|
5069
|
+
async function readLiveLogFromRequest(request) {
|
|
5070
|
+
try {
|
|
5071
|
+
if (request.method !== "POST") return [];
|
|
5072
|
+
if (request.headers.get(HEADER_LIVE_RENDER) !== "1") return [];
|
|
5073
|
+
const origin = request.headers.get("origin");
|
|
5074
|
+
if (!origin || origin !== new URL(request.url).origin) return [];
|
|
5075
|
+
const type = request.headers.get("content-type") ?? "";
|
|
5076
|
+
if (!type.toLowerCase().startsWith("application/json")) return [];
|
|
5077
|
+
const length = Number(request.headers.get("content-length") ?? "0");
|
|
5078
|
+
if (length > MAX_BODY_BYTES) return [];
|
|
5079
|
+
const text = await request.clone().text();
|
|
5080
|
+
if (text.length > MAX_BODY_BYTES) return [];
|
|
5081
|
+
const body = JSON.parse(text);
|
|
5082
|
+
return parsePatchLog(body?.log);
|
|
5083
|
+
} catch {
|
|
5084
|
+
return [];
|
|
5085
|
+
}
|
|
5086
|
+
}
|
|
5087
|
+
|
|
2377
5088
|
// src/core/server.ts
|
|
2378
5089
|
var PreprError = class extends Error {
|
|
2379
5090
|
constructor(message, code, context, originalError) {
|
|
@@ -2772,9 +5483,14 @@ function setTrackingParam(key, value) {
|
|
|
2772
5483
|
getPreprUUIDFromHeaders,
|
|
2773
5484
|
getToolbarPropsFromHeaders,
|
|
2774
5485
|
loadTrackingPixel,
|
|
5486
|
+
normalizeQuery,
|
|
5487
|
+
parsePatchLog,
|
|
5488
|
+
previewAttrs,
|
|
2775
5489
|
processPreprRequest,
|
|
5490
|
+
readLiveLogFromRequest,
|
|
2776
5491
|
resolveFeatures,
|
|
2777
5492
|
setTrackingParam,
|
|
5493
|
+
startHtmlLivePreview,
|
|
2778
5494
|
stegaClean,
|
|
2779
5495
|
trackEvent,
|
|
2780
5496
|
validatePreprToken
|