testomatio-editor-blocks 0.4.74 → 0.4.76

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/blocks/testMeta.tsx

@@ -31,6 +31,77 @@ export function serializeMetaFields(fields: MetaField[]): string {
   return JSON.stringify(fields);
 }
 
+type TestEditorLike = {
+  document: any[];
+  getTextCursorPosition?: () => { block?: { id?: string } };
+  insertBlocks: (
+    blocks: any[],
+    referenceId: string,
+    placement: "before" | "after",
+  ) => any[];
+};
+
+/** Reads the `labels` value from the first suite `testMeta` block, if any. */
+function suiteLabelsFromDocument(document: any[]): string {
+  for (const block of document) {
+    if (block?.type !== "testMeta") continue;
+    if ((block.props as any)?.metaKind !== "suite") continue;
+    const fields = parseMetaFields((block.props as any)?.metaFields);
+    const labels = fields.find((f) => f.key.trim().toLowerCase() === "labels");
+    if (labels) return labels.value;
+  }
+  return "";
+}
+
+/**
+ * Insert a new test: a `testMeta` panel (labelled "NEW TEST" until it gets an id)
+ * seeded with default metadata — `type: manual`, `priority: normal`, and `labels`
+ * copied from the suite block — followed by an empty H2 heading for the test title.
+ *
+ * Inserts at the text cursor when the editor is focused, otherwise at the end of
+ * the document. Returns the title heading's block id (for focusing), or null.
+ */
+export function addTestBlock(editor: TestEditorLike): string | null {
+  const fields: MetaField[] = [
+    { key: "type", value: "manual" },
+    { key: "priority", value: "normal" },
+    { key: "labels", value: suiteLabelsFromDocument(editor.document) },
+  ];
+
+  const metaBlock = {
+    type: "testMeta" as const,
+    props: {
+      metaKind: "test",
+      metaFields: serializeMetaFields(fields),
+      metaInline: false,
+    },
+    children: [],
+  };
+  const titleHeading = {
+    type: "heading" as const,
+    props: { level: 2 },
+    content: [],
+    children: [],
+  };
+
+  // Prefer the text cursor position — BlockNote keeps it in the editor state even
+  // after the editor blurs (e.g. when a toolbar button is clicked), so the test
+  // lands where the user left the caret. Fall back to the document end only when
+  // there is no cursor at all.
+  const docs = editor.document;
+  let referenceId: string | undefined;
+  try {
+    referenceId = editor.getTextCursorPosition?.().block?.id;
+  } catch {
+    referenceId = undefined;
+  }
+  if (!referenceId) referenceId = docs[docs.length - 1]?.id;
+  if (!referenceId) return null;
+
+  const inserted = editor.insertBlocks([metaBlock, titleHeading], referenceId, "after");
+  return inserted?.[1]?.id ?? null;
+}
+
 type AddFieldMenuProps = {
   kind: "test" | "suite";
   usedKeys: string[];
@@ -214,7 +285,9 @@ export const testMetaBlock = createReactBlockSpec(
           draggable={false}
         >
           <div className="bn-testmeta__header">
-            <span className="bn-testmeta__label">{kind.toUpperCase()}</span>
+            <span className="bn-testmeta__label">
+              {kind === "test" && !idField?.value ? "NEW TEST" : kind.toUpperCase()}
+            </span>
             {idField?.value && <span className="bn-testmeta__id">{idField.value}</span>}
             {!expanded && (
               <button

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);
 }
@@ -974,6 +998,19 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   color: var(--text-muted);
 }
 
+/*
+ * The "new test" title heading is inserted directly after a testMeta panel, so it
+ * is the block-outer immediately following the one containing a testMeta block.
+ * Override BlockNote's injected "Heading" placeholder just for that heading.
+ * !important beats the dynamically injected placeholder rule.
+ */
+.bn-block-outer:has(.bn-block-content[data-content-type="testMeta"])
+  + .bn-block-outer
+  .bn-block-content[data-content-type="heading"]
+  .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: "Enter test title" !important;
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }
@@ -1432,6 +1469,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/src/index.ts

@@ -6,7 +6,7 @@ export {
 } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
-export { testMetaBlock } from "./editor/blocks/testMeta";
+export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export {
   setMetaFieldSuggestions,
   getMetaFieldSuggestions,

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 };
-}