testomatio-editor-blocks 0.4.30 → 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

@@ -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",
@@ -271,7 +272,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             const name = block.props.name || "";
             const caption = block.props.caption || "";
             if (url) {
-                const displayUrl = caption || url;
+                const displayUrl = caption || resolveFileDisplayUrl(url);
                 lines.push(`[![${name}](${displayUrl})](${url})`);
             }
             return flattenWithBlankLine(lines, true);
@@ -1230,8 +1231,8 @@ export function markdownToBlocks(markdown) {
                 type: "file",
                 props: {
                     name: fileMatch[1] || "",
-                    caption: fileMatch[2] || "",
                     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

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

package/package/editor/fileDisplayUrl.js

@@ -0,0 +1,10 @@
+let resolver = null;
+export function setFileDisplayUrlResolver(fn) {
+    resolver = fn;
+}
+export function resolveFileDisplayUrl(fileUrl) {
+    if (resolver) {
+        return resolver(fileUrl);
+    }
+    return `/images/file-type-icons/file.svg`;
+}

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.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

@@ -6,6 +6,7 @@ import {
   type CustomEditorBlock,
   type CustomPartialBlock,
 } from "./customMarkdownConverter";
+import { setFileDisplayUrlResolver } from "./fileDisplayUrl";
 
 const baseProps = {
   textAlignment: "left" as const,
@@ -1515,7 +1516,7 @@ describe("markdownToBlocks", () => {
 });
 
 describe("file block serialization", () => {
-  it("serializes a file block with name, caption (display_url), and url", () => {
+  it("serializes a file block using caption as display url", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1534,7 +1535,7 @@ describe("file block serialization", () => {
     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", () => {
+  it("derives icon from url when no caption is set", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1542,7 +1543,30 @@ describe("file block serialization", () => {
         props: {
           ...baseProps,
           url: "https://example.com/file.pdf",
-          name: "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("uses custom resolver when set", () => {
+    setFileDisplayUrlResolver(() => {
+      return `/custom-icons/file.svg`;
+    });
+
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "file",
+        props: {
+          ...baseProps,
+          url: "https://example.com/file.pdf",
+          name: "",
           caption: "",
         },
         content: undefined as any,
@@ -1550,7 +1574,9 @@ 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("[![](/custom-icons/file.svg)](https://example.com/file.pdf)");
+
+    setFileDisplayUrlResolver(null);
   });
 
   it("outputs nothing when url is empty", () => {
@@ -1574,23 +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).caption).toBe("/images/file-type-icons/pdf.svg");
     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", () => {
@@ -1600,7 +1627,7 @@ describe("file block parsing", () => {
     expect(blocks[0].type).toBe("image");
   });
 
-  it("round-trips file blocks through serialize and parse", () => {
+  it("round-trips file blocks preserving icon url in caption", () => {
     const blocks: CustomEditorBlock[] = [
       {
         id: "1",
@@ -1616,6 +1643,8 @@ describe("file block parsing", () => {
       },
     ];
     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");
@@ -1623,4 +1652,11 @@ describe("file block parsing", () => {
     expect((parsed[0].props as any).name).toBe("doc.xlsx");
     expect((parsed[0].props as any).caption).toBe("/images/file-type-icons/xlsx.svg");
   });
+
+  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

@@ -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";
 
@@ -349,7 +350,7 @@ function serializeBlock(
       const name = (block.props as any).name || "";
       const caption = (block.props as any).caption || "";
       if (url) {
-        const displayUrl = caption || url;
+        const displayUrl = caption || resolveFileDisplayUrl(url);
         lines.push(`[![${name}](${displayUrl})](${url})`);
       }
       return flattenWithBlankLine(lines, true);
@@ -1472,8 +1473,8 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
         type: "file",
         props: {
           name: fileMatch[1] || "",
-          caption: fileMatch[2] || "",
           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

@@ -0,0 +1,14 @@
+export type FileDisplayUrlResolver = (fileUrl: string) => string;
+
+let resolver: FileDisplayUrlResolver | null = null;
+
+export function setFileDisplayUrlResolver(fn: FileDisplayUrlResolver | null) {
+  resolver = fn;
+}
+
+export function resolveFileDisplayUrl(fileUrl: string): string {
+  if (resolver) {
+    return resolver(fileUrl);
+  }
+  return `/images/file-type-icons/file.svg`;
+}

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