testomatio-editor-blocks 0.4.29 → 0.4.30

package/package/editor/customMarkdownConverter.js

@@ -266,6 +266,16 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return flattenWithBlankLine(lines, true);
         }
+        case "file": {
+            const url = block.props.url || "";
+            const name = block.props.name || "";
+            const caption = block.props.caption || "";
+            if (url) {
+                const displayUrl = caption || url;
+                lines.push(`[![${name}](${displayUrl})](${url})`);
+            }
+            return flattenWithBlankLine(lines, true);
+        }
         case "testStep":
         case "snippet": {
             const isSnippet = block.type === "snippet";
@@ -1214,6 +1224,20 @@ export function markdownToBlocks(markdown) {
             index = nextIndex;
             continue;
         }
+        const fileMatch = line.trim().match(/^\[!\[([^\]]*)\]\(([^)]*)\)\]\(([^)]+)\)$/);
+        if (fileMatch) {
+            blocks.push({
+                type: "file",
+                props: {
+                    name: fileMatch[1] || "",
+                    caption: fileMatch[2] || "",
+                    url: fileMatch[3],
+                },
+                children: [],
+            });
+            index += 1;
+            continue;
+        }
         const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
         if (imageMatch) {
             blocks.push({

package/package.json

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

@@ -349,6 +349,9 @@ function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
     pasteHandler: createMarkdownPasteHandler(markdownToBlocks),
+    uploadFile: async (file: File) => {
+      return `https://placehold.co/600x400?text=${encodeURIComponent(file.name)}`;
+    },
   });
   const [markdown, setMarkdown] = useState("");
   const [conversionError, setConversionError] = useState<string | null>(null);

package/src/editor/customMarkdownConverter.test.ts

@@ -1513,3 +1513,114 @@ describe("markdownToBlocks", () => {
     expect(roundTripMarkdown).not.toMatch(/\n!\s*$/);
   });
 });
+
+describe("file block serialization", () => {
+  it("serializes a file block with name, caption (display_url), and url", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/file.pdf",
+          name: "report.pdf",
+          caption: "/images/file-type-icons/pdf.svg",
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![report.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)");
+  });
+
+  it("falls back to url when caption is empty", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/file.pdf",
+          name: "file.pdf",
+          caption: "",
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![file.pdf](https://example.com/file.pdf)](https://example.com/file.pdf)");
+  });
+
+  it("outputs nothing when url is empty", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "",
+          name: "file.pdf",
+          caption: "",
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md.trim()).toBe("");
+  });
+});
+
+describe("file block parsing", () => {
+  it("parses file markdown into a file block", () => {
+    const markdown = "[![report.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].type).toBe("file");
+    expect((blocks[0].props as any).name).toBe("report.pdf");
+    expect((blocks[0].props as any).caption).toBe("/images/file-type-icons/pdf.svg");
+    expect((blocks[0].props as any).url).toBe("https://example.com/file.pdf");
+  });
+
+  it("parses file markdown with empty name", () => {
+    const markdown = "[![](https://example.com/url)](https://example.com/url)";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].type).toBe("file");
+    expect((blocks[0].props as any).name).toBe("");
+    expect((blocks[0].props as any).url).toBe("https://example.com/url");
+  });
+
+  it("does not confuse file blocks with image blocks", () => {
+    const markdown = "![caption](https://example.com/image.png)";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].type).toBe("image");
+  });
+
+  it("round-trips file blocks through serialize and parse", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/doc.xlsx",
+          name: "doc.xlsx",
+          caption: "/images/file-type-icons/xlsx.svg",
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    const parsed = markdownToBlocks(md);
+    expect(parsed).toHaveLength(1);
+    expect(parsed[0].type).toBe("file");
+    expect((parsed[0].props as any).url).toBe("https://example.com/doc.xlsx");
+    expect((parsed[0].props as any).name).toBe("doc.xlsx");
+    expect((parsed[0].props as any).caption).toBe("/images/file-type-icons/xlsx.svg");
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -344,6 +344,16 @@ function serializeBlock(
       }
       return flattenWithBlankLine(lines, true);
     }
+    case "file": {
+      const url = (block.props as any).url || "";
+      const name = (block.props as any).name || "";
+      const caption = (block.props as any).caption || "";
+      if (url) {
+        const displayUrl = caption || url;
+        lines.push(`[![${name}](${displayUrl})](${url})`);
+      }
+      return flattenWithBlankLine(lines, true);
+    }
     case "testStep":
     case "snippet": {
       const isSnippet = block.type === "snippet";
@@ -1456,6 +1466,21 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
+    const fileMatch = line.trim().match(/^\[!\[([^\]]*)\]\(([^)]*)\)\]\(([^)]+)\)$/);
+    if (fileMatch) {
+      blocks.push({
+        type: "file",
+        props: {
+          name: fileMatch[1] || "",
+          caption: fileMatch[2] || "",
+          url: fileMatch[3],
+        },
+        children: [],
+      } as CustomPartialBlock);
+      index += 1;
+      continue;
+    }
+
     const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
     if (imageMatch) {
       blocks.push({