@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/presentation/contentEntries/preview/PreviewDecorator.js

@@ -0,0 +1,68 @@
+import react, { useEffect } from "react";
+import { createReactiveComponent } from "@webiny/app-admin";
+import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView/SplitView.js";
+import { usePreviewDomain } from "@webiny/frontend-settings/exports/admin.js";
+import { ContentEntryFormContent } from "../views/layout/ContentEntryFormContent.js";
+import { useContentEntryFormPresenter } from "../form/useContentEntryFormPresenter.js";
+import { PreviewPane } from "./PreviewPane.js";
+import { PreviewDomainStatus } from "./PreviewDomainStatus.js";
+import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
+import { getPatternRefFieldIds, getRefValues, withRefValues } from "./resolvePreviewUrl.js";
+const PreviewDecorator = ContentEntryFormContent.createDecorator((Original)=>createReactiveComponent((props)=>{
+        const presenter = useContentEntryFormPresenter();
+        const livePreview = useLivePreviewPresenter();
+        const model = presenter.vm.model;
+        const previewPath = model?.settings?.previewPath;
+        const domain = usePreviewDomain();
+        const form = presenter.vm.form;
+        const entry = presenter.vm.entry;
+        const formValues = form ? form.getData() : null;
+        const entryData = formValues ? {
+            ...entry,
+            values: formValues
+        } : null;
+        const refFieldIds = previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];
+        const refs = formValues ? getRefValues(formValues, refFieldIds) : [];
+        const refsKey = refs.map((ref)=>ref.id).join(",");
+        useEffect(()=>{
+            if (refs.length > 0) livePreview.loadRefValues(refs);
+        }, [
+            refsKey
+        ]);
+        if (!previewPath) return /*#__PURE__*/ react.createElement(Original, props);
+        const urlEntryData = entryData ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues) : null;
+        const entryId = entry?.id || "new";
+        return /*#__PURE__*/ react.createElement(SplitView, {
+            namespace: "cms-live-preview",
+            className: "h-full"
+        }, /*#__PURE__*/ react.createElement(LeftPanel, {
+            span: 5,
+            minSize: 420,
+            className: "bg-white overflow-y-auto"
+        }, /*#__PURE__*/ react.createElement(Original, {
+            ...props,
+            width: "100%",
+            className: "!pt-0 [&>div]:!rounded-none"
+        })), /*#__PURE__*/ react.createElement(RightPanel, {
+            span: 7,
+            minSize: "20%",
+            className: "overflow-hidden p-md",
+            style: {
+                overflowY: "hidden"
+            }
+        }, domain.previewDomain ? /*#__PURE__*/ react.createElement(PreviewPane, {
+            domain: domain.previewDomain,
+            settingsDomain: domain.isOverridden ? domain.settingsDomain : null,
+            onResetDomain: domain.unsetPreviewDomain,
+            previewPath: previewPath,
+            entryId: entryId,
+            entryData: entryData,
+            urlEntryData: urlEntryData
+        }) : /*#__PURE__*/ react.createElement(PreviewDomainStatus, {
+            error: domain.error,
+            onRetry: domain.retry
+        })));
+    }));
+export { PreviewDecorator };
+
+//# sourceMappingURL=PreviewDecorator.js.map

