testomatio-editor-blocks 0.4.46 → 0.4.48

package/package/editor/blocks/step.d.ts

@@ -22,7 +22,17 @@ export declare function canInsertStepOrSnippet(editor: {
  */
 export declare function addStepsBlock(editor: {
     document: any[];
-    insertBlocks: (blocks: any[], referenceId: string, placement: string) => any[];
+    insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
+}): string | null;
+/**
+ * Programmatically add an empty snippet block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty snippet at the end.
+ * Returns the inserted snippet's block ID (for focusing), or null.
+ */
+export declare function addSnippetBlock(editor: {
+    document: any[];
+    insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
 }): string | null;
 export declare const stepBlock: {
     config: {

package/package/editor/blocks/step.js

@@ -142,6 +142,62 @@ export function addStepsBlock(editor) {
     const inserted = editor.insertBlocks([stepsHeading, emptyStep], lastBlock.id, "after");
     return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
 }
+/**
+ * Programmatically add an empty snippet block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty snippet at the end.
+ * Returns the inserted snippet's block ID (for focusing), or null.
+ */
+export function addSnippetBlock(editor) {
+    var _a, _b, _c, _d;
+    const allBlocks = editor.document;
+    const emptySnippet = {
+        type: "snippet",
+        props: { snippetId: "", snippetTitle: "", snippetData: "", snippetExpectedResult: "" },
+        children: [],
+    };
+    let stepsHeadingIndex = -1;
+    for (let i = 0; i < allBlocks.length; i++) {
+        const b = allBlocks[i];
+        if (b.type !== "heading")
+            continue;
+        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(/[:\-–—]$/, "");
+        if (isStepsHeading(text)) {
+            stepsHeadingIndex = i;
+            break;
+        }
+    }
+    if (stepsHeadingIndex >= 0) {
+        let lastIndex = stepsHeadingIndex;
+        for (let i = stepsHeadingIndex + 1; i < allBlocks.length; i++) {
+            const b = allBlocks[i];
+            if (b.type === "testStep" || b.type === "snippet") {
+                lastIndex = i;
+                continue;
+            }
+            if (isEmptyParagraph(b))
+                continue;
+            break;
+        }
+        const inserted = editor.insertBlocks([emptySnippet], allBlocks[lastIndex].id, "after");
+        return (_b = (_a = inserted === null || inserted === void 0 ? void 0 : inserted[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    }
+    const lastBlock = allBlocks[allBlocks.length - 1];
+    const stepsHeading = {
+        type: "heading",
+        props: { level: 3 },
+        content: [{ type: "text", text: "Steps" }],
+        children: [],
+    };
+    const inserted = editor.insertBlocks([stepsHeading, emptySnippet], lastBlock.id, "after");
+    return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
+}
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",

package/package/editor/blocks/stepField.js

@@ -18,6 +18,17 @@ const markdownParser = OverType.MarkdownParser;
 function ImageUploadIcon() {
     return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12.667 2C13.0335 2.00008 13.3474 2.13057 13.6084 2.3916C13.8694 2.65264 13.9999 2.96648 14 3.33301V12.667C13.9999 13.0335 13.8694 13.3474 13.6084 13.6084C13.3474 13.8694 13.0335 13.9999 12.667 14H3.33301C2.96648 13.9999 2.65264 13.8694 2.3916 13.6084C2.13057 13.3474 2.00008 13.0335 2 12.667V3.33301C2.00008 2.96648 2.13057 2.65264 2.3916 2.3916C2.65264 2.13057 2.96648 2.00008 3.33301 2H12.667ZM3.33301 12.667H12.667V3.33301H3.33301V12.667ZM12 11.333H4L6 8.66699L7.5 10.667L9.5 8L12 11.333ZM5.66699 4.66699C5.94455 4.66707 6.18066 4.76375 6.375 4.95801C6.56944 5.15245 6.66699 5.38921 6.66699 5.66699C6.66692 5.94463 6.56937 6.18063 6.375 6.375C6.18063 6.56937 5.94463 6.66692 5.66699 6.66699C5.38921 6.66699 5.15245 6.56944 4.95801 6.375C4.76375 6.18066 4.66707 5.94455 4.66699 5.66699C4.66699 5.38921 4.76356 5.15245 4.95801 4.95801C5.15245 4.76356 5.38921 4.66699 5.66699 4.66699Z", fill: "currentColor" }) }));
 }
+function getActiveFormats(formatting, selStart, selEnd) {
+    const active = new Set();
+    if (selStart === selEnd)
+        return active;
+    for (const f of formatting) {
+        if (selStart < f.end && selEnd > f.start) {
+            active.add(f.type);
+        }
+    }
+    return active;
+}
 function stripInlineMarkdown(markdown) {
     const links = [];
     const formatting = [];
@@ -248,8 +259,6 @@ function getCaretRectInPreview(preview, offset, textareaValue) {
     return null;
 }
 function applyFormattingHighlights(preview, formatting, textareaValue) {
-    if (formatting.length === 0)
-        return;
     // Remove previous formatting highlights
     const existingBold = preview.querySelectorAll("strong.step-preview-bold");
     for (let i = 0; i < existingBold.length; i++) {
@@ -287,6 +296,8 @@ function applyFormattingHighlights(preview, formatting, textareaValue) {
     // After unwrapping formatting elements, merge adjacent/empty text nodes
     // so the tree walker sees clean text nodes matching the original structure.
     preview.normalize();
+    if (formatting.length === 0)
+        return;
     // 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.
@@ -500,10 +511,14 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     const linkSelectionRef = useRef(null);
     const linksRef = useRef([]);
     const formattingRef = useRef([]);
+    const formattingUndoRef = useRef([]);
+    const formattingRedoRef = useRef([]);
     const caretRef = useRef(null);
     const prevTextRef = useRef("");
     const isSyncingRef = useRef(false);
     const [cursorLink, setCursorLink] = useState(null);
+    const [activeFormats, setActiveFormats] = useState(new Set());
+    const [linkActive, setLinkActive] = useState(false);
     const Components = useComponentsContext();
     const resolvedPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : "";
     useEffect(() => {
@@ -523,6 +538,8 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         }
         linksRef.current = adjustLinksForEdit(linksRef.current, editPos, delta);
         formattingRef.current = adjustFormattingForEdit(formattingRef.current, editPos, delta);
+        formattingUndoRef.current = [];
+        formattingRedoRef.current = [];
         prevTextRef.current = nextValue;
         const markdown = buildFullMarkdown(nextValue, linksRef.current, formattingRef.current);
         setPlainTextValue((prev) => {
@@ -831,38 +848,95 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         };
     }, [enableImageUpload, insertImageMarkdown, onImageFile, textareaNode, uploadImage]);
     const handleToolbarAction = useCallback((action) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const instance = editorInstanceRef.current;
         if (!textareaNode || !instance) {
             return;
         }
         textareaNode.focus();
         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;
+        const rawStart = (_a = textareaNode.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const rawEnd = (_b = textareaNode.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        // Trim leading/trailing whitespace from the selection so that
+        // formatting markers wrap only the meaningful content.
+        const selectedText = textareaNode.value.slice(rawStart, rawEnd);
+        const leadingWs = (_d = (_c = selectedText.match(/^(\s*)/)) === null || _c === void 0 ? void 0 : _c[1].length) !== null && _d !== void 0 ? _d : 0;
+        const trailingWs = (_f = (_e = selectedText.match(/(\s*)$/)) === null || _e === void 0 ? void 0 : _e[1].length) !== null && _f !== void 0 ? _f : 0;
+        const start = rawStart + leadingWs;
+        const end = rawEnd - trailingWs;
+        // If selection is all whitespace, nothing to format
+        if (start >= end)
+            return;
         // Check if selection is already formatted
         const existingIdx = formattingRef.current.findIndex((f) => f.type === fmtType && f.start <= start && f.end >= end);
+        // Save current state for undo before modifying
+        formattingUndoRef.current = [
+            ...formattingUndoRef.current,
+            { formatting: [...formattingRef.current], links: [...linksRef.current] },
+        ];
+        formattingRedoRef.current = [];
         if (existingIdx !== -1) {
             // Remove formatting
             formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
         }
         else if (start !== end) {
+            // Remove overlapping formatting of other types before applying new format
+            formattingRef.current = formattingRef.current.filter((f) => f.type === fmtType || f.start >= end || f.end <= start);
             // Add formatting for selection
             formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
         }
         else {
             // No selection — nothing to format
+            formattingUndoRef.current = formattingUndoRef.current.slice(0, -1);
             return;
         }
         const currentValue = instance.getValue();
         prevTextRef.current = currentValue;
         const markdown = buildFullMarkdown(currentValue, linksRef.current, formattingRef.current);
-        (_c = onChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onChangeRef, markdown);
+        (_g = onChangeRef.current) === null || _g === void 0 ? void 0 : _g.call(onChangeRef, markdown);
         setPlainTextValue(markdownToPlainText(markdown));
         // Re-apply highlights
         applyFormattingHighlights(instance.preview, formattingRef.current, textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.value);
         applyLinkHighlights(instance.preview, linksRef.current);
     }, [textareaNode]);
+    const updateActiveFormats = useCallback(() => {
+        var _a, _b;
+        if (!textareaNode)
+            return;
+        const selStart = (_a = textareaNode.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const selEnd = (_b = textareaNode.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        const next = getActiveFormats(formattingRef.current, selStart, selEnd);
+        setActiveFormats((prev) => {
+            if (prev.size === next.size && [...prev].every((t) => next.has(t)))
+                return prev;
+            return next;
+        });
+        const hasLink = selStart !== selEnd && linksRef.current.some((l) => selStart < l.end && selEnd > l.start);
+        setLinkActive(hasLink);
+    }, [textareaNode]);
+    useEffect(() => {
+        if (!textareaNode)
+            return;
+        const onSelectionChange = () => {
+            if (document.activeElement === textareaNode) {
+                updateActiveFormats();
+            }
+        };
+        const onBlur = () => {
+            setActiveFormats(new Set());
+            setLinkActive(false);
+        };
+        document.addEventListener("selectionchange", onSelectionChange);
+        textareaNode.addEventListener("keyup", updateActiveFormats);
+        textareaNode.addEventListener("mouseup", updateActiveFormats);
+        textareaNode.addEventListener("blur", onBlur);
+        return () => {
+            document.removeEventListener("selectionchange", onSelectionChange);
+            textareaNode.removeEventListener("keyup", updateActiveFormats);
+            textareaNode.removeEventListener("mouseup", updateActiveFormats);
+            textareaNode.removeEventListener("blur", onBlur);
+        };
+    }, [textareaNode, updateActiveFormats]);
     const linkPopoverRef = useRef(null);
     // Close link popover on outside click
     useEffect(() => {
@@ -1044,7 +1118,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     const keydownHandlerRef = useRef(null);
     useEffect(() => {
         keydownHandlerRef.current = (event) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             if (readOnly) {
                 const openKeys = enableAutocomplete && (event.metaKey || event.ctrlKey) && AUTOCOMPLETE_TRIGGER_KEYS.has(event.code);
                 if (!READ_ONLY_ALLOWED_KEYS.has(event.key) && !openKeys) {
@@ -1073,6 +1147,54 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                     handleToolbarAction("toggleCode");
                     return;
                 }
+                if (event.key === "z" || event.key === "Z") {
+                    const undoStack = formattingUndoRef.current;
+                    if (undoStack.length > 0) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                        formattingRedoRef.current = [
+                            ...formattingRedoRef.current,
+                            { formatting: [...formattingRef.current], links: [...linksRef.current] },
+                        ];
+                        const prev = undoStack[undoStack.length - 1];
+                        formattingUndoRef.current = undoStack.slice(0, -1);
+                        formattingRef.current = prev.formatting;
+                        linksRef.current = prev.links;
+                        const instance = editorInstanceRef.current;
+                        if (instance) {
+                            const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
+                            (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, markdown);
+                            setPlainTextValue(markdownToPlainText(markdown));
+                            applyFormattingHighlights(instance.preview, formattingRef.current, (_c = instance.textarea) === null || _c === void 0 ? void 0 : _c.value);
+                            applyLinkHighlights(instance.preview, linksRef.current);
+                        }
+                        return;
+                    }
+                }
+            }
+            if (modKey && event.shiftKey && (event.key === "z" || event.key === "Z")) {
+                const redoStack = formattingRedoRef.current;
+                if (redoStack.length > 0) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    formattingUndoRef.current = [
+                        ...formattingUndoRef.current,
+                        { formatting: [...formattingRef.current], links: [...linksRef.current] },
+                    ];
+                    const next = redoStack[redoStack.length - 1];
+                    formattingRedoRef.current = redoStack.slice(0, -1);
+                    formattingRef.current = next.formatting;
+                    linksRef.current = next.links;
+                    const instance = editorInstanceRef.current;
+                    if (instance) {
+                        const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
+                        (_d = onChangeRef.current) === null || _d === void 0 ? void 0 : _d.call(onChangeRef, markdown);
+                        setPlainTextValue(markdownToPlainText(markdown));
+                        applyFormattingHighlights(instance.preview, formattingRef.current, (_e = instance.textarea) === null || _e === void 0 ? void 0 : _e.value);
+                        applyLinkHighlights(instance.preview, linksRef.current);
+                    }
+                    return;
+                }
             }
             if (enableAutocomplete && shouldShowAutocomplete) {
                 if (event.key === "ArrowDown") {
@@ -1087,7 +1209,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                 }
                 if (event.key === "Enter" || event.key === "Tab") {
                     event.preventDefault();
-                    const suggestion = (_b = filteredSuggestions[activeSuggestionIndex]) !== null && _b !== void 0 ? _b : filteredSuggestions[0];
+                    const suggestion = (_f = filteredSuggestions[activeSuggestionIndex]) !== null && _f !== void 0 ? _f : filteredSuggestions[0];
                     if (suggestion) {
                         applySuggestion(suggestion);
                     }
@@ -1162,20 +1284,20 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                                 }, tabIndex: -1, children: "Edit link" }), _jsx("a", { className: "bn-step-link-tooltip__btn", href: cursorLink.url, target: "_blank", rel: "noopener noreferrer", onMouseDown: (event) => event.stopPropagation(), tabIndex: -1, children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { d: "M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" }), _jsx("path", { d: "M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" })] }) }), _jsx("button", { type: "button", className: "bn-step-link-tooltip__btn bn-step-link-tooltip__btn--danger", onMouseDown: (event) => {
                                     event.preventDefault();
                                     handleRemoveLink();
-                                }, tabIndex: -1, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M7 3h2a1 1 0 0 0-2 0ZM6 3a2 2 0 1 1 4 0h4a.5.5 0 0 1 0 1h-.564l-1.205 8.838A2.5 2.5 0 0 1 9.754 15H6.246a2.5 2.5 0 0 1-2.477-2.162L2.564 4H2a.5.5 0 0 1 0-1h4Zm1 3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5ZM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z" }) }) })] })), showToolbar && (_jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} controls`, children: [showFormattingButtons && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Bold", onMouseDown: (event) => {
+                                }, tabIndex: -1, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M7 3h2a1 1 0 0 0-2 0ZM6 3a2 2 0 1 1 4 0h4a.5.5 0 0 1 0 1h-.564l-1.205 8.838A2.5 2.5 0 0 1 9.754 15H6.246a2.5 2.5 0 0 1-2.477-2.162L2.564 4H2a.5.5 0 0 1 0-1h4Zm1 3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5ZM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z" }) }) })] })), showToolbar && (_jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} controls`, children: [showFormattingButtons && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `bn-step-toolbar__button${activeFormats.has("bold") ? " bn-step-toolbar__button--active" : ""}`, "data-tooltip": "Bold", onMouseDown: (event) => {
                                             event.preventDefault();
                                             handleToolbarAction("toggleBold");
-                                        }, "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) => {
+                                        }, "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${activeFormats.has("italic") ? " bn-step-toolbar__button--active" : ""}`, "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" }) }) }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Code", 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${activeFormats.has("code") ? " bn-step-toolbar__button--active" : ""}`, "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();
-                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: _jsx(ImageUploadIcon, {}) })), showFormattingButtons && Components && (_jsxs(Components.Generic.Popover.Root, { opened: showLinkPopover, position: "top", children: [_jsx(Components.Generic.Popover.Trigger, { children: _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Insert link", onMouseDown: (event) => {
+                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: _jsx(ImageUploadIcon, {}) })), showFormattingButtons && Components && (_jsxs(Components.Generic.Popover.Root, { opened: showLinkPopover, position: "top", children: [_jsx(Components.Generic.Popover.Trigger, { children: _jsx("button", { type: "button", className: `bn-step-toolbar__button${linkActive ? " bn-step-toolbar__button--active" : ""}`, "data-tooltip": "Insert link", onMouseDown: (event) => {
                                                 event.preventDefault();
                                                 if (showLinkPopover) {
                                                     setShowLinkPopover(false);

package/package/editor/customMarkdownConverter.js

@@ -685,12 +685,9 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         if (detectedType !== listType) {
             break;
         }
-        // Only try to parse as testStep for top-level items (indentLevel === 0)
-        // Under a Steps heading (allowEmptySteps=true): always try for both bullet and numbered
-        // Outside Steps heading: only if the item looks like a test step (has Expected markers or indented data)
-        if (indentLevel === 0 && (allowEmptySteps || isLikelyStep(lines, index))) {
-            const looksLikeTestStep = listType === "bullet" ||
-                (listType === "numbered" && (allowEmptySteps || isLikelyStep(lines, index)));
+        // Only try to parse as testStep for top-level items under a Steps heading
+        if (indentLevel === 0 && allowEmptySteps) {
+            const looksLikeTestStep = listType === "bullet" || listType === "numbered";
             if (looksLikeTestStep) {
                 const nextStep = parseTestStep(lines, index, allowEmptySteps);
                 if (nextStep) {
@@ -736,32 +733,6 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
     }
     return { items, nextIndex: index };
 }
-function isLikelyStep(lines, index) {
-    // Look ahead to see if there's indented content or expected result
-    // Look ahead through subsequent lines for expected result markers or indented content
-    for (let i = index + 1; i < lines.length; i++) {
-        const line = lines[i];
-        const trimmed = line.trim();
-        // Stop at blank lines
-        if (!trimmed)
-            break;
-        // Check for indented content (step data) first — indented lines indicate a test step
-        const hasIndent = /^\s{2,}/.test(line);
-        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))
-            break;
-        if (trimmed.startsWith("#") || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("```") || trimmed.startsWith(":::"))
-            break;
-        // Check for expected result markers
-        if (EXPECTED_LABEL_REGEX.test(trimmed))
-            return true;
-        if (trimmed.match(/^\*[^*]*expected/i))
-            return true;
-    }
-    return false;
-}
 function parseTestStep(lines, index, allowEmpty = false, snippetId) {
     const current = lines[index];
     const trimmed = current.trim();
@@ -1225,14 +1196,16 @@ export function markdownToBlocks(markdown, options) {
             }
             continue;
         }
-        const snippetWrapper = parseSnippetWrapper(lines, index);
+        const snippetWrapper = stepsHeadingLevel !== null
+            ? parseSnippetWrapper(lines, index)
+            : null;
         if (snippetWrapper) {
             blocks.push(snippetWrapper.block);
             index = snippetWrapper.nextIndex;
             continue;
         }
-        const stepLikeBlock = (stepsHeadingLevel !== null || isLikelyStep(lines, index))
-            ? parseTestStep(lines, index, stepsHeadingLevel !== null)
+        const stepLikeBlock = stepsHeadingLevel !== null
+            ? parseTestStep(lines, index, true)
             : null;
         if (stepLikeBlock) {
             blocks.push(stepLikeBlock.block);

package/package/index.d.ts

@@ -1,5 +1,5 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, type MarkdownToBlocksOptions, } from "./editor/customMarkdownConverter";

package/package/index.js

@@ -1,5 +1,5 @@
 export { customSchema, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";

package/package/styles.css

@@ -942,6 +942,11 @@ html.dark .bn-step-image-preview__content {
   background: var(--step-bg-button-hover);
 }
 
+.bn-step-toolbar__button--active {
+  background: var(--step-bg-button-hover);
+  color: var(--step-input-border-focus);
+}
+
 [data-tooltip] {
   position: relative;
 }
@@ -1074,8 +1079,7 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview strong.step-preview-bold {
-  -webkit-text-stroke: 0.5px currentColor;
-  font-weight: inherit !important;
+  font-weight: 600 !important;
   color: inherit !important;
 }
 
@@ -1085,9 +1089,10 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview code.step-preview-code {
-  background-color: rgba(135, 131, 120, 0.15) !important;
+  background-color: transparent !important;
   border-radius: 3px !important;
-  color: inherit !important;
+  font-family: "Fira Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+  color: rgb(146, 64, 14) !important;
 }
 
 .bn-step-custom-caret {
@@ -1334,6 +1339,11 @@ html.dark .bn-step-image-preview__content {
   pointer-events: none;
 }
 
+.bn-suggestion-menu .mantine-Badge-label {
+  text-transform: none;
+  font-size: var(--badge-fz-sm);
+}
+
 .bn-suggestion-icon {
   display: inline-flex;
   align-items: center;

package/package.json

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

@@ -15,13 +15,14 @@ import {
   blocksToMarkdown,
   markdownToBlocks,
   type CustomEditorBlock,
-  type CustomPartialBlock,
+
 } from "./editor/customMarkdownConverter";
 import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 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, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 import "./App.css";
 
 const focusStepField = (
@@ -291,7 +292,18 @@ function CustomSlashMenu() {
   }
 
   const getItems = async (query: string) => {
-    const defaultItems = getDefaultReactSlashMenuItems(editor);
+    const isMac =
+      typeof navigator !== "undefined" &&
+      (/Mac/.test(navigator.platform) ||
+        (/AppleWebKit/.test(navigator.userAgent) &&
+          /Mobile\/\w+/.test(navigator.userAgent)));
+
+    const defaultItems = getDefaultReactSlashMenuItems(editor).map((item) => {
+      if (item.badge && isMac) {
+        return { ...item, badge: item.badge.replace("Alt", "Option") };
+      }
+      return item;
+    });
 
     const stepItem = {
       key: "test_step" as any,
@@ -334,7 +346,12 @@ function CustomSlashMenu() {
       },
     };
 
-    return filterSuggestionItems([...defaultItems, stepItem, snippetItem], query);
+    const currentBlock = editor.getTextCursorPosition().block;
+    const canInsert = canInsertStepOrSnippet(editor, currentBlock.id);
+    const items = canInsert
+      ? [...defaultItems, stepItem, snippetItem]
+      : defaultItems;
+    return filterSuggestionItems(items, query);
   };
 
   return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
@@ -451,52 +468,14 @@ function App() {
     };
   }, [editor, uploadStepImage]);
 
-  const createTestStepBlock = useMemo<() => CustomPartialBlock>(() => {
-    return () => ({
-      type: "testStep",
-      props: {
-        stepTitle: "",
-        stepData: "",
-        expectedResult: "",
-      },
-      children: [],
-    });
-  }, []);
-
-  const createSnippetBlock = useMemo<() => CustomPartialBlock>(() => {
-    return () => ({
-      type: "snippet",
-      props: {
-        snippetId: "",
-        snippetTitle: "",
-        snippetData: "",
-        snippetExpectedResult: "",
-      },
-      children: [],
-    });
-  }, []);
-
-  const insertBlockAfterSelection = (createBlock: () => CustomPartialBlock, focusFieldName?: string) => {
-    const selection = editor.getSelection();
-    const selectedBlocks = selection?.blocks ?? [];
-    const selectedBlock = selectedBlocks[selectedBlocks.length - 1];
-    const documentBlocks = editor.document;
-    const fallbackBlock = documentBlocks[documentBlocks.length - 1];
-    const referenceId = selectedBlock?.id ?? fallbackBlock?.id;
-
-    if (!referenceId) {
-      return;
-    }
-
-    const inserted = editor.insertBlocks([createBlock()], referenceId, "after");
-    const firstInserted = inserted[0];
-    if (firstInserted && focusFieldName) {
-      focusStepField(editor, firstInserted.id, focusFieldName);
-    }
+  const insertTestStep = () => {
+    const id = addStepsBlock(editor);
+    if (id) focusStepField(editor, id, "title");
+  };
+  const insertSnippet = () => {
+    const id = addSnippetBlock(editor);
+    if (id) focusStepField(editor, id, "snippet-title");
   };
-
-  const insertTestStep = () => insertBlockAfterSelection(createTestStepBlock, "title");
-  const insertSnippet = () => insertBlockAfterSelection(createSnippetBlock, "snippet-title");
 
   const handleCopyMarkdown = async () => {
     if (conversionError) {