testomatio-editor-blocks 0.4.34 → 0.4.36

package/src/editor/customMarkdownConverter.test.ts

@@ -105,6 +105,67 @@ describe("blocksToMarkdown", () => {
     );
   });
 
+  it("serializes a step with empty title but with stepData", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "s1",
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "Navigate to the page",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["* ", "  Navigate to the page"].join("\n"),
+    );
+  });
+
+  it("serializes a step with empty title but with expectedResult", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "s1",
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "",
+          expectedResult: "Login form visible",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["* ", "  *Expected*: Login form visible"].join("\n"),
+    );
+  });
+
+  it("drops completely empty step (no title, no data, no expected)", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "s1",
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe("");
+  });
+
   it("serializes a snippet block with prefixed title", () => {
     const blocks: CustomEditorBlock[] = [
       {
@@ -328,6 +389,116 @@ describe("blocksToMarkdown", () => {
     );
   });
 
+  it("serializes table cells containing newlines as <br/>", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "tbl2",
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Steps", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Expected Results", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "line1\nline2", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "ok", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe(
+      [
+        "| Steps | Expected Results |",
+        "| --- | --- |",
+        "| line1<br/>line2 | ok |",
+      ].join("\n"),
+    );
+  });
+
+  it("serializes table cells with styled text and newlines without trapping <br/> inside markers", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "tbl3",
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Col A", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Col B", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "ok", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [
+                    { type: "text", text: "opened\nnewline", styles: { bold: true } },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe(
+      [
+        "| Col A | Col B |",
+        "| --- | --- |",
+        "| ok | **opened**<br/>**newline** |",
+      ].join("\n"),
+    );
+  });
+
   it("parses a test step with inline image in the title, moving the image to step data", () => {
     const markdown = [
       "## Steps",
@@ -365,6 +536,55 @@ describe("markdownToBlocks", () => {
     ]);
   });
 
+  it("parses a step with empty title but with step data", () => {
+    const markdown = ["* ", "  Navigate to the page"].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "Navigate to the page",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips a title-less step with data", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "s1",
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "Open the browser",
+          expectedResult: "Page loads",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ];
+
+    const md = blocksToMarkdown(blocks);
+    const parsed = markdownToBlocks(md);
+    expect(parsed).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "",
+          stepData: "Open the browser",
+          expectedResult: "Page loads",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+    ]);
+  });
+
   it("parses snippet markdown into snippet blocks", () => {
     const markdown = [
       "<!-- begin snippet #501 -->",
@@ -1212,6 +1432,114 @@ describe("markdownToBlocks", () => {
     ]);
   });
 
+  it("parses <br/> in table cells back to newline", () => {
+    const markdown = [
+      "| A | B |",
+      "| --- | --- |",
+      "| line1<br/>line2 | ok |",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toEqual([
+      {
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "A", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "B", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "line1\nline2", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "ok", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips newlines in table cells", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "tbl3",
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Header", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Info", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "first\nsecond\nthird", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "value", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ];
+
+    const markdown = blocksToMarkdown(blocks);
+    expect(markdown).toContain("first<br/>second<br/>third");
+
+    const parsed = markdownToBlocks(markdown);
+    const row = (parsed[0] as any).content.rows[1];
+    const cellContent = row.cells[0].content;
+    expect(cellContent).toEqual([
+      { type: "text", text: "first\nsecond\nthird", styles: {} },
+    ]);
+  });
+
   it("parses expected result lines written with bold 'Expected Result' prefix for compatibility", () => {
     const markdown = [
       "* Step 1: Send a chat message to the user.",
@@ -1823,3 +2151,46 @@ describe("file block parsing", () => {
     expect(md).toBe(markdown);
   });
 });
+
+describe("video/audio block serialization", () => {
+  it("serializes a video block using the file format", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "video",
+        props: {
+          ...baseProps,
+          url: "https://example.com/video.mp4",
+          name: "recording.mp4",
+          caption: "/images/file-type-icons/mp4.svg",
+          showPreview: true,
+          previewWidth: 512,
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![recording.mp4](/images/file-type-icons/mp4.svg)](https://example.com/video.mp4)");
+  });
+
+  it("serializes an audio block using the file format", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "audio",
+        props: {
+          ...baseProps,
+          url: "https://example.com/sound.mp3",
+          name: "sound.mp3",
+          caption: "/images/file-type-icons/file.svg",
+          showPreview: true,
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![sound.mp3](/images/file-type-icons/file.svg)](https://example.com/sound.mp3)");
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -174,12 +174,21 @@ function applyTextStyles(text: string, styles: EditorStyles | undefined): string
     });
   }
 
-  for (const wrapper of wrappers) {
-    const suffix = wrapper.suffix ?? wrapper.prefix;
-    result = `${wrapper.prefix}${result}${suffix}`;
-  }
+  // Split on newlines so that style markers wrap each line individually.
+  // This prevents <br/> (inserted by table cell formatting) from being
+  // trapped inside markers like **bold<br/>text**.
+  const segments = result.split("\n");
+  const wrapped = segments.map((segment) => {
+    if (!segment) return segment;
+    let s = segment;
+    for (const wrapper of wrappers) {
+      const suffix = wrapper.suffix ?? wrapper.prefix;
+      s = `${wrapper.prefix}${s}${suffix}`;
+    }
+    return s;
+  });
 
-  return result;
+  return wrapped.join("\n");
 }
 
 function inlineToMarkdown(content: CustomEditorBlock["content"]): string {
@@ -347,7 +356,9 @@ function serializeBlock(
       }
       return flattenWithBlankLine(lines, true);
     }
-    case "file": {
+    case "file":
+    case "video":
+    case "audio": {
       const url = (block.props as any).url || "";
       const name = (block.props as any).name || "";
       const caption = (block.props as any).caption || "";
@@ -390,18 +401,19 @@ function serializeBlock(
         return flattenWithBlankLine(lines, true);
       }
 
-      if (stepTitle.length > 0) {
-        const normalizedTitle = stepTitle
-          .split(/\r?\n/)
-          .map((segment: string) => segment.trim())
-          .filter((segment: string) => segment.length > 0)
-          .join(" ");
-
-        if (normalizedTitle.length > 0) {
-          const listStyle = (block.props as any).listStyle ?? "bullet";
-          const prefix = listStyle === "ordered" ? `${(stepIndex ?? 0) + 1}.` : "*";
-          lines.push(`${prefix} ${normalizedTitle}`);
-        }
+      const normalizedTitle = stepTitle
+        .split(/\r?\n/)
+        .map((segment: string) => segment.trim())
+        .filter((segment: string) => segment.length > 0)
+        .join(" ");
+
+      const normalizedExpectedForCheck = stripExpectedPrefix(expectedResult).trim();
+      const hasContent = stepData.length > 0 || normalizedExpectedForCheck.length > 0;
+
+      if (normalizedTitle.length > 0 || hasContent) {
+        const listStyle = (block.props as any).listStyle ?? "bullet";
+        const prefix = listStyle === "ordered" ? `${(stepIndex ?? 0) + 1}.` : "*";
+        lines.push(normalizedTitle.length > 0 ? `${prefix} ${normalizedTitle}` : `${prefix} `);
       }
 
       if (stepData.length > 0) {
@@ -511,7 +523,10 @@ function serializeBlock(
       };
 
       const formattedRows = rows.map(normalizeRow);
-      const formatCell = (value: string) => (value.length ? value : " ");
+      const formatCell = (value: string) => {
+        if (!value.length) return " ";
+        return value.replace(/\n/g, "<br/>");
+      };
       const toAlignmentToken = (alignment: string) => {
         switch (alignment) {
           case "center":
@@ -694,6 +709,13 @@ function parseInlineMarkdown(text: string): EditorInline[] {
       }
     }
 
+    const brMatch = cleaned.slice(i).match(/^<br\s*\/?\s*>/i);
+    if (brMatch) {
+      buffer += "\n";
+      i += brMatch[0].length;
+      continue;
+    }
+
     buffer += cleaned[i];
     i += 1;
   }
@@ -722,7 +744,7 @@ function detectListType(trimmed: string): "bullet" | "numbered" | "check" | null
   if (/^\d+[.)]\s+/.test(trimmed)) {
     return "numbered";
   }
-  if (/^[-*+]\s+/.test(trimmed)) {
+  if (/^[-*+](\s+|$)/.test(trimmed)) {
     return "bullet";
   }
   return null;
@@ -838,7 +860,7 @@ function parseList(
       });
     } else {
       const bulletMatch = trimmed.match(/^[-*+]\s+(.*)$/);
-      const text = bulletMatch?.[1] ?? trimmed.slice(2);
+      const text = bulletMatch?.[1] ?? (trimmed.length <= 1 ? "" : trimmed.slice(2));
       items.push({
         type: "bulletListItem",
         props: cloneBaseProps(),
@@ -868,7 +890,7 @@ function isLikelyStep(lines: string[], index: number): boolean {
     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 (/^[-*+](\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
@@ -887,7 +909,7 @@ function parseTestStep(
 ): { block: CustomPartialBlock; nextIndex: number } | null {
   const current = lines[index];
   const trimmed = current.trim();
-  const isBullet = trimmed.startsWith("* ") || trimmed.startsWith("- ");
+  const isBullet = trimmed.startsWith("* ") || trimmed.startsWith("- ") || trimmed === "*" || trimmed === "-";
   const isNumbered = /^\d+[.)]\s+/.test(trimmed);
 
   if (!isBullet && !isNumbered) {
@@ -903,7 +925,9 @@ function parseTestStep(
 
   let rawTitle: string;
   if (isBullet) {
-    rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+    rawTitle = unescapeMarkdown(
+      (trimmed.startsWith("* ") || trimmed.startsWith("- ")) ? trimmed.slice(2) : trimmed.slice(1)
+    ).trim();
   } else {
     // For numbered lists, remove the number and delimiter
     rawTitle = unescapeMarkdown(trimmed.replace(/^\d+[.)]\s+/, "")).trim();
@@ -951,7 +975,7 @@ function parseTestStep(
     }
     const isNumberedStep = NUMBERED_STEP_REGEX.test(rawTrimmed);
     const isNewStep =
-      (!hasIndent && (rawTrimmed.startsWith("* ") || rawTrimmed.startsWith("- "))) ||
+      (!hasIndent && (rawTrimmed.startsWith("* ") || rawTrimmed.startsWith("- ") || rawTrimmed === "*" || rawTrimmed === "-")) ||
       (!hasIndent && isNumberedStep);
 
     if (isNewStep) {

package/src/editor/styles.css

@@ -1074,7 +1074,8 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview strong.step-preview-bold {
-  font-weight: bold !important;
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit !important;
   color: inherit !important;
 }
 
@@ -1083,6 +1084,12 @@ html.dark .bn-step-image-preview__content {
   color: inherit !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-preview code.step-preview-code {
+  background-color: rgba(135, 131, 120, 0.15) !important;
+  border-radius: 3px !important;
+  color: inherit !important;
+}
+
 .bn-step-custom-caret {
   display: none;
   position: absolute;