testomatio-editor-blocks 0.4.31 → 0.4.32

package/package/editor/blocks/fileBlock.d.ts

@@ -0,0 +1,40 @@
+export declare const fileBlock: {
+    config: {
+        type: "file";
+        propSchema: {
+            backgroundColor: {
+                default: "default";
+            };
+            name: {
+                default: "";
+            };
+            url: {
+                default: "";
+            };
+            caption: {
+                default: "";
+            };
+        };
+        content: "none";
+        isFileBlock: true;
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        type: "file";
+        propSchema: {
+            backgroundColor: {
+                default: "default";
+            };
+            name: {
+                default: "";
+            };
+            url: {
+                default: "";
+            };
+            caption: {
+                default: "";
+            };
+        };
+        content: "none";
+        isFileBlock: true;
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/fileBlock.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fileBlockConfig, fileParse } from "@blocknote/core";
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback } from "react";
+import { resolveFileDisplayUrl } from "../fileDisplayUrl";
+function FileIcon(props) {
+    const { caption, url } = props.block.props;
+    const iconUrl = caption || (url ? resolveFileDisplayUrl(url) : "");
+    if (iconUrl) {
+        return _jsx("img", { src: iconUrl, alt: "", width: 24, height: 24, style: { display: "block" } });
+    }
+    return (_jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z" }) }));
+}
+function FileBlockRender(props) {
+    const addFileButtonMouseDownHandler = useCallback((event) => event.preventDefault(), []);
+    const addFileButtonClickHandler = useCallback(() => {
+        props.editor.transact((tr) => tr.setMeta(props.editor.filePanel.plugins[0], {
+            block: props.block,
+        }));
+    }, [props.block, props.editor]);
+    if (props.block.props.url === "") {
+        return (_jsx("div", { className: "bn-file-block-content-wrapper", children: _jsxs("div", { className: "bn-add-file-button", onMouseDown: addFileButtonMouseDownHandler, onClick: addFileButtonClickHandler, children: [_jsx("div", { className: "bn-add-file-button-icon", children: _jsx(FileIcon, { block: props.block }) }), _jsx("div", { className: "bn-add-file-button-text", children: "Add file" })] }) }));
+    }
+    return (_jsx("div", { className: "bn-file-block-content-wrapper", children: _jsxs("div", { className: "bn-file-name-with-icon", contentEditable: false, draggable: false, children: [_jsx("div", { className: "bn-file-icon", children: _jsx(FileIcon, { block: props.block }) }), _jsx("p", { className: "bn-file-name", children: props.block.props.name || props.block.props.url })] }) }));
+}
+export const fileBlock = createReactBlockSpec(fileBlockConfig, {
+    render: FileBlockRender,
+    parse: fileParse,
+    toExternalHTML: (props) => {
+        if (!props.block.props.url) {
+            return _jsx("p", { children: "Add file" });
+        }
+        return (_jsx("a", { href: props.block.props.url, children: props.block.props.name || props.block.props.url }));
+    },
+});

package/package/editor/customMarkdownConverter.js

@@ -270,8 +270,9 @@ 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 = resolveFileDisplayUrl(name, url);
+                const displayUrl = caption || resolveFileDisplayUrl(url);
                 lines.push(`[![${name}](${displayUrl})](${url})`);
             }
             return flattenWithBlankLine(lines, true);
@@ -1231,6 +1232,7 @@ export function markdownToBlocks(markdown) {
                 props: {
                     name: fileMatch[1] || "",
                     url: fileMatch[3],
+                    caption: fileMatch[2] || "",
                 },
                 children: [],
             });

package/package/editor/customSchema.d.ts

