testomatio-editor-blocks 0.1.1 → 0.2.0

package/package/editor/blocks/stepField.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useStepAutocomplete } from "../stepAutocomplete";
+import { useStepImageUpload } from "../stepImageUpload";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { escapeHtml, escapeMarkdownText, htmlToMarkdown, markdownToHtml, normalizePlainText, } from "./markdown";
+export function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, }) {
+    const editorRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const autoFocusRef = useRef(false);
+    const [plainTextValue, setPlainTextValue] = useState("");
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+    const [showAllSuggestions, setShowAllSuggestions] = useState(false);
+    const stepSuggestions = useStepAutocomplete();
+    const suggestions = suggestionsOverride !== null && suggestionsOverride !== void 0 ? suggestionsOverride : stepSuggestions;
+    const uploadImage = useStepImageUpload();
+    const fileInputRef = useRef(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const normalizedQuery = normalizePlainText(plainTextValue);
+    const suggestionPool = useMemo(() => {
+        if (!suggestionFilter) {
+            return suggestions;
+        }
+        const filtered = suggestions.filter(suggestionFilter);
+        return filtered.length > 0 ? filtered : suggestions;
+    }, [suggestionFilter, suggestions]);
+    const filteredSuggestions = useMemo(() => {
+        if (!enableAutocomplete) {
+            return [];
+        }
+        const pool = showAllSuggestions || !normalizedQuery
+            ? suggestionPool
+            : suggestionPool.filter((item) => normalizePlainText(item.title).startsWith(normalizedQuery));
+        return pool.slice(0, 8);
+    }, [enableAutocomplete, normalizedQuery, showAllSuggestions, suggestionPool]);
+    const hasExactMatch = filteredSuggestions.some((item) => normalizePlainText(item.title) === normalizedQuery);
+    const shouldShowAutocomplete = enableAutocomplete &&
+        isFocused &&
+        filteredSuggestions.length > 0 &&
+        (!hasExactMatch || showAllSuggestions) &&
+        (showAllSuggestions || normalizedQuery.length >= 1);
+    useEffect(() => {
+        setActiveSuggestionIndex(0);
+    }, [normalizedQuery, filteredSuggestions.length, showAllSuggestions]);
+    useEffect(() => {
+        if (normalizedQuery.length > 0) {
+            setShowAllSuggestions(false);
+        }
+    }, [normalizedQuery]);
+    useEffect(() => {
+        var _a;
+        const element = editorRef.current;
+        if (!element || isFocused) {
+            return;
+        }
+        if (value.trim().length === 0) {
+            element.innerHTML = "";
+            setPlainTextValue("");
+        }
+        else {
+            element.innerHTML = markdownToHtml(value);
+            setPlainTextValue((_a = element.textContent) !== null && _a !== void 0 ? _a : "");
+        }
+    }, [value, isFocused]);
+    const syncValue = useCallback(() => {
+        var _a;
+        const element = editorRef.current;
+        if (!element) {
+            return;
+        }
+        const markdown = htmlToMarkdown(element.innerHTML);
+        if (markdown !== value) {
+            onChange(markdown);
+        }
+        setPlainTextValue((_a = element.innerText) !== null && _a !== void 0 ? _a : "");
+        if (!markdown && element.innerHTML !== "") {
+            element.innerHTML = "";
+        }
+    }, [onChange, value]);
+    useEffect(() => {
+        if (!autoFocus || autoFocusRef.current || !editorRef.current) {
+            return;
+        }
+        autoFocusRef.current = true;
+        const element = editorRef.current;
+        const focusElement = () => {
+            var _a;
+            element.focus();
+            setIsFocused(true);
+            if (showSuggestionsOnFocus && enableAutocomplete) {
+                setShowAllSuggestions(true);
+            }
+            const selection = typeof window !== "undefined" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : null;
+            if (selection) {
+                selection.selectAllChildren(element);
+                selection.collapseToEnd();
+            }
+        };
+        if (typeof requestAnimationFrame === "function") {
+            const frame = requestAnimationFrame(focusElement);
+            return () => cancelAnimationFrame(frame);
+        }
+        const timeout = setTimeout(focusElement, 0);
+        return () => clearTimeout(timeout);
+    }, [autoFocus, enableAutocomplete, showSuggestionsOnFocus]);
+    const ensureCaretInEditor = useCallback(() => {
+        var _a;
+        const element = editorRef.current;
+        if (!element) {
+            return false;
+        }
+        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
+        if (!selection) {
+            return false;
+        }
+        if (selection.rangeCount === 0 || !element.contains(selection.anchorNode)) {
+            const range = document.createRange();
+            range.selectNodeContents(element);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        element.focus();
+        return true;
+    }, []);
+    const handlePaste = useCallback(async (event) => {
+        var _a, _b, _c, _d, _e;
+        if ((enableImageUpload && uploadImage) || onImageFile) {
+            const items = Array.from((_a = event.clipboardData.items) !== null && _a !== void 0 ? _a : []);
+            const imageItem = items.find((item) => item.kind === "file" && item.type.startsWith("image/"));
+            const file = imageItem === null || imageItem === void 0 ? void 0 : imageItem.getAsFile();
+            if (file) {
+                event.preventDefault();
+                if (onImageFile) {
+                    await onImageFile(file);
+                    return;
+                }
+                if (enableImageUpload && uploadImage) {
+                    try {
+                        const result = await uploadImage(file);
+                        if (result === null || result === void 0 ? void 0 : result.url) {
+                            ensureCaretInEditor();
+                            const needsBreak = ((_c = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML) !== null && _c !== void 0 ? _c : "").trim().length > 0;
+                            const imgHtml = (needsBreak ? "<br />" : "") +
+                                `<img src="${escapeHtml(result.url)}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`;
+                            document.execCommand("insertHTML", false, imgHtml);
+                            syncValue();
+                        }
+                    }
+                    catch (error) {
+                        console.error("Failed to upload image from paste", error);
+                    }
+                    return;
+                }
+            }
+        }
+        event.preventDefault();
+        const text = (_e = (_d = event.clipboardData) === null || _d === void 0 ? void 0 : _d.getData("text/plain")) !== null && _e !== void 0 ? _e : "";
+        const html = markdownToHtml(text);
+        ensureCaretInEditor();
+        document.execCommand("insertHTML", false, html);
+        syncValue();
+    }, [enableImageUpload, ensureCaretInEditor, onImageFile, syncValue, uploadImage]);
+    const applySuggestion = useCallback((suggestion) => {
+        var _a;
+        const escaped = escapeMarkdownText(suggestion.title);
+        onChange(escaped);
+        onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
+        setPlainTextValue(suggestion.title);
+        setActiveSuggestionIndex(0);
+        setShowAllSuggestions(false);
+        if (editorRef.current) {
+            editorRef.current.innerHTML = markdownToHtml(escaped);
+            editorRef.current.focus();
+            const selection = typeof window !== "undefined" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : null;
+            if (selection && editorRef.current.firstChild) {
+                const range = document.createRange();
+                range.selectNodeContents(editorRef.current);
+                range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+    }, [onChange, onSuggestionSelect]);
+    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsxs("span", { className: "bn-step-field__label", children: [label, enableAutocomplete && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    var _a;
+                                    event.preventDefault();
+                                    setShowAllSuggestions(true);
+                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, "aria-label": "Show suggestions", tabIndex: -1, children: "\u2304" }))] }), _jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} controls`, children: [showFormattingButtons && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                            var _a;
+                                            event.preventDefault();
+                                            (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                            document.execCommand("bold");
+                                            syncValue();
+                                        }, "aria-label": "Bold", tabIndex: -1, children: "B" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                            var _a;
+                                            event.preventDefault();
+                                            (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                            document.execCommand("italic");
+                                            syncValue();
+                                        }, "aria-label": "Italic", tabIndex: -1, children: "I" })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    const input = fileInputRef.current;
+                                    if (input) {
+                                        input.click();
+                                    }
+                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: "Img" })), rightAction] })] }), enableImageUpload && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: async (event) => {
+                    var _a;
+                    const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                    if (!file || !uploadImage) {
+                        return;
+                    }
+                    try {
+                        setIsUploading(true);
+                        const response = await uploadImage(file);
+                        if (response === null || response === void 0 ? void 0 : response.url) {
+                            const element = editorRef.current;
+                            if (element) {
+                                const escapedUrl = escapeHtml(response.url);
+                                const needsBreak = element.innerHTML.trim().length > 0;
+                                const imgHtml = (needsBreak ? "<br />" : "") +
+                                    `<img src="${escapedUrl}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`;
+                                element.focus();
+                                ensureCaretInEditor();
+                                document.execCommand("insertHTML", false, imgHtml);
+                                syncValue();
+                            }
+                        }
+                    }
+                    catch (error) {
+                        console.error("Failed to upload image", error);
+                    }
+                    finally {
+                        setIsUploading(false);
+                        event.target.value = "";
+                    }
+                } })), _jsx("div", { ref: editorRef, className: "bn-step-editor", suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-multiline": multiline ? "true" : "false", "data-step-field": fieldName, contentEditable: readOnly ? "false" : "true", onFocus: () => {
+                    var _a, _b;
+                    setIsFocused(true);
+                    if (showSuggestionsOnFocus && enableAutocomplete) {
+                        setShowAllSuggestions(true);
+                    }
+                    setPlainTextValue((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : "");
+                }, onBlur: () => {
+                    setIsFocused(false);
+                    syncValue();
+                }, onInput: readOnly ? undefined : syncValue, onPaste: readOnly ? (event) => event.preventDefault() : handlePaste, onKeyDown: (event) => {
+                    var _a, _b;
+                    if (readOnly) {
+                        const allowedKeys = new Set([
+                            "ArrowDown",
+                            "ArrowUp",
+                            "Enter",
+                            "Tab",
+                        ]);
+                        const openKeys = enableAutocomplete && (event.metaKey || event.ctrlKey) && (event.code === "Space" || event.key === "" || event.key === " ");
+                        if (!allowedKeys.has(event.key) && !openKeys) {
+                            event.preventDefault();
+                            return;
+                        }
+                    }
+                    if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
+                        event.preventDefault();
+                        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
+                        const node = editorRef.current;
+                        if (selection && node) {
+                            const range = document.createRange();
+                            range.selectNodeContents(node);
+                            selection.removeAllRanges();
+                            selection.addRange(range);
+                        }
+                        return;
+                    }
+                    if (enableAutocomplete && shouldShowAutocomplete) {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            setActiveSuggestionIndex((prev) => prev + 1 >= filteredSuggestions.length ? 0 : prev + 1);
+                            return;
+                        }
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            setActiveSuggestionIndex((prev) => prev - 1 < 0 ? filteredSuggestions.length - 1 : prev - 1);
+                            return;
+                        }
+                        if (event.key === "Enter" || event.key === "Tab") {
+                            event.preventDefault();
+                            const suggestion = (_b = filteredSuggestions[activeSuggestionIndex]) !== null && _b !== void 0 ? _b : filteredSuggestions[0];
+                            if (suggestion) {
+                                applySuggestion(suggestion);
+                            }
+                            return;
+                        }
+                    }
+                    if (enableAutocomplete && (event.metaKey || event.ctrlKey) && (event.code === "Space" || event.key === "" || event.key === " ")) {
+                        event.preventDefault();
+                        setShowAllSuggestions(true);
+                        return;
+                    }
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (multiline && event.shiftKey) {
+                            document.execCommand("insertLineBreak");
+                            document.execCommand("insertLineBreak");
+                        }
+                        else {
+                            document.execCommand("insertLineBreak");
+                        }
+                        syncValue();
+                    }
+                } }), shouldShowAutocomplete && (_jsx("div", { className: "bn-step-suggestions", role: "listbox", "aria-label": `${label} suggestions`, children: filteredSuggestions.map((suggestion, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === activeSuggestionIndex, className: index === activeSuggestionIndex
+                        ? "bn-step-suggestion bn-step-suggestion--active"
+                        : "bn-step-suggestion", onMouseDown: (event) => {
+                        event.preventDefault();
+                        applySuggestion(suggestion);
+                    }, tabIndex: -1, children: [_jsx("span", { className: "bn-step-suggestion__title", children: suggestion.title }), typeof suggestion.usageCount === "number" && suggestion.usageCount > 0 && (_jsxs("span", { className: "bn-step-suggestion__meta", children: [suggestion.usageCount, " uses"] }))] }, suggestion.id))) }))] }));
+}

