testomatio-editor-blocks 0.4.55 → 0.4.57

package/package/editor/customMarkdownConverter.js

@@ -22,7 +22,7 @@ const headingPrefixes = {
     5: "#####",
     6: "######",
 };
-const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<\\])/g;
+const SPECIAL_CHAR_REGEX = /([*_`~()<\\])/g;
 const HTML_COMMENT_REGEX = /<!--[\s\S]*?-->/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
@@ -43,6 +43,9 @@ function escapeMarkdown(text) {
     result += text.slice(lastIndex).replace(SPECIAL_CHAR_REGEX, "\\$1");
     return result;
 }
+function escapeStepContent(text) {
+    return text.replace(/\./g, "\\.");
+}
 function stripHtmlWrappers(text) {
     return text
         .replace(HTML_SPAN_REGEX, "")
@@ -57,7 +60,7 @@ function stripExpectedPrefix(text) {
     let remainder = text.slice(label.length).trimStart();
     const cleanupLeading = (value) => {
         let result = value.trimStart();
-        result = result.replace(/^\\+(?=[*_`~:[\]])/, "");
+        result = result.replace(/^\\+(?=[*_`~:])/, "");
         result = result.replace(/^(?:[*_`~]+)(?=\s|$)/, "");
         return result.trimStart();
     };
@@ -88,7 +91,7 @@ function stripLeadingFormatting(text) {
     return result;
 }
 function unescapeMarkdown(text) {
-    return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>\\])/g, "$1").replace(/\\>/g, ">");
+    return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>.\\])/g, "$1").replace(/\\>/g, ">");
 }
 function applyTextStyles(text, styles) {
     var _a, _b, _c, _d;
@@ -348,14 +351,14 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             if (normalizedTitle.length > 0 || hasContent) {
                 const listStyle = (_m = block.props.listStyle) !== null && _m !== void 0 ? _m : "bullet";
                 const prefix = listStyle === "ordered" ? `${(stepIndex !== null && stepIndex !== void 0 ? stepIndex : 0) + 1}.` : "*";
-                lines.push(normalizedTitle.length > 0 ? `${prefix} ${normalizedTitle}` : `${prefix} `);
+                lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeStepContent(normalizedTitle)}` : `${prefix} `);
             }
             if (stepData.length > 0) {
                 const dataLines = stepData.split(/\r?\n/);
                 dataLines.forEach((dataLine) => {
                     const trimmedLine = dataLine.trim();
                     if (trimmedLine.length > 0) {
-                        lines.push(`  ${trimmedLine}`);
+                        lines.push(`  ${escapeStepContent(trimmedLine)}`);
                     }
                     else {
                         lines.push("  ");
@@ -372,10 +375,10 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                         return;
                     }
                     if (index === 0) {
-                        lines.push(`  ${label}: ${trimmedLine}`);
+                        lines.push(`  ${label}: ${escapeStepContent(trimmedLine)}`);
                     }
                     else {
-                        lines.push(`  ${trimmedLine}`);
+                        lines.push(`  ${escapeStepContent(trimmedLine)}`);
                     }
                 });
             }
@@ -841,6 +844,7 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
     let next = index + 1;
     let inExpectedResult = false;
     let blankLineSeenOutsideCodeBlock = false;
+    let blankLineSeenInExpectedResult = false;
     const stepIndent = current.length - current.trimStart().length;
     while (next < lines.length) {
         const line = lines[next];
@@ -848,14 +852,15 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
         const hasIndent = lineIndent > stepIndent;
         const rawTrimmed = line.trim();
         if (!rawTrimmed) {
-            if (stepDataLines.length > 0 || inExpectedResult) {
-                if (inExpectedResult) {
-                    expectedResult += "\n";
-                }
-                else {
+            if (inExpectedResult) {
+                expectedResult += "\n";
+                blankLineSeenInExpectedResult = true;
+            }
+            else {
+                if (stepDataLines.length > 0) {
                     stepDataLines.push("");
-                    blankLineSeenOutsideCodeBlock = true;
                 }
+                blankLineSeenOutsideCodeBlock = true;
             }
             next += 1;
             continue;
@@ -947,7 +952,13 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
             continue;
         }
         if (inExpectedResult) {
-            // After finding the first expected result, indented lines are part of it
+            // After a blank line inside the expected result, a non-indented line
+            // belongs to the outer document (e.g. a trailing file block after the
+            // step list), so stop here and let the root parser handle it.
+            if (blankLineSeenInExpectedResult && !hasIndent) {
+                break;
+            }
+            // Otherwise, indented lines are part of the expected result
             if (hasIndent) {
                 const expectedContent = unescapeMarkdown(rawTrimmed);
                 if (expectedResult.length > 0) {

package/package/styles.css

@@ -951,6 +951,11 @@ html.dark .bn-step-image-preview__content {
   overflow-x: clip;
 }
 
+.bn-container .bn-suggestion-menu {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
 [data-tooltip] {
   position: relative;
 }

package/package.json

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

@@ -11,7 +11,7 @@ import {
   filterSuggestionItems,
   insertOrUpdateBlock,
 } from "@blocknote/core";
-import { autoPlacement, offset, shift, size } from "@floating-ui/react";
+import { flip, offset, shift, size } from "@floating-ui/react";
 import {
   blocksToMarkdown,
   markdownToBlocks,
@@ -362,17 +362,38 @@ function CustomSlashMenu() {
       floatingOptions={{
         middleware: [
           offset(10),
-          autoPlacement({
-            allowedPlacements: ["bottom-start", "top-start"],
-          }),
-          shift(),
           size({
-            apply({ availableHeight, elements }) {
+            apply({ elements }) {
+              Object.assign(elements.floating.style, { maxHeight: "", overflowY: "" });
+            },
+          }),
+          flip({
+            padding: 10,
+            fallbackPlacements: ["top-start"],
+          }),
+          shift({ padding: 10 }),
+          {
+            name: "fitToViewport",
+            fn({ y, rects, elements }) {
+              const padding = 10;
+              if (y < padding) {
+                const bottomEdge = rects.reference.y - 10;
+                const maxHeight = Math.max(bottomEdge - padding, 100);
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${maxHeight}px`,
+                  overflowY: "auto",
+                });
+                return { y: padding };
+              }
+              const viewportHeight = window.innerHeight;
+              const available = viewportHeight - y - padding;
               Object.assign(elements.floating.style, {
-                maxHeight: `${Math.max(availableHeight - 10, 0)}px`,
+                maxHeight: `${Math.max(available, 100)}px`,
+                overflowY: "auto",
               });