package/presentation/contentEntries/preview/PreviewDecorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDecorator.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDecorator.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel\n} from \"@webiny/app-admin/components/SplitView/SplitView.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ContentEntryFormContent } from \"~/presentation/contentEntries/views/layout/ContentEntryFormContent.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { PreviewPane } from \"./PreviewPane.js\";\nimport { PreviewDomainStatus } from \"./PreviewDomainStatus.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { getPatternRefFieldIds, getRefValues, withRefValues } from \"./resolvePreviewUrl.js\";\n\nexport const PreviewDecorator = ContentEntryFormContent.createDecorator(Original => {\n    return createReactiveComponent(\n        (props: React.HTMLAttributes<HTMLDivElement> & { width?: string }) => {\n            const presenter = useContentEntryFormPresenter();\n            const livePreview = useLivePreviewPresenter();\n            const model = presenter.vm.model;\n            const previewPath = model?.settings?.previewPath as string | undefined;\n            const domain = usePreviewDomain();\n\n            const form = presenter.vm.form;\n            const entry = presenter.vm.entry;\n            const formValues = form ? (form.getData() as Record<string, unknown>) : null;\n            const entryData = formValues ? { ...entry, values: formValues } : null;\n\n            const refFieldIds =\n                previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];\n            const refs = formValues ? getRefValues(formValues, refFieldIds) : [];\n            const refsKey = refs.map(ref => ref.id).join(\",\");\n\n            useEffect(() => {\n                if (refs.length > 0) {\n                    livePreview.loadRefValues(refs);\n                }\n            }, [refsKey]);\n\n            if (!previewPath) {\n                return <Original {...props} />;\n            }\n\n            // Only the preview URL gets the referenced values; the iframe receives the raw form data.\n            const urlEntryData = entryData\n                ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues)\n                : null;\n\n            const entryId = entry?.id || \"new\";\n\n            return (\n                <SplitView namespace={\"cms-live-preview\"} className=\"h-full\">\n                    {/*\n                     * The form keeps at least 420px, so when the comments panel opens beside the\n                     * split, the preview gives up its width first.\n                     */}\n                    <LeftPanel span={5} minSize={420} className=\"bg-white overflow-y-auto\">\n                        <Original\n                            {...props}\n                            width={\"100%\"}\n                            className={\"!pt-0 [&>div]:!rounded-none\"}\n                        />\n                    </LeftPanel>\n                    <RightPanel\n                        span={7}\n                        minSize={\"20%\"}\n                        className=\"overflow-hidden p-md\"\n                        style={{ overflowY: \"hidden\" }}\n                    >\n                        {domain.previewDomain ? (\n                            <PreviewPane\n                                domain={domain.previewDomain}\n                                settingsDomain={domain.isOverridden ? domain.settingsDomain : null}\n                                onResetDomain={domain.unsetPreviewDomain}\n                                previewPath={previewPath}\n                                entryId={entryId}\n                                entryData={entryData}\n                                urlEntryData={urlEntryData}\n                            />\n                        ) : (\n                            <PreviewDomainStatus error={domain.error} onRetry={domain.retry} />\n                        )}\n                    </RightPanel>\n                </SplitView>\n            );\n        }\n    );\n});\n"],"names":["PreviewDecorator","ContentEntryFormContent","Original","createReactiveComponent","props","presenter","useContentEntryFormPresenter","livePreview","useLivePreviewPresenter","model","previewPath","domain","usePreviewDomain","form","entry","formValues","entryData","refFieldIds","getPatternRefFieldIds","refs","getRefValues","refsKey","ref","useEffect","urlEntryData","withRefValues","entryId","SplitView","LeftPanel","RightPanel","PreviewPane","PreviewDomainStatus"],"mappings":";;;;;;;;;;AAeO,MAAMA,mBAAmBC,wBAAwB,eAAe,CAACC,CAAAA,WAC7DC,wBACH,CAACC;QACG,MAAMC,YAAYC;QAClB,MAAMC,cAAcC;QACpB,MAAMC,QAAQJ,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMK,cAAcD,OAAO,UAAU;QACrC,MAAME,SAASC;QAEf,MAAMC,OAAOR,UAAU,EAAE,CAAC,IAAI;QAC9B,MAAMS,QAAQT,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMU,aAAaF,OAAQA,KAAK,OAAO,KAAiC;QACxE,MAAMG,YAAYD,aAAa;YAAE,GAAGD,KAAK;YAAE,QAAQC;QAAW,IAAI;QAElE,MAAME,cACFP,eAAeD,QAAQS,sBAAsBR,aAAaD,MAAM,MAAM,IAAI,EAAE;QAChF,MAAMU,OAAOJ,aAAaK,aAAaL,YAAYE,eAAe,EAAE;QACpE,MAAMI,UAAUF,KAAK,GAAG,CAACG,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7CC,UAAU;YACN,IAAIJ,KAAK,MAAM,GAAG,GACdZ,YAAY,aAAa,CAACY;QAElC,GAAG;YAACE;SAAQ;QAEZ,IAAI,CAACX,aACD,OAAO,WAAP,GAAO,oBAACR,UAAaE;QAIzB,MAAMoB,eAAeR,YACfS,cAAcT,WAAWC,aAAaV,YAAY,EAAE,CAAC,SAAS,IAC9D;QAEN,MAAMmB,UAAUZ,OAAO,MAAM;QAE7B,OAAO,WAAP,GACI,oBAACa,WAASA;YAAC,WAAW;YAAoB,WAAU;yBAKhD,oBAACC,WAASA;YAAC,MAAM;YAAG,SAAS;YAAK,WAAU;yBACxC,oBAAC1B,UAAAA;YACI,GAAGE,KAAK;YACT,OAAO;YACP,WAAW;2BAGnB,oBAACyB,YAAUA;YACP,MAAM;YACN,SAAS;YACT,WAAU;YACV,OAAO;gBAAE,WAAW;YAAS;WAE5BlB,OAAO,aAAa,GAAG,WAAH,GACjB,oBAACmB,aAAWA;YACR,QAAQnB,OAAO,aAAa;YAC5B,gBAAgBA,OAAO,YAAY,GAAGA,OAAO,cAAc,GAAG;YAC9D,eAAeA,OAAO,kBAAkB;YACxC,aAAaD;YACb,SAASgB;YACT,WAAWV;YACX,cAAcQ;2BAGlB,oBAACO,qBAAmBA;YAAC,OAAOpB,OAAO,KAAK;YAAE,SAASA,OAAO,KAAK;;IAKnF"}

package/presentation/contentEntries/preview/PreviewDomainStatus.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface PreviewDomainStatusProps {
+    error: string | null;
+    onRetry: () => void;
+}
+/**
+ * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.
+ */
+export declare const PreviewDomainStatus: ({ error, onRetry }: PreviewDomainStatusProps) => React.JSX.Element;
+export {};

package/presentation/contentEntries/preview/PreviewDomainStatus.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { Alert, OverlayLoader } from "@webiny/admin-ui";
+const PreviewDomainStatus = ({ error, onRetry })=>/*#__PURE__*/ react.createElement("div", {
+        className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid"
+    }, error ? /*#__PURE__*/ react.createElement("div", {
+        className: "p-md"
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "danger",
+        variant: "subtle",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Retry",
+            onClick: onRetry
+        })
+    }, "Could not load the Frontend Domain setting, so the live preview cannot start. ", error)) : /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading preview settings..."
+    }));
+export { PreviewDomainStatus };
+
+//# sourceMappingURL=PreviewDomainStatus.js.map

