@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/dist/ImageViewer.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ImageViewer
+ *
+ * Read-only image viewer used when EditorShell runs in `image` file mode
+ * (PNG/JPEG/etc.). Renders a centered image that fits its container with
+ * a small overlay toolbar for fit / 100% / zoom in / zoom out, and a
+ * status row showing intrinsic dimensions and current zoom.
+ *
+ * Lifecycle of the `src` URL is the caller's responsibility — when fed a
+ * blob URL, the host should `URL.revokeObjectURL` on unmount or src change.
+ *
+ * Future image-editing actions (rotate, flip, crop) will slot in alongside
+ * the existing zoom controls.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 16;
+const ZOOM_STEP = 1.25;
+export function ImageViewer({ src, alt = '', className, theme = 'light' }) {
+    const imgRef = useRef(null);
+    const stageRef = useRef(null);
+    const [naturalSize, setNaturalSize] = useState(null);
+    const [fitZoom, setFitZoom] = useState(1);
+    const [state, setState] = useState({ mode: 'fit' });
+    const [pan, setPan] = useState({ x: 0, y: 0 });
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setNaturalSize(null);
+        setState({ mode: 'fit' });
+        setPan({ x: 0, y: 0 });
+        setError(null);
+    }, [src]);
+    const recomputeFitZoom = useCallback(() => {
+        const stage = stageRef.current;
+        if (!stage || !naturalSize)
+            return;
+        const { clientWidth, clientHeight } = stage;
+        if (clientWidth === 0 || clientHeight === 0)
+            return;
+        const fit = Math.min(clientWidth / naturalSize.w, clientHeight / naturalSize.h, 1);
+        setFitZoom(fit > 0 ? fit : 1);
+    }, [naturalSize]);
+    useEffect(() => {
+        recomputeFitZoom();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        const ro = new ResizeObserver(() => recomputeFitZoom());
+        ro.observe(stage);
+        return () => ro.disconnect();
+    }, [recomputeFitZoom]);
+    const handleLoad = useCallback(() => {
+        const img = imgRef.current;
+        if (!img)
+            return;
+        setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+    }, []);
+    const handleError = useCallback(() => {
+        setError('Failed to load image');
+    }, []);
+    const effectiveZoom = state.mode === 'fit' ? fitZoom : state.zoom;
+    const setZoom = useCallback((next) => {
+        const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, next));
+        setState({ mode: 'manual', zoom: clamped });
+    }, []);
+    const onFit = useCallback(() => {
+        setState({ mode: 'fit' });
+        setPan({ x: 0, y: 0 });
+    }, []);
+    const onActual = useCallback(() => {
+        setZoom(1);
+        setPan({ x: 0, y: 0 });
+    }, [setZoom]);
+    const onZoomIn = useCallback(() => setZoom(effectiveZoom * ZOOM_STEP), [effectiveZoom, setZoom]);
+    const onZoomOut = useCallback(() => setZoom(effectiveZoom / ZOOM_STEP), [effectiveZoom, setZoom]);
+    const dragRef = useRef(null);
+    const onMouseDown = useCallback((e) => {
+        if (effectiveZoom <= fitZoom)
+            return;
+        dragRef.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
+        e.preventDefault();
+    }, [effectiveZoom, fitZoom, pan.x, pan.y]);
+    useEffect(() => {
+        const onMove = (e) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            setPan({
+                x: drag.panX + (e.clientX - drag.startX),
+                y: drag.panY + (e.clientY - drag.startY),
+            });
+        };
+        const onUp = () => {
+            dragRef.current = null;
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+        return () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+    }, []);
+    const isPannable = effectiveZoom > fitZoom + 1e-6;
+    const imgStyle = naturalSize
+        ? {
+            width: `${naturalSize.w * effectiveZoom}px`,
+            height: `${naturalSize.h * effectiveZoom}px`,
+            transform: `translate(${pan.x}px, ${pan.y}px)`,
+        }
+        : { maxWidth: '100%', maxHeight: '100%' };
+    const containerCls = ['squisq-image-viewer', `squisq-image-viewer--${theme}`, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: containerCls, "data-testid": "image-viewer", children: [_jsxs("div", { ref: stageRef, className: "squisq-image-viewer-stage", onMouseDown: onMouseDown, style: { cursor: isPannable ? (dragRef.current ? 'grabbing' : 'grab') : 'default' }, children: [error ? (_jsx("div", { className: "squisq-image-viewer-error", children: error })) : (_jsx("img", { ref: imgRef, src: src, alt: alt, className: "squisq-image-viewer-img", style: imgStyle, onLoad: handleLoad, onError: handleError, draggable: false })), _jsxs("div", { className: "squisq-image-viewer-toolbar", children: [_jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onZoomOut, "aria-label": "Zoom out", title: "Zoom out", children: "\u2212" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onFit, "aria-pressed": state.mode === 'fit', title: "Fit to viewport", children: "Fit" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onActual, title: "Actual size (100%)", children: "100%" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: "+" })] })] }), _jsx("div", { className: "squisq-image-viewer-status", children: naturalSize ? (_jsxs(_Fragment, { children: [_jsxs("span", { children: [naturalSize.w, " \u00D7 ", naturalSize.h] }), _jsxs("span", { children: [Math.round(effectiveZoom * 100), "%"] })] })) : (_jsx("span", { children: "Loading\u2026" })) })] }));
+}
+//# sourceMappingURL=ImageViewer.js.map

