testomatio-editor-blocks 0.4.49 → 0.4.50

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

@@ -1,7 +1,7 @@
 /**
  * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
  * heading text looks like a "Steps" heading.
- * Accepted forms: steps, step, step(s).
+ * Accepted forms: steps, step, step(s), test steps, test step, test step(s).
  */
 export declare function isStepsHeading(text: string): boolean;
 export declare const isEmptyParagraph: (b: any) => boolean;

package/package/editor/blocks/step.js

@@ -47,10 +47,10 @@ const writeStepViewMode = (mode) => {
 /**
  * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
  * heading text looks like a "Steps" heading.
- * Accepted forms: steps, step, step(s).
+ * Accepted forms: steps, step, step(s), test steps, test step, test step(s).
  */
 export function isStepsHeading(text) {
-    return /^step(s|\(s\))?$/.test(text);
+    return /^(test\s+)?step(s|\(s\))?$/.test(text);
 }
 export const isEmptyParagraph = (b) => b.type === "paragraph" &&
     (!Array.isArray(b.content) ||
@@ -307,11 +307,6 @@ export const stepBlock = createReactBlockSpec({
                 },
             });
         }, [block.id, combinedStepValue, editor]);
-        useEffect(() => {
-            if (dataHasContent && !isDataVisible) {
-                setIsDataVisible(true);
-            }
-        }, [dataHasContent, isDataVisible]);
         const handleStepTitleChange = useCallback((next) => {
             if (next === stepTitle) {
                 return;
@@ -338,7 +333,8 @@ export const stepBlock = createReactBlockSpec({
         }, []);
         const handleHideData = useCallback(() => {
             setIsDataVisible(false);
-        }, []);
+            editor.updateBlock(block.id, { props: { stepData: "" } });
+        }, [editor, block.id]);
         const handleExpectedChange = useCallback((next) => {
             if (next === expectedResult) {
                 return;
@@ -402,19 +398,13 @@ export const stepBlock = createReactBlockSpec({
         const handleHideExpected = useCallback(() => {
             setIsExpectedVisible(false);
             writeExpectedCollapsedPreference(true);
-        }, []);
-        useEffect(() => {
-            if (expectedHasContent && !isExpectedVisible) {
-                setIsExpectedVisible(true);
-            }
-        }, [expectedHasContent, isExpectedVisible]);
-        const canToggleData = !dataHasContent;
-        const canToggleExpected = !expectedHasContent;
+            editor.updateBlock(block.id, { props: { expectedResult: "" } });
+        }, [editor, block.id]);
         const viewToggleButton = (_jsx("button", { type: "button", className: `bn-teststep__view-toggle${!effectiveVertical ? " bn-teststep__view-toggle--horizontal" : ""}${forceVertical ? " bn-teststep__view-toggle--disabled" : ""}`, "data-tooltip": forceVertical ? "Not enough space for horizontal view" : "Switch step view", "aria-label": forceVertical ? "Not enough space for horizontal view" : "Switch step view", onClick: forceVertical ? undefined : handleToggleView, "aria-disabled": forceVertical, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }));
         if (!effectiveVertical) {
             return (_jsx(StepHorizontalView, { ref: containerRef, blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: viewToggleButton }));
         }
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, ref: containerRef, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, ref: containerRef, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggleButton] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, multiline: true, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                                 if (!uploadImage) {
                                     return;
                                 }
@@ -434,6 +424,6 @@ export const stepBlock = createReactBlockSpec({
                                 catch (error) {
                                     console.error("Failed to upload image to Step Data", error);
                                 }
-                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: canToggleData ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide step data", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" })) : undefined, value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: canToggleExpected ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide expected result", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" })) : undefined, value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
+                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide step data", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" }), value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: _jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide expected result", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" }), value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
     },
 });

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

@@ -30,5 +30,16 @@ type StepFieldProps = {
     showImageButton?: boolean;
     onFieldFocus?: () => void;
 };