package/presentation/contentEntries/preview/PreviewDomainStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDomainStatus.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDomainStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert, OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface PreviewDomainStatusProps {\n    error: string | null;\n    onRetry: () => void;\n}\n\n/**\n * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.\n */\nexport const PreviewDomainStatus = ({ error, onRetry }: PreviewDomainStatusProps) => {\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid\">\n            {error ? (\n                <div className=\"p-md\">\n                    <Alert\n                        type={\"danger\"}\n                        variant={\"subtle\"}\n                        actions={<Alert.Action text={\"Retry\"} onClick={onRetry} />}\n                    >\n                        Could not load the Frontend Domain setting, so the live preview cannot\n                        start. {error}\n                    </Alert>\n                </div>\n            ) : (\n                <OverlayLoader text=\"Loading preview settings...\" />\n            )}\n        </div>\n    );\n};\n"],"names":["PreviewDomainStatus","error","onRetry","Alert","OverlayLoader"],"mappings":";;AAWO,MAAMA,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAA4B,GACrE,WAAP,GACI,oBAAC;QAAI,WAAU;OACVD,QAAQ,WAARA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACE,OAAKA;QACF,MAAM;QACN,SAAS;QACT,uBAAS,oBAACA,MAAM,MAAM;YAAC,MAAM;YAAS,SAASD;;OAClD,kFAEWD,UAAAA,WAAAA,GAIhB,oBAACG,eAAaA;QAAC,MAAK"}

package/presentation/contentEntries/preview/PreviewPane.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface PreviewPaneProps {
+    domain: string;
+    /**
+     * The Frontend Domain setting, passed only when the user overrides it with their own preview domain.
+     */
+    settingsDomain: string | null;
+    onResetDomain: () => void;
+    previewPath: string;
+    entryId: string;
+    entryData: Record<string, unknown> | null;
+    /**
+     * Entry data used to resolve the preview path, with referenced entries' values filled in.
+     */
+    urlEntryData: Record<string, unknown> | null;
+}
+export declare const PreviewPane: ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData }: PreviewPaneProps) => React.JSX.Element;
+export {};

package/presentation/contentEntries/preview/PreviewPane.js

