testomatio-editor-blocks 0.4.18 → 0.4.20

package/package/editor/blocks/step.js

@@ -91,6 +91,31 @@ export const stepBlock = createReactBlockSpec({
             }
             return count;
         }, [block.id, documentVersion, editor.document]);
+        // Check if there is a preceding "Steps" heading
+        const hasStepsHeading = useMemo(() => {
+            const allBlocks = editor.document;
+            const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
+            if (blockIndex < 0)
+                return false;
+            for (let i = blockIndex - 1; i >= 0; i--) {
+                const b = allBlocks[i];
+                if (b.type === "testStep" || b.type === "snippet") {
+                    continue;
+                }
+                if (b.type === "heading") {
+                    const text = (Array.isArray(b.content) ? b.content : [])
+                        .filter((n) => n.type === "text")
+                        .map((n) => { var _a; return (_a = n.text) !== null && _a !== void 0 ? _a : ""; })
+                        .join("")
+                        .trim()
+                        .toLowerCase()
+                        .replace(/[:\-–—]$/, "");
+                    return text === "steps";
+                }
+                return false;
+            }
+            return false;
+        }, [block.id, documentVersion, editor.document]);
         useEditorChange(() => {
             setDocumentVersion((version) => version + 1);
         }, editor);
@@ -229,6 +254,10 @@ export const stepBlock = createReactBlockSpec({
         }, [expectedHasContent, isExpectedVisible]);
         const canToggleData = !dataHasContent;
         const canToggleExpected = !expectedHasContent;
+        // Render as plain text when not under a "Steps" heading
+        if (!hasStepsHeading) {
+            return (_jsxs("div", { className: "bn-teststep-plain", "data-block-id": block.id, children: [_jsx("span", { children: stepTitle || "(empty step)" }), stepData ? _jsx("span", { className: "bn-teststep-plain__data", children: stepData }) : null, expectedResult ? _jsx("span", { className: "bn-teststep-plain__expected", children: expectedResult }) : null] }));
+        }
         if (viewMode === "horizontal") {
             return (_jsx(StepHorizontalView, { blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: _jsx("button", { type: "button", className: "bn-teststep__view-toggle bn-teststep__view-toggle--horizontal", "data-tooltip": "Switch step view", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }) }));
         }

package/package/editor/customMarkdownConverter.js

@@ -237,7 +237,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
         }
         case "bulletListItem": {
             const text = inlineToMarkdown(block.content);
-            lines.push(`${indent}- ${text}`.trimEnd());
+            lines.push(`${indent}* ${text}`.trimEnd());
             lines.push(...serializeChildren(block, ctx));
             return lines;
         }
@@ -624,13 +624,11 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
             break;
         }
         // 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 || listType === "bullet")) {
