@parhelia/core 0.3.12832 → 0.3.12833

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

@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getFeedbackAnchor, } from "../page-editor-chrome/overlay/feedbackAnchorMeasurements";
+import { useFeedbackAnchors } from "../page-editor-chrome/overlay/feedbackAnchorStore";
+import { useOverlayMeasurement } from "../page-editor-chrome/overlay/useOverlayMeasurement";
+import { resolveMarginAnchors, } from "./feedbackMarginLayout";
+import { usePageViewState } from "./pageViewContext";
+/**
+ * Remembered anchors are shared by every surface of one page: the margin
+ * and the mobile panel are never mounted together, and a thread that lost
+ * its measurement in one keeps its place when the other takes over.
+ */
+const rememberedAnchors = new Map();
+/**
+ * The anchor of every listed thread, with a short memory: a thread that
+ * loses its canvas measurement while it is still listed (a suggestion that
+ * was just applied or rejected no longer marks the canvas, a page re-render
+ * briefly drops a target) keeps its last known anchor, so its card stays
+ * beside its text instead of jumping into the "content not shown" footer.
+ * Only for a moment, though: text that is really gone (component deleted or
+ * hidden) sends its card to the footer once the memory expires.
+ */
+export function useRememberedMarginAnchors(threads, measure) {
+    const [anchorExpiryEpoch, setAnchorExpiryEpoch] = useState(0);
+    const { anchors, nextExpiry } = useMemo(() => resolveMarginAnchors(threads, measure, rememberedAnchors, Date.now()), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the epoch re-runs the expiry
+    [threads, measure, anchorExpiryEpoch]);
+    useEffect(() => {
+        if (nextExpiry === undefined)
+            return;
+        const timer = window.setTimeout(() => setAnchorExpiryEpoch((epoch) => epoch + 1), Math.max(0, nextExpiry - Date.now()) + 1);
+        return () => window.clearTimeout(timer);
+    }, [nextExpiry, anchorExpiryEpoch]);
+    return anchors;
+}
+function layerMetricsEqual(a, b) {
+    return a.layerHeight === b.layerHeight && a.scrollTop === b.scrollTop;
+}
+/**
+ * The canvas as the margin's surface. Anchors come from the canvas overlay's
+ * own measurements (published by the highlight components), so a card can
+ * only ever sit where its highlight is; the margin does not measure on its
+ * own. Must run inside the margin's `IframeOverlayProvider`.
+ */
+export function useCanvasMarginSource(pageViewContext) {
+    const editorIframe = usePageViewState(pageViewContext, (state) => state.editorIframe);
+    const { comments, suggestions } = useFeedbackAnchors(editorIframe);
+    const layerMetrics = useOverlayMeasurement((metrics) => {
+        const scale = metrics.scrollScale * metrics.visualScale;
+        return {
+            layerHeight: Math.max(metrics.scrollHeight * scale, metrics.viewportHeight),
+            scrollTop: metrics.scrollTop * scale,
+        };
+    }, [], {
+        initialValue: { layerHeight: 0, scrollTop: 0 },
+        equals: layerMetricsEqual,
+        interests: ["viewport", "layout"],
+    });
+    const measure = useCallback((thread) => getFeedbackAnchor(thread.kind === "comment"
+        ? comments[thread.id]
+        : suggestions[thread.id]) ?? undefined, [comments, suggestions]);
+    return { measure, layerMetrics };
+}
+const normalizeId = (id) => (id ?? "").replace(/[{}-]/g, "").toLowerCase();
+function getThreadTarget(thread) {
+    const target = thread.kind === "comment" ? thread.root : thread.suggestion;
+    return { itemId: target.itemId, fieldId: target.fieldId };
+}
+/** Where the label line of a form field sits below the field's top edge. */
+const FORM_FIELD_LEADER_OFFSET = 10;
+/**
+ * Anchors every thread to its field in the item form (`[data-field-id]`
+ * elements under `form`), in coordinates relative to the form's top. A thread
+ * without a field is about the item itself and anchors to the top of the
+ * form. Threads whose field is not rendered (a field of another item, a
+ * collapsed or hidden section) get no anchor and end up in the margin's
+ * footer.
+ */
+export function measureFormAnchors(form, threads) {
+    const origin = form.getBoundingClientRect();
+    const fields = Array.from(form.querySelectorAll("[data-field-id]")).map((element) => ({
+        element,
+        fieldId: normalizeId(element.getAttribute("data-field-id")),
+        itemId: normalizeId(element.getAttribute("data-itemid")),
+    }));
+    const anchors = {};
+    for (const thread of threads) {
+        const target = getThreadTarget(thread);
+        const itemId = normalizeId(target.itemId);
+        if (!target.fieldId) {
+            // Every listed thread belongs to the item this form edits, so a thread
+            // without a field is about the item as a whole. Its `itemId` is not
+            // checked: older comments carry whatever was selected back then.
+            anchors[thread.id] = {
+                y: 0,
+                lineMidY: FORM_FIELD_LEADER_OFFSET,
+                xStart: 0,
+                xEnd: origin.width,
+                height: 0,
+            };
+            continue;
+        }
+        const fieldId = normalizeId(target.fieldId);
+        const field = fields.find((candidate) => candidate.fieldId === fieldId && candidate.itemId === itemId);
+        if (!field)
+            continue;
+        const rect = field.element.getBoundingClientRect();
+        // A field inside a collapsed section is in the DOM without a box.
+        if (rect.height <= 0 && rect.width <= 0)
+            continue;
+        const y = rect.top - origin.top;
+        anchors[thread.id] = {
+            y,
+            lineMidY: y + Math.min(FORM_FIELD_LEADER_OFFSET, rect.height / 2),
+            xStart: rect.left - origin.left,
+            xEnd: rect.right - origin.left,
+            height: rect.height,
+        };
+    }
+    return anchors;
+}
+function anchorsEqual(a, b) {
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    return keys.every((key) => {
+        const left = a[key];
+        const right = b[key];
+        return (!!right &&
+            Math.abs(left.y - right.y) < 0.5 &&
+            Math.abs(left.height - right.height) < 0.5 &&
+            Math.abs(left.xEnd - right.xEnd) < 0.5);
+    });
+}
+/**
+ * The item form as the margin's surface. The column scrolls natively with the
+ * form (both live in `scroller`), so anchors are plain offsets from the top
+ * of `form`, re-measured whenever the form changes size or structure.
+ */
+export function useFormMarginSource(scroller, form, threads) {
+    const [anchors, setAnchors] = useState({});
+    const [layerMetrics, setLayerMetrics] = useState({
+        layerHeight: 0,
+        scrollTop: 0,
+    });
+    const threadsRef = useRef(threads);
+    threadsRef.current = threads;
+    const measureNow = useCallback(() => {
+        if (!scroller || !form)
+            return;
+        const nextAnchors = measureFormAnchors(form, threadsRef.current);
+        setAnchors((current) => anchorsEqual(current, nextAnchors) ? current : nextAnchors);
+        const nextMetrics = {
+            layerHeight: Math.max(form.offsetHeight, scroller.clientHeight),
+            scrollTop: scroller.scrollTop,
+        };
+        setLayerMetrics((current) => layerMetricsEqual(current, nextMetrics) ? current : nextMetrics);
+    }, [scroller, form]);
+    useEffect(() => {
+        if (!scroller || !form)
+            return;
+        let frame = null;
+        const schedule = () => {
+            if (frame != null)
+                return;
+            frame = window.requestAnimationFrame(() => {
+                frame = null;
+                measureNow();
+            });
+        };
+        measureNow();
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(schedule);
+        resizeObserver?.observe(form);
+        resizeObserver?.observe(scroller);
+        const mutationObserver = typeof MutationObserver === "undefined"
+            ? null
+            : new MutationObserver(schedule);
+        mutationObserver?.observe(form, { childList: true, subtree: true });
+        scroller.addEventListener("scroll", schedule, { passive: true });
+        return () => {
+            resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
+            scroller.removeEventListener("scroll", schedule);
+            if (frame != null)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [scroller, form, measureNow]);
+    // New or filtered threads need their anchors right away.
+    useEffect(() => {
+        measureNow();
+    }, [threads, measureNow]);
+    const measure = useCallback((thread) => anchors[thread.id], [anchors]);
+    return { measure, layerMetrics };
+}
+//# sourceMappingURL=feedbackMarginSources.js.map

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

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

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

@@ -0,0 +1,43 @@
+/** Width of the full column unless the user resized it. */
+export declare const FEEDBACK_MARGIN_DEFAULT_WIDTH = 320;
+/** The full column narrows down to this before it collapses into the rail. */
+export declare const FEEDBACK_MARGIN_MIN_WIDTH = 200;
+/** The widest the user can drag the column. */
+export declare const FEEDBACK_MARGIN_MAX_WIDTH = 640;
+/** Width of the rail of markers the column collapses into. */
+export declare const FEEDBACK_MARGIN_RAIL_WIDTH = 40;
+/**
+ * Dragging the column's edge below this collapses it into the rail, and
+ * dragging the rail's edge past it opens the column again. Halfway between
+ * the two, so a drag holds the column at its minimum before it snaps.
+ */
+export declare const FEEDBACK_MARGIN_COLLAPSE_WIDTH: number;
+/** Arrow keys on the resize handle move the edge by this much. */
+export declare const FEEDBACK_MARGIN_RESIZE_STEP = 16;
+export declare function clampFeedbackMarginWidth(width: number, limit?: number): number;
+export declare function getFeedbackMarginPreferredWidth(): number;
+/**
+ * The width the user gave the comment margin, shared by the canvas and the
+ * form margin and kept per browser. It is a preference: a pane without room
+ * for it still narrows the column or shows the rail.
+ */
+export declare function useFeedbackMarginPreferredWidth(): number;
+/**
+ * Whether the user collapsed the canvas margin into its rail by dragging its
+ * edge past the minimum; kept per browser. The preferred width is kept for
+ * when the column opens again.
+ */
+export declare function useFeedbackMarginCollapsed(): boolean;
+/**
+ * `persist: false` while dragging (every pointer move re-renders the column);
+ * the drag's end stores the final width.
+ */
+export declare function setFeedbackMarginPreferredWidth(width: number, { persist }?: {
+    persist?: boolean;
+}): void;
+/** `persist` as for setFeedbackMarginPreferredWidth. */
+export declare function setFeedbackMarginCollapsed(next: boolean, { persist }?: {
+    persist?: boolean;
+}): void;
+/** Test hook: forget the cached state so the next read hits storage again. */
+export declare function resetFeedbackMarginPreferredWidthForTests(): void;

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

@@ -0,0 +1,107 @@
+import { useSyncExternalStore } from "react";
+import { localStorageService } from "../services/localStorageService";
+/** Width of the full column unless the user resized it. */
+export const FEEDBACK_MARGIN_DEFAULT_WIDTH = 320;
+/** The full column narrows down to this before it collapses into the rail. */
+export const FEEDBACK_MARGIN_MIN_WIDTH = 200;
+/** The widest the user can drag the column. */
+export const FEEDBACK_MARGIN_MAX_WIDTH = 640;
+/** Width of the rail of markers the column collapses into. */
+export const FEEDBACK_MARGIN_RAIL_WIDTH = 40;
+/**
+ * Dragging the column's edge below this collapses it into the rail, and
+ * dragging the rail's edge past it opens the column again. Halfway between
+ * the two, so a drag holds the column at its minimum before it snaps.
+ */
+export const FEEDBACK_MARGIN_COLLAPSE_WIDTH = (FEEDBACK_MARGIN_MIN_WIDTH + FEEDBACK_MARGIN_RAIL_WIDTH) / 2;
+/** Arrow keys on the resize handle move the edge by this much. */
+export const FEEDBACK_MARGIN_RESIZE_STEP = 16;
+const STORAGE_KEY = "editor.feedbackMargin.width";
+const COLLAPSED_STORAGE_KEY = "editor.feedbackMargin.collapsed";
+export function clampFeedbackMarginWidth(width, limit) {
+    const max = limit === undefined || !Number.isFinite(limit)
+        ? FEEDBACK_MARGIN_MAX_WIDTH
+        : Math.min(FEEDBACK_MARGIN_MAX_WIDTH, Math.floor(limit));
+    // The minimum wins over a pane too narrow for it; that pane shows the rail.
+    return Math.max(FEEDBACK_MARGIN_MIN_WIDTH, Math.min(max, Math.round(width)));
+}
+function readStoredWidth() {
+    const stored = localStorageService.getItem(STORAGE_KEY);
+    return typeof stored === "number" && Number.isFinite(stored)
+        ? clampFeedbackMarginWidth(stored)
+        : FEEDBACK_MARGIN_DEFAULT_WIDTH;
+}
+let preferredWidth;
+let collapsed;
+const listeners = new Set();
+export function getFeedbackMarginPreferredWidth() {
+    preferredWidth ??= readStoredWidth();
+    return preferredWidth;
+}
+function getCollapsed() {
+    collapsed ??=
+        localStorageService.getItem(COLLAPSED_STORAGE_KEY) === true;
+    return collapsed;
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/**
+ * The width the user gave the comment margin, shared by the canvas and the
+ * form margin and kept per browser. It is a preference: a pane without room
+ * for it still narrows the column or shows the rail.
+ */
+export function useFeedbackMarginPreferredWidth() {
+    return useSyncExternalStore(subscribe, getFeedbackMarginPreferredWidth, getFeedbackMarginPreferredWidth);
+}
+/**
+ * Whether the user collapsed the canvas margin into its rail by dragging its
+ * edge past the minimum; kept per browser. The preferred width is kept for
+ * when the column opens again.
+ */
+export function useFeedbackMarginCollapsed() {
+    return useSyncExternalStore(subscribe, getCollapsed, getCollapsed);
+}
+/**
+ * `persist: false` while dragging (every pointer move re-renders the column);
+ * the drag's end stores the final width.
+ */
+export function setFeedbackMarginPreferredWidth(width, { persist = true } = {}) {
+    const next = clampFeedbackMarginWidth(width);
+    if (persist) {
+        if (next === FEEDBACK_MARGIN_DEFAULT_WIDTH) {
+            localStorageService.removeItem(STORAGE_KEY);
+        }
+        else {
+            localStorageService.setItem(STORAGE_KEY, next);
+        }
+    }
+    if (next === preferredWidth)
+        return;
+    preferredWidth = next;
+    listeners.forEach((listener) => listener());
+}
+/** `persist` as for setFeedbackMarginPreferredWidth. */
+export function setFeedbackMarginCollapsed(next, { persist = true } = {}) {
+    if (persist) {
+        if (next) {
+            localStorageService.setItem(COLLAPSED_STORAGE_KEY, true);
+        }
+        else {
+            localStorageService.removeItem(COLLAPSED_STORAGE_KEY);
+        }
+    }
+    if (next === getCollapsed())
+        return;
+    collapsed = next;
+    listeners.forEach((listener) => listener());
+}
+/** Test hook: forget the cached state so the next read hits storage again. */
+export function resetFeedbackMarginPreferredWidthForTests() {
+    preferredWidth = undefined;
+    collapsed = undefined;
+}
+//# sourceMappingURL=feedbackMarginWidth.js.map

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

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

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

@@ -0,0 +1,168 @@
+/**
+ * Interactive preview: running the client code of dynamic renderings safely,
+ * and finding the page's dynamic renderings for the preview strip.
+ *
+ * The client code of a rendering runs in the edit and preview canvas only once
+ * an administrator approved it: the canvas lives on the CM origin with the
+ * user's session. The rendering host wraps every
+ * dynamic rendering in `<div data-parhelia-rendering="<renderingId>">` and, in
+ * preview mode, marks a page that has client code with
+ * `<script data-parhelia-has-client-code="<renderingId>,...">`. To try client
+ * code that is not approved, the review dialog mints a short-lived preview
+ * token and shows a fresh iframe with `sandbox="allow-scripts"` only (an opaque
+ * origin: no cookies, no access to the editor) that loads the page through the
+ * token's capability URL, where all client code runs. The canvas itself is
+ * never replaced.
+ *
+ * This module holds the pure parts: reading the canvas, building the URLs, the
+ * token refresh rule and the session state.
+ */
+export declare const CLIENT_CODE_HINT_ATTRIBUTE = "data-parhelia-has-client-code";
+export declare const CLIENT_CODE_HINT_SELECTOR = "script[data-parhelia-has-client-code]";
+/** The wrapper the rendering host puts around every dynamic rendering. */
+export declare const DYNAMIC_RENDERING_ATTRIBUTE = "data-parhelia-rendering";
+export declare const DYNAMIC_RENDERING_SELECTOR = "[data-parhelia-rendering]";
+/** The only sandbox flags the interactive frame gets. */
+export declare const INTERACTIVE_PREVIEW_SANDBOX = "allow-scripts";
+export declare const PREVIEW_TOKEN_ENDPOINT = "/parhelia/renderings/previewToken";
+export declare const INTERACTIVE_PREVIEW_PATH_PREFIX = "/parhelia/preview/";
+/** A token is renewed before a reload once it is this close to expiring. */
+export declare const PREVIEW_TOKEN_REFRESH_MARGIN_SECONDS = 120;
+export type InteractivePreviewPage = {
+    id: string;
+    language: string;
+    version: number;
+};
+export type PreviewTokenResponse = {
+    token: string;
+    prefix: string;
+    expiresInSeconds: number;
+};
+export type InteractivePreviewSession = {
+    /** The token's capability path, validated, without a trailing slash. */
+    prefix: string;
+    expiresInSeconds: number;
+    /** Epoch milliseconds at which the token was minted. */
+    mintedAt: number;
+};
+/** A GUID in lower-case "D" format, or undefined when the value is none. */
+export declare function normalizeRenderingId(value: string | null | undefined): string | undefined;
+/**
+ * Rendering ids from one or more attribute values: comma-separated, limited to
+ * well-formed GUIDs, normalized and de-duplicated in order of appearance.
+ */
+export declare function parseRenderingIds(values: ReadonlyArray<string | null | undefined>): string[];
+export type CanvasRenderings = {
+    /** Every dynamic rendering on the page (wrappers and the hint). */
+    renderingIds: string[];
+    /** The renderings the host marked as having client code. */
+    clientCodeIds: string[];
+};
+export declare const NO_CANVAS_RENDERINGS: CanvasRenderings;
+/**
+ * The dynamic renderings in the canvas document. The canvas is normally
+ * same-origin with the editor; any other frame (cross-origin, opaque,
+ * detached) yields none.
+ */
+export declare function readCanvasRenderings(iframe: HTMLIFrameElement | null | undefined): CanvasRenderings;
+export declare function sameRenderingIds(left: readonly string[], right: readonly string[]): boolean;
+export declare function buildPreviewTokenUrl(page: InteractivePreviewPage): string;
+/**
+ * The token's prefix as a same-origin preview path without a trailing slash,
+ * or undefined for anything else.
+ */
+export declare function normalizePreviewPrefix(prefix: unknown, origin?: string): string | undefined;
+/**
+ * The interactive frame's URL: the token prefix, then exactly "/" and the
+ * query the preview canvas uses, without the editor's own markers. IIS
+ * rejects paths longer than 260 characters and the token alone takes about
+ * half of that, so the page's route path is never appended: the host resolves
+ * the page by its item id (the `route` parameter rides along when the canvas
+ * has one). The page context always names the version the token was minted
+ * for. Returns undefined for a prefix that is not a same-origin preview path.
+ */
+export declare function buildInteractivePreviewFrameUrl(prefix: string, page: InteractivePreviewPage, canvasUrl?: string, origin?: string): string | undefined;
+/**
+ * Whether a token must be renewed before the frame is (re)loaded: once it is
+ * older than its lifetime minus the refresh margin. Time alone never reloads
+ * the frame; this is only consulted when the editor reloads it anyway.
+ */
+export declare function isPreviewTokenDue(session: Pick<InteractivePreviewSession, "mintedAt" | "expiresInSeconds">, now: number): boolean;
+export declare function isPreviewTokenResponse(value: unknown): value is PreviewTokenResponse;
+export declare function createInteractivePreviewSession(response: PreviewTokenResponse, mintedAt: number, origin?: string): InteractivePreviewSession | undefined;
+export declare function getInteractivePreviewPageKey(page: InteractivePreviewPage | undefined): string | undefined;
+export type InteractivePreviewStatus = "off" | "starting" | "on";
+export type CanvasRenderingsHint = CanvasRenderings & {
+    /** The page whose canvas document the renderings were read from. */
+    pageKey?: string;
+};
+export type InteractivePreviewState = {
+    status: InteractivePreviewStatus;
+    /** The page (see getInteractivePreviewPageKey) the session belongs to. */
+    pageKey?: string;
+    session?: InteractivePreviewSession;
+    /**
+     * The preview canvas URL whose query the interactive frame uses. It only
+     * changes together with the frame key, so a running frame never navigates.
+     */
+    canvasUrl?: string;
+    /**
+     * React key of the interactive iframe. It changes on every (re)load: a
+     * sandbox attribute only applies to a fresh iframe element, and a fresh
+     * element is also the simplest way to reload an opaque-origin frame.
+     */
+    frameKey: number;
+    /** The token request whose response is awaited, if any. */
+    pendingRequestId?: number;
+    /** The renderings last read from the normal preview canvas. */
+    hint: CanvasRenderingsHint;
+};
+export type InteractivePreviewAction = {
+    type: "start";
+    pageKey: string;
+    requestId: number;
+} | {
+    type: "refreshStarted";
+    requestId: number;
+} | {
+    type: "minted";
+    requestId: number;
+    session: InteractivePreviewSession;
+    canvasUrl?: string;
+} | {
+    type: "mintFailed";
+    requestId: number;
+} | {
+    type: "remount";
+    canvasUrl?: string;
+} | {
+    type: "stop";
+} | {
+    type: "hint";
+    pageKey: string | undefined;
+    renderings: CanvasRenderings;
+};
+export declare const INITIAL_INTERACTIVE_PREVIEW_STATE: InteractivePreviewState;
+export declare function interactivePreviewReducer(state: InteractivePreviewState, action: InteractivePreviewAction): InteractivePreviewState;
+export type InteractivePreviewContext = {
+    mode: string | undefined;
+    pageKey: string | undefined;
+};
+/**
+ * Whether the interactive frame replaces the canvas right now. Derived rather
+ * than stored so that leaving preview mode or opening another page returns to
+ * the normal canvas in the same render, before any cleanup has run.
+ */
+export declare function isInteractivePreviewActive(state: InteractivePreviewState, context: InteractivePreviewContext): boolean;
+/** A running or starting session that no longer matches the canvas ends. */
+export declare function shouldStopInteractivePreview(state: InteractivePreviewState, context: InteractivePreviewContext): boolean;
+/**
+ * The rendering ids "Run client code" is offered for: only in preview mode,
+ * and only those read from the canvas of the page that is open now.
+ */
+export declare function getOfferedClientCodeRenderings(state: InteractivePreviewState, context: InteractivePreviewContext): string[];
+/**
+ * The page's dynamic renderings the preview strip lists, under the same
+ * conditions as getOfferedClientCodeRenderings.
+ */
+export declare function getPreviewRenderingIds(state: InteractivePreviewState, context: InteractivePreviewContext): string[];