@@ -0,0 +1,217 @@
+import react, { useCallback, useEffect, useRef, useState } from "react";
+import { MessageOrigin, Messenger } from "@webiny/cms-sdk/messenger";
+import { jsonPatch } from "@webiny/cms-sdk";
+import { Alert, CopyButton, IconButton, OverlayLoader, SegmentedControl, Text, Tooltip, useToast } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/refresh.svg";
+import { ReactComponent as laptop_svg_ReactComponent } from "@webiny/icons/laptop.svg";
+import { ReactComponent as smartphone_svg_ReactComponent } from "@webiny/icons/smartphone.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { PreviewDomainMenu } from "@webiny/frontend-settings/exports/admin.js";
+import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
+import { buildDisplayUrl, buildEditorUrl } from "./resolvePreviewUrl.js";
+const READY_TIMEOUT_MS = 20000;
+const PreviewPane = ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData })=>{
+    const iframeRef = useRef(null);
+    const messengerRef = useRef(null);
+    const entryDataRef = useRef(entryData);
+    const lastSentDataRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [timedOut, setTimedOut] = useState(false);
+    const [iframeKey, setIframeKey] = useState(0);
+    const [viewport, setViewport] = useState("desktop");
+    const presenter = useLivePreviewPresenter();
+    const { showToast } = useToast();
+    entryDataRef.current = entryData;
+    const displayUrl = buildDisplayUrl(domain, previewPath, urlEntryData || {});
+    const iframeSrc = (()=>{
+        const editorPath = buildEditorUrl(domain, previewPath);
+        const url = new URL(editorPath);
+        url.searchParams.set("wb.editing", "true");
+        url.searchParams.set("wb.type", "entry");
+        url.searchParams.set("wb.id", entryId);
+        url.searchParams.set("wb.path", url.pathname);
+        url.searchParams.set("wb.referrer", window.location.origin);
+        return url.toString();
+    })();
+    const sendEntryData = useCallback(()=>{
+        const data = entryDataRef.current;
+        if (!data || !messengerRef.current) return;
+        const serialized = JSON.parse(JSON.stringify(data));
+        messengerRef.current.send("document.set", serialized);
+        lastSentDataRef.current = serialized;
+    }, []);
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe || !iframe.contentWindow) return;
+        const targetOrigin = new URL(iframe.src).origin;
+        const editorOrigin = new MessageOrigin(()=>window, window.location.origin);
+        const previewTarget = new MessageOrigin(()=>iframe.contentWindow, targetOrigin);
+        const messenger = new Messenger(editorOrigin, previewTarget, "wb.editor.*");
+        messengerRef.current = messenger;
+        setLoading(true);
+        setTimedOut(false);
+        const timeout = setTimeout(()=>setTimedOut(true), READY_TIMEOUT_MS);
+        messenger.on("preview.ready", ()=>{
+            clearTimeout(timeout);
+            setReady(true);
+            setLoading(false);
+            setTimedOut(false);
+            sendEntryData();
+        });
+        messenger.on("preview.component.register", (manifest)=>{
+            presenter.addComponent(manifest);
+        });
+        return ()=>{
+            clearTimeout(timeout);
+            messenger.dispose();
+            messengerRef.current = null;
+            lastSentDataRef.current = null;
+            setReady(false);
+        };
+    }, [
+        iframeSrc,
+        presenter,
+        iframeKey,
+        sendEntryData
+    ]);
+    useEffect(()=>{
+        if (!ready || !entryData || !messengerRef.current) return;
+        const current = JSON.parse(JSON.stringify(entryData));
+        const previous = lastSentDataRef.current;
+        if (previous) {
+            const patch = jsonPatch.compare(previous, current);
+            if (patch.length > 0) messengerRef.current.send("document.patch", patch);
+        } else messengerRef.current.send("document.set", current);
+        lastSentDataRef.current = current;
+    }, [
+        ready,
+        entryData
+    ]);
+    const reload = useCallback(()=>{
+        setLoading(true);
+        setReady(false);
+        lastSentDataRef.current = null;
+        setIframeKey((prev)=>prev + 1);
+    }, []);
+    const getDraftUrl = useCallback(()=>{
+        const url = new URL(displayUrl);
+        url.searchParams.set("wb.type", "entry");
+        url.searchParams.set("wb.path", url.pathname);
+        url.searchParams.set("wb.preview", "true");
+        url.searchParams.set("wb.id", entryId);
+        return url.toString();
+    }, [
+        displayUrl,
+        entryId
+    ]);
+    const confirmCopy = useCallback(()=>{
+        showToast({
+            title: "Preview link copied to clipboard!"
+        });
+    }, []);
+    const openInNewTab = useCallback(()=>{
+        window.open(getDraftUrl(), "_blank");
+    }, [
+        getDraftUrl
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center gap-sm p-sm bg-neutral-base border-b-sm border-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "relative flex-auto min-w-0 h-[32px]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full absolute -top-px py-xs-plus pl-xl pr-[112px] border-sm text-md truncate cursor-not-allowed rounded-md border-neutral-subtle bg-neutral-disabled text-neutral-disabled"
+    }, /*#__PURE__*/ react.createElement(PreviewDomainMenu, {
+        className: "absolute left-0 top-0"
+    }), displayUrl), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute right-0 top-0 flex"
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Refresh preview"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "md",
+            onClick: reload,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Copy preview link"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(CopyButton, {
+            size: "md",
+            value: getDraftUrl(),
+            onCopy: confirmCopy,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Preview entry in a new tab"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+            size: "md",
+            onClick: openInNewTab,
+            variant: "ghost"
+        })
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+        value: viewport,
+        onChange: (value)=>setViewport(value),
+        items: [
+            {
+                value: "desktop",
+                label: "",
+                icon: /*#__PURE__*/ react.createElement(laptop_svg_ReactComponent, null)
+            },
+            {
+                value: "mobile",
+                label: "",
+                icon: /*#__PURE__*/ react.createElement(smartphone_svg_ReactComponent, null)
+            }
+        ]
+    }))), settingsDomain ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Use Frontend Domain",
+            onClick: onResetDomain
+        })
+    }, "Previewing on your custom domain ", domain, " instead of the Frontend Domain", " ", settingsDomain, ".") : null, loading && timedOut ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reload",
+            onClick: reload
+        })
+    }, new URL(iframeSrc).origin, " is not responding to the live preview. Check that the frontend app is running at that address, that it initializes the Webiny SDK in editing mode, and that it allows this admin app as a referrer.") : null, /*#__PURE__*/ react.createElement("div", {
+        className: "relative block box-border h-full w-full overflow-auto fill-grid"
+    }, loading && !timedOut ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Connecting to Live Preview..."
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: `mx-auto h-full transition-all duration-300 ${"mobile" === viewport ? "p-md" : ""}`,
+        style: {
+            width: "mobile" === viewport ? "375px" : "100%"
+        }
+    }, /*#__PURE__*/ react.createElement("iframe", {
+        key: iframeKey,
+        ref: iframeRef,
+        src: iframeSrc,
+        width: "100%",
+        height: "100%",
+        className: "h-full",
+        sandbox: "allow-same-origin allow-scripts allow-forms"
+    }))));
+};
+export { PreviewPane };
+
+//# sourceMappingURL=PreviewPane.js.map

