testomatio-editor-blocks 0.4.51 → 0.4.53

package/package/editor/blocks/step.js

@@ -400,7 +400,7 @@ export const stepBlock = createReactBlockSpec({
             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, 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" }) })] }) }));
+        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 }));
         }

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

@@ -40,6 +40,18 @@ export type FormattingMeta = {
     end: number;
     type: "bold" | "italic" | "code";
 };
+type FormatType = "bold" | "italic" | "code";
+/**
+ * Remove formatting and link entries that conflict with applying `fmtType`
+ * over the half-open range [start, end). Exclusion rules:
+ * - code: exclusive with everything — drops any overlapping formatting and links
+ * - bold/italic: coexist with each other, but exclusive with code and links
+ *   — drops overlapping same-type, overlapping code, and overlapping links
+ */
+export declare function applyInlineExclusion(formatting: FormattingMeta[], links: LinkMeta[], start: number, end: number, fmtType: FormatType): {
+    formatting: FormattingMeta[];
+    links: LinkMeta[];
+};
 export declare function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: FormattingMeta[]): string;
 export declare function StepField({ label, showLabel, labelToggle, labelAction, placeholder, value, onChange, autoFocus, focusSignal, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package/editor/blocks/stepField.js

@@ -18,6 +18,27 @@ const markdownParser = OverType.MarkdownParser;
 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" }) }));
 }
+/**
+ * Remove formatting and link entries that conflict with applying `fmtType`
+ * over the half-open range [start, end). Exclusion rules:
+ * - code: exclusive with everything — drops any overlapping formatting and links
+ * - bold/italic: coexist with each other, but exclusive with code and links
+ *   — drops overlapping same-type, overlapping code, and overlapping links
+ */
+export function applyInlineExclusion(formatting, links, start, end, fmtType) {
+    const overlaps = (a) => !(a.start >= end || a.end <= start);
+    const nextFormatting = formatting.filter((f) => {
+        if (!overlaps(f))
+            return true;
+        if (fmtType === "code")
+            return false;
+        if (f.type === "code")
+            return false;
+        return f.type !== fmtType;
+    });
+    const nextLinks = links.filter((l) => !overlaps(l));
+    return { formatting: nextFormatting, links: nextLinks };
+}
 const UNDO_STACK_LIMIT = 100;
 function getActiveFormats(formatting, selStart, selEnd) {
     const active = new Set();
@@ -965,12 +986,9 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
         }
         else if (start !== end) {
-            // Remove overlapping formatting:
-            // - Code: remove ALL overlapping formatting (code replaces bold/italic)
-            // - Bold/Italic: remove only overlapping formatting of the SAME type
-            formattingRef.current = formattingRef.current.filter((f) => f.start >= end || f.end <= start || (fmtType !== "code" && f.type !== fmtType));
-            // Add formatting for selection
-            formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
+            const cleaned = applyInlineExclusion(formattingRef.current, linksRef.current, start, end, fmtType);
+            formattingRef.current = [...cleaned.formatting, { start, end, type: fmtType }];
+            linksRef.current = cleaned.links;
         }
         else {
             // No selection — nothing to format
@@ -1071,7 +1089,10 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         const adjustedLinks = adjustLinksForEdit(linksRef.current.filter((l) => !(l.start < sel.end && l.end > sel.start)), sel.start, delta);
         const newLink = { start: sel.start, end: sel.start + linkText.length, url };
         linksRef.current = [...adjustedLinks, newLink];
-        formattingRef.current = adjustFormattingForEdit(formattingRef.current, sel.start, delta);
+        // Links are exclusive with bold/italic/code: strip any formatting that
+        // overlaps the original selection before shifting positions.
+        const keptFormatting = formattingRef.current.filter((f) => f.start >= sel.end || f.end <= sel.start);
+        formattingRef.current = adjustFormattingForEdit(keptFormatting, sel.start, delta);
         prevTextRef.current = nextValue;
         isSyncingRef.current = true;
         instance.setValue(nextValue);

package/package/editor/blocks/useAutoResize.js

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRows = 12 }) {
     const frameRef = useRef(0);
     useEffect(() => {
+        var _a;
         if (!textarea || !multiline) {
             return;
         }
@@ -14,19 +15,50 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
             textarea.style.height = `${clampedHeight}px`;
             textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
         };
-        const observer = new MutationObserver(resize);
-        observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+        const mutationObserver = new MutationObserver(resize);
+        mutationObserver.observe(textarea, { childList: true, characterData: true, subtree: true });
+        const resizeObserver = new ResizeObserver(resize);
+        resizeObserver.observe(textarea);
         const handleInput = () => {
             var _a;
             cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
             frameRef.current = requestAnimationFrame(resize);
         };
         textarea.addEventListener("input", handleInput);
-        resize();
+        let cancelled = false;
+        const initialFrame = requestAnimationFrame(() => {
+            frameRef.current = requestAnimationFrame(() => {
+                if (!cancelled)
+                    resize();
+            });
+        });
+        // Re-run resize once the textarea is actually laid out. During drag-drop
+        // remounts the element can be briefly detached, so the initial RAF resize
+        // sees scrollHeight === 0 and clamps to minRows.
+        const intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && !cancelled) {
+                    resize();
+                    intersectionObserver.disconnect();
+                    break;
+                }
+            }
+        });
+        intersectionObserver.observe(textarea);
+        if (typeof document !== "undefined" && ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)) {
+            document.fonts.ready.then(() => {
+                if (!cancelled)
+                    resize();
+            }).catch(() => { });
+        }
         return () => {
             var _a;
-            observer.disconnect();
+            cancelled = true;
+            mutationObserver.disconnect();
+            resizeObserver.disconnect();
+            intersectionObserver.disconnect();
             textarea.removeEventListener("input", handleInput);
+            cancelAnimationFrame(initialFrame);
             cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
         };
     }, [textarea, multiline, minRows, maxRows]);

