testomatio-editor-blocks 0.2.3 → 0.4.0

package/src/editor/blocks/useAutoResize.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+
+type Options = {
+  textarea: HTMLTextAreaElement | null;
+  multiline?: boolean;
+  minRows?: number;
+  maxRows?: number;
+};
+
+export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRows = 12 }: Options) {
+  const frameRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!textarea || !multiline) {
+      return;
+    }
+
+    const resize = () => {
+      textarea.style.height = "auto";
+      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight || "16");
+      const minHeight = lineHeight * minRows;
+      const maxHeight = lineHeight * maxRows;
+
+      textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
+    };
+
+    const observer = new MutationObserver(resize);
+    observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+
+    const handleInput = () => {
+      cancelAnimationFrame(frameRef.current ?? 0);
+      frameRef.current = requestAnimationFrame(resize);
+    };
+
+    textarea.addEventListener("input", handleInput);
+    resize();
+
+    return () => {
+      observer.disconnect();
+      textarea.removeEventListener("input", handleInput);
+      cancelAnimationFrame(frameRef.current ?? 0);
+    };
+  }, [textarea, multiline, minRows, maxRows]);
+}

package/src/editor/customMarkdownConverter.test.ts

@@ -157,6 +157,21 @@ describe("blocksToMarkdown", () => {
     );
   });
 
+  it("cleans escaped formatting markers when toggling styles repeatedly", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "esc1",
+        type: "paragraph",
+        props: baseProps,
+        content: [{ type: "text", text: "text", styles: { bold: true, italic: true } }],
+        children: [],
+      },
+    ];
+
+    const markdown = blocksToMarkdown(blocks);
+    expect(markdown).toBe("***text***");
+  });
+
    it("keeps inline formatting inside step fields", () => {
      const blocks: CustomEditorBlock[] = [
        {
@@ -474,7 +489,7 @@ describe("markdownToBlocks", () => {
         props: {
           stepTitle: "Step 4: Verify that the notifications are displayed correctly in the application's notification panel.",
           stepData: "",
-          expectedResult: "All notifications (chat message, order update, file received) are listed in the notification panel with the correct information (e.g., timestamp, message content).",
+          expectedResult: "All notifications (chat message, order update, file received) are listed in the notification panel with the correct information (e.g., timestamp, message content).\n",
         },
         children: [],
       },
@@ -647,7 +662,7 @@ describe("markdownToBlocks", () => {
          props: {
            stepTitle: "Open the form.",
            stepData: "",
-           expectedResult: "Fields are empty.",
+           expectedResult: "** The form opens.\nFields are empty.",
          },
          children: [],
        },
@@ -773,6 +788,52 @@ describe("markdownToBlocks", () => {
     );
   });
 
+  it("parses steps under a Steps heading even when expected results are missing", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* Pass onboarding as mobile user",
+      "* Navigate to More tab -≻ My Profile -≻ Log into the app with user from preconditions",
+      "  *Expected:* Upsell SS screen is displayed",
+      "* Close SS",
+      "  *Expected:* My Course and More tab are displayed",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+
+    expect(stepBlocks).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "Pass onboarding as mobile user",
+          stepData: "",
+          expectedResult: "",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle:
+            "Navigate to More tab -≻ My Profile -≻ Log into the app with user from preconditions",
+          stepData: "",
+          expectedResult: "* Upsell SS screen is displayed",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "Close SS",
+          stepData: "",
+          expectedResult: "* My Course and More tab are displayed",
+        },
+        children: [],
+      },
+    ]);
+  });
+
   it("round-trips simple blocks", () => {
     const blocks: CustomEditorBlock[] = [
       {
@@ -865,4 +926,55 @@ describe("markdownToBlocks", () => {
       },
     ]);
   });
+
+  it("parses multiple Expected blocks within a single test step", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* Swipe Back",
+      "* Check UI of Sleep score info screen",
+      "  - Back button",
+      "    Header: Sleep Score Info",
+      "    Text: Ever wonder if 6, 8, or 9 hours of sleep are enough? Sleep score takes the guesswork out of your ZZZ's and shows you how well you slept last night based on duration, efficiency, and consistency.",
+      "  *Expected:* - 1st block:",
+      "  *Expected:* - 2nd block:",
+      "  *Expected:* - 3d block:",
+      "* Tap 'Back' button",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+
+    expect(stepBlocks).toHaveLength(3);
+
+    expect(stepBlocks[0]).toEqual({
+      type: "testStep",
+      props: {
+        stepTitle: "Swipe Back",
+        stepData: "",
+        expectedResult: "",
+      },
+      children: [],
+    });
+
+    expect(stepBlocks[1]).toEqual({
+      type: "testStep",
+      props: {
+        stepTitle: "Check UI of Sleep score info screen",
+        stepData: "- Back button\nHeader: Sleep Score Info\nText: Ever wonder if 6, 8, or 9 hours of sleep are enough? Sleep score takes the guesswork out of your ZZZ's and shows you how well you slept last night based on duration, efficiency, and consistency.",
+        expectedResult: "* - 1st block:\n* - 2nd block:\n* - 3d block:",
+      },
+      children: [],
+    });
+
+    expect(stepBlocks[2]).toEqual({
+      type: "testStep",
+      props: {
+        stepTitle: "Tap 'Back' button",
+        stepData: "",
+        expectedResult: "",
+      },
+      children: [],
+    });
+  });
 });

