testomatio-editor-blocks 0.4.66 → 0.4.67

package/package/editor/blocks/step.d.ts

@@ -34,6 +34,11 @@ export declare function addSnippetBlock(editor: {
     document: any[];
     insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
 }): string | null;
+/**
+ * A test step's 1-based position within its group: count back over preceding
+ * steps (blank lines don't break the run) until a non-step block.
+ */
+export declare function computeStepNumber(allBlocks: any[], blockId: string): number;
 export declare const stepBlock: {
     config: {
         readonly type: "testStep";

package/package/editor/blocks/step.js

@@ -3,6 +3,7 @@ import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField } 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";
@@ -207,6 +208,277 @@ export function addSnippetBlock(editor) {
     const inserted = editor.insertBlocks([stepsHeading, emptySnippet], lastBlock.id, "after");
     return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
 }
+/**
+ * A test step's 1-based position within its group: count back over preceding
+ * steps (blank lines don't break the run) until a non-step block.
+ */
+export function computeStepNumber(allBlocks, blockId) {
+    const blockIndex = allBlocks.findIndex((b) => b.id === blockId);
+    if (blockIndex < 0)
+        return 1;
+    let count = 1;
+    for (let i = blockIndex - 1; i >= 0; i--) {
+        const b = allBlocks[i];
+        if (b.type === "testStep") {
+            count++;
+        }
+        else if (isEmptyParagraph(b)) {
+            continue;
+        }
+        else {
+            break;
+        }
+    }
+    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.
+ */
+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] })] }));
+}
+/**
+ * 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.
+ *
+ * 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
+ * ordinary text edits don't re-render every step in the document.
+ */
+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.
+    const isEmptyStep = !(block.props.stepTitle || "") &&
+        !(block.props.stepData || "") &&
+        !(block.props.expectedResult || "");
+    const { ref, active, activate, shouldFocusOnActivate } = useDeferredMount({
+        initiallyActive: isEmptyStep,
+    });
+    const [stepNumber, setStepNumber] = useState(() => computeStepNumber(editor.document, block.id));
+    useEditorChange(() => {
+        // Recompute on change, but bail out of the state update (and therefore the
+        // re-render) when the number is unchanged. This is the key win: ordinary
+        // text edits leave every step's number untouched, so they don't re-render
+        // the whole step list.
+        const next = computeStepNumber(editor.document, block.id);
+        setStepNumber((prev) => (prev === next ? prev : next));
+    }, editor);
+    if (active) {
+        // 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 }));
+    }
+    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 || "" }) }));
+}
+function TestStepContent({ block, editor, stepNumber, autoFocusEnabled = false, focusOnMount = false, }) {
+    // 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;
+    const stepTitle = block.props.stepTitle || "";
+    const stepData = block.props.stepData || "";
+    const expectedResult = block.props.expectedResult || "";
+    const expectedHasContent = expectedResult.trim().length > 0;
+    /* storedExpectedCollapsed removed — currently unused */
+    const dataHasContent = stepData.trim().length > 0;
+    const [isExpectedVisible, setIsExpectedVisible] = useState(expectedHasContent);
+    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);
+    useEffect(() => {
+        var _a;
+        const el = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!el)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setForceVertical(entry.contentRect.width < FORCE_VERTICAL_WIDTH);
+            }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const effectiveVertical = forceVertical || viewMode === "vertical";
+    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);
+        };
+    }, []);
+    const combinedStepValue = useMemo(() => {
+        if (!stepData) {
+            return stepTitle;
+        }
+        return stepTitle ? `${stepTitle}\n${stepData}` : stepData;
+    }, [stepData, stepTitle]);
+    const handleCombinedStepChange = useCallback((next) => {
+        if (next === combinedStepValue) {
+            return;
+        }
+        const [nextTitle = "", ...rest] = next.split("\n");
+        const nextData = rest.join("\n");
+        editor.updateBlock(block.id, {
+            props: {
+                stepTitle: nextTitle,
+                stepData: nextData,
+            },
+        });
+    }, [block.id, combinedStepValue, editor]);
+    const handleStepTitleChange = useCallback((next) => {
+        if (next === stepTitle) {
+            return;
+        }
+        editor.updateBlock(block.id, {
+            props: {
+                stepTitle: next,
+            },
+        });
+    }, [editor, block.id, stepTitle]);
+    const handleStepDataChange = useCallback((next) => {
+        if (next === stepData) {
+            return;
+        }
+        editor.updateBlock(block.id, {
+            props: {
+                stepData: next,
+            },
+        });
+    }, [editor, block.id, stepData]);
+    const handleShowData = useCallback(() => {
+        setIsDataVisible(true);
+        setShouldFocusDataField(true);
+    }, []);
+    const handleHideData = useCallback(() => {
+        setIsDataVisible(false);
+        editor.updateBlock(block.id, { props: { stepData: "" } });
+    }, [editor, block.id]);
+    const handleExpectedChange = useCallback((next) => {
+        if (next === expectedResult) {
+            return;
+        }
+        editor.updateBlock(block.id, {
+            props: {
+                expectedResult: next,
+            },
+        });
+    }, [editor, block.id, expectedResult]);
+    const handleInsertNextStep = useCallback(() => {
+        var _a;
+        const allBlocks = editor.document;
+        const idx = allBlocks.findIndex((b) => b.id === block.id);
+        const next = idx >= 0 ? allBlocks[idx + 1] : null;
+        if (next && isEmptyParagraph(next)) {
+            editor.removeBlocks([next.id]);
+        }
+        const currentListStyle = (_a = block.props.listStyle) !== null && _a !== void 0 ? _a : "bullet";
+        editor.insertBlocks([
+            {
+                type: "testStep",
+                props: {
+                    stepTitle: "",
+                    stepData: "",
+                    expectedResult: "",
+                    listStyle: currentListStyle,
+                },
+                children: [],
+            },
+        ], block.id, "after");
+    }, [editor, block.id, block.props]);
+    const handleFieldFocus = useCallback(() => {
+        var _a, _b, _c;
+        const selection = editor.getSelection();
+        const blocks = (_a = selection === null || selection === void 0 ? void 0 : selection.blocks) !== null && _a !== void 0 ? _a : [];
+        const firstId = (_b = blocks[0]) === null || _b === void 0 ? void 0 : _b.id;
+        const lastId = (_c = blocks[blocks.length - 1]) === null || _c === void 0 ? void 0 : _c.id;
+        if (firstId === block.id && lastId === block.id) {
+            return;
+        }
+        try {
+            editor.setSelection(block.id, block.id);
+        }
+        catch {
+            //
+        }
+    }, [editor, block.id]);
+    const handleToggleView = useCallback(() => {
+        const next = viewMode === "horizontal" ? "vertical" : "horizontal";
+        writeStepViewMode(next);
+        setViewMode(next);
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new Event("bn-step-view-mode"));
+        }
+    }, [viewMode]);
+    const [dataFocusSignal] = useState(0);
+    const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
+    const handleShowExpected = useCallback(() => {
+        setIsExpectedVisible(true);
+        setExpectedFocusSignal((value) => value + 1);
+        writeExpectedCollapsedPreference(false);
+    }, []);
+    const handleHideExpected = useCallback(() => {
+        setIsExpectedVisible(false);
+        writeExpectedCollapsedPreference(true);
+        editor.updateBlock(block.id, { props: { expectedResult: "" } });
+    }, [editor, block.id]);
+    const viewToggleButton = (_jsx("button", { type: "button", className: `bn-teststep__view-toggle${!effectiveVertical ? " bn-teststep__view-toggle--horizontal" : ""}${forceVertical ? " bn-teststep__view-toggle--disabled" : ""}`, "data-tooltip": forceVertical ? "Not enough space for horizontal view" : "Switch step view", "aria-label": forceVertical ? "Not enough space for horizontal view" : "Switch step view", onClick: forceVertical ? undefined : handleToggleView, "aria-disabled": forceVertical, tabIndex: -1, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }));
+    if (!effectiveVertical) {
+        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", "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: [_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", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+                            if (!uploadImage) {
+                                return;
+                            }
+                            setIsDataVisible(true);
+                            setShouldFocusDataField(true);
+                            try {
+                                const result = await uploadImage(file);
+                                if (result === null || result === void 0 ? void 0 : result.url) {
+                                    const nextValue = stepData.trim().length > 0 ? `${stepData}\n![](${result.url})` : `![](${result.url})`;
+                                    editor.updateBlock(block.id, {
+                                        props: {
+                                            stepData: nextValue,
+                                        },
+                                    });
+                                }
+                            }
+                            catch (error) {
+                                console.error("Failed to upload image to Step Data", error);
+                            }
+                        } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide step data", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" }), value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide expected result", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" }), value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
+}
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",
@@ -225,217 +497,5 @@ export const stepBlock = createReactBlockSpec({
         },
     },
 }, {
-    render: ({ block, editor }) => {
-        const stepTitle = block.props.stepTitle || "";
-        const stepData = block.props.stepData || "";
-        const expectedResult = block.props.expectedResult || "";
-        const expectedHasContent = expectedResult.trim().length > 0;
-        /* storedExpectedCollapsed removed — currently unused */
-        const dataHasContent = stepData.trim().length > 0;
-        const [isExpectedVisible, setIsExpectedVisible] = useState(expectedHasContent);
-        const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
-        const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
-        const [documentVersion, setDocumentVersion] = useState(0);
-        const uploadImage = useStepImageUpload();
-        const [viewMode, setViewMode] = useState(() => readStepViewMode());
-        const containerRef = useRef(null);
-        const [forceVertical, setForceVertical] = useState(false);
-        useEffect(() => {
-            var _a;
-            const el = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-            if (!el)
-                return;
-            const observer = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    setForceVertical(entry.contentRect.width < FORCE_VERTICAL_WIDTH);
-                }
-            });
-            observer.observe(el);
-            return () => observer.disconnect();
-        }, []);
-        const effectiveVertical = forceVertical || viewMode === "vertical";
-        // Calculate step number based on position in document
-        const stepNumber = useMemo(() => {
-            const allBlocks = editor.document;
-            const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
-            if (blockIndex < 0)
-                return 1;
-            let count = 1;
-            for (let i = blockIndex - 1; i >= 0; i--) {
-                const b = allBlocks[i];
-                if (b.type === "testStep") {
-                    count++;
-                }
-                else if (isEmptyParagraph(b)) {
-                    continue;
-                }
-                else {
-                    break;
-                }
-            }
-            return count;
-        }, [block.id, documentVersion, editor.document]);
-        useEditorChange(() => {
-            setDocumentVersion((version) => version + 1);
-        }, editor);
-        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);
-            };
-        }, []);
-        const combinedStepValue = useMemo(() => {
-            if (!stepData) {
-                return stepTitle;
-            }
-            return stepTitle ? `${stepTitle}\n${stepData}` : stepData;
-        }, [stepData, stepTitle]);
-        const handleCombinedStepChange = useCallback((next) => {
-            if (next === combinedStepValue) {
-                return;
-            }
-            const [nextTitle = "", ...rest] = next.split("\n");
-            const nextData = rest.join("\n");
-            editor.updateBlock(block.id, {
-                props: {
-                    stepTitle: nextTitle,
-                    stepData: nextData,
-                },
-            });
-        }, [block.id, combinedStepValue, editor]);
-        const handleStepTitleChange = useCallback((next) => {
-            if (next === stepTitle) {
-                return;
-            }
-            editor.updateBlock(block.id, {
-                props: {
-                    stepTitle: next,
-                },
-            });
-        }, [editor, block.id, stepTitle]);
-        const handleStepDataChange = useCallback((next) => {
-            if (next === stepData) {
-                return;
-            }
-            editor.updateBlock(block.id, {
-                props: {
-                    stepData: next,
-                },
-            });
-        }, [editor, block.id, stepData]);
-        const handleShowData = useCallback(() => {
-            setIsDataVisible(true);
-            setShouldFocusDataField(true);
-        }, []);
-        const handleHideData = useCallback(() => {
-            setIsDataVisible(false);
-            editor.updateBlock(block.id, { props: { stepData: "" } });
-        }, [editor, block.id]);
-        const handleExpectedChange = useCallback((next) => {
-            if (next === expectedResult) {
-                return;
-            }
-            editor.updateBlock(block.id, {
-                props: {
-                    expectedResult: next,
-                },
-            });
-        }, [editor, block.id, expectedResult]);
-        const handleInsertNextStep = useCallback(() => {
-            var _a;
-            const allBlocks = editor.document;
-            const idx = allBlocks.findIndex((b) => b.id === block.id);
-            const next = idx >= 0 ? allBlocks[idx + 1] : null;
-            if (next && isEmptyParagraph(next)) {
-                editor.removeBlocks([next.id]);
-            }
-            const currentListStyle = (_a = block.props.listStyle) !== null && _a !== void 0 ? _a : "bullet";
-            editor.insertBlocks([
-                {
-                    type: "testStep",
-                    props: {
-                        stepTitle: "",
-                        stepData: "",
-                        expectedResult: "",
-                        listStyle: currentListStyle,
-                    },
-                    children: [],
-                },
-            ], block.id, "after");
-        }, [editor, block.id, block.props]);
-        const handleFieldFocus = useCallback(() => {
-            var _a, _b, _c;
-            const selection = editor.getSelection();
-            const blocks = (_a = selection === null || selection === void 0 ? void 0 : selection.blocks) !== null && _a !== void 0 ? _a : [];
-            const firstId = (_b = blocks[0]) === null || _b === void 0 ? void 0 : _b.id;
-            const lastId = (_c = blocks[blocks.length - 1]) === null || _c === void 0 ? void 0 : _c.id;
-            if (firstId === block.id && lastId === block.id) {
-                return;
-            }
-            try {
-                editor.setSelection(block.id, block.id);
-            }
-            catch {
-                //
-            }
-        }, [editor, block.id]);
-        const handleToggleView = useCallback(() => {
-            const next = viewMode === "horizontal" ? "vertical" : "horizontal";
-            writeStepViewMode(next);
-            setViewMode(next);
-            if (typeof window !== "undefined") {
-                window.dispatchEvent(new Event("bn-step-view-mode"));
-            }
-        }, [viewMode]);
-        const [dataFocusSignal] = useState(0);
-        const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
-        const handleShowExpected = useCallback(() => {
-            setIsExpectedVisible(true);
-            setExpectedFocusSignal((value) => value + 1);
-            writeExpectedCollapsedPreference(false);
-        }, []);
-        const handleHideExpected = useCallback(() => {
-            setIsExpectedVisible(false);
-            writeExpectedCollapsedPreference(true);
-            editor.updateBlock(block.id, { props: { expectedResult: "" } });
-        }, [editor, block.id]);
-        const viewToggleButton = (_jsx("button", { type: "button", className: `bn-teststep__view-toggle${!effectiveVertical ? " bn-teststep__view-toggle--horizontal" : ""}${forceVertical ? " bn-teststep__view-toggle--disabled" : ""}`, "data-tooltip": forceVertical ? "Not enough space for horizontal view" : "Switch step view", "aria-label": forceVertical ? "Not enough space for horizontal view" : "Switch step view", onClick: forceVertical ? undefined : handleToggleView, "aria-disabled": forceVertical, tabIndex: -1, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }));
-        if (!effectiveVertical) {
-            return (_jsx(StepHorizontalView, { ref: containerRef, blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: viewToggleButton }));
-        }
-        return (_jsxs("div", { className: "bn-teststep", "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: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, multiline: true, disableNewlines: true, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
-                                if (!uploadImage) {
-                                    return;
-                                }
-                                setIsDataVisible(true);
-                                setShouldFocusDataField(true);
-                                try {
-                                    const result = await uploadImage(file);
-                                    if (result === null || result === void 0 ? void 0 : result.url) {
-                                        const nextValue = stepData.trim().length > 0 ? `${stepData}\n![](${result.url})` : `![](${result.url})`;
-                                        editor.updateBlock(block.id, {
-                                            props: {
-                                                stepData: nextValue,
-                                            },
-                                        });
-                                    }
-                                }
-                                catch (error) {
-                                    console.error("Failed to upload image to Step Data", error);
-                                }
-                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide step data", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" }), value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide expected result", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" }), value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
-    },
+    render: ({ block, editor }) => (_jsx(TestStepBlock, { block: block, editor: editor })),
 });