package/package/editor/customMarkdownConverter.d.ts

@@ -6,8 +6,7 @@ export type CustomPartialBlock = PartialBlock<Schema["blockSchema"], Schema["inl
 export declare function blocksToMarkdown(blocks: CustomEditorBlock[]): string;
 export declare function fixMalformedImageBlocks(blocks: CustomPartialBlock[]): CustomPartialBlock[];
 export interface MarkdownToBlocksOptions {
-    /** When true, every blank line produces an empty paragraph block. */
     preserveBlankLines?: boolean;
 }
-export declare function markdownToBlocks(markdown: string, options?: MarkdownToBlocksOptions): CustomPartialBlock[];
+export declare function markdownToBlocks(markdown: string, _options?: MarkdownToBlocksOptions): CustomPartialBlock[];
 export {};

package/package/editor/customMarkdownConverter.js

@@ -23,6 +23,7 @@ const headingPrefixes = {
     6: "######",
 };
 const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<\\])/g;
+const HTML_COMMENT_REGEX = /<!--[\s\S]*?-->/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
 const EXPECTED_LABEL_REGEX = /^(?:[*_`]*\s*)?(expected(?:\s+result)?)\s*(?:[*_`]*\s*)?\s*[:\-–—]\s*/i;
@@ -30,7 +31,17 @@ const EXPECTED_LABEL_REGEX = /^(?:[*_`]*\s*)?(expected(?:\s+result)?)\s*(?:[*_`]
 const STEP_DATA_LINE_REGEX = /^(?!\s*(?:[*_`]*\s*)?(?:expected(?:\s+result)?)\b).+/i;
 const NUMBERED_STEP_REGEX = /^\d+[.)]\s+/;
 function escapeMarkdown(text) {
-    return text.replace(SPECIAL_CHAR_REGEX, "\\$1");
+    let result = "";
+    let lastIndex = 0;
+    HTML_COMMENT_REGEX.lastIndex = 0;
+    let match;
+    while ((match = HTML_COMMENT_REGEX.exec(text)) !== null) {
+        result += text.slice(lastIndex, match.index).replace(SPECIAL_CHAR_REGEX, "\\$1");
+        result += match[0];
+        lastIndex = match.index + match[0].length;
+    }
+    result += text.slice(lastIndex).replace(SPECIAL_CHAR_REGEX, "\\$1");
+    return result;
 }
 function stripHtmlWrappers(text) {
     return text
@@ -206,12 +217,6 @@ function serializeChildren(block, ctx) {
     const childCtx = { ...ctx, listDepth: ctx.listDepth + 1 };
     return serializeBlocks(block.children, childCtx);
 }
-function flattenWithBlankLine(lines, appendBlank = false) {
-    if (appendBlank && (lines.length === 0 || lines.at(-1) !== "")) {
-        return [...lines, ""];
-    }
-    return lines;
-}
 function serializeBlock(block, ctx, orderedIndex, stepIndex) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const lines = [];
@@ -219,17 +224,21 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
     switch (block.type) {
         case "paragraph": {
             const text = inlineToMarkdown(block.content);
-            if (text.length > 0) {
-                lines.push(ctx.insideQuote ? `> ${text}` : text);
+            if (text.length === 0) {
+                // Empty paragraph = one blank line in the output. Under the 1:1
+                // block model, this is the only mechanism that produces blank lines
+                // between top-level blocks.
+                return [""];
             }
-            return flattenWithBlankLine(lines, !ctx.insideQuote);
+            lines.push(ctx.insideQuote ? `> ${text}` : text);
+            return lines;
         }
         case "heading": {
             const level = (_a = block.props.level) !== null && _a !== void 0 ? _a : 1;
             const prefix = (_b = headingPrefixes[level]) !== null && _b !== void 0 ? _b : headingPrefixes[3];
             const text = inlineToMarkdown(block.content);
             lines.push(`${prefix} ${text}`.trimEnd());
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
         case "quote": {
             const quoteContent = serializeBlocks((_c = block.children) !== null && _c !== void 0 ? _c : [], {
@@ -244,7 +253,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 lines.push(...quoteText);
             }
             lines.push(...quoteContent.map((line) => (line ? `> ${line}` : ">")));
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
         case "codeBlock": {
             const language = block.props.language || "";
@@ -255,7 +264,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 lines.push(body);
             }
             lines.push("```");
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
         case "bulletListItem": {
             const text = inlineToMarkdown(block.content);
@@ -287,7 +296,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 const size = width ? ` =${width}x*` : "";
                 lines.push(`![${caption}](${url}${size})`);
             }
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
         case "file":
         case "video":
@@ -299,7 +308,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 const displayUrl = caption || resolveFileDisplayUrl(url);
                 lines.push(`[![${name}](${displayUrl})](${url})`);
             }
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
         case "testStep":
         case "snippet": {
@@ -327,7 +336,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 if (snippetId) {
                     lines.push(`<!-- end snippet #${snippetId} -->`);
                 }
-                return flattenWithBlankLine(lines, true);
+                return lines;
             }
             const normalizedTitle = stepTitle
                 .split(/\r?\n/)
@@ -356,7 +365,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
             if (normalizedExpected.length > 0) {
                 const expectedLines = normalizedExpected.split(/\r?\n/);
-                const label = "*Expected*";
+                const label = "*Expected result*";
                 expectedLines.forEach((expectedLine, index) => {
                     const trimmedLine = expectedLine.trim();
                     if (trimmedLine.length === 0) {
@@ -370,28 +379,25 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                     }
                 });
             }
-            if (lines.length === 0) {
-                return lines;
-            }
-            return flattenWithBlankLine(lines, false);
+            return lines;
         }
         case "table": {
             const tableContent = block.content;
             if (!tableContent || tableContent.type !== "tableContent") {
-                return flattenWithBlankLine(lines, true);
+                return lines;
             }
             const rows = Array.isArray(tableContent.rows)
                 ? tableContent.rows
                 : [];
             if (rows.length === 0) {
-                return flattenWithBlankLine(lines, true);
+                return lines;
             }
             const columnCount = rows.reduce((max, row) => {
                 const length = Array.isArray(row.cells) ? row.cells.length : 0;
                 return Math.max(max, length);
             }, 0);
             if (columnCount === 0) {
-                return flattenWithBlankLine(lines, true);
+                return lines;
             }
             const headerRowCount = rows.length
                 ? Math.min(rows.length, Math.max((_o = tableContent.headerRows) !== null && _o !== void 0 ? _o : 1, 1))
@@ -468,7 +474,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             formattedRows.slice(bodyStartIndex).forEach((row) => {
                 lines.push(`| ${row.map((cell) => formatCell(cell)).join(" | ")} |`);
             });
-            return flattenWithBlankLine(lines, true);
+            return lines;
         }
     }
     const fallbackBlock = block;
@@ -479,7 +485,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
         }
     }
     lines.push(...serializeChildren(fallbackBlock, ctx));
