@parhelia/core 0.1.10745

package/dist/editor/page-viewer/MiniMap.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEditContext } from "../client/editContext";
+import { PlaceholderDropZones } from "../page-editor-chrome/PlaceholderDropZones";
+import { FieldEditedIndicators } from "../page-editor-chrome/FieldEditedIndicators";
+import { CommentHighlightings } from "../page-editor-chrome/CommentHighlightings";
+import { SuggestionHighlightings } from "../page-editor-chrome/SuggestionHighlightings";
+export function MiniMap({ deviceHeight, scroll, mainViewIframeRef, compareView, pageViewContext, }) {
+    const editContext = useEditContext();
+    const [scale, setScale] = React.useState(1);
+    const minimapRef = useRef(null);
+    const scaleContainerRef = useRef(null);
+    const iframeRef = useRef(null);
+    const [minimapReady, setMinimapReady] = React.useState(false);
+    const [refreshScale, setRefreshScale] = React.useState(0);
+    const observerRef = useRef(null);
+    const minimapContainerRef = useRef(null);
+    if (!mainViewIframeRef.current)
+        return;
+    const scrollContainer = mainViewIframeRef.current?.contentWindow?.document.scrollingElement ||
+        mainViewIframeRef.current?.contentWindow?.document.body;
+    const calcAndUpdateScale = () => {
+        const viewport = pageViewContext.viewport;
+        const minimapHeight = minimapContainerRef.current?.clientHeight;
+        if (!viewport || !scrollContainer)
+            return;
+        const width = viewport.width;
+        const scaleX = (editContext?.configuration.outline.width || 100) / width;
+        const scaleY = Math.max(deviceHeight || 0, minimapHeight || viewport.height) /
+            scrollContainer.scrollHeight;
+        const newScale = Math.min(scaleX, scaleY, 1);
+        updateScale(newScale);
+        setScale(newScale);
+        return newScale;
+    };
+    // Prevent scale/width feedback loop by tracking previous values
+    const prevScaleRef = useRef(scale);
+    const prevWidthRef = useRef(0);
+    const miniMapWidth = useMemo(() => {
+        const currentWidth = Math.max(30, scale * (pageViewContext.viewport.width || 0));
+        // Only update if change is significant (>1px) to avoid minor oscillations
+        if (prevWidthRef.current < currentWidth ||
+            (Math.abs(currentWidth - prevWidthRef.current) > 1 &&
+                Math.abs(scale - prevScaleRef.current) > 0.01)) {
+            prevWidthRef.current = currentWidth;
+            prevScaleRef.current = scale;
+            return currentWidth;
+        }
+        return prevWidthRef.current;
+    }, [scale, scrollContainer?.clientWidth, pageViewContext.viewport]);
+    function updateCorrespondingNode(node) {
+        const path = [];
+        let current = node;
+        if (node?.tagName === "HTML")
+            return;
+        while (current &&
+            current !== current.ownerDocument?.documentElement &&
+            current.parentNode) {
+            const index = Array.prototype.indexOf.call(current.parentNode.childNodes, current);
+            path.unshift(index);
+            current = current.parentNode;
+        }
+        const minimapDoc = iframeRef.current?.contentDocument;
+        if (!minimapDoc)
+            return;
+        let correspondingNode = minimapDoc.documentElement;
+        let originalNode = mainViewIframeRef.current?.contentWindow?.document.documentElement;
+        for (const index of path) {
+            if (originalNode && correspondingNode) {
+                if (originalNode.childNodes.length !== correspondingNode.childNodes.length) {
+                    correspondingNode.innerHTML = originalNode.innerHTML;
+                    return;
+                }
+            }
+            if (originalNode) {
+                originalNode = originalNode.childNodes[index];
+            }
+            if (correspondingNode) {
+                correspondingNode = correspondingNode.childNodes[index];
+            }
+        }
+        if (correspondingNode && originalNode) {
+            if (originalNode.tagName === "HEAD") {
+                correspondingNode.innerHTML = originalNode.innerHTML;
+            }
+            else if (correspondingNode.parentNode?.nodeType === Node.DOCUMENT_NODE) {
+                // Can't use outerHTML when parent is the document node
+                correspondingNode.innerHTML = originalNode.innerHTML;
+            }
+            else {
+                correspondingNode.outerHTML = originalNode.outerHTML;
+            }
+        }
+    }
+    const handleLoad = () => {
+        if (!mainViewIframeRef?.current?.contentWindow?.document)
+            return;
+        mirrorIframeContent(mainViewIframeRef.current, iframeRef.current);
+        const observer = new MutationObserver((mutationsList) => {
+            const minimapDoc = iframeRef.current?.contentDocument;
+            if (!minimapDoc)
+                return;
+            // get distinct list of target nodes
+            const targetNodes = mutationsList
+                .filter((x) => x.type === "childList" && x.target.parentElement)
+                .map((m) => m.target)
+                .concat(mutationsList
+                .filter((x) => x.type === "characterData" ||
+                (x.type === "attributes" && x.target.parentElement))
+                .map((m) => m.target.parentElement));
+            const distinctTargetNodes = Array.from(new Set(targetNodes));
+            const nodesToRemove = new Set();
+            for (let i = 0; i < distinctTargetNodes.length; i++) {
+                for (let j = 0; j < distinctTargetNodes.length; j++) {
+                    if (i !== j) {
+                        if (distinctTargetNodes[i]?.contains(distinctTargetNodes[j])) {
+                            nodesToRemove.add(distinctTargetNodes[j]);
+                        }
+                    }
+                }
+            }
+            const filteredNodes = distinctTargetNodes.filter((node) => !nodesToRemove.has(node));
+            filteredNodes.forEach((targetNode) => {
+                updateCorrespondingNode(targetNode);
+            });
+            setRefreshScale((x) => x + 1);
+        });
+        observer.observe(mainViewIframeRef.current.contentWindow.document, {
+            childList: true, // observe direct children changes
+            subtree: true, // observe all descendants changes
+            characterData: true, // observe text changes
+            attributes: true, // observe attribute changes (like style or class)
+        });
+        setMinimapReady(true);
+        observerRef.current = observer;
+    };
+    useEffect(() => {
+        if (mainViewIframeRef?.current) {
+            mainViewIframeRef?.current.addEventListener("load", handleLoad);
+        }
+        handleLoad();
+        // Cleanup function
+        return () => {
+            mainViewIframeRef?.current?.removeEventListener("load", handleLoad);
+        };
+    }, [mainViewIframeRef.current, iframeRef.current]);
+    useEffect(() => {
+        calcAndUpdateScale();
+    }, [
+        refreshScale,
+        mainViewIframeRef,
+        //pageViewContext?.windowSize,
+        pageViewContext?.zoom,
+        pageViewContext.viewport,
+        pageViewContext.deviceHeight,
+        pageViewContext.deviceWidth,
+    ]);
+    if (!editContext) {
+        return null;
+    }
+    const scrollDocumentTo = (y) => {
+        if (!mainViewIframeRef?.current)
+            return;
+        if (!scrollContainer)
+            return;
+        scrollContainer.scrollTo({
+            top: y,
+            behavior: "smooth",
+        });
+    };
+    const scrollHeight = scrollContainer?.scrollHeight;
+    const scrollTop = scroll;
+    const viewport = pageViewContext.viewport;
+    function mirrorIframeContent(sourceIframe, targetIframe) {
+        if (sourceIframe.contentDocument && targetIframe.contentDocument) {
+            const sourceHtml = sourceIframe.contentDocument.documentElement.innerHTML;
+            targetIframe.contentDocument.documentElement.innerHTML = sourceHtml;
+            targetIframe.contentDocument.documentElement.style.overflow = "hidden";
+        }
+        setRefreshScale((x) => x + 1);
+    }
+    const updateScale = (scale) => {
+        if (!iframeRef.current || !scaleContainerRef.current)
+            return;
+        // console.log(
+        //   "Update Scale: ScrollHeight: ",
+        //   scrollContainer?.scrollHeight,
+        //   " scrollcontainer: ",
+        //   scrollContainer,
+        // );
+        scaleContainerRef.current.style.transform = `scale(${scale})`;
+        scaleContainerRef.current.style.transformOrigin = "0 0";
+        iframeRef.current.style.width = `${scrollContainer?.clientWidth}px`;
+        iframeRef.current.style.height = `${scrollContainer?.scrollHeight}px`;
+    };
+    const handleClick = (e) => {
+        if (!scrollContainer)
+            return;
+        const iframeRect = iframeRef.current.getBoundingClientRect();
+        const absY = e.clientY - iframeRect.top;
+        const relY = (absY / iframeRect.height) * scrollContainer.scrollHeight;
+        e.stopPropagation();
+        scrollDocumentTo(relY - viewport.height / 2);
+    };
+    const handleScroll = useCallback((e) => {
+        if (!scrollContainer)
+            return;
+        scrollContainer.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+        });
+        mainViewIframeRef.current?.contentWindow?.document.documentElement?.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+        });
+        e.stopPropagation();
+    }, [mainViewIframeRef]);
+    return (_jsxs("div", { className: "relative overflow-hidden bg-white", ref: minimapContainerRef, style: {
+            height: "100%",
+            width: miniMapWidth + "px",
+            boxShadow: "5px 0 5px -5px #333",
+        }, children: [_jsx("div", { className: "bg-opacity-50 absolute inset-0 overflow-hidden select-none", style: {
+                    boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
+                }, children: _jsx("div", { ref: minimapRef, onClickCapture: handleClick, onDragOverCapture: handleClick, onWheelCapture: handleScroll, className: "h-full w-full cursor-pointer", children: _jsx("div", { ref: scaleContainerRef, children: _jsx("iframe", { className: "pointer-events-none", ref: iframeRef, style: { visibility: minimapReady ? "visible" : "hidden" } }) }) }) }), scrollTop !== undefined &&
+                scrollHeight !== undefined &&
+                minimapReady && (_jsx("div", { className: "pointer-events-none absolute w-full bg-gray-300 opacity-60 hover:opacity-65", style: {
+                    top: scrollTop * scale + "px",
+                    height: viewport.height * scale + "px",
+                } })), editContext.mode === "edit" && (_jsx(PlaceholderDropZones, { scale: scale, iframe: iframeRef.current, size: "small" })), _jsx(FieldEditedIndicators, { scale: scale, pageViewContext: pageViewContext, scroll: scroll }), editContext.showComments && (_jsx(CommentHighlightings, { iframe: iframeRef.current, scale: scale })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: iframeRef.current, scale: scale }))] }));
+}
+//# sourceMappingURL=MiniMap.js.map