package/src/editor/customMarkdownConverter.ts

@@ -206,6 +206,26 @@ function inlineToMarkdown(content: CustomEditorBlock["content"]): string {
     .join("");
 }
 
+function inlineContentToPlainText(content: CustomEditorBlock["content"]): string {
+  if (!Array.isArray(content)) {
+    return "";
+  }
+
+  return (content as any[])
+    .map((node: any) => {
+      if (node && typeof node === "object") {
+        if (typeof node.text === "string") {
+          return node.text;
+        }
+        if (Array.isArray(node.content)) {
+          return inlineContentToPlainText(node.content);
+        }
+      }
+      return "";
+    })
+    .join("");
+}
+
 function serializeChildren(block: CustomEditorBlock, ctx: MarkdownContext): string[] {
   if (!block.children?.length) {
     return [];
@@ -667,6 +687,7 @@ function parseList(
   startIndex: number,
   listType: "bullet" | "numbered" | "check",
   indentLevel: number,
+  allowEmptySteps = false,
 ): ListParseResult {
   const items: CustomPartialBlock[] = [];
   let index = startIndex;
@@ -681,15 +702,15 @@ function parseList(
     }
 
     let indent = countIndent(rawLine);
-    const baseIndent = indentLevel * 2;
-    if (indent > baseIndent && indent <= baseIndent + 1) {
-      indent = baseIndent;
-    }
+
     if (indent < indentLevel * 2) {
       break;
     }
 
-    if (indent > indentLevel * 2) {
+    // Check if this line should be parsed as nested content
+    // Only go deeper if indent is at least 2 more than the next level's expected indent
+    const nextLevelExpectedIndent = (indentLevel + 1) * 2;
+    if (indent >= nextLevelExpectedIndent) {
       const lastItem = items.at(-1);
       if (!lastItem) {
         break;
@@ -698,7 +719,18 @@ function parseList(
       if (!nestedType) {
         break;
       }
-      const nested = parseList(lines, index, nestedType, indentLevel + 1);
+      const nested = parseList(
+        lines,
+        index,
+        nestedType,
+        indentLevel + 1,
+        allowEmptySteps,
+      );
+      // If nested parsing made no progress, skip this line to avoid infinite loop
+      if (nested.nextIndex === index) {
+        index += 1;
+        continue;
+      }
       lastItem.children = [...(lastItem.children ?? []), ...nested.items];
       index = nested.nextIndex;
       continue;
@@ -709,6 +741,17 @@ function parseList(
       break;
     }
 
+    // Only try to parse as testStep for top-level bullet items (indentLevel === 0)
+    // Nested bullets within numbered lists should remain as regular bulletListItem
+    if (listType === "bullet" && indentLevel === 0) {
+      const nextStep = parseTestStep(lines, index, allowEmptySteps);
+      if (nextStep) {
+        items.push(nextStep.block);
+        index = nextStep.nextIndex;
+        continue;
+      }
+    }
+
     if (listType === "check") {
       const checkMatch = trimmed.match(/^[-*+]\s+\[([xX\s])\]\s+(.*)$/);
       const checked = (checkMatch?.[1] ?? "").toLowerCase() === "x";
@@ -749,6 +792,7 @@ function parseList(
 function parseTestStep(
   lines: string[],
   index: number,
+  allowEmpty = false,
   snippetId?: string,
 ): { block: CustomPartialBlock; nextIndex: number } | null {
   const current = lines[index];
@@ -781,6 +825,7 @@ function parseTestStep(
   let expectedResult = "";
   let next = index + 1;
   let inExpectedResult = false;
+  let foundFirstExpected = false;
 
   while (next < lines.length) {
     const line = lines[next];
@@ -788,8 +833,12 @@ function parseTestStep(
     const rawTrimmed = line.trim();
 
     if (!rawTrimmed) {
-      if (stepDataLines.length > 0) {
-        stepDataLines.push("");
+      if (stepDataLines.length > 0 || inExpectedResult) {
+        if (inExpectedResult) {
+          expectedResult += "\n";
+        } else {
+          stepDataLines.push("");
+        }
       }
       next += 1;
       continue;
@@ -812,21 +861,68 @@ function parseTestStep(
       break;
     }
 
-    if (rawTrimmed.match(EXPECTED_LABEL_REGEX)) {
+    // Check for expected result labels with different formatting
+    const expectedMatch = rawTrimmed.match(EXPECTED_LABEL_REGEX);
+    const expectedStarMatch = rawTrimmed.match(/^\*expected\s*\*:\s*(.*)$/i) ||
+                               rawTrimmed.match(/^\*expected\*:\s*(.*)$/i);
+
+    if (expectedMatch || expectedStarMatch) {
+      foundFirstExpected = true;
       inExpectedResult = true;
-      const withoutLabel = stripExpectedPrefix(rawTrimmed);
-      expectedResult = unescapeMarkdown(withoutLabel);
+      const label = expectedMatch ? expectedMatch[0] : (expectedStarMatch ? expectedStarMatch[0] : '');
+      let content = rawTrimmed.slice(label.length).trim();
+
+      // Add the content (if any) from this line
+      if (content) {
+        const expectedContent = unescapeMarkdown(content);
+        if (expectedResult.length > 0) {
+          expectedResult += "\n" + expectedContent;
+        } else {
+          expectedResult = expectedContent;
+        }
+      }
+      next += 1;
+      continue;
+    }
+
+    // Check for lines that start with * and contain Expected (but don't match the above patterns)
+    if (rawTrimmed.match(/^\*[^*]*expected/i)) {
+      foundFirstExpected = true;
+      inExpectedResult = true;
+      // Remove the leading * and trim
+      let content = rawTrimmed.slice(1).trim();
+      // Remove any "Expected:" prefix
+      content = content.replace(/^expected\s*:?\s*/i, '').trim();
+
+      const expectedContent = unescapeMarkdown(content);
+      if (expectedResult.length > 0) {
+        expectedResult += "\n" + expectedContent;
+      } else {
+        expectedResult = expectedContent;
+      }
       next += 1;
       continue;
     }
 
     if (rawTrimmed.startsWith("```")) {
-      stepDataLines.push(unescapeMarkdown(rawTrimmed));
+      if (inExpectedResult) {
+        if (expectedResult.length > 0) {
+          expectedResult += "\n" + unescapeMarkdown(rawTrimmed);
+        } else {
+          expectedResult = unescapeMarkdown(rawTrimmed);
+        }
+      } else {
+        stepDataLines.push(unescapeMarkdown(rawTrimmed));
+      }
       next += 1;
       while (next < lines.length) {
         const fenceLine = lines[next];
         const fenceTrimmed = fenceLine.trim();
-        stepDataLines.push(unescapeMarkdown(fenceTrimmed));
+        if (inExpectedResult) {
+          expectedResult += "\n" + unescapeMarkdown(fenceTrimmed);
+        } else {
+          stepDataLines.push(unescapeMarkdown(fenceTrimmed));
+        }
         next += 1;
         if (fenceTrimmed.startsWith("```")) {
           break;
@@ -836,8 +932,24 @@ function parseTestStep(
     }
 
     if (inExpectedResult) {
-      const withoutLabel = stripExpectedPrefix(rawTrimmed);
-      expectedResult += "\n" + unescapeMarkdown(withoutLabel);
+      // After finding the first expected result, indented lines are part of it
+      if (hasIndent) {
+        const expectedContent = unescapeMarkdown(rawTrimmed);
+        if (expectedResult.length > 0) {
+          expectedResult += "\n" + expectedContent;
+        } else {
+          expectedResult = expectedContent;
+        }
+      } else if (foundFirstExpected && rawTrimmed.startsWith("*") && !rawTrimmed.startsWith("* ")) {
+        // Non-indented lines starting with single * (not list item) are likely more expected results
+        // Remove the leading * and treat the rest as content
+        const expectedContent = unescapeMarkdown(rawTrimmed.slice(1).trim());
+        if (expectedResult.length > 0) {
+          expectedResult += "\n" + expectedContent;
+        } else {
+          expectedResult = expectedContent;
+        }
+      }
       next += 1;
       continue;
     }
@@ -849,6 +961,14 @@ function parseTestStep(
       continue;
     }
 
+    // If we have indent and the line doesn't match other patterns, treat it as step data
+    if (hasIndent) {
+      const content = unescapeMarkdown(rawTrimmed);
+      stepDataLines.push(content);
+      next += 1;
+      continue;
+    }
+
     break;
   }
 
@@ -857,7 +977,12 @@ function parseTestStep(
     .join("\n")
     .trim();
 
-  if (!isLikelyStep && !expectedResult && stepDataLines.length === 0) {
+  if (
+    !isLikelyStep &&
+    !expectedResult &&
+    stepDataLines.length === 0 &&
+    !(allowEmpty && titleWithPlaceholders.length > 0)
+  ) {
     return null;
   }
 
@@ -1095,6 +1220,7 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
   const lines = normalized.split("\n");
   const blocks: CustomPartialBlock[] = [];
   let index = 0;
+  let stepsHeadingLevel: number | null = null;
 
   while (index < lines.length) {
     const line = lines[index];
@@ -1110,7 +1236,7 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
-    const stepLikeBlock = parseTestStep(lines, index);
+    const stepLikeBlock = parseTestStep(lines, index, stepsHeadingLevel !== null);
     if (stepLikeBlock) {
       blocks.push(stepLikeBlock.block);
       index = stepLikeBlock.nextIndex;
@@ -1126,7 +1252,22 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
 
     const heading = parseHeading(lines, index);
     if (heading) {
-      blocks.push(heading.block);
+      const headingBlock = heading.block;
+      const headingLevel = (headingBlock.props as any)?.level ?? 3;
+      const headingText = inlineContentToPlainText(headingBlock.content as any);
+      const normalizedHeading = headingText.trim().toLowerCase();
+
+      if (normalizedHeading === "steps") {
+        stepsHeadingLevel = headingLevel;
+      } else if (
+        stepsHeadingLevel !== null &&
+        headingLevel <= stepsHeadingLevel &&
+        normalizedHeading.length > 0
+      ) {
+        stepsHeadingLevel = null;
+      }
+
+      blocks.push(headingBlock);
       index = heading.nextIndex;
       continue;
     }
@@ -1147,7 +1288,13 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
 
     const listType = detectListType(line.trim());
     if (listType) {
-      const { items, nextIndex } = parseList(lines, index, listType, 0);
+      const { items, nextIndex } = parseList(
+        lines,
+        index,
+        listType,
+        0,
+        stepsHeadingLevel !== null,
+      );
       blocks.push(...items);
       index = nextIndex;
       continue;

package/src/editor/customSchema.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { __markdownTestUtils } from "./customSchema";
+
+describe("customSchema markdown helpers", () => {
+  it("renders markdown images as <img> tags and round-trips back to markdown", () => {
+    const markdown = "![](/attachments/example.png)";
+    const html = __markdownTestUtils.markdownToHtml(markdown);
+
+    expect(html).toContain('<img src="/attachments/example.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
+    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
+  });
+
+  it("handles images mixed with surrounding text", () => {
+    const markdown = [
+      "Success screenshot:",
+      "![](/attachments/success.png)",
+      "Please archive it.",
+    ].join("\n");
+
+    const html = __markdownTestUtils.markdownToHtml(markdown);
+    expect(html).toContain('<img src="/attachments/success.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
+    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
+  });
+
+  it("renders expected-result style markdown with an image", () => {
+    const markdown = [
+      "Login should look like this",
+      "![](/login.png)",
+    ].join("\n");
+
+    const html = __markdownTestUtils.markdownToHtml(markdown);
+    expect(html).toContain('<img src="/login.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
+    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
+  });
+});

package/src/editor/markdownToBlocks.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from "vitest";
+import { markdownToBlocks } from "./customMarkdownConverter";
+
+const baseProps = {
+  textAlignment: "left" as const,
+  textColor: "default" as const,
+  backgroundColor: "default" as const,
+};
+
+describe("markdownToBlocks", () => {
+  it("parses test steps and test cases", () => {
+    const markdown = [
+      "* Open the Login page.",
+      "  *Expected*: The Login page loads successfully.",
+    ].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "Open the Login page.",
+          stepData: "",
+          expectedResult: "The Login page loads successfully.",
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("parses snippet markdown into snippet blocks", () => {
+    const markdown = [
+      "<!-- begin snippet #501 -->",
+      "Run the seeder",
+      "<!-- end snippet #501 -->",
+    ].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "snippet",
+        props: {
+          snippetId: "501",
+          snippetTitle: "",
+          snippetData: "Run the seeder",
+          snippetExpectedResult: "",
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("parses snippet bodies and ignores nested snippet markers", () => {
+    const markdown = [
+      "<!-- begin snippet #888 -->",
+      "Prep DB",
+      "<!-- begin snippet #ignored -->",
+      "Do not keep this marker",
+      "<!-- end snippet #ignored -->",
+      "<!-- end snippet #888 -->",
+    ].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "snippet",
+        props: {
+          snippetId: "888",
+          snippetTitle: "",
+          snippetData: "Prep DB\nDo not keep this marker",
+          snippetExpectedResult: "",
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  // Adding just a few more critical tests to keep the file small and focused
+  it("parses step lists with inline expected results label", () => {
+    const markdown = [
+      "## Test Description: Real-time notifications (chat, order updates, file received)",
+      "",
+      "This test case verifies the functionality of real-time notifications for chat messages, order updates, and file receipts within the application.",
+      "",
+      "### Preconditions",
+      "",
+      "### Steps",
+      "",
+      "* Step 1: Send a chat message to the user.",
+      "**Expected**: The user receives a real-time notification for the chat message.",
+      "* Step 2: Update an order status.",
+      "**Expected**: The user receives a real-time notification for the order update.",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+
+    expect(stepBlocks).toHaveLength(2);
+    expect(stepBlocks[0]).toEqual({
+      type: "testStep",
+      props: {
+        stepTitle: "Step 1: Send a chat message to the user.",
+        stepData: "",
+        expectedResult: "The user receives a real-time notification for the chat message.",
+      },
+      children: [],
+    });
+  });
+
+  it("round-trips simple blocks", () => {
+    const markdown = "Simple paragraph text";
+    const blocks = markdownToBlocks(markdown);
+
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0]).toEqual({
+      type: "paragraph",
+      props: baseProps,
+      content: [{ type: "text", text: "Simple paragraph text", styles: {} }],
+      children: [],
+    });
+  });
+});