+              return {};
             },
-          }),
+          },
         ],
       }}
     />

package/src/editor/customMarkdownConverter.test.ts

@@ -196,10 +196,10 @@ describe("blocksToMarkdown", () => {
 
     expect(blocksToMarkdown(blocks)).toBe(
       [
-        "* Open the Login page.",
-        "  *Expected result*: The Login page loads successfully.",
-        "* Enter a valid username.",
-        "  *Expected result*: The username is accepted.",
+        "* Open the Login page\\.",
+        "  *Expected result*: The Login page loads successfully\\.",
+        "* Enter a valid username\\.",
+        "  *Expected result*: The username is accepted\\.",
       ].join("\n"),
     );
   });
@@ -417,7 +417,7 @@ describe("blocksToMarkdown", () => {
 
     expect(blocksToMarkdown(blocks)).toBe(
       [
-        "* Update an order status.",
+        "* Update an order status\\.",
         "  ```",
         "  SQL CREATE bnbmnbm mnbmb mm",
         "  mn,nm nm, m,nm,n,nn,m,",
@@ -428,8 +428,8 @@ describe("blocksToMarkdown", () => {
         "  ",
         "  asdsadas",
         "  ```",
-        "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected result*: The user receives a real-time notification for the order update.",
+        "  ![](/attachments/HMhkVtlDrO\\.png)",
+        "  *Expected result*: The user receives a real-time notification for the order update\\.",
       ].join("\n"),
     );
   });
@@ -1061,7 +1061,7 @@ describe("markdownToBlocks", () => {
 
     expect(markdownRoundTrip).toBe(
       [
-        "* Step 2: Update an order status.",
+        "* Step 2: Update an order status\\.",
         "  ```",
         "  SQL CREATE bnbmnbm mnbmb mm",
         "  mn,nm nm, m,nm,n,nn,m,",
@@ -1072,8 +1072,8 @@ describe("markdownToBlocks", () => {
         "  ",
         "  asdsadas",
         "  ```",
-        "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected result*: The user receives a real-time notification for the order update.",
+        "  ![](/attachments/HMhkVtlDrO\\.png)",
+        "  *Expected result*: The user receives a real-time notification for the order update\\.",
       ].join("\n"),
     );
   });
@@ -1098,6 +1098,85 @@ describe("markdownToBlocks", () => {
     });
   });
 
+  it("does not include a file block after a blank line in step with expected result", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* Open the Login page.",
+      "  *Expected*: The Login page loads successfully.",
+      "",
+      "[![report.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    const fileBlocks = blocks.filter((b) => b.type === "file");
+
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({
+      stepTitle: "Open the Login page.",
+      stepData: "",
+    });
+    expect(((stepBlocks[0].props as any).expectedResult ?? "").trim()).toBe(
+      "The Login page loads successfully.",
+    );
+
+    expect(fileBlocks).toHaveLength(1);
+    expect((fileBlocks[0].props as any).url).toBe("https://example.com/file.pdf");
+    expect((fileBlocks[0].props as any).name).toBe("report.pdf");
+  });
+
+  it("does not include a file block after a blank line in step with step data", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* Open the Login page.",
+      "  Enter credentials",
+      "",
+      "[![report.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    const fileBlocks = blocks.filter((b) => b.type === "file");
+
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({
+      stepTitle: "Open the Login page.",
+      stepData: "Enter credentials",
+      expectedResult: "",
+    });
+
+    expect(fileBlocks).toHaveLength(1);
+    expect((fileBlocks[0].props as any).url).toBe("https://example.com/file.pdf");
+    expect((fileBlocks[0].props as any).name).toBe("report.pdf");
+  });
+
+  it("does not include a file block after a blank line in step with title only", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "* Open the Login page.",
+      "",
+      "[![report.pdf](/images/file-type-icons/pdf.svg)](https://example.com/file.pdf)",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((b) => b.type === "testStep");
+    const fileBlocks = blocks.filter((b) => b.type === "file");
+
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({
+      stepTitle: "Open the Login page.",
+      stepData: "",
+      expectedResult: "",
+    });
+
+    expect(fileBlocks).toHaveLength(1);
+    expect((fileBlocks[0].props as any).url).toBe("https://example.com/file.pdf");
+    expect((fileBlocks[0].props as any).name).toBe("report.pdf");
+  });
+
   it("parses bullet lists written with asterisk markers", () => {
     const markdown = [
       "### Preconditions",
@@ -1306,8 +1385,8 @@ describe("markdownToBlocks", () => {
 
     expect(markdownRoundTrip).toBe(
       [
-        "* Display the generated report.",
-        "  *Expected result*: ![](/attachments/report.png)",
+        "* Display the generated report\\.",
+        "  *Expected result*: ![](/attachments/report\\.png)",
       ].join("\n"),
     );
   });
@@ -1355,7 +1434,7 @@ describe("markdownToBlocks", () => {
       [
         "* Should open login screen",
         "  *Expected result*: Login should look like this",
-        "  ![](/login.png)",
+        "  ![](/login\\.png)",
       ].join("\n"),
     );
   });
@@ -2057,10 +2136,10 @@ describe("markdownToBlocks", () => {
 
     // Test round-trip conversion — numbered steps preserve their ordered style
     const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
-    expect(roundTripMarkdown).toContain("1. Navigate to the product listing page.");
-    expect(roundTripMarkdown).toContain("2. Select a product and click the \"Add to Cart\" button.");
-    expect(roundTripMarkdown).toContain("3. Open the shopping cart page.");
-    expect(roundTripMarkdown).toContain("4. Verify that the added item is displayed with the correct name, price, and quantity.");
+    expect(roundTripMarkdown).toContain("1. Navigate to the product listing page\\.");
+    expect(roundTripMarkdown).toContain("2. Select a product and click the \"Add to Cart\" button\\.");
+    expect(roundTripMarkdown).toContain("3. Open the shopping cart page\\.");
+    expect(roundTripMarkdown).toContain("4. Verify that the added item is displayed with the correct name, price, and quantity\\.");
     // Check that step data is preserved
     expect(roundTripMarkdown).toContain("  Expected open");
     expect(roundTripMarkdown).toContain("  Expected result close");

package/src/editor/customMarkdownConverter.ts

@@ -60,7 +60,7 @@ const headingPrefixes: Record<number, string> = {
   6: "######",
 };
 
-const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<\\])/g;
+const SPECIAL_CHAR_REGEX = /([*_`~()<\\])/g;
 const HTML_COMMENT_REGEX = /<!--[\s\S]*?-->/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
@@ -84,6 +84,10 @@ function escapeMarkdown(text: string): string {
   return result;
 }
 
+function escapeStepContent(text: string): string {
+  return text.replace(/\./g, "\\.");
+}
+
 function stripHtmlWrappers(text: string): string {
   return text
     .replace(HTML_SPAN_REGEX, "")
@@ -100,7 +104,7 @@ function stripExpectedPrefix(text: string): string {
 
   const cleanupLeading = (value: string) => {
     let result = value.trimStart();
-    result = result.replace(/^\\+(?=[*_`~:[\]])/, "");
+    result = result.replace(/^\\+(?=[*_`~:])/, "");
     result = result.replace(/^(?:[*_`~]+)(?=\s|$)/, "");
     return result.trimStart();
   };