package/presentation/contentEntries/preview/PreviewPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewPane.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewPane.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState } from \"react\";\nimport { Messenger, MessageOrigin } from \"@webiny/cms-sdk/messenger\";\nimport { jsonPatch } from \"@webiny/cms-sdk\";\nimport {\n    Alert,\n    CopyButton,\n    IconButton,\n    OverlayLoader,\n    SegmentedControl,\n    Text,\n    Tooltip,\n    useToast\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\nimport { ReactComponent as LaptopIcon } from \"@webiny/icons/laptop.svg\";\nimport { ReactComponent as SmartphoneIcon } from \"@webiny/icons/smartphone.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { PreviewDomainMenu } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { buildEditorUrl, buildDisplayUrl } from \"./resolvePreviewUrl.js\";\n\n/**\n * How long to wait for the frontend to report it is ready before showing troubleshooting hints.\n */\nconst READY_TIMEOUT_MS = 20_000;\n\ninterface PreviewPaneProps {\n    domain: string;\n    /**\n     * The Frontend Domain setting, passed only when the user overrides it with their own preview domain.\n     */\n    settingsDomain: string | null;\n    onResetDomain: () => void;\n    previewPath: string;\n    entryId: string;\n    entryData: Record<string, unknown> | null;\n    /**\n     * Entry data used to resolve the preview path, with referenced entries' values filled in.\n     */\n    urlEntryData: Record<string, unknown> | null;\n}\n\ntype ViewportMode = \"desktop\" | \"mobile\";\n\nexport const PreviewPane = ({\n    domain,\n    settingsDomain,\n    onResetDomain,\n    previewPath,\n    entryId,\n    entryData,\n    urlEntryData\n}: PreviewPaneProps) => {\n    const iframeRef = useRef<HTMLIFrameElement | null>(null);\n    const messengerRef = useRef<Messenger | null>(null);\n    const entryDataRef = useRef(entryData);\n    const lastSentDataRef = useRef<Record<string, unknown> | null>(null);\n    const [ready, setReady] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [timedOut, setTimedOut] = useState(false);\n    const [iframeKey, setIframeKey] = useState(0);\n    const [viewport, setViewport] = useState<ViewportMode>(\"desktop\");\n    const presenter = useLivePreviewPresenter();\n    const { showToast } = useToast();\n\n    entryDataRef.current = entryData;\n\n    const displayUrl = buildDisplayUrl(domain, previewPath, urlEntryData || {});\n\n    const iframeSrc = (() => {\n        const editorPath = buildEditorUrl(domain, previewPath);\n        const url = new URL(editorPath);\n        url.searchParams.set(\"wb.editing\", \"true\");\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.id\", entryId);\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.referrer\", window.location.origin);\n        return url.toString();\n    })();\n\n    const sendEntryData = useCallback(() => {\n        const data = entryDataRef.current;\n        if (!data || !messengerRef.current) {\n            return;\n        }\n\n        const serialized = JSON.parse(JSON.stringify(data));\n        messengerRef.current.send(\"document.set\", serialized);\n        lastSentDataRef.current = serialized;\n    }, []);\n\n    useEffect(() => {\n        const iframe = iframeRef.current;\n        if (!iframe || !iframe.contentWindow) {\n            return;\n        }\n\n        const targetOrigin = new URL(iframe.src).origin;\n        const editorOrigin = new MessageOrigin(() => window, window.location.origin);\n        const previewTarget = new MessageOrigin(() => iframe.contentWindow!, targetOrigin);\n\n        const messenger = new Messenger(editorOrigin, previewTarget, \"wb.editor.*\");\n        messengerRef.current = messenger;\n\n        setLoading(true);\n        setTimedOut(false);\n        const timeout = setTimeout(() => setTimedOut(true), READY_TIMEOUT_MS);\n\n        messenger.on(\"preview.ready\", () => {\n            clearTimeout(timeout);\n            setReady(true);\n            setLoading(false);\n            setTimedOut(false);\n            sendEntryData();\n        });\n\n        messenger.on(\n            \"preview.component.register\",\n            (manifest: { name: string; label: string; description: string }) => {\n                presenter.addComponent(manifest);\n            }\n        );\n\n        return () => {\n            clearTimeout(timeout);\n            messenger.dispose();\n            messengerRef.current = null;\n            lastSentDataRef.current = null;\n            setReady(false);\n        };\n    }, [iframeSrc, presenter, iframeKey, sendEntryData]);\n\n    useEffect(() => {\n        if (!ready || !entryData || !messengerRef.current) {\n            return;\n        }\n\n        const current = JSON.parse(JSON.stringify(entryData));\n        const previous = lastSentDataRef.current;\n\n        if (previous) {\n            const patch = jsonPatch.compare(previous, current);\n            if (patch.length > 0) {\n                messengerRef.current.send(\"document.patch\", patch);\n            }\n        } else {\n            messengerRef.current.send(\"document.set\", current);\n        }\n\n        lastSentDataRef.current = current;\n    }, [ready, entryData]);\n\n    const reload = useCallback(() => {\n        setLoading(true);\n        setReady(false);\n        lastSentDataRef.current = null;\n        setIframeKey(prev => prev + 1);\n    }, []);\n\n    const getDraftUrl = useCallback(() => {\n        const url = new URL(displayUrl);\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.id\", entryId);\n        return url.toString();\n    }, [displayUrl, entryId]);\n\n    const confirmCopy = useCallback(() => {\n        showToast({ title: \"Preview link copied to clipboard!\" });\n    }, []);\n\n    const openInNewTab = useCallback(() => {\n        window.open(getDraftUrl(), \"_blank\");\n    }, [getDraftUrl]);\n\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden\">\n            <div className=\"flex flex-row items-center gap-sm p-sm bg-neutral-base border-b-sm border-neutral-dimmed\">\n                <div className=\"relative flex-auto min-w-0 h-[32px]\">\n                    <div className=\"w-full absolute -top-px py-xs-plus pl-xl pr-[112px] border-sm text-md truncate cursor-not-allowed rounded-md border-neutral-subtle bg-neutral-disabled text-neutral-disabled\">\n                        <PreviewDomainMenu className={\"absolute left-0 top-0\"} />\n                        {displayUrl}\n                    </div>\n                    <div className=\"absolute right-0 top-0 flex\">\n                        <Tooltip\n                            content={<Text size=\"md\">Refresh preview</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <IconButton\n                                    icon={<RefreshIcon />}\n                                    size=\"md\"\n                                    onClick={reload}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                        <Tooltip\n                            content={<Text size=\"md\">Copy preview link</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <CopyButton\n                                    size=\"md\"\n                                    value={getDraftUrl()}\n                                    onCopy={confirmCopy}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                        <Tooltip\n                            content={<Text size=\"md\">Preview entry in a new tab</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <IconButton\n                                    icon={<OpenInNewIcon />}\n                                    size=\"md\"\n                                    onClick={openInNewTab}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                    </div>\n                </div>\n                <div className=\"shrink-0\">\n                    <SegmentedControl\n                        value={viewport}\n                        onChange={(value: string) => setViewport(value as ViewportMode)}\n                        items={[\n                            { value: \"desktop\", label: \"\", icon: <LaptopIcon /> },\n                            { value: \"mobile\", label: \"\", icon: <SmartphoneIcon /> }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            {settingsDomain ? (\n                <Alert\n                    type={\"warning\"}\n                    variant={\"subtle\"}\n                    className={\"rounded-none\"}\n                    actions={<Alert.Action text={\"Use Frontend Domain\"} onClick={onResetDomain} />}\n                >\n                    Previewing on your custom domain {domain} instead of the Frontend Domain{\" \"}\n                    {settingsDomain}.\n                </Alert>\n            ) : null}\n\n            {loading && timedOut ? (\n                <Alert\n                    type={\"warning\"}\n                    variant={\"subtle\"}\n                    className={\"rounded-none\"}\n                    actions={<Alert.Action text={\"Reload\"} onClick={reload} />}\n                >\n                    {new URL(iframeSrc).origin} is not responding to the live preview. Check that\n                    the frontend app is running at that address, that it initializes the Webiny SDK\n                    in editing mode, and that it allows this admin app as a referrer.\n                </Alert>\n            ) : null}\n\n            <div className=\"relative block box-border h-full w-full overflow-auto fill-grid\">\n                {loading && !timedOut ? (\n                    <OverlayLoader text=\"Connecting to Live Preview...\" />\n                ) : null}\n                <div\n                    className={`mx-auto h-full transition-all duration-300 ${viewport === \"mobile\" ? \"p-md\" : \"\"}`}\n                    style={{ width: viewport === \"mobile\" ? \"375px\" : \"100%\" }}\n                >\n                    <iframe\n                        key={iframeKey}\n                        ref={iframeRef}\n                        src={iframeSrc}\n                        width=\"100%\"\n                        height=\"100%\"\n                        className=\"h-full\"\n                        sandbox=\"allow-same-origin allow-scripts allow-forms\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["READY_TIMEOUT_MS","PreviewPane","domain","settingsDomain","onResetDomain","previewPath","entryId","entryData","urlEntryData","iframeRef","useRef","messengerRef","entryDataRef","lastSentDataRef","ready","setReady","useState","loading","setLoading","timedOut","setTimedOut","iframeKey","setIframeKey","viewport","setViewport","presenter","useLivePreviewPresenter","showToast","useToast","displayUrl","buildDisplayUrl","iframeSrc","editorPath","buildEditorUrl","url","URL","window","sendEntryData","useCallback","data","serialized","JSON","useEffect","iframe","targetOrigin","editorOrigin","MessageOrigin","previewTarget","messenger","Messenger","timeout","setTimeout","clearTimeout","manifest","current","previous","patch","jsonPatch","reload","prev","getDraftUrl","confirmCopy","openInNewTab","PreviewDomainMenu","Tooltip","Text","IconButton","RefreshIcon","CopyButton","OpenInNewIcon","SegmentedControl","value","LaptopIcon","SmartphoneIcon","Alert","OverlayLoader"],"mappings":"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"}

