testomatio-editor-blocks 0.4.1 → 0.4.6

package/package/editor/blocks/step.d.ts

@@ -12,6 +12,9 @@ export declare const stepBlock: {
             readonly expectedResult: {
                 readonly default: "";
             };
+            readonly listStyle: {
+                readonly default: "bullet";
+            };
         };
     };
     implementation: import("@blocknote/core").TiptapBlockImplementation<{
@@ -27,6 +30,9 @@ export declare const stepBlock: {
             readonly expectedResult: {
                 readonly default: "";
             };
+            readonly listStyle: {
+                readonly default: "bullet";
+            };
         };
     }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
 };

package/package/editor/blocks/step.js

@@ -56,6 +56,9 @@ export const stepBlock = createReactBlockSpec({
         expectedResult: {
             default: "",
         },
+        listStyle: {
+            default: "bullet",
+        },
     },
 }, {
     render: ({ block, editor }) => {

package/package/editor/customMarkdownConverter.js

@@ -190,8 +190,8 @@ function flattenWithBlankLine(lines, appendBlank = false) {
     }
     return lines;
 }
-function serializeBlock(block, ctx, orderedIndex) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+function serializeBlock(block, ctx, orderedIndex, stepIndex) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const lines = [];
     const indent = ctx.listDepth > 0 ? "  ".repeat(ctx.listDepth) : "";
     switch (block.type) {
@@ -292,7 +292,9 @@ function serializeBlock(block, ctx, orderedIndex) {
                     .filter((segment) => segment.length > 0)
                     .join(" ");
                 if (normalizedTitle.length > 0) {
-                    lines.push(`* ${normalizedTitle}`);
+                    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(`${prefix} ${normalizedTitle}`);
                 }
             }
             if (stepData.length > 0) {
@@ -348,7 +350,7 @@ function serializeBlock(block, ctx, orderedIndex) {
                 return flattenWithBlankLine(lines, true);
             }
             const headerRowCount = rows.length
-                ? Math.min(rows.length, Math.max((_m = tableContent.headerRows) !== null && _m !== void 0 ? _m : 1, 1))
+                ? Math.min(rows.length, Math.max((_o = tableContent.headerRows) !== null && _o !== void 0 ? _o : 1, 1))
                 : 0;
             const columnAlignments = new Array(columnCount).fill("left");
             const getCellAlignment = (cell) => {
@@ -425,6 +427,7 @@ function serializeBlock(block, ctx, orderedIndex) {
 function serializeBlocks(blocks, ctx) {
     const lines = [];
     let orderedIndex = null;
+    let stepIndex = 0;
     for (const block of blocks) {
         if (block.type === "numberedListItem") {
             if (typeof block.props.start === "number") {
@@ -437,6 +440,13 @@ function serializeBlocks(blocks, ctx) {
             orderedIndex += 1;
             continue;
         }
+        if (block.type === "testStep") {
+            lines.push(...serializeBlock(block, ctx, undefined, stepIndex));
+            stepIndex += 1;
+            orderedIndex = null;
+            continue;
+        }
+        stepIndex = 0;
         orderedIndex = null;
         lines.push(...serializeBlock(block, ctx));
     }
@@ -616,7 +626,7 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         // Only try to parse as testStep for top-level items (indentLevel === 0)
         // when we're under a Steps heading AND the list type is bullet
         // Numbered lists under Steps heading are only parsed as test steps if they look like test steps
-        if (indentLevel === 0 && allowEmptySteps) {
+        if (indentLevel === 0 && (allowEmptySteps || listType === "bullet")) {
             // For bullet lists, always try to parse as test steps
             // For numbered lists, only try if they have step-like characteristics
             const looksLikeTestStep = listType === "bullet" ||
@@ -855,7 +865,8 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
         .map((line) => line.trimEnd())
         .join("\n")
         .trim();
-    if (!isLikelyStep &&
+    if (!isBullet &&
+        !isLikelyStep &&
         !expectedResult &&
         stepDataLines.length === 0 &&
         !(allowEmpty && titleWithPlaceholders.length > 0)) {
@@ -875,6 +886,7 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
             stepTitle: titleWithPlaceholders,
             stepData: stepDataWithImages,
             expectedResult,
+            listStyle: isNumbered ? "ordered" : "bullet",
         };
     const parsedBlock = {
         type: blockType,

package/package/editor/customSchema.d.ts

@@ -15,6 +15,9 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
                 readonly expectedResult: {
                     readonly default: "";
                 };
+                readonly listStyle: {
+                    readonly default: "bullet";
+                };
             };
         };
         implementation: import("@blocknote/core").TiptapBlockImplementation<{
@@ -30,6 +33,9 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
                 readonly expectedResult: {
                     readonly default: "";
                 };
+                readonly listStyle: {
+                    readonly default: "bullet";
+                };
             };
         }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
     };

package/package/styles.css

@@ -249,8 +249,8 @@
   padding-bottom: 8px;
 }
 
-.bn-teststep__header + .bn-step-field {
-  margin-top: calc(8px - var(--step-section-gap));
+.bn-teststep__content > .bn-teststep__header + .bn-step-field {
+  margin-top: calc(4px - var(--step-section-gap));
 }
 
 .bn-teststep__header {
@@ -579,7 +579,7 @@
 .bn-step-field {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   position: relative;
 }
 
@@ -801,6 +801,10 @@
   font-weight: 400 !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-placeholder {
+  display: none !important;
+}
+
 .bn-step-editor .overtype-wrapper .overtype-preview {
   color: var(--text-primary) !important;
 }

package/package.json

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

@@ -61,6 +61,9 @@ export const stepBlock = createReactBlockSpec(
       expectedResult: {
         default: "",
       },
+      listStyle: {
+        default: "bullet",
+      },
     },
   },
   {

package/src/editor/customMarkdownConverter.test.ts

@@ -75,6 +75,7 @@ describe("blocksToMarkdown", () => {
           stepTitle: "Open the Login page.",
           stepData: "",
           expectedResult: "The Login page loads successfully.",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -86,6 +87,7 @@ describe("blocksToMarkdown", () => {
           stepTitle: "Enter a valid username.",
           stepData: "",
           expectedResult: "The username is accepted.",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -182,6 +184,7 @@ describe("blocksToMarkdown", () => {
            stepTitle: "**Click** the _Login_ button",
            stepData: "",
            expectedResult: "**Success** is shown\nSecond line with <u>underline</u>",
+           listStyle: "bullet",
          },
          content: undefined,
          children: [],
@@ -206,6 +209,7 @@ describe("blocksToMarkdown", () => {
            stepTitle: "Navigate to login",
            stepData: "Open browser\nGo to login page",
            expectedResult: "Login form visible",
+           listStyle: "bullet",
          },
          content: undefined,
          children: [],
@@ -243,6 +247,7 @@ describe("blocksToMarkdown", () => {
             "![](/attachments/HMhkVtlDrO.png)",
           ].join("\n"),
           expectedResult: "The user receives a real-time notification for the order update.",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -352,6 +357,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Open the Login page.",
           stepData: "",
           expectedResult: "The Login page loads successfully.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -458,12 +464,43 @@ describe("markdownToBlocks", () => {
     const stepBlocks = blocks.filter((block) => block.type === "testStep");
 
     expect(stepBlocks).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "The user is logged into the application.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "The user has the necessary permissions to receive notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "The application is configured to send real-time notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
       {
         type: "testStep",
         props: {
           stepTitle: "Step 1: Send a chat message to the user.",
           stepData: "",
           expectedResult: "The user receives a real-time notification for the chat message.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -473,6 +510,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 2: Update an order status.",
           stepData: "",
           expectedResult: "The user receives a real-time notification for the order update.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -482,6 +520,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 3: Send a file to the user.",
           stepData: "",
           expectedResult: "The user receives a real-time notification for the file received.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -491,6 +530,27 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 4: Verify that the notifications are displayed correctly in the application's notification panel.",
           stepData: "",
           expectedResult: "All notifications (chat message, order update, file received) are listed in the notification panel with the correct information (e.g., timestamp, message content).\n",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "The user has received and viewed the notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "The application continues to function as expected after receiving and processing the notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -535,6 +595,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 2: Update an order status.",
           stepData: expectedData,
           expectedResult: "The user receives a real-time notification for the order update.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -548,6 +609,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 2: Update an order status.",
           stepData: expectedData,
           expectedResult: "The user receives a real-time notification for the order update.",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -590,39 +652,33 @@ describe("markdownToBlocks", () => {
         children: [],
       },
       {
-        type: "bulletListItem",
-        props: baseProps,
-        content: [
-          {
-            type: "text",
-            text: "The user is logged into the application.",
-            styles: {},
-          },
-        ],
+        type: "testStep",
+        props: {
+          stepTitle: "The user is logged into the application.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
         children: [],
       },
       {
-        type: "bulletListItem",
-        props: baseProps,
-        content: [
-          {
-            type: "text",
-            text: "The user has the necessary permissions to receive notifications.",
-            styles: {},
-          },
-        ],
+        type: "testStep",
+        props: {
+          stepTitle: "The user has the necessary permissions to receive notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
         children: [],
       },
       {
-        type: "bulletListItem",
-        props: baseProps,
-        content: [
-          {
-            type: "text",
-            text: "The application is configured to send real-time notifications.",
-            styles: {},
-          },
-        ],
+        type: "testStep",
+        props: {
+          stepTitle: "The application is configured to send real-time notifications.",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
         children: [],
       },
     ]);
@@ -664,6 +720,7 @@ describe("markdownToBlocks", () => {
            stepTitle: "Open the form.",
            stepData: "",
            expectedResult: "** The form opens.\nFields are empty.",
+           listStyle: "bullet",
          },
          children: [],
        },
@@ -685,6 +742,7 @@ describe("markdownToBlocks", () => {
            stepTitle: "Navigate to login",
            stepData: "Open browser\nGo to login page",
            expectedResult: "Login form visible",
+           listStyle: "bullet",
          },
          children: [],
        },
@@ -706,6 +764,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Prepare test fixtures",
           stepData: "Collect user accounts from staging.\nReset passwords for all test accounts.",
           expectedResult: "Test accounts are ready for execution.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -725,6 +784,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Display the generated report.",
           stepData: "",
           expectedResult: "![](/attachments/report.png)",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -738,6 +798,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Display the generated report.",
           stepData: "",
           expectedResult: "![](/attachments/report.png)",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -761,6 +822,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Should open login screen",
           stepData: "",
           expectedResult: "Login should look like this\n![](/login.png)",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -774,6 +836,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Should open login screen",
           stepData: "",
           expectedResult: "Login should look like this\n![](/login.png)",
+          listStyle: "bullet",
         },
         content: undefined,
         children: [],
@@ -810,6 +873,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Pass onboarding as mobile user",
           stepData: "",
           expectedResult: "",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -820,6 +884,7 @@ describe("markdownToBlocks", () => {
             "Navigate to More tab -≻ My Profile -≻ Log into the app with user from preconditions",
           stepData: "",
           expectedResult: "* Upsell SS screen is displayed",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -829,6 +894,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Close SS",
           stepData: "",
           expectedResult: "* My Course and More tab are displayed",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -860,6 +926,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Existing email + invalid password",
         stepData: "",
         expectedResult: "'Oops, wrong email or password' is displayed",
+        listStyle: "bullet",
       },
       children: [],
     });
@@ -870,6 +937,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Not existing email + valid password",
         stepData: "",
         expectedResult: "'Oops, wrong email or password' is displayed",
+        listStyle: "bullet",
       },
       children: [],
     });
@@ -910,7 +978,55 @@ describe("markdownToBlocks", () => {
 
     const markdown = blocksToMarkdown(blocks);
     const parsed = markdownToBlocks(markdown);
-    expect(parsed).toEqual(blocks.map(toPartial));
+    expect(parsed).toEqual([
+      {
+        type: "paragraph",
+        props: baseProps,
+        content: [{ type: "text", text: "Paragraph", styles: {} }],
+        children: [],
+      },
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "Bullet",
+          stepData: "",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips bullet steps preserving bullet style", () => {
+    const markdown = [
+      "* Open the page",
+      "  *Expected*: Page loads",
+      "* Click button",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const output = blocksToMarkdown(blocks as CustomEditorBlock[]);
+
+    expect(output).toContain("* Open the page");
+    expect(output).toContain("* Click button");
+    expect(output).not.toMatch(/^\d+\./m);
+  });
+
+  it("round-trips ordered steps preserving ordered style", () => {
+    const markdown = [
+      "### Steps",
+      "",
+      "1. Open the page",
+      "  *Expected*: Page loads",
+      "2. Click button",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const output = blocksToMarkdown(blocks as CustomEditorBlock[]);
+
+    expect(output).toContain("1. Open the page");
+    expect(output).toContain("2. Click button");
   });
 
   it("parses markdown tables", () => {
@@ -977,6 +1093,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Step 1: Send a chat message to the user.",
           stepData: "",
           expectedResult: "The user receives a real-time notification for the chat message.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -1009,6 +1126,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Swipe Back",
         stepData: "",
         expectedResult: "",
+        listStyle: "bullet",
       },
       children: [],
     });
@@ -1019,6 +1137,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Check UI of Sleep score info screen",
         stepData: "- Back button\nHeader: Sleep Score Info\nText: Ever wonder if 6, 8, or 9 hours of sleep are enough? Sleep score takes the guesswork out of your ZZZ's and shows you how well you slept last night based on duration, efficiency, and consistency.",
         expectedResult: "* - 1st block:\n* - 2nd block:\n* - 3d block:",
+        listStyle: "bullet",
       },
       children: [],
     });
@@ -1029,6 +1148,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Tap 'Back' button",
         stepData: "",
         expectedResult: "",
+        listStyle: "bullet",
       },
       children: [],
     });
@@ -1124,6 +1244,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Navigate to the product listing page.",
         stepData: "Expected open",
         expectedResult: "",
+        listStyle: "ordered",
       },
       children: [],
     });
@@ -1135,6 +1256,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Select a product and click the \"Add to Cart\" button.",
         stepData: "Expected result close",
         expectedResult: "",
+        listStyle: "ordered",
       },
       children: [],
     });
@@ -1146,6 +1268,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Open the shopping cart page.",
         stepData: "**Expected** edit",
         expectedResult: "",
+        listStyle: "ordered",
       },
       children: [],
     });
@@ -1157,17 +1280,17 @@ describe("markdownToBlocks", () => {
         stepTitle: "Verify that the added item is displayed with the correct name, price, and quantity.",
         stepData: "_Expected_ close",
         expectedResult: "",
+        listStyle: "ordered",
       },
       children: [],
     });
 
-    // Test round-trip conversion
-    // Note: Test steps are always serialized as bullet lists, not numbered lists
+    // Test round-trip conversion — numbered steps preserve their ordered style
     const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
-    expect(roundTripMarkdown).toContain("* Navigate to the product listing page.");
-    expect(roundTripMarkdown).toContain("* Select a product and click the \"Add to Cart\" button.");
-    expect(roundTripMarkdown).toContain("* Open the shopping cart page.");
-    expect(roundTripMarkdown).toContain("* 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

@@ -266,6 +266,7 @@ function serializeBlock(
   block: CustomEditorBlock,
   ctx: MarkdownContext,
   orderedIndex?: number,
+  stepIndex?: number,
 ): string[] {
   const lines: string[] = [];
   const indent = ctx.listDepth > 0 ? "  ".repeat(ctx.listDepth) : "";
@@ -375,7 +376,9 @@ function serializeBlock(
           .join(" ");
 
         if (normalizedTitle.length > 0) {
-          lines.push(`* ${normalizedTitle}`);
+          const listStyle = (block.props as any).listStyle ?? "bullet";
+          const prefix = listStyle === "ordered" ? `${(stepIndex ?? 0) + 1}.` : "*";
+          lines.push(`${prefix} ${normalizedTitle}`);
         }
       }
 
@@ -533,6 +536,7 @@ function serializeBlock(
 function serializeBlocks(blocks: CustomEditorBlock[], ctx: MarkdownContext): string[] {
   const lines: string[] = [];
   let orderedIndex: number | null = null;
+  let stepIndex = 0;
 
   for (const block of blocks) {
     if (block.type === "numberedListItem") {
@@ -547,6 +551,14 @@ function serializeBlocks(blocks: CustomEditorBlock[], ctx: MarkdownContext): str
       continue;
     }
 
+    if (block.type === "testStep") {
+      lines.push(...serializeBlock(block, ctx, undefined, stepIndex));
+      stepIndex += 1;
+      orderedIndex = null;
+      continue;
+    }
+
+    stepIndex = 0;
     orderedIndex = null;
     lines.push(...serializeBlock(block, ctx));
   }
@@ -767,7 +779,7 @@ function parseList(
     // Only try to parse as testStep for top-level items (indentLevel === 0)
     // when we're under a Steps heading AND the list type is bullet
     // Numbered lists under Steps heading are only parsed as test steps if they look like test steps
-    if (indentLevel === 0 && allowEmptySteps) {
+    if (indentLevel === 0 && (allowEmptySteps || listType === "bullet")) {
       // For bullet lists, always try to parse as test steps
       // For numbered lists, only try if they have step-like characteristics
       const looksLikeTestStep = listType === "bullet" ||
@@ -1036,6 +1048,7 @@ function parseTestStep(
     .trim();
 
   if (
+    !isBullet &&
     !isLikelyStep &&
     !expectedResult &&
     stepDataLines.length === 0 &&
@@ -1060,6 +1073,7 @@ function parseTestStep(
           stepTitle: titleWithPlaceholders,
           stepData: stepDataWithImages,
           expectedResult,
+          listStyle: isNumbered ? "ordered" : "bullet",
         };
 
   const parsedBlock: CustomPartialBlock = {

package/src/editor/markdownToBlocks.test.ts

@@ -21,6 +21,7 @@ describe("markdownToBlocks", () => {
           stepTitle: "Open the Login page.",
           stepData: "",
           expectedResult: "The Login page loads successfully.",
+          listStyle: "bullet",
         },
         children: [],
       },
@@ -99,6 +100,7 @@ describe("markdownToBlocks", () => {
         stepTitle: "Step 1: Send a chat message to the user.",
         stepData: "",
         expectedResult: "The user receives a real-time notification for the chat message.",
+        listStyle: "bullet",
       },
       children: [],
     });

package/src/editor/styles.css

@@ -249,8 +249,8 @@
   padding-bottom: 8px;
 }
 
-.bn-teststep__header + .bn-step-field {
-  margin-top: calc(8px - var(--step-section-gap));
+.bn-teststep__content > .bn-teststep__header + .bn-step-field {
+  margin-top: calc(4px - var(--step-section-gap));
 }
 
 .bn-teststep__header {
@@ -579,7 +579,7 @@
 .bn-step-field {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   position: relative;
 }
 
@@ -801,6 +801,10 @@
   font-weight: 400 !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-placeholder {
+  display: none !important;
+}
+
 .bn-step-editor .overtype-wrapper .overtype-preview {
   color: var(--text-primary) !important;
 }