testomatio-editor-blocks 0.4.34 → 0.4.36

package/package/editor/blocks/step.js

@@ -193,31 +193,6 @@ export const stepBlock = createReactBlockSpec({
             }
             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" || isEmptyParagraph(b)) {
-                    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 isStepsHeading(text);
-                }
-                return false;
-            }
-            return false;
-        }, [block.id, documentVersion, editor.document]);
         useEditorChange(() => {
             setDocumentVersion((version) => version + 1);
         }, editor);
@@ -362,10 +337,6 @@ 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/editor/blocks/stepField.js

@@ -128,6 +128,32 @@ function stripInlineMarkdown(markdown) {
                 continue;
             }
         }
+        // Code block: ```\n...\n``` (triple backticks with newlines)
+        if (markdown[i] === "`" && markdown[i + 1] === "`" && markdown[i + 2] === "`") {
+            const contentStart = markdown[i + 3] === "\n" ? i + 4 : i + 3;
+            const closeIdx = markdown.indexOf("```", contentStart);
+            if (closeIdx !== -1) {
+                const contentEnd = markdown[closeIdx - 1] === "\n" ? closeIdx - 1 : closeIdx;
+                const inner = markdown.slice(contentStart, contentEnd);
+                const start = plainText.length;
+                plainText += inner;
+                formatting.push({ start, end: plainText.length, type: "code" });
+                i = closeIdx + 3;
+                continue;
+            }
+        }
+        // Inline code: `text`
+        if (markdown[i] === "`") {
+            const closeIdx = markdown.indexOf("`", i + 1);
+            if (closeIdx !== -1) {
+                const inner = markdown.slice(i + 1, closeIdx);
+                const start = plainText.length;
+                plainText += inner;
+                formatting.push({ start, end: plainText.length, type: "code" });
+                i = closeIdx + 1;
+                continue;
+            }
+        }
         plainText += markdown[i];
         i++;
     }
@@ -138,13 +164,24 @@ function buildFullMarkdown(plainText, links, formatting) {
         return plainText;
     const markers = [];
     for (const fmt of formatting) {
-        const marker = fmt.type === "bold" ? "**" : "*";
+        let openMarker;
+        let closeMarker;
+        if (fmt.type === "code") {
+            const content = plainText.slice(fmt.start, fmt.end);
+            const isMultiline = content.includes("\n");
+            openMarker = isMultiline ? "```\n" : "`";
+            closeMarker = isMultiline ? "\n```" : "`";
+        }
+        else {
+            openMarker = fmt.type === "bold" ? "**" : "*";
+            closeMarker = openMarker;
+        }
         // Opening: outer markers (bold) before inner (italic) → bold order=0, italic order=1
         // Closing: inner markers (italic) before outer (bold) → italic order=0, bold order=1
-        const openOrder = fmt.type === "bold" ? 0 : 1;
-        const closeOrder = fmt.type === "bold" ? 1 : 0;
-        markers.push({ pos: fmt.start, text: marker, order: openOrder });
-        markers.push({ pos: fmt.end, text: marker, order: closeOrder });
+        const openOrder = fmt.type === "bold" ? 0 : fmt.type === "code" ? 2 : 1;
+        const closeOrder = fmt.type === "bold" ? 1 : fmt.type === "code" ? -1 : 0;
+        markers.push({ pos: fmt.start, text: openMarker, order: openOrder });
+        markers.push({ pos: fmt.end, text: closeMarker, order: closeOrder });
     }
     for (const link of links) {
         // Link brackets go outside formatting markers
@@ -173,14 +210,23 @@ function adjustFormattingForEdit(formatting, editPos, delta) {
     })
         .filter((fmt) => fmt.end > fmt.start);
 }
