@alpaca-editor/core 1.0.0 → 1.0.3

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

@@ -0,0 +1,222 @@
+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";
+export function MiniMap({ deviceHeight, scroll, mainViewIframeRef, mode, 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(false);
+    const observerRef = useRef(null);
+    const editorIframeRef = mainViewIframeRef;
+    const minimapContainerRef = 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 = 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 {
+                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;
+    };
+    useEffect(() => {
+        if (editorIframeRef?.current) {
+            editorIframeRef?.current.addEventListener("load", handleLoad);
+        }
+        handleLoad();
+        // Cleanup function
+        return () => {
+            editorIframeRef?.current?.removeEventListener("load", handleLoad);
+        };
+    }, [mainViewIframeRef.current, iframeRef.current]);
+    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 = 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 (_jsxs("div", { className: "relative z-50 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",
+                } })), 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 }))] }));
+}
+//# 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":"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"}

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

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

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Allotment } from "allotment";
+import { EditorForm } from "./EditorForm";
+import { PageViewerFrame } from "./PageViewerFrame";
+import { useEffect, useState } from "react";
+import { useRef } from "react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { useEditContext } from "../client/editContext";
+import { useDebouncedCallback } from "use-debounce";
+export function PageViewer({ pageViewContext, showFormEditor, mode, name, followEditsDefault, }) {
+    const panels = [];
+    const editContext = useEditContext();
+    const [followEdits, setFollowEdits] = useState(followEditsDefault);
+    const allotmentRef = useRef(null);
+    const [formEditorWidth, setFormEditorWidth] = useState(0);
+    if (!pageViewContext)
+        return null;
+    useEffect(() => {
+        const width = localStorage.getItem("editor.editFormWidth." + name)
+            ? parseInt(localStorage.getItem("editor.editFormWidth." + name))
+            : 300;
+        setFormEditorWidth(width);
+        resizePanels(width);
+    }, []);
+    const resizePanels = useDebouncedCallback((width) => {
+        if (!allotmentRef.current)
+            return;
+        const newsizes = [];
+        if (showFormEditor)
+            newsizes.push(width);
+        allotmentRef.current?.resize(newsizes);
+    }, 140);
+    useEffect(() => {
+        if (formEditorWidth > 0)
+            localStorage.setItem("editor.editFormWidth." + name, formEditorWidth.toString());
+    }, [formEditorWidth]);
+    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(_jsxs("div", { className: "h-full w-full flex flex-col", children: [_jsx("div", { className: "flex-1", children: _jsx(EditorForm, { pageViewContext: pageViewContext, readonly: mode !== "edit" }) }), _jsxs("div", { className: "flex justify-between gap-1 bg-gray-50 p-1 items-center", children: [_jsx("div", { className: "text-xs text-gray-500 p-1", children: editContext?.statusMessage }), _jsx(SimpleIconButton, { icon: "pi pi-step-forward", className: followEdits ? "bg-gray-200" : "", label: "Follow", onClick: () => setFollowEdits((f) => !f) })] })] }, "form"));
+    panels.push(_jsx(PageViewerFrame, { mode: mode, pageViewContext: pageViewContext }, "frame"));
+    return (_jsx(Allotment, { proportionalLayout: false, ref: allotmentRef, onChange: (newSizes) => {
+            if (!newSizes || newSizes.length === 0)
+                return;
+            if (showFormEditor && newSizes[0]) {
+                setFormEditorWidth(newSizes[0]);
+            }
+        }, children: panels }));
+}
+//# 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({ mode, pageViewContext, }: {
+    mode: "edit" | "compare" | "view";
+    pageViewContext?: PageViewContext;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function injectEditorCSS(iframeDocument: Document): void;