testomatio-editor-blocks 0.4.20 → 0.4.22

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

@@ -1,3 +1,4 @@
+export declare const isEmptyParagraph: (b: any) => boolean;
 export declare const stepBlock: {
     config: {
         readonly type: "testStep";

package/package/editor/blocks/step.js

@@ -43,6 +43,10 @@ const writeStepViewMode = (mode) => {
         //
     }
 };
+export const isEmptyParagraph = (b) => b.type === "paragraph" &&
+    (!Array.isArray(b.content) ||
+        b.content.length === 0 ||
+        b.content.every((n) => { var _a; return n.type === "text" && !((_a = n.text) === null || _a === void 0 ? void 0 : _a.trim()); }));
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",
@@ -82,9 +86,13 @@ export const stepBlock = createReactBlockSpec({
                 return 1;
             let count = 1;
             for (let i = blockIndex - 1; i >= 0; i--) {
-                if (allBlocks[i].type === "testStep") {
+                const b = allBlocks[i];
+                if (b.type === "testStep") {
                     count++;
                 }
+                else if (isEmptyParagraph(b)) {
+                    continue;
+                }
                 else {
                     break;
                 }
@@ -99,7 +107,7 @@ export const stepBlock = createReactBlockSpec({
                 return false;
             for (let i = blockIndex - 1; i >= 0; i--) {
                 const b = allBlocks[i];
-                if (b.type === "testStep" || b.type === "snippet") {
+                if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
                     continue;
                 }
                 if (b.type === "heading") {

package/package/editor/blocks/stepHorizontalView.js

@@ -3,5 +3,5 @@ import { StepField } from "./stepField";
 const STEP_PLACEHOLDER = "Enter step name";
 const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result";
 export function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }) {
-    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__horizontal-fields", children: [_jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Step" }) }), _jsx(StepField, { label: "Step", showLabel: false, value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true })] }), _jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Expected result" }), viewToggle] }), _jsx(StepField, { label: "Expected result", showLabel: false, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus })] })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
+    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggle] }), _jsxs("div", { className: "bn-teststep__horizontal-fields", children: [_jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Step" }) }), _jsx(StepField, { label: "Step", showLabel: false, value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true })] }), _jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Expected result" }) }), _jsx(StepField, { label: "Expected result", showLabel: false, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus })] })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
 }

package/package/editor/blocks/useAutoResize.js

@@ -10,7 +10,9 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
             const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight || "16");
             const minHeight = lineHeight * minRows;
             const maxHeight = lineHeight * maxRows;
-            textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
+            const clampedHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+            textarea.style.height = `${clampedHeight}px`;
+            textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
         };
         const observer = new MutationObserver(resize);
         observer.observe(textarea, { childList: true, characterData: true, subtree: true });

package/package/styles.css

@@ -500,22 +500,10 @@ html.dark .bn-step-image-preview__content {
   color: #0a0a0a;
 }
 
