testomatio-editor-blocks 0.4.73 → 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/editor/customMarkdownConverter.js

@@ -43,8 +43,46 @@ function escapeMarkdown(text) {
     result += text.slice(lastIndex).replace(SPECIAL_CHAR_REGEX, "\\$1");
     return result;
 }
-function escapeStepContent(text) {
-    return text.replace(/\./g, "\\.");
+// Creates a stateful escaper that escapes dots outside Markdown code while
+// leaving code spans (inline `…`, fenced ``` … ```) verbatim — backslash
+// escapes are ignored inside code, so `\.` would render literally.
+//
+// The state (an open, not-yet-closed backtick run) carries across calls so a
+// fence can be opened in one segment and closed in another. This matters
+// because the step editor splits a multi-line code block across props: the
+// opening ``` lands in `stepTitle` while the body and closing ``` land in
+// `stepData`.
+function makeStepEscaper() {
+    let fence = null;
+    return (text) => {
+        let result = "";
+        let i = 0;
+        while (i < text.length) {
+            if (text[i] === "`") {
+                let ticks = 0;
+                while (text[i + ticks] === "`")
+                    ticks++;
+                const run = "`".repeat(ticks);
+                result += run;
+                i += ticks;
+                if (fence === null) {
+                    fence = run; // open a code span/fence
+                }
+                else if (fence === run) {
+                    fence = null; // matching run closes it
+                }
+                continue;
+            }
+            if (fence !== null) {
+                result += text[i]; // inside code — copy verbatim
+                i++;
+                continue;
+            }
+            result += text[i] === "." ? "\\." : text[i];
+            i++;
+        }
+        return result;
+    };
 }
 function stripHtmlWrappers(text) {
     return text
@@ -380,53 +418,35 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 .join(" ");
             const normalizedExpectedForCheck = stripExpectedPrefix(expectedResult).trim();
             const hasContent = stepData.length > 0 || normalizedExpectedForCheck.length > 0;
+            // One escaper threads code-fence state from the title into the data: the
+            // editor splits a multi-line code block so the opening ``` sits in the
+            // title and the body + closing ``` sit in the data. Both must be treated
+            // as a single code region so their dots stay literal.
+            const escapeBody = makeStepEscaper();
             if (normalizedTitle.length > 0 || hasContent) {
                 const listStyle = (_o = block.props.listStyle) !== null && _o !== void 0 ? _o : "bullet";
                 const prefix = listStyle === "ordered" ? `${(stepIndex !== null && stepIndex !== void 0 ? stepIndex : 0) + 1}.` : "*";
-                lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeStepContent(normalizedTitle)}` : `${prefix} `);
+                lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeBody(normalizedTitle)}` : `${prefix} `);
             }
             if (stepData.length > 0) {
-                const dataLines = stepData.split(/\r?\n/);
-                let insideCodeFence = false;
-                dataLines.forEach((dataLine) => {
+                const escaped = escapeBody(stepData);
+                escaped.split(/\r?\n/).forEach((dataLine) => {
                     const trimmedLine = dataLine.trim();
-                    if (trimmedLine.length === 0) {
-                        lines.push("  ");
-                        return;
-                    }
-                    // Don't escape dots inside fenced code blocks (or on the fence lines
-                    // themselves) — Markdown ignores backslash escapes there, so `\.`
-                    // would render literally.
-                    const isFence = trimmedLine.startsWith("```");
-                    const content = insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
-                    lines.push(`  ${content}`);
-                    if (isFence) {
-                        insideCodeFence = !insideCodeFence;
-                    }
+                    lines.push(trimmedLine.length === 0 ? "  " : `  ${trimmedLine}`);
                 });
             }
             const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
             if (normalizedExpected.length > 0) {
-                const expectedLines = normalizedExpected.split(/\r?\n/);
+                const escaped = makeStepEscaper()(normalizedExpected);
                 const label = "*Expected result*";
-                let insideCodeFence = false;
-                expectedLines.forEach((expectedLine, index) => {
+                let isFirst = true;
+                escaped.split(/\r?\n/).forEach((expectedLine) => {
                     const trimmedLine = expectedLine.trim();
                     if (trimmedLine.length === 0) {
                         return;
                     }
-                    // As with step data, leave dots untouched inside fenced code blocks.
-                    const isFence = trimmedLine.startsWith("```");
-                    const content = insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
-                    if (index === 0) {
-                        lines.push(`  ${label}: ${content}`);
-                    }
-                    else {
-                        lines.push(`  ${content}`);
-                    }
-                    if (isFence) {
-                        insideCodeFence = !insideCodeFence;
-                    }
+                    lines.push(isFirst ? `  ${label}: ${trimmedLine}` : `  ${trimmedLine}`);
+                    isFirst = false;
                 });
             }
             return lines;