-            // For bullet lists, always try to parse as test steps
-            // For numbered lists, only try if they have step-like characteristics
+        // Under a Steps heading (allowEmptySteps=true): always try for both bullet and numbered
+        // Outside Steps heading: only if the item looks like a test step (has Expected markers or indented data)
+        if (indentLevel === 0 && (allowEmptySteps || isLikelyStep(lines, index))) {
             const looksLikeTestStep = listType === "bullet" ||
-                (listType === "numbered" && (isLikelyStep(lines, index)));
+                (listType === "numbered" && (allowEmptySteps || isLikelyStep(lines, index)));
             if (looksLikeTestStep) {
                 const nextStep = parseTestStep(lines, index, allowEmptySteps);
                 if (nextStep) {
@@ -678,20 +676,28 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
 }
 function isLikelyStep(lines, index) {
     // Look ahead to see if there's indented content or expected result
-    if (index + 1 >= lines.length)
-        return false;
-    const nextLine = lines[index + 1];
-    const hasIndent = /^\s{2,}/.test(nextLine);
-    // Check if the next line contains expected result markers
-    const nextTrimmed = nextLine.trim();
-    const hasExpectedResult = EXPECTED_LABEL_REGEX.test(nextTrimmed);
-    // Only consider it a test step if:
-    // 1. It has an expected result, OR
-    // 2. The next line is indented but doesn't start with a numbered or bullet list
-    if (hasExpectedResult)
-        return true;
-    if (hasIndent && !/^\d+[.)]/.test(nextTrimmed) && !/^[-*+]/.test(nextTrimmed))
-        return true;
+    // Look ahead through subsequent lines for expected result markers or indented content
+    for (let i = index + 1; i < lines.length; i++) {
+        const line = lines[i];
+        const trimmed = line.trim();
+        // Stop at blank lines
+        if (!trimmed)
+            break;
+        // Check for indented content (step data) first — indented lines indicate a test step
+        const hasIndent = /^\s{2,}/.test(line);
+        if (hasIndent)
+            return true;
+        // Stop at new list items, headings, or other block-level elements (only if not indented)
+        if (/^[-*+]\s/.test(trimmed) || /^\d+[.)]\s/.test(trimmed))
+            break;
+        if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::"))
+            break;
+        // Check for expected result markers
+        if (EXPECTED_LABEL_REGEX.test(trimmed))
+            return true;
+        if (trimmed.match(/^\*[^*]*expected/i))
+            return true;
+    }
     return false;
 }
 function parseTestStep(lines, index, allowEmpty = false, snippetId) {
@@ -1145,7 +1151,9 @@ export function markdownToBlocks(markdown) {
             index = snippetWrapper.nextIndex;
             continue;
         }
-        const stepLikeBlock = parseTestStep(lines, index, stepsHeadingLevel !== null);
+        const stepLikeBlock = (stepsHeadingLevel !== null || isLikelyStep(lines, index))
+            ? parseTestStep(lines, index, stepsHeadingLevel !== null)
+            : null;
         if (stepLikeBlock) {
             blocks.push(stepLikeBlock.block);
             index = stepLikeBlock.nextIndex;

package/package/styles.css

@@ -354,6 +354,21 @@ html.dark .bn-step-image-preview__content {
   background: var(--status-blocked-bg);
 }
 
+.bn-teststep-plain {
+  padding: 4px 0;
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #262626;
+}
+
+.bn-teststep-plain__data,
+.bn-teststep-plain__expected {
+  display: block;
+  color: #737373;
+  font-size: 13px;
+}
+
 .bn-teststep,
 .bn-teststep button,
 .bn-teststep input,
@@ -490,19 +505,15 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__view-toggle[data-tooltip]::after {
-  bottom: auto;
-  left: auto;
-  right: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%);
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  bottom: auto;
-  left: auto;
-  right: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%) rotate(-90deg);
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .bn-teststep__horizontal-fields {
@@ -946,7 +957,7 @@ html.dark .bn-step-image-preview__content {
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
-  bottom: calc(100% + 6px);
+  top: calc(100% + 6px);
   left: 50%;
   transform: translateX(-50%);
   background: #0a0a0a;
@@ -986,7 +997,7 @@ html.dark .bn-step-image-preview__content {
   font-weight: 400;
   line-height: 20px;
   color: #262626;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .bn-step-editor--multiline {

package/package.json

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

@@ -100,6 +100,32 @@ export const stepBlock = createReactBlockSpec(
         return count;
       }, [block.id, documentVersion, editor.document]);
 
+      // Check if there is a preceding "Steps" heading
+      const hasStepsHeading = useMemo(() => {
+        const allBlocks = editor.document;
+        const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
+        if (blockIndex < 0) return false;
+
+        for (let i = blockIndex - 1; i >= 0; i--) {
+          const b = allBlocks[i];
+          if (b.type === "testStep" || b.type === "snippet") {
+            continue;
+          }
+          if (b.type === "heading") {
+            const text = (Array.isArray(b.content) ? b.content : [])
+              .filter((n: any) => n.type === "text")
+              .map((n: any) => n.text ?? "")
+              .join("")
+              .trim()
+              .toLowerCase()
+              .replace(/[:\-–—]$/, "");
+            return text === "steps";
+          }
+          return false;
+        }
+        return false;
+      }, [block.id, documentVersion, editor.document]);
+
       useEditorChange(() => {
         setDocumentVersion((version) => version + 1);
       }, editor);
@@ -273,6 +299,17 @@ export const stepBlock = createReactBlockSpec(
       const canToggleData = !dataHasContent;
       const canToggleExpected = !expectedHasContent;
 
+      // Render as plain text when not under a "Steps" heading
+      if (!hasStepsHeading) {
+        return (
+          <div className="bn-teststep-plain" data-block-id={block.id}>
+            <span>{stepTitle || "(empty step)"}</span>
+            {stepData ? <span className="bn-teststep-plain__data">{stepData}</span> : null}
+            {expectedResult ? <span className="bn-teststep-plain__expected">{expectedResult}</span> : null}
+          </div>
+        );
+      }
+
       if (viewMode === "horizontal") {
         return (
           <StepHorizontalView

package/src/editor/customMarkdownConverter.test.ts

@@ -485,37 +485,9 @@ describe("markdownToBlocks", () => {
     const blocks = markdownToBlocks(markdown);
     const stepBlocks = blocks.filter((block) => block.type === "testStep");
 
+    // Preconditions and Postconditions bullets are now parsed as bulletListItem (not testStep)
+    // Only items under the "Steps" heading with Expected markers remain as testSteps
     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: {
@@ -556,26 +528,6 @@ describe("markdownToBlocks", () => {
         },
         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: [],
-      },
     ]);
   });
 
@@ -674,33 +626,21 @@ describe("markdownToBlocks", () => {
         children: [],
       },
       {
-        type: "testStep",
-        props: {
-          stepTitle: "The user is logged into the application.",
-          stepData: "",
-          expectedResult: "",
-          listStyle: "bullet",
-        },
+        type: "bulletListItem",
+        props: baseProps,
+        content: [{ type: "text", text: "The user is logged into the application.", styles: {} }],
         children: [],
       },
       {
-        type: "testStep",
-        props: {
-          stepTitle: "The user has the necessary permissions to receive notifications.",
-          stepData: "",
-          expectedResult: "",
-          listStyle: "bullet",
-        },
+        type: "bulletListItem",
+        props: baseProps,
+        content: [{ type: "text", text: "The user has the necessary permissions to receive notifications.", styles: {} }],
         children: [],
       },
       {
-        type: "testStep",
-        props: {
-          stepTitle: "The application is configured to send real-time notifications.",
-          stepData: "",
-          expectedResult: "",
-          listStyle: "bullet",
-        },
+        type: "bulletListItem",
+        props: baseProps,
+        content: [{ type: "text", text: "The application is configured to send real-time notifications.", styles: {} }],
         children: [],
       },
     ]);
@@ -1008,13 +948,9 @@ describe("markdownToBlocks", () => {
         children: [],
       },
       {
-        type: "testStep",
-        props: {
-          stepTitle: "Bullet",
-          stepData: "",
-          expectedResult: "",
-          listStyle: "bullet",
-        },
+        type: "bulletListItem",
+        props: baseProps,
+        content: [{ type: "text", text: "Bullet", styles: {} }],
         children: [],
       },
     ]);

package/src/editor/customMarkdownConverter.ts

@@ -314,7 +314,7 @@ function serializeBlock(
     }
     case "bulletListItem": {
       const text = inlineToMarkdown(block.content);
-      lines.push(`${indent}- ${text}`.trimEnd());
+      lines.push(`${indent}* ${text}`.trimEnd());
       lines.push(...serializeChildren(block, ctx));
       return lines;
     }
@@ -777,14 +777,12 @@ 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 || listType === "bullet")) {
-      // For bullet lists, always try to parse as test steps
-      // For numbered lists, only try if they have step-like characteristics
+    // Under a Steps heading (allowEmptySteps=true): always try for both bullet and numbered
+    // Outside Steps heading: only if the item looks like a test step (has Expected markers or indented data)
+    if (indentLevel === 0 && (allowEmptySteps || isLikelyStep(lines, index))) {
       const looksLikeTestStep = listType === "bullet" ||
         (listType === "numbered" && (
-          isLikelyStep(lines, index)
+          allowEmptySteps || isLikelyStep(lines, index)
         ));
 
       if (looksLikeTestStep) {
@@ -836,20 +834,26 @@ function parseList(
 
 function isLikelyStep(lines: string[], index: number): boolean {
   // Look ahead to see if there's indented content or expected result
-  if (index + 1 >= lines.length) return false;
+  // Look ahead through subsequent lines for expected result markers or indented content
+  for (let i = index + 1; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Stop at blank lines
+    if (!trimmed) break;
 
-  const nextLine = lines[index + 1];
-  const hasIndent = /^\s{2,}/.test(nextLine);
+    // Check for indented content (step data) first — indented lines indicate a test step
+    const hasIndent = /^\s{2,}/.test(line);
+    if (hasIndent) return true;
 
-  // Check if the next line contains expected result markers
-  const nextTrimmed = nextLine.trim();
-  const hasExpectedResult = EXPECTED_LABEL_REGEX.test(nextTrimmed);
+    // Stop at new list items, headings, or other block-level elements (only if not indented)
+    if (/^[-*+]\s/.test(trimmed) || /^\d+[.)]\s/.test(trimmed)) break;
+    if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::")) break;
 
-  // Only consider it a test step if:
-  // 1. It has an expected result, OR
-  // 2. The next line is indented but doesn't start with a numbered or bullet list
-  if (hasExpectedResult) return true;
-  if (hasIndent && !/^\d+[.)]/.test(nextTrimmed) && !/^[-*+]/.test(nextTrimmed)) return true;
+    // Check for expected result markers
+    if (EXPECTED_LABEL_REGEX.test(trimmed)) return true;
+    if (trimmed.match(/^\*[^*]*expected/i)) return true;
+  }
 
   return false;
 }
@@ -1377,7 +1381,9 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
-    const stepLikeBlock = parseTestStep(lines, index, stepsHeadingLevel !== null);
+    const stepLikeBlock = (stepsHeadingLevel !== null || isLikelyStep(lines, index))
+      ? parseTestStep(lines, index, stepsHeadingLevel !== null)
+      : null;
     if (stepLikeBlock) {
       blocks.push(stepLikeBlock.block);
       index = stepLikeBlock.nextIndex;

package/src/editor/styles.css

@@ -354,6 +354,21 @@ html.dark .bn-step-image-preview__content {
   background: var(--status-blocked-bg);
 }
 
+.bn-teststep-plain {
+  padding: 4px 0;
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #262626;
+}
+
+.bn-teststep-plain__data,
+.bn-teststep-plain__expected {
+  display: block;
+  color: #737373;
+  font-size: 13px;
+}
+
 .bn-teststep,
 .bn-teststep button,
 .bn-teststep input,
@@ -490,19 +505,15 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__view-toggle[data-tooltip]::after {
-  bottom: auto;
-  left: auto;
-  right: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%);
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  bottom: auto;
-  left: auto;
-  right: calc(100% + 6px);
-  top: 50%;
-  transform: translateY(-50%) rotate(-90deg);
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .bn-teststep__horizontal-fields {
@@ -946,7 +957,7 @@ html.dark .bn-step-image-preview__content {
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
-  bottom: calc(100% + 6px);
+  top: calc(100% + 6px);
   left: 50%;
   transform: translateX(-50%);
   background: #0a0a0a;
@@ -986,7 +997,7 @@ html.dark .bn-step-image-preview__content {
   font-weight: 400;
   line-height: 20px;
   color: #262626;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .bn-step-editor--multiline {