-.bn-teststep__view-toggle--horizontal {
+.bn-teststep__view-toggle--horizontal svg {
   transform: rotate(90deg);
 }
 
-.bn-teststep__view-toggle[data-tooltip]::after {
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -997,7 +985,21 @@ html.dark .bn-step-image-preview__content {
   font-weight: 400;
   line-height: 20px;
   color: #262626;
-  overflow: visible;
+  overflow: hidden;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar {
+  width: 6px;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 }
 
 .bn-step-editor--multiline {

package/package.json

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

@@ -1,5 +1,41 @@
 import { describe, expect, it } from "vitest";
 import { customSchema } from "../customSchema";
+import { isEmptyParagraph } from "./step";
+
+describe("isEmptyParagraph", () => {
+  it("returns true for paragraph with no content", () => {
+    expect(isEmptyParagraph({ type: "paragraph", content: [], children: [] })).toBe(true);
+  });
+
+  it("returns true for paragraph with undefined content", () => {
+    expect(isEmptyParagraph({ type: "paragraph", children: [] })).toBe(true);
+  });
+
+  it("returns true for paragraph with only whitespace text", () => {
+    expect(
+      isEmptyParagraph({
+        type: "paragraph",
+        content: [{ type: "text", text: "   " }],
+        children: [],
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false for paragraph with text content", () => {
+    expect(
+      isEmptyParagraph({
+        type: "paragraph",
+        content: [{ type: "text", text: "hello" }],
+        children: [],
+      }),
+    ).toBe(false);
+  });
+
+  it("returns false for non-paragraph blocks", () => {
+    expect(isEmptyParagraph({ type: "heading", content: [], children: [] })).toBe(false);
+    expect(isEmptyParagraph({ type: "testStep", content: [], children: [] })).toBe(false);
+  });
+});
 
 describe("custom block specs", () => {
   it("registers the step block", () => {

package/src/editor/blocks/step.tsx

@@ -47,6 +47,12 @@ const writeStepViewMode = (mode: StepViewMode) => {
   }
 };
 
+export const isEmptyParagraph = (b: any): boolean =>
+  b.type === "paragraph" &&
+  (!Array.isArray(b.content) ||
+    b.content.length === 0 ||
+    b.content.every((n: any) => n.type === "text" && !n.text?.trim()));
+
 export const stepBlock = createReactBlockSpec(
   {
     type: "testStep",
@@ -91,8 +97,11 @@ export const stepBlock = createReactBlockSpec(
 
         let count = 1;
         for (let i = blockIndex - 1; i >= 0; i--) {
-          if (allBlocks[i].type === "testStep") {
+          const b = allBlocks[i];
+          if (b.type === "testStep") {
             count++;
+          } else if (isEmptyParagraph(b)) {
+            continue;
           } else {
             break;
           }
@@ -108,7 +117,7 @@ export const stepBlock = createReactBlockSpec(
 
         for (let i = blockIndex - 1; i >= 0; i--) {
           const b = allBlocks[i];
-          if (b.type === "testStep" || b.type === "snippet") {
+          if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
             continue;
           }
           if (b.type === "heading") {

package/src/editor/blocks/stepHorizontalView.tsx

@@ -35,6 +35,10 @@ export function StepHorizontalView({
         <div className="bn-teststep__line" />
       </div>
       <div className="bn-teststep__content">
+        <div className="bn-teststep__header">
+          <span className="bn-teststep__title">Step</span>
+          {viewToggle}
+        </div>
         <div className="bn-teststep__horizontal-fields">
           <div className="bn-teststep__horizontal-col">
             <div className="bn-teststep__header">
@@ -59,7 +63,6 @@ export function StepHorizontalView({
           <div className="bn-teststep__horizontal-col">
             <div className="bn-teststep__header">
               <span className="bn-teststep__title">Expected result</span>
-              {viewToggle}
             </div>
             <StepField
               label="Expected result"

package/src/editor/blocks/useAutoResize.ts

@@ -21,7 +21,9 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
       const minHeight = lineHeight * minRows;
       const maxHeight = lineHeight * maxRows;
 
-      textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
+      const clampedHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+      textarea.style.height = `${clampedHeight}px`;
+      textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
     };
 
     const observer = new MutationObserver(resize);

package/src/editor/customMarkdownConverter.test.ts

@@ -920,6 +920,46 @@ describe("markdownToBlocks", () => {
     );
   });
 
+  it("parses multiple steps separated by blank lines", () => {
+    const markdown = [
+      "## Steps",
+      "* asjkldnkasndkj",
+      "  *Expected*: slkednfkjsdnfkjsdnf",
+      "",
+      "* sdfnsikdfnsikdn",
+      "  *Expected*: sedfnskdijfns",
+      "",
+      "* sdfnksdjfnsdknf",
+      "  *Expected*: sdjfnskdjfnskdfn",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+
+    expect(stepBlocks).toHaveLength(3);
+
+    expect(stepBlocks[0].props).toEqual({
+      stepTitle: "asjkldnkasndkj",
+      stepData: "",
+      expectedResult: "slkednfkjsdnfkjsdnf\n",
+      listStyle: "bullet",
+    });
+
+    expect(stepBlocks[1].props).toEqual({
+      stepTitle: "sdfnsikdfnsikdn",
+      stepData: "",
+      expectedResult: "sedfnskdijfns\n",
+      listStyle: "bullet",
+    });
+
+    expect(stepBlocks[2].props).toEqual({
+      stepTitle: "sdfnksdjfnsdknf",
+      stepData: "",
+      expectedResult: "sdjfnskdjfnskdfn",
+      listStyle: "bullet",
+    });
+  });
+
   it("round-trips simple blocks", () => {
     const blocks: CustomEditorBlock[] = [
       {

package/src/editor/styles.css

@@ -500,22 +500,10 @@ html.dark .bn-step-image-preview__content {
   color: #0a0a0a;
 }
 
-.bn-teststep__view-toggle--horizontal {
+.bn-teststep__view-toggle--horizontal svg {
   transform: rotate(90deg);
 }
 
-.bn-teststep__view-toggle[data-tooltip]::after {
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -997,7 +985,21 @@ html.dark .bn-step-image-preview__content {
   font-weight: 400;
   line-height: 20px;
   color: #262626;
-  overflow: visible;
+  overflow: hidden;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar {
+  width: 6px;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 }
 
 .bn-step-editor--multiline {