package/package/editor/blocks/stepHorizontalView.d.ts

@@ -9,6 +9,7 @@ type StepHorizontalViewProps = {
     onInsertNextStep: () => void;
     onFieldFocus: () => void;
     viewToggle?: ReactNode;
+    focusSignal?: number;
 };
 export declare const StepHorizontalView: import("react").ForwardRefExoticComponent<StepHorizontalViewProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/package/editor/blocks/stepHorizontalView.js

@@ -3,6 +3,6 @@ import { forwardRef } from "react";
 import { StepField } from "./stepField";
 const STEP_PLACEHOLDER = "Enter step name";
 const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result";
-export const StepHorizontalView = forwardRef(function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }, ref) {
-    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, ref: ref, 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__horizontal-fields", children: [_jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Step", value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true }) }), _jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Expected result", labelAction: viewToggle, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus }) })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
+export const StepHorizontalView = forwardRef(function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, focusSignal, }, ref) {
+    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, ref: ref, 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__horizontal-fields", children: [_jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Step", value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, focusSignal: focusSignal, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true }) }), _jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Expected result", labelAction: viewToggle, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus }) })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
 });

package/package/editor/blocks/useDeferredMount.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Defers mounting of expensive block content until the element is at (or near)
+ * the viewport. Heavy blocks (e.g. test steps that each spin up an OverType
+ * editor) render a cheap placeholder first; the real interactive content is
+ * mounted only once the block scrolls into view. This keeps pasting/loading a
+ * large document fast — only the visible steps pay the editor-init cost up
+ * front, the rest are upgraded lazily as the user scrolls.
+ *
+ * Returns a ref to attach to the wrapper element and a boolean that flips to
+ * `true` once (and stays true — we never tear an editor back down).
+ *
+ * `activate(focus)` lets the caller upgrade eagerly on interaction. Passing
+ * `focus: true` (a click/focus on the placeholder) records that the freshly
+ * mounted content should take focus, so a single click on a preview starts
+ * editing. Passive activation (hover pre-warm, scroll-into-view) leaves focus
+ * alone via `shouldFocusOnActivate === false`.
+ */
+export declare function useDeferredMount<T extends HTMLElement>(options?: {
+    rootMargin?: string;
+    initiallyActive?: boolean;
+}): {
+    ref: React.RefObject<T | null>;
+    active: boolean;
+    activate: (focus?: boolean) => void;
+    shouldFocusOnActivate: boolean;
+};

