testomatio-editor-blocks 0.4.52 → 0.4.54

package/package/editor/blocks/markdown.js

@@ -1,6 +1,5 @@
 const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+?)(?:\s+=\d+x(?:\d+|\*))?\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
-const INLINE_SEGMENT_REGEX = /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;
 export function escapeHtml(text) {
     return text
         .replace(/&/g, "&amp;")
@@ -12,46 +11,108 @@ export function escapeHtml(text) {
 function restoreEscapes(text) {
     return text.replace(/\uE000/g, "\\");
 }
+function findItalicClose(text, start, marker) {
+    let j = start;
+    while (j < text.length) {
+        const ch = text[j];
+        if (ch === "\uE000") {
+            j += 2;
+            continue;
+        }
+        if ((ch === "*" || ch === "_") && text[j + 1] === ch) {
+            const close = text.indexOf(ch + ch, j + 2);
+            if (close === -1) {
+                return -1;
+            }
+            j = close + 2;
+            continue;
+        }
+        if (ch === marker) {
+            return j;
+        }
+        j += 1;
+    }
+    return -1;
+}
+function parseInlineSegments(normalized, outer) {
+    const result = [];
+    let buffer = "";
+    const pushPlain = () => {
+        if (!buffer)
+            return;
+        result.push({ text: restoreEscapes(buffer), styles: { ...outer } });
+        buffer = "";
+    };
+    const wrap = (inner, add) => {
+        pushPlain();
+        result.push(...parseInlineSegments(inner, { ...outer, ...add }));
+    };
+    let i = 0;
+    while (i < normalized.length) {
+        if (normalized.startsWith("***", i)) {
+            const end = normalized.indexOf("***", i + 3);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 3, end), { bold: true, italic: true });
+                i = end + 3;
+                continue;
+            }
+        }
+        if (normalized.startsWith("___", i)) {
+            const end = normalized.indexOf("___", i + 3);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 3, end), { bold: true, italic: true });
+                i = end + 3;
+                continue;
+            }
+        }
+        if (normalized.startsWith("**", i)) {
+            const end = normalized.indexOf("**", i + 2);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 2, end), { bold: true });
+                i = end + 2;
+                continue;
+            }
+        }
+        if (normalized.startsWith("__", i)) {
+            const end = normalized.indexOf("__", i + 2);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 2, end), { bold: true });
+                i = end + 2;
+                continue;
+            }
+        }
+        if (normalized.startsWith("<u>", i)) {
+            const end = normalized.indexOf("</u>", i + 3);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 3, end), { underline: true });
+                i = end + 4;
+                continue;
+            }
+        }
+        if (normalized[i] === "*" || normalized[i] === "_") {
+            const marker = normalized[i];
+            const end = findItalicClose(normalized, i + 1, marker);
+            if (end !== -1) {
+                wrap(normalized.slice(i + 1, end), { italic: true });
+                i = end + 1;
+                continue;
+            }
+        }
+        buffer += normalized[i];
+        i += 1;
+    }
+    pushPlain();
+    return result;
+}
 function parseInlineMarkdown(text) {
     if (!text) {
         return [];
     }
     const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
-    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 {
-                text: restoreEscapes(content),
-                styles: { ...baseStyles, bold: true },
-            };
-        }
-        if (/^\*(.+)\*$/.test(segment) || /^_(.+)_$/.test(segment)) {
-            const content = segment.slice(1, -1);
-            return {
-                text: restoreEscapes(content),
-                styles: { ...baseStyles, italic: true },
-            };
-        }
-        if (/^<u>(.+)<\/u>$/.test(segment)) {
-            const content = segment.slice(3, -4);
-            return {
-                text: restoreEscapes(content),
-                styles: { ...baseStyles, underline: true },
-            };
-        }
-        return {
-            text: restoreEscapes(segment),
-            styles: { ...baseStyles },
-        };
+    return parseInlineSegments(normalized, {
+        bold: false,
+        italic: false,
+        underline: false,
     });
 }
 function inlineToHtml(inline) {

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

@@ -40,6 +40,18 @@ export type FormattingMeta = {
     end: number;
     type: "bold" | "italic" | "code";
 };
+type FormatType = "bold" | "italic" | "code";
+/**
+ * Remove formatting and link entries that conflict with applying `fmtType`
+ * over the half-open range [start, end). Exclusion rules:
+ * - code: exclusive with everything — drops any overlapping formatting and links
+ * - bold/italic: coexist with each other, but exclusive with code and links
+ *   — drops overlapping same-type, overlapping code, and overlapping links
+ */
+export declare function applyInlineExclusion(formatting: FormattingMeta[], links: LinkMeta[], start: number, end: number, fmtType: FormatType): {
+    formatting: FormattingMeta[];
+    links: LinkMeta[];
+};
 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,27 @@ 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" }) }));
 }