-    return flattenWithBlankLine(lines, false);
+    return lines;
 }
 function serializeBlocks(blocks, ctx) {
     const lines = [];
@@ -650,7 +656,27 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         const rawLine = lines[index];
         const trimmed = rawLine.trim();
         if (!trimmed) {
-            index += 1;
+            // Peek at the next non-blank line. If it's another item of this list
+            // (same indent level and list type), treat the blank lines as loose-list
+            // separators and consume them. Otherwise leave the blank line for the
+            // outer loop so it can become an empty paragraph block.
+            let lookahead = index + 1;
+            while (lookahead < lines.length && !lines[lookahead].trim()) {
+                lookahead += 1;
+            }
+            if (lookahead >= lines.length) {
+                break;
+            }
+            const nextLine = lines[lookahead];
+            const nextIndent = countIndent(nextLine);
+            if (nextIndent < indentLevel * 2) {
+                break;
+            }
+            const nextType = detectListType(nextLine.trim());
+            if (nextType !== listType) {
+                break;
+            }
+            index = lookahead;
             continue;
         }
         let indent = countIndent(rawLine);
@@ -1172,8 +1198,8 @@ export function fixMalformedImageBlocks(blocks) {
     }
     return result;
 }
-export function markdownToBlocks(markdown, options) {
-    var _a, _b, _c;
+export function markdownToBlocks(markdown, _options) {
+    var _a, _b;
     const normalized = markdown.replace(/\r\n/g, "\n");
     const lines = normalized.split("\n");
     const blocks = [];
@@ -1182,22 +1208,12 @@ export function markdownToBlocks(markdown, options) {
     while (index < lines.length) {
         const line = lines[index];
         if (!line.trim()) {
-            if (options === null || options === void 0 ? void 0 : options.preserveBlankLines) {
+            // Drop blank lines until we've emitted at least one block, so leading
+            // blanks don't produce a ghost empty paragraph at the top of the doc.
+            if (blocks.length > 0) {
                 blocks.push({ type: "paragraph", content: [], children: [] });
-                index += 1;
-                continue;
             }
             index += 1;
-            // Count consecutive blank lines
-            let blankCount = 1;
-            while (index < lines.length && !lines[index].trim()) {
-                blankCount++;
-                index++;
-            }
-            // Create empty paragraph for each extra blank line beyond the first
-            for (let i = 1; i < blankCount; i++) {
-                blocks.push({ type: "paragraph", content: [], children: [] });
-            }
             continue;
         }
         const snippetWrapper = stepsHeadingLevel !== null
@@ -1293,15 +1309,15 @@ export function markdownToBlocks(markdown, options) {
         blocks.push(paragraph.block);
         index = paragraph.nextIndex;
     }
-    // Insert empty paragraphs between consecutive headings so users can type between them
-    const result = [];
-    for (let i = 0; i < blocks.length; i++) {
-        result.push(blocks[i]);
-        if (blocks[i].type === "heading" && ((_c = blocks[i + 1]) === null || _c === void 0 ? void 0 : _c.type) === "heading") {
-            result.push({ type: "paragraph", content: [], children: [] });
-        }
+    // Drop trailing empty paragraphs so a trailing blank line in the source
+    // doesn't leave a ghost empty block at the end of the document.
+    while (blocks.length > 0 &&
+        blocks[blocks.length - 1].type === "paragraph" &&
+        (!blocks[blocks.length - 1].content ||
+            blocks[blocks.length - 1].content.length === 0)) {
+        blocks.pop();
     }
-    return fixMalformedImageBlocks(result);
+    return fixMalformedImageBlocks(blocks);
 }
 function splitTableRow(line) {
     let value = line.trim();

package/package/styles.css

@@ -1100,6 +1100,12 @@ html.dark .bn-step-image-preview__content {
   color: rgb(146, 64, 14) !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-preview li.bullet-list .syntax-marker,
+.bn-step-editor .overtype-wrapper .overtype-preview li.ordered-list .syntax-marker {
+  color: inherit !important;
+  opacity: 1 !important;
+}
+
 .bn-step-custom-caret {
   display: none;
   position: absolute;

package/package.json

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

package/src/App.tsx

@@ -11,6 +11,7 @@ import {
   filterSuggestionItems,
   insertOrUpdateBlock,
 } from "@blocknote/core";
+import { autoPlacement, offset, shift, size } from "@floating-ui/react";
 import {
   blocksToMarkdown,
   markdownToBlocks,
@@ -354,7 +355,28 @@ function CustomSlashMenu() {
     return filterSuggestionItems(items, query);
   };
 
-  return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
+  return (
+    <SuggestionMenuController
+      triggerCharacter="/"
+      getItems={getItems}
+      floatingOptions={{
+        middleware: [
+          offset(10),
+          autoPlacement({
+            allowedPlacements: ["bottom-start", "top-start"],
+          }),
+          shift(),
+          size({
+            apply({ availableHeight, elements }) {
+              Object.assign(elements.floating.style, {
+                maxHeight: `${Math.max(availableHeight - 10, 0)}px`,
+              });
+            },
+          }),
+        ],
+      }}
+    />
+  );
 }
 
 function App() {

package/src/editor/blocks/step.tsx

@@ -463,6 +463,7 @@ export const stepBlock = createReactBlockSpec(
           aria-label={forceVertical ? "Not enough space for horizontal view" : "Switch step view"}
           onClick={forceVertical ? undefined : handleToggleView}
           aria-disabled={forceVertical}
+          tabIndex={-1}
         >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
             <mask id="mask-toggle" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">

package/src/editor/blocks/stepField.tsx

@@ -83,6 +83,31 @@ export type LinkMeta = { start: number; end: number; url: string };
 export type FormattingMeta = { start: number; end: number; type: "bold" | "italic" | "code" };
 type FormatType = "bold" | "italic" | "code";
 
+/**
+ * Remove formatting and link entries that conflict with applying `fmtType`
+ * over the half-open range [start, end). Exclusion rules:
+ * - code: exclusive with everything — drops any overlapping formatting and links
+ * - bold/italic: coexist with each other, but exclusive with code and links
+ *   — drops overlapping same-type, overlapping code, and overlapping links
+ */
+export function applyInlineExclusion(
+  formatting: FormattingMeta[],
+  links: LinkMeta[],
+  start: number,
+  end: number,
+  fmtType: FormatType,
+): { formatting: FormattingMeta[]; links: LinkMeta[] } {
+  const overlaps = (a: { start: number; end: number }) => !(a.start >= end || a.end <= start);
+  const nextFormatting = formatting.filter((f) => {
+    if (!overlaps(f)) return true;
+    if (fmtType === "code") return false;
+    if (f.type === "code") return false;
+    return f.type !== fmtType;
+  });
+  const nextLinks = links.filter((l) => !overlaps(l));
+  return { formatting: nextFormatting, links: nextLinks };
+}
+
 type EditorSnapshot = {
   text: string;
   formatting: FormattingMeta[];
@@ -1188,14 +1213,15 @@ export function StepField({
         // Remove formatting
         formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
       } else if (start !== end) {
-        // Remove overlapping formatting:
-        // - Code: remove ALL overlapping formatting (code replaces bold/italic)
-        // - Bold/Italic: remove only overlapping formatting of the SAME type
-        formattingRef.current = formattingRef.current.filter(
-          (f) => f.start >= end || f.end <= start || (fmtType !== "code" && f.type !== fmtType),
+        const cleaned = applyInlineExclusion(
+          formattingRef.current,
+          linksRef.current,
+          start,
+          end,
+          fmtType,
         );
-        // Add formatting for selection
-        formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
+        formattingRef.current = [...cleaned.formatting, { start, end, type: fmtType }];
+        linksRef.current = cleaned.links;
       } else {
         // No selection — nothing to format
         return;
@@ -1314,7 +1340,12 @@ export function StepField({
       );
       const newLink: LinkMeta = { start: sel.start, end: sel.start + linkText.length, url };
       linksRef.current = [...adjustedLinks, newLink];
-      formattingRef.current = adjustFormattingForEdit(formattingRef.current, sel.start, delta);
+      // Links are exclusive with bold/italic/code: strip any formatting that
+      // overlaps the original selection before shifting positions.
+      const keptFormatting = formattingRef.current.filter(
+        (f) => f.start >= sel.end || f.end <= sel.start,
+      );
+      formattingRef.current = adjustFormattingForEdit(keptFormatting, sel.start, delta);
       prevTextRef.current = nextValue;
 
       isSyncingRef.current = true;

package/src/editor/blocks/stepFieldFormatting.test.ts

@@ -1,5 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { buildFullMarkdown, type FormattingMeta, type LinkMeta } from "./stepField";
+import {
+  applyInlineExclusion,
+  buildFullMarkdown,
+  type FormattingMeta,
+  type LinkMeta,
+} from "./stepField";
 
 describe("buildFullMarkdown formatting combinations", () => {
   const noLinks: LinkMeta[] = [];
@@ -42,3 +47,59 @@ describe("buildFullMarkdown formatting combinations", () => {
     expect(buildFullMarkdown("hello", noLinks, formatting)).toBe("`hello`");
   });
 });
+
+describe("applyInlineExclusion mutual-exclusion rules", () => {
+  it("applying code strips overlapping bold/italic", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 5, type: "bold" },
+      { start: 0, end: 5, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 0, 5, "code");
+    expect(result.formatting).toEqual([]);
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying code strips overlapping links", () => {
+    const links: LinkMeta[] = [{ start: 0, end: 5, url: "https://a" }];
+    const result = applyInlineExclusion([], links, 0, 5, "code");
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying bold over a code range strips the code", () => {
+    const formatting: FormattingMeta[] = [{ start: 0, end: 5, type: "code" }];
+    const result = applyInlineExclusion(formatting, [], 0, 5, "bold");
+    expect(result.formatting).toEqual([]);
+  });
+
+  it("applying italic over a linked range strips the link", () => {
+    const links: LinkMeta[] = [{ start: 0, end: 5, url: "https://a" }];
+    const result = applyInlineExclusion([], links, 0, 5, "italic");
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying bold preserves non-overlapping italic and non-overlapping links", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 10, end: 20, type: "italic" },
+    ];
+    const links: LinkMeta[] = [{ start: 30, end: 40, url: "https://a" }];
+    const result = applyInlineExclusion(formatting, links, 0, 5, "bold");
+    expect(result.formatting).toEqual(formatting);
+    expect(result.links).toEqual(links);
+  });
+
+  it("applying bold preserves overlapping italic (bold and italic coexist)", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 10, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 0, 10, "bold");
+    expect(result.formatting).toEqual(formatting);
+  });
+
+  it("applying italic drops overlapping italic (same-type replacement)", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 10, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 2, 8, "italic");
+    expect(result.formatting).toEqual([]);
+  });
+});

package/src/editor/blocks/useAutoResize.ts

@@ -26,8 +26,11 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
       textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
     };
 
-    const observer = new MutationObserver(resize);
-    observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+    const mutationObserver = new MutationObserver(resize);
+    mutationObserver.observe(textarea, { childList: true, characterData: true, subtree: true });
+
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(textarea);
 
     const handleInput = () => {
       cancelAnimationFrame(frameRef.current ?? 0);
@@ -35,11 +38,41 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
     };
 
     textarea.addEventListener("input", handleInput);
-    resize();
+
+    let cancelled = false;
+    const initialFrame = requestAnimationFrame(() => {
+      frameRef.current = requestAnimationFrame(() => {
+        if (!cancelled) resize();
+      });
+    });
+
+    // Re-run resize once the textarea is actually laid out. During drag-drop
+    // remounts the element can be briefly detached, so the initial RAF resize
+    // sees scrollHeight === 0 and clamps to minRows.
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting && !cancelled) {
+          resize();
+          intersectionObserver.disconnect();
+          break;
+        }
+      }
+    });
+    intersectionObserver.observe(textarea);
+
+    if (typeof document !== "undefined" && document.fonts?.ready) {
+      document.fonts.ready.then(() => {
+        if (!cancelled) resize();
+      }).catch(() => {});
+    }
 
     return () => {
-      observer.disconnect();
+      cancelled = true;
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
       textarea.removeEventListener("input", handleInput);
+      cancelAnimationFrame(initialFrame);
       cancelAnimationFrame(frameRef.current ?? 0);
     };
   }, [textarea, multiline, minRows, maxRows]);

package/src/editor/customMarkdownConverter.test.ts

@@ -46,6 +46,38 @@ describe("blocksToMarkdown", () => {
     expect(blocksToMarkdown(blocks)).toBe("Hello **world**_!_");
   });
 
+  it("preserves HTML comments without escaping", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "c1",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "<!-- ai/agent generated description -->", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe("<!-- ai/agent generated description -->");
+  });
+
+  it("preserves HTML comments inline among text and still escapes stray angle brackets", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "c2",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "before <!-- note --> after <div>", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe("before <!-- note --> after \\<div>");
+  });
+
   it("places bold markers outside leading/trailing spaces", () => {
     const blocks: CustomEditorBlock[] = [
       {
@@ -165,9 +197,9 @@ describe("blocksToMarkdown", () => {
     expect(blocksToMarkdown(blocks)).toBe(
       [
         "* Open the Login page.",
-        "  *Expected*: The Login page loads successfully.",
+        "  *Expected result*: The Login page loads successfully.",
         "* Enter a valid username.",
-        "  *Expected*: The username is accepted.",
+        "  *Expected result*: The username is accepted.",
       ].join("\n"),
     );
   });
@@ -210,7 +242,7 @@ describe("blocksToMarkdown", () => {
     ];
 
     expect(blocksToMarkdown(blocks)).toBe(
-      ["* ", "  *Expected*: Login form visible"].join("\n"),
+      ["* ", "  *Expected result*: Login form visible"].join("\n"),
     );
   });
 
@@ -323,7 +355,7 @@ describe("blocksToMarkdown", () => {
      expect(blocksToMarkdown(blocks)).toBe(
        [
          "* **Click** the _Login_ button",
-        "  *Expected*: **Success** is shown",
+        "  *Expected result*: **Success** is shown",
          "  Second line with <u>underline</u>",
        ].join("\n"),
      );
@@ -350,7 +382,7 @@ describe("blocksToMarkdown", () => {
       "* Navigate to login",
       "  Open browser",
       "  Go to login page",
-      "  *Expected*: Login form visible",
+      "  *Expected result*: Login form visible",
     ].join("\n"),
   );
  });
@@ -397,7 +429,7 @@ describe("blocksToMarkdown", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected*: The user receives a real-time notification for the order update.",
+        "  *Expected result*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -1041,7 +1073,7 @@ describe("markdownToBlocks", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected*: The user receives a real-time notification for the order update.",
+        "  *Expected result*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -1082,6 +1114,11 @@ describe("markdownToBlocks", () => {
         content: [{ type: "text", text: "Preconditions", styles: {} }],
         children: [],
       },
+      {
+        type: "paragraph",
+        content: [],
+        children: [],
+      },
       {
         type: "bulletListItem",
         props: baseProps,
@@ -1270,7 +1307,7 @@ describe("markdownToBlocks", () => {
     expect(markdownRoundTrip).toBe(
       [
         "* Display the generated report.",
-        "  *Expected*: ![](/attachments/report.png)",
+        "  *Expected result*: ![](/attachments/report.png)",
       ].join("\n"),
     );
   });
@@ -1317,7 +1354,7 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toBe(
       [
         "* Should open login screen",
-        "  *Expected*: Login should look like this",
+        "  *Expected result*: Login should look like this",
         "  ![](/login.png)",
       ].join("\n"),
     );
@@ -1456,9 +1493,9 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toBe(
       [
         "* Existing email + invalid password",
-        "  *Expected*: 'Oops, wrong email or password' is displayed",
+        "  *Expected result*: 'Oops, wrong email or password' is displayed",
         "* Not existing email + valid password",
-        "  *Expected*: 'Oops, wrong email or password' is displayed",
+        "  *Expected result*: 'Oops, wrong email or password' is displayed",
       ].join("\n"),
     );
   });
@@ -2525,3 +2562,142 @@ describe("steps require Steps heading", () => {
     expect((stepBlocks[0].props as any).stepTitle).toBe("next 22");
   });
 });
