testomatio-editor-blocks 0.4.52 → 0.4.54

package/src/editor/blocks/markdown.ts

@@ -1,7 +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: string): string {
   return text
@@ -25,53 +23,125 @@ function restoreEscapes(text: string): string {
   return text.replace(/\uE000/g, "\\");
 }
 
-function parseInlineMarkdown(text: string): InlineSegment[] {
-  if (!text) {
-    return [];
+function findItalicClose(
+  text: string,
+  start: number,
+  marker: "*" | "_",
+): number {
+  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;
+}
 
-  const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
-  const rawSegments = normalized.split(INLINE_SEGMENT_REGEX).filter(Boolean);
+function parseInlineSegments(
+  normalized: string,
+  outer: { bold: boolean; italic: boolean; underline: boolean },
+): InlineSegment[] {
+  const result: InlineSegment[] = [];
+  let buffer = "";
+
+  const pushPlain = () => {
+    if (!buffer) return;
+    result.push({ text: restoreEscapes(buffer), styles: { ...outer } });
+    buffer = "";
+  };
 
-  return rawSegments.map((segment) => {
-    const baseStyles = { bold: false, italic: false, underline: false };
+  const wrap = (
+    inner: string,
+    add: Partial<{ bold: boolean; italic: boolean; underline: boolean }>,
+  ) => {
+    pushPlain();
+    result.push(...parseInlineSegments(inner, { ...outer, ...add }));
+  };
 
-    if (/^\*\*\*(.+)\*\*\*$/.test(segment) || /^___(.+)___$/.test(segment)) {
-      const content = segment.slice(3, -3);
-      return {
-        text: restoreEscapes(content),
-        styles: { bold: true, italic: true, underline: false },
-      };
+  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 (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
-      const content = segment.slice(2, -2);
-      return {
-        text: restoreEscapes(content),
-        styles: { ...baseStyles, bold: true },
-      };
+    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 (/^\*(.+)\*$/.test(segment) || /^_(.+)_$/.test(segment)) {
-      const content = segment.slice(1, -1);
-      return {
-        text: restoreEscapes(content),
-        styles: { ...baseStyles, italic: true },
-      };
+    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 (/^<u>(.+)<\/u>$/.test(segment)) {
-      const content = segment.slice(3, -4);
-      return {
-        text: restoreEscapes(content),
-        styles: { ...baseStyles, underline: true },
-      };
+    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] as "*" | "_";
+      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;
+  }
 
-    return {
-      text: restoreEscapes(segment),
-      styles: { ...baseStyles },
-    };
+  pushPlain();
+  return result;
+}
+
+function parseInlineMarkdown(text: string): InlineSegment[] {
+  if (!text) {
+    return [];
+  }
+
+  const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
+  return parseInlineSegments(normalized, {
+    bold: false,
+    italic: false,
+    underline: false,
   });
 }
 

package/src/editor/blocks/stepField.tsx

@@ -83,6 +83,31 @@ export type LinkMeta = { start: number; end: number; url: string };
 export type FormattingMeta = { start: number; 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 function applyInlineExclusion(
+  formatting: FormattingMeta[],
+  links: LinkMeta[],
+  start: number,
+  end: number,
+  fmtType: FormatType,
+): { formatting: FormattingMeta[]; links: LinkMeta[] } {
+  const overlaps = (a: { start: number; end: number }) => !(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 };
+}
+
 type EditorSnapshot = {
   text: string;
   formatting: FormattingMeta[];
@@ -920,6 +945,15 @@ export function StepField({
     textareaNode.focus();
   }, [focusSignal, textareaNode]);
 
+  useAutoResize({
+    textarea: textareaNode,
+    enabled: multiline,
+    onResize: useCallback(() => {
+      const instance = editorInstanceRef.current as (OverTypeInstance & { _updateAutoHeight?: () => void }) | null;
+      instance?._updateAutoHeight?.();
+    }, []),
+  });
+
   useEffect(() => {
     const instance = editorInstanceRef.current;
     if (!instance) {
@@ -987,13 +1021,6 @@ export function StepField({
     textareaNode.readOnly = readOnly;
   }, [readOnly, textareaNode]);
 
-  useAutoResize({
-    textarea: textareaNode,
-    multiline,
-    minRows: 3,
-    maxRows: 16,
-  });
-
   useEffect(() => {
     if (!textareaNode) {
       return;
@@ -1188,14 +1215,15 @@ export function StepField({
         // Remove formatting
         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),
+        const cleaned = applyInlineExclusion(
+          formattingRef.current,
+          linksRef.current,
+          start,
+          end,
+          fmtType,
         );
-        // Add formatting for selection
-        formattingRef.current = [...formattingRef.current, { start, end, type: fmtType }];
+        formattingRef.current = [...cleaned.formatting, { start, end, type: fmtType }];
+        linksRef.current = cleaned.links;
       } else {
         // No selection — nothing to format
         return;
@@ -1314,7 +1342,12 @@ export function StepField({
       );
       const newLink: LinkMeta = { 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;

package/src/editor/blocks/stepFieldFormatting.test.ts

@@ -1,5 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { buildFullMarkdown, type FormattingMeta, type LinkMeta } from "./stepField";
+import {
+  applyInlineExclusion,
+  buildFullMarkdown,
+  type FormattingMeta,
+  type LinkMeta,
+} from "./stepField";
 
 describe("buildFullMarkdown formatting combinations", () => {
   const noLinks: LinkMeta[] = [];
@@ -42,3 +47,59 @@ describe("buildFullMarkdown formatting combinations", () => {
     expect(buildFullMarkdown("hello", noLinks, formatting)).toBe("`hello`");
   });
 });
+
+describe("applyInlineExclusion mutual-exclusion rules", () => {
+  it("applying code strips overlapping bold/italic", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 5, type: "bold" },
+      { start: 0, end: 5, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 0, 5, "code");
+    expect(result.formatting).toEqual([]);
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying code strips overlapping links", () => {
+    const links: LinkMeta[] = [{ start: 0, end: 5, url: "https://a" }];
+    const result = applyInlineExclusion([], links, 0, 5, "code");
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying bold over a code range strips the code", () => {
+    const formatting: FormattingMeta[] = [{ start: 0, end: 5, type: "code" }];
+    const result = applyInlineExclusion(formatting, [], 0, 5, "bold");
+    expect(result.formatting).toEqual([]);
+  });
+
+  it("applying italic over a linked range strips the link", () => {
+    const links: LinkMeta[] = [{ start: 0, end: 5, url: "https://a" }];
+    const result = applyInlineExclusion([], links, 0, 5, "italic");
+    expect(result.links).toEqual([]);
+  });
+
+  it("applying bold preserves non-overlapping italic and non-overlapping links", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 10, end: 20, type: "italic" },
+    ];
+    const links: LinkMeta[] = [{ start: 30, end: 40, url: "https://a" }];
+    const result = applyInlineExclusion(formatting, links, 0, 5, "bold");
+    expect(result.formatting).toEqual(formatting);
+    expect(result.links).toEqual(links);
+  });
+
+  it("applying bold preserves overlapping italic (bold and italic coexist)", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 10, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 0, 10, "bold");
+    expect(result.formatting).toEqual(formatting);
+  });
+
+  it("applying italic drops overlapping italic (same-type replacement)", () => {
+    const formatting: FormattingMeta[] = [
+      { start: 0, end: 10, type: "italic" },
+    ];
+    const result = applyInlineExclusion(formatting, [], 2, 8, "italic");
+    expect(result.formatting).toEqual([]);
+  });
+});

package/src/editor/blocks/useAutoResize.ts

@@ -1,46 +1,89 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 type Options = {
   textarea: HTMLTextAreaElement | null;
-  multiline?: boolean;
-  minRows?: number;
-  maxRows?: number;
+  enabled?: boolean;
+  onResize: () => void;
 };
 
-export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRows = 12 }: Options) {
+// 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<() => void>();
+let fontsReadyAttached = false;
+
+function registerFontsReady(cb: () => void): () => void {
+  if (typeof document === "undefined" || !document.fonts?.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 }: Options) {
   const frameRef = useRef<number>(0);
+  const onResizeRef = useRef(onResize);
 
   useEffect(() => {
-    if (!textarea || !multiline) {
-      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";
-    };
+    onResizeRef.current = onResize;
+  }, [onResize]);
 
-    const observer = new MutationObserver(resize);
-    observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+  useEffect(() => {
+    if (!textarea || !enabled) return;
 
-    const handleInput = () => {
-      cancelAnimationFrame(frameRef.current ?? 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 () => {
-      observer.disconnect();
-      textarea.removeEventListener("input", handleInput);
-      cancelAnimationFrame(frameRef.current ?? 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/src/editor/customMarkdownConverter.test.ts

@@ -197,9 +197,9 @@ describe("blocksToMarkdown", () => {
     expect(blocksToMarkdown(blocks)).toBe(
       [
         "* Open the Login page.",
-        "  *Expected*: The Login page loads successfully.",
+        "  *Expected result*: The Login page loads successfully.",
         "* Enter a valid username.",
-        "  *Expected*: The username is accepted.",
+        "  *Expected result*: The username is accepted.",
       ].join("\n"),
     );
   });
@@ -242,7 +242,7 @@ describe("blocksToMarkdown", () => {
     ];
 
     expect(blocksToMarkdown(blocks)).toBe(
-      ["* ", "  *Expected*: Login form visible"].join("\n"),
+      ["* ", "  *Expected result*: Login form visible"].join("\n"),
     );
   });
 
@@ -355,7 +355,7 @@ describe("blocksToMarkdown", () => {
      expect(blocksToMarkdown(blocks)).toBe(
        [
          "* **Click** the _Login_ button",
-        "  *Expected*: **Success** is shown",
+        "  *Expected result*: **Success** is shown",
          "  Second line with <u>underline</u>",
        ].join("\n"),
      );
@@ -382,7 +382,7 @@ describe("blocksToMarkdown", () => {
       "* Navigate to login",
       "  Open browser",
       "  Go to login page",
-      "  *Expected*: Login form visible",
+      "  *Expected result*: Login form visible",
     ].join("\n"),
   );
  });
@@ -429,7 +429,7 @@ describe("blocksToMarkdown", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected*: The user receives a real-time notification for the order update.",
+        "  *Expected result*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -1073,7 +1073,7 @@ describe("markdownToBlocks", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected*: The user receives a real-time notification for the order update.",
+        "  *Expected result*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -1307,7 +1307,7 @@ describe("markdownToBlocks", () => {
     expect(markdownRoundTrip).toBe(
       [
         "* Display the generated report.",
-        "  *Expected*: ![](/attachments/report.png)",
+        "  *Expected result*: ![](/attachments/report.png)",
       ].join("\n"),
     );
   });
@@ -1354,7 +1354,7 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toBe(
       [
         "* Should open login screen",
-        "  *Expected*: Login should look like this",
+        "  *Expected result*: Login should look like this",
         "  ![](/login.png)",
       ].join("\n"),
     );
@@ -1493,9 +1493,9 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toBe(
       [
         "* Existing email + invalid password",
-        "  *Expected*: 'Oops, wrong email or password' is displayed",
+        "  *Expected result*: 'Oops, wrong email or password' is displayed",
         "* Not existing email + valid password",
-        "  *Expected*: 'Oops, wrong email or password' is displayed",
+        "  *Expected result*: 'Oops, wrong email or password' is displayed",
       ].join("\n"),
     );
   });
@@ -2667,6 +2667,27 @@ describe("blank line <-> empty paragraph mapping", () => {
     expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
   });
 
+  it("preserves a blank line between a bullet list and the next heading", () => {
+    const markdown = [
+      "### Requirements",
+      "* first requirement",
+      "* second requirement",
+      "",
+      "### Steps",
+      "",
+      "* do the thing",
+      "  *Expected result*: it works",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown) as CustomEditorBlock[];
+    const types = blocks.map((b) => b.type);
+    // Blank line between the last bullet and the next heading must survive
+    // parseList and become an empty paragraph.
+    const lastBulletIdx = types.lastIndexOf("bulletListItem");
+    expect(blocks[lastBulletIdx + 1].type).toBe("paragraph");
+    expect((blocks[lastBulletIdx + 1].content as any[]).length).toBe(0);
+    expect(blocksToMarkdown(blocks)).toBe(markdown);
+  });
+
   it("preserves blank lines across the user-reported screenshot example", () => {
     const markdown = [
       "### Requirements",