testomatio-editor-blocks 0.4.44 → 0.4.46

package/package/editor/blocks/step.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
 import { useStepImageUpload } from "../stepImageUpload";
@@ -9,6 +9,7 @@ const VIEW_MODE_KEY = "bn-step-view-mode";
 const STEP_TITLE_PLACEHOLDER = "Enter step title...";
 const STEP_DATA_PLACEHOLDER = "Enter step data...";
 const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result...";
+const FORCE_VERTICAL_WIDTH = 550;
 /* readExpectedCollapsedPreference removed — currently unused */
 const writeExpectedCollapsedPreference = (collapsed) => {
     if (typeof window === "undefined") {
@@ -172,6 +173,22 @@ export const stepBlock = createReactBlockSpec({
         const [documentVersion, setDocumentVersion] = useState(0);
         const uploadImage = useStepImageUpload();
         const [viewMode, setViewMode] = useState(() => readStepViewMode());
+        const containerRef = useRef(null);
+        const [forceVertical, setForceVertical] = useState(false);
+        useEffect(() => {
+            var _a;
+            const el = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (!el)
+                return;
+            const observer = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    setForceVertical(entry.contentRect.width < FORCE_VERTICAL_WIDTH);
+                }
+            });
+            observer.observe(el);
+            return () => observer.disconnect();
+        }, []);
+        const effectiveVertical = forceVertical || viewMode === "vertical";
         // Calculate step number based on position in document
         const stepNumber = useMemo(() => {
             const allBlocks = editor.document;
@@ -337,10 +354,11 @@ export const stepBlock = createReactBlockSpec({
         }, [expectedHasContent, isExpectedVisible]);
         const canToggleData = !dataHasContent;
         const canToggleExpected = !expectedHasContent;
-        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" }) })] }) }) }));
+        const viewToggleButton = (_jsx("button", { type: "button", className: `bn-teststep__view-toggle${!effectiveVertical ? " bn-teststep__view-toggle--horizontal" : ""}${forceVertical ? " bn-teststep__view-toggle--disabled" : ""}`, "data-tooltip": forceVertical ? "Not enough space for horizontal view" : "Switch step view", "aria-label": forceVertical ? "Not enough space for horizontal view" : "Switch step view", onClick: forceVertical ? undefined : handleToggleView, "aria-disabled": forceVertical, 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" }) })] }) }));
+        if (!effectiveVertical) {
+            return (_jsx(StepHorizontalView, { ref: containerRef, blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: viewToggleButton }));
         }
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, 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" }), _jsx("button", { type: "button", className: "bn-teststep__view-toggle", "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" }) })] }) })] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, ref: containerRef, 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" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                                 if (!uploadImage) {
                                     return;
                                 }

package/package/editor/blocks/stepHorizontalView.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 type StepHorizontalViewProps = {
     blockId: string;
     stepNumber: number;
@@ -10,5 +10,5 @@ type StepHorizontalViewProps = {
     onFieldFocus: () => void;
     viewToggle?: ReactNode;
 };
-export declare function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }: StepHorizontalViewProps): import("react/jsx-runtime").JSX.Element;
+export declare const StepHorizontalView: import("react").ForwardRefExoticComponent<StepHorizontalViewProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/package/editor/blocks/stepHorizontalView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 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: [_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"] }) })] })] }));
-}
+export const StepHorizontalView = forwardRef(function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }, ref) {
+    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, ref: ref, 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"] }) })] })] }));
+});

package/package/editor/customMarkdownConverter.js

@@ -80,15 +80,20 @@ function unescapeMarkdown(text) {
     return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>\\])/g, "$1").replace(/\\>/g, ">");
 }
 function applyTextStyles(text, styles) {
+    var _a, _b, _c, _d;
     if (!styles) {
         return text;
     }
     const hasCode = styles.code === true;
     let result = text;
     if (hasCode) {
-        result = "`" + result.replace(/`/g, "\\`") + "`";
+        const leadingWs = (_b = (_a = result.match(/^(\s*)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "";
+        const trailingWs = (_d = (_c = result.match(/(\s*)$/)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : "";
+        const trimmed = result.slice(leadingWs.length, result.length - trailingWs.length || undefined);
+        if (!trimmed)
+            return result;
         // Code style supersedes other styles in Markdown.
-        return result;
+        return leadingWs + "`" + trimmed.replace(/`/g, "\\`") + "`" + trailingWs;
     }
     const wrappers = [];
     if (styles.bold) {
@@ -120,15 +125,20 @@ function applyTextStyles(text, styles) {
     // trapped inside markers like **bold<br/>text**.
     const segments = result.split("\n");
     const wrapped = segments.map((segment) => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!segment)
             return segment;
-        let s = segment;
+        const leadingWs = (_b = (_a = segment.match(/^(\s*)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "";
+        const trailingWs = (_d = (_c = segment.match(/(\s*)$/)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : "";
+        const trimmed = segment.slice(leadingWs.length, segment.length - trailingWs.length || undefined);
+        if (!trimmed)
+            return segment;
+        let s = trimmed;
         for (const wrapper of wrappers) {
-            const suffix = (_a = wrapper.suffix) !== null && _a !== void 0 ? _a : wrapper.prefix;
+            const suffix = (_e = wrapper.suffix) !== null && _e !== void 0 ? _e : wrapper.prefix;
             s = `${wrapper.prefix}${s}${suffix}`;
         }
-        return s;
+        return leadingWs + s + trailingWs;
     });
     return wrapped.join("\n");
 }
@@ -828,11 +838,18 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
         // Check for expected result labels with different formatting
         const expectedMatch = rawTrimmed.match(EXPECTED_LABEL_REGEX);
         const expectedStarMatch = rawTrimmed.match(/^\*expected\s*\*:\s*(.*)$/i) ||
-            rawTrimmed.match(/^\*expected\*:\s*(.*)$/i);
+            rawTrimmed.match(/^\*expected\*:\s*(.*)$/i) ||
+            rawTrimmed.match(/^\*{1,2}expected\s*:\*{1,2}\s*(.*)$/i);
         if (expectedMatch || expectedStarMatch) {
             inExpectedResult = true;
-            const label = expectedMatch ? expectedMatch[0] : (expectedStarMatch ? expectedStarMatch[0] : '');
-            let content = rawTrimmed.slice(label.length).trim();
+            // Prefer the star match (more specific about formatting) to avoid leaking markers
+            let content;
+            if (expectedStarMatch) {
+                content = (expectedStarMatch[1] || '').trim();
+            }
+            else {
+                content = rawTrimmed.slice(expectedMatch[0].length).trim();
+            }
             // Add the content (if any) from this line
             if (content) {
                 const expectedContent = unescapeMarkdown(content);

package/package/styles.css

@@ -504,6 +504,11 @@ html.dark .bn-step-image-preview__content {
   transform: rotate(90deg);
 }
 
+.bn-teststep__view-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.3 !important;
+}
+
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -521,11 +526,6 @@ html.dark .bn-step-image-preview__content {
   min-height: 28px;
 }
 
-@media (max-width: 860px) {
-  .bn-teststep__horizontal-fields {
-    flex-direction: column;
-  }
-}
 
 .bn-snippet .bn-step-field__input {
   border-color: var(--snippet-border-light);

package/package.json

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

@@ -1,5 +1,5 @@
 import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
 import { useStepImageUpload } from "../stepImageUpload";
@@ -11,6 +11,7 @@ const STEP_TITLE_PLACEHOLDER = "Enter step title...";
 const STEP_DATA_PLACEHOLDER = "Enter step data...";
 const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result...";
 type StepViewMode = "vertical" | "horizontal";
+const FORCE_VERTICAL_WIDTH = 550;
 
 /* readExpectedCollapsedPreference removed — currently unused */
 
@@ -191,6 +192,22 @@ export const stepBlock = createReactBlockSpec(
       const [documentVersion, setDocumentVersion] = useState(0);
       const uploadImage = useStepImageUpload();
       const [viewMode, setViewMode] = useState<StepViewMode>(() => readStepViewMode());
+      const containerRef = useRef<HTMLDivElement>(null);
+      const [forceVertical, setForceVertical] = useState(false);
+
+      useEffect(() => {
+        const el = containerRef.current?.parentElement;
+        if (!el) return;
+        const observer = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            setForceVertical(entry.contentRect.width < FORCE_VERTICAL_WIDTH);
+          }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+      }, []);
+
+      const effectiveVertical = forceVertical || viewMode === "vertical";
 
       // Calculate step number based on position in document
       const stepNumber = useMemo(() => {
@@ -391,9 +408,30 @@ export const stepBlock = createReactBlockSpec(
       const canToggleData = !dataHasContent;
       const canToggleExpected = !expectedHasContent;
 
-      if (viewMode === "horizontal") {
+      const viewToggleButton = (
+        <button
+          type="button"
+          className={`bn-teststep__view-toggle${!effectiveVertical ? " bn-teststep__view-toggle--horizontal" : ""}${forceVertical ? " bn-teststep__view-toggle--disabled" : ""}`}
+          data-tooltip={forceVertical ? "Not enough space for horizontal view" : "Switch step view"}
+          aria-label={forceVertical ? "Not enough space for horizontal view" : "Switch step view"}
+          onClick={forceVertical ? undefined : handleToggleView}
+          aria-disabled={forceVertical}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <mask id="mask-toggle" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+              <rect width="16" height="16" fill="#D9D9D9"/>
+            </mask>
+            <g mask="url(#mask-toggle)">
+              <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"/>
+            </g>
+          </svg>
+        </button>
+      );
+
+      if (!effectiveVertical) {
         return (
           <StepHorizontalView
+            ref={containerRef}
             blockId={block.id}
             stepNumber={stepNumber}
             stepValue={combinedStepValue}
@@ -402,30 +440,13 @@ export const stepBlock = createReactBlockSpec(
             onExpectedChange={handleExpectedChange}
             onInsertNextStep={handleInsertNextStep}
             onFieldFocus={handleFieldFocus}
-            viewToggle={
-              <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}
-              >
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                  <mask id="mask-toggle" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-                    <rect width="16" height="16" fill="#D9D9D9"/>
-                  </mask>
-                  <g mask="url(#mask-toggle)">
-                    <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"/>
-                  </g>
-                </svg>
-              </button>
-            }
+            viewToggle={viewToggleButton}
           />
         );
       }
 
       return (
-        <div className="bn-teststep" data-block-id={block.id}>
+        <div className="bn-teststep" data-block-id={block.id} ref={containerRef}>
           <div className="bn-teststep__timeline">
             <span className="bn-teststep__number">{stepNumber}</span>
             <div className="bn-teststep__line" />
@@ -433,22 +454,7 @@ export const stepBlock = createReactBlockSpec(
           <div className="bn-teststep__content">
             <div className="bn-teststep__header">
               <span className="bn-teststep__title">Step</span>
-              <button
-                type="button"
-                className="bn-teststep__view-toggle"
-                data-tooltip="Switch step view"
-                aria-label="Switch step view"
-                onClick={handleToggleView}
-              >
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                  <mask id="mask-toggle" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-                    <rect width="16" height="16" fill="#D9D9D9"/>
-                  </mask>
-                  <g mask="url(#mask-toggle)">
-                    <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"/>
-                  </g>
-                </svg>
-              </button>
+              {viewToggleButton}
             </div>
             <StepField
               label="Step"

package/src/editor/blocks/stepHorizontalView.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { forwardRef, type ReactNode } from "react";
 import { StepField } from "./stepField";
 import type { StepSuggestion } from "../stepAutocomplete";
 
@@ -17,7 +17,7 @@ type StepHorizontalViewProps = {
   viewToggle?: ReactNode;
 };
 
-export function StepHorizontalView({
+export const StepHorizontalView = forwardRef<HTMLDivElement, StepHorizontalViewProps>(function StepHorizontalView({
   blockId,
   stepNumber,
   stepValue,
@@ -27,9 +27,9 @@ export function StepHorizontalView({
   onInsertNextStep,
   onFieldFocus,
   viewToggle,
-}: StepHorizontalViewProps) {
+}, ref) {
   return (
-    <div className="bn-teststep bn-teststep--horizontal" data-block-id={blockId}>
+    <div className="bn-teststep bn-teststep--horizontal" data-block-id={blockId} ref={ref}>
       <div className="bn-teststep__timeline">
         <span className="bn-teststep__number">{stepNumber}</span>
         <div className="bn-teststep__line" />
@@ -79,4 +79,4 @@ export function StepHorizontalView({
       </div>
     </div>
   );
-}
+});

package/src/editor/customMarkdownConverter.test.ts

@@ -46,6 +46,73 @@ describe("blocksToMarkdown", () => {
     expect(blocksToMarkdown(blocks)).toBe("Hello **world***!*");
   });
 
+  it("places bold markers outside leading/trailing spaces", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "some ", styles: {} },
+          { type: "text", text: " bold ", styles: { bold: true } },
+          { type: "text", text: " text", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe("some  **bold**  text");
+  });
+
+  it("places italic markers outside trailing space", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "word ", styles: { italic: true } },
+          { type: "text", text: "next", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe("*word* next");
+  });
+
+  it("places code backticks outside leading/trailing spaces", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "see ", styles: {} },
+          { type: "text", text: " code ", styles: { code: true } },
+          { type: "text", text: " here", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe("see  `code`  here");
+  });
+
+  it("returns all-whitespace text unformatted", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: baseProps,
+        content: [
+          { type: "text", text: "a", styles: {} },
+          { type: "text", text: "   ", styles: { bold: true } },
+          { type: "text", text: "b", styles: {} },
+        ],
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe("a   b");
+  });
+
   it("serializes a numbered list", () => {
     const blocks: CustomEditorBlock[] = [
       {
@@ -1048,7 +1115,7 @@ describe("markdownToBlocks", () => {
          props: {
            stepTitle: "Open the form.",
            stepData: "",
-           expectedResult: "** The form opens.\nFields are empty.",
+           expectedResult: "The form opens.\nFields are empty.",
            listStyle: "bullet",
          },
          children: [],
@@ -1212,7 +1279,7 @@ describe("markdownToBlocks", () => {
           stepTitle:
             "Navigate to More tab -≻ My Profile -≻ Log into the app with user from preconditions",
           stepData: "",
-          expectedResult: "* Upsell SS screen is displayed",
+          expectedResult: "Upsell SS screen is displayed",
           listStyle: "bullet",
         },
         children: [],
@@ -1222,7 +1289,7 @@ describe("markdownToBlocks", () => {
         props: {
           stepTitle: "Close SS",
           stepData: "",
-          expectedResult: "* My Course and More tab are displayed",
+          expectedResult: "My Course and More tab are displayed",
           listStyle: "bullet",
         },
         children: [],
@@ -1742,7 +1809,7 @@ describe("markdownToBlocks", () => {
       props: {
         stepTitle: "Check UI of Sleep score info screen",
         stepData: "- Back button\nHeader: Sleep Score Info\nText: Ever wonder if 6, 8, or 9 hours of sleep are enough? Sleep score takes the guesswork out of your ZZZ's and shows you how well you slept last night based on duration, efficiency, and consistency.",
-        expectedResult: "* - 1st block:\n* - 2nd block:\n* - 3d block:",
+        expectedResult: "- 1st block:\n- 2nd block:\n- 3d block:",
         listStyle: "bullet",
       },
       children: [],

package/src/editor/customMarkdownConverter.ts

@@ -137,9 +137,12 @@ function applyTextStyles(text: string, styles: EditorStyles | undefined): string
   let result = text;
 
   if (hasCode) {
-    result = "`" + result.replace(/`/g, "\\`") + "`";
+    const leadingWs = result.match(/^(\s*)/)?.[1] ?? "";
+    const trailingWs = result.match(/(\s*)$/)?.[1] ?? "";
+    const trimmed = result.slice(leadingWs.length, result.length - trailingWs.length || undefined);
+    if (!trimmed) return result;
     // Code style supersedes other styles in Markdown.
-    return result;
+    return leadingWs + "`" + trimmed.replace(/`/g, "\\`") + "`" + trailingWs;
   }
 
   const wrappers: Array<{ prefix: string; suffix?: string }> = [];
@@ -180,12 +183,16 @@ function applyTextStyles(text: string, styles: EditorStyles | undefined): string
   const segments = result.split("\n");
   const wrapped = segments.map((segment) => {
     if (!segment) return segment;
-    let s = segment;
+    const leadingWs = segment.match(/^(\s*)/)?.[1] ?? "";
+    const trailingWs = segment.match(/(\s*)$/)?.[1] ?? "";
+    const trimmed = segment.slice(leadingWs.length, segment.length - trailingWs.length || undefined);
+    if (!trimmed) return segment;
+    let s = trimmed;
     for (const wrapper of wrappers) {
       const suffix = wrapper.suffix ?? wrapper.prefix;
       s = `${wrapper.prefix}${s}${suffix}`;
     }
-    return s;
+    return leadingWs + s + trailingWs;
   });
 
   return wrapped.join("\n");
@@ -1004,12 +1011,18 @@ function parseTestStep(
     // Check for expected result labels with different formatting
     const expectedMatch = rawTrimmed.match(EXPECTED_LABEL_REGEX);
     const expectedStarMatch = rawTrimmed.match(/^\*expected\s*\*:\s*(.*)$/i) ||
-                               rawTrimmed.match(/^\*expected\*:\s*(.*)$/i);
+                               rawTrimmed.match(/^\*expected\*:\s*(.*)$/i) ||
+                               rawTrimmed.match(/^\*{1,2}expected\s*:\*{1,2}\s*(.*)$/i);
 
     if (expectedMatch || expectedStarMatch) {
       inExpectedResult = true;
-      const label = expectedMatch ? expectedMatch[0] : (expectedStarMatch ? expectedStarMatch[0] : '');
-      let content = rawTrimmed.slice(label.length).trim();
+      // Prefer the star match (more specific about formatting) to avoid leaking markers
+      let content: string;
+      if (expectedStarMatch) {
+        content = (expectedStarMatch[1] || '').trim();
+      } else {
+        content = rawTrimmed.slice(expectedMatch![0].length).trim();
+      }
 
       // Add the content (if any) from this line
       if (content) {

package/src/editor/styles.css

@@ -504,6 +504,11 @@ html.dark .bn-step-image-preview__content {
   transform: rotate(90deg);
 }
 
+.bn-teststep__view-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.3 !important;
+}
+
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -521,11 +526,6 @@ html.dark .bn-step-image-preview__content {
   min-height: 28px;
 }
 
-@media (max-width: 860px) {
-  .bn-teststep__horizontal-fields {
-    flex-direction: column;
-  }
-}
 
 .bn-snippet .bn-step-field__input {
   border-color: var(--snippet-border-light);