testomatio-editor-blocks 0.4.74 → 0.4.75

package/package/editor/blocks/step.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { StepField } from "./stepField";
+import { StepField, StepFieldPreview } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
-import { useDeferredMount } from "./useDeferredMount";
 import { useStepImageUpload } from "../stepImageUpload";
 const EXPECTED_COLLAPSED_KEY = "bn-expected-collapsed";
 const VIEW_MODE_KEY = "bn-step-view-mode";
@@ -46,6 +45,35 @@ const writeStepViewMode = (mode) => {
         //
     }
 };
+/**
+ * Subscribes to the globally-shared step view mode. The mode lives in
+ * localStorage and changes are broadcast via the `bn-step-view-mode` event
+ * (same tab) and the `storage` event (other tabs), so toggling it on any step
+ * re-renders every step — including the read-only previews — into the new mode.
+ */
+function useStepViewMode() {
+    const [viewMode, setViewMode] = useState(() => readStepViewMode());
+    useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const handleStorage = (event) => {
+            if (event.key === VIEW_MODE_KEY) {
+                setViewMode(readStepViewMode());
+            }
+        };
+        const handleLocal = () => {
+            setViewMode(readStepViewMode());
+        };
+        window.addEventListener("storage", handleStorage);
+        window.addEventListener("bn-step-view-mode", handleLocal);
+        return () => {
+            window.removeEventListener("storage", handleStorage);
+            window.removeEventListener("bn-step-view-mode", handleLocal);
+        };
+    }, []);
+    return viewMode;
+}
 /**
  * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
  * heading text looks like a "Steps" heading.
@@ -232,30 +260,28 @@ export function computeStepNumber(allBlocks, blockId) {
     }
     return count;
 }
-/** Strip the most common inline markdown markers for a readable static preview. */
-function stripMarkdownForPreview(text) {
-    return text
-        .replace(/!\[[^\]]*\]\([^)]*\)/g, "")
-        .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
-        .replace(/(\*\*|__|\*|_|~~|`)/g, "")
-        .replace(/<\/?[^>]+>/g, "")
-        .trim();
-}
 /**
- * Cheap static stand-in shown before a step's interactive editor is mounted.
- * Mirrors the real step's structure/typography so the document height stays
- * stable and so it reads correctly during the brief window before upgrade.
+ * Read-only stand-in rendered for every step that isn't currently being edited.
+ * It mirrors the live step's structure for the active view mode and renders each
+ * field via {@link StepFieldPreview} — a faithful, formatted reading view with
+ * no OverType editor. Only the focused step ever mounts an editor, so scrolling
+ * never mounts/tears down editors and the list stays flicker-free.
+ *
+ * Field visibility is gated on the raw trimmed props (matching the live step's
+ * `isDataVisible`/`isExpectedVisible`) so the same fields appear in both states.
  */
-function TestStepPreview({ blockId, stepNumber, stepTitle, stepData, expectedResult, }) {
-    const titleText = stripMarkdownForPreview(stepTitle);
-    const dataText = stripMarkdownForPreview(stepData);
-    const expectedText = stripMarkdownForPreview(expectedResult);
-    return (_jsxs("div", { className: "bn-teststep", "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Step" }) }), _jsx("div", { className: "bn-step-field", children: _jsx("div", { className: "bn-step-editor bn-step-editor--multiline bn-step-editor--preview", children: titleText || " " }) }), dataText ? (_jsx("div", { className: "bn-step-field", children: _jsx("div", { className: "bn-step-editor bn-step-editor--multiline bn-step-editor--preview", children: dataText }) })) : null, expectedText ? (_jsx("div", { className: "bn-step-field", children: _jsx("div", { className: "bn-step-editor bn-step-editor--multiline bn-step-editor--preview", children: expectedText }) })) : null] })] }));
+function TestStepPreview({ blockId, stepNumber, viewMode, stepTitle, stepData, expectedResult, }) {
+    const compactMode = viewMode === "compact";
+    const hasData = stepData.trim().length > 0;
+    const hasExpected = expectedResult.trim().length > 0;
+    return (_jsxs("div", { className: `bn-teststep${compactMode ? " bn-teststep--compact bn-teststep--collapsed" : ""}`, "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [!compactMode && (_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Step" }) })), _jsx(StepFieldPreview, { value: stepTitle, fieldName: "title" }), hasData ? _jsx(StepFieldPreview, { value: stepData, fieldName: "data" }) : null, hasExpected ? _jsx(StepFieldPreview, { value: expectedResult, fieldName: "expected" }) : null] })] }));
 }
 /**
- * Wrapper that defers mounting the (expensive) interactive step editor until
- * the block scrolls into view. Off-screen steps render {@link TestStepPreview}
- * instead, which is what keeps pasting/loading a large test document fast.
+ * Wrapper that mounts the (expensive) interactive step editor only while the
+ * step is being edited. Every other step renders the read-only
+ * {@link TestStepPreview}, so a document of any size keeps at most one OverType
+ * editor alive — scrolling never mounts or tears down editors, which is what
+ * keeps the list flicker-free (and pasting/loading a large document fast).
  *
  * The step number is tracked here and pushed down as a prop. We subscribe to
  * editor changes but bail out of re-rendering when the number is unchanged, so
@@ -264,13 +290,16 @@ function TestStepPreview({ blockId, stepNumber, stepTitle, stepData, expectedRes
 function TestStepBlock({ block, editor }) {
     // An empty step is almost always a freshly-inserted one that needs to focus
     // its title immediately, so mount its real editor eagerly. Steps with content
-    // (e.g. from a large paste) can safely start as a cheap preview.
+    // start as a cheap read-only preview and upgrade on click/focus.
     const isEmptyStep = !(block.props.stepTitle || "") &&
         !(block.props.stepData || "") &&
         !(block.props.expectedResult || "");
-    const { ref, active, activate, shouldFocusOnActivate } = useDeferredMount({
-        initiallyActive: isEmptyStep,
-    });
+    const viewMode = useStepViewMode();
+    const [editing, setEditing] = useState(isEmptyStep);
+    // Set when editing begins from a click/focus on the preview, so the freshly
+    // mounted editor takes focus (a single click starts editing). Cleared after
+    // the editor consumes it.
+    const focusOnMountRef = useRef(false);
     const [stepNumber, setStepNumber] = useState(() => computeStepNumber(editor.document, block.id));
     useEditorChange(() => {
         // Recompute on change, but bail out of the state update (and therefore the
@@ -280,16 +309,29 @@ function TestStepBlock({ block, editor }) {
         const next = computeStepNumber(editor.document, block.id);
         setStepNumber((prev) => (prev === next ? prev : next));
     }, editor);
-    if (active) {
+    const beginEditing = useCallback(() => {
+        focusOnMountRef.current = true;
+        setEditing(true);
+    }, []);
+    // Mousedown rather than click so the editor mounts before focus settles, and
+    // preventDefault so the browser doesn't move focus to <body> when the preview
+    // (the mousedown target) unmounts mid-click — that stray blur would otherwise
+    // immediately tear the new editor back down.
+    const beginEditingFromPointer = useCallback((event) => {
+        event.preventDefault();
+        beginEditing();
+    }, [beginEditing]);
+    const endEditing = useCallback(() => setEditing(false), []);
+    if (editing) {
         // Empty steps mounted eagerly (freshly inserted) auto-focus their title.
         // A preview upgraded by a click focuses its field too, so a single click
-        // starts editing. Steps upgraded passively (scroll-into-view, hover
-        // pre-warm) must never steal focus.
-        return (_jsx(TestStepContent, { block: block, editor: editor, stepNumber: stepNumber, autoFocusEnabled: isEmptyStep, focusOnMount: shouldFocusOnActivate }));
+        // starts editing. The editor tears back down to a preview when focus
+        // leaves the step (see TestStepContent's blur handling).
+        return (_jsx(TestStepContent, { block: block, editor: editor, stepNumber: stepNumber, viewMode: viewMode, autoFocusEnabled: isEmptyStep, focusOnMount: focusOnMountRef.current, onEditEnd: endEditing }));
     }
-    return (_jsx("div", { ref: ref, onMouseDownCapture: () => activate(true), onFocusCapture: () => activate(true), children: _jsx(TestStepPreview, { blockId: block.id, stepNumber: stepNumber, stepTitle: block.props.stepTitle || "", stepData: block.props.stepData || "", expectedResult: block.props.expectedResult || "" }) }));
+    return (_jsx("div", { className: "bn-teststep-preview-wrapper", tabIndex: 0, onMouseDownCapture: beginEditingFromPointer, onFocusCapture: beginEditing, children: _jsx(TestStepPreview, { blockId: block.id, stepNumber: stepNumber, viewMode: viewMode, stepTitle: block.props.stepTitle || "", stepData: block.props.stepData || "", expectedResult: block.props.expectedResult || "" }) }));
 }
-function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false, focusOnMount = false, }) {
+function TestStepContent({ block, editor, stepNumber, viewMode, autoFocusEnabled = false, focusOnMount = false, onEditEnd, }) {
     // When a preview is upgraded by a click, focus its primary field once on
     // mount so a single click starts editing (caret at end).
     const mountFocusSignal = focusOnMount ? 1 : 0;
@@ -303,12 +345,8 @@ function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false,
     const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
     const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
     const uploadImage = useStepImageUpload();
-    const [viewMode, setViewMode] = useState(() => readStepViewMode());
     const containerRef = useRef(null);
     const [forceVertical, setForceVertical] = useState(false);
-    // In compact mode each step collapses to a reading-focused row and only
-    // expands to the full editing layout while one of its fields has focus.
-    const [expanded, setExpanded] = useState(false);
     useEffect(() => {
         var _a;
         const el = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -324,28 +362,38 @@ function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false,
     }, []);
     const compactMode = viewMode === "compact";
     const effectiveHorizontal = viewMode === "horizontal" && !forceVertical;
-    // Compact steps render the vertical layout but collapse their chrome until
-    // a field gains focus, at which point the step expands to "normal" editing.
-    const compactCollapsed = compactMode && !expanded;
+    // A mounted step is, by definition, the one being edited, so it always
+    // shows the full editing layout — the collapsed reading row is now the
+    // read-only preview's job.
+    const compactCollapsed = false;
+    // Tear the editor back down to the read-only preview once focus leaves the
+    // whole step. Re-checked on the next frame so transient blurs (clicking a
+    // toolbar button, or the link popover that portals to <body>) don't
+    // collapse an active edit. Edits persist to block props on change, so
+    // unmounting never loses data. Re-bound when the layout (and thus the root
+    // element) changes so it always listens on the live root.
     useEffect(() => {
-        if (typeof window === "undefined") {
+        const root = containerRef.current;
+        if (!root || !onEditEnd) {
             return;
         }
-        const handleStorage = (event) => {
-            if (event.key === VIEW_MODE_KEY) {
-                setViewMode(readStepViewMode());
-            }
-        };
-        const handleLocal = () => {
-            setViewMode(readStepViewMode());
+        const handleFocusOut = () => {
+            // Defer to the next frame so focus moving *within* the step (or to a
+            // popover that portals to <body>, e.g. the link editor) has settled
+            // before we decide whether editing has really ended.
+            requestAnimationFrame(() => {
+                const active = document.activeElement;
+                if (active &&
+                    (root.contains(active) ||
+                        active.closest(".bn-popover-content, .bn-form-popover, [role='dialog']"))) {
+                    return;
+                }
+                onEditEnd();
+            });
         };
-        window.addEventListener("storage", handleStorage);
-        window.addEventListener("bn-step-view-mode", handleLocal);
-        return () => {
-            window.removeEventListener("storage", handleStorage);
-            window.removeEventListener("bn-step-view-mode", handleLocal);
-        };
-    }, []);
+        root.addEventListener("focusout", handleFocusOut);
+        return () => root.removeEventListener("focusout", handleFocusOut);
+    }, [onEditEnd, effectiveHorizontal]);
     const combinedStepValue = useMemo(() => {
         if (!stepData) {
             return stepTitle;
@@ -455,28 +503,13 @@ function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false,
             next = "vertical";
         }
         writeStepViewMode(next);
-        setViewMode(next);
+        // The shared useStepViewMode hook (in every step, including this one)
+        // listens for this event and re-reads the mode, so we don't track it
+        // locally here.
         if (typeof window !== "undefined") {
             window.dispatchEvent(new Event("bn-step-view-mode"));
         }
     }, [viewMode, forceVertical]);
-    const handleContentFocusCapture = useCallback(() => {
-        if (viewMode === "compact") {
-            setExpanded(true);
-        }
-    }, [viewMode]);
-    const handleContentBlurCapture = useCallback((event) => {
-        if (viewMode !== "compact") {
-            return;
-        }
-        // Keep the step expanded while focus stays inside it (e.g. moving to a
-        // toolbar or action button); collapse only when focus leaves entirely.
-        const nextTarget = event.relatedTarget;
-        if (nextTarget && event.currentTarget.contains(nextTarget)) {
-            return;
-        }
-        setExpanded(false);
-    }, [viewMode]);
     const [dataFocusSignal] = useState(0);
     const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
     const handleShowExpected = useCallback(() => {
@@ -500,7 +533,7 @@ function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false,
     if (effectiveHorizontal) {
         return (_jsx(StepHorizontalView, { ref: containerRef, blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: viewToggleButton, focusSignal: mountFocusSignal }));
     }
-    return (_jsxs("div", { className: `bn-teststep${compactMode ? " bn-teststep--compact" : ""}${compactCollapsed ? " bn-teststep--collapsed" : ""}`, "data-block-id": block.id, ref: containerRef, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", onFocus: handleContentFocusCapture, onBlur: handleContentBlurCapture, children: [_jsxs("div", { className: "bn-teststep__header", children: [!compactMode && _jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: autoFocusEnabled && stepTitle.length === 0, focusSignal: mountFocusSignal, multiline: true, disableNewlines: true, enableAutocomplete: true, fieldName: "title", compact: compactCollapsed, compactMode: compactMode, suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+    return (_jsxs("div", { className: `bn-teststep${compactMode ? " bn-teststep--compact" : ""}${compactCollapsed ? " bn-teststep--collapsed" : ""}`, "data-block-id": block.id, ref: containerRef, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [!compactMode && _jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: autoFocusEnabled && stepTitle.length === 0, focusSignal: mountFocusSignal, multiline: true, disableNewlines: true, enableAutocomplete: true, fieldName: "title", compact: compactCollapsed, compactMode: compactMode, suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                             if (!uploadImage) {
                                 return;
                             }

package/package/editor/blocks/stepField.d.ts

@@ -67,5 +67,16 @@ export declare function applyInlineExclusion(formatting: FormattingMeta[], links
     links: LinkMeta[];
 };
 export declare function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: FormattingMeta[]): string;
+/**
+ * Lightweight, non-interactive stand-in for {@link StepField}. Mounts no
+ * OverType editor, observers, or event handlers — just a styled
+ * `.bn-step-editor--preview` box whose markdown is rendered declaratively. Used
+ * for every step that isn't currently being edited.
+ */
+export declare function StepFieldPreview({ value, fieldName, multiline, }: {
+    value: string;
+    fieldName?: string;
+    multiline?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function StepField({ label, showLabel, labelToggle, labelAction, placeholder, value, onChange, autoFocus, focusSignal, multiline, disableNewlines, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, compact, compactMode, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package/editor/blocks/stepField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import OverType from "overtype";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useComponentsContext } from "@blocknote/react";
 import { EditLinkMenuItems } from "@blocknote/react";
 import { useStepAutocomplete } from "../stepAutocomplete";
@@ -15,6 +15,12 @@ const READ_ONLY_ALLOWED_KEYS = new Set([
 ]);
 const AUTOCOMPLETE_TRIGGER_KEYS = new Set([" ", "Space"]);
 const markdownParser = OverType.MarkdownParser;
+/**
+ * `useLayoutEffect` that degrades to `useEffect` outside the browser so SSR
+ * doesn't warn. Static previews and the OverType mount run pre-paint to avoid a
+ * blank/jumping frame on the click→edit swap.
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function ImageUploadIcon() {
     return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12.667 2C13.0335 2.00008 13.3474 2.13057 13.6084 2.3916C13.8694 2.65264 13.9999 2.96648 14 3.33301V12.667C13.9999 13.0335 13.8694 13.3474 13.6084 13.6084C13.3474 13.8694 13.0335 13.9999 12.667 14H3.33301C2.96648 13.9999 2.65264 13.8694 2.3916 13.6084C2.13057 13.3474 2.00008 13.0335 2 12.667V3.33301C2.00008 2.96648 2.13057 2.65264 2.3916 2.3916C2.65264 2.13057 2.96648 2.00008 3.33301 2H12.667ZM3.33301 12.667H12.667V3.33301H3.33301V12.667ZM12 11.333H4L6 8.66699L7.5 10.667L9.5 8L12 11.333ZM5.66699 4.66699C5.94455 4.66707 6.18066 4.76375 6.375 4.95801C6.56944 5.15245 6.66699 5.38921 6.66699 5.66699C6.66692 5.94463 6.56937 6.18063 6.375 6.375C6.18063 6.56937 5.94463 6.66692 5.66699 6.66699C5.38921 6.66699 5.15245 6.56944 4.95801 6.375C4.76375 6.18066 4.66707 5.94455 4.66699 5.66699C4.66699 5.38921 4.76356 5.15245 4.95801 4.95801C5.15245 4.76356 5.38921 4.66699 5.66699 4.66699Z", fill: "currentColor" }) }));
 }
@@ -532,6 +538,107 @@ function markdownToPlainText(markdown) {
         return markdown.replace(/!\[[^\]]*]\([^)]+\)/g, "").replace(/\[[^\]]*]\([^)]+\)/g, "").replace(/[*_`~]/g, "").replace(/\s+/g, " ").trim();
     }
 }