package/presentation/contentEntries/preview/abstractions.d.ts

@@ -0,0 +1,24 @@
+import type { CmsReferenceValue } from "../../../features/contentEntry/refTypes.js";
+import type { RefValuesMap } from "./resolvePreviewUrl.js";
+export interface PreviewComponent {
+    name: string;
+    label: string;
+    description: string;
+}
+export interface ILivePreviewPresenter {
+    vm: {
+        components: PreviewComponent[];
+        refValues: RefValuesMap;
+    };
+    addComponent(component: PreviewComponent): void;
+    clearComponents(): void;
+    /**
+     * Loads referenced entries that the preview path reads through, e.g. `{values.location.slug}`.
+     * Each ref is requested once; results land in `vm.refValues`.
+     */
+    loadRefValues(refs: CmsReferenceValue[]): void;
+}
+export declare const LivePreviewPresenter: import("@webiny/di").Abstraction<ILivePreviewPresenter>;
+export declare namespace LivePreviewPresenter {
+    type Interface = ILivePreviewPresenter;
+}

package/presentation/contentEntries/preview/abstractions.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const LivePreviewPresenter = createAbstraction("CmsContentEntries/LivePreviewPresenter");
+export { LivePreviewPresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/contentEntries/preview/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/abstractions.js","sources":["../../../../src/presentation/contentEntries/preview/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefValuesMap } from \"./resolvePreviewUrl.js\";\n\nexport interface PreviewComponent {\n    name: string;\n    label: string;\n    description: string;\n}\n\nexport interface ILivePreviewPresenter {\n    vm: {\n        components: PreviewComponent[];\n        refValues: RefValuesMap;\n    };\n    addComponent(component: PreviewComponent): void;\n    clearComponents(): void;\n    /**\n     * Loads referenced entries that the preview path reads through, e.g. `{values.location.slug}`.\n     * Each ref is requested once; results land in `vm.refValues`.\n     */\n    loadRefValues(refs: CmsReferenceValue[]): void;\n}\n\nexport const LivePreviewPresenter = createAbstraction<ILivePreviewPresenter>(\n    \"CmsContentEntries/LivePreviewPresenter\"\n);\n\nexport namespace LivePreviewPresenter {\n    export type Interface = ILivePreviewPresenter;\n}\n"],"names":["LivePreviewPresenter","createAbstraction"],"mappings":";AAwBO,MAAMA,uBAAuBC,kBAChC"}

package/presentation/contentEntries/preview/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const LivePreviewFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").ILivePreviewPresenter;
+}, []>;