+export type LinkMeta = {
+    start: number;
+    end: number;
+    url: string;
+};
+export type FormattingMeta = {
+    start: number;
+    end: number;
+    type: "bold" | "italic" | "code";
+};
+export declare function buildFullMarkdown(plainText: string, links: LinkMeta[], formatting: FormattingMeta[]): string;
 export declare function StepField({ label, showLabel, labelToggle, labelAction, placeholder, value, onChange, autoFocus, focusSignal, 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

@@ -18,6 +18,7 @@ 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" }) }));
 }
+const UNDO_STACK_LIMIT = 100;
 function getActiveFormats(formatting, selStart, selEnd) {
     const active = new Set();
     if (selStart === selEnd)
@@ -170,7 +171,7 @@ function stripInlineMarkdown(markdown) {
     }
     return { plainText, links, formatting };
 }
-function buildFullMarkdown(plainText, links, formatting) {
+export function buildFullMarkdown(plainText, links, formatting) {
     if (links.length === 0 && formatting.length === 0)
         return plainText;
     const markers = [];
@@ -211,17 +212,24 @@ function buildFullMarkdown(plainText, links, formatting) {
 function adjustFormattingForEdit(formatting, editPos, delta) {
     return formatting
         .map((fmt) => {
-        if (editPos <= fmt.start) {
-            return { ...fmt, start: fmt.start + delta, end: fmt.end + delta };
-        }
-        if (editPos >= fmt.end) {
-            return fmt;
+        if (delta >= 0) {
+            if (editPos <= fmt.start) {
+                return { ...fmt, start: fmt.start + delta, end: fmt.end + delta };
+            }
+            if (editPos >= fmt.end) {
+                return fmt;
+            }
+            return { ...fmt, end: fmt.end + delta };
         }
-        return { ...fmt, end: fmt.end + delta };
+        const delEnd = editPos + Math.abs(delta);
+        const newStart = fmt.start < editPos ? fmt.start : fmt.start >= delEnd ? fmt.start + delta : editPos;
+        const newEnd = fmt.end <= editPos ? fmt.end : fmt.end >= delEnd ? fmt.end + delta : editPos;
+        return { ...fmt, start: newStart, end: newEnd };
     })
         .filter((fmt) => fmt.end > fmt.start);
 }
 function getCaretRectInPreview(preview, offset, textareaValue) {
+    var _a;
     // Convert textarea-space offset to preview-space (strip newlines)
     let nlCount = 0;
     if (textareaValue) {
@@ -242,7 +250,16 @@ function getCaretRectInPreview(preview, offset, textareaValue) {
                 const range = document.createRange();
                 range.setStart(textNode, localOffset);
                 range.collapse(true);
-                const rect = range.getBoundingClientRect();
+                let rect = range.getBoundingClientRect();
+                // Collapsed ranges at position 0 can return an empty rect in some browsers
+                if (rect.height === 0 && rect.top === 0 && rect.left === 0) {
+                    const span = document.createElement("span");
+                    span.textContent = "\u200B";
+                    range.insertNode(span);
+                    rect = span.getBoundingClientRect();
+                    (_a = span.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(span);
+                    preview.normalize();
+                }
                 const previewRect = preview.getBoundingClientRect();
                 return {
                     top: rect.top - previewRect.top + preview.scrollTop,
@@ -403,13 +420,19 @@ function applyFormattingHighlights(preview, formatting, textareaValue) {
 function adjustLinksForEdit(links, editPos, delta) {
     return links
         .map((link) => {
-        if (editPos <= link.start) {
-            return { ...link, start: link.start + delta, end: link.end + delta };
-        }
-        if (editPos >= link.end) {
-            return link;
+        if (delta >= 0) {
+            if (editPos <= link.start) {
+                return { ...link, start: link.start + delta, end: link.end + delta };
+            }
+            if (editPos >= link.end) {
+                return link;
+            }
+            return { ...link, end: link.end + delta };
         }
-        return { ...link, end: link.end + delta };
+        const delEnd = editPos + Math.abs(delta);
+        const newStart = link.start < editPos ? link.start : link.start >= delEnd ? link.start + delta : editPos;
+        const newEnd = link.end <= editPos ? link.end : link.end >= delEnd ? link.end + delta : editPos;
+        return { ...link, start: newStart, end: newEnd };
     })
         .filter((link) => link.end > link.start);
 }
@@ -511,8 +534,8 @@ 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 undoStackRef = useRef([]);
+    const redoStackRef = useRef([]);
     const caretRef = useRef(null);
     const prevTextRef = useRef("");
     const isSyncingRef = useRef(false);
@@ -524,10 +547,26 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const pushUndoSnapshot = useCallback((text, formatting, links, cursorStart, cursorEnd) => {
+        const lastSnapshot = undoStackRef.current[undoStackRef.current.length - 1];
+        if (lastSnapshot &&
+            lastSnapshot.text === text &&
+            JSON.stringify(lastSnapshot.formatting) === JSON.stringify(formatting) &&
+            JSON.stringify(lastSnapshot.links) === JSON.stringify(links)) {
+            return;
+        }
+        undoStackRef.current = [
+            ...undoStackRef.current.slice(-(UNDO_STACK_LIMIT - 1)),
+            { text, formatting: [...formatting], links: [...links], cursorStart, cursorEnd },
+        ];
+        redoStackRef.current = [];
+    }, []);
     const handleEditorChange = useCallback((nextValue) => {
         var _a;
         if (isSyncingRef.current)
             return;
+        if (nextValue === prevTextRef.current)
+            return;
         const prevText = prevTextRef.current;
         const delta = nextValue.length - prevText.length;
         // Find where the edit happened by comparing old and new text
@@ -536,10 +575,13 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         while (editPos < minLen && prevText[editPos] === nextValue[editPos]) {
             editPos++;
         }
+        // Capture pre-edit state for undo BEFORE mutating
+        const prevFormatting = [...formattingRef.current];
+        const prevLinks = [...linksRef.current];
         linksRef.current = adjustLinksForEdit(linksRef.current, editPos, delta);
         formattingRef.current = adjustFormattingForEdit(formattingRef.current, editPos, delta);
-        formattingUndoRef.current = [];
-        formattingRedoRef.current = [];
+        // Push pre-edit state to undo stack
+        pushUndoSnapshot(prevText, prevFormatting, prevLinks, editPos, editPos);
         prevTextRef.current = nextValue;
         const markdown = buildFullMarkdown(nextValue, linksRef.current, formattingRef.current);
         setPlainTextValue((prev) => {
@@ -547,9 +589,8 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             return prev === normalized ? prev : normalized;
         });
         (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, markdown);
-    }, []);
+    }, [pushUndoSnapshot]);
     useEffect(() => {
-        var _a;
         const container = editorContainerRef.current;
         if (!container) {
             return;
@@ -558,6 +599,11 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         linksRef.current = links;
         formattingRef.current = formatting;
         prevTextRef.current = plainText;
+        // Push initial state as the baseline undo snapshot
+        undoStackRef.current = [
+            { text: plainText, formatting: [...formatting], links: [...links], cursorStart: 0, cursorEnd: 0 },
+        ];
+        redoStackRef.current = [];
         const [instance] = OverType.init(container, {
             value: plainText,
             placeholder: resolvedPlaceholder,
@@ -575,9 +621,25 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             applyFormattingHighlights(this.preview, formattingRef.current, (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.value);
             applyLinkHighlights(this.preview, linksRef.current);
         };
-        // Apply initial highlights
-        applyFormattingHighlights(instance.preview, formattingRef.current, (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.value);
-        applyLinkHighlights(instance.preview, linksRef.current);
+        // Force a full update through the monkey-patched pipeline
+        instance.updatePreview();
+        // Safety net: re-apply formatting if the preview gets reset externally
+        // (e.g. by the original updatePreview being called outside our monkey-patch)
+        let isApplyingFormatting = false;
+        const formattingObserver = new MutationObserver(() => {
+            var _a;
+            if (isApplyingFormatting)
+                return;
+            const hasFormatting = formattingRef.current.length > 0;
+            const hasAnyFormattingElement = instance.preview.querySelector("strong.step-preview-bold, em.step-preview-italic, code.step-preview-code") !== null;
+            if (hasFormatting && !hasAnyFormattingElement) {
+                isApplyingFormatting = true;
+                applyFormattingHighlights(instance.preview, formattingRef.current, (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.value);
+                applyLinkHighlights(instance.preview, linksRef.current);
+                isApplyingFormatting = false;
+            }
+        });
+        formattingObserver.observe(instance.preview, { childList: true, subtree: true });
         // Create custom caret element inside the wrapper
         const caretEl = document.createElement("div");
         caretEl.className = "bn-step-custom-caret";
@@ -586,6 +648,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         editorInstanceRef.current = instance;
         setTextareaNode(instance.textarea);
         return () => {
+            formattingObserver.disconnect();
             caretRef.current = null;
             instance.destroy();
             editorInstanceRef.current = null;
@@ -709,6 +772,21 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             delete textareaNode.dataset.stepField;
         }
     }, [fieldName, textareaNode]);
+    // Block native undo/redo at the beforeinput level so the browser never
+    // applies its own history on the textarea — our custom stack handles it.
+    useEffect(() => {
+        if (!textareaNode)
+            return;
+        const blockNativeUndoRedo = (e) => {
+            if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+                e.preventDefault();
+            }
+        };
+        textareaNode.addEventListener("beforeinput", blockNativeUndoRedo);
+        return () => {
+            textareaNode.removeEventListener("beforeinput", blockNativeUndoRedo);
+        };
+    }, [textareaNode]);
     useEffect(() => {
         if (!textareaNode) {
             return;
@@ -735,6 +813,16 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         const handleBlur = () => {
             setIsFocused(false);
             setShowAllSuggestions(false);
+            // Re-apply formatting highlights after blur because OverType may
+            // re-render the preview (via debounced selectionchange) and strip them.
+            const instance = editorInstanceRef.current;
+            if (instance) {
+                requestAnimationFrame(() => {
+                    var _a;
+                    applyFormattingHighlights(instance.preview, formattingRef.current, (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.value);
+                    applyLinkHighlights(instance.preview, linksRef.current);
+                });
+            }
         };
         textareaNode.addEventListener("focus", handleFocus);
         textareaNode.addEventListener("blur", handleBlur);
@@ -870,24 +958,22 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         // 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 = [];
+        const currentText = instance.getValue();
+        pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, start, end);
         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);
+            // Remove overlapping formatting:
+            // - Code: remove ALL overlapping formatting (code replaces bold/italic)
+            // - Bold/Italic: remove only overlapping formatting of the SAME type
+            formattingRef.current = formattingRef.current.filter((f) => f.start >= end || f.end <= start || (fmtType !== "code" && f.type !== fmtType));
             // 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();
@@ -898,7 +984,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         // Re-apply highlights
         applyFormattingHighlights(instance.preview, formattingRef.current, textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.value);
         applyLinkHighlights(instance.preview, linksRef.current);
-    }, [textareaNode]);
+    }, [textareaNode, pushUndoSnapshot]);
     const updateActiveFormats = useCallback(() => {
         var _a, _b;
         if (!textareaNode)
@@ -973,6 +1059,8 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             return;
         }
         const currentValue = instance.getValue();
+        // Push undo snapshot before link edit
+        pushUndoSnapshot(currentValue, formattingRef.current, linksRef.current, sel.start, sel.end);
         const linkText = text || sel.text || url;
         // Replace selected text with link display text (no markdown syntax in textarea)
         const before = currentValue.slice(0, sel.start);
@@ -995,20 +1083,26 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         linkSelectionRef.current = null;
         setCursorLink(null);
         requestAnimationFrame(() => textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.focus());
-    }, [textareaNode]);
+    }, [textareaNode, pushUndoSnapshot]);
     const handleRemoveLink = useCallback(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
+        const instance = editorInstanceRef.current;
+        // Push undo snapshot before link removal
+        if (instance) {
+            const currentText = instance.getValue();
+            const cursorPos = (_b = (_a = instance.textarea) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
+            pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, cursorPos, cursorPos);
+        }
         linksRef.current = linksRef.current.filter((l) => l !== cursorLink);
         setCursorLink(null);
-        const instance = editorInstanceRef.current;
         if (instance) {
             const markdown = buildFullMarkdown(instance.getValue(), linksRef.current, formattingRef.current);
-            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, markdown);
+            (_c = onChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onChangeRef, markdown);
             // Re-apply highlights since links changed
-            applyFormattingHighlights(instance.preview, formattingRef.current, (_b = instance.textarea) === null || _b === void 0 ? void 0 : _b.value);
+            applyFormattingHighlights(instance.preview, formattingRef.current, (_d = instance.textarea) === null || _d === void 0 ? void 0 : _d.value);
             applyLinkHighlights(instance.preview, linksRef.current);
         }
-    }, [cursorLink]);
+    }, [cursorLink, pushUndoSnapshot]);
     const suggestionPool = useMemo(() => {
         if (!suggestionFilter) {
             return suggestions;
@@ -1062,6 +1156,11 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
     }, [value]);
     const handleRemoveImage = useCallback((image) => {
         var _a;
+        // Push undo snapshot before image removal
+        if (editorInstanceRef.current) {
+            const currentText = editorInstanceRef.current.getValue();
+            pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, image.start, image.end);
+        }
         const before = value.slice(0, image.start);
         const after = value.slice(image.end);
         const nextValue = `${before}${after}`.replace(/\n{3,}/g, "\n\n");
@@ -1071,7 +1170,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextValue);
         setPlainTextValue(markdownToPlainText(nextValue));
         setPreviewImageUrl((prev) => (prev === image.url ? null : prev));
-    }, [value]);
+    }, [value, pushUndoSnapshot]);
     const handleImageClick = useCallback((url) => {
         setPreviewImageUrl(url);
     }, []);
@@ -1096,14 +1195,18 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         return true;
     }, [textareaNode]);
     const applySuggestion = useCallback((suggestion) => {
-        var _a;
+        var _a, _b;
         const escaped = escapeMarkdownText(suggestion.title);
         const instance = editorInstanceRef.current;
         if (instance) {
+            // Push undo snapshot before applying suggestion
+            const currentText = instance.getValue();
+            const cursorPos = (_a = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            pushUndoSnapshot(currentText, formattingRef.current, linksRef.current, cursorPos, cursorPos);
             instance.setValue(escaped);
         }
         setPlainTextValue(suggestion.title);
-        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, escaped);
+        (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, escaped);
         onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
         setActiveSuggestionIndex(0);
         setShowAllSuggestions(false);
@@ -1114,11 +1217,11 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                 textareaNode.selectionEnd = escaped.length;
             }
         });