+const IMAGE_SYNTAX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+/**
+ * Render a run of plain text, turning any `![alt](url)` markdown into real
+ * `<img>` elements. Returns a string when there are no images (so simple text
+ * stays a plain text node), otherwise a keyed array of strings and images.
+ */
+function renderTextWithImages(text, key) {
+    if (!text.includes("![")) {
+        return text;
+    }
+    const nodes = [];
+    IMAGE_SYNTAX.lastIndex = 0;
+    let last = 0;
+    let part = 0;
+    let match;
+    while ((match = IMAGE_SYNTAX.exec(text)) !== null) {
+        if (match.index > last) {
+            nodes.push(_jsx(Fragment, { children: text.slice(last, match.index) }, `${key}-t${part++}`));
+        }
+        nodes.push(_jsx("img", { src: match[2], alt: match[1] || "Step image" }, `${key}-i${part++}`));
+        last = match.index + match[0].length;
+    }
+    if (last < text.length) {
+        nodes.push(_jsx(Fragment, { children: text.slice(last) }, `${key}-t${part++}`));
+    }
+    return nodes;
+}
+/**
+ * Render a step field's markdown as a faithful, read-only reading view: the same
+ * clean text + bold/italic/code/link decorations + inline images the live
+ * OverType preview shows, but as plain React children (no editor, no refs, no
+ * imperative DOM — BlockNote's node-view renderer doesn't attach refs the way a
+ * normal React commit does, so the content must be declarative).
+ *
+ * Decorations are applied by slicing the plain text at every formatting/link
+ * boundary and wrapping each segment in the same `step-preview-*` elements the
+ * live editor uses, so all existing CSS applies unchanged.
+ */
+function renderStepFieldContent(value) {
+    const { plainText, links, formatting } = stripInlineMarkdown(value);
+    if (!plainText) {
+        return null;
+    }
+    if (formatting.length === 0 && links.length === 0) {
+        return renderTextWithImages(plainText, "p");
+    }
+    const len = plainText.length;
+    const points = new Set([0, len]);
+    for (const f of formatting) {
+        points.add(Math.max(0, f.start));
+        points.add(Math.min(len, f.end));
+    }
+    for (const l of links) {
+        points.add(Math.max(0, l.start));
+        points.add(Math.min(len, l.end));
+    }
+    const sorted = [...points].sort((a, b) => a - b);
+    const out = [];
+    for (let i = 0; i < sorted.length - 1; i++) {
+        const a = sorted[i];
+        const b = sorted[i + 1];
+        if (a >= b) {
+            continue;
+        }
+        const text = plainText.slice(a, b);
+        const fmts = new Set(formatting.filter((f) => f.start <= a && f.end >= b).map((f) => f.type));
+        const link = links.find((l) => l.start <= a && l.end >= b);
+        let node = renderTextWithImages(text, `s${i}`);
+        if (fmts.has("code")) {
+            node = _jsx("code", { className: "step-preview-code", children: node });
+        }
+        if (fmts.has("italic")) {
+            node = _jsx("em", { className: "step-preview-italic", children: node });
+        }
+        if (fmts.has("bold")) {
+            node = _jsx("strong", { className: "step-preview-bold", children: node });
+        }
+        if (link) {
+            node = (_jsx("a", { className: "step-preview-link", href: link.url, children: node }));
+        }
+        out.push(_jsx(Fragment, { children: node }, i));
+    }
+    return out;
+}
+/**
+ * Lightweight, non-interactive stand-in for {@link StepField}. Mounts no
+ * OverType editor, observers, or event handlers — just a styled
+ * `.bn-step-editor--preview` box whose markdown is rendered declaratively. Used
+ * for every step that isn't currently being edited.
+ */
+export function StepFieldPreview({ value, fieldName, multiline = true, }) {
+    const content = useMemo(() => renderStepFieldContent(value), [value]);
+    const editorClassName = [
+        "bn-step-editor",
+        multiline ? "bn-step-editor--multiline" : "",
+        "bn-step-editor--preview",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", { className: "bn-step-field", children: _jsx("div", { className: editorClassName, "data-step-field": fieldName, children: content }) }));
+}
 export function StepField({ label, showLabel = true, labelToggle, labelAction, placeholder, value, onChange, autoFocus, focusSignal, multiline = false, disableNewlines = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, onFieldFocus, compact = false, compactMode = false, }) {
     var _a, _b;
     const stepSuggestions = useStepAutocomplete();
@@ -544,6 +651,10 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     const autoFocusRef = useRef(false);
     const pendingFocusRef = useRef(false);
     const initialValueRef = useRef(value);
+    // Read at OverType init so the editor mounts already-collapsed in compact
+    // mode (no tall first frame before the compact layout effect runs).
+    const compactModeRef = useRef(compactMode);
+    compactModeRef.current = compactMode;
     const onChangeRef = useRef(onChange);
     const [plainTextValue, setPlainTextValue] = useState(() => markdownToPlainText(value));
     const [isFocused, setIsFocused] = useState(false);
@@ -611,7 +722,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         });
         (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, markdown);
     }, [pushUndoSnapshot]);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const container = editorContainerRef.current;
         if (!container) {
             return;
@@ -629,11 +740,16 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             value: plainText,
             placeholder: resolvedPlaceholder,
             autoResize: multiline,
-            minHeight: multiline ? "4rem" : "2.5rem",
+            // Seed the compact floor at init so a clicked step paints already
+            // collapsed — the compact layout effect below keeps it in sync after.
+            minHeight: compactModeRef.current ? "0px" : multiline ? "4rem" : "2.5rem",
             padding: "0.5rem 0.75rem",
             fontSize: "0.95rem",
             onChange: handleEditorChange,
         });