package/presentation/contentEntries/preview/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { LivePreviewPresenter } from "./abstractions.js";
+import { LivePreviewPresenter as external_LivePreviewPresenter_js_LivePreviewPresenter } from "./LivePreviewPresenter.js";
+const LivePreviewFeature = createFeature({
+    name: "CmsContentEntries/LivePreview",
+    register (container) {
+        container.register(external_LivePreviewPresenter_js_LivePreviewPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(LivePreviewPresenter)
+        };
+    }
+});
+export { LivePreviewFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/contentEntries/preview/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/feature.js","sources":["../../../../src/presentation/contentEntries/preview/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { LivePreviewPresenter as Abstraction } from \"./abstractions.js\";\nimport { LivePreviewPresenter } from \"./LivePreviewPresenter.js\";\n\nexport const LivePreviewFeature = createFeature({\n    name: \"CmsContentEntries/LivePreview\",\n    register(container) {\n        container.register(LivePreviewPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["LivePreviewFeature","createFeature","container","LivePreviewPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,qBAAqBC,cAAc;IAC5C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,uDAAsB,gBAAgB;IAC7D;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/contentEntries/preview/resolvePreviewUrl.d.ts

@@ -0,0 +1,26 @@
+import type { CmsModelField } from "../../../types.js";
+import type { CmsReferenceValue } from "../../../features/contentEntry/refTypes.js";
+type EntryData = Record<string, unknown>;
+/**
+ * Values of loaded referenced entries, keyed by the ref `id`.
+ * `null` marks a ref that failed to load, so it isn't requested again.
+ */
+export type RefValuesMap = Record<string, Record<string, unknown> | null>;
+/**
+ * Returns the ids of ref fields that the pattern reads through,
+ * e.g. `location` for `/{values.location.slug}/{values.slug}`.
+ */
+export declare function getPatternRefFieldIds(pattern: string, fields: Pick<CmsModelField, "fieldId" | "type">[]): string[];
+/**
+ * Collects the ref values held by the given fields, for both single and multiple-value fields.
+ */
+export declare function getRefValues(values: EntryData, refFieldIds: string[]): CmsReferenceValue[];
+/**
+ * Spreads loaded referenced entry values into the ref values, so `{values.location.slug}`
+ * resolves against the referenced entry. Refs that aren't loaded yet are left as they are.
+ */
+export declare function withRefValues(entry: EntryData, refFieldIds: string[], refValues: RefValuesMap): EntryData;
+export declare function resolveSlugPattern(pattern: string, entry: EntryData): string;
+export declare function buildEditorUrl(domain: string, previewPath: string): string;
+export declare function buildDisplayUrl(domain: string, path: string, entry: EntryData): string;
+export {};

package/presentation/contentEntries/preview/resolvePreviewUrl.js

@@ -0,0 +1,81 @@
+function isRefValue(value) {
+    if (!value || "object" != typeof value) return false;
+    const ref = value;
+    return "string" == typeof ref.id && "string" == typeof ref.modelId;
+}
+function getPatternRefFieldIds(pattern, fields) {
+    const refFieldIds = new Set(fields.filter((f)=>"ref" === f.type).map((f)=>f.fieldId));
+    const result = new Set();
+    for (const [, path] of pattern.matchAll(/\{([^}]+)\}/g)){
+        const [root, fieldId, ...rest] = path.split(".");
+        if ("values" === root && rest.length > 0 && refFieldIds.has(fieldId)) result.add(fieldId);
+    }
+    return [
+        ...result
+    ];
+}
+function getRefValues(values, refFieldIds) {
+    const refs = [];
+    for (const fieldId of refFieldIds){
+        const value = values[fieldId];
+        const items = Array.isArray(value) ? value : [
+            value
+        ];
+        refs.push(...items.filter(isRefValue));
+    }
+    return refs;
+}
+function withRefValues(entry, refFieldIds, refValues) {
+    const values = entry.values;
+    if (!values || 0 === refFieldIds.length) return entry;
+    const expand = (value)=>{
+        if (!isRefValue(value) || !refValues[value.id]) return value;
+        return {
+            ...refValues[value.id],
+            ...value
+        };
+    };
+    const expanded = {
+        ...values
+    };
+    for (const fieldId of refFieldIds){
+        const value = values[fieldId];
+        expanded[fieldId] = Array.isArray(value) ? value.map(expand) : expand(value);
+    }
+    return {
+        ...entry,
+        values: expanded
+    };
+}
+function getNestedValue(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts){
+        if (null == current || "object" != typeof current) return;
+        current = current[part];
+    }
+    return current;
+}
+function resolveSlugPattern(pattern, entry) {
+    return pattern.replace(/\{([^}]+)\}/g, (_match, path)=>{
+        const value = getNestedValue(entry, path);
+        if (null != value && "" !== value) return String(value);
+        return "new";
+    });
+}
+function buildEditorUrl(domain, previewPath) {
+    const base = domain.endsWith("/") ? domain.slice(0, -1) : domain;
+    const bracketIndex = previewPath.indexOf("{");
+    const staticPrefix = bracketIndex >= 0 ? previewPath.substring(0, bracketIndex) : previewPath;
+    const trimmed = staticPrefix.endsWith("/") ? staticPrefix.slice(0, -1) : staticPrefix;
+    return `${base}${trimmed}/preview`;
+}
+function buildDisplayUrl(domain, path, entry) {
+    const base = domain.endsWith("/") ? domain.slice(0, -1) : domain;
+    const resolvedPath = resolveSlugPattern(path, entry);
+    const normalizedPath = resolvedPath.startsWith("/") ? resolvedPath : `/${resolvedPath}`;
+    return `${base}${normalizedPath}`;
+}
+export { buildDisplayUrl, buildEditorUrl, getPatternRefFieldIds, getRefValues, resolveSlugPattern, withRefValues };
+
+//# sourceMappingURL=resolvePreviewUrl.js.map