+/**
+ * Remove formatting and link entries that conflict with applying `fmtType`
+ * over the half-open range [start, end). Exclusion rules:
+ * - code: exclusive with everything — drops any overlapping formatting and links
+ * - bold/italic: coexist with each other, but exclusive with code and links
+ *   — drops overlapping same-type, overlapping code, and overlapping links
+ */
+export function applyInlineExclusion(formatting, links, start, end, fmtType) {
+    const overlaps = (a) => !(a.start >= end || a.end <= start);
+    const nextFormatting = formatting.filter((f) => {
+        if (!overlaps(f))
+            return true;
+        if (fmtType === "code")
+            return false;
+        if (f.type === "code")
+            return false;
+        return f.type !== fmtType;
+    });
+    const nextLinks = links.filter((l) => !overlaps(l));
+    return { formatting: nextFormatting, links: nextLinks };
+}
 const UNDO_STACK_LIMIT = 100;
 function getActiveFormats(formatting, selStart, selEnd) {
     const active = new Set();
@@ -732,6 +753,15 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         }
         textareaNode.focus();
     }, [focusSignal, textareaNode]);
+    useAutoResize({
+        textarea: textareaNode,
+        enabled: multiline,
+        onResize: useCallback(() => {
+            var _a;
+            const instance = editorInstanceRef.current;
+            (_a = instance === null || instance === void 0 ? void 0 : instance._updateAutoHeight) === null || _a === void 0 ? void 0 : _a.call(instance);
+        }, []),
+    });
     useEffect(() => {
         var _a;
         const instance = editorInstanceRef.current;
@@ -793,12 +823,6 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         }
         textareaNode.readOnly = readOnly;
     }, [readOnly, textareaNode]);
-    useAutoResize({
-        textarea: textareaNode,
-        multiline,
-        minRows: 3,
-        maxRows: 16,
-    });
     useEffect(() => {
         if (!textareaNode) {
             return;
@@ -965,12 +989,9 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
             formattingRef.current = formattingRef.current.filter((_, i) => i !== existingIdx);
         }
         else if (start !== end) {
-            // 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 }];
+            const cleaned = applyInlineExclusion(formattingRef.current, linksRef.current, start, end, fmtType);
+            formattingRef.current = [...cleaned.formatting, { start, end, type: fmtType }];
+            linksRef.current = cleaned.links;
         }
         else {
             // No selection — nothing to format
@@ -1071,7 +1092,10 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
         const adjustedLinks = adjustLinksForEdit(linksRef.current.filter((l) => !(l.start < sel.end && l.end > sel.start)), sel.start, delta);
         const newLink = { start: sel.start, end: sel.start + linkText.length, url };
         linksRef.current = [...adjustedLinks, newLink];
-        formattingRef.current = adjustFormattingForEdit(formattingRef.current, sel.start, delta);
+        // Links are exclusive with bold/italic/code: strip any formatting that
+        // overlaps the original selection before shifting positions.
+        const keptFormatting = formattingRef.current.filter((f) => f.start >= sel.end || f.end <= sel.start);
+        formattingRef.current = adjustFormattingForEdit(keptFormatting, sel.start, delta);
         prevTextRef.current = nextValue;
         isSyncingRef.current = true;
         instance.setValue(nextValue);

package/package/editor/blocks/useAutoResize.d.ts

@@ -1,8 +1,7 @@
 type Options = {
     textarea: HTMLTextAreaElement | null;
-    multiline?: boolean;
-    minRows?: number;
-    maxRows?: number;
+    enabled?: boolean;
+    onResize: () => void;
 };
-export declare function useAutoResize({ textarea, multiline, minRows, maxRows }: Options): void;
+export declare function useAutoResize({ textarea, enabled, onResize }: Options): () => void;
 export {};

package/package/editor/blocks/useAutoResize.js

@@ -1,33 +1,77 @@
-import { useEffect, useRef } from "react";
-export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRows = 12 }) {
+import { useCallback, useEffect, useRef } from "react";
+// Shared across all hook instances: one fonts.ready promise per document,
+// fanned out to every registered callback so N fields cost 1 .then().
+const fontsReadyCallbacks = new Set();
+let fontsReadyAttached = false;
+function registerFontsReady(cb) {
+    var _a;
+    if (typeof document === "undefined" || !((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)) {
+        return () => { };
+    }
+    fontsReadyCallbacks.add(cb);
+    if (!fontsReadyAttached) {
+        fontsReadyAttached = true;
+        document.fonts.ready
+            .then(() => {
+            for (const fn of fontsReadyCallbacks)
+                fn();
+        })
+            .catch(() => { });
+    }
+    return () => {
+        fontsReadyCallbacks.delete(cb);
+    };
+}
+export function useAutoResize({ textarea, enabled = true, onResize }) {
     const frameRef = useRef(0);
+    const onResizeRef = useRef(onResize);
+    useEffect(() => {
+        onResizeRef.current = onResize;
+    }, [onResize]);
     useEffect(() => {
-        if (!textarea || !multiline) {
+        if (!textarea || !enabled)
             return;
-        }
-        const resize = () => {
-            textarea.style.height = "auto";
-            const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight || "16");
-            const minHeight = lineHeight * minRows;
-            const maxHeight = lineHeight * maxRows;
-            const clampedHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
-            textarea.style.height = `${clampedHeight}px`;
-            textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
-        };
-        const observer = new MutationObserver(resize);
-        observer.observe(textarea, { childList: true, characterData: true, subtree: true });
-        const handleInput = () => {
-            var _a;
-            cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
-            frameRef.current = requestAnimationFrame(resize);
+        let cancelled = false;
+        // All callers go through this coalescing scheduler: repeated pings in a
+        // single frame collapse to one reflow.
+        const schedule = () => {
+            if (cancelled)
+                return;
+            if (frameRef.current)
+                return;
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = 0;
+                if (!cancelled)
+                    onResizeRef.current();
+            });
         };
-        textarea.addEventListener("input", handleInput);
-        resize();
+        // Initial pass after layout.
+        schedule();
+        // One-shot: re-run once the textarea actually enters the layout tree.
+        // This is the piece that fixes the drag-drop remount and
+        // snippet-insert-while-hidden cases OverType itself cannot recover from.
+        const intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    schedule();
+                    intersectionObserver.disconnect();
+                    break;
+                }
+            }
+        });
+        intersectionObserver.observe(textarea);
+        const unregisterFonts = registerFontsReady(schedule);
         return () => {
-            var _a;
-            observer.disconnect();
-            textarea.removeEventListener("input", handleInput);
-            cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
+            cancelled = true;
+            intersectionObserver.disconnect();
+            unregisterFonts();
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = 0;
+            }
         };