package/package/editor/customMarkdownConverter.js

@@ -20,13 +20,6 @@ const headingPrefixes = {
     5: "#####",
     6: "######",
 };
-const STEP_STATUSES = new Set(["draft", "ready", "blocked"]);
-function normalizeStatus(value) {
-    if (value && STEP_STATUSES.has(value)) {
-        return value;
-    }
-    return "draft";
-}
 const SPECIAL_CHAR_REGEX = /([*_`~\[\]()<>\\])/g;
 const HTML_SPAN_REGEX = /<\/?span[^>]*>/g;
 const HTML_UNDERLINE_REGEX = /<\/?u>/g;
@@ -163,7 +156,7 @@ function flattenWithBlankLine(lines, appendBlank = false) {
     return lines;
 }
 function serializeBlock(block, ctx, orderedIndex) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const lines = [];
     const indent = ctx.listDepth > 0 ? "  ".repeat(ctx.listDepth) : "";
     switch (block.type) {
@@ -229,25 +222,34 @@ function serializeBlock(block, ctx, orderedIndex) {
             lines.push(...serializeChildren(block, ctx));
             return lines;
         }
-        case "testCase": {
-            const status = (_e = block.props.status) !== null && _e !== void 0 ? _e : "draft";
-            const reference = block.props.reference;
-            const attrs = [`status="${status}"`];
-            if (reference) {
-                attrs.push(`reference="${escapeMarkdown(reference)}"`);
-            }
-            lines.push(`:::test-case ${attrs.join(" ")}`.trimEnd());
-            const body = inlineToMarkdown(block.content);
-            if (body.length > 0) {
-                lines.push(body);
+        case "testStep":
+        case "snippet": {
+            const isSnippet = block.type === "snippet";
+            const snippetId = isSnippet ? ((_e = block.props.snippetId) !== null && _e !== void 0 ? _e : "").trim() : "";
+            const stepTitle = isSnippet
+                ? ((_f = block.props.snippetTitle) !== null && _f !== void 0 ? _f : "").trim()
+                : ((_g = block.props.stepTitle) !== null && _g !== void 0 ? _g : "").trim();
+            const stepData = isSnippet
+                ? ((_h = block.props.snippetData) !== null && _h !== void 0 ? _h : "").trim()
+                : ((_j = block.props.stepData) !== null && _j !== void 0 ? _j : "").trim();
+            const expectedResult = isSnippet
+                ? ((_k = block.props.snippetExpectedResult) !== null && _k !== void 0 ? _k : "").trim()
+                : ((_l = block.props.expectedResult) !== null && _l !== void 0 ? _l : "").trim();
+            if (isSnippet) {
+                if (snippetId) {
+                    lines.push(`<!-- begin snippet #${snippetId} -->`);
+                }
+                const dataLines = stepData
+                    .split(/\r?\n/)
+                    .filter((line) => !/^<!--\s*(begin|end)\s+snippet/i.test(line.trim()));
+                if (dataLines.length > 0) {
+                    lines.push(...dataLines);
+                }
+                if (snippetId) {
+                    lines.push(`<!-- end snippet #${snippetId} -->`);
+                }
+                return flattenWithBlankLine(lines, true);
             }