package/presentation/contentEntries/preview/resolvePreviewUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/resolvePreviewUrl.js","sources":["../../../../src/presentation/contentEntries/preview/resolvePreviewUrl.ts"],"sourcesContent":["import type { CmsModelField } from \"~/types.js\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\n\ntype EntryData = Record<string, unknown>;\n\n/**\n * Values of loaded referenced entries, keyed by the ref `id`.\n * `null` marks a ref that failed to load, so it isn't requested again.\n */\nexport type RefValuesMap = Record<string, Record<string, unknown> | null>;\n\nfunction isRefValue(value: unknown): value is CmsReferenceValue {\n    if (!value || typeof value !== \"object\") {\n        return false;\n    }\n    const ref = value as Partial<CmsReferenceValue>;\n    return typeof ref.id === \"string\" && typeof ref.modelId === \"string\";\n}\n\n/**\n * Returns the ids of ref fields that the pattern reads through,\n * e.g. `location` for `/{values.location.slug}/{values.slug}`.\n */\nexport function getPatternRefFieldIds(\n    pattern: string,\n    fields: Pick<CmsModelField, \"fieldId\" | \"type\">[]\n): string[] {\n    const refFieldIds = new Set(fields.filter(f => f.type === \"ref\").map(f => f.fieldId));\n    const result = new Set<string>();\n    for (const [, path] of pattern.matchAll(/\\{([^}]+)\\}/g)) {\n        const [root, fieldId, ...rest] = path.split(\".\");\n        if (root === \"values\" && rest.length > 0 && refFieldIds.has(fieldId)) {\n            result.add(fieldId);\n        }\n    }\n    return [...result];\n}\n\n/**\n * Collects the ref values held by the given fields, for both single and multiple-value fields.\n */\nexport function getRefValues(values: EntryData, refFieldIds: string[]): CmsReferenceValue[] {\n    const refs: CmsReferenceValue[] = [];\n    for (const fieldId of refFieldIds) {\n        const value = values[fieldId];\n        const items = Array.isArray(value) ? value : [value];\n        refs.push(...items.filter(isRefValue));\n    }\n    return refs;\n}\n\n/**\n * Spreads loaded referenced entry values into the ref values, so `{values.location.slug}`\n * resolves against the referenced entry. Refs that aren't loaded yet are left as they are.\n */\nexport function withRefValues(\n    entry: EntryData,\n    refFieldIds: string[],\n    refValues: RefValuesMap\n): EntryData {\n    const values = entry.values as EntryData | undefined;\n    if (!values || refFieldIds.length === 0) {\n        return entry;\n    }\n\n    const expand = (value: unknown) => {\n        if (!isRefValue(value) || !refValues[value.id]) {\n            return value;\n        }\n        return { ...refValues[value.id], ...value };\n    };\n\n    const expanded = { ...values };\n    for (const fieldId of refFieldIds) {\n        const value = values[fieldId];\n        expanded[fieldId] = Array.isArray(value) ? value.map(expand) : expand(value);\n    }\n    return { ...entry, values: expanded };\n}\n\nfunction getNestedValue(obj: EntryData, path: string): unknown {\n    const parts = path.split(\".\");\n    let current: unknown = obj;\n    for (const part of parts) {\n        if (current === null || current === undefined || typeof current !== \"object\") {\n            return undefined;\n        }\n        current = (current as Record<string, unknown>)[part];\n    }\n    return current;\n}\n\nexport function resolveSlugPattern(pattern: string, entry: EntryData): string {\n    return pattern.replace(/\\{([^}]+)\\}/g, (_match, path: string) => {\n        const value = getNestedValue(entry, path);\n        if (value !== null && value !== undefined && value !== \"\") {\n            return String(value);\n        }\n        return \"new\";\n    });\n}\n\nexport function buildEditorUrl(domain: string, previewPath: string): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const bracketIndex = previewPath.indexOf(\"{\");\n    const staticPrefix = bracketIndex >= 0 ? previewPath.substring(0, bracketIndex) : previewPath;\n    const trimmed = staticPrefix.endsWith(\"/\") ? staticPrefix.slice(0, -1) : staticPrefix;\n    return `${base}${trimmed}/preview`;\n}\n\nexport function buildDisplayUrl(domain: string, path: string, entry: EntryData): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const resolvedPath = resolveSlugPattern(path, entry);\n    const normalizedPath = resolvedPath.startsWith(\"/\") ? resolvedPath : `/${resolvedPath}`;\n    return `${base}${normalizedPath}`;\n}\n"],"names":["isRefValue","value","ref","getPatternRefFieldIds","pattern","fields","refFieldIds","Set","f","result","path","root","fieldId","rest","getRefValues","values","refs","items","Array","withRefValues","entry","refValues","expand","expanded","getNestedValue","obj","parts","current","part","resolveSlugPattern","_match","String","buildEditorUrl","domain","previewPath","base","bracketIndex","staticPrefix","trimmed","buildDisplayUrl","resolvedPath","normalizedPath"],"mappings":"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"}

package/presentation/contentEntries/preview/resolvePreviewUrl.test.d.ts

@@ -0,0 +1 @@
+export {};