testomatio-editor-blocks 0.4.34 → 0.4.35

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

@@ -269,7 +269,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 || "";
@@ -411,7 +413,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 +577,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;
     }

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.35",
   "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/stepField.tsx

@@ -80,7 +80,7 @@ type ExtractedImage = {
 };
 
 type LinkMeta = { start: number; end: number; url: string };
-type FormattingMeta = { start: number; end: number; type: "bold" | "italic" };
+type FormattingMeta = { start: number; end: number; type: "bold" | "italic" | "code" };
 
 
 function stripInlineMarkdown(markdown: string): {
@@ -207,6 +207,34 @@ function stripInlineMarkdown(markdown: string): {
       }
     }
 
+    // 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++;
   }
@@ -224,13 +252,23 @@ function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: For
   const markers: Marker[] = [];
 
   for (const fmt of formatting) {
-    const marker = fmt.type === "bold" ? "**" : "*";
+    let openMarker: string;
+    let closeMarker: string;
+    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) {
@@ -265,7 +303,16 @@ function adjustFormattingForEdit(formatting: FormattingMeta[], editPos: number,
     .filter((fmt) => fmt.end > fmt.start);
 }
 
-function getCaretRectInPreview(preview: HTMLElement, offset: number): { top: number; left: number; height: number } | null {
+function getCaretRectInPreview(preview: HTMLElement, offset: number, textareaValue?: string): { top: number; left: number; height: number } | null {
+  // 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;
 
@@ -273,8 +320,8 @@ function getCaretRectInPreview(preview: HTMLElement, offset: number): { top: num
     const textNode = walker.currentNode as Text;
     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);
@@ -297,7 +344,7 @@ function getCaretRectInPreview(preview: HTMLElement, offset: number): { top: num
   return null;
 }
 
-function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingMeta[]) {
+function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingMeta[], textareaValue?: string) {
   if (formatting.length === 0) return;
 
   // Remove previous formatting highlights
@@ -323,10 +370,41 @@ function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingM
       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: number): number {
+    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: Text | null = null;
@@ -339,13 +417,13 @@ function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingM
       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;
@@ -354,19 +432,58 @@ function applyFormattingHighlights(preview: HTMLElement, formatting: FormattingM
 
     if (!startNode || !endNode) continue;
 
-    try {
-      const range = document.createRange();
-      range.setStart(startNode, startLocalOffset);
-      range.setEnd(endNode, endLocalOffset);
+    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";
 
-      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);
-    } catch {
-      // DOM manipulation can fail if range crosses element boundaries
+    // 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
+      }
+    } 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: { node: Text; localStart: number; localEnd: number }[] = [];
+      const walker2 = document.createTreeWalker(preview, NodeFilter.SHOW_TEXT);
+      let collecting = false;
+      while (walker2.nextNode()) {
+        const tn = walker2.currentNode as Text;
+        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
+        }
+      }
     }
   }
 }
