testomatio-editor-blocks 0.3.0 → 0.4.1

package/src/editor/customMarkdownConverter.ts

@@ -61,7 +61,7 @@ const headingPrefixes: Record<number, string> = {
 const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<>\\])/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
-const EXPECTED_LABEL_REGEX = /^(?:[*_`]*\s*)?(expected(?:\s+result)?)\s*(?:[*_`]*\s*)?(?:\s*[:\-–—]?\s*)/i;
+const EXPECTED_LABEL_REGEX = /^(?:[*_`]*\s*)?(expected(?:\s+result)?)\s*(?:[*_`]*\s*)?\s*[:\-–—]\s*/i;
 // Matches any non-empty line that falls between the step title and the expected result line.
 const STEP_DATA_LINE_REGEX =
   /^(?!\s*(?:[*_`]*\s*)?(?:expected(?:\s+result)?)\b).+/i;
@@ -185,22 +185,62 @@ function inlineToMarkdown(content: CustomEditorBlock["content"]): string {
     return "";
   }
 
-  return (content as EditorInline[])
-    .map((item) => {
-      if (isStyledTextInlineContent(item)) {
-        return applyTextStyles(escapeMarkdown(item.text), item.styles);
-      }
+  const result: string[] = [];
+  let i = 0;
 
-      if (isLinkInlineContent(item)) {
-        const inner = inlineToMarkdown(item.content);
-        const safeHref = escapeMarkdown(item.href);
-        return `[${inner}](${safeHref})`;
+  while (i < content.length) {
+    const item = content[i];
+
+    if (isStyledTextInlineContent(item)) {
+      // Check if this is a "!" followed by a link (image syntax)
+      if (item.text === "!" && i + 1 < content.length && isLinkInlineContent(content[i + 1])) {
+        const link = content[i + 1] as any;
+        const inner = inlineToMarkdown(link.content);
+        const safeHref = escapeMarkdown(link.href);
+        result.push(`![${inner}](${safeHref})`);
+        i += 2;
+        continue;
       }
+      result.push(applyTextStyles(escapeMarkdown(item.text), item.styles));
+      i += 1;
+      continue;
+    }
 
-      if (Array.isArray((item as any).content)) {
-        return inlineToMarkdown((item as any).content);
-      }
+    if (isLinkInlineContent(item)) {
+      const inner = inlineToMarkdown(item.content);
+      const safeHref = escapeMarkdown(item.href);
+      result.push(`[${inner}](${safeHref})`);
+      i += 1;
+      continue;
+    }
+
+    if (Array.isArray((item as any).content)) {
+      result.push(inlineToMarkdown((item as any).content));
+      i += 1;
+      continue;
+    }
+
+    i += 1;
+  }
 
+  return result.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("");
@@ -593,10 +633,13 @@ function parseInlineMarkdown(text: string): EditorInline[] {
         pushPlain();
         const label = cleaned.slice(i + 1, endLabel);
         const href = cleaned.slice(startLink + 1, endLink);
+        const parsedLabel = parseInlineMarkdown(label);
+        // Ensure link content is never undefined - if empty, add empty text
+        const linkContent = parsedLabel.length > 0 ? parsedLabel : [{ type: "text", text: "", styles: {} }];
         result.push({
           type: "link",
           href: unescapeMarkdown(href),
-          content: parseInlineMarkdown(label),
+          content: linkContent,
         } as any);
         i = endLink + 1;
         continue;
@@ -667,6 +710,7 @@ function parseList(
   startIndex: number,
   listType: "bullet" | "numbered" | "check",
   indentLevel: number,
+  allowEmptySteps = false,
 ): ListParseResult {
   const items: CustomPartialBlock[] = [];
   let index = startIndex;
@@ -681,15 +725,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 +742,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 +764,27 @@ function parseList(
       break;
     }
 
+    // Only try to parse as testStep for top-level items (indentLevel === 0)
+    // when we're under a Steps heading AND the list type is bullet
+    // Numbered lists under Steps heading are only parsed as test steps if they look like test steps
+    if (indentLevel === 0 && allowEmptySteps) {
+      // For bullet lists, always try to parse as test steps
+      // For numbered lists, only try if they have step-like characteristics
+      const looksLikeTestStep = listType === "bullet" ||
+        (listType === "numbered" && (
+          isLikelyStep(lines, index)
+        ));
+
+      if (looksLikeTestStep) {
+        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";
@@ -746,18 +822,56 @@ 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
+  if (index + 1 >= lines.length) return false;
+
+  const nextLine = lines[index + 1];
+  const hasIndent = /^\s{2,}/.test(nextLine);
+
+  // Check if the next line contains expected result markers
+  const nextTrimmed = nextLine.trim();
+  const hasExpectedResult = EXPECTED_LABEL_REGEX.test(nextTrimmed);
+
+  // Only consider it a test step if:
+  // 1. It has an expected result, OR
+  // 2. The next line is indented but doesn't start with a numbered or bullet list
+  if (hasExpectedResult) return true;
+  if (hasIndent && !/^\d+[.)]/.test(nextTrimmed) && !/^[-*+]/.test(nextTrimmed)) return true;
+
+  return false;
+}
+
 function parseTestStep(
   lines: string[],
   index: number,
+  allowEmpty = false,
   snippetId?: string,
 ): { block: CustomPartialBlock; nextIndex: number } | null {
   const current = lines[index];
   const trimmed = current.trim();
-  if (!trimmed.startsWith("* ") && !trimmed.startsWith("- ")) {
+  const isBullet = trimmed.startsWith("* ") || trimmed.startsWith("- ");
+  const isNumbered = /^\d+[.)]\s+/.test(trimmed);
+
+  if (!isBullet && !isNumbered) {
     return null;
   }
 
-  let rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+  // For numbered lists, only parse as test steps if called from parseList with allowEmpty=true
+  // The first call to parseTestStep from markdownToBlocks uses allowEmpty=stepsHeadingLevel !== null
+  // which should be false unless we're under a Steps heading
+  if (isNumbered && !allowEmpty) {
+    return null;
+  }
+
+  let rawTitle: string;
+  if (isBullet) {
+    rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+  } else {
+    // For numbered lists, remove the number and delimiter
+    rawTitle = unescapeMarkdown(trimmed.replace(/^\d+[.)]\s+/, "")).trim();
+  }
+
   let blockType: "testStep" | "snippet" = "testStep";
   const snippetMatch = rawTitle.match(/^snippet\s*[:\-–—]?\s*(.*)$/i);
   if (snippetMatch) {
@@ -788,8 +902,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 +930,66 @@ 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) {
       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)) {
+      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 +999,15 @@ 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;
+        }
+      }
       next += 1;
       continue;
     }
@@ -849,6 +1019,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 +1035,12 @@ function parseTestStep(
     .join("\n")
     .trim();
 
-  if (!isLikelyStep && !expectedResult && stepDataLines.length === 0) {
+  if (
+    !isLikelyStep &&
+    !expectedResult &&
+    stepDataLines.length === 0 &&
+    !(allowEmpty && titleWithPlaceholders.length > 0)
+  ) {
     return null;
   }
 
@@ -1090,11 +1273,81 @@ function parseSnippetWrapper(
   };
 }
 
+// Post-process blocks to fix malformed image blocks
+export function fixMalformedImageBlocks(blocks: CustomPartialBlock[]): CustomPartialBlock[] {
+  const result: CustomPartialBlock[] = [];
+  let i = 0;
+
+  while (i < blocks.length) {
+    const current = blocks[i];
+    const next = blocks[i + 1];
+
+    // Skip empty paragraphs
+    if (
+      current.type === "paragraph" &&
+      (!current.content || !Array.isArray(current.content) || current.content.length === 0)
+    ) {
+      i += 1;
+      continue;
+    }
+
+    // Check if current is a paragraph with just "!" - this is definitely a malformed image
+    if (
+      current.type === "paragraph" &&
+      current.content &&
+      Array.isArray(current.content) &&
+      current.content.length === 1 &&
+      (current.content[0] as any)?.type === "text" &&
+      (current.content[0] as any)?.text === "!"
+    ) {
+      // This is a malformed image block, skip it entirely
+      // The full image was likely parsed as ![](...) but got corrupted
+      i += 1;
+      continue;
+    }
+
+    // Check if current is a paragraph with just "!" and next is an empty paragraph
+    if (
+      current.type === "paragraph" &&
+      next?.type === "paragraph" &&
+      current.content &&
+      Array.isArray(current.content) &&
+      current.content.length === 1 &&
+      (current.content[0] as any)?.type === "text" &&
+      (current.content[0] as any)?.text === "!" &&
+      (!next.content || !Array.isArray(next.content) || next.content.length === 0)
+    ) {
+      // This looks like a malformed image, skip both blocks
+      i += 2;
+      continue;
+    }
+
+    // Check if current has "!" but no link
+    if (
+      current.type === "paragraph" &&
+      current.content &&
+      Array.isArray(current.content) &&
+      current.content.some((item: any) => item.type === "text" && item.text === "!") &&
+      !current.content.some((item: any) => item.type === "link")
+    ) {
+      // Skip malformed image block
+      i += 1;
+      continue;
+    }
+
+    result.push(current);
+    i += 1;
+  }
+
+  return result;
+}
+
 export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
   const normalized = markdown.replace(/\r\n/g, "\n");
   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 +1363,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 +1379,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.replace(/[:\-–—]$/, "") === "steps") {
+        stepsHeadingLevel = headingLevel;
+      } else if (
+        stepsHeadingLevel !== null &&
+        headingLevel <= stepsHeadingLevel &&
+        normalizedHeading.length > 0
+      ) {
+        stepsHeadingLevel = null;
+      }
+
+      blocks.push(headingBlock);
       index = heading.nextIndex;
       continue;
     }
@@ -1147,7 +1415,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;
@@ -1158,7 +1432,7 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
     index = paragraph.nextIndex;
   }
 
-  return blocks;
+  return fixMalformedImageBlocks(blocks);
 }
 
 function splitTableRow(line: string): string[] {

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: [],
+    });
+  });
+});