testomatio-editor-blocks 0.4.17 → 0.4.19

package/package/editor/blocks/step.js

@@ -77,9 +77,44 @@ export const stepBlock = createReactBlockSpec({
         // Calculate step number based on position in document
         const stepNumber = useMemo(() => {
             const allBlocks = editor.document;
-            const stepBlocks = allBlocks.filter((b) => b.type === "testStep");
-            const index = stepBlocks.findIndex((b) => b.id === block.id);
-            return index >= 0 ? index + 1 : 1;
+            const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
+            if (blockIndex < 0)
+                return 1;
+            let count = 1;
+            for (let i = blockIndex - 1; i >= 0; i--) {
+                if (allBlocks[i].type === "testStep") {
+                    count++;
+                }
+                else {
+                    break;
+                }
+            }
+            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);
@@ -219,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/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.17",
+  "version": "0.4.19",
   "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

@@ -86,9 +86,44 @@ export const stepBlock = createReactBlockSpec(
       // Calculate step number based on position in document
       const stepNumber = useMemo(() => {
         const allBlocks = editor.document;
-        const stepBlocks = allBlocks.filter((b) => b.type === "testStep");
-        const index = stepBlocks.findIndex((b) => b.id === block.id);
-        return index >= 0 ? index + 1 : 1;
+        const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
+        if (blockIndex < 0) return 1;
+
+        let count = 1;
+        for (let i = blockIndex - 1; i >= 0; i--) {
+          if (allBlocks[i].type === "testStep") {
+            count++;
+          } else {
+            break;
+          }
+        }
+        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(() => {
@@ -264,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/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 {