testomatio-editor-blocks 0.4.21 → 0.4.22

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.21",
+  "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/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/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 {