testomatio-editor-blocks 0.4.21 → 0.4.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package/editor/blocks/stepHorizontalView.js +1 -1
  2. package/package/editor/blocks/useAutoResize.js +3 -1
  3. package/package/styles.css +22 -15
  4. package/package.json +1 -1
  5. package/src/editor/blocks/stepHorizontalView.tsx +1 -9
  6. package/src/editor/blocks/useAutoResize.ts +3 -1
  7. package/src/editor/styles.css +22 -15
package/package/editor/blocks/stepHorizontalView.js CHANGED
@@ -3,5 +3,5 @@ import { StepField } from "./stepField";
3
3
  const STEP_PLACEHOLDER = "Enter step name";
4
4
  const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result";
5
5
  export function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }) {
6
- 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"] }) })] })] }));
6
+ 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: [_jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Step", 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 }) }), _jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Expected result", labelAction: viewToggle, 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"] }) })] })] }));
7
7
  }
package/package/editor/blocks/useAutoResize.js CHANGED
@@ -10,7 +10,9 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
10
10
  const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight || "16");
11
11
  const minHeight = lineHeight * minRows;
12
12
  const maxHeight = lineHeight * maxRows;
13
- textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
13
+ const clampedHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
14
+ textarea.style.height = `${clampedHeight}px`;
15
+ textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
14
16
  };
15
17
  const observer = new MutationObserver(resize);
16
18
  observer.observe(textarea, { childList: true, characterData: true, subtree: true });
package/package/styles.css CHANGED
@@ -500,33 +500,26 @@ html.dark .bn-step-image-preview__content {
500
500
  color: #0a0a0a;
501
501
  }
502
502
 
503
- .bn-teststep__view-toggle--horizontal {
503
+ .bn-teststep__view-toggle--horizontal svg {
504
504
  transform: rotate(90deg);
505
505
  }
506
506
 
507
- .bn-teststep__view-toggle[data-tooltip]::after {
508
- top: calc(100% + 6px);
509
- left: 50%;
510
- transform: translateX(-50%);
511
- }
512
-
513
- .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
514
- top: calc(100% + 6px);
515
- left: 50%;
516
- transform: translateX(-50%);
517
- }
518
-
519
507
  .bn-teststep__horizontal-fields {
520
508
  display: flex;
521
509
  gap: 16px;
522
510
  }
523
511
 
524
512
  .bn-teststep__horizontal-col {
525
- flex: 1 0 0%;
513
+ flex: 1 1 0%;
526
514
  min-width: 0;
527
515
  display: flex;
528
516
  flex-direction: column;
529
517
  gap: 4px;
518
+ overflow: hidden;
519
+ }
520
+
521
+ .bn-teststep__horizontal-col .bn-step-field__top {
522
+ min-height: 28px;
530
523
  }
531
524
 
532
525
  @media (max-width: 860px) {
@@ -997,7 +990,21 @@ html.dark .bn-step-image-preview__content {
997
990
  font-weight: 400;
998
991
  line-height: 20px;
999
992
  color: #262626;
1000
- overflow: visible;
993
+ overflow: hidden;
994
+ }
995
+
996
+ .bn-step-editor .overtype-wrapper .overtype-input {
997
+ scrollbar-width: thin;
998
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
999
+ }
1000
+
1001
+ .bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar {
1002
+ width: 6px;
1003
+ }
1004
+
1005
+ .bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar-thumb {
1006
+ background: rgba(0, 0, 0, 0.2);
1007
+ border-radius: 3px;
1001
1008
  }
1002
1009
 
1003
1010
  .bn-step-editor--multiline {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testomatio-editor-blocks",
3
- "version": "0.4.21",
3
+ "version": "0.4.23",
4
4
  "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
5
5
  "type": "module",
6
6
  "main": "./package/index.js",
package/src/editor/blocks/stepHorizontalView.tsx CHANGED
@@ -37,12 +37,8 @@ export function StepHorizontalView({
37
37
  <div className="bn-teststep__content">
38
38
  <div className="bn-teststep__horizontal-fields">
39
39
  <div className="bn-teststep__horizontal-col">
40
- <div className="bn-teststep__header">
41
- <span className="bn-teststep__title">Step</span>
42
- </div>
43
40
  <StepField
44
41
  label="Step"
45
- showLabel={false}
46
42
  value={stepValue}
47
43
  onChange={onStepChange}
48
44
  placeholder={STEP_PLACEHOLDER}
@@ -57,13 +53,9 @@ export function StepHorizontalView({
57
53
  />
58
54
  </div>
59
55
  <div className="bn-teststep__horizontal-col">
60
- <div className="bn-teststep__header">
61
- <span className="bn-teststep__title">Expected result</span>
62
- {viewToggle}
63
- </div>
64
56
  <StepField
65
57
  label="Expected result"
66
- showLabel={false}
58
+ labelAction={viewToggle}
67
59
  value={expectedResult}
68
60
  onChange={onExpectedChange}
69
61
  placeholder={EXPECTED_RESULT_PLACEHOLDER}
package/src/editor/blocks/useAutoResize.ts CHANGED
@@ -21,7 +21,9 @@ export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRow
21
21
  const minHeight = lineHeight * minRows;
22
22
  const maxHeight = lineHeight * maxRows;
23
23
 
24
- textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
24
+ const clampedHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
25
+ textarea.style.height = `${clampedHeight}px`;
26
+ textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
25
27
  };
26
28
 
27
29
  const observer = new MutationObserver(resize);
package/src/editor/styles.css CHANGED
@@ -500,33 +500,26 @@ html.dark .bn-step-image-preview__content {
500
500
  color: #0a0a0a;
501
501
  }
502
502
 
503
- .bn-teststep__view-toggle--horizontal {
503
+ .bn-teststep__view-toggle--horizontal svg {
504
504
  transform: rotate(90deg);
505
505
  }
506
506
 
507
- .bn-teststep__view-toggle[data-tooltip]::after {
508
- top: calc(100% + 6px);
509
- left: 50%;
510
- transform: translateX(-50%);
511
- }
512
-
513
- .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
514
- top: calc(100% + 6px);
515
- left: 50%;
516
- transform: translateX(-50%);
517
- }
518
-
519
507
  .bn-teststep__horizontal-fields {
520
508
  display: flex;
521
509
  gap: 16px;
522
510
  }
523
511
 
524
512
  .bn-teststep__horizontal-col {
525
- flex: 1 0 0%;
513
+ flex: 1 1 0%;
526
514
  min-width: 0;
527
515
  display: flex;
528
516
  flex-direction: column;
529
517
  gap: 4px;
518
+ overflow: hidden;
519
+ }
520
+
521
+ .bn-teststep__horizontal-col .bn-step-field__top {
522
+ min-height: 28px;
530
523
  }
531
524
 
532
525
  @media (max-width: 860px) {
@@ -997,7 +990,21 @@ html.dark .bn-step-image-preview__content {
997
990
  font-weight: 400;
998
991
  line-height: 20px;
999
992
  color: #262626;
1000
- overflow: visible;
993
+ overflow: hidden;
994
+ }
995
+
996
+ .bn-step-editor .overtype-wrapper .overtype-input {
997
+ scrollbar-width: thin;
998
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
999
+ }
1000
+
1001
+ .bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar {
1002
+ width: 6px;
1003
+ }
1004
+
1005
+ .bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar-thumb {
1006
+ background: rgba(0, 0, 0, 0.2);
1007
+ border-radius: 3px;
1001
1008
  }
1002
1009
 
1003
1010
  .bn-step-editor--multiline {