testomatio-editor-blocks 0.4.29 → 0.4.31

package/package/editor/customMarkdownConverter.js

@@ -1,4 +1,5 @@
 import { isLinkInlineContent, isStyledTextInlineContent, } from "@blocknote/core";
+import { resolveFileDisplayUrl } from "./fileDisplayUrl";
 import { isStepsHeading } from "./blocks/step";
 const BASE_BLOCK_PROPS = {
     textAlignment: "left",
@@ -266,6 +267,15 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return flattenWithBlankLine(lines, true);
         }
+        case "file": {
+            const url = block.props.url || "";
+            const name = block.props.name || "";
+            if (url) {
+                const displayUrl = resolveFileDisplayUrl(name, url);
+                lines.push(`[![${name}](${displayUrl})](${url})`);
+            }
+            return flattenWithBlankLine(lines, true);
+        }
         case "testStep":
         case "snippet": {
             const isSnippet = block.type === "snippet";
@@ -1214,6 +1224,19 @@ export function markdownToBlocks(markdown) {
             index = nextIndex;
             continue;
         }
+        const fileMatch = line.trim().match(/^\[!\[([^\]]*)\]\(([^)]*)\)\]\(([^)]+)\)$/);
+        if (fileMatch) {
+            blocks.push({
+                type: "file",
+                props: {
+                    name: fileMatch[1] || "",
+                    url: fileMatch[3],
+                },
+                children: [],
+            });
+            index += 1;
+            continue;
+        }
         const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
         if (imageMatch) {
             blocks.push({

package/package/editor/fileDisplayUrl.d.ts

@@ -0,0 +1,3 @@
+export type FileDisplayUrlResolver = (fileName: string) => string;
+export declare function setFileDisplayUrlResolver(fn: FileDisplayUrlResolver | null): void;
+export declare function resolveFileDisplayUrl(fileName: string, fallbackUrl: string): string;

package/package/editor/fileDisplayUrl.js

@@ -0,0 +1,15 @@
+let resolver = null;
+export function setFileDisplayUrlResolver(fn) {
+    resolver = fn;
+}
+export function resolveFileDisplayUrl(fileName, fallbackUrl) {
+    var _a;
+    if (resolver) {
+        return resolver(fileName);
+    }
+    const ext = ((_a = fileName.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+    if (ext) {
+        return `/images/file-type-icons/${ext}.svg`;
+    }
+    return fallbackUrl;
+}

package/package/index.d.ts

@@ -5,5 +5,6 @@ export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";
+export { setFileDisplayUrlResolver, resolveFileDisplayUrl, type FileDisplayUrlResolver, } from "./editor/fileDisplayUrl";
 export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -5,5 +5,6 @@ export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";
+export { setFileDisplayUrlResolver, resolveFileDisplayUrl, } from "./editor/fileDisplayUrl";
 export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export const testomatioEditorClassName = "markdown testomatio-editor";

package/package.json

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

@@ -6,6 +6,7 @@ import {
   type CustomEditorBlock,
   type CustomPartialBlock,
 } from "./customMarkdownConverter";
+import { setFileDisplayUrlResolver } from "./fileDisplayUrl";
 
 const baseProps = {
   textAlignment: "left" as const,
@@ -1513,3 +1514,126 @@ describe("markdownToBlocks", () => {
     expect(roundTripMarkdown).not.toMatch(/\n!\s*$/);
   });
 });
+
+describe("file block serialization", () => {
+  it("serializes a file block using display url resolver", () => {
+    setFileDisplayUrlResolver((name: string) => {
+      const ext = name.split(".").pop()?.toLowerCase() || "";
+      return `/images/file-type-icons/${ext}.svg`;
+    });
+
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/file.pdf",
+          name: "report.pdf",
+          caption: "",
+        },
+        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)");
+
+    setFileDisplayUrlResolver(null);
+  });
+
+  it("falls back to url when no resolver is set", () => {
+    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](/images/file-type-icons/pdf.svg)](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).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", () => {
+    setFileDisplayUrlResolver((name: string) => {
+      const ext = name.split(".").pop()?.toLowerCase() || "";
+      return `/images/file-type-icons/${ext}.svg`;
+    });
+
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/doc.xlsx",
+          name: "doc.xlsx",
+          caption: "",
+        },
+        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");
+
+    setFileDisplayUrlResolver(null);
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -8,6 +8,7 @@ import type {
   PartialBlock,
   Styles,
 } from "@blocknote/core";
+import { resolveFileDisplayUrl } from "./fileDisplayUrl";
 import type { customSchema } from "./customSchema";
 import { isStepsHeading } from "./blocks/step";
 
@@ -344,6 +345,15 @@ function serializeBlock(
       }
       return flattenWithBlankLine(lines, true);
     }
+    case "file": {
+      const url = (block.props as any).url || "";
+      const name = (block.props as any).name || "";
+      if (url) {
+        const displayUrl = resolveFileDisplayUrl(name, url);
+        lines.push(`[![${name}](${displayUrl})](${url})`);
+      }
+      return flattenWithBlankLine(lines, true);
+    }
     case "testStep":
     case "snippet": {
       const isSnippet = block.type === "snippet";
@@ -1456,6 +1466,20 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
+    const fileMatch = line.trim().match(/^\[!\[([^\]]*)\]\(([^)]*)\)\]\(([^)]+)\)$/);
+    if (fileMatch) {
+      blocks.push({
+        type: "file",
+        props: {
+          name: fileMatch[1] || "",
+          url: fileMatch[3],
+        },
+        children: [],
+      } as CustomPartialBlock);
+      index += 1;
+      continue;
+    }
+
     const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
     if (imageMatch) {
       blocks.push({

package/src/editor/fileDisplayUrl.ts

@@ -0,0 +1,18 @@
+export type FileDisplayUrlResolver = (fileName: string) => string;
+
+let resolver: FileDisplayUrlResolver | null = null;
+
+export function setFileDisplayUrlResolver(fn: FileDisplayUrlResolver | null) {
+  resolver = fn;
+}
+
+export function resolveFileDisplayUrl(fileName: string, fallbackUrl: string): string {
+  if (resolver) {
+    return resolver(fileName);
+  }
+  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+  if (ext) {
+    return `/images/file-type-icons/${ext}.svg`;
+  }
+  return fallbackUrl;
+}

package/src/index.ts

@@ -30,6 +30,12 @@ export {
   type StepImageUploadHandler,
 } from "./editor/stepImageUpload";
 
+export {
+  setFileDisplayUrlResolver,
+  resolveFileDisplayUrl,
+  type FileDisplayUrlResolver,
+} from "./editor/fileDisplayUrl";
+
 export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 
 export const testomatioEditorClassName = "markdown testomatio-editor";