@@ -1,6 +1,46 @@
 import { BlockNoteSchema } from "@blocknote/core";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 export declare const customSchema: BlockNoteSchema<import("@blocknote/core").BlockSchemaFromSpecs<{
+    file: {
+        config: {
+            type: "file";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            type: "file";
+            propSchema: {
+                backgroundColor: {
+                    default: "default";
+                };
+                name: {
+                    default: "";
+                };
+                url: {
+                    default: "";
+                };
+                caption: {
+                    default: "";
+                };
+            };
+            content: "none";
+            isFileBlock: true;
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
     testStep: {
         config: {
             readonly type: "testStep";
@@ -343,46 +383,6 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
             };
         }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
     };
-    file: {
-        config: {
-            type: "file";
-            propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-        };
-        implementation: import("@blocknote/core").TiptapBlockImplementation<{
-            type: "file";
-            propSchema: {
-                backgroundColor: {
-                    default: "default";
-                };
-                name: {
-                    default: "";
-                };
-                url: {
-                    default: "";
-                };
-                caption: {
-                    default: "";
-                };
-            };
-            content: "none";
-            isFileBlock: true;
-        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
-    };
     image: {
         config: {
             type: "image";

package/package/editor/customSchema.js

@@ -2,10 +2,12 @@ import { defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
+import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 export const customSchema = BlockNoteSchema.create({
     blockSpecs: {
         ...defaultBlockSpecs,
+        file: fileBlock,
         testStep: stepBlock,
         snippet: snippetBlock,
     },

package/package/editor/fileDisplayUrl.d.ts

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

package/package/editor/fileDisplayUrl.js

@@ -2,14 +2,9 @@ let resolver = null;
 export function setFileDisplayUrlResolver(fn) {
     resolver = fn;
 }
-export function resolveFileDisplayUrl(fileName, fallbackUrl) {
-    var _a;
+export function resolveFileDisplayUrl(fileUrl) {
     if (resolver) {
-        return resolver(fileName);
+        return resolver(fileUrl);
     }
-    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;
+    return `/images/file-type-icons/file.svg`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.31",
+  "version": "0.4.32",
   "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/blocks/fileBlock.tsx

@@ -0,0 +1,87 @@
+import { fileBlockConfig, fileParse } from "@blocknote/core";
+import { createReactBlockSpec } from "@blocknote/react";
+import type { ReactCustomBlockRenderProps } from "@blocknote/react";
+import { useCallback } from "react";
+import { resolveFileDisplayUrl } from "../fileDisplayUrl";
+
+function FileIcon(props: { block: { props: { caption?: string; url?: string } } }) {
+  const { caption, url } = props.block.props;
+  const iconUrl = caption || (url ? resolveFileDisplayUrl(url) : "");
+
+  if (iconUrl) {
+    return <img src={iconUrl} alt="" width={24} height={24} style={{ display: "block" }} />;
+  }
+
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z" />
+    </svg>
+  );
+}
+
+function FileBlockRender(
+  props: ReactCustomBlockRenderProps<typeof fileBlockConfig, any, any>,
+) {
+  const addFileButtonMouseDownHandler = useCallback(
+    (event: React.MouseEvent) => event.preventDefault(),
+    [],
+  );
+  const addFileButtonClickHandler = useCallback(() => {
+    props.editor.transact((tr: any) =>
+      tr.setMeta(props.editor.filePanel!.plugins[0], {
+        block: props.block,
+      }),
+    );
+  }, [props.block, props.editor]);
+
+  if (props.block.props.url === "") {
+    return (
+      <div
+        className="bn-file-block-content-wrapper"
+      >
+        <div
+          className="bn-add-file-button"
+          onMouseDown={addFileButtonMouseDownHandler}
+          onClick={addFileButtonClickHandler}
+        >
+          <div className="bn-add-file-button-icon">
+            <FileIcon block={props.block} />
+          </div>
+          <div className="bn-add-file-button-text">Add file</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bn-file-block-content-wrapper">
+      <div
+        className="bn-file-name-with-icon"
+        contentEditable={false}
+        draggable={false}
+      >
+        <div className="bn-file-icon">
+          <FileIcon block={props.block} />
+        </div>
+        <p className="bn-file-name">
+          {props.block.props.name || props.block.props.url}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export const fileBlock = createReactBlockSpec(fileBlockConfig, {
+  render: FileBlockRender,
+  parse: fileParse,
+  toExternalHTML: (props) => {
+    if (!props.block.props.url) {
+      return <p>Add file</p>;
+    }
+    return (
+      <a href={props.block.props.url}>
+        {props.block.props.name || props.block.props.url}
+      </a>
+    );
+  },
+});

package/src/editor/customMarkdownConverter.test.ts

@@ -1516,12 +1516,7 @@ describe("markdownToBlocks", () => {
 });
 
 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`;
-    });
-
+  it("serializes a file block using caption as display url", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1530,7 +1525,7 @@ describe("file block serialization", () => {
           ...baseProps,
           url: "https://example.com/file.pdf",
           name: "report.pdf",
-          caption: "",
+          caption: "/images/file-type-icons/pdf.svg",
         },
         content: undefined as any,
         children: [],
@@ -1538,11 +1533,32 @@ 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("derives icon from url when no caption is set", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/file.pdf",
+          name: "",
+          caption: "",
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![](/images/file-type-icons/file.svg)](https://example.com/file.pdf)");
   });
 
-  it("falls back to url when no resolver is set", () => {
+  it("uses custom resolver when set", () => {
+    setFileDisplayUrlResolver(() => {
+      return `/custom-icons/file.svg`;
+    });
+
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1550,7 +1566,7 @@ describe("file block serialization", () => {
         props: {
           ...baseProps,
           url: "https://example.com/file.pdf",
-          name: "file.pdf",
+          name: "",
           caption: "",
         },
         content: undefined as any,
@@ -1558,7 +1574,9 @@ describe("file block serialization", () => {
       },
     ];
     const md = blocksToMarkdown(blocks);
-    expect(md).toBe("[![file.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)");
+    expect(md).toBe("[![](/custom-icons/file.svg)](https://example.com/file.pdf)");
+
+    setFileDisplayUrlResolver(null);
   });
 
   it("outputs nothing when url is empty", () => {
@@ -1582,22 +1600,24 @@ describe("file block serialization", () => {
 });
 
 describe("file block parsing", () => {
-  it("parses file markdown into a file block", () => {
+  it("parses file markdown and stores display url in caption", () => {
     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");
+    expect((blocks[0].props as any).caption).toBe("/images/file-type-icons/pdf.svg");
   });
 
   it("parses file markdown with empty name", () => {
-    const markdown = "[![](https://example.com/url)](https://example.com/url)";
+    const markdown = "[![](/images/file-type-icons/json.svg)](https://example.com/file.json)";
     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");
+    expect((blocks[0].props as any).url).toBe("https://example.com/file.json");
+    expect((blocks[0].props as any).caption).toBe("/images/file-type-icons/json.svg");
   });
 
   it("does not confuse file blocks with image blocks", () => {
@@ -1607,12 +1627,7 @@ describe("file block parsing", () => {
     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`;
-    });
-
+  it("round-trips file blocks preserving icon url in caption", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1621,19 +1636,27 @@ describe("file block parsing", () => {
           ...baseProps,
           url: "https://example.com/doc.xlsx",
           name: "doc.xlsx",
-          caption: "",
+          caption: "/images/file-type-icons/xlsx.svg",
         },
         content: undefined as any,
         children: [],
       },
     ];
     const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![doc.xlsx](/images/file-type-icons/xlsx.svg)](https://example.com/doc.xlsx)");
+
     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");
+  });
 
-    setFileDisplayUrlResolver(null);
+  it("round-trips file blocks without name", () => {
+    const markdown = "[![](/images/file-type-icons/json.svg)](https://example.com/data.json)";
+    const parsed = markdownToBlocks(markdown);
+    const md = blocksToMarkdown(parsed as CustomEditorBlock[]);
+    expect(md).toBe(markdown);
   });
 });

package/src/editor/customMarkdownConverter.ts

@@ -348,8 +348,9 @@ 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 = resolveFileDisplayUrl(name, url);
+        const displayUrl = caption || resolveFileDisplayUrl(url);
         lines.push(`[![${name}](${displayUrl})](${url})`);
       }
       return flattenWithBlankLine(lines, true);
@@ -1473,6 +1474,7 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
         props: {
           name: fileMatch[1] || "",
           url: fileMatch[3],
+          caption: fileMatch[2] || "",
         },
         children: [],
       } as CustomPartialBlock);

package/src/editor/customSchema.tsx

@@ -2,11 +2,13 @@ import { defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
+import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 
 export const customSchema = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,
+    file: fileBlock,
     testStep: stepBlock,
     snippet: snippetBlock,
   },

package/src/editor/fileDisplayUrl.ts

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