package/dist/ImageViewer.js.map

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

package/dist/InlineIcon.d.ts

@@ -0,0 +1,17 @@
+/**
+ * InlineIcon — Tiptap Node Extension
+ *
+ * Atomic inline node that round-trips FontAwesome icons through the
+ * WYSIWYG editor. The markdown bridge stashes `{[github]}` source as
+ * `<i data-icon="github" data-family="brands" data-name="github"
+ * class="fa-brands fa-github"></i>`; this extension lets ProseMirror
+ * recognize that markup, persist the attributes through edits, and
+ * re-emit it when serializing back to HTML/markdown.
+ *
+ * Atom / inline / non-selectable means the icon behaves like an emoji:
+ * the caret can land before or after it, Backspace deletes it whole,
+ * and Tiptap won't try to put content inside it.
+ */
+import { Node } from '@tiptap/core';
+export declare const InlineIcon: Node<any, any>;
+//# sourceMappingURL=InlineIcon.d.ts.map

package/dist/InlineIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineIcon.d.ts","sourceRoot":"","sources":["../src/InlineIcon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AASrD,eAAO,MAAM,UAAU,gBA2DrB,CAAC"}

package/dist/InlineIcon.js

@@ -0,0 +1,72 @@
+/**
+ * InlineIcon — Tiptap Node Extension
+ *
+ * Atomic inline node that round-trips FontAwesome icons through the
+ * WYSIWYG editor. The markdown bridge stashes `{[github]}` source as
+ * `<i data-icon="github" data-family="brands" data-name="github"
+ * class="fa-brands fa-github"></i>`; this extension lets ProseMirror
+ * recognize that markup, persist the attributes through edits, and
+ * re-emit it when serializing back to HTML/markdown.
+ *
+ * Atom / inline / non-selectable means the icon behaves like an emoji:
+ * the caret can land before or after it, Backspace deletes it whole,
+ * and Tiptap won't try to put content inside it.
+ */
+import { Node, mergeAttributes } from '@tiptap/core';
+export const InlineIcon = Node.create({
+    name: 'inlineIcon',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    draggable: false,
+    addAttributes() {
+        return {
+            token: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-icon') ?? '',
+                renderHTML: (attrs) => (attrs.token ? { 'data-icon': attrs.token } : {}),
+            },
+            family: {
+                default: 'solid',
+                parseHTML: (el) => el.getAttribute('data-family') ?? 'solid',
+                renderHTML: (attrs) => attrs.family ? { 'data-family': attrs.family } : {},
+            },
+            name: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-name') ?? '',
+                renderHTML: (attrs) => (attrs.name ? { 'data-name': attrs.name } : {}),
+            },
+        };
+    },
+    parseHTML() {
+        // Tiptap's built-in Italic mark also claims `<i>` tags. We need a
+        // higher priority than the default (50) so ProseMirror picks
+        // InlineIcon over Italic for `<i data-icon=…>` markup — otherwise
+        // the markdown → WYSIWYG round-trip silently drops the icon and
+        // produces an empty italic mark instead.
+        return [
+            {
+                tag: 'i[data-icon]',
+                priority: 100,
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const family = HTMLAttributes['data-family'] ?? 'solid';
+        const name = HTMLAttributes['data-name'] ?? '';
+        // The `<i>` carries `class="fa-brands fa-github"` so the bundled
+        // FontAwesome CSS picks it up. We also keep `data-*` mirrors so
+        // the bridge regex can round-trip back to markdown without
+        // parsing the class string.
+        const className = name ? `fa-${family} fa-${name}` : '';
+        return [
+            'i',
+            mergeAttributes(HTMLAttributes, {
+                class: className,
+                contenteditable: 'false',
+            }),
+        ];
+    },
+});
+//# sourceMappingURL=InlineIcon.js.map

