testomatio-editor-blocks 0.4.32 → 0.4.33

package/package/editor/blocks/markdown.js

@@ -1,4 +1,4 @@
-const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+?)(?:\s+=\d+x(?:\d+|\*))?\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
 const INLINE_SEGMENT_REGEX = /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;
 export function escapeHtml(text) {

package/package/editor/customMarkdownConverter.js

@@ -262,8 +262,10 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
         case "image": {
             const url = block.props.url || "";
             const caption = block.props.caption || "";
+            const width = block.props.previewWidth;
             if (url) {
-                lines.push(`![${caption}](${url})`);
+                const size = width ? ` =${width}x*` : "";
+                lines.push(`![${caption}](${url}${size})`);
             }
             return flattenWithBlankLine(lines, true);
         }
@@ -1239,14 +1241,16 @@ export function markdownToBlocks(markdown) {
             index += 1;
             continue;
         }
-        const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+        const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+?)(?:\s+=(\d+)x(\d+|\*))?\)$/);
         if (imageMatch) {
+            const width = imageMatch[3] ? parseInt(imageMatch[3], 10) : undefined;
             blocks.push({
                 type: "image",
                 props: {
                     url: imageMatch[2],
                     caption: imageMatch[1] || "",
                     name: "",
+                    ...(width ? { previewWidth: width } : {}),
                 },
                 children: [],
             });

package/package.json

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

@@ -1,4 +1,4 @@
-const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+?)(?:\s+=\d+x(?:\d+|\*))?\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
 const INLINE_SEGMENT_REGEX =
   /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;

package/src/editor/customMarkdownConverter.test.ts

@@ -1430,6 +1430,70 @@ describe("markdownToBlocks", () => {
     expect(roundTripMarkdown).toContain("![](/attachments/test.png)");
   });
 
+  it("parses image with size suffix =WIDTHxHEIGHT", () => {
+    const markdown = "![caption](http://localhost:3000/attachments/img.png =200x100)";
+    const blocks = markdownToBlocks(markdown);
+
+    const imageBlocks = blocks.filter(block => block.type === "image");
+    expect(imageBlocks.length).toBe(1);
+    expect((imageBlocks[0].props as any).url).toBe("http://localhost:3000/attachments/img.png");
+    expect((imageBlocks[0].props as any).caption).toBe("caption");
+    expect((imageBlocks[0].props as any).previewWidth).toBe(200);
+  });
+
+  it("parses image with size suffix =WIDTHx*", () => {
+    const markdown = "![](http://localhost:3000/attachments/img.png =150x*)";
+    const blocks = markdownToBlocks(markdown);
+
+    const imageBlocks = blocks.filter(block => block.type === "image");
+    expect(imageBlocks.length).toBe(1);
+    expect((imageBlocks[0].props as any).url).toBe("http://localhost:3000/attachments/img.png");
+    expect((imageBlocks[0].props as any).previewWidth).toBe(150);
+  });
+
+  it("serializes image block with previewWidth to =WIDTHx*", () => {
+    const blocks: any[] = [
+      {
+        type: "image",
+        props: {
+          url: "/attachments/test.png",
+          caption: "test",
+          name: "",
+          previewWidth: 300,
+        },
+        content: [],
+        children: [],
+      },
+    ];
+    const markdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
+    expect(markdown).toContain("![test](/attachments/test.png =300x*)");
+  });
+
+  it("serializes image block without previewWidth normally", () => {
+    const blocks: any[] = [
+      {
+        type: "image",
+        props: {
+          url: "/attachments/test.png",
+          caption: "",
+          name: "",
+        },
+        content: [],
+        children: [],
+      },
+    ];
+    const markdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
+    expect(markdown).toContain("![](/attachments/test.png)");
+    expect(markdown).not.toContain("=");
+  });
+
+  it("round-trips image with size preserving width", () => {
+    const markdown = "![photo](/attachments/photo.png =400x250)";
+    const blocks = markdownToBlocks(markdown);
+    const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
+    expect(roundTripMarkdown).toContain("![photo](/attachments/photo.png =400x*)");
+  });
+
   it("removes malformed image blocks through post-processing", () => {
     // Simulate the malformed blocks you're seeing
     const malformedBlocks: any[] = [

package/src/editor/customMarkdownConverter.ts

@@ -340,8 +340,10 @@ function serializeBlock(
     case "image": {
       const url = (block.props as any).url || "";
       const caption = (block.props as any).caption || "";
+      const width = (block.props as any).previewWidth;
       if (url) {
-        lines.push(`![${caption}](${url})`);
+        const size = width ? ` =${width}x*` : "";
+        lines.push(`![${caption}](${url}${size})`);
       }
       return flattenWithBlankLine(lines, true);
     }
@@ -1482,14 +1484,16 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
-    const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+    const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+?)(?:\s+=(\d+)x(\d+|\*))?\)$/);
     if (imageMatch) {
+      const width = imageMatch[3] ? parseInt(imageMatch[3], 10) : undefined;
       blocks.push({
         type: "image",
         props: {
           url: imageMatch[2],
           caption: imageMatch[1] || "",
           name: "",
+          ...(width ? { previewWidth: width } : {}),
         },
         children: [],
       } as CustomPartialBlock);