@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

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

@@ -0,0 +1,257 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiniMap = MiniMap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const editContext_1 = require("../client/editContext");
+const PlaceholderDropZones_1 = require("../page-editor-chrome/PlaceholderDropZones");
+const FieldEditedIndicators_1 = require("../page-editor-chrome/FieldEditedIndicators");
+const CommentHighlightings_1 = require("../page-editor-chrome/CommentHighlightings");
+function MiniMap({ deviceHeight, scroll, mainViewIframeRef, mode, pageViewContext, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [scale, setScale] = react_1.default.useState(1);
+    const minimapRef = (0, react_1.useRef)(null);
+    const scaleContainerRef = (0, react_1.useRef)(null);
+    const iframeRef = (0, react_1.useRef)(null);
+    const [minimapReady, setMinimapReady] = react_1.default.useState(false);
+    const [refreshScale, setRefreshScale] = react_1.default.useState(false);
+    const observerRef = (0, react_1.useRef)(null);
+    const editorIframeRef = mainViewIframeRef;
+    const minimapContainerRef = (0, react_1.useRef)(null);
+    if (!mainViewIframeRef.current)
+        return;
+    const scrollContainer = editorIframeRef.current?.contentWindow?.document.scrollingElement ||
+        editorIframeRef.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 = (0, react_1.useRef)(scale);
+    const prevWidthRef = (0, react_1.useRef)(0);
+    const miniMapWidth = (0, react_1.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 {
+                correspondingNode.outerHTML = originalNode.outerHTML;
+            }
+        }
+    }
+    const handleLoad = () => {
+        if (!mainViewIframeRef?.current?.contentWindow?.document)
+            return;
+        mirrorIframeContent(editorIframeRef.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);
+        });
+        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;
+    };
+    (0, react_1.useEffect)(() => {
+        if (editorIframeRef?.current) {
+            editorIframeRef?.current.addEventListener("load", handleLoad);
+        }
+        handleLoad();
+        // Cleanup function
+        return () => {
+            editorIframeRef?.current?.removeEventListener("load", handleLoad);
+        };
+    }, [mainViewIframeRef.current, iframeRef.current]);
+    (0, react_1.useEffect)(() => {
+        calcAndUpdateScale();
+    }, [
+        refreshScale,
+        editorIframeRef,
+        //pageViewContext?.windowSize,
+        pageViewContext?.zoom,
+        pageViewContext.viewport,
+        pageViewContext.deviceHeight,
+        pageViewContext.deviceWidth,
+    ]);
+    if (!editContext) {
+        return null;
+    }
+    const scrollDocumentTo = (y) => {
+        if (!editorIframeRef?.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";
+        }
+        calcAndUpdateScale();
+    }
+    const updateScale = (scale) => {
+        if (!iframeRef.current || !scaleContainerRef.current)
+            return;
+        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 = (0, react_1.useCallback)((e) => {
+        if (!scrollContainer)
+            return;
+        scrollContainer.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+        });
+        editorIframeRef.current?.contentWindow?.document.documentElement?.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+        });
+        e.stopPropagation();
+    }, [editorIframeRef]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white z-50 relative overflow-hidden", ref: minimapContainerRef, style: {
+            height: "100%",
+            width: miniMapWidth + "px",
+            boxShadow: "5px 0 5px -5px #333",
+        }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute bg-opacity-50 overflow-hidden select-none  inset-0", style: {
+                    boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
+                }, children: (0, jsx_runtime_1.jsx)("div", { ref: minimapRef, onClickCapture: handleClick, onDragOverCapture: handleClick, onWheelCapture: handleScroll, className: "h-full w-full cursor-pointer", children: (0, jsx_runtime_1.jsx)("div", { ref: scaleContainerRef, children: (0, jsx_runtime_1.jsx)("iframe", { className: "pointer-events-none", ref: iframeRef, style: { visibility: minimapReady ? "visible" : "hidden" } }) }) }) }), scrollTop !== undefined &&
+                scrollHeight !== undefined &&
+                minimapReady && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bg-opacity-60 hover:bg-opacity-65 bg-gray-300 w-full pointer-events-none", style: {
+                    top: scrollTop * scale + "px",
+                    height: viewport.height * scale + "px",
+                } })), mode === "edit" && ((0, jsx_runtime_1.jsx)(PlaceholderDropZones_1.PlaceholderDropZones, { scale: scale, iframe: iframeRef.current, size: "small" })), (0, jsx_runtime_1.jsx)(FieldEditedIndicators_1.FieldEditedIndicators, { scale: scale, pageViewContext: pageViewContext, scroll: scroll }), editContext.showComments && ((0, jsx_runtime_1.jsx)(CommentHighlightings_1.CommentHighlightings, { iframe: iframeRef.current, scale: scale }))] }));
+}

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewer = PageViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const allotment_1 = require("allotment");
+const EditorForm_1 = require("./EditorForm");
+const PageViewerFrame_1 = require("./PageViewerFrame");
+const react_1 = require("react");
+const react_2 = require("react");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const editContext_1 = require("../client/editContext");
+const use_debounce_1 = require("use-debounce");
+function PageViewer({ pageViewContext, showFormEditor, mode, name, followEditsDefault, }) {
+    const panels = [];
+    const editContext = (0, editContext_1.useEditContext)();
+    const [followEdits, setFollowEdits] = (0, react_1.useState)(followEditsDefault);
+    const allotmentRef = (0, react_2.useRef)(null);
+    const [formEditorWidth, setFormEditorWidth] = (0, react_1.useState)(0);
+    if (!pageViewContext)
+        return null;
+    (0, react_1.useEffect)(() => {
+        const width = localStorage.getItem("editor.editFormWidth." + name)
+            ? parseInt(localStorage.getItem("editor.editFormWidth." + name))
+            : 300;
+        setFormEditorWidth(width);
+        resizePanels(width);
+    }, []);
+    const resizePanels = (0, use_debounce_1.useDebouncedCallback)((width) => {
+        if (!allotmentRef.current)
+            return;
+        const newsizes = [];
+        if (showFormEditor)
+            newsizes.push(width);
+        allotmentRef.current?.resize(newsizes);
+    }, 140);
+    (0, react_1.useEffect)(() => {
+        if (formEditorWidth > 0)
+            localStorage.setItem("editor.editFormWidth." + name, formEditorWidth.toString());
+    }, [formEditorWidth]);
+    (0, react_1.useEffect)(() => {
+        if (followEdits &&
+            editContext?.lastEditedFields &&
+            editContext.lastEditedFields.length > 0) {
+            const lastEdit = editContext.lastEditedFields[editContext.lastEditedFields.length - 1];
+            if (!lastEdit)
+                return;
+            editContext.select([lastEdit.item.id]);
+            const element = pageViewContext.editorIframeRef.current?.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" });
+            }
+        }
+    }, [editContext?.lastEditedFields]);
+    if (showFormEditor)
+        panels.push((0, jsx_runtime_1.jsxs)("div", { className: "h-full w-full flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)(EditorForm_1.EditorForm, { pageViewContext: pageViewContext, readonly: mode !== "edit" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between gap-1 bg-gray-50 p-1 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 p-1", children: editContext?.statusMessage }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-step-forward", className: followEdits ? "bg-gray-200" : "", label: "Follow", onClick: () => setFollowEdits((f) => !f) })] })] }, "form"));
+    panels.push((0, jsx_runtime_1.jsx)(PageViewerFrame_1.PageViewerFrame, { mode: mode, pageViewContext: pageViewContext }, "frame"));
+    return ((0, jsx_runtime_1.jsx)(allotment_1.Allotment, { proportionalLayout: false, ref: allotmentRef, onChange: (newSizes) => {
+            if (!newSizes || newSizes.length === 0)
+                return;
+            if (showFormEditor && newSizes[0]) {
+                setFormEditorWidth(newSizes[0]);
+            }
+        }, children: panels }));
+}