@@ -576,11 +693,11 @@ export function StepField({
     const originalUpdatePreview = instance.updatePreview.bind(instance);
     instance.updatePreview = function () {
       originalUpdatePreview();
-      applyFormattingHighlights(this.preview, formattingRef.current);
+      applyFormattingHighlights(this.preview, formattingRef.current, this.textarea?.value);
       applyLinkHighlights(this.preview, linksRef.current);
     };
     // Apply initial highlights
-    applyFormattingHighlights(instance.preview, formattingRef.current);
+    applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
     applyLinkHighlights(instance.preview, linksRef.current);
 
     // Create custom caret element inside the wrapper
@@ -633,7 +750,7 @@ export function StepField({
         return;
       }
 
-      const rect = getCaretRectInPreview(instance.preview, pos);
+      const rect = getCaretRectInPreview(instance.preview, pos, instance.textarea?.value);
       if (rect) {
         caret.style.display = "block";
         caret.style.top = `${rect.top}px`;
@@ -712,7 +829,7 @@ export function StepField({
       isSyncingRef.current = false;
     } else {
       // Even if text didn't change, formatting/links might have — re-apply highlights
-      applyFormattingHighlights(instance.preview, formatting);
+      applyFormattingHighlights(instance.preview, formatting, instance.textarea?.value);
       applyLinkHighlights(instance.preview, links);
     }
 
@@ -899,14 +1016,14 @@ export function StepField({
   }, [enableImageUpload, insertImageMarkdown, onImageFile, textareaNode, uploadImage]);
 
   const handleToolbarAction = useCallback(
-    (action: "toggleBold" | "toggleItalic") => {
+    (action: "toggleBold" | "toggleItalic" | "toggleCode") => {
       const instance = editorInstanceRef.current;
       if (!textareaNode || !instance) {
         return;
       }
       textareaNode.focus();
 
-      const fmtType: "bold" | "italic" = action === "toggleBold" ? "bold" : "italic";
+      const fmtType: "bold" | "italic" | "code" = action === "toggleBold" ? "bold" : action === "toggleCode" ? "code" : "italic";
       const start = textareaNode.selectionStart ?? 0;
       const end = textareaNode.selectionEnd ?? 0;
 
@@ -934,7 +1051,7 @@ export function StepField({
       setPlainTextValue(markdownToPlainText(markdown));
 
       // Re-apply highlights
-      applyFormattingHighlights(instance.preview, formattingRef.current);
+      applyFormattingHighlights(instance.preview, formattingRef.current, textareaNode?.value);
       applyLinkHighlights(instance.preview, linksRef.current);
     },
     [textareaNode],
@@ -1022,7 +1139,7 @@ export function StepField({
       const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
       onChangeRef.current?.(markdown);
       // Re-apply highlights since links changed
-      applyFormattingHighlights(instance.preview, formattingRef.current);
+      applyFormattingHighlights(instance.preview, formattingRef.current, instance.textarea?.value);
       applyLinkHighlights(instance.preview, linksRef.current);
     }
   }, [cursorLink]);
@@ -1187,6 +1304,12 @@ export function StepField({
           handleToolbarAction("toggleItalic");
           return;
         }
+        if (event.key === "e" || event.key === "E") {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          handleToolbarAction("toggleCode");
+          return;
+        }
       }
 
       if (enableAutocomplete && shouldShowAutocomplete) {
@@ -1394,6 +1517,21 @@ export function StepField({
                     <path d="M8.66699 13.3334H4.66699V12.0001H5.95166L8.69566 4.00008H7.33366V2.66675H11.3337V4.00008H10.049L7.30499 12.0001H8.66699V13.3334Z" fill="currentColor"/>
                   </svg>
                 </button>
+                <button
+                  type="button"
+                  className="bn-step-toolbar__button"
+                  data-tooltip="Code"
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    handleToolbarAction("toggleCode");
+                  }}
+                  aria-label="Code"
+                  tabIndex={-1}
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <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"/>
+                  </svg>
+                </button>
               </>
             )}
             {enableImageUpload && uploadImage && showImageButton && (

package/src/editor/customMarkdownConverter.test.ts

@@ -328,6 +328,60 @@ describe("blocksToMarkdown", () => {
     );
   });
 
+  it("serializes table cells containing newlines as <br/>", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "tbl2",
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Steps", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Expected Results", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "line1\nline2", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "ok", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ];
+
+    expect(blocksToMarkdown(blocks)).toBe(
+      [
+        "| Steps | Expected Results |",
+        "| --- | --- |",
+        "| line1<br/>line2 | ok |",
+      ].join("\n"),
+    );
+  });
+
   it("parses a test step with inline image in the title, moving the image to step data", () => {
     const markdown = [
       "## Steps",
@@ -1212,6 +1266,114 @@ describe("markdownToBlocks", () => {
     ]);
   });
 
+  it("parses <br/> in table cells back to newline", () => {
+    const markdown = [
+      "| A | B |",
+      "| --- | --- |",
+      "| line1<br/>line2 | ok |",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toEqual([
+      {
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "A", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "B", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "line1\nline2", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "ok", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips newlines in table cells", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "tbl3",
+        type: "table",
+        props: { textColor: "default" },
+        content: {
+          type: "tableContent",
+          columnWidths: [undefined, undefined],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Header", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "Info", styles: {} }],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "first\nsecond\nthird", styles: {} }],
+                },
+                {
+                  type: "tableCell",
+                  props: cellProps,
+                  content: [{ type: "text", text: "value", styles: {} }],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ];
+
+    const markdown = blocksToMarkdown(blocks);
+    expect(markdown).toContain("first<br/>second<br/>third");
+
+    const parsed = markdownToBlocks(markdown);
+    const row = (parsed[0] as any).content.rows[1];
+    const cellContent = row.cells[0].content;
+    expect(cellContent).toEqual([
+      { type: "text", text: "first\nsecond\nthird", styles: {} },
+    ]);
+  });
+
   it("parses expected result lines written with bold 'Expected Result' prefix for compatibility", () => {
     const markdown = [
       "* Step 1: Send a chat message to the user.",
@@ -1823,3 +1985,46 @@ describe("file block parsing", () => {
     expect(md).toBe(markdown);
   });
 });
+
+describe("video/audio block serialization", () => {
+  it("serializes a video block using the file format", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "video",
+        props: {
+          ...baseProps,
+          url: "https://example.com/video.mp4",
+          name: "recording.mp4",
+          caption: "/images/file-type-icons/mp4.svg",
+          showPreview: true,
+          previewWidth: 512,
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![recording.mp4](/images/file-type-icons/mp4.svg)](https://example.com/video.mp4)");
+  });
+
+  it("serializes an audio block using the file format", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "1",
+        type: "audio",
+        props: {
+          ...baseProps,
+          url: "https://example.com/sound.mp3",
+          name: "sound.mp3",
+          caption: "/images/file-type-icons/file.svg",
+          showPreview: true,
+        },
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    const md = blocksToMarkdown(blocks);
+    expect(md).toBe("[![sound.mp3](/images/file-type-icons/file.svg)](https://example.com/sound.mp3)");
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -347,7 +347,9 @@ function serializeBlock(
       }
       return flattenWithBlankLine(lines, true);
     }
-    case "file": {
+    case "file":
+    case "video":
+    case "audio": {
       const url = (block.props as any).url || "";
       const name = (block.props as any).name || "";
       const caption = (block.props as any).caption || "";
@@ -511,7 +513,10 @@ function serializeBlock(
       };
 
       const formattedRows = rows.map(normalizeRow);
-      const formatCell = (value: string) => (value.length ? value : " ");
+      const formatCell = (value: string) => {
+        if (!value.length) return " ";
+        return value.replace(/\n/g, "<br/>");
+      };
       const toAlignmentToken = (alignment: string) => {
         switch (alignment) {
           case "center":
@@ -694,6 +699,13 @@ function parseInlineMarkdown(text: string): EditorInline[] {
       }
     }
 
+    const brMatch = cleaned.slice(i).match(/^<br\s*\/?\s*>/i);
+    if (brMatch) {
+      buffer += "\n";
+      i += brMatch[0].length;
+      continue;
+    }
+
     buffer += cleaned[i];
     i += 1;
   }

package/src/editor/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;