+        if (compactModeRef.current && instance.textarea) {
+            instance.textarea.rows = 1;
+        }
         // Monkey-patch updatePreview to add link highlights
         const originalUpdatePreview = instance.updatePreview.bind(instance);
         instance.updatePreview = function () {
@@ -767,7 +883,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     // so caret and value survive. Driven by the stable compactMode flag (not
     // `compact`) so collapsed and expanded share one height — focusing never
     // shifts the layout.
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a;
         const instance = editorInstanceRef.current;
         if (!(instance === null || instance === void 0 ? void 0 : instance.options)) {

package/package/styles.css

@@ -631,6 +631,30 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   vertical-align: 1px;
 }
 
+/* Read-only preview parity for compact reading rows: the live compact field
+   tightens padding on the OverType layers (above), which the static preview
+   doesn't have, so apply the same padding to the flow `--preview` box. */
+.bn-teststep--compact .bn-step-editor--preview {
+  padding: 4px 12px;
+}
+
+/* Same "Expected" reading badge for the static preview. The static preview is a
+   single flow box (not OverType's per-line divs), so the badge goes on its own
+   ::before. */
+.bn-teststep--collapsed .bn-step-editor--preview[data-step-field="expected"]::before {
+  content: "Expected";
+  display: inline-block;
+  margin-right: 8px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--step-bg-light);
+  color: var(--step-muted);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  vertical-align: 1px;
+}
+
 .bn-teststep__view-toggle--compact svg {
   color: var(--step-muted);
 }
