testomatio-editor-blocks 0.4.30 → 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",
@@ -269,9 +270,8 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
         case "file": {
             const url = block.props.url || "";
             const name = block.props.name || "";
-            const caption = block.props.caption || "";
             if (url) {
-                const displayUrl = caption || url;
+                const displayUrl = resolveFileDisplayUrl(name, url);
                 lines.push(`[![${name}](${displayUrl})](${url})`);
             }
             return flattenWithBlankLine(lines, true);
@@ -1230,7 +1230,6 @@ export function markdownToBlocks(markdown) {
                 type: "file",
                 props: {
                     name: fileMatch[1] || "",
-                    caption: fileMatch[2] || "",
                     url: fileMatch[3],
                 },
                 children: [],

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.30",
+  "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/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,
@@ -1515,7 +1516,12 @@ describe("markdownToBlocks", () => {
 });
 
 describe("file block serialization", () => {
-  it("serializes a file block with name, caption (display_url), and url", () => {
+  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",
@@ -1524,7 +1530,7 @@ describe("file block serialization", () => {
           ...baseProps,
           url: "https://example.com/file.pdf",
           name: "report.pdf",
-          caption: "/images/file-type-icons/pdf.svg",
+          caption: "",
         },
         content: undefined as any,
         children: [],
@@ -1532,9 +1538,11 @@ describe("file block serialization", () => {
     ];
     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 caption is empty", () => {
+  it("falls back to url when no resolver is set", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1550,7 +1558,7 @@ describe("file block serialization", () => {
       },
     ];
     const md = blocksToMarkdown(blocks);
-    expect(md).toBe("[![file.pdf](https://example.com/file.pdf)](https://example.com/file.pdf)");
+    expect(md).toBe("[![file.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)");
   });
 
   it("outputs nothing when url is empty", () => {
@@ -1580,7 +1588,6 @@ describe("file block parsing", () => {
     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");
   });
 
@@ -1601,6 +1608,11 @@ describe("file block parsing", () => {
   });
 
   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",
@@ -1609,7 +1621,7 @@ describe("file block parsing", () => {
           ...baseProps,
           url: "https://example.com/doc.xlsx",
           name: "doc.xlsx",
-          caption: "/images/file-type-icons/xlsx.svg",
+          caption: "",
         },
         content: undefined as any,
         children: [],
@@ -1621,6 +1633,7 @@ describe("file block parsing", () => {
     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");
+
+    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";
 
@@ -347,9 +348,8 @@ function serializeBlock(
     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;
+        const displayUrl = resolveFileDisplayUrl(name, url);
         lines.push(`[![${name}](${displayUrl})](${url})`);
       }
       return flattenWithBlankLine(lines, true);
@@ -1472,7 +1472,6 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
         type: "file",
         props: {
           name: fileMatch[1] || "",
-          caption: fileMatch[2] || "",
           url: fileMatch[3],
         },
         children: [],

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";