testomatio-editor-blocks 0.4.48 → 0.4.50

package/src/editor/blocks/stepField.tsx

@@ -79,10 +79,20 @@ type ExtractedImage = {
   markdown: string;
 };
 
-type LinkMeta = { start: number; end: number; url: string };
-type FormattingMeta = { start: number; end: number; type: "bold" | "italic" | "code" };
+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";
 
+type EditorSnapshot = {
+  text: string;
+  formatting: FormattingMeta[];
+  links: LinkMeta[];
+  cursorStart: number;
+  cursorEnd: number;
+};
+
+const UNDO_STACK_LIMIT = 100;
+
 function getActiveFormats(
   formatting: FormattingMeta[],
   selStart: number,
@@ -258,7 +268,7 @@ function stripInlineMarkdown(markdown: string): {
   return { plainText, links, formatting };
 }
 
-function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: FormattingMeta[]): string {
+export function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: FormattingMeta[]): string {
   if (links.length === 0 && formatting.length === 0) return plainText;
 
   // Collect all marker insertions at each position in plainText space.
@@ -308,13 +318,19 @@ function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: For
 function adjustFormattingForEdit(formatting: FormattingMeta[], editPos: number, delta: number): FormattingMeta[] {
   return formatting
     .map((fmt) => {
-      if (editPos <= fmt.start) {
-        return { ...fmt, start: fmt.start + delta, end: fmt.end + delta };
-      }
-      if (editPos >= fmt.end) {
-        return fmt;
+      if (delta >= 0) {
+        if (editPos <= fmt.start) {
+          return { ...fmt, start: fmt.start + delta, end: fmt.end + delta };
+        }
+        if (editPos >= fmt.end) {
+          return fmt;
+        }
+        return { ...fmt, end: fmt.end + delta };
       }
-      return { ...fmt, end: fmt.end + delta };
+      const delEnd = editPos + Math.abs(delta);
+      const newStart = fmt.start < editPos ? fmt.start : fmt.start >= delEnd ? fmt.start + delta : editPos;
+      const newEnd = fmt.end <= editPos ? fmt.end : fmt.end >= delEnd ? fmt.end + delta : editPos;
+      return { ...fmt, start: newStart, end: newEnd };
     })
     .filter((fmt) => fmt.end > fmt.start);
 }
@@ -342,7 +358,18 @@ function getCaretRectInPreview(preview: HTMLElement, offset: number, textareaVal
         const range = document.createRange();
         range.setStart(textNode, localOffset);
         range.collapse(true);
-        const rect = range.getBoundingClientRect();
+        let rect = range.getBoundingClientRect();
+
+        // Collapsed ranges at position 0 can return an empty rect in some browsers
+        if (rect.height === 0 && rect.top === 0 && rect.left === 0) {
+          const span = document.createElement("span");
+          span.textContent = "\u200B";
+          range.insertNode(span);
+          rect = span.getBoundingClientRect();
+          span.parentNode?.removeChild(span);
+          preview.normalize();
+        }
+
         const previewRect = preview.getBoundingClientRect();
         return {
           top: rect.top - previewRect.top + preview.scrollTop,
@@ -508,13 +535,19 @@ function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingM
 function adjustLinksForEdit(links: LinkMeta[], editPos: number, delta: number): LinkMeta[] {
   return links
     .map((link) => {
-      if (editPos <= link.start) {
-        return { ...link, start: link.start + delta, end: link.end + delta };
-      }
-      if (editPos >= link.end) {
-        return link;
+      if (delta >= 0) {
+        if (editPos <= link.start) {
+          return { ...link, start: link.start + delta, end: link.end + delta };
+        }
+        if (editPos >= link.end) {
+          return link;
+        }
+        return { ...link, end: link.end + delta };
       }
-      return { ...link, end: link.end + delta };
+      const delEnd = editPos + Math.abs(delta);
+      const newStart = link.start < editPos ? link.start : link.start >= delEnd ? link.start + delta : editPos;
+      const newEnd = link.end <= editPos ? link.end : link.end >= delEnd ? link.end + delta : editPos;
+      return { ...link, start: newStart, end: newEnd };
     })
     .filter((link) => link.end > link.start);
 }
@@ -648,8 +681,8 @@ export function StepField({
   const linkSelectionRef = useRef<{ start: number; end: number; text: string } | null>(null);
   const linksRef = useRef<LinkMeta[]>([]);
   const formattingRef = useRef<FormattingMeta[]>([]);
-  const formattingUndoRef = useRef<Array<{ formatting: FormattingMeta[]; links: LinkMeta[] }>>([]);
-  const formattingRedoRef = useRef<Array<{ formatting: FormattingMeta[]; links: LinkMeta[] }>>([]);
+  const undoStackRef = useRef<EditorSnapshot[]>([]);
+  const redoStackRef = useRef<EditorSnapshot[]>([]);
   const caretRef = useRef<HTMLDivElement | null>(null);
   const prevTextRef = useRef("");
   const isSyncingRef = useRef(false);
@@ -663,8 +696,36 @@ export function StepField({
     onChangeRef.current = onChange;
   }, [onChange]);
 
+  const pushUndoSnapshot = useCallback(
+    (
+      text: string,
+      formatting: FormattingMeta[],
+      links: LinkMeta[],
+      cursorStart: number,
+      cursorEnd: number,
+    ) => {
+      const lastSnapshot = undoStackRef.current[undoStackRef.current.length - 1];
+      if (
+        lastSnapshot &&
+        lastSnapshot.text === text &&
+        JSON.stringify(lastSnapshot.formatting) === JSON.stringify(formatting) &&
+        JSON.stringify(lastSnapshot.links) === JSON.stringify(links)
+      ) {
+        return;
+      }
+
+      undoStackRef.current = [
+        ...undoStackRef.current.slice(-(UNDO_STACK_LIMIT - 1)),
+        { text, formatting: [...formatting], links: [...links], cursorStart, cursorEnd },
+      ];
+      redoStackRef.current = [];
+    },
+    [],
+  );
+
   const handleEditorChange = useCallback((nextValue: string) => {
     if (isSyncingRef.current) return;
+    if (nextValue === prevTextRef.current) return;
 
     const prevText = prevTextRef.current;
     const delta = nextValue.length - prevText.length;
@@ -676,10 +737,16 @@ export function StepField({
       editPos++;
     }
 
+    // Capture pre-edit state for undo BEFORE mutating
+    const prevFormatting = [...formattingRef.current];
+    const prevLinks = [...linksRef.current];
+
     linksRef.current = adjustLinksForEdit(linksRef.current, editPos, delta);
     formattingRef.current = adjustFormattingForEdit(formattingRef.current, editPos, delta);
-    formattingUndoRef.current = [];
-    formattingRedoRef.current = [];
+
+    // Push pre-edit state to undo stack
+    pushUndoSnapshot(prevText, prevFormatting, prevLinks, editPos, editPos);
+
     prevTextRef.current = nextValue;
 
     const markdown = buildFullMarkdown(nextValue, linksRef.current, formattingRef.current);
@@ -688,7 +755,7 @@ export function StepField({
       return prev === normalized ? prev : normalized;
     });
     onChangeRef.current?.(markdown);
-  }, []);
+  }, [pushUndoSnapshot]);
 
   useEffect(() => {
     const container = editorContainerRef.current;
@@ -701,6 +768,12 @@ export function StepField({
     formattingRef.current = formatting;
     prevTextRef.current = plainText;
 
+    // Push initial state as the baseline undo snapshot
+    undoStackRef.current = [
+      { text: plainText, formatting: [...formatting], links: [...links], cursorStart: 0, cursorEnd: 0 },
+    ];
+    redoStackRef.current = [];
+
     const [instance] = OverType.init(container, {
       value: plainText,
       placeholder: resolvedPlaceholder,
@@ -718,9 +791,25 @@ export function StepField({
       applyFormattingHighlights(this.preview, formattingRef.current, this.textarea?.value);
       applyLinkHighlights(this.preview, linksRef.current);
     };
-    // Apply initial highlights
-    applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
-    applyLinkHighlights(instance.preview, linksRef.current);
+    // Force a full update through the monkey-patched pipeline
+    instance.updatePreview();
+
+    // Safety net: re-apply formatting if the preview gets reset externally
+    // (e.g. by the original updatePreview being called outside our monkey-patch)
+    let isApplyingFormatting = false;
+    const formattingObserver = new MutationObserver(() => {
+      if (isApplyingFormatting) return;
+      const hasFormatting = formattingRef.current.length > 0;
+      const hasAnyFormattingElement =
+        instance.preview.querySelector("strong.step-preview-bold, em.step-preview-italic, code.step-preview-code") !== null;
+      if (hasFormatting && !hasAnyFormattingElement) {
+        isApplyingFormatting = true;
+        applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
+        applyLinkHighlights(instance.preview, linksRef.current);
+        isApplyingFormatting = false;
+      }
+    });
+    formattingObserver.observe(instance.preview, { childList: true, subtree: true });
 
     // Create custom caret element inside the wrapper
     const caretEl = document.createElement("div");
@@ -732,6 +821,7 @@ export function StepField({
     setTextareaNode(instance.textarea);
 
     return () => {
+      formattingObserver.disconnect();
       caretRef.current = null;
       instance.destroy();
       editorInstanceRef.current = null;
@@ -841,6 +931,7 @@ export function StepField({
     }
 
     const { plainText, links, formatting } = stripInlineMarkdown(value);
+
     linksRef.current = links;
     formattingRef.current = formatting;
     prevTextRef.current = plainText;
@@ -873,6 +964,21 @@ export function StepField({
     }
   }, [fieldName, textareaNode]);
 
+  // Block native undo/redo at the beforeinput level so the browser never
+  // applies its own history on the textarea — our custom stack handles it.
+  useEffect(() => {
+    if (!textareaNode) return;
+    const blockNativeUndoRedo = (e: InputEvent) => {
+      if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+        e.preventDefault();
+      }
+    };
+    textareaNode.addEventListener("beforeinput", blockNativeUndoRedo as EventListener);
+    return () => {
+      textareaNode.removeEventListener("beforeinput", blockNativeUndoRedo as EventListener);
+    };
+  }, [textareaNode]);
+
   useEffect(() => {
     if (!textareaNode) {
       return;
@@ -904,6 +1010,15 @@ export function StepField({
     const handleBlur = () => {
       setIsFocused(false);
       setShowAllSuggestions(false);
+      // Re-apply formatting highlights after blur because OverType may
+      // re-render the preview (via debounced selectionchange) and strip them.
+      const instance = editorInstanceRef.current;
+      if (instance) {
+        requestAnimationFrame(() => {
+          applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
+          applyLinkHighlights(instance.preview, linksRef.current);
+        });
+      }
     };
 
     textareaNode.addEventListener("focus", handleFocus);
@@ -1066,25 +1181,23 @@ export function StepField({
       );
 
       // Save current state for undo before modifying
-      formattingUndoRef.current = [
-        ...formattingUndoRef.current,
-        { formatting: [...formattingRef.current], links: [...linksRef.current] },
-      ];
-      formattingRedoRef.current = [];
+      const currentText = instance.getValue();
+      pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, start, end);
 
       if (existingIdx !== -1) {
         // Remove formatting
         formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
       } else if (start !== end) {
-        // Remove overlapping formatting of other types before applying new format
+        // 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.type === fmtType || f.start >= end || f.end <= start,
+          (f) => f.start >= end || f.end <= start || (fmtType !== "code" && f.type !== fmtType),
         );
         // Add formatting for selection
         formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
       } else {
         // No selection — nothing to format
-        formattingUndoRef.current = formattingUndoRef.current.slice(0, -1);
         return;
       }
 
@@ -1099,7 +1212,7 @@ export function StepField({
       applyFormattingHighlights(instance.preview, formattingRef.current, textareaNode?.value);
       applyLinkHighlights(instance.preview, linksRef.current);
     },
-    [textareaNode],
+    [textareaNode, pushUndoSnapshot],
   );
 
   const updateActiveFormats = useCallback(() => {
@@ -1181,6 +1294,10 @@ export function StepField({
         return;
       }
       const currentValue = instance.getValue();
+
+      // Push undo snapshot before link edit
+      pushUndoSnapshot(currentValue, formattingRef.current, linksRef.current, sel.start, sel.end);
+
       const linkText = text || sel.text || url;
 
       // Replace selected text with link display text (no markdown syntax in textarea)
@@ -1212,14 +1329,21 @@ export function StepField({
       setCursorLink(null);
       requestAnimationFrame(() => textareaNode?.focus());
     },
-    [textareaNode],
+    [textareaNode, pushUndoSnapshot],
   );
 
   const handleRemoveLink = useCallback(() => {
+    const instance = editorInstanceRef.current;
+
+    // Push undo snapshot before link removal
+    if (instance) {
+      const currentText = instance.getValue();
+      const cursorPos = instance.textarea?.selectionStart ?? 0;
+      pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, cursorPos, cursorPos);
+    }
+
     linksRef.current = linksRef.current.filter((l) => l !== cursorLink);
     setCursorLink(null);
-
-    const instance = editorInstanceRef.current;
     if (instance) {
       const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
       onChangeRef.current?.(markdown);
@@ -1227,7 +1351,7 @@ export function StepField({
       applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
       applyLinkHighlights(instance.preview, linksRef.current);
     }
-  }, [cursorLink]);
+  }, [cursorLink, pushUndoSnapshot]);
 
   const suggestionPool = useMemo(() => {
     if (!suggestionFilter) {
@@ -1296,6 +1420,12 @@ export function StepField({
 
   const handleRemoveImage = useCallback(
     (image: ExtractedImage) => {
+      // Push undo snapshot before image removal
+      if (editorInstanceRef.current) {
+        const currentText = editorInstanceRef.current.getValue();
+        pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, image.start, image.end);
+      }
+
       const before = value.slice(0, image.start);
       const after = value.slice(image.end);
       const nextValue = `${before}${after}`.replace(/\n{3,}/g, "\n\n");
@@ -1306,7 +1436,7 @@ export function StepField({
       setPlainTextValue(markdownToPlainText(nextValue));
       setPreviewImageUrl((prev) => (prev === image.url ? null : prev));
     },
-    [value],
+    [value, pushUndoSnapshot],
   );
 
   const handleImageClick = useCallback((url: string) => {
@@ -1344,6 +1474,10 @@ export function StepField({
       const escaped = escapeMarkdownText(suggestion.title);
       const instance = editorInstanceRef.current;
       if (instance) {
+        // Push undo snapshot before applying suggestion
+        const currentText = instance.getValue();
+        const cursorPos = textareaNode?.selectionStart ?? 0;
+        pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, cursorPos, cursorPos);
         instance.setValue(escaped);
       }
       setPlainTextValue(suggestion.title);
@@ -1359,7 +1493,7 @@ export function StepField({
         }
       });
     },
-    [onSuggestionSelect, textareaNode],
+    [onSuggestionSelect, textareaNode, pushUndoSnapshot],
   );
 
   const keydownHandlerRef = useRef<((event: KeyboardEvent) => void) | null>(null);
@@ -1395,55 +1529,107 @@ export function StepField({
           handleToolbarAction("toggleCode");
           return;
         }
-        if (event.key === "z" || event.key === "Z") {
-          const undoStack = formattingUndoRef.current;
-          if (undoStack.length > 0) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            formattingRedoRef.current = [
-              ...formattingRedoRef.current,
-              { formatting: [...formattingRef.current], links: [...linksRef.current] },
-            ];
-            const prev = undoStack[undoStack.length - 1];
-            formattingUndoRef.current = undoStack.slice(0, -1);
-            formattingRef.current = prev.formatting;
-            linksRef.current = prev.links;
-            const instance = editorInstanceRef.current;
-            if (instance) {
-              const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
-              onChangeRef.current?.(markdown);
-              setPlainTextValue(markdownToPlainText(markdown));
-              applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
-              applyLinkHighlights(instance.preview, linksRef.current);
-            }
-            return;
-          }
+        if (event.key === "a" || event.key === "A") {
+          event.stopPropagation();
+          return;
         }
-      }
-      if (modKey && event.shiftKey && (event.key === "z" || event.key === "Z")) {
-        const redoStack = formattingRedoRef.current;
-        if (redoStack.length > 0) {
+        if (event.key === "z" || event.key === "Z") {
           event.preventDefault();
           event.stopImmediatePropagation();
-          formattingUndoRef.current = [
-            ...formattingUndoRef.current,
-            { formatting: [...formattingRef.current], links: [...linksRef.current] },
-          ];
-          const next = redoStack[redoStack.length - 1];
-          formattingRedoRef.current = redoStack.slice(0, -1);
-          formattingRef.current = next.formatting;
-          linksRef.current = next.links;
+
+          const stack = undoStackRef.current;
+          if (stack.length === 0) return;
+
           const instance = editorInstanceRef.current;
-          if (instance) {
-            const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
-            onChangeRef.current?.(markdown);
-            setPlainTextValue(markdownToPlainText(markdown));
-            applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
-            applyLinkHighlights(instance.preview, linksRef.current);
+          if (!instance) return;
+
+          // Push current state to redo stack
+          const currentText = instance.getValue();
+          redoStackRef.current = [
+            ...redoStackRef.current,
+            {
+              text: currentText,
+              formatting: [...formattingRef.current],
+              links: [...linksRef.current],
+              cursorStart: textareaNode?.selectionStart ?? 0,
+              cursorEnd: textareaNode?.selectionEnd ?? 0,
+            },
+          ];
+
+          // Pop from undo stack
+          const prev = stack[stack.length - 1];
+          undoStackRef.current = stack.slice(0, -1);
+
+          // Restore state
+          formattingRef.current = prev.formatting;
+          linksRef.current = prev.links;
+          prevTextRef.current = prev.text;
+
+          isSyncingRef.current = true;
+          instance.setValue(prev.text);
+          isSyncingRef.current = false;
+
+          if (textareaNode) {
+            textareaNode.selectionStart = prev.cursorStart;
+            textareaNode.selectionEnd = prev.cursorEnd;
           }
+
+          const markdown = buildFullMarkdown(prev.text, prev.links, prev.formatting);
+          onChangeRef.current?.(markdown);
+          setPlainTextValue(markdownToPlainText(markdown));
+          applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
+          applyLinkHighlights(instance.preview, linksRef.current);
           return;
         }
       }
+      if (modKey && event.shiftKey && (event.key === "z" || event.key === "Z")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+
+        const stack = redoStackRef.current;
+        if (stack.length === 0) return;
+
+        const instance = editorInstanceRef.current;
+        if (!instance) return;
+
+        // Push current state to undo stack
+        const currentText = instance.getValue();
+        undoStackRef.current = [
+          ...undoStackRef.current,
+          {
+            text: currentText,
+            formatting: [...formattingRef.current],
+            links: [...linksRef.current],
+            cursorStart: textareaNode?.selectionStart ?? 0,
+            cursorEnd: textareaNode?.selectionEnd ?? 0,
+          },
+        ];
+
+        // Pop from redo stack
+        const next = stack[stack.length - 1];
+        redoStackRef.current = stack.slice(0, -1);
+
+        // Restore state
+        formattingRef.current = next.formatting;
+        linksRef.current = next.links;
+        prevTextRef.current = next.text;
+
+        isSyncingRef.current = true;
+        instance.setValue(next.text);
+        isSyncingRef.current = false;
+
+        if (textareaNode) {
+          textareaNode.selectionStart = next.cursorStart;
+          textareaNode.selectionEnd = next.cursorEnd;
+        }
+
+        const markdown = buildFullMarkdown(next.text, next.links, next.formatting);
+        onChangeRef.current?.(markdown);
+        setPlainTextValue(markdownToPlainText(markdown));
+        applyFormattingHighlights(instance.preview, next.formatting, instance.textarea?.value);
+        applyLinkHighlights(instance.preview, next.links);
+        return;
+      }
 
       if (enableAutocomplete && shouldShowAutocomplete) {
         if (event.key === "ArrowDown") {

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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { buildFullMarkdown, type FormattingMeta, type LinkMeta } from "./stepField";
+
+describe("buildFullMarkdown formatting combinations", () => {
+  const noLinks: LinkMeta[] = [];
+
+  it("applies bold and italic to the same range", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 5, type: "bold" },
+      { start: 0, end: 5, type: "italic" },
+    ];
+    expect(buildFullMarkdown("hello", noLinks, formatting)).toBe("***hello***");
+  });
+
+  it("preserves word-level bold when sentence-level bold is applied", () => {
+    // User bolds "adipiscing", then bolds entire sentence.
+    // The word-level bold should be merged into sentence-level bold,
+    // not create nested **...**adipiscing**...** markers.
+    const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: text.length, type: "bold" },
+    ];
+    expect(buildFullMarkdown(text, noLinks, formatting)).toBe(
+      `**${text}**`,
+    );
+  });
+
+  it("bold on word + italic on sentence produces correct markdown", () => {
+    const text = "hello world";
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 5, type: "bold" },
+      { start: 0, end: 11, type: "italic" },
+    ];
+    expect(buildFullMarkdown(text, noLinks, formatting)).toBe("***hello** world*");
+  });
+
+  it("code formatting removes bold and italic", () => {
+    // When code is applied, bold/italic should not appear
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 5, type: "code" },
+    ];
+    expect(buildFullMarkdown("hello", noLinks, formatting)).toBe("`hello`");
+  });
+});

package/src/editor/customMarkdownConverter.test.ts

@@ -1046,6 +1046,26 @@ describe("markdownToBlocks", () => {
     );
   });
 
+  it("does not include content after a blank line in step data", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* step",
+      "  expected",
+      "",
+      "  ![](http://localhost:3000/attachments/mlbix3nOJa.png =303x*)",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({
+      stepTitle: "step",
+      stepData: "expected",
+      expectedResult: "",
+    });
+  });
+
   it("parses bullet lists written with asterisk markers", () => {
     const markdown = [
       "### Preconditions",

package/src/editor/customMarkdownConverter.ts

@@ -941,6 +941,7 @@ function parseTestStep(
   let expectedResult = "";
   let next = index + 1;
   let inExpectedResult = false;
+  let blankLineSeenOutsideCodeBlock = false;
   const stepIndent = current.length - current.trimStart().length;
 
   while (next < lines.length) {
@@ -955,6 +956,7 @@ function parseTestStep(
           expectedResult += "\n";
         } else {
           stepDataLines.push("");
+          blankLineSeenOutsideCodeBlock = true;
         }
       }
       next += 1;
@@ -1066,6 +1068,11 @@ function parseTestStep(
       continue;
     }
 
+    // After a blank line outside a code block, stop adding to step data
+    if (blankLineSeenOutsideCodeBlock) {
+      break;
+    }
+
     if (STEP_DATA_LINE_REGEX.test(rawTrimmed)) {
       const content = unescapeMarkdown(rawTrimmed);
       stepDataLines.push(content);

package/src/editor/styles.css

@@ -1079,7 +1079,8 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview strong.step-preview-bold {
-  font-weight: 600 !important;
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit !important;
   color: inherit !important;
 }
 
@@ -1090,8 +1091,8 @@ html.dark .bn-step-image-preview__content {
 
 .bn-step-editor .overtype-wrapper .overtype-preview code.step-preview-code {
   background-color: transparent !important;
-  border-radius: 3px !important;
-  font-family: "Fira Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
   color: rgb(146, 64, 14) !important;
 }
 
@@ -1356,3 +1357,11 @@ html.dark .bn-step-image-preview__content {
 .bn-testcase--draft {
   --status-color: var(--status-default);
 }
+
+/* Prevent unnecessary horizontal scrollbar on BlockNote tables.
+   ProseMirror sets overflow-x: auto on .tableWrapper, but the
+   table-widgets-container extends slightly past the wrapper edge,
+   triggering a scrollbar even when table content fits. */
+.bn-editor [data-content-type="table"] .tableWrapper {
+  overflow-x: hidden;
+}