@@ -1432,6 +1456,58 @@ html.dark .bn-step-editor--preview {
   color: #e5e5e5;
 }
 
+/* Wrapper around a non-edited step's read-only preview. Focusable so Tab enters
+   a step (which mounts its editor); no lingering outline since focus moves to
+   the freshly-mounted field immediately. */
+.bn-teststep-preview-wrapper {
+  outline: none;
+}
+
+/* Inline decorations inside the read-only preview mirror the live OverType
+   preview, which uses the same step-preview-* classes. The live rules are
+   scoped to `.overtype-wrapper .overtype-preview` (which the static preview
+   doesn't render), so the same declarations are repeated here for the flow
+   `--preview` container. */
+.bn-step-editor--preview a.step-preview-link {
+  color: #4f46e5;
+  text-decoration: underline;
+  pointer-events: none;
+}
+
+.bn-step-editor--preview strong.step-preview-bold {
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit;
+  color: inherit;
+}
+
+.bn-step-editor--preview em.step-preview-italic {
+  font-style: italic;
+  color: inherit;
+}
+
+.bn-step-editor--preview code.step-preview-code {
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: rgb(146, 64, 14);
+}
+
+.bn-step-editor--preview img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.65rem;
+  margin: 0.5rem 0;
+  pointer-events: none;
+}
+
+html.dark .bn-step-editor--preview code.step-preview-code {
+  color: rgba(251, 191, 36, 1);
+}
+
+html.dark .bn-step-editor--preview a.step-preview-link {
+  color: rgba(129, 140, 248, 1);
+}
+
 .bn-step-editor.bn-step-editor--focused {
   outline: none;
   box-shadow: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.74",
+  "version": "0.4.75",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",