-    }, [onSuggestionSelect, textareaNode]);
+    }, [onSuggestionSelect, textareaNode, pushUndoSnapshot]);
     const keydownHandlerRef = useRef(null);
     useEffect(() => {
         keydownHandlerRef.current = (event) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (readOnly) {
                 const openKeys = enableAutocomplete && (event.metaKey || event.ctrlKey) && AUTOCOMPLETE_TRIGGER_KEYS.has(event.code);
                 if (!READ_ONLY_ALLOWED_KEYS.has(event.key) && !openKeys) {
@@ -1147,54 +1250,94 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                     handleToolbarAction("toggleCode");
                     return;
                 }
+                if (event.key === "a" || event.key === "A") {
+                    event.stopPropagation();
+                    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);
-                        }
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    const stack = undoStackRef.current;
+                    if (stack.length === 0)
+                        return;
+                    const instance = editorInstanceRef.current;
+                    if (!instance)
                         return;
+                    // Push current state to redo stack
+                    const currentText = instance.getValue();
+                    redoStackRef.current = [
+                        ...redoStackRef.current,
+                        {
+                            text: currentText,
+                            formatting: [...formattingRef.current],
+                            links: [...linksRef.current],
+                            cursorStart: (_b = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart) !== null && _b !== void 0 ? _b : 0,
+                            cursorEnd: (_c = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionEnd) !== null && _c !== void 0 ? _c : 0,
+                        },
+                    ];
+                    // Pop from undo stack
+                    const prev = stack[stack.length - 1];
+                    undoStackRef.current = stack.slice(0, -1);
+                    // Restore state
+                    formattingRef.current = prev.formatting;
+                    linksRef.current = prev.links;
+                    prevTextRef.current = prev.text;
+                    isSyncingRef.current = true;
+                    instance.setValue(prev.text);
+                    isSyncingRef.current = false;
+                    if (textareaNode) {
+                        textareaNode.selectionStart = prev.cursorStart;
+                        textareaNode.selectionEnd = prev.cursorEnd;
                     }
+                    const markdown = buildFullMarkdown(prev.text, prev.links, prev.formatting);
+                    (_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 (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);
-                    }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                const stack = redoStackRef.current;
+                if (stack.length === 0)
+                    return;
+                const instance = editorInstanceRef.current;
+                if (!instance)
                     return;
+                // Push current state to undo stack
+                const currentText = instance.getValue();
+                undoStackRef.current = [
+                    ...undoStackRef.current,
+                    {
+                        text: currentText,
+                        formatting: [...formattingRef.current],
+                        links: [...linksRef.current],
+                        cursorStart: (_f = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart) !== null && _f !== void 0 ? _f : 0,
+                        cursorEnd: (_g = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionEnd) !== null && _g !== void 0 ? _g : 0,
+                    },
+                ];
+                // Pop from redo stack
+                const next = stack[stack.length - 1];
+                redoStackRef.current = stack.slice(0, -1);
+                // Restore state
+                formattingRef.current = next.formatting;
+                linksRef.current = next.links;
+                prevTextRef.current = next.text;
+                isSyncingRef.current = true;
+                instance.setValue(next.text);
+                isSyncingRef.current = false;
+                if (textareaNode) {
+                    textareaNode.selectionStart = next.cursorStart;
+                    textareaNode.selectionEnd = next.cursorEnd;
                 }
+                const markdown = buildFullMarkdown(next.text, next.links, next.formatting);
+                (_h = onChangeRef.current) === null || _h === void 0 ? void 0 : _h.call(onChangeRef, markdown);
+                setPlainTextValue(markdownToPlainText(markdown));
+                applyFormattingHighlights(instance.preview, next.formatting, (_j = instance.textarea) === null || _j === void 0 ? void 0 : _j.value);
+                applyLinkHighlights(instance.preview, next.links);
+                return;
             }
             if (enableAutocomplete && shouldShowAutocomplete) {
                 if (event.key === "ArrowDown") {
@@ -1209,7 +1352,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                 }
                 if (event.key === "Enter" || event.key === "Tab") {
                     event.preventDefault();
-                    const suggestion = (_f = filteredSuggestions[activeSuggestionIndex]) !== null && _f !== void 0 ? _f : filteredSuggestions[0];
+                    const suggestion = (_k = filteredSuggestions[activeSuggestionIndex]) !== null && _k !== void 0 ? _k : filteredSuggestions[0];
                     if (suggestion) {
                         applySuggestion(suggestion);
                     }