@@ -136,7 +140,7 @@ function stripLeadingFormatting(text: string): string {
 }
 
 function unescapeMarkdown(text: string): string {
-  return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>\\])/g, "$1").replace(/\\>/g, ">");
+  return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>.\\])/g, "$1").replace(/\\>/g, ">");
 }
 
 function applyTextStyles(text: string, styles: EditorStyles | undefined): string {
@@ -428,7 +432,7 @@ function serializeBlock(
       if (normalizedTitle.length > 0 || hasContent) {
         const listStyle = (block.props as any).listStyle ?? "bullet";
         const prefix = listStyle === "ordered" ? `${(stepIndex ?? 0) + 1}.` : "*";
-        lines.push(normalizedTitle.length > 0 ? `${prefix} ${normalizedTitle}` : `${prefix} `);
+        lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeStepContent(normalizedTitle)}` : `${prefix} `);
       }
 
       if (stepData.length > 0) {
@@ -436,7 +440,7 @@ function serializeBlock(
         dataLines.forEach((dataLine: string) => {
           const trimmedLine = dataLine.trim();
           if (trimmedLine.length > 0) {
-            lines.push(`  ${trimmedLine}`);
+            lines.push(`  ${escapeStepContent(trimmedLine)}`);
           } else {
             lines.push("  ");
           }
@@ -454,9 +458,9 @@ function serializeBlock(
           }
 
           if (index === 0) {
-            lines.push(`  ${label}: ${trimmedLine}`);
+            lines.push(`  ${label}: ${escapeStepContent(trimmedLine)}`);
           } else {
-            lines.push(`  ${trimmedLine}`);
+            lines.push(`  ${escapeStepContent(trimmedLine)}`);
           }
         });
       }
@@ -1017,6 +1021,7 @@ function parseTestStep(
   let next = index + 1;
   let inExpectedResult = false;
   let blankLineSeenOutsideCodeBlock = false;
+  let blankLineSeenInExpectedResult = false;
   const stepIndent = current.length - current.trimStart().length;
 
   while (next < lines.length) {
@@ -1026,13 +1031,14 @@ function parseTestStep(
     const rawTrimmed = line.trim();
 
     if (!rawTrimmed) {
-      if (stepDataLines.length > 0 || inExpectedResult) {
-        if (inExpectedResult) {
-          expectedResult += "\n";
-        } else {
+      if (inExpectedResult) {
+        expectedResult += "\n";
+        blankLineSeenInExpectedResult = true;
+      } else {
+        if (stepDataLines.length > 0) {
           stepDataLines.push("");
-          blankLineSeenOutsideCodeBlock = true;
         }
+        blankLineSeenOutsideCodeBlock = true;
       }
       next += 1;
       continue;
@@ -1130,7 +1136,13 @@ function parseTestStep(
     }
 
     if (inExpectedResult) {
-      // After finding the first expected result, indented lines are part of it
+      // After a blank line inside the expected result, a non-indented line
+      // belongs to the outer document (e.g. a trailing file block after the
+      // step list), so stop here and let the root parser handle it.
+      if (blankLineSeenInExpectedResult && !hasIndent) {
+        break;
+      }
+      // Otherwise, indented lines are part of the expected result
       if (hasIndent) {
         const expectedContent = unescapeMarkdown(rawTrimmed);
         if (expectedResult.length > 0) {

package/src/editor/styles.css

@@ -951,6 +951,11 @@ html.dark .bn-step-image-preview__content {
   overflow-x: clip;
 }
 
+.bn-container .bn-suggestion-menu {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
 [data-tooltip] {
   position: relative;
 }