testomatio-editor-blocks 0.2.3 → 0.3.0

package/package/editor/blocks/markdown.d.ts

@@ -3,3 +3,8 @@ export declare function markdownToHtml(markdown: string): string;
 export declare function escapeMarkdownText(text: string): string;
 export declare function normalizePlainText(text: string): string;
 export declare function htmlToMarkdown(html: string): string;
+declare function cleanupEscapedFormatting(markdown: string): string;
+export declare const __markdownStringUtils: {
+    cleanupEscapedFormatting: typeof cleanupEscapedFormatting;
+};
+export {};

package/package/editor/blocks/markdown.js

@@ -1,5 +1,6 @@
 const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+const INLINE_SEGMENT_REGEX = /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;
 export function escapeHtml(text) {
     return text
         .replace(/&/g, "&amp;")
@@ -16,11 +17,16 @@ function parseInlineMarkdown(text) {
         return [];
     }
     const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
-    const rawSegments = normalized
-        .split(/(\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/)
-        .filter(Boolean);
+    const rawSegments = normalized.split(INLINE_SEGMENT_REGEX).filter(Boolean);
     return rawSegments.map((segment) => {
         const baseStyles = { bold: false, italic: false, underline: false };
+        if (/^\*\*\*(.+)\*\*\*$/.test(segment) || /^___(.+)___$/.test(segment)) {
+            const content = segment.slice(3, -3);
+            return {
+                text: restoreEscapes(content),
+                styles: { bold: true, italic: true, underline: false },
+            };
+        }
         if (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
             const content = segment.slice(2, -2);
             return {
@@ -106,12 +112,13 @@ function fallbackHtmlToMarkdown(html) {
         .replace(/<\/span>/gi, "")
         .replace(/<u>(.*?)<\/u>/gis, (_m, content) => `<u>${content}</u>`);
     result = result.replace(/<\/?[^>]+>/g, "");
-    return result
+    const markdown = result
         .split("\n")
         .map((line) => line.trimEnd())
         .join("\n")
         .replace(/\n{3,}/g, "\n\n")
         .trim();
+    return cleanupEscapedFormatting(markdown);
 }
 export function htmlToMarkdown(html) {
     if (typeof document === "undefined") {
@@ -156,5 +163,23 @@ export function htmlToMarkdown(html) {
         }
     };
     const markdown = Array.from(temp.childNodes).map(traverse).join("");
-    return markdown.replace(/\n{3,}/g, "\n\n").trim();
+    return cleanupEscapedFormatting(markdown).replace(/\n{3,}/g, "\n\n").trim();
+}
+function cleanupEscapedFormatting(markdown) {
+    return markdown.replace(/(\\+)([*_]+)/g, (_match, slashes, markers) => {
+        if (markers.length === 0) {
+            return slashes + markers;
+        }
+        const shouldClean = markers.length === 3 ||
+            markers.length === 2 ||
+            markers.length === 1;
+        if (!shouldClean) {
+            return slashes + markers;
+        }
+        const hasPrintable = slashes.length % 2 === 0;
+        return hasPrintable ? markers : slashes + markers;
+    });
 }
+export const __markdownStringUtils = {
+    cleanupEscapedFormatting,
+};

package/package/editor/blocks/snippet.js

@@ -67,6 +67,6 @@ export const snippetBlock = createReactBlockSpec({
         if (!hasSnippets) {
             return (_jsx("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: _jsx("p", { className: "bn-snippet__empty", children: "No snippets in this project." }) }));
         }
-        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: [_jsx(StepField, { label: "Snippet Title", value: snippetTitle, placeholder: "Describe the reusable action", onChange: handleSnippetChange, autoFocus: snippetTitle.length === 0, enableAutocomplete: true, suggestionFilter: (suggestion) => suggestion.isSnippet === true, suggestionsOverride: snippetSuggestions, onSuggestionSelect: handleSnippetSelect, fieldName: "snippet-title", showSuggestionsOnFocus: true, enableImageUpload: false, onFieldFocus: handleFieldFocus }), _jsx(StepField, { label: "Snippet Data", value: snippetData, placeholder: "Add optional data or assets for the snippet", onChange: handleSnippetDataChange, multiline: true, fieldName: "snippet-data", enableImageUpload: true, onFieldFocus: handleFieldFocus })] }));
+        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: [_jsx(StepField, { label: "Snippet Title", value: snippetTitle, onChange: handleSnippetChange, autoFocus: snippetTitle.length === 0, enableAutocomplete: true, suggestionFilter: (suggestion) => suggestion.isSnippet === true, suggestionsOverride: snippetSuggestions, onSuggestionSelect: handleSnippetSelect, fieldName: "snippet-title", showSuggestionsOnFocus: true, enableImageUpload: false, onFieldFocus: handleFieldFocus }), _jsx(StepField, { label: "Snippet Data", value: snippetData, onChange: handleSnippetDataChange, multiline: true, fieldName: "snippet-data", enableImageUpload: true, onFieldFocus: handleFieldFocus })] }));
     },
 });

package/package/editor/blocks/step.js

@@ -88,7 +88,7 @@ export const stepBlock = createReactBlockSpec({
         const handleFieldFocus = useCallback(() => {
             editor.setSelection(block.id, block.id);
         }, [editor, block.id]);
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: "Step Title", value: stepTitle, placeholder: "Describe the action to perform", onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, rightAction: !isDataVisible ? (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })) : null, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: "Step Title", value: stepTitle, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, rightAction: !isDataVisible ? (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })) : null, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                         if (!uploadImage) {
                             return;
                         }