-            lines.push(":::");
-            return flattenWithBlankLine(lines, true);
-        }
-        case "testStep": {
-            const stepTitle = ((_f = block.props.stepTitle) !== null && _f !== void 0 ? _f : "").trim();
-            const stepData = ((_g = block.props.stepData) !== null && _g !== void 0 ? _g : "").trim();
-            const expectedResult = ((_h = block.props.expectedResult) !== null && _h !== void 0 ? _h : "").trim();
             if (stepTitle.length > 0) {
                 const normalizedTitle = stepTitle
                     .split(/\r?\n/)
@@ -311,7 +313,7 @@ function serializeBlock(block, ctx, orderedIndex) {
                 return flattenWithBlankLine(lines, true);
             }
             const headerRowCount = rows.length
-                ? Math.min(rows.length, Math.max((_j = tableContent.headerRows) !== null && _j !== void 0 ? _j : 1, 1))
+                ? Math.min(rows.length, Math.max((_m = tableContent.headerRows) !== null && _m !== void 0 ? _m : 1, 1))
                 : 0;
             const columnAlignments = new Array(columnCount).fill("left");
             const getCellAlignment = (cell) => {
@@ -605,13 +607,19 @@ function parseList(lines, startIndex, listType, indentLevel) {
     }
     return { items, nextIndex: index };
 }
-function parseTestStep(lines, index) {
+function parseTestStep(lines, index, snippetId) {
     const current = lines[index];
     const trimmed = current.trim();
     if (!trimmed.startsWith("* ") && !trimmed.startsWith("- ")) {
         return null;
     }
-    const rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+    let rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+    let blockType = "testStep";
+    const snippetMatch = rawTitle.match(/^snippet\s*[:\-–—]?\s*(.*)$/i);
+    if (snippetMatch) {
+        blockType = "snippet";
+        rawTitle = snippetMatch[1].trim();
+    }
     const titleImages = [];
     const titleWithPlaceholders = rawTitle
         .replace(/!\[[^\]]*\]\(([^)]+)\)/g, (match) => {
@@ -620,7 +628,9 @@ function parseTestStep(lines, index) {
     })
         .replace(/\s{2,}/g, " ")
         .trim();
-    const isLikelyStep = /^step\b/i.test(titleWithPlaceholders) || titleImages.length > 0;
+    const isLikelyStep = blockType === "snippet" ||
+        /^step\b/i.test(titleWithPlaceholders) ||
+        titleImages.length > 0;
     const stepDataLines = [];
     let expectedResult = "";
     let next = index + 1;
@@ -693,50 +703,25 @@ function parseTestStep(lines, index) {
     const stepDataWithImages = [stepData, titleImages.join("\n")]
         .filter(Boolean)
         .join(stepData ? "\n" : "");
-    return {
-        block: {
-            type: "testStep",
-            props: {
-                stepTitle: titleWithPlaceholders,
-                stepData: stepDataWithImages,
-                expectedResult,
-            },
-            children: [],
-        },
-        nextIndex: next,
+    const blockProps = blockType === "snippet"
+        ? {
+            snippetId: snippetId !== null && snippetId !== void 0 ? snippetId : "",
+            snippetTitle: titleWithPlaceholders,
+            snippetData: stepDataWithImages,
+            snippetExpectedResult: expectedResult,
+        }
+        : {
+            stepTitle: titleWithPlaceholders,
+            stepData: stepDataWithImages,
+            expectedResult,
+        };
+    const parsedBlock = {
+        type: blockType,
+        props: blockProps,
+        children: [],
     };
-}
-function parseTestCase(lines, index) {
-    var _a;
-    const trimmed = lines[index].trim();
-    if (!trimmed.startsWith(":::test-case")) {
-        return null;
-    }
-    const statusMatch = trimmed.match(/status="([^"]*)"/);
-    const referenceMatch = trimmed.match(/reference="([^"]*)"/);
-    let bodyLines = [];
-    let next = index + 1;
-    while (next < lines.length && lines[next].trim() !== ":::") {
-        bodyLines.push(lines[next]);
-        next += 1;
-    }
-    if (next < lines.length && lines[next].trim() === ":::") {
-        next += 1;
-    }
-    const contentText = bodyLines.join("\n").trim();
     return {
-        block: {
-            type: "testCase",
-            props: {
-                ...cloneBaseProps(),
-                status: normalizeStatus(statusMatch === null || statusMatch === void 0 ? void 0 : statusMatch[1]),
-                reference: (_a = referenceMatch === null || referenceMatch === void 0 ? void 0 : referenceMatch[1]) !== null && _a !== void 0 ? _a : "",
-            },
-            content: contentText
-                ? [{ type: "text", text: unescapeMarkdown(contentText), styles: {} }]
-                : undefined,
-            children: [],
-        },
+        block: parsedBlock,
         nextIndex: next,
     };
 }
@@ -868,6 +853,52 @@ function parseParagraph(lines, index) {
         nextIndex: next,
     };
 }
+function parseSnippetWrapper(lines, index) {
+    const trimmed = lines[index].trim();
+    const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+    if (!startMatch) {
+        return null;
+    }
+    const snippetId = startMatch[1];
+    const innerLines = [];
+    let next = index + 1;
+    while (next < lines.length) {
+        const maybeEnd = lines[next].trim();
+        const endMatch = maybeEnd.match(/^<!--\s*end snippet\s*#?([^\s>]+)?\s*-->/i);
+        if (endMatch) {
+            const endId = endMatch[1];
+            if (!endId || endId === snippetId) {
+                next += 1;
+                break;
+            }
+            // Ignore unrelated snippet end markers but keep scanning.
+            next += 1;
+            continue;
+        }
+        const otherStart = maybeEnd.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+        if (otherStart) {
+            // Skip nested snippet wrappers from the body entirely.
+            next += 1;
+            continue;
+        }
+        innerLines.push(lines[next]);
+        next += 1;
+    }
+    const snippetBlock = {
+        type: "snippet",
+        props: {
+            snippetId,
+            snippetTitle: "",
+            snippetData: innerLines.join("\n").trim(),
+            snippetExpectedResult: "",
+        },
+        children: [],
+    };
+    return {
+        block: snippetBlock,
+        nextIndex: next,
+    };
+}
 export function markdownToBlocks(markdown) {
     const normalized = markdown.replace(/\r\n/g, "\n");
     const lines = normalized.split("\n");
@@ -879,16 +910,16 @@ export function markdownToBlocks(markdown) {
             index += 1;
             continue;
         }
-        const testCase = parseTestCase(lines, index);
-        if (testCase) {
-            blocks.push(testCase.block);
-            index = testCase.nextIndex;
+        const snippetWrapper = parseSnippetWrapper(lines, index);
+        if (snippetWrapper) {
+            blocks.push(snippetWrapper.block);
+            index = snippetWrapper.nextIndex;
             continue;
         }
-        const testStep = parseTestStep(lines, index);
-        if (testStep) {
-            blocks.push(testStep.block);
-            index = testStep.nextIndex;
+        const stepLikeBlock = parseTestStep(lines, index);
+        if (stepLikeBlock) {
+            blocks.push(stepLikeBlock.block);
+            index = stepLikeBlock.nextIndex;
             continue;
         }
         const table = parseTable(lines, index);