package/dist/editor/page-viewer/MiniMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMap.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/MiniMap.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC;AAExF,MAAM,UAAU,OAAO,CAAC,EACtB,YAAY,EACZ,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,eAAe,GAOhB;IACC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE1D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,IAAI,CAAC,iBAAiB,CAAC,OAAO;QAAE,OAAO;IAEvC,MAAM,eAAe,GACnB,iBAAiB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,gBAAgB;QACnE,iBAAiB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;IAE1D,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;QAC1C,MAAM,aAAa,GAAG,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC;QAChE,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe;YAAE,OAAO;QAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;QAC7B,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC;QACzE,MAAM,MAAM,GACV,IAAI,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,EAAE,aAAa,IAAI,QAAQ,CAAC,MAAM,CAAC;YAC7D,eAAe,CAAC,YAAa,CAAC;QAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAC7C,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IACF,gEAAgE;IAChE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAC3B,EAAE,EACF,KAAK,GAAG,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,CAC9C,CAAC;QAEF,0EAA0E;QAC1E,IACE,YAAY,CAAC,OAAO,GAAG,YAAY;YACnC,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC;gBAChD,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAChD,CAAC;YACD,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC;YACpC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,OAAO,YAAY,CAAC,OAAO,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEpE,SAAS,uBAAuB,CAAC,IAAiB;QAChD,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,IAAI,OAAO,GAAgB,IAAI,CAAC;QAEhC,IAAI,IAAI,EAAE,OAAO,KAAK,MAAM;YAAE,OAAO;QAErC,OACE,OAAO;YACP,OAAO,KAAK,OAAO,CAAC,aAAa,EAAE,eAAe;YAClD,OAAO,CAAC,UAAU,EAClB,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CACxC,OAAO,CAAC,UAAU,CAAC,UAAU,EAC7B,OAAO,CACR,CAAC;YACF,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;QAC/B,CAAC;QAED,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC;QAEtD,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,iBAAiB,GAAuB,UAAU,CAAC,eAAe,CAAC;QACvE,IAAI,YAAY,GACd,iBAAiB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,eAAe,CAAC;QACrE,KAAK,MAAM,KAAK,IAAI,IAAI,EAAE,CAAC;YACzB,IAAI,YAAY,IAAI,iBAAiB,EAAE,CAAC;gBACtC,IACE,YAAY,CAAC,UAAU,CAAC,MAAM,KAAK,iBAAiB,CAAC,UAAU,CAAC,MAAM,EACtE,CAAC;oBACD,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;oBACrD,OAAO;gBACT,CAAC;YACH,CAAC;YAED,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,GAAG,YAAY,CAAC,UAAU,CAAC,KAAK,CAAgB,CAAC;YAC/D,CAAC;YACD,IAAI,iBAAiB,EAAE,CAAC;gBACtB,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAgB,CAAC;YACzE,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,IAAI,YAAY,EAAE,CAAC;YACtC,IAAI,YAAY,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;gBACpC,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;YACvD,CAAC;iBAAM,IACL,iBAAiB,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,aAAa,EAC7D,CAAC;gBACD,uDAAuD;gBACvD,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;YACvD,CAAC;iBAAM,CAAC;gBACN,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;YACvD,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ;YAAE,OAAO;QAEjE,mBAAmB,CAAC,iBAAiB,CAAC,OAAQ,EAAE,SAAS,CAAC,OAAQ,CAAC,CAAC;QAEpE,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,EAAE;YACtD,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC;YACtD,IAAI,CAAC,UAAU;gBAAE,OAAO;YAExB,oCAAoC;YACpC,MAAM,WAAW,GAAG,aAAa;iBAC9B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC;iBAC/D,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;iBACpB,MAAM,CACL,aAAa;iBACV,MAAM,CACL,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,IAAI,KAAK,eAAe;gBAC1B,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CACtD;iBACA,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,aAAc,CAAC,CACvC,CAAC;YAEJ,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YAE7D,MAAM,aAAa,GAAG,IAAI,GAAG,EAAQ,CAAC;YAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACpD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBACpD,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;wBACZ,IACE,mBAAmB,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAS,CAAC,EAChE,CAAC;4BACD,aAAa,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAS,CAAC,CAAC;wBACpD,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;YAED,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,CAC9C,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CACnC,CAAC;YAEF,aAAa,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;gBACnC,uBAAuB,CAAC,UAAyB,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;YAEH,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,aAAc,CAAC,QAAS,EAAE;YACnE,SAAS,EAAE,IAAI,EAAE,kCAAkC;YACnD,OAAO,EAAE,IAAI,EAAE,kCAAkC;YACjD,aAAa,EAAE,IAAI,EAAE,uBAAuB;YAC5C,UAAU,EAAE,IAAI,EAAE,kDAAkD;SACrE,CAAC,CAAC;QAEH,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE,OAAO,EAAE,CAAC;YAC/B,iBAAiB,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAClE,CAAC;QAED,UAAU,EAAE,CAAC;QAEb,mBAAmB;QACnB,OAAO,GAAG,EAAE;YACV,iBAAiB,EAAE,OAAO,EAAE,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE;QACD,YAAY;QACZ,iBAAiB;QACjB,8BAA8B;QAC9B,eAAe,EAAE,IAAI;QACrB,eAAe,CAAC,QAAQ;QACxB,eAAe,CAAC,YAAY;QAC5B,eAAe,CAAC,WAAW;KAC5B,CAAC,CAAC;IAEH,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,EAAE;QACrC,IAAI,CAAC,iBAAiB,EAAE,OAAO;YAAE,OAAO;QAExC,IAAI,CAAC,eAAe;YAAE,OAAO;QAE7B,eAAe,CAAC,QAAQ,CAAC;YACvB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,eAAe,EAAE,YAAY,CAAC;IACnD,MAAM,SAAS,GAAG,MAAM,CAAC;IAEzB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;IAE1C,SAAS,mBAAmB,CAC1B,YAA+B,EAC/B,YAA+B;QAE/B,IAAI,YAAY,CAAC,eAAe,IAAI,YAAY,CAAC,eAAe,EAAE,CAAC;YACjE,MAAM,UAAU,GAAG,YAAY,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,CAAC;YAC1E,YAAY,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,GAAG,UAAU,CAAC;YACpE,YAAY,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzE,CAAC;QAED,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,OAAO;YAAE,OAAO;QAE7D,eAAe;QACf,oCAAoC;QACpC,mCAAmC;QACnC,0BAA0B;QAC1B,qBAAqB;QACrB,KAAK;QAEL,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,KAAK,GAAG,CAAC;QAC9D,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;QAExD,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,eAAe,EAAE,WAAW,IAAI,CAAC;QACpE,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,eAAe,EAAE,YAAY,IAAI,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,MAAM,UAAU,GAAG,SAAS,CAAC,OAAQ,CAAC,qBAAqB,EAAE,CAAC;QAC9D,MAAM,IAAI,GAAG,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC;QACxC,MAAM,IAAI,GAAG,CAAC,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,YAAY,CAAC;QAEvE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,eAAe,CAAC,QAAQ,CAAC;YACvB,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC,CAAC,MAAM;SACd,CAAC,CAAC;QACH,iBAAiB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAC1E;YACE,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC,CAAC,MAAM;SACd,CACF,CAAC;QACF,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAC,mCAAmC,EAC7C,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,YAAY,GAAG,IAAI;YAC1B,SAAS,EAAE,qBAAqB;SACjC,aAED,cACE,SAAS,EAAC,4DAA4D,EACtE,KAAK,EAAE;oBACL,SAAS,EAAE,yCAAyC;iBACrD,YAED,cACE,GAAG,EAAE,UAAU,EACf,cAAc,EAAE,WAAW,EAC3B,iBAAiB,EAAE,WAAW,EAC9B,cAAc,EAAE,YAAY,EAC5B,SAAS,EAAC,8BAA8B,YAExC,cAAK,GAAG,EAAE,iBAAiB,YACzB,iBACE,SAAS,EAAC,qBAAqB,EAC/B,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,GAC1D,GACE,GACF,GACF,EACL,SAAS,KAAK,SAAS;gBACtB,YAAY,KAAK,SAAS;gBAC1B,YAAY,IAAI,CACd,cACE,SAAS,EAAC,6EAA6E,EACvF,KAAK,EAAE;oBACL,GAAG,EAAE,SAAS,GAAG,KAAK,GAAG,IAAI;oBAC7B,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI;iBACvC,GACI,CACR,EACF,WAAW,CAAC,IAAI,KAAK,MAAM,IAAI,CAC9B,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,IAAI,EAAC,OAAO,GACZ,CACH,EACD,KAAC,qBAAqB,IACpB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,GACd,EACD,WAAW,CAAC,YAAY,IAAI,CAC3B,KAAC,oBAAoB,IAAC,MAAM,EAAE,SAAS,CAAC,OAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACnE,EACA,WAAW,CAAC,kBAAkB,IAAI,CACjC,KAAC,uBAAuB,IAAC,MAAM,EAAE,SAAS,CAAC,OAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACtE,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/page-viewer/PageViewer.d.ts