@@ -108,6 +108,6 @@ export const stepBlock = createReactBlockSpec({
                         catch (error) {
                             console.error("Failed to upload image to Step Data", error);
                         }
-                    } }), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), _jsx("button", { type: "button", className: "bn-step-add", onClick: handleInsertNextStep, children: "+ Step" })] }));
+                    } }), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, onChange: handleExpectedChange, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), _jsx("button", { type: "button", className: "bn-step-add", onClick: handleInsertNextStep, children: "+ Step" })] }));
     },
 });

package/package/editor/blocks/stepField.d.ts

@@ -1,11 +1,10 @@
+import type { ReactNode } from "react";
 import { type StepSuggestion } from "../stepAutocomplete";
 import { type SnippetSuggestion } from "../snippetAutocomplete";
-import type { ReactNode } from "react";
 type Suggestion = StepSuggestion | SnippetSuggestion;
 type StepFieldProps = {
     label: string;
     value: string;
-    placeholder: string;
     onChange: (nextValue: string) => void;
     autoFocus?: boolean;
     multiline?: boolean;
@@ -23,5 +22,5 @@ type StepFieldProps = {
     showImageButton?: boolean;
     onFieldFocus?: () => void;
 };
-export declare function StepField({ label, value, placeholder, onChange, autoFocus, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepField({ label, value, onChange, autoFocus, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package/editor/blocks/stepField.js

@@ -1,21 +1,239 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import OverType from "overtype";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 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, onFieldFocus, }) {
-    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);
+import { escapeMarkdownText, normalizePlainText } from "./markdown";
+const READ_ONLY_ALLOWED_KEYS = new Set([
+    "ArrowDown",
+    "ArrowUp",
+    "Enter",
+    "Tab",
+]);
+const AUTOCOMPLETE_TRIGGER_KEYS = new Set([" ", "Space"]);
+const markdownParser = OverType.MarkdownParser;
+function markdownToPlainText(markdown) {
+    var _a;
+    if (!markdown) {
+        return "";
+    }
+    try {
+        const html = (markdownParser === null || markdownParser === void 0 ? void 0 : markdownParser.parse) ? markdownParser.parse(markdown) : markdown;
+        if (typeof document === "undefined") {
+            return html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+        }
+        const temp = document.createElement("div");
+        temp.innerHTML = html;
+        return ((_a = temp.textContent) !== null && _a !== void 0 ? _a : "").replace(/\s+/g, " ").trim();
+    }
+    catch {
+        return markdown.replace(/!\[[^\]]*]\([^)]+\)/g, "").replace(/\[[^\]]*]\([^)]+\)/g, "").replace(/[*_`~]/g, "").replace(/\s+/g, " ").trim();
+    }
+}
+export function StepField({ label, value, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, onFieldFocus, }) {
     const stepSuggestions = useStepAutocomplete();
     const suggestions = suggestionsOverride !== null && suggestionsOverride !== void 0 ? suggestionsOverride : stepSuggestions;
     const uploadImage = useStepImageUpload();
     const fileInputRef = useRef(null);
+    const editorContainerRef = useRef(null);
+    const editorInstanceRef = useRef(null);
+    const [textareaNode, setTextareaNode] = useState(null);
+    const autoFocusRef = useRef(false);
+    const pendingFocusRef = useRef(false);
+    const initialValueRef = useRef(value);
+    const onChangeRef = useRef(onChange);
+    const [plainTextValue, setPlainTextValue] = useState(() => markdownToPlainText(value));
+    const [isFocused, setIsFocused] = useState(false);
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+    const [showAllSuggestions, setShowAllSuggestions] = useState(false);
     const [isUploading, setIsUploading] = useState(false);
-    const normalizedQuery = normalizePlainText(plainTextValue);
+    const [previewImageUrl, setPreviewImageUrl] = useState(null);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const handleEditorChange = useCallback((nextValue) => {
+        var _a;
+        setPlainTextValue((prev) => {
+            const normalized = markdownToPlainText(nextValue);
+            return prev === normalized ? prev : normalized;
+        });
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextValue);
+    }, []);
+    useEffect(() => {
+        const container = editorContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const [instance] = OverType.init(container, {
+            value: initialValueRef.current,
+            autoResize: multiline,
+            minHeight: multiline ? "4rem" : "2.5rem",
+            padding: "0.5rem 0.75rem",
+            fontSize: "0.95rem",
+            onChange: handleEditorChange,
+        });
+        editorInstanceRef.current = instance;
+        setTextareaNode(instance.textarea);
+        return () => {
+            instance.destroy();
+            editorInstanceRef.current = null;
+            setTextareaNode(null);
+        };
+    }, [handleEditorChange, multiline]);
+    useEffect(() => {
+        if (pendingFocusRef.current && textareaNode) {
+            pendingFocusRef.current = false;
+            textareaNode.focus();
+        }
+    }, [textareaNode]);
+    useEffect(() => {
+        const instance = editorInstanceRef.current;
+        if (!instance) {
+            setPlainTextValue((prev) => {
+                const normalized = markdownToPlainText(value);
+                return prev === normalized ? prev : normalized;
+            });
+            return;
+        }
+        if (instance.getValue() !== value) {
+            instance.setValue(value);
+        }
+        setPlainTextValue((prev) => {
+            const normalized = markdownToPlainText(value);
+            return prev === normalized ? prev : normalized;
+        });
+    }, [value]);
+    useEffect(() => {
+        if (!textareaNode) {
+            return;
+        }
+        if (fieldName) {
+            textareaNode.dataset.stepField = fieldName;
+        }
+        else {
+            delete textareaNode.dataset.stepField;
+        }
+    }, [fieldName, textareaNode]);
+    useEffect(() => {
+        if (!textareaNode) {
+            return;
+        }
+        textareaNode.readOnly = readOnly;
+    }, [readOnly, textareaNode]);
+    useEffect(() => {
+        if (!textareaNode) {
+            return;
+        }
+        const handleFocus = () => {
+            setIsFocused(true);
+            if (showSuggestionsOnFocus && enableAutocomplete) {
+                setShowAllSuggestions(true);
+            }
+            onFieldFocus === null || onFieldFocus === void 0 ? void 0 : onFieldFocus();
+        };
+        const handleBlur = () => {
+            setIsFocused(false);
+            setShowAllSuggestions(false);
+        };
+        textareaNode.addEventListener("focus", handleFocus);
+        textareaNode.addEventListener("blur", handleBlur);
+        return () => {
+            textareaNode.removeEventListener("focus", handleFocus);
+            textareaNode.removeEventListener("blur", handleBlur);
+        };
+    }, [enableAutocomplete, onFieldFocus, showSuggestionsOnFocus, textareaNode]);
+    useEffect(() => {
+        if (!autoFocus || autoFocusRef.current || !textareaNode) {
+            return;
+        }
+        autoFocusRef.current = true;
+        const focus = () => {
+            textareaNode.focus();
+            if (showSuggestionsOnFocus && enableAutocomplete) {
+                setShowAllSuggestions(true);
+            }
+        };
+        if (typeof requestAnimationFrame === "function") {
+            const frame = requestAnimationFrame(focus);
+            return () => cancelAnimationFrame(frame);
+        }
+        const timeout = setTimeout(focus, 0);
+        return () => clearTimeout(timeout);
+    }, [autoFocus, enableAutocomplete, showSuggestionsOnFocus, textareaNode]);
+    const insertImageMarkdown = useCallback((url) => {
+        var _a, _b, _c;
+        const instance = editorInstanceRef.current;
+        const textarea = textareaNode;
+        if (!instance || !textarea) {
+            return;
+        }
+        const currentValue = instance.getValue();
+        const start = (_a = textarea.selectionStart) !== null && _a !== void 0 ? _a : currentValue.length;
+        const end = (_b = textarea.selectionEnd) !== null && _b !== void 0 ? _b : currentValue.length;
+        const before = currentValue.slice(0, start);
+        const after = currentValue.slice(end);
+        const needsBeforeNewline = before.length > 0 && !before.endsWith("\n");
+        const needsAfterNewline = after.length > 0 && !after.startsWith("\n");
+        const insertText = `${needsBeforeNewline ? "\n" : ""}![](${url})${needsAfterNewline ? "\n" : ""}`;
+        const nextValue = `${before}${insertText}${after}`;
+        instance.setValue(nextValue);
+        setPlainTextValue(markdownToPlainText(nextValue));
+        (_c = onChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onChangeRef, nextValue);
+        requestAnimationFrame(() => {
+            textarea.selectionStart = start + insertText.length;
+            textarea.selectionEnd = start + insertText.length;
+            textarea.focus();
+        });
+    }, [textareaNode]);
+    useEffect(() => {
+        if (!textareaNode) {
+            return;
+        }
+        const handlePaste = async (event) => {
+            var _a, _b;
+            if (!onImageFile && !(enableImageUpload && uploadImage)) {
+                return;
+            }
+            const items = Array.from((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+            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) {
+                return;
+            }
+            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) {
+                        insertImageMarkdown(result.url);
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to upload pasted image", error);
+                }
+            }
+        };
+        const listener = (event) => {
+            void handlePaste(event);
+        };
+        textareaNode.addEventListener("paste", listener);
+        return () => {
+            textareaNode.removeEventListener("paste", listener);
+        };
+    }, [enableImageUpload, insertImageMarkdown, onImageFile, textareaNode, uploadImage]);
+    const handleToolbarAction = useCallback((action) => {
+        var _a;
+        const shortcuts = (_a = editorInstanceRef.current) === null || _a === void 0 ? void 0 : _a.shortcuts;
+        if (!textareaNode || !(shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.handleAction)) {
+            return;
+        }
+        textareaNode.focus();
+        shortcuts.handleAction(action);
+    }, [textareaNode]);
     const suggestionPool = useMemo(() => {
         if (!suggestionFilter) {
             return suggestions;
@@ -23,6 +241,12 @@ export function StepField({ label, value, placeholder, onChange, autoFocus, mult
         const filtered = suggestions.filter(suggestionFilter);
         return filtered.length > 0 ? filtered : suggestions;
     }, [suggestionFilter, suggestions]);
+    const normalizedQuery = normalizePlainText(plainTextValue);
+    useEffect(() => {
+        if (normalizedQuery.length > 0) {
+            setShowAllSuggestions(false);
+        }
+    }, [normalizedQuery]);
     const filteredSuggestions = useMemo(() => {
         if (!enableAutocomplete) {
             return [];
@@ -41,169 +265,164 @@ export function StepField({ label, value, placeholder, onChange, autoFocus, mult
     useEffect(() => {
         setActiveSuggestionIndex(0);
     }, [normalizedQuery, filteredSuggestions.length, showAllSuggestions]);
-    useEffect(() => {
-        if (normalizedQuery.length > 0) {
-            setShowAllSuggestions(false);
+    const extractedImages = useMemo(() => {
+        if (!value) {
+            return [];
         }
-    }, [normalizedQuery]);
-    useEffect(() => {
+        const regex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+        const results = [];
+        let match;
+        while ((match = regex.exec(value)) !== null) {
+            const [, alt = "", url = ""] = match;
+            results.push({
+                id: `${match.index}-${url}-${results.length}`,
+                url,
+                alt,
+                start: match.index,
+                end: match.index + match[0].length,
+                markdown: match[0],
+            });
+        }
+        return results;
+    }, [value]);
+    const handleRemoveImage = useCallback((image) => {
         var _a;
-        const element = editorRef.current;
-        if (!element || isFocused) {
-            return;
+        const before = value.slice(0, image.start);
+        const after = value.slice(image.end);
+        const nextValue = `${before}${after}`.replace(/\n{3,}/g, "\n\n");
+        if (editorInstanceRef.current) {
+            editorInstanceRef.current.setValue(nextValue);
         }
-        if (value.trim().length === 0) {
-            element.innerHTML = "";
-            setPlainTextValue("");
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextValue);
+        setPlainTextValue(markdownToPlainText(nextValue));
+        setPreviewImageUrl((prev) => (prev === image.url ? null : prev));
+    }, [value]);
+    const handleImageClick = useCallback((url) => {
+        setPreviewImageUrl(url);
+    }, []);
+    const focusAdjacentField = useCallback((direction) => {
+        if (!textareaNode || typeof document === "undefined") {
+            return false;
         }
-        else {
-            element.innerHTML = markdownToHtml(value);
-            setPlainTextValue((_a = element.textContent) !== null && _a !== void 0 ? _a : "");
+        const selector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [data-step-field]';
+        const focusable = Array.from(document.querySelectorAll(selector)).filter((element) => {
+            if (element.getAttribute("aria-hidden") === "true" || element.tabIndex === -1 || element.hasAttribute("disabled")) {
+                return false;
+            }
+            const isVisible = element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
+            return isVisible;
+        });
+        const currentIndex = focusable.findIndex((element) => element === textareaNode);
+        const target = currentIndex === -1 ? null : focusable[currentIndex + direction];
+        if (!target) {
+            return false;
         }
-    }, [value, isFocused]);
-    const syncValue = useCallback(() => {
+        target.focus();
+        return true;
+    }, [textareaNode]);
+    const applySuggestion = useCallback((suggestion) => {
         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 = "";
+        const escaped = escapeMarkdownText(suggestion.title);
+        const instance = editorInstanceRef.current;
+        if (instance) {
+            instance.setValue(escaped);
         }
-    }, [onChange, value]);
+        setPlainTextValue(suggestion.title);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, escaped);
+        onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
+        setActiveSuggestionIndex(0);
+        setShowAllSuggestions(false);
+        requestAnimationFrame(() => {
+            textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.focus();
+            if (textareaNode) {
+                textareaNode.selectionStart = escaped.length;
+                textareaNode.selectionEnd = escaped.length;
+            }
+        });
+    }, [onSuggestionSelect, textareaNode]);
+    const keydownHandlerRef = useRef(null);
     useEffect(() => {
-        if (!autoFocus || autoFocusRef.current || !editorRef.current) {
-            return;
-        }
-        autoFocusRef.current = true;
-        const element = editorRef.current;
-        const focusElement = () => {
+        keydownHandlerRef.current = (event) => {
             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 (readOnly) {
+                const openKeys = enableAutocomplete && (event.metaKey || event.ctrlKey) && AUTOCOMPLETE_TRIGGER_KEYS.has(event.code);
+                if (!READ_ONLY_ALLOWED_KEYS.has(event.key) && !openKeys) {
+                    event.preventDefault();
+                    return;
+                }
             }
-        };
-        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);
+            if (enableAutocomplete && shouldShowAutocomplete) {
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    setActiveSuggestionIndex((prev) => prev + 1 >= filteredSuggestions.length ? 0 : prev + 1);
                     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);
+                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 = (_a = filteredSuggestions[activeSuggestionIndex]) !== null && _a !== void 0 ? _a : filteredSuggestions[0];
+                    if (suggestion) {
+                        applySuggestion(suggestion);
                     }
                     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);
+            if (enableAutocomplete &&
+                (event.metaKey || event.ctrlKey) &&
+                (AUTOCOMPLETE_TRIGGER_KEYS.has(event.code) || AUTOCOMPLETE_TRIGGER_KEYS.has(event.key))) {
+                event.preventDefault();
+                setShowAllSuggestions(true);
+                return;
+            }
+            if (event.key === "Tab") {
+                const moved = focusAdjacentField(event.shiftKey ? -1 : 1);
+                if (moved) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
             }
+        };
+    }, [activeSuggestionIndex, applySuggestion, enableAutocomplete, filteredSuggestions, focusAdjacentField, readOnly, shouldShowAutocomplete]);
+    useEffect(() => {
+        if (!textareaNode) {
+            return;
         }
-    }, [onChange, onSuggestionSelect]);
+        const listener = (event) => {
+            var _a;
+            (_a = keydownHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(keydownHandlerRef, event);
+        };
+        const keydownOptions = { capture: true };
+        textareaNode.addEventListener("keydown", listener, keydownOptions);
+        return () => {
+            textareaNode.removeEventListener("keydown", listener, keydownOptions);
+        };
+    }, [textareaNode]);
+    const editorClassName = [
+        "bn-step-editor",
+        multiline ? "bn-step-editor--multiline" : "",
+        isFocused ? "bn-step-editor--focused" : "",
+        readOnly ? "bn-step-editor--readonly" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
     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();
+                                    textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.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();
+                                            handleToolbarAction("toggleBold");
                                         }, "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();
+                                            handleToolbarAction("toggleItalic");
                                         }, "aria-label": "Italic", tabIndex: -1, children: "I" })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    var _a;
                                     event.preventDefault();
-                                    const input = fileInputRef.current;
-                                    if (input) {
-                                        input.click();
-                                    }
+                                    (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.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];
@@ -214,17 +433,7 @@ export function StepField({ label, value, placeholder, onChange, autoFocus, mult
                         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();
-                            }
+                            insertImageMarkdown(response.url);
                         }
                     }
                     catch (error) {
@@ -234,84 +443,22 @@ export function StepField({ label, value, placeholder, onChange, autoFocus, mult
                         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);
-                    }
-                    onFieldFocus === null || onFieldFocus === void 0 ? void 0 : onFieldFocus();
-                    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");
+                } })), _jsx("div", { ref: editorContainerRef, className: editorClassName, "data-step-field": fieldName, tabIndex: -1, onFocus: (event) => {
+                    if (event.target === editorContainerRef.current) {
+                        if (textareaNode) {
+                            textareaNode.focus();
                         }
                         else {
-                            document.execCommand("insertLineBreak");
+                            pendingFocusRef.current = true;
                         }
-                        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
+                } }), extractedImages.length > 0 && (_jsx("div", { className: "bn-step-images", role: "list", children: extractedImages.map((image) => (_jsxs("div", { className: "bn-step-image-thumb", role: "listitem", children: [_jsx("button", { type: "button", className: "bn-step-image-thumb__button", onClick: () => handleImageClick(image.url), "aria-label": "Preview image", children: _jsx("img", { src: image.url, alt: image.alt || "Step image" }) }), _jsx("button", { type: "button", className: "bn-step-image-thumb__remove", onClick: (event) => {
+                                event.stopPropagation();
+                                handleRemoveImage(image);
+                            }, "aria-label": "Remove image", children: "\u00D7" })] }, image.id))) })), 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))) }))] }));
+                    }, 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))) })), previewImageUrl && (_jsx("div", { className: "bn-step-image-preview", role: "dialog", "aria-label": "Image preview", onClick: () => setPreviewImageUrl(null), children: _jsxs("div", { className: "bn-step-image-preview__content", role: "document", onClick: (event) => event.stopPropagation(), children: [_jsx("img", { src: previewImageUrl, alt: "Full size step" }), _jsx("button", { type: "button", className: "bn-step-image-preview__close", onClick: () => setPreviewImageUrl(null), "aria-label": "Close preview", children: "\u00D7" })] }) }))] }));
 }

package/package/styles.css

@@ -151,7 +151,7 @@
   border-color: rgba(16, 185, 129, 0.25);
 }
 
-.bn-snippet .bn-step-editor:focus-visible {
+.bn-snippet .bn-step-editor.bn-step-editor--focused {
   border-color: rgba(16, 185, 129, 0.7);
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
 }
@@ -275,35 +275,158 @@
 }
 
 .bn-step-editor {
+  position: relative;
   border-radius: 0.6rem;
   border: 1px solid rgba(37, 99, 235, 0.25);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.95rem;
   background: rgba(255, 255, 255, 0.92);
   transition:
     border-color 120ms ease,
     box-shadow 120ms ease;
   min-height: 2.5rem;
-  white-space: pre-wrap;
-  word-break: break-word;
+  font-size: 0.95rem;
+  overflow: hidden;
 }
 
-.bn-step-editor[data-multiline="true"] {
+.bn-step-editor--multiline {
   min-height: 4rem;
 }
 
-.bn-step-editor:focus-visible {
+.bn-step-editor.bn-step-editor--focused {
   outline: none;
   border-color: rgba(37, 99, 235, 0.7);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }
 
-.bn-step-editor:empty::before {
-  content: attr(data-placeholder);
-  color: rgba(15, 23, 42, 0.45);
+.bn-step-editor .overtype-container {
+  height: 100%;
+}
+
+.bn-step-editor .overtype-wrapper {
+  min-height: 100%;
+  background: transparent !important;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-input,
+.bn-step-editor .overtype-wrapper .overtype-preview {
+  padding: 0.5rem 0.75rem !important;
+  min-height: inherit !important;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-preview {
+  color: #0f172a !important;
+}
+
+.bn-step-editor .overtype-wrapper .overtype-preview img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.65rem;
+  margin: 0.5rem 0;
   pointer-events: none;
 }
 
+.bn-step-field:not(:focus-within) .overtype-wrapper .overtype-input::selection {
+  background-color: transparent !important;
+}
+
+.bn-step-field:focus-within .overtype-wrapper .overtype-input::selection {
+  background-color: rgba(244, 211, 94, 0.4) !important;
+}
+
+.bn-step-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.35rem;
+}
+
+.bn-step-image-thumb {
+  position: relative;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  overflow: hidden;
+  background: rgba(15, 23, 42, 0.05);
+}
+
+.bn-step-image-thumb__button {
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.bn-step-image-thumb__button img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.bn-step-image-thumb__remove {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.15rem;
+  border: none;
+  border-radius: 999px;
+  width: 1.35rem;
+  height: 1.35rem;
+  background: rgba(15, 23, 42, 0.75);
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.bn-step-image-thumb:hover .bn-step-image-thumb__remove,
+.bn-step-image-thumb__remove:focus-visible {
+  opacity: 1;
+}
+
+.bn-step-image-preview {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  z-index: 15;
+}
+
+.bn-step-image-preview__content {
+  position: relative;
+  max-width: min(90vw, 800px);
+  width: 100%;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.35);
+}
+
+.bn-step-image-preview__content img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 0.5rem;
+}
+
+.bn-step-image-preview__close {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  border: none;
+  background: rgba(15, 23, 42, 0.65);
+  color: white;
+  border-radius: 999px;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+  font-size: 1.1rem;
+}
+
 .bn-step-suggestions {
   position: absolute;
   left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "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/markdown.ts

@@ -139,12 +139,13 @@ function fallbackHtmlToMarkdown(html: string): string {
 
   result = result.replace(/<\/?[^>]+>/g, "");
 
-  return result
+  const markdown = result
     .split("\n")
     .map((line) => line.trimEnd())
     .join("\n")
     .replace(/\n{3,}/g, "\n\n")
     .trim();
+  return cleanupEscapedFormatting(markdown);
 }
 
 export function htmlToMarkdown(html: string): string {
@@ -195,5 +196,14 @@ export function htmlToMarkdown(html: string): string {
   };
 
   const markdown = Array.from(temp.childNodes).map(traverse).join("");
-  return markdown.replace(/\n{3,}/g, "\n\n").trim();
+  return cleanupEscapedFormatting(markdown).replace(/\n{3,}/g, "\n\n").trim();
+}
+
+function cleanupEscapedFormatting(markdown: string): string {
+  return markdown.replace(/\\([*_])([^]*?)\\\1/g, (match, marker, inner) => {
+    if (inner.includes("\\")) {
+      return match;
+    }
+    return `${marker}${inner}${marker}`;
+  });
 }

package/src/editor/customMarkdownConverter.test.ts

@@ -157,6 +157,21 @@ describe("blocksToMarkdown", () => {
     );
   });
 
+  it("cleans escaped formatting markers when toggling styles repeatedly", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "esc1",
+        type: "paragraph",
+        props: baseProps,
+        content: [{ type: "text", text: "text", styles: { bold: true, italic: true } }],
+        children: [],
+      },
+    ];
+
+    const markdown = blocksToMarkdown(blocks);
+    expect(markdown).toBe("***text***");
+  });
+
    it("keeps inline formatting inside step fields", () => {
      const blocks: CustomEditorBlock[] = [
        {