testomatio-editor-blocks 0.4.73 → 0.4.75

package/src/editor/blocks/stepField.tsx

@@ -1,5 +1,5 @@
 import OverType, { type OverType as OverTypeInstance } from "overtype";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode, ChangeEvent } from "react";
 import { useComponentsContext } from "@blocknote/react";
 import { EditLinkMenuItems } from "@blocknote/react";
@@ -63,7 +63,26 @@ const READ_ONLY_ALLOWED_KEYS = new Set([
 
 const AUTOCOMPLETE_TRIGGER_KEYS = new Set([" ", "Space"]);
 
-const markdownParser = (OverType as { MarkdownParser?: { parse: (markdown: string) => string } }).MarkdownParser;
+const markdownParser = (
+  OverType as {
+    MarkdownParser?: {
+      parse: (
+        markdown: string,
+        activeLine?: number,
+        showActiveLineRaw?: boolean,
+        instanceHighlighter?: unknown,
+        isPreviewMode?: boolean,
+      ) => string;
+    };
+  }
+).MarkdownParser;
+
+/**
+ * `useLayoutEffect` that degrades to `useEffect` outside the browser so SSR
+ * doesn't warn. Static previews and the OverType mount run pre-paint to avoid a
+ * blank/jumping frame on the click→edit swap.
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 function ImageUploadIcon() {
   return (
@@ -674,6 +693,136 @@ function markdownToPlainText(markdown: string): string {
   }
 }
 
+const IMAGE_SYNTAX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+
+/**
+ * Render a run of plain text, turning any `![alt](url)` markdown into real
+ * `<img>` elements. Returns a string when there are no images (so simple text
+ * stays a plain text node), otherwise a keyed array of strings and images.
+ */
+function renderTextWithImages(text: string, key: string): ReactNode {
+  if (!text.includes("![")) {
+    return text;
+  }
+  const nodes: ReactNode[] = [];
+  IMAGE_SYNTAX.lastIndex = 0;
+  let last = 0;
+  let part = 0;
+  let match: RegExpExecArray | null;
+  while ((match = IMAGE_SYNTAX.exec(text)) !== null) {
+    if (match.index > last) {
+      nodes.push(<Fragment key={`${key}-t${part++}`}>{text.slice(last, match.index)}</Fragment>);
+    }
+    nodes.push(<img key={`${key}-i${part++}`} src={match[2]} alt={match[1] || "Step image"} />);
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) {
+    nodes.push(<Fragment key={`${key}-t${part++}`}>{text.slice(last)}</Fragment>);
+  }
+  return nodes;
+}
+
+/**
+ * Render a step field's markdown as a faithful, read-only reading view: the same
+ * clean text + bold/italic/code/link decorations + inline images the live
+ * OverType preview shows, but as plain React children (no editor, no refs, no
+ * imperative DOM — BlockNote's node-view renderer doesn't attach refs the way a
+ * normal React commit does, so the content must be declarative).
+ *
+ * Decorations are applied by slicing the plain text at every formatting/link
+ * boundary and wrapping each segment in the same `step-preview-*` elements the
+ * live editor uses, so all existing CSS applies unchanged.
+ */
+function renderStepFieldContent(value: string): ReactNode {
+  const { plainText, links, formatting } = stripInlineMarkdown(value);
+  if (!plainText) {
+    return null;
+  }
+  if (formatting.length === 0 && links.length === 0) {
+    return renderTextWithImages(plainText, "p");
+  }
+
+  const len = plainText.length;
+  const points = new Set<number>([0, len]);
+  for (const f of formatting) {
+    points.add(Math.max(0, f.start));
+    points.add(Math.min(len, f.end));
+  }
+  for (const l of links) {
+    points.add(Math.max(0, l.start));
+    points.add(Math.min(len, l.end));
+  }
+  const sorted = [...points].sort((a, b) => a - b);
+
+  const out: ReactNode[] = [];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i];
+    const b = sorted[i + 1];
+    if (a >= b) {
+      continue;
+    }
+    const text = plainText.slice(a, b);
+    const fmts = new Set(
+      formatting.filter((f) => f.start <= a && f.end >= b).map((f) => f.type),
+    );
+    const link = links.find((l) => l.start <= a && l.end >= b);
+
+    let node: ReactNode = renderTextWithImages(text, `s${i}`);
+    if (fmts.has("code")) {
+      node = <code className="step-preview-code">{node}</code>;
+    }
+    if (fmts.has("italic")) {
+      node = <em className="step-preview-italic">{node}</em>;
+    }
+    if (fmts.has("bold")) {
+      node = <strong className="step-preview-bold">{node}</strong>;
+    }
+    if (link) {
+      node = (
+        <a className="step-preview-link" href={link.url}>
+          {node}
+        </a>
+      );
+    }
+    out.push(<Fragment key={i}>{node}</Fragment>);
+  }
+  return out;
+}
+
+/**
+ * Lightweight, non-interactive stand-in for {@link StepField}. Mounts no
+ * OverType editor, observers, or event handlers — just a styled
+ * `.bn-step-editor--preview` box whose markdown is rendered declaratively. Used
+ * for every step that isn't currently being edited.
+ */
+export function StepFieldPreview({
+  value,
+  fieldName,
+  multiline = true,
+}: {
+  value: string;
+  fieldName?: string;
+  multiline?: boolean;
+}) {
+  const content = useMemo(() => renderStepFieldContent(value), [value]);
+
+  const editorClassName = [
+    "bn-step-editor",
+    multiline ? "bn-step-editor--multiline" : "",
+    "bn-step-editor--preview",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className="bn-step-field">
+      <div className={editorClassName} data-step-field={fieldName}>
+        {content}
+      </div>
+    </div>
+  );
+}
+
 export function StepField({
   label,
   showLabel = true,
@@ -712,6 +861,10 @@ export function StepField({
   const autoFocusRef = useRef(false);
   const pendingFocusRef = useRef(false);
   const initialValueRef = useRef(value);
+  // Read at OverType init so the editor mounts already-collapsed in compact
+  // mode (no tall first frame before the compact layout effect runs).
+  const compactModeRef = useRef(compactMode);
+  compactModeRef.current = compactMode;
   const onChangeRef = useRef(onChange);
   const [plainTextValue, setPlainTextValue] = useState(() => markdownToPlainText(value));
   const [isFocused, setIsFocused] = useState(false);
@@ -799,7 +952,7 @@ export function StepField({
     onChangeRef.current?.(markdown);
   }, [pushUndoSnapshot]);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const container = editorContainerRef.current;
     if (!container) {
       return;
@@ -820,11 +973,16 @@ export function StepField({
       value: plainText,
       placeholder: resolvedPlaceholder,
       autoResize: multiline,
-      minHeight: multiline ? "4rem" : "2.5rem",
+      // Seed the compact floor at init so a clicked step paints already
+      // collapsed — the compact layout effect below keeps it in sync after.
+      minHeight: compactModeRef.current ? "0px" : multiline ? "4rem" : "2.5rem",
       padding: "0.5rem 0.75rem",
       fontSize: "0.95rem",
       onChange: handleEditorChange,
     });
+    if (compactModeRef.current && instance.textarea) {
+      instance.textarea.rows = 1;
+    }
 
     // Monkey-patch updatePreview to add link highlights
     const originalUpdatePreview = instance.updatePreview.bind(instance);
@@ -976,7 +1134,7 @@ export function StepField({
   // so caret and value survive. Driven by the stable compactMode flag (not
   // `compact`) so collapsed and expanded share one height — focusing never
   // shifts the layout.
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const instance = editorInstanceRef.current as
       | (OverTypeInstance & {
           options?: { minHeight?: string };

package/src/editor/customMarkdownConverter.test.ts

@@ -1296,6 +1296,65 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toContain("  -b 'gclau=1.1.1681594017.1781077572;'");
   });
 
+  it("does not escape dots inside inline code in step data", () => {
+    const markdown = blocksToMarkdown([
+      {
+        id: "step1",
+        type: "testStep",
+        props: {
+          stepTitle: "Run the request.",
+          stepData: "`curl https://example.com/api`",
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ]);
+
+    expect(markdown).toBe(
+      [
+        // Title outside code is still escaped.
+        "* Run the request\\.",
+        // Dots inside the inline code span stay literal.
+        "  `curl https://example.com/api`",
+      ].join("\n"),
+    );
+  });
+
+  it("does not escape dots when a fenced block opens in the title and the body lands in step data", () => {
+    // The step editor splits a multi-line code block: the opening ``` becomes
+    // the title and the body + closing ``` become the step data.
+    const markdown = blocksToMarkdown([
+      {
+        id: "step1",
+        type: "testStep",
+        props: {
+          stepTitle: "```",
+          stepData: [
+            "curl --location 'https://example.com.ua' \\",
+            "--data-raw '{ \"method\": \"url.method\" }'",
+            "```",
+          ].join("\n"),
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ]);
+
+    expect(markdown).toBe(
+      [
+        "* ```",
+        // Dots inside the fence stay literal even though it opened in the title.
+        "  curl --location 'https://example.com.ua' \\",
+        "  --data-raw '{ \"method\": \"url.method\" }'",
+        "  ```",
+      ].join("\n"),
+    );
+  });
+
   it("does not include content after a blank line in step data", () => {
     const markdown = [
       "### Steps",

package/src/editor/customMarkdownConverter.ts

@@ -84,8 +84,44 @@ function escapeMarkdown(text: string): string {
   return result;
 }
 
-function escapeStepContent(text: string): string {
-  return text.replace(/\./g, "\\.");
+// Creates a stateful escaper that escapes dots outside Markdown code while
+// leaving code spans (inline `…`, fenced ``` … ```) verbatim — backslash
+// escapes are ignored inside code, so `\.` would render literally.
+//
+// The state (an open, not-yet-closed backtick run) carries across calls so a
+// fence can be opened in one segment and closed in another. This matters
+// because the step editor splits a multi-line code block across props: the
+// opening ``` lands in `stepTitle` while the body and closing ``` land in
+// `stepData`.
+function makeStepEscaper(): (text: string) => string {
+  let fence: string | null = null;
+  return (text: string): string => {
+    let result = "";
+    let i = 0;
+    while (i < text.length) {
+      if (text[i] === "`") {
+        let ticks = 0;
+        while (text[i + ticks] === "`") ticks++;
+        const run = "`".repeat(ticks);
+        result += run;
+        i += ticks;
+        if (fence === null) {
+          fence = run; // open a code span/fence
+        } else if (fence === run) {
+          fence = null; // matching run closes it
+        }
+        continue;
+      }
+      if (fence !== null) {
+        result += text[i]; // inside code — copy verbatim
+        i++;
+        continue;
+      }
+      result += text[i] === "." ? "\\." : text[i];
+      i++;
+    }
+    return result;
+  };
 }
 
 function stripHtmlWrappers(text: string): string {
@@ -461,57 +497,38 @@ function serializeBlock(
       const normalizedExpectedForCheck = stripExpectedPrefix(expectedResult).trim();
       const hasContent = stepData.length > 0 || normalizedExpectedForCheck.length > 0;
 
+      // One escaper threads code-fence state from the title into the data: the
+      // editor splits a multi-line code block so the opening ``` sits in the
+      // title and the body + closing ``` sit in the data. Both must be treated
+      // as a single code region so their dots stay literal.
+      const escapeBody = makeStepEscaper();
+
       if (normalizedTitle.length > 0 || hasContent) {
         const listStyle = (block.props as any).listStyle ?? "bullet";
         const prefix = listStyle === "ordered" ? `${(stepIndex ?? 0) + 1}.` : "*";
-        lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeStepContent(normalizedTitle)}` : `${prefix} `);
+        lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeBody(normalizedTitle)}` : `${prefix} `);
       }
 
       if (stepData.length > 0) {
-        const dataLines = stepData.split(/\r?\n/);
-        let insideCodeFence = false;
-        dataLines.forEach((dataLine: string) => {
+        const escaped = escapeBody(stepData);
+        escaped.split(/\r?\n/).forEach((dataLine: string) => {
           const trimmedLine = dataLine.trim();
-          if (trimmedLine.length === 0) {
-            lines.push("  ");
-            return;
-          }
-          // Don't escape dots inside fenced code blocks (or on the fence lines
-          // themselves) — Markdown ignores backslash escapes there, so `\.`
-          // would render literally.
-          const isFence = trimmedLine.startsWith("```");
-          const content =
-            insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
-          lines.push(`  ${content}`);
-          if (isFence) {
-            insideCodeFence = !insideCodeFence;
-          }
+          lines.push(trimmedLine.length === 0 ? "  " : `  ${trimmedLine}`);
         });
       }
 
       const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
       if (normalizedExpected.length > 0) {
-        const expectedLines = normalizedExpected.split(/\r?\n/);
+        const escaped = makeStepEscaper()(normalizedExpected);
         const label = "*Expected result*";
-        let insideCodeFence = false;
-        expectedLines.forEach((expectedLine: string, index: number) => {
+        let isFirst = true;
+        escaped.split(/\r?\n/).forEach((expectedLine: string) => {
           const trimmedLine = expectedLine.trim();
           if (trimmedLine.length === 0) {
             return;
           }
-
-          // As with step data, leave dots untouched inside fenced code blocks.
-          const isFence = trimmedLine.startsWith("```");
-          const content =
-            insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
-          if (index === 0) {
-            lines.push(`  ${label}: ${content}`);
-          } else {
-            lines.push(`  ${content}`);
-          }
-          if (isFence) {
-            insideCodeFence = !insideCodeFence;
-          }
+          lines.push(isFirst ? `  ${label}: ${trimmedLine}` : `  ${trimmedLine}`);
+          isFirst = false;
         });
       }
 

package/src/editor/styles.css

@@ -631,6 +631,30 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   vertical-align: 1px;
 }
 
+/* Read-only preview parity for compact reading rows: the live compact field
+   tightens padding on the OverType layers (above), which the static preview
+   doesn't have, so apply the same padding to the flow `--preview` box. */
+.bn-teststep--compact .bn-step-editor--preview {
+  padding: 4px 12px;
+}
+
+/* Same "Expected" reading badge for the static preview. The static preview is a
+   single flow box (not OverType's per-line divs), so the badge goes on its own
+   ::before. */
+.bn-teststep--collapsed .bn-step-editor--preview[data-step-field="expected"]::before {
+  content: "Expected";
+  display: inline-block;
+  margin-right: 8px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--step-bg-light);
+  color: var(--step-muted);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  vertical-align: 1px;
+}
+
 .bn-teststep__view-toggle--compact svg {
   color: var(--step-muted);
 }
@@ -1432,6 +1456,58 @@ html.dark .bn-step-editor--preview {
   color: #e5e5e5;
 }
 
+/* Wrapper around a non-edited step's read-only preview. Focusable so Tab enters
+   a step (which mounts its editor); no lingering outline since focus moves to
+   the freshly-mounted field immediately. */
+.bn-teststep-preview-wrapper {
+  outline: none;
+}
+
+/* Inline decorations inside the read-only preview mirror the live OverType
+   preview, which uses the same step-preview-* classes. The live rules are
+   scoped to `.overtype-wrapper .overtype-preview` (which the static preview
+   doesn't render), so the same declarations are repeated here for the flow
+   `--preview` container. */
+.bn-step-editor--preview a.step-preview-link {
+  color: #4f46e5;
+  text-decoration: underline;
+  pointer-events: none;
+}
+
+.bn-step-editor--preview strong.step-preview-bold {
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit;
+  color: inherit;
+}
+
+.bn-step-editor--preview em.step-preview-italic {
+  font-style: italic;
+  color: inherit;
+}
+
+.bn-step-editor--preview code.step-preview-code {
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: rgb(146, 64, 14);
+}
+
+.bn-step-editor--preview img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.65rem;
+  margin: 0.5rem 0;
+  pointer-events: none;
+}
+
+html.dark .bn-step-editor--preview code.step-preview-code {
+  color: rgba(251, 191, 36, 1);
+}
+
+html.dark .bn-step-editor--preview a.step-preview-link {
+  color: rgba(129, 140, 248, 1);
+}
+
 .bn-step-editor.bn-step-editor--focused {
   outline: none;
   box-shadow: none;

package/package/editor/blocks/useDeferredMount.d.ts

@@ -1,26 +0,0 @@
-/**
- * Defers mounting of expensive block content until the element is at (or near)
- * the viewport. Heavy blocks (e.g. test steps that each spin up an OverType
- * editor) render a cheap placeholder first; the real interactive content is
- * mounted only once the block scrolls into view. This keeps pasting/loading a
- * large document fast — only the visible steps pay the editor-init cost up
- * front, the rest are upgraded lazily as the user scrolls.
- *
- * Returns a ref to attach to the wrapper element and a boolean that flips to
- * `true` once (and stays true — we never tear an editor back down).
- *
- * `activate(focus)` lets the caller upgrade eagerly on interaction. Passing
- * `focus: true` (a click/focus on the placeholder) records that the freshly
- * mounted content should take focus, so a single click on a preview starts
- * editing. Passive activation (hover pre-warm, scroll-into-view) leaves focus
- * alone via `shouldFocusOnActivate === false`.
- */
-export declare function useDeferredMount<T extends HTMLElement>(options?: {
-    rootMargin?: string;
-    initiallyActive?: boolean;
-}): {
-    ref: React.RefObject<T | null>;
-    active: boolean;
-    activate: (focus?: boolean) => void;
-    shouldFocusOnActivate: boolean;
-};

package/package/editor/blocks/useDeferredMount.js

@@ -1,54 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-/**
- * Defers mounting of expensive block content until the element is at (or near)
- * the viewport. Heavy blocks (e.g. test steps that each spin up an OverType
- * editor) render a cheap placeholder first; the real interactive content is
- * mounted only once the block scrolls into view. This keeps pasting/loading a
- * large document fast — only the visible steps pay the editor-init cost up
- * front, the rest are upgraded lazily as the user scrolls.
- *
- * Returns a ref to attach to the wrapper element and a boolean that flips to
- * `true` once (and stays true — we never tear an editor back down).
- *
- * `activate(focus)` lets the caller upgrade eagerly on interaction. Passing
- * `focus: true` (a click/focus on the placeholder) records that the freshly
- * mounted content should take focus, so a single click on a preview starts
- * editing. Passive activation (hover pre-warm, scroll-into-view) leaves focus
- * alone via `shouldFocusOnActivate === false`.
- */
-export function useDeferredMount(options = {}) {
-    const { rootMargin = "300px 0px", initiallyActive = false } = options;
-    const ref = useRef(null);
-    const [active, setActive] = useState(initiallyActive);
-    const activeRef = useRef(active);
-    activeRef.current = active;
-    const focusOnActivateRef = useRef(false);
-    const activate = (focus = false) => {
-        if (activeRef.current)
-            return;
-        if (focus)
-            focusOnActivateRef.current = true;
-        setActive(true);
-    };
-    useEffect(() => {
-        if (activeRef.current)
-            return;
-        const el = ref.current;
-        if (!el)
-            return;
-        // Environments without IntersectionObserver (or SSR) just mount eagerly.
-        if (typeof IntersectionObserver === "undefined") {
-            setActive(true);
-            return;
-        }
-        const observer = new IntersectionObserver((entries) => {
-            if (entries.some((entry) => entry.isIntersecting)) {
-                setActive(true);
-                observer.disconnect();
-            }
-        }, { rootMargin });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [rootMargin]);
-    return { ref, active, activate, shouldFocusOnActivate: focusOnActivateRef.current };
-}

package/src/editor/blocks/useDeferredMount.ts

@@ -1,66 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-/**
- * Defers mounting of expensive block content until the element is at (or near)
- * the viewport. Heavy blocks (e.g. test steps that each spin up an OverType
- * editor) render a cheap placeholder first; the real interactive content is
- * mounted only once the block scrolls into view. This keeps pasting/loading a
- * large document fast — only the visible steps pay the editor-init cost up
- * front, the rest are upgraded lazily as the user scrolls.
- *
- * Returns a ref to attach to the wrapper element and a boolean that flips to
- * `true` once (and stays true — we never tear an editor back down).
- *
- * `activate(focus)` lets the caller upgrade eagerly on interaction. Passing
- * `focus: true` (a click/focus on the placeholder) records that the freshly
- * mounted content should take focus, so a single click on a preview starts
- * editing. Passive activation (hover pre-warm, scroll-into-view) leaves focus
- * alone via `shouldFocusOnActivate === false`.
- */
-export function useDeferredMount<T extends HTMLElement>(
-  options: { rootMargin?: string; initiallyActive?: boolean } = {},
-): {
-  ref: React.RefObject<T | null>;
-  active: boolean;
-  activate: (focus?: boolean) => void;
-  shouldFocusOnActivate: boolean;
-} {
-  const { rootMargin = "300px 0px", initiallyActive = false } = options;
-  const ref = useRef<T>(null);
-  const [active, setActive] = useState(initiallyActive);
-  const activeRef = useRef(active);
-  activeRef.current = active;
-  const focusOnActivateRef = useRef(false);
-
-  const activate = (focus = false) => {
-    if (activeRef.current) return;
-    if (focus) focusOnActivateRef.current = true;
-    setActive(true);
-  };
-
-  useEffect(() => {
-    if (activeRef.current) return;
-    const el = ref.current;
-    if (!el) return;
-
-    // Environments without IntersectionObserver (or SSR) just mount eagerly.
-    if (typeof IntersectionObserver === "undefined") {
-      setActive(true);
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          setActive(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [rootMargin]);
-
-  return { ref, active, activate, shouldFocusOnActivate: focusOnActivateRef.current };
-}