@@ -0,0 +1,10 @@
+import { PageViewContext } from "./pageViewContext";
+export declare function PageViewer({ pageViewContext, showFormEditor, compareView, name, followEditsDefault, className, noMargins, }: {
+    pageViewContext?: PageViewContext;
+    showFormEditor: boolean;
+    compareView?: boolean;
+    name: string;
+    followEditsDefault?: boolean;
+    className?: string;
+    noMargins?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/page-viewer/PageViewer.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorForm } from "./EditorForm";
+import { PageViewerFrame } from "./PageViewerFrame";
+import { useEffect, useState } from "react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { StepForward } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Splitter } from "../ui/Splitter";
+export function PageViewer({ pageViewContext, showFormEditor, compareView, name, followEditsDefault, className, noMargins, }) {
+    const editContext = useEditContext();
+    const modifiedFieldsContext = useFieldsEditContext();
+    const [followEdits, setFollowEdits] = useState(followEditsDefault);
+    const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
+    if (!pageViewContext)
+        return null;
+    useEffect(() => {
+        setFormEditorCollapsed(false);
+    }, [editContext?.insertMode, editContext?.activeEditorTab]);
+    useEffect(() => {
+        setFormEditorCollapsed(false);
+    }, [editContext?.selection]);
+    useEffect(() => {
+        if (followEdits &&
+            modifiedFieldsContext?.recentEdits &&
+            modifiedFieldsContext.recentEdits.length > 0) {
+            if (modifiedFieldsContext?.inlineEditingFieldElement)
+                return;
+            const lastEdit = modifiedFieldsContext.recentEdits[modifiedFieldsContext.recentEdits.length - 1];
+            if (!lastEdit)
+                return;
+            if (!lastEdit.user.ai || lastEdit.user.name !== editContext?.user?.name)
+                return;
+            if (editContext?.selection.indexOf(lastEdit.item.id) === -1) {
+                editContext.select([lastEdit.item.id]);
+            }
+            const element = pageViewContext?.editorIframe?.contentWindow?.document.querySelector(`[data-fieldid="${lastEdit.fieldId}"][data-itemid="${lastEdit.item.id}"][data-language="${lastEdit.item.language}"][data-version="${lastEdit.item.version}"]`);
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+        }
+    }, [
+        modifiedFieldsContext?.recentEdits,
+        editContext,
+        followEdits,
+        pageViewContext,
+    ]);
+    if (!pageViewContext)
+        return null;
+    // Create panels array for the Splitter component
+    const panels = [];
+    if (showFormEditor && !formEditorCollapsed) {
+        panels.push({
+            name: "form",
+            defaultSize: 300,
+            collapsible: true,
+            content: (_jsx("div", { className: cn("h-full w-full", noMargins ? "py-2" : "py-2 pl-2", formEditorCollapsed && "hidden"), children: _jsxs("div", { className: "border-gray-3 flex h-full w-full flex-col rounded-md border bg-white", children: [_jsx("div", { className: "flex-1", children: _jsx(EditorForm, { pageViewContext: pageViewContext, readonly: editContext?.mode !== "edit", compareView: compareView || false, onCollapse: () => setFormEditorCollapsed(true) }) }), _jsxs("div", { className: "flex items-center justify-between gap-1 p-1", children: [_jsx("div", { className: "p-1 text-xs text-gray-500", children: editContext?.statusMessage }), _jsx("div", { className: "flex gap-1", children: _jsx(SimpleIconButton, { "data-testid": "followEditsButton", icon: _jsx(StepForward, { className: "h-4 w-4", strokeWidth: 1 }), selected: followEdits, label: "Follow", onClick: () => setFollowEdits((f) => !f) }) })] })] }) })),
+        });
+    }
+    panels.push({
+        name: "frame",
+        defaultSize: "auto",
+        content: (_jsx(PageViewerFrame, { compareView: compareView || false, pageViewContext: pageViewContext, className: cn("py-2", noMargins ? "pr-0" : "px-2", noMargins && showFormEditor && "ml-2") })),
+    });
+    return (_jsx("div", { className: cn("h-full w-full", className), children: _jsx(Splitter, { panels: panels, splitterClassName: "bg-transparent -mr-2 md:w-[8px]", direction: editContext?.isMobile ? "vertical" : "horizontal", localStorageKey: `editor.pageViewer.${name}` }) }));
+}
+//# sourceMappingURL=PageViewer.js.map

package/dist/editor/page-viewer/PageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageViewer.js","sourceRoot":"","sources":["../../../src/editor/page-viewer/PageViewer.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-viewer/PageViewerFrame.d.ts

@@ -0,0 +1,11 @@
+import { PageViewContext } from "./pageViewContext";
+declare global {
+    interface Window {
+        requestRefresh?: (newUri?: string) => boolean;
+    }
+}
+export declare function PageViewerFrame({ compareView, pageViewContext, className, }: {
+    compareView: boolean;
+    pageViewContext?: PageViewContext;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;