-function getCaretRectInPreview(preview, offset) {
+function getCaretRectInPreview(preview, offset, textareaValue) {
+    // Convert textarea-space offset to preview-space (strip newlines)
+    let nlCount = 0;
+    if (textareaValue) {
+        for (let i = 0; i < offset && i < textareaValue.length; i++) {
+            if (textareaValue[i] === "\n")
+                nlCount++;
+        }
+    }
+    const previewOffset = offset - nlCount;
     const walker = document.createTreeWalker(preview, NodeFilter.SHOW_TEXT);
     let currentOffset = 0;
     while (walker.nextNode()) {
         const textNode = walker.currentNode;
         const nodeLen = textNode.length;
-        if (offset <= currentOffset + nodeLen) {
-            const localOffset = offset - currentOffset;
+        if (previewOffset <= currentOffset + nodeLen) {
+            const localOffset = previewOffset - currentOffset;
             try {
                 const range = document.createRange();
                 range.setStart(textNode, localOffset);
@@ -201,7 +247,7 @@ function getCaretRectInPreview(preview, offset) {
     }
     return null;
 }
-function applyFormattingHighlights(preview, formatting) {
+function applyFormattingHighlights(preview, formatting, textareaValue) {
     if (formatting.length === 0)
         return;
     // Remove previous formatting highlights
@@ -227,8 +273,38 @@ function applyFormattingHighlights(preview, formatting) {
             parent.removeChild(el);
         }
     }
+    const existingCode = preview.querySelectorAll("code.step-preview-code");
+    for (let i = 0; i < existingCode.length; i++) {
+        const el = existingCode[i];
+        const parent = el.parentNode;
+        if (parent) {
+            while (el.firstChild) {
+                parent.insertBefore(el.firstChild, el);
+            }
+            parent.removeChild(el);
+        }
+    }
+    // After unwrapping formatting elements, merge adjacent/empty text nodes
+    // so the tree walker sees clean text nodes matching the original structure.
+    preview.normalize();
+    // OverType splits textarea lines into <div> elements, discarding the \n
+    // characters. Convert textarea-space positions (with \n) to preview-space
+    // positions (without \n) so we can find the correct text nodes.
+    function taToPreview(taPos) {
+        if (!textareaValue)
+            return taPos;
+        let nlCount = 0;
+        for (let i = 0; i < taPos && i < textareaValue.length; i++) {
+            if (textareaValue[i] === "\n")
+                nlCount++;
+        }
+        return taPos - nlCount;
+    }
     const sorted = [...formatting].sort((a, b) => b.start - a.start);
     for (const fmt of sorted) {
+        const pStart = taToPreview(fmt.start);
+        const pEnd = taToPreview(fmt.end);
+        // Collect text nodes with their preview-space offsets
         const walker = document.createTreeWalker(preview, NodeFilter.SHOW_TEXT);
         let currentOffset = 0;
         let startNode = null;
@@ -239,13 +315,13 @@ function applyFormattingHighlights(preview, formatting) {
             const textNode = walker.currentNode;
             const nodeStart = currentOffset;
             const nodeEnd = currentOffset + textNode.length;
-            if (!startNode && fmt.start >= nodeStart && fmt.start < nodeEnd) {
+            if (!startNode && pStart >= nodeStart && pStart < nodeEnd) {
                 startNode = textNode;
-                startLocalOffset = fmt.start - nodeStart;
+                startLocalOffset = pStart - nodeStart;
             }
-            if (!endNode && fmt.end > nodeStart && fmt.end <= nodeEnd) {
+            if (!endNode && pEnd > nodeStart && pEnd <= nodeEnd) {
                 endNode = textNode;
-                endLocalOffset = fmt.end - nodeStart;
+                endLocalOffset = pEnd - nodeStart;
             }
             currentOffset = nodeEnd;
             if (startNode && endNode)
@@ -253,18 +329,63 @@ function applyFormattingHighlights(preview, formatting) {
         }
         if (!startNode || !endNode)
             continue;
-        try {
-            const range = document.createRange();
-            range.setStart(startNode, startLocalOffset);
-            range.setEnd(endNode, endLocalOffset);
-            const wrapper = document.createElement(fmt.type === "bold" ? "strong" : "em");
-            wrapper.className = fmt.type === "bold" ? "step-preview-bold" : "step-preview-italic";
-            const fragment = range.extractContents();
-            wrapper.appendChild(fragment);
-            range.insertNode(wrapper);
+        const tagName = fmt.type === "bold" ? "strong" : fmt.type === "code" ? "code" : "em";
+        const className = fmt.type === "bold" ? "step-preview-bold" : fmt.type === "code" ? "step-preview-code" : "step-preview-italic";
+        // If start and end are in the same text node, wrap directly
+        if (startNode === endNode) {
+            try {
+                const range = document.createRange();
+                range.setStart(startNode, startLocalOffset);
+                range.setEnd(endNode, endLocalOffset);
+                const wrapper = document.createElement(tagName);
+                wrapper.className = className;
+                const fragment = range.extractContents();
+                wrapper.appendChild(fragment);
+                range.insertNode(wrapper);
+            }
+            catch {
+                // DOM manipulation can fail if range crosses element boundaries
+            }
         }
-        catch {
-            // DOM manipulation can fail if range crosses element boundaries
+        else {
+            // Multi-node range (e.g. code spanning multiple lines/divs):
+            // collect all text nodes in the range, then wrap each one individually
+            const textNodes = [];
+            const walker2 = document.createTreeWalker(preview, NodeFilter.SHOW_TEXT);
+            let collecting = false;
+            while (walker2.nextNode()) {
+                const tn = walker2.currentNode;
+                if (tn === startNode) {
+                    collecting = true;
+                    textNodes.push({ node: tn, localStart: startLocalOffset, localEnd: tn.length });
+                }
+                else if (tn === endNode) {
+                    textNodes.push({ node: tn, localStart: 0, localEnd: endLocalOffset });
+                    break;
+                }
+                else if (collecting) {
+                    textNodes.push({ node: tn, localStart: 0, localEnd: tn.length });
+                }
+            }
+            // Wrap in reverse order to preserve offsets
+            for (let ti = textNodes.length - 1; ti >= 0; ti--) {
+                const { node, localStart, localEnd } = textNodes[ti];
+                if (localStart >= localEnd)
+                    continue;
+                try {
+                    const range = document.createRange();
+                    range.setStart(node, localStart);
+                    range.setEnd(node, localEnd);
+                    const wrapper = document.createElement(tagName);
+                    wrapper.className = className;
+                    const fragment = range.extractContents();
+                    wrapper.appendChild(fragment);
+                    range.insertNode(wrapper);
+                }
+                catch {
+                    // skip nodes that can't be wrapped
+                }
+            }
         }
     }
 }
@@ -411,6 +532,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, markdown);
     }, []);
     useEffect(() => {
+        var _a;
         const container = editorContainerRef.current;
         if (!container) {
             return;
@@ -431,12 +553,13 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         // Monkey-patch updatePreview to add link highlights
         const originalUpdatePreview = instance.updatePreview.bind(instance);
         instance.updatePreview = function () {
+            var _a;
             originalUpdatePreview();
-            applyFormattingHighlights(this.preview, formattingRef.current);
+            applyFormattingHighlights(this.preview, formattingRef.current, (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.value);
             applyLinkHighlights(this.preview, linksRef.current);
         };
         // Apply initial highlights
-        applyFormattingHighlights(instance.preview, formattingRef.current);
+        applyFormattingHighlights(instance.preview, formattingRef.current, (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.value);
         applyLinkHighlights(instance.preview, linksRef.current);
         // Create custom caret element inside the wrapper
         const caretEl = document.createElement("div");
@@ -459,7 +582,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         if (!textareaNode || !instance || !caret)
             return;
         const updateCaret = () => {
-            var _a, _b;
+            var _a, _b, _c;
             const hasFormatting = formattingRef.current.length > 0;
             if (!hasFormatting) {
                 caret.style.display = "none";
@@ -480,7 +603,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                 caret.style.display = "none";
                 return;
             }
-            const rect = getCaretRectInPreview(instance.preview, pos);
+            const rect = getCaretRectInPreview(instance.preview, pos, (_c = instance.textarea) === null || _c === void 0 ? void 0 : _c.value);
             if (rect) {
                 caret.style.display = "block";
                 caret.style.top = `${rect.top}px`;
@@ -530,6 +653,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         textareaNode.focus();
     }, [focusSignal, textareaNode]);
     useEffect(() => {
+        var _a;
         const instance = editorInstanceRef.current;
         if (!instance) {
             setPlainTextValue((prev) => {
@@ -549,7 +673,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         }
         else {
             // Even if text didn't change, formatting/links might have — re-apply highlights
-            applyFormattingHighlights(instance.preview, formatting);
+            applyFormattingHighlights(instance.preview, formatting, (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.value);
             applyLinkHighlights(instance.preview, links);
         }
         setPlainTextValue((prev) => {
@@ -713,7 +837,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             return;
         }
         textareaNode.focus();
-        const fmtType = action === "toggleBold" ? "bold" : "italic";
+        const fmtType = action === "toggleBold" ? "bold" : action === "toggleCode" ? "code" : "italic";
         const start = (_a = textareaNode.selectionStart) !== null && _a !== void 0 ? _a : 0;
         const end = (_b = textareaNode.selectionEnd) !== null && _b !== void 0 ? _b : 0;
         // Check if selection is already formatted
@@ -736,7 +860,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         (_c = onChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onChangeRef, markdown);
         setPlainTextValue(markdownToPlainText(markdown));
         // Re-apply highlights
-        applyFormattingHighlights(instance.preview, formattingRef.current);
+        applyFormattingHighlights(instance.preview, formattingRef.current, textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.value);
         applyLinkHighlights(instance.preview, linksRef.current);
     }, [textareaNode]);
     const linkPopoverRef = useRef(null);
@@ -799,7 +923,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         requestAnimationFrame(() => textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.focus());
     }, [textareaNode]);
     const handleRemoveLink = useCallback(() => {
-        var _a;
+        var _a, _b;
         linksRef.current = linksRef.current.filter((l) => l !== cursorLink);
         setCursorLink(null);
         const instance = editorInstanceRef.current;
@@ -807,7 +931,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
             (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, markdown);
             // Re-apply highlights since links changed
-            applyFormattingHighlights(instance.preview, formattingRef.current);
+            applyFormattingHighlights(instance.preview, formattingRef.current, (_b = instance.textarea) === null || _b === void 0 ? void 0 : _b.value);
             applyLinkHighlights(instance.preview, linksRef.current);
         }
     }, [cursorLink]);
@@ -943,6 +1067,12 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                     handleToolbarAction("toggleItalic");
                     return;
                 }
+                if (event.key === "e" || event.key === "E") {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    handleToolbarAction("toggleCode");
+                    return;
+                }
             }
             if (enableAutocomplete && shouldShowAutocomplete) {
                 if (event.key === "ArrowDown") {
@@ -1038,7 +1168,10 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                                         }, "aria-label": "Bold", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 2.66675H8.33333C8.92064 2.66677 9.49502 2.83918 9.98525 3.1626C10.4755 3.48602 10.86 3.94622 11.0911 4.48613C11.3223 5.02604 11.3898 5.62192 11.2855 6.19988C11.1811 6.77783 10.9094 7.31244 10.504 7.73741C11.0752 8.06825 11.5213 8.57823 11.7733 9.18833C12.0252 9.79844 12.0689 10.4746 11.8976 11.1121C11.7263 11.7495 11.3495 12.3127 10.8256 12.7143C10.3018 13.1159 9.66008 13.3335 9 13.3334H4V12.0001H4.66667V4.00008H4V2.66675ZM6 7.33341H8.33333C8.77536 7.33341 9.19928 7.15782 9.51184 6.84526C9.8244 6.5327 10 6.10878 10 5.66675C10 5.22472 9.8244 4.8008 9.51184 4.48824C9.19928 4.17568 8.77536 4.00008 8.33333 4.00008H6V7.33341ZM6 8.66675V12.0001H9C9.44203 12.0001 9.86595 11.8245 10.1785 11.5119C10.4911 11.1994 10.6667 10.7754 10.6667 10.3334C10.6667 9.89139 10.4911 9.46746 10.1785 9.1549C9.86595 8.84234 9.44203 8.66675 9 8.66675H6Z", fill: "currentColor" }) }) }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Italic", onMouseDown: (event) => {
                                             event.preventDefault();
                                             handleToolbarAction("toggleItalic");
-                                        }, "aria-label": "Italic", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8.66699 13.3334H4.66699V12.0001H5.95166L8.69566 4.00008H7.33366V2.66675H11.3337V4.00008H10.049L7.30499 12.0001H8.66699V13.3334Z", fill: "currentColor" }) }) })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Insert image", onMouseDown: (event) => {
+                                        }, "aria-label": "Italic", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8.66699 13.3334H4.66699V12.0001H5.95166L8.69566 4.00008H7.33366V2.66675H11.3337V4.00008H10.049L7.30499 12.0001H8.66699V13.3334Z", fill: "currentColor" }) }) }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Code", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            handleToolbarAction("toggleCode");
+                                        }, "aria-label": "Code", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M10.333 12.6667L14 8.00008L10.333 3.33341L9.15833 4.28341L12.1583 8.00008L9.15833 11.7167L10.333 12.6667ZM5.66699 12.6667L6.84166 11.7167L3.84166 8.00008L6.84166 4.28341L5.66699 3.33341L2 8.00008L5.66699 12.6667Z", fill: "currentColor" }) }) })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Insert image", onMouseDown: (event) => {
                                     var _a;
                                     event.preventDefault();
                                     (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();

package/package/editor/customMarkdownConverter.js

@@ -80,7 +80,6 @@ function unescapeMarkdown(text) {
     return stripHtmlWrappers(text).replace(/\\([*_`~\[\]()<>\\])/g, "$1");
 }
 function applyTextStyles(text, styles) {
-    var _a;
     if (!styles) {
         return text;
     }
@@ -116,11 +115,22 @@ function applyTextStyles(text, styles) {
             suffix: "</span>",
         });
     }
-    for (const wrapper of wrappers) {
-        const suffix = (_a = wrapper.suffix) !== null && _a !== void 0 ? _a : wrapper.prefix;
-        result = `${wrapper.prefix}${result}${suffix}`;
-    }
-    return result;
+    // Split on newlines so that style markers wrap each line individually.
+    // This prevents <br/> (inserted by table cell formatting) from being
+    // trapped inside markers like **bold<br/>text**.
+    const segments = result.split("\n");
+    const wrapped = segments.map((segment) => {
+        var _a;
+        if (!segment)
+            return segment;
+        let s = segment;
+        for (const wrapper of wrappers) {
+            const suffix = (_a = wrapper.suffix) !== null && _a !== void 0 ? _a : wrapper.prefix;
+            s = `${wrapper.prefix}${s}${suffix}`;
+        }
+        return s;
+    });
+    return wrapped.join("\n");
 }
 function inlineToMarkdown(content) {
     if (!content || !Array.isArray(content)) {
@@ -269,7 +279,9 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return flattenWithBlankLine(lines, true);
         }
-        case "file": {
+        case "file":
+        case "video":
+        case "audio": {
             const url = block.props.url || "";
             const name = block.props.name || "";
             const caption = block.props.caption || "";
@@ -307,17 +319,17 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 }
                 return flattenWithBlankLine(lines, true);
             }
-            if (stepTitle.length > 0) {
-                const normalizedTitle = stepTitle
-                    .split(/\r?\n/)
-                    .map((segment) => segment.trim())
-                    .filter((segment) => segment.length > 0)
-                    .join(" ");
-                if (normalizedTitle.length > 0) {
-                    const listStyle = (_m = block.props.listStyle) !== null && _m !== void 0 ? _m : "bullet";
-                    const prefix = listStyle === "ordered" ? `${(stepIndex !== null && stepIndex !== void 0 ? stepIndex : 0) + 1}.` : "*";
-                    lines.push(`${prefix} ${normalizedTitle}`);
-                }
+            const normalizedTitle = stepTitle
+                .split(/\r?\n/)
+                .map((segment) => segment.trim())
+                .filter((segment) => segment.length > 0)
+                .join(" ");
+            const normalizedExpectedForCheck = stripExpectedPrefix(expectedResult).trim();
+            const hasContent = stepData.length > 0 || normalizedExpectedForCheck.length > 0;
+            if (normalizedTitle.length > 0 || hasContent) {
+                const listStyle = (_m = block.props.listStyle) !== null && _m !== void 0 ? _m : "bullet";
+                const prefix = listStyle === "ordered" ? `${(stepIndex !== null && stepIndex !== void 0 ? stepIndex : 0) + 1}.` : "*";
+                lines.push(normalizedTitle.length > 0 ? `${prefix} ${normalizedTitle}` : `${prefix} `);
             }
             if (stepData.length > 0) {
                 const dataLines = stepData.split(/\r?\n/);
@@ -411,7 +423,11 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 return cellTexts;
             };
             const formattedRows = rows.map(normalizeRow);
-            const formatCell = (value) => (value.length ? value : " ");
+            const formatCell = (value) => {
+                if (!value.length)
+                    return " ";
+                return value.replace(/\n/g, "<br/>");
+            };
             const toAlignmentToken = (alignment) => {
                 switch (alignment) {
                     case "center":
@@ -571,6 +587,12 @@ function parseInlineMarkdown(text) {
                 continue;
             }
         }
+        const brMatch = cleaned.slice(i).match(/^<br\s*\/?\s*>/i);
+        if (brMatch) {
+            buffer += "\n";
+            i += brMatch[0].length;
+            continue;
+        }
         buffer += cleaned[i];
         i += 1;
     }
@@ -594,7 +616,7 @@ function detectListType(trimmed) {
     if (/^\d+[.)]\s+/.test(trimmed)) {
         return "numbered";
     }
-    if (/^[-*+]\s+/.test(trimmed)) {
+    if (/^[-*+](\s+|$)/.test(trimmed)) {
         return "bullet";
     }
     return null;
@@ -683,7 +705,7 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         }
         else {
             const bulletMatch = trimmed.match(/^[-*+]\s+(.*)$/);
-            const text = (_d = bulletMatch === null || bulletMatch === void 0 ? void 0 : bulletMatch[1]) !== null && _d !== void 0 ? _d : trimmed.slice(2);
+            const text = (_d = bulletMatch === null || bulletMatch === void 0 ? void 0 : bulletMatch[1]) !== null && _d !== void 0 ? _d : (trimmed.length <= 1 ? "" : trimmed.slice(2));
             items.push({
                 type: "bulletListItem",
                 props: cloneBaseProps(),
@@ -709,7 +731,7 @@ function isLikelyStep(lines, index) {
         if (hasIndent)
             return true;
         // Stop at new list items, headings, or other block-level elements (only if not indented)
-        if (/^[-*+]\s/.test(trimmed) || /^\d+[.)]\s/.test(trimmed))
+        if (/^[-*+](\s|$)/.test(trimmed) || /^\d+[.)]\s/.test(trimmed))
             break;
         if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::"))
             break;
@@ -724,7 +746,7 @@ function isLikelyStep(lines, index) {
 function parseTestStep(lines, index, allowEmpty = false, snippetId) {
     const current = lines[index];
     const trimmed = current.trim();
-    const isBullet = trimmed.startsWith("* ") || trimmed.startsWith("- ");
+    const isBullet = trimmed.startsWith("* ") || trimmed.startsWith("- ") || trimmed === "*" || trimmed === "-";
     const isNumbered = /^\d+[.)]\s+/.test(trimmed);
     if (!isBullet && !isNumbered) {
         return null;
@@ -737,7 +759,7 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
     }
     let rawTitle;
     if (isBullet) {
-        rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+        rawTitle = unescapeMarkdown((trimmed.startsWith("* ") || trimmed.startsWith("- ")) ? trimmed.slice(2) : trimmed.slice(1)).trim();
     }
     else {
         // For numbered lists, remove the number and delimiter
@@ -781,7 +803,7 @@ function parseTestStep(lines, index, allowEmpty = false, snippetId) {
             continue;
         }
         const isNumberedStep = NUMBERED_STEP_REGEX.test(rawTrimmed);
-        const isNewStep = (!hasIndent && (rawTrimmed.startsWith("* ") || rawTrimmed.startsWith("- "))) ||
+        const isNewStep = (!hasIndent && (rawTrimmed.startsWith("* ") || rawTrimmed.startsWith("- ") || rawTrimmed === "*" || rawTrimmed === "-")) ||
             (!hasIndent && isNumberedStep);
         if (isNewStep) {
             break;

package/package/styles.css

@@ -1074,7 +1074,8 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview strong.step-preview-bold {
-  font-weight: bold !important;
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit !important;
   color: inherit !important;
 }
 
@@ -1083,6 +1084,12 @@ html.dark .bn-step-image-preview__content {
   color: inherit !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-preview code.step-preview-code {
+  background-color: rgba(135, 131, 120, 0.15) !important;
+  border-radius: 3px !important;
+  color: inherit !important;
+}
+
 .bn-step-custom-caret {
   display: none;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.34",
+  "version": "0.4.36",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",

package/src/App.tsx

@@ -22,7 +22,6 @@ import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import { setImageUploadHandler } from "./editor/stepImageUpload";
-import { canInsertStepOrSnippet } from "./editor/blocks/step";
 import "./App.css";
 
 const focusStepField = (
@@ -335,11 +334,7 @@ function CustomSlashMenu() {
       },
     };
 
-    const cursorBlock = editor.getTextCursorPosition()?.block;
-    const canInsert = cursorBlock ? canInsertStepOrSnippet(editor, cursorBlock.id) : false;
-    const customItems = canInsert ? [stepItem, snippetItem] : [];
-
-    return filterSuggestionItems([...defaultItems, ...customItems], query);
+    return filterSuggestionItems([...defaultItems, stepItem, snippetItem], query);
   };
 
   return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
@@ -489,7 +484,7 @@ function App() {
     const fallbackBlock = documentBlocks[documentBlocks.length - 1];
     const referenceId = selectedBlock?.id ?? fallbackBlock?.id;
 
-    if (!referenceId || !canInsertStepOrSnippet(editor, referenceId)) {
+    if (!referenceId) {
       return;
     }