package/dist/InlineIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineIcon.js","sourceRoot":"","sources":["../src/InlineIcon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AASrD,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,KAAK;IAEhB,aAAa;QACX,OAAO;YACL,KAAK,EAAE;gBACL,OAAO,EAAE,EAAE;gBACX,SAAS,EAAE,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE;gBAClE,UAAU,EAAE,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC1F;YACD,MAAM,EAAE;gBACN,OAAO,EAAE,OAAO;gBAChB,SAAS,EAAE,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,OAAO;gBACzE,UAAU,EAAE,CAAC,KAAsB,EAAE,EAAE,CACrC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;aACtD;YACD,IAAI,EAAE;gBACJ,OAAO,EAAE,EAAE;gBACX,SAAS,EAAE,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE;gBAClE,UAAU,EAAE,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aACxF;SACF,CAAC;IACJ,CAAC;IAED,SAAS;QACP,kEAAkE;QAClE,6DAA6D;QAC7D,kEAAkE;QAClE,gEAAgE;QAChE,yCAAyC;QACzC,OAAO;YACL;gBACE,GAAG,EAAE,cAAc;gBACnB,QAAQ,EAAE,GAAG;aACd;SACF,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,EAAE,cAAc,EAAE;QAC3B,MAAM,MAAM,GAAI,cAAc,CAAC,aAAa,CAAwB,IAAI,OAAO,CAAC;QAChF,MAAM,IAAI,GAAI,cAAc,CAAC,WAAW,CAAwB,IAAI,EAAE,CAAC;QACvE,iEAAiE;QACjE,gEAAgE;QAChE,2DAA2D;QAC3D,4BAA4B;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,MAAM,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACxD,OAAO;YACL,GAAG;YACH,eAAe,CAAC,cAAc,EAAE;gBAC9B,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,OAAO;aACzB,CAAC;SACH,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/InlinePreviewGutter.d.ts

@@ -0,0 +1,52 @@
+/**
+ * InlinePreviewGutter
+ *
+ * Renders one small SVG preview card per template-annotated block in the
+ * current document, positioned to vertically align with its corresponding
+ * heading in whichever editor view is active. A diagonal connector line
+ * + vertical block-extent bars bridge each heading and its preview card.
+ *
+ * The gutter consumes the parsed `Doc` from `useEditorContext()` and reuses
+ * the same template-resolution path as `LinearDocView` (heading text →
+ * template defaults → `getLayers()` → `BlockRenderer`).
+ *
+ * Auto-hides via container queries when the surrounding container is too
+ * narrow (see `.squisq-editor-with-gutter` rules in `styles/editor.css`).
+ *
+ * Implementation notes:
+ * - **View-agnostic positioning** — heading positions, page edges, and
+ *   click-to-scroll all come from `useHeadingLayout()`, which has
+ *   per-view backends (DOM-query for WYSIWYG, Monaco API for Markdown).
+ *   The component only handles card stacking (which needs rendered card
+ *   heights) and the visual rendering layer.
+ * - **Card stacking** — cards are absolutely positioned with `top` set
+ *   from each heading's hook-supplied position. If two headings sit too
+ *   close together, the lower card slides down so cards never overlap;
+ *   the connector line then slopes from the (still heading-anchored)
+ *   bar across to the (now lower) card.
+ */
+import type { ViewportConfig } from '@bendyline/squisq/schemas';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+export interface InlinePreviewGutterProps {
+    /** Width of the gutter in pixels (default: 320). */
+    width?: number;
+    /** Base path for resolving media URLs in card thumbnails. */
+    basePath?: string;
+    /** Viewport used to render each card (default: landscape preset). */
+    viewport?: ViewportConfig;
+    /** Optional CSS class for the outer container. */
+    className?: string;
+    /**
+     * Width in pixels of the connector strip that bridges the editor and
+     * the gutter. Defaults to 24.
+     */
+    connectorWidth?: number;
+    /**
+     * Optional MediaProvider used to resolve relative image src values inside
+     * preview cards. When omitted, images with relative paths fall back to
+     * `basePath`-prefixed URLs (which usually 404 in container-backed editors).
+     */
+    mediaProvider?: MediaProvider | null;
+}
+export declare function InlinePreviewGutter({ width, basePath, viewport, className, connectorWidth, mediaProvider, }: InlinePreviewGutterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InlinePreviewGutter.d.ts.map

package/dist/InlinePreviewGutter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePreviewGutter.d.ts","sourceRoot":"","sources":["../src/InlinePreviewGutter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAGH,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAkBjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA0M/D,MAAM,WAAW,wBAAwB;IACvC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC;AA0BD,wBAAgB,mBAAmB,CAAC,EAClC,KAAW,EACX,QAAc,EACd,QAAqC,EACrC,SAAS,EACT,cAAmB,EACnB,aAAoB,GACrB,EAAE,wBAAwB,2CAuR1B"}