testomatio-editor-blocks 0.4.47 → 0.4.48

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

@@ -22,7 +22,17 @@ export declare function canInsertStepOrSnippet(editor: {
  */
 export declare function addStepsBlock(editor: {
     document: any[];
-    insertBlocks: (blocks: any[], referenceId: string, placement: string) => any[];
+    insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
+}): string | null;
+/**
+ * Programmatically add an empty snippet block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty snippet at the end.
+ * Returns the inserted snippet's block ID (for focusing), or null.
+ */
+export declare function addSnippetBlock(editor: {
+    document: any[];
+    insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
 }): string | null;
 export declare const stepBlock: {
     config: {

package/package/editor/blocks/step.js

@@ -142,6 +142,62 @@ export function addStepsBlock(editor) {
     const inserted = editor.insertBlocks([stepsHeading, emptyStep], lastBlock.id, "after");
     return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
 }
+/**
+ * Programmatically add an empty snippet block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty snippet at the end.
+ * Returns the inserted snippet's block ID (for focusing), or null.
+ */
+export function addSnippetBlock(editor) {
+    var _a, _b, _c, _d;
+    const allBlocks = editor.document;
+    const emptySnippet = {
+        type: "snippet",
+        props: { snippetId: "", snippetTitle: "", snippetData: "", snippetExpectedResult: "" },
+        children: [],
+    };
+    let stepsHeadingIndex = -1;
+    for (let i = 0; i < allBlocks.length; i++) {
+        const b = allBlocks[i];
+        if (b.type !== "heading")
+            continue;
+        const text = (Array.isArray(b.content) ? b.content : [])
+            .filter((n) => n.type === "text")
+            .map((n) => { var _a; return (_a = n.text) !== null && _a !== void 0 ? _a : ""; })
+            .join("")
+            .trim()
+            .toLowerCase()
+            .replace(/[:\-–—]$/, "");
+        if (isStepsHeading(text)) {
+            stepsHeadingIndex = i;
+            break;
+        }
+    }
+    if (stepsHeadingIndex >= 0) {
+        let lastIndex = stepsHeadingIndex;
+        for (let i = stepsHeadingIndex + 1; i < allBlocks.length; i++) {
+            const b = allBlocks[i];
+            if (b.type === "testStep" || b.type === "snippet") {
+                lastIndex = i;
+                continue;
+            }
+            if (isEmptyParagraph(b))
+                continue;
+            break;
+        }
+        const inserted = editor.insertBlocks([emptySnippet], allBlocks[lastIndex].id, "after");
+        return (_b = (_a = inserted === null || inserted === void 0 ? void 0 : inserted[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    }
+    const lastBlock = allBlocks[allBlocks.length - 1];
+    const stepsHeading = {
+        type: "heading",
+        props: { level: 3 },
+        content: [{ type: "text", text: "Steps" }],
+        children: [],
+    };
+    const inserted = editor.insertBlocks([stepsHeading, emptySnippet], lastBlock.id, "after");
+    return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
+}
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",

package/package/editor/blocks/stepField.js

@@ -880,6 +880,8 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
         }
         else if (start !== end) {
+            // Remove overlapping formatting of other types before applying new format
+            formattingRef.current = formattingRef.current.filter((f) => f.type === fmtType || f.start >= end || f.end <= start);
             // Add formatting for selection
             formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
         }

package/package/editor/customMarkdownConverter.js

@@ -685,12 +685,9 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         if (detectedType !== listType) {
             break;
         }
-        // Only try to parse as testStep for top-level items (indentLevel === 0)
-        // Under a Steps heading (allowEmptySteps=true): always try for both bullet and numbered
-        // Outside Steps heading: only if the item looks like a test step (has Expected markers or indented data)
-        if (indentLevel === 0 && (allowEmptySteps || isLikelyStep(lines, index))) {
-            const looksLikeTestStep = listType === "bullet" ||
-                (listType === "numbered" && (allowEmptySteps || isLikelyStep(lines, index)));
+        // Only try to parse as testStep for top-level items under a Steps heading
+        if (indentLevel === 0 && allowEmptySteps) {
+            const looksLikeTestStep = listType === "bullet" || listType === "numbered";
             if (looksLikeTestStep) {
                 const nextStep = parseTestStep(lines, index, allowEmptySteps);
                 if (nextStep) {
@@ -736,32 +733,6 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
     }
     return { items, nextIndex: index };
 }
-function isLikelyStep(lines, index) {
-    // Look ahead to see if there's indented content or expected result
-    // Look ahead through subsequent lines for expected result markers or indented content
-    for (let i = index + 1; i < lines.length; i++) {
-        const line = lines[i];
-        const trimmed = line.trim();
-        // Stop at blank lines
-        if (!trimmed)
-            break;
-        // Check for indented content (step data) first — indented lines indicate a test step
-        const hasIndent = /^\s{2,}/.test(line);
-        if (hasIndent)
-            return true;
-        // Stop at new list items, headings, or other block-level elements (only if not indented)
-        if (/^[-*+](\s|$)/.test(trimmed) || /^\d+[.)]\s/.test(trimmed))
-            break;
-        if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::"))
-            break;
-        // Check for expected result markers
-        if (EXPECTED_LABEL_REGEX.test(trimmed))
-            return true;
-        if (trimmed.match(/^\*[^*]*expected/i))
-            return true;
-    }
-    return false;
-}
 function parseTestStep(lines, index, allowEmpty = false, snippetId) {
     const current = lines[index];
     const trimmed = current.trim();
@@ -1225,14 +1196,16 @@ export function markdownToBlocks(markdown, options) {
             }
             continue;
         }
-        const snippetWrapper = parseSnippetWrapper(lines, index);
+        const snippetWrapper = stepsHeadingLevel !== null
+            ? parseSnippetWrapper(lines, index)
+            : null;
         if (snippetWrapper) {
             blocks.push(snippetWrapper.block);
             index = snippetWrapper.nextIndex;
             continue;
         }
-        const stepLikeBlock = (stepsHeadingLevel !== null || isLikelyStep(lines, index))
-            ? parseTestStep(lines, index, stepsHeadingLevel !== null)
+        const stepLikeBlock = stepsHeadingLevel !== null
+            ? parseTestStep(lines, index, true)
             : null;
         if (stepLikeBlock) {
             blocks.push(stepLikeBlock.block);

package/package/index.d.ts

@@ -1,5 +1,5 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, type MarkdownToBlocksOptions, } from "./editor/customMarkdownConverter";

package/package/index.js

@@ -1,5 +1,5 @@
 export { customSchema, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";

package/package/styles.css

@@ -1339,6 +1339,11 @@ html.dark .bn-step-image-preview__content {
   pointer-events: none;
 }
 
+.bn-suggestion-menu .mantine-Badge-label {
+  text-transform: none;
+  font-size: var(--badge-fz-sm);
+}
+
 .bn-suggestion-icon {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.47",
+  "version": "0.4.48",
   "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

@@ -15,13 +15,14 @@ import {
   blocksToMarkdown,
   markdownToBlocks,
   type CustomEditorBlock,
-  type CustomPartialBlock,
+
 } from "./editor/customMarkdownConverter";
 import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import { setImageUploadHandler } from "./editor/stepImageUpload";
+import { canInsertStepOrSnippet, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 import "./App.css";
 
 const focusStepField = (
@@ -291,7 +292,18 @@ function CustomSlashMenu() {
   }
 
   const getItems = async (query: string) => {
-    const defaultItems = getDefaultReactSlashMenuItems(editor);
+    const isMac =
+      typeof navigator !== "undefined" &&
+      (/Mac/.test(navigator.platform) ||
+        (/AppleWebKit/.test(navigator.userAgent) &&
+          /Mobile\/\w+/.test(navigator.userAgent)));
+
+    const defaultItems = getDefaultReactSlashMenuItems(editor).map((item) => {
+      if (item.badge && isMac) {
+        return { ...item, badge: item.badge.replace("Alt", "Option") };
+      }
+      return item;
+    });
 
     const stepItem = {
       key: "test_step" as any,
@@ -334,7 +346,12 @@ function CustomSlashMenu() {
       },
     };
 
-    return filterSuggestionItems([...defaultItems, stepItem, snippetItem], query);
+    const currentBlock = editor.getTextCursorPosition().block;
+    const canInsert = canInsertStepOrSnippet(editor, currentBlock.id);
+    const items = canInsert
+      ? [...defaultItems, stepItem, snippetItem]
+      : defaultItems;
+    return filterSuggestionItems(items, query);
   };
 
   return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
@@ -451,52 +468,14 @@ function App() {
     };
   }, [editor, uploadStepImage]);
 
-  const createTestStepBlock = useMemo<() => CustomPartialBlock>(() => {
-    return () => ({
-      type: "testStep",
-      props: {
-        stepTitle: "",
-        stepData: "",
-        expectedResult: "",
-      },
-      children: [],
-    });
-  }, []);
-
-  const createSnippetBlock = useMemo<() => CustomPartialBlock>(() => {
-    return () => ({
-      type: "snippet",
-      props: {
-        snippetId: "",
-        snippetTitle: "",
-        snippetData: "",
-        snippetExpectedResult: "",
-      },
-      children: [],
-    });
-  }, []);
-
-  const insertBlockAfterSelection = (createBlock: () => CustomPartialBlock, focusFieldName?: string) => {
-    const selection = editor.getSelection();
-    const selectedBlocks = selection?.blocks ?? [];
-    const selectedBlock = selectedBlocks[selectedBlocks.length - 1];
-    const documentBlocks = editor.document;
-    const fallbackBlock = documentBlocks[documentBlocks.length - 1];
-    const referenceId = selectedBlock?.id ?? fallbackBlock?.id;
-
-    if (!referenceId) {
-      return;
-    }
-
-    const inserted = editor.insertBlocks([createBlock()], referenceId, "after");
-    const firstInserted = inserted[0];
-    if (firstInserted && focusFieldName) {
-      focusStepField(editor, firstInserted.id, focusFieldName);
-    }
+  const insertTestStep = () => {
+    const id = addStepsBlock(editor);
+    if (id) focusStepField(editor, id, "title");
+  };
+  const insertSnippet = () => {
+    const id = addSnippetBlock(editor);
+    if (id) focusStepField(editor, id, "snippet-title");
   };
-
-  const insertTestStep = () => insertBlockAfterSelection(createTestStepBlock, "title");
-  const insertSnippet = () => insertBlockAfterSelection(createSnippetBlock, "snippet-title");
 
   const handleCopyMarkdown = async () => {
     if (conversionError) {

package/src/editor/blocks/step.tsx

@@ -105,7 +105,7 @@ export function canInsertStepOrSnippet(
  */
 export function addStepsBlock(editor: {
   document: any[];
-  insertBlocks: (blocks: any[], referenceId: string, placement: string) => any[];
+  insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
 }): string | null {
   const allBlocks = editor.document;
   const emptyStep = {
@@ -157,6 +157,66 @@ export function addStepsBlock(editor: {
   return inserted?.[1]?.id ?? null;
 }
 
+/**
+ * Programmatically add an empty snippet block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty snippet at the end.
+ * Returns the inserted snippet's block ID (for focusing), or null.
+ */
+export function addSnippetBlock(editor: {
+  document: any[];
+  insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
+}): string | null {
+  const allBlocks = editor.document;
+  const emptySnippet = {
+    type: "snippet" as const,
+    props: { snippetId: "", snippetTitle: "", snippetData: "", snippetExpectedResult: "" },
+    children: [],
+  };
+
+  let stepsHeadingIndex = -1;
+  for (let i = 0; i < allBlocks.length; i++) {
+    const b = allBlocks[i];
+    if (b.type !== "heading") continue;
+    const text = (Array.isArray(b.content) ? b.content : [])
+      .filter((n: any) => n.type === "text")
+      .map((n: any) => n.text ?? "")
+      .join("")
+      .trim()
+      .toLowerCase()
+      .replace(/[:\-–—]$/, "");
+    if (isStepsHeading(text)) {
+      stepsHeadingIndex = i;
+      break;
+    }
+  }
+
+  if (stepsHeadingIndex >= 0) {
+    let lastIndex = stepsHeadingIndex;
+    for (let i = stepsHeadingIndex + 1; i < allBlocks.length; i++) {
+      const b = allBlocks[i];
+      if (b.type === "testStep" || b.type === "snippet") {
+        lastIndex = i;
+        continue;
+      }
+      if (isEmptyParagraph(b)) continue;
+      break;
+    }
+    const inserted = editor.insertBlocks([emptySnippet], allBlocks[lastIndex].id, "after");
+    return inserted?.[0]?.id ?? null;
+  }
+
+  const lastBlock = allBlocks[allBlocks.length - 1];
+  const stepsHeading = {
+    type: "heading" as const,
+    props: { level: 3 },
+    content: [{ type: "text" as const, text: "Steps" }],
+    children: [],
+  };
+  const inserted = editor.insertBlocks([stepsHeading, emptySnippet], lastBlock.id, "after");
+  return inserted?.[1]?.id ?? null;
+}
+
 export const stepBlock = createReactBlockSpec(
   {
     type: "testStep",

package/src/editor/blocks/stepField.tsx

@@ -1076,6 +1076,10 @@ export function StepField({
         // Remove formatting
         formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
       } else if (start !== end) {
+        // Remove overlapping formatting of other types before applying new format
+        formattingRef.current = formattingRef.current.filter(
+          (f) => f.type === fmtType || f.start >= end || f.end <= start,
+        );
         // Add formatting for selection
         formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
       } else {

package/src/editor/customMarkdownConverter.test.ts

@@ -704,11 +704,15 @@ describe("markdownToBlocks", () => {
 
   it("parses test steps and test cases", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Open the Login page.",
       "  *Expected*: The Login page loads successfully.",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -723,9 +727,11 @@ describe("markdownToBlocks", () => {
   });
 
   it("parses a step with empty title but with step data", () => {
-    const markdown = ["* ", "  Navigate to the page"].join("\n");
+    const markdown = ["### Steps", "", "* ", "  Navigate to the page"].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -741,6 +747,13 @@ describe("markdownToBlocks", () => {
 
   it("round-trips a title-less step with data", () => {
     const blocks: CustomEditorBlock[] = [
+      {
+        id: "h1",
+        type: "heading",
+        props: { level: 3, textColor: "default", backgroundColor: "default", textAlignment: "left" as const },
+        content: [{ type: "text" as const, text: "Steps", styles: {} }],
+        children: [],
+      },
       {
         id: "s1",
         type: "testStep",
@@ -757,7 +770,8 @@ describe("markdownToBlocks", () => {
 
     const md = blocksToMarkdown(blocks);
     const parsed = markdownToBlocks(md);
-    expect(parsed).toEqual([
+    const stepBlocks = parsed.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -773,12 +787,16 @@ describe("markdownToBlocks", () => {
 
   it("parses snippet markdown into snippet blocks", () => {
     const markdown = [
+      "### Steps",
+      "",
       "<!-- begin snippet #501 -->",
       "Run the seeder",
       "<!-- end snippet #501 -->",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const snippetBlocks = blocks.filter((b) => b.type === "snippet");
+    expect(snippetBlocks).toEqual([
       {
         type: "snippet",
         props: {
@@ -794,13 +812,17 @@ describe("markdownToBlocks", () => {
 
   it("parses snippet markdown with space between # and ID", () => {
     const markdown = [
+      "### Steps",
+      "",
       "<!-- begin snippet # 22289 -->",
       "* Fill `<Email>` with correct registered email",
       "* Verify that the update to the target is successful",
       "<!-- end snippet # 22289 -->",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const snippetBlocks = blocks.filter((b) => b.type === "snippet");
+    expect(snippetBlocks).toEqual([
       {
         type: "snippet",
         props: {
@@ -816,6 +838,8 @@ describe("markdownToBlocks", () => {
 
   it("parses snippet bodies and ignores nested snippet markers", () => {
     const markdown = [
+      "### Steps",
+      "",
       "<!-- begin snippet #888 -->",
       "Prep DB",
       "<!-- begin snippet #ignored -->",
@@ -824,7 +848,9 @@ describe("markdownToBlocks", () => {
       "<!-- end snippet #888 -->",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const snippetBlocks = blocks.filter((b) => b.type === "snippet");
+    expect(snippetBlocks).toEqual([
       {
         type: "snippet",
         props: {
@@ -940,6 +966,8 @@ describe("markdownToBlocks", () => {
 
   it("parses step data containing code fences, blank lines, and images", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Step 2: Update an order status.",
       "  ```",
       "  SQL CREATE bnbmnbm mnbmb mm",
@@ -969,7 +997,9 @@ describe("markdownToBlocks", () => {
       "![](/attachments/HMhkVtlDrO.png)",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -1104,12 +1134,16 @@ describe("markdownToBlocks", () => {
 
    it("parses expected result prefixes with emphasis", () => {
      const markdown = [
+       "### Steps",
+       "",
        "* Open the form.",
        "  **Expected:** The form opens.",
        "  Expected: Fields are empty.",
      ].join("\n");
 
-     expect(markdownToBlocks(markdown)).toEqual([
+     const blocks = markdownToBlocks(markdown);
+     const stepBlocks = blocks.filter((b) => b.type === "testStep");
+     expect(stepBlocks).toEqual([
        {
          type: "testStep",
          props: {
@@ -1125,13 +1159,17 @@ describe("markdownToBlocks", () => {
 
    it("parses test step with data", () => {
      const markdown = [
+       "### Steps",
+       "",
        "* Navigate to login",
        "  Open browser",
        "  Go to login page",
        "  *Expected*: Login form visible",
      ].join("\n");
 
-     expect(markdownToBlocks(markdown)).toEqual([
+     const blocks = markdownToBlocks(markdown);
+     const stepBlocks = blocks.filter((b) => b.type === "testStep");
+     expect(stepBlocks).toEqual([
        {
          type: "testStep",
          props: {
@@ -1147,13 +1185,17 @@ describe("markdownToBlocks", () => {
 
   it("parses unindented step data between the title and expected result", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Prepare test fixtures",
       "Collect user accounts from staging.",
       "Reset passwords for all test accounts.",
       "*Expected*: Test accounts are ready for execution.",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -1169,11 +1211,15 @@ describe("markdownToBlocks", () => {
 
   it("parses expected result containing a markdown image", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Display the generated report.",
       "  *Expected*: ![](/attachments/report.png)",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -1201,17 +1247,26 @@ describe("markdownToBlocks", () => {
       },
     ]);
 
-    expect(markdownRoundTrip).toBe(markdown);
+    expect(markdownRoundTrip).toBe(
+      [
+        "* Display the generated report.",
+        "  *Expected*: ![](/attachments/report.png)",
+      ].join("\n"),
+    );
   });
 
   it("parses expected result with short expected label and image", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Should open login screen",
       "  *Expected*: Login should look like this",
       "  ![](/login.png)",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -1755,11 +1810,15 @@ describe("markdownToBlocks", () => {
 
   it("parses expected result lines written with bold 'Expected Result' prefix for compatibility", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Step 1: Send a chat message to the user.",
       "**Expected Result**: The user receives a real-time notification for the chat message.",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -2407,3 +2466,42 @@ describe("video/audio block serialization", () => {
     expect(md).toBe("[![sound.mp3](/images/file-type-icons/file.svg)](https://example.com/sound.mp3)");
   });
 });
+
+describe("steps require Steps heading", () => {
+  it("does not parse bullet items with Expected markers as steps without a Steps heading", () => {
+    const markdown = [
+      "### Preconditions",
+      "",
+      "* Open the Login page.",
+      "  *Expected*: The Login page loads successfully.",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks.filter((b) => b.type === "testStep")).toHaveLength(0);
+    expect(blocks.filter((b) => b.type === "bulletListItem")).toHaveLength(1);
+  });
+
+  it("does not parse snippet comments as snippet blocks without a Steps heading", () => {
+    const markdown = [
+      "<!-- begin snippet #501 -->",
+      "Run the seeder",
+      "<!-- end snippet #501 -->",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks.filter((b) => b.type === "snippet")).toHaveLength(0);
+  });
+
+  it("parses bullet items as steps when preceded by a Steps heading", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* next 22",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toHaveLength(1);
+    expect((stepBlocks[0].props as any).stepTitle).toBe("next 22");
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -834,14 +834,9 @@ function parseList(
       break;
     }
 
-    // Only try to parse as testStep for top-level items (indentLevel === 0)
-    // Under a Steps heading (allowEmptySteps=true): always try for both bullet and numbered
-    // Outside Steps heading: only if the item looks like a test step (has Expected markers or indented data)
-    if (indentLevel === 0 && (allowEmptySteps || isLikelyStep(lines, index))) {
-      const looksLikeTestStep = listType === "bullet" ||
-        (listType === "numbered" && (
-          allowEmptySteps || isLikelyStep(lines, index)
-        ));
+    // Only try to parse as testStep for top-level items under a Steps heading
+    if (indentLevel === 0 && allowEmptySteps) {
+      const looksLikeTestStep = listType === "bullet" || listType === "numbered";
 
       if (looksLikeTestStep) {
         const nextStep = parseTestStep(lines, index, allowEmptySteps);
@@ -890,31 +885,6 @@ function parseList(
   return { items, nextIndex: index };
 }
 
-function isLikelyStep(lines: string[], index: number): boolean {
-  // Look ahead to see if there's indented content or expected result
-  // Look ahead through subsequent lines for expected result markers or indented content
-  for (let i = index + 1; i < lines.length; i++) {
-    const line = lines[i];
-    const trimmed = line.trim();
-
-    // Stop at blank lines
-    if (!trimmed) break;
-
-    // Check for indented content (step data) first — indented lines indicate a test step
-    const hasIndent = /^\s{2,}/.test(line);
-    if (hasIndent) return true;
-
-    // Stop at new list items, headings, or other block-level elements (only if not indented)
-    if (/^[-*+](\s|$)/.test(trimmed) || /^\d+[.)]\s/.test(trimmed)) break;
-    if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::")) break;
-
-    // Check for expected result markers
-    if (EXPECTED_LABEL_REGEX.test(trimmed)) return true;
-    if (trimmed.match(/^\*[^*]*expected/i)) return true;
-  }
-
-  return false;
-}
 
 function parseTestStep(
   lines: string[],
@@ -1453,15 +1423,17 @@ export function markdownToBlocks(markdown: string, options?: MarkdownToBlocksOpt
       continue;
     }
 
-    const snippetWrapper = parseSnippetWrapper(lines, index);
+    const snippetWrapper = stepsHeadingLevel !== null
+      ? parseSnippetWrapper(lines, index)
+      : null;
     if (snippetWrapper) {
       blocks.push(snippetWrapper.block);
       index = snippetWrapper.nextIndex;
       continue;
     }
 
-    const stepLikeBlock = (stepsHeadingLevel !== null || isLikelyStep(lines, index))
-      ? parseTestStep(lines, index, stepsHeadingLevel !== null)
+    const stepLikeBlock = stepsHeadingLevel !== null
+      ? parseTestStep(lines, index, true)
       : null;
     if (stepLikeBlock) {
       blocks.push(stepLikeBlock.block);

package/src/editor/markdownToBlocks.test.ts

@@ -10,11 +10,15 @@ const baseProps = {
 describe("markdownToBlocks", () => {
   it("parses test steps and test cases", () => {
     const markdown = [
+      "### Steps",
+      "",
       "* Open the Login page.",
       "  *Expected*: The Login page loads successfully.",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    expect(stepBlocks).toEqual([
       {
         type: "testStep",
         props: {
@@ -30,12 +34,16 @@ describe("markdownToBlocks", () => {
 
   it("parses snippet markdown into snippet blocks", () => {
     const markdown = [
+      "### Steps",
+      "",
       "<!-- begin snippet #501 -->",
       "Run the seeder",
       "<!-- end snippet #501 -->",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const snippetBlocks = blocks.filter((b) => b.type === "snippet");
+    expect(snippetBlocks).toEqual([
       {
         type: "snippet",
         props: {
@@ -51,6 +59,8 @@ describe("markdownToBlocks", () => {
 
   it("parses snippet bodies and ignores nested snippet markers", () => {
     const markdown = [
+      "### Steps",
+      "",
       "<!-- begin snippet #888 -->",
       "Prep DB",
       "<!-- begin snippet #ignored -->",
@@ -59,7 +69,9 @@ describe("markdownToBlocks", () => {
       "<!-- end snippet #888 -->",
     ].join("\n");
 
-    expect(markdownToBlocks(markdown)).toEqual([
+    const blocks = markdownToBlocks(markdown);
+    const snippetBlocks = blocks.filter((b) => b.type === "snippet");
+    expect(snippetBlocks).toEqual([
       {
         type: "snippet",
         props: {

package/src/editor/styles.css

@@ -1339,6 +1339,11 @@ html.dark .bn-step-image-preview__content {
   pointer-events: none;
 }
 
+.bn-suggestion-menu .mantine-Badge-label {
+  text-transform: none;
+  font-size: var(--badge-fz-sm);
+}
+
 .bn-suggestion-icon {
   display: inline-flex;
   align-items: center;

package/src/index.ts

@@ -4,7 +4,7 @@ export {
   type CustomBlock,
   type CustomEditor,
 } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";