testomatio-editor-blocks 0.4.66 → 0.4.67

package/package/editor/createMarkdownPasteHandler.js

@@ -1,4 +1,18 @@
 const BLOCK_MARKDOWN_PREFIX = /^(\s*)(#{1,6}\s|[-*+]\s|\d+[.)]\s|>\s|```|~~~|\||!\[)/;
+// For large pastes, only the first chunk is inserted synchronously (enough to
+// fill the viewport); the remaining blocks are streamed in during idle time so
+// the editor stays responsive and the user sees content immediately instead of
+// the main thread freezing while a thousand-block document is built at once.
+const CHUNK_THRESHOLD = 150;
+const FIRST_CHUNK = 50;
+const REST_CHUNK = 40;
+const scheduleIdle = typeof window !== "undefined" && typeof window.requestIdleCallback === "function"
+    ? (cb) => window.requestIdleCallback(() => cb(), { timeout: 200 })
+    : (cb) => setTimeout(cb, 0);
+function lastBlockId(blocks) {
+    var _a;
+    return blocks.length ? (_a = blocks[blocks.length - 1]) === null || _a === void 0 ? void 0 : _a.id : undefined;
+}
 function isInlineOnlyPaste(plainText, parsedBlocks) {
     if (parsedBlocks.length !== 1)
         return false;
@@ -41,21 +55,54 @@ export function createMarkdownPasteHandler(converter) {
             }
             const selection = editor.getSelection();
             const selectedIds = (_h = (_g = selection === null || selection === void 0 ? void 0 : selection.blocks) === null || _g === void 0 ? void 0 : _g.map((block) => block.id).filter((id) => Boolean(id))) !== null && _h !== void 0 ? _h : [];
-            if (selectedIds.length > 0) {
-                editor.replaceBlocks(selectedIds, parsedBlocks);
-            }
-            else {
+            // Insert the initial set of blocks at the paste location, returning the
+            // inserted blocks so subsequent chunks can be appended after the last one.
+            const insertInitial = (blocksToInsert) => {
+                if (selectedIds.length > 0) {
+                    return editor.replaceBlocks(selectedIds, blocksToInsert).insertedBlocks;
+                }
                 const cursorBlock = editor.getTextCursorPosition().block;
                 if (cursorBlock) {
-                    editor.replaceBlocks([cursorBlock.id], parsedBlocks);
+                    return editor.replaceBlocks([cursorBlock.id], blocksToInsert).insertedBlocks;
                 }
-                else if (editor.document.length > 0) {
+                if (editor.document.length > 0) {
                     const reference = editor.document[editor.document.length - 1];
-                    editor.insertBlocks(parsedBlocks, reference.id, "after");
+                    return editor.insertBlocks(blocksToInsert, reference.id, "after");
                 }
-                else {
+                return null;
+            };
+            if (parsedBlocks.length <= CHUNK_THRESHOLD) {
+                // Small paste: insert everything in one transaction (original behaviour).
+                if (insertInitial(parsedBlocks) === null)
                     return defaultPasteHandler();
-                }
+            }
+            else {
+                // Large paste: render the first screenful now, stream the rest in idle
+                // time so the main thread is never blocked building the whole document.
+                const firstChunk = parsedBlocks.slice(0, FIRST_CHUNK);
+                const rest = parsedBlocks.slice(FIRST_CHUNK);
+                const inserted = insertInitial(firstChunk);
+                if (inserted === null)
+                    return defaultPasteHandler();
+                let anchorId = lastBlockId(inserted);
+                let cursor = 0;
+                const pump = () => {
+                    var _a;
+                    if (!anchorId || cursor >= rest.length)
+                        return;
+                    const batch = rest.slice(cursor, cursor + REST_CHUNK);
+                    cursor += REST_CHUNK;
+                    try {
+                        const insertedBatch = editor.insertBlocks(batch, anchorId, "after");
+                        anchorId = (_a = lastBlockId(insertedBatch)) !== null && _a !== void 0 ? _a : anchorId;
+                    }
+                    catch {
+                        return; // stop streaming on any structural error
+                    }
+                    if (cursor < rest.length)
+                        scheduleIdle(pump);
+                };
+                scheduleIdle(pump);
             }
             editor.focus();
             return true;

package/package/styles.css

@@ -1240,6 +1240,20 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   min-height: 4rem;
 }
 
+/* Static stand-in shown before a step's interactive editor is lazily mounted.
+   Mirrors the OverType inner padding/typography so document height stays stable. */
+.bn-step-editor--preview {
+  padding: 10px 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #262626;
+  cursor: text;
+}
+
+html.dark .bn-step-editor--preview {
+  color: #e5e5e5;
+}
+
 .bn-step-editor.bn-step-editor--focused {
   outline: none;
   box-shadow: none;

package/package.json

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

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { BlockNoteView } from "@blocknote/mantine";
 import {
   useCreateBlockNote,
@@ -430,22 +430,42 @@ function App() {
     document.documentElement.classList.toggle("dark", darkMode);
   }, [darkMode]);
 
+  // Re-serializing the whole document (Markdown + pretty JSON) on every change
+  // is wasteful during bursts like a large paste, where the document mutates
+  // many times in quick succession (chunked streaming). Debounce so the preview
+  // panels update once the document settles instead of on every intermediate
+  // edit, keeping the editor responsive.
+  const serializeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEditorChange((editorInstance) => {
-    try {
-      const documentBlocks = editorInstance.document as CustomEditorBlock[];
-      const md = blocksToMarkdown(documentBlocks);
-      setMarkdown(md);
-      setBlocksJson(JSON.stringify(documentBlocks, null, 2));
-      setConversionError(null);
-      setCopyStatus("idle");
-      setCopyBlocksStatus("idle");
-    } catch (error) {
-      setConversionError(error instanceof Error ? error.message : String(error));
-      setCopyStatus("idle");
-      setCopyBlocksStatus("idle");
+    if (serializeTimerRef.current !== null) {
+      clearTimeout(serializeTimerRef.current);
     }
+    serializeTimerRef.current = setTimeout(() => {
+      serializeTimerRef.current = null;
+      try {
+        const documentBlocks = editorInstance.document as CustomEditorBlock[];
+        const md = blocksToMarkdown(documentBlocks);
+        setMarkdown(md);
+        setBlocksJson(JSON.stringify(documentBlocks, null, 2));
+        setConversionError(null);
+        setCopyStatus("idle");
+        setCopyBlocksStatus("idle");
+      } catch (error) {
+        setConversionError(error instanceof Error ? error.message : String(error));
+        setCopyStatus("idle");
+        setCopyBlocksStatus("idle");
+      }
+    }, 120);
   }, editor);
 
+  useEffect(() => {
+    return () => {
+      if (serializeTimerRef.current !== null) {
+        clearTimeout(serializeTimerRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (!editor) {
       return;

package/src/editor/blocks/step.tsx

@@ -2,6 +2,7 @@ import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
+import { useDeferredMount } from "./useDeferredMount";
 import { useStepImageUpload } from "../stepImageUpload";
 import type { StepSuggestion } from "../stepAutocomplete";
 
@@ -227,27 +228,176 @@ export function addSnippetBlock(editor: {
   return inserted?.[1]?.id ?? null;
 }
 
-export const stepBlock = createReactBlockSpec(
-  {
-    type: "testStep",
-    content: "none",
-    propSchema: {
-      stepTitle: {
-        default: "",
-      },
-      stepData: {
-        default: "",
-      },
-      expectedResult: {
-        default: "",
-      },
-      listStyle: {
-        default: "bullet",
-      },
-    },
-  },
-  {
-    render: ({ block, editor }) => {
+/**
+ * A test step's 1-based position within its group: count back over preceding
+ * steps (blank lines don't break the run) until a non-step block.
+ */
+export function computeStepNumber(allBlocks: any[], blockId: string): number {
+  const blockIndex = allBlocks.findIndex((b) => b.id === blockId);
+  if (blockIndex < 0) return 1;
+
+  let count = 1;
+  for (let i = blockIndex - 1; i >= 0; i--) {
+    const b = allBlocks[i];
+    if (b.type === "testStep") {
+      count++;
+    } else if (isEmptyParagraph(b)) {
+      continue;
+    } else {
+      break;
+    }
+  }
+  return count;
+}
+
+/** Strip the most common inline markdown markers for a readable static preview. */
+function stripMarkdownForPreview(text: string): string {
+  return text
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/(\*\*|__|\*|_|~~|`)/g, "")
+    .replace(/<\/?[^>]+>/g, "")
+    .trim();
+}
+
+/**
+ * Cheap static stand-in shown before a step's interactive editor is mounted.
+ * Mirrors the real step's structure/typography so the document height stays
+ * stable and so it reads correctly during the brief window before upgrade.
+ */
+function TestStepPreview({
+  blockId,
+  stepNumber,
+  stepTitle,
+  stepData,
+  expectedResult,
+}: {
+  blockId: string;
+  stepNumber: number;
+  stepTitle: string;
+  stepData: string;
+  expectedResult: string;
+}) {
+  const titleText = stripMarkdownForPreview(stepTitle);
+  const dataText = stripMarkdownForPreview(stepData);
+  const expectedText = stripMarkdownForPreview(expectedResult);
+
+  return (
+    <div className="bn-teststep" data-block-id={blockId}>
+      <div className="bn-teststep__timeline">
+        <span className="bn-teststep__number">{stepNumber}</span>
+        <div className="bn-teststep__line" />
+      </div>
+      <div className="bn-teststep__content">
+        <div className="bn-teststep__header">
+          <span className="bn-teststep__title">Step</span>
+        </div>
+        <div className="bn-step-field">
+          <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
+            {titleText || " "}
+          </div>
+        </div>
+        {dataText ? (
+          <div className="bn-step-field">
+            <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
+              {dataText}
+            </div>
+          </div>
+        ) : null}
+        {expectedText ? (
+          <div className="bn-step-field">
+            <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
+              {expectedText}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Wrapper that defers mounting the (expensive) interactive step editor until
+ * the block scrolls into view. Off-screen steps render {@link TestStepPreview}
+ * instead, which is what keeps pasting/loading a large test document fast.
+ *
+ * The step number is tracked here and pushed down as a prop. We subscribe to
+ * editor changes but bail out of re-rendering when the number is unchanged, so
+ * ordinary text edits don't re-render every step in the document.
+ */
+function TestStepBlock({ block, editor }: { block: any; editor: any }) {
+  // An empty step is almost always a freshly-inserted one that needs to focus
+  // its title immediately, so mount its real editor eagerly. Steps with content
+  // (e.g. from a large paste) can safely start as a cheap preview.
+  const isEmptyStep =
+    !((block.props.stepTitle as string) || "") &&
+    !((block.props.stepData as string) || "") &&
+    !((block.props.expectedResult as string) || "");
+  const { ref, active, activate, shouldFocusOnActivate } = useDeferredMount<HTMLDivElement>({
+    initiallyActive: isEmptyStep,
+  });
+  const [stepNumber, setStepNumber] = useState(() =>
+    computeStepNumber(editor.document, block.id),
+  );
+
+  useEditorChange(() => {
+    // Recompute on change, but bail out of the state update (and therefore the
+    // re-render) when the number is unchanged. This is the key win: ordinary
+    // text edits leave every step's number untouched, so they don't re-render
+    // the whole step list.
+    const next = computeStepNumber(editor.document, block.id);
+    setStepNumber((prev) => (prev === next ? prev : next));
+  }, editor);
+
+  if (active) {
+    // Empty steps mounted eagerly (freshly inserted) auto-focus their title.
+    // A preview upgraded by a click focuses its field too, so a single click
+    // starts editing. Steps upgraded passively (scroll-into-view, hover
+    // pre-warm) must never steal focus.
+    return (
+      <TestStepContent
+        block={block}
+        editor={editor}
+        stepNumber={stepNumber}
+        autoFocusEnabled={isEmptyStep}
+        focusOnMount={shouldFocusOnActivate}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      onMouseDownCapture={() => activate(true)}
+      onFocusCapture={() => activate(true)}
+    >
+      <TestStepPreview
+        blockId={block.id}
+        stepNumber={stepNumber}
+        stepTitle={(block.props.stepTitle as string) || ""}
+        stepData={(block.props.stepData as string) || ""}
+        expectedResult={(block.props.expectedResult as string) || ""}
+      />
+    </div>
+  );
+}
+
+function TestStepContent({
+  block,
+  editor,
+  stepNumber,
+  autoFocusEnabled = false,
+  focusOnMount = false,
+}: {
+  block: any;
+  editor: any;
+  stepNumber: number;
+  autoFocusEnabled?: boolean;
+  focusOnMount?: boolean;
+}) {
+      // When a preview is upgraded by a click, focus its primary field once on
+      // mount so a single click starts editing (caret at end).
+      const mountFocusSignal = focusOnMount ? 1 : 0;
       const stepTitle = (block.props.stepTitle as string) || "";
       const stepData = (block.props.stepData as string) || "";
       const expectedResult = (block.props.expectedResult as string) || "";
@@ -259,7 +409,6 @@ export const stepBlock = createReactBlockSpec(
       );
       const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
       const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
-      const [documentVersion, setDocumentVersion] = useState(0);
       const uploadImage = useStepImageUpload();
       const [viewMode, setViewMode] = useState<StepViewMode>(() => readStepViewMode());
       const containerRef = useRef<HTMLDivElement>(null);
@@ -279,30 +428,6 @@ export const stepBlock = createReactBlockSpec(
 
       const effectiveVertical = forceVertical || viewMode === "vertical";
 
-      // Calculate step number based on position in document
-      const stepNumber = useMemo(() => {
-        const allBlocks = editor.document;
-        const blockIndex = allBlocks.findIndex((b) => b.id === block.id);
-        if (blockIndex < 0) return 1;
-
-        let count = 1;
-        for (let i = blockIndex - 1; i >= 0; i--) {
-          const b = allBlocks[i];
-          if (b.type === "testStep") {
-            count++;
-          } else if (isEmptyParagraph(b)) {
-            continue;
-          } else {
-            break;
-          }
-        }
-        return count;
-      }, [block.id, documentVersion, editor.document]);
-
-      useEditorChange(() => {
-        setDocumentVersion((version) => version + 1);
-      }, editor);
-
       useEffect(() => {
         if (typeof window === "undefined") {
           return;
@@ -501,6 +626,7 @@ export const stepBlock = createReactBlockSpec(
             onInsertNextStep={handleInsertNextStep}
             onFieldFocus={handleFieldFocus}
             viewToggle={viewToggleButton}
+            focusSignal={mountFocusSignal}
           />
         );
       }
@@ -522,7 +648,8 @@ export const stepBlock = createReactBlockSpec(
               value={stepTitle}
               placeholder={STEP_TITLE_PLACEHOLDER}
               onChange={handleStepTitleChange}
-              autoFocus={stepTitle.length === 0}
+              autoFocus={autoFocusEnabled && stepTitle.length === 0}
+              focusSignal={mountFocusSignal}
               multiline
               disableNewlines
               enableAutocomplete
@@ -634,6 +761,30 @@ export const stepBlock = createReactBlockSpec(
           </div>
         </div>
       );
+}
+
+export const stepBlock = createReactBlockSpec(
+  {
+    type: "testStep",
+    content: "none",
+    propSchema: {
+      stepTitle: {
+        default: "",
+      },
+      stepData: {
+        default: "",
+      },
+      expectedResult: {
+        default: "",
+      },
+      listStyle: {
+        default: "bullet",
+      },
     },
   },
+  {
+    render: ({ block, editor }) => (
+      <TestStepBlock block={block} editor={editor} />
+    ),
+  },
 );

package/src/editor/blocks/stepHorizontalView.tsx

@@ -15,6 +15,7 @@ type StepHorizontalViewProps = {
   onInsertNextStep: () => void;
   onFieldFocus: () => void;
   viewToggle?: ReactNode;
+  focusSignal?: number;
 };
 
 export const StepHorizontalView = forwardRef<HTMLDivElement, StepHorizontalViewProps>(function StepHorizontalView({
@@ -27,6 +28,7 @@ export const StepHorizontalView = forwardRef<HTMLDivElement, StepHorizontalViewP
   onInsertNextStep,
   onFieldFocus,
   viewToggle,
+  focusSignal,
 }, ref) {
   return (
     <div className="bn-teststep bn-teststep--horizontal" data-block-id={blockId} ref={ref}>
@@ -42,6 +44,7 @@ export const StepHorizontalView = forwardRef<HTMLDivElement, StepHorizontalViewP
               value={stepValue}
               onChange={onStepChange}
               placeholder={STEP_PLACEHOLDER}
+              focusSignal={focusSignal}
               enableAutocomplete
               fieldName="title"
               suggestionFilter={(suggestion) => (suggestion as StepSuggestion).isSnippet !== true}

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

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { computeStepNumber } from "./step";
+
+// Numbering correctness: a step's number is its position within its group.
+// Blank lines between steps don't break the run; any other block resets it.
+
+const heading = (id: string) => ({ id, type: "heading", content: [{ type: "text", text: "Steps" }] });
+const step = (id: string) => ({ id, type: "testStep", props: {} });
+const emptyPara = (id: string) => ({ id, type: "paragraph", content: [] });
+const para = (id: string, text: string) => ({ id, type: "paragraph", content: [{ type: "text", text }] });
+
+describe("computeStepNumber", () => {
+  it("numbers consecutive steps within a group", () => {
+    const doc = [heading("h"), step("a"), step("b"), step("c")];
+    expect(computeStepNumber(doc, "a")).toBe(1);
+    expect(computeStepNumber(doc, "b")).toBe(2);
+    expect(computeStepNumber(doc, "c")).toBe(3);
+  });
+
+  it("keeps counting across blank lines but resets after other content", () => {
+    const doc = [
+      heading("h"),
+      step("a"), // 1
+      emptyPara("e1"), // blank line — does not break the run
+      step("b"), // 2
+      para("note", "some note"), // non-step content resets the run
+      step("c"), // 1
+      step("d"), // 2
+    ];
+    expect(computeStepNumber(doc, "a")).toBe(1);
+    expect(computeStepNumber(doc, "b")).toBe(2);
+    expect(computeStepNumber(doc, "c")).toBe(1);
+    expect(computeStepNumber(doc, "d")).toBe(2);
+  });
+
+  it("falls back to 1 for an unknown block", () => {
+    expect(computeStepNumber([step("a")], "missing")).toBe(1);
+  });
+});

package/src/editor/blocks/useDeferredMount.ts

@@ -0,0 +1,66 @@
+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 };
+}