testomatio-editor-blocks 0.4.52 → 0.4.53

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.js

@@ -365,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) {
@@ -656,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);

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.52",
+  "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/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

@@ -197,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"),
     );
   });
@@ -242,7 +242,7 @@ describe("blocksToMarkdown", () => {
     ];
 
     expect(blocksToMarkdown(blocks)).toBe(
-      ["* ", "  *Expected*: Login form visible"].join("\n"),
+      ["* ", "  *Expected result*: Login form visible"].join("\n"),
     );
   });
 
@@ -355,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"),
      );
@@ -382,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"),
   );
  });
@@ -429,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"),
     );
   });
@@ -1073,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"),
     );
   });
@@ -1307,7 +1307,7 @@ describe("markdownToBlocks", () => {
     expect(markdownRoundTrip).toBe(
       [
         "* Display the generated report.",
-        "  *Expected*: ![](/attachments/report.png)",
+        "  *Expected result*: ![](/attachments/report.png)",
       ].join("\n"),
     );
   });
@@ -1354,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"),
     );
@@ -1493,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"),
     );
   });
@@ -2667,6 +2667,27 @@ describe("blank line <-> empty paragraph mapping", () => {
     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",

package/src/editor/customMarkdownConverter.ts

@@ -446,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) {
@@ -792,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;
     }
 

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;