+
+describe("blank line <-> empty paragraph mapping", () => {
+  const isEmptyParagraph = (block: CustomPartialBlock | CustomEditorBlock) =>
+    block.type === "paragraph" &&
+    (!block.content || (block.content as any[]).length === 0);
+
+  it("parses a single blank line between headings as one empty paragraph", () => {
+    const blocks = markdownToBlocks("### A\n\n### B");
+    expect(blocks).toHaveLength(3);
+    expect(blocks[0].type).toBe("heading");
+    expect(isEmptyParagraph(blocks[1])).toBe(true);
+    expect(blocks[2].type).toBe("heading");
+  });
+
+  it("parses two blank lines between headings as two empty paragraphs", () => {
+    const blocks = markdownToBlocks("### A\n\n\n### B");
+    expect(blocks).toHaveLength(4);
+    expect(blocks[0].type).toBe("heading");
+    expect(isEmptyParagraph(blocks[1])).toBe(true);
+    expect(isEmptyParagraph(blocks[2])).toBe(true);
+    expect(blocks[3].type).toBe("heading");
+  });
+
+  it("drops leading and trailing blank lines", () => {
+    const blocks = markdownToBlocks("\n\n### A\n\n");
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].type).toBe("heading");
+  });
+
+  it("serializes an empty paragraph between two blocks as one blank line", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "h1",
+        type: "heading",
+        props: { ...baseProps, level: 3 } as any,
+        content: [{ type: "text", text: "A", styles: {} }],
+        children: [],
+      },
+      {
+        id: "p1",
+        type: "paragraph",
+        props: baseProps,
+        content: [],
+        children: [],
+      },
+      {
+        id: "h2",
+        type: "heading",
+        props: { ...baseProps, level: 3 } as any,
+        content: [{ type: "text", text: "B", styles: {} }],
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe("### A\n\n### B");
+  });
+
+  it("round-trips a single blank line between headings", () => {
+    const markdown = "### A\n\n### B";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("round-trips two blank lines between headings", () => {
+    const markdown = "### A\n\n\n### B";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("round-trips headings adjacent with no blank line", () => {
+    const markdown = "### A\n### B";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks.some(isEmptyParagraph)).toBe(false);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("deleting an empty paragraph removes the blank line from the output", () => {
+    const blocks = markdownToBlocks("### A\n\n### B") as CustomEditorBlock[];
+    const withoutEmpty = blocks.filter((block) => !isEmptyParagraph(block));
+    expect(withoutEmpty).toHaveLength(2);
+    expect(blocksToMarkdown(withoutEmpty)).toBe("### A\n### B");
+  });
+
+  it("inserting an empty paragraph adds a blank line to the output", () => {
+    const blocks = markdownToBlocks("### A\n### B") as CustomEditorBlock[];
+    const withEmpty: CustomEditorBlock[] = [
+      blocks[0],
+      {
+        id: "inserted",
+        type: "paragraph",
+        props: baseProps,
+        content: [],
+        children: [],
+      },
+      blocks[1],
+    ];
+    expect(blocksToMarkdown(withEmpty)).toBe("### A\n\n### B");
+  });
+
+  it("preserves blank lines between a heading and a bullet list", () => {
+    const markdown = "### Steps\n\n* first\n* second";
+    const blocks = markdownToBlocks(markdown);
+    expect(isEmptyParagraph(blocks[1])).toBe(true);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("preserves a blank line between a bullet list and the next heading", () => {
+    const markdown = [
+      "### Requirements",
+      "* first requirement",
+      "* second requirement",
+      "",
+      "### Steps",
+      "",
+      "* do the thing",
+      "  *Expected result*: it works",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown) as CustomEditorBlock[];
+    const types = blocks.map((b) => b.type);
+    // Blank line between the last bullet and the next heading must survive
+    // parseList and become an empty paragraph.
+    const lastBulletIdx = types.lastIndexOf("bulletListItem");
+    expect(blocks[lastBulletIdx + 1].type).toBe("paragraph");
+    expect((blocks[lastBulletIdx + 1].content as any[]).length).toBe(0);
+    expect(blocksToMarkdown(blocks)).toBe(markdown);
+  });
+
+  it("preserves blank lines across the user-reported screenshot example", () => {
+    const markdown = [
+      "### Requirements",
+      "",
+      "### Steps",
+      "",
+      "* *open* **webiste**",
+      "  step data with `image`",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -61,6 +61,7 @@ const headingPrefixes: Record<number, string> = {
 };
 
 const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<\\])/g;
+const HTML_COMMENT_REGEX = /<!--[\s\S]*?-->/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
 const EXPECTED_LABEL_REGEX = /^(?:[*_`]*\s*)?(expected(?:\s+result)?)\s*(?:[*_`]*\s*)?\s*[:\-–—]\s*/i;
@@ -70,7 +71,17 @@ const STEP_DATA_LINE_REGEX =
 const NUMBERED_STEP_REGEX = /^\d+[.)]\s+/;
 
 function escapeMarkdown(text: string): string {
-  return text.replace(SPECIAL_CHAR_REGEX, "\\$1");
+  let result = "";
+  let lastIndex = 0;
+  HTML_COMMENT_REGEX.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = HTML_COMMENT_REGEX.exec(text)) !== null) {
+    result += text.slice(lastIndex, match.index).replace(SPECIAL_CHAR_REGEX, "\\$1");
+    result += match[0];
+    lastIndex = match.index + match[0].length;
+  }
+  result += text.slice(lastIndex).replace(SPECIAL_CHAR_REGEX, "\\$1");
+  return result;
 }
 
 function stripHtmlWrappers(text: string): string {
@@ -273,13 +284,6 @@ function serializeChildren(block: CustomEditorBlock, ctx: MarkdownContext): stri
   return serializeBlocks(block.children, childCtx);
 }
 
-function flattenWithBlankLine(lines: string[], appendBlank = false): string[] {
-  if (appendBlank && (lines.length === 0 || lines.at(-1) !== "")) {
-    return [...lines, ""];
-  }
-  return lines;
-}
-
 function serializeBlock(
   block: CustomEditorBlock,
   ctx: MarkdownContext,
@@ -292,17 +296,21 @@ function serializeBlock(
   switch (block.type) {
     case "paragraph": {
       const text = inlineToMarkdown(block.content);
-      if (text.length > 0) {
-        lines.push(ctx.insideQuote ? `> ${text}` : text);
+      if (text.length === 0) {
+        // Empty paragraph = one blank line in the output. Under the 1:1
+        // block model, this is the only mechanism that produces blank lines
+        // between top-level blocks.
+        return [""];
       }
-      return flattenWithBlankLine(lines, !ctx.insideQuote);
+      lines.push(ctx.insideQuote ? `> ${text}` : text);
+      return lines;
     }
     case "heading": {
       const level = (block.props as any).level ?? 1;
       const prefix = headingPrefixes[level] ?? headingPrefixes[3];
       const text = inlineToMarkdown(block.content);
       lines.push(`${prefix} ${text}`.trimEnd());
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
     case "quote": {
       const quoteContent = serializeBlocks(block.children ?? [], {
@@ -317,7 +325,7 @@ function serializeBlock(
         lines.push(...quoteText);
       }
       lines.push(...quoteContent.map((line) => (line ? `> ${line}` : ">")));
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
     case "codeBlock": {
       const language = (block.props as any).language || "";
@@ -328,7 +336,7 @@ function serializeBlock(
         lines.push(body);
       }
       lines.push("```");
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
     case "bulletListItem": {
       const text = inlineToMarkdown(block.content);
@@ -361,7 +369,7 @@ function serializeBlock(
         const size = width ? ` =${width}x*` : "";
         lines.push(`![${caption}](${url}${size})`);
       }
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
     case "file":
     case "video":
@@ -373,7 +381,7 @@ function serializeBlock(
         const displayUrl = caption || resolveFileDisplayUrl(url);
         lines.push(`[![${name}](${displayUrl})](${url})`);
       }
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
     case "testStep":
     case "snippet": {
@@ -405,7 +413,7 @@ function serializeBlock(
           lines.push(`<!-- end snippet #${snippetId} -->`);
         }
 
-        return flattenWithBlankLine(lines, true);
+        return lines;
       }
 
       const normalizedTitle = stepTitle
@@ -438,7 +446,7 @@ function serializeBlock(
       const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
       if (normalizedExpected.length > 0) {
         const expectedLines = normalizedExpected.split(/\r?\n/);
-        const label = "*Expected*";
+        const label = "*Expected result*";
         expectedLines.forEach((expectedLine: string, index: number) => {
           const trimmedLine = expectedLine.trim();
           if (trimmedLine.length === 0) {
@@ -453,16 +461,12 @@ function serializeBlock(
         });
       }
 
-      if (lines.length === 0) {
-        return lines;
-      }
-
-      return flattenWithBlankLine(lines, false);
+      return lines;
     }
     case "table": {
       const tableContent = block.content as any;
       if (!tableContent || tableContent.type !== "tableContent") {
-        return flattenWithBlankLine(lines, true);
+        return lines;
       }
 
       const rows: any[] = Array.isArray(tableContent.rows)
@@ -470,7 +474,7 @@ function serializeBlock(
         : [];
 
       if (rows.length === 0) {
-        return flattenWithBlankLine(lines, true);
+        return lines;
       }
 
       const columnCount = rows.reduce((max, row) => {
@@ -479,7 +483,7 @@ function serializeBlock(
       }, 0);
 
       if (columnCount === 0) {
-        return flattenWithBlankLine(lines, true);
+        return lines;
       }
 
       const headerRowCount = rows.length
@@ -570,7 +574,7 @@ function serializeBlock(
         lines.push(`| ${row.map((cell) => formatCell(cell)).join(" | ")} |`);
       });
 
-      return flattenWithBlankLine(lines, true);
+      return lines;
     }
   }
 
@@ -582,7 +586,7 @@ function serializeBlock(
     }
   }
   lines.push(...serializeChildren(fallbackBlock, ctx));
-  return flattenWithBlankLine(lines, false);
+  return lines;
 }
 
 function serializeBlocks(blocks: CustomEditorBlock[], ctx: MarkdownContext): string[] {
@@ -788,7 +792,27 @@ function parseList(
     const trimmed = rawLine.trim();
 
     if (!trimmed) {
-      index += 1;
+      // Peek at the next non-blank line. If it's another item of this list
+      // (same indent level and list type), treat the blank lines as loose-list
+      // separators and consume them. Otherwise leave the blank line for the
+      // outer loop so it can become an empty paragraph block.
+      let lookahead = index + 1;
+      while (lookahead < lines.length && !lines[lookahead].trim()) {
+        lookahead += 1;
+      }
+      if (lookahead >= lines.length) {
+        break;
+      }
+      const nextLine = lines[lookahead];
+      const nextIndent = countIndent(nextLine);
+      if (nextIndent < indentLevel * 2) {
+        break;
+      }
+      const nextType = detectListType(nextLine.trim());
+      if (nextType !== listType) {
+        break;
+      }
+      index = lookahead;
       continue;
     }
 
@@ -1394,12 +1418,16 @@ export function fixMalformedImageBlocks(blocks: CustomPartialBlock[]): CustomPar
   return result;
 }
 
+// The `preserveBlankLines` option is retained for backwards compatibility
+// but is now a no-op: blank lines in the source markdown always produce
+// empty paragraph blocks (except for leading/trailing blanks, which are
+// dropped). This gives a 1:1 mapping between blank lines and blocks so the
+// Rich editor can render and delete each blank line individually.
 export interface MarkdownToBlocksOptions {
-  /** When true, every blank line produces an empty paragraph block. */
   preserveBlankLines?: boolean;
 }
 
-export function markdownToBlocks(markdown: string, options?: MarkdownToBlocksOptions): CustomPartialBlock[] {
+export function markdownToBlocks(markdown: string, _options?: MarkdownToBlocksOptions): CustomPartialBlock[] {
   const normalized = markdown.replace(/\r\n/g, "\n");
   const lines = normalized.split("\n");
   const blocks: CustomPartialBlock[] = [];
@@ -1409,22 +1437,12 @@ export function markdownToBlocks(markdown: string, options?: MarkdownToBlocksOpt
   while (index < lines.length) {
     const line = lines[index];
     if (!line.trim()) {
-      if (options?.preserveBlankLines) {
+      // Drop blank lines until we've emitted at least one block, so leading
+      // blanks don't produce a ghost empty paragraph at the top of the doc.
+      if (blocks.length > 0) {
         blocks.push({ type: "paragraph", content: [], children: [] } as CustomPartialBlock);
-        index += 1;
-        continue;
       }
       index += 1;
-      // Count consecutive blank lines
-      let blankCount = 1;
-      while (index < lines.length && !lines[index].trim()) {
-        blankCount++;
-        index++;
-      }
-      // Create empty paragraph for each extra blank line beyond the first
-      for (let i = 1; i < blankCount; i++) {
-        blocks.push({ type: "paragraph", content: [], children: [] } as CustomPartialBlock);
-      }
       continue;
     }
 
@@ -1540,16 +1558,18 @@ export function markdownToBlocks(markdown: string, options?: MarkdownToBlocksOpt
     index = paragraph.nextIndex;
   }
 
-  // Insert empty paragraphs between consecutive headings so users can type between them
-  const result: CustomPartialBlock[] = [];
-  for (let i = 0; i < blocks.length; i++) {
-    result.push(blocks[i]);
-    if (blocks[i].type === "heading" && blocks[i + 1]?.type === "heading") {
-      result.push({ type: "paragraph", content: [], children: [] } as CustomPartialBlock);
-    }
+  // Drop trailing empty paragraphs so a trailing blank line in the source
+  // doesn't leave a ghost empty block at the end of the document.
+  while (
+    blocks.length > 0 &&
+    blocks[blocks.length - 1].type === "paragraph" &&
+    (!blocks[blocks.length - 1].content ||
+      (blocks[blocks.length - 1].content as any[]).length === 0)
+  ) {
+    blocks.pop();
   }
 
-  return fixMalformedImageBlocks(result);
+  return fixMalformedImageBlocks(blocks);
 }
 
 function splitTableRow(line: string): string[] {

package/src/editor/styles.css

@@ -1100,6 +1100,12 @@ html.dark .bn-step-image-preview__content {
   color: rgb(146, 64, 14) !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-preview li.bullet-list .syntax-marker,
+.bn-step-editor .overtype-wrapper .overtype-preview li.ordered-list .syntax-marker {
+  color: inherit !important;
+  opacity: 1 !important;
+}
+
 .bn-step-custom-caret {
   display: none;
   position: absolute;