package/package/editor/blocks/useDeferredMount.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * Defers mounting of expensive block content until the element is at (or near)
+ * the viewport. Heavy blocks (e.g. test steps that each spin up an OverType
+ * editor) render a cheap placeholder first; the real interactive content is
+ * mounted only once the block scrolls into view. This keeps pasting/loading a
+ * large document fast — only the visible steps pay the editor-init cost up
+ * front, the rest are upgraded lazily as the user scrolls.
+ *
+ * Returns a ref to attach to the wrapper element and a boolean that flips to
+ * `true` once (and stays true — we never tear an editor back down).
+ *
+ * `activate(focus)` lets the caller upgrade eagerly on interaction. Passing
+ * `focus: true` (a click/focus on the placeholder) records that the freshly
+ * mounted content should take focus, so a single click on a preview starts
+ * editing. Passive activation (hover pre-warm, scroll-into-view) leaves focus
+ * alone via `shouldFocusOnActivate === false`.
+ */
+export function useDeferredMount(options = {}) {
+    const { rootMargin = "300px 0px", initiallyActive = false } = options;
+    const ref = useRef(null);
+    const [active, setActive] = useState(initiallyActive);
+    const activeRef = useRef(active);
+    activeRef.current = active;
+    const focusOnActivateRef = useRef(false);
+    const activate = (focus = false) => {
+        if (activeRef.current)
+            return;
+        if (focus)
+            focusOnActivateRef.current = true;
+        setActive(true);
+    };
+    useEffect(() => {
+        if (activeRef.current)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        // Environments without IntersectionObserver (or SSR) just mount eagerly.
+        if (typeof IntersectionObserver === "undefined") {
+            setActive(true);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setActive(true);
+                observer.disconnect();
+            }
+        }, { rootMargin });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [rootMargin]);
+    return { ref, active, activate, shouldFocusOnActivate: focusOnActivateRef.current };
+}