-    }, [textarea, multiline, minRows, maxRows]);
+    }, [textarea, enabled]);
+    return useCallback(() => {
+        onResizeRef.current();
+    }, []);
 }

package/package/editor/customMarkdownConverter.js

@@ -365,7 +365,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
             if (normalizedExpected.length > 0) {
                 const expectedLines = normalizedExpected.split(/\r?\n/);
-                const label = "*Expected*";
+                const label = "*Expected result*";
                 expectedLines.forEach((expectedLine, index) => {
                     const trimmedLine = expectedLine.trim();
                     if (trimmedLine.length === 0) {
@@ -521,28 +521,80 @@ export function blocksToMarkdown(blocks) {
     return cleaned;
 }
 function parseInlineMarkdown(text) {
-    const cleaned = stripHtmlWrappers(text);
+    return parseInlineSegments(stripHtmlWrappers(text), {});
+}
+function findItalicClose(text, start, marker) {
+    let j = start;
+    while (j < text.length) {
+        const ch = text[j];
+        if (ch === "\\") {
+            j += 2;
+            continue;
+        }
+        if ((ch === "*" || ch === "_") && text[j + 1] === ch) {
+            const close = text.indexOf(ch + ch, j + 2);
+            if (close === -1) {
+                return -1;
+            }
+            j = close + 2;
+            continue;
+        }
+        if (ch === marker) {
+            return j;
+        }
+        j += 1;
+    }
+    return -1;
+}
+function parseInlineSegments(cleaned, outerStyles) {
     const result = [];
     let buffer = "";
     const pushPlain = () => {
         if (buffer.length === 0) {
             return;
         }
-        result.push({ type: "text", text: unescapeMarkdown(buffer), styles: {} });
+        result.push({
+            type: "text",
+            text: unescapeMarkdown(buffer),
+            styles: { ...outerStyles },
+        });
         buffer = "";
     };
+    const wrap = (inner, add) => {
+        pushPlain();
+        const nested = parseInlineSegments(inner, { ...outerStyles, ...add });
+        result.push(...nested);
+    };
     let i = 0;
     while (i < cleaned.length) {
+        if (cleaned.startsWith("***", i)) {
+            const end = cleaned.indexOf("***", i + 3);
+            if (end !== -1) {
+                wrap(cleaned.slice(i + 3, end), { bold: true, italic: true });
+                i = end + 3;
+                continue;
+            }
+        }
+        if (cleaned.startsWith("___", i)) {
+            const end = cleaned.indexOf("___", i + 3);
+            if (end !== -1) {
+                wrap(cleaned.slice(i + 3, end), { bold: true, italic: true });
+                i = end + 3;
+                continue;
+            }
+        }
         if (cleaned.startsWith("**", i)) {
             const end = cleaned.indexOf("**", i + 2);
             if (end !== -1) {
-                pushPlain();
-                const inner = cleaned.slice(i + 2, end);
-                result.push({
-                    type: "text",
-                    text: unescapeMarkdown(inner),
-                    styles: { bold: true },
-                });
+                wrap(cleaned.slice(i + 2, end), { bold: true });
+                i = end + 2;
+                continue;
+            }
+        }
+        if (cleaned.startsWith("__", i)) {
+            const end = cleaned.indexOf("__", i + 2);
+            if (end !== -1) {
+                wrap(cleaned.slice(i + 2, end), { bold: true });
                 i = end + 2;
                 continue;
             }
@@ -550,13 +602,7 @@ function parseInlineMarkdown(text) {
         if (cleaned.startsWith("~~", i)) {
             const end = cleaned.indexOf("~~", i + 2);
             if (end !== -1) {
-                pushPlain();
-                const inner = cleaned.slice(i + 2, end);
-                result.push({
-                    type: "text",
-                    text: unescapeMarkdown(inner),
-                    styles: { strike: true },
-                });
+                wrap(cleaned.slice(i + 2, end), { strike: true });
                 i = end + 2;
                 continue;
             }
@@ -569,7 +615,7 @@ function parseInlineMarkdown(text) {
                 result.push({
                     type: "text",
                     text: unescapeMarkdown(inner),
-                    styles: { code: true },
+                    styles: { ...outerStyles, code: true },
                 });
                 i = end + 1;
                 continue;
@@ -583,7 +629,7 @@ function parseInlineMarkdown(text) {
                 pushPlain();
                 const label = cleaned.slice(i + 1, endLabel);
                 const href = cleaned.slice(startLink + 1, endLink);
-                const parsedLabel = parseInlineMarkdown(label);
+                const parsedLabel = parseInlineSegments(label, {});
                 // Ensure link content is never undefined - if empty, add empty text
                 const linkContent = parsedLabel.length > 0 ? parsedLabel : [{ type: "text", text: "", styles: {} }];
                 result.push({
@@ -597,15 +643,9 @@ function parseInlineMarkdown(text) {
         }
         if (cleaned[i] === "*" || cleaned[i] === "_") {
             const marker = cleaned[i];
-            const end = cleaned.indexOf(marker, i + 1);
+            const end = findItalicClose(cleaned, i + 1, marker);
             if (end !== -1) {
-                pushPlain();
-                const inner = cleaned.slice(i + 1, end);
-                result.push({
-                    type: "text",
-                    text: unescapeMarkdown(inner),
-                    styles: { italic: true },
-                });
+                wrap(cleaned.slice(i + 1, end), { italic: true });
                 i = end + 1;
                 continue;
             }
@@ -656,7 +696,27 @@ function parseList(lines, startIndex, listType, indentLevel, allowEmptySteps = f
         const rawLine = lines[index];
         const trimmed = rawLine.trim();
         if (!trimmed) {
-            index += 1;
+            // Peek at the next non-blank line. If it's another item of this list
+            // (same indent level and list type), treat the blank lines as loose-list
+            // separators and consume them. Otherwise leave the blank line for the
+            // outer loop so it can become an empty paragraph block.
+            let lookahead = index + 1;
+            while (lookahead < lines.length && !lines[lookahead].trim()) {
+                lookahead += 1;
+            }
+            if (lookahead >= lines.length) {
+                break;
+            }
+            const nextLine = lines[lookahead];
+            const nextIndent = countIndent(nextLine);
+            if (nextIndent < indentLevel * 2) {
+                break;
+            }
+            const nextType = detectListType(nextLine.trim());
+            if (nextType !== listType) {
+                break;
+            }
+            index = lookahead;
             continue;
         }
         let indent = countIndent(rawLine);

package/package/styles.css

@@ -1100,6 +1100,12 @@ html.dark .bn-step-image-preview__content {
   color: rgb(146, 64, 14) !important;
 }
 
+.bn-step-editor .overtype-wrapper .overtype-preview li.bullet-list .syntax-marker,
+.bn-step-editor .overtype-wrapper .overtype-preview li.ordered-list .syntax-marker {
+  color: inherit !important;
+  opacity: 1 !important;
+}
+
 .bn-step-custom-caret {
   display: none;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.52",
+  "version": "0.4.54",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",