testomatio-editor-blocks 0.4.66 → 0.4.67

package/src/editor/createMarkdownPasteHandler.test.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createMarkdownPasteHandler } from "./createMarkdownPasteHandler";
+
+// These tests lock in the rendering-performance contract of the paste handler:
+// a large paste must NOT build the whole document in one synchronous shot
+// (which froze the editor for ~1.6s on a 1000-block document). Only a small
+// first chunk is inserted synchronously; the rest is streamed in deferred
+// (idle/timeout) batches. They assert behaviour, not wall-clock, so they are
+// deterministic and CI-safe.
+
+type Recorded = { content: { text: string }[]; id?: string };
+
+function makeBlocks(n: number) {
+  return Array.from({ length: n }, (_, i) => ({
+    type: "paragraph",
+    content: [{ type: "text", text: `line ${i}`, styles: {} }],
+  }));
+}
+
+function makeEditor() {
+  let idSeq = 0;
+  const inserted: Recorded[] = [];
+  const assignIds = (blocks: any[]) => blocks.map((b) => ({ ...b, id: `b${idSeq++}` }));
+
+  const editor: any = {
+    document: [{ id: "cursor", type: "paragraph", content: [] }],
+    getSelection: () => ({ blocks: [] }),
+    getTextCursorPosition: () => ({ block: editor.document[0] }),
+    replaceBlocks: vi.fn((_ids: string[], blocks: any[]) => {
+      const withIds = assignIds(blocks);
+      inserted.push(...withIds);
+      return { insertedBlocks: withIds, removedBlocks: [] };
+    }),
+    insertBlocks: vi.fn((blocks: any[]) => {
+      const withIds = assignIds(blocks);
+      inserted.push(...withIds);
+      return withIds;
+    }),
+    focus: vi.fn(),
+  };
+  return { editor, inserted };
+}
+
+function makeEvent(text: string): any {
+  return {
+    clipboardData: {
+      types: ["text/plain"],
+      getData: (type: string) => (type === "text/plain" ? text : ""),
+    },
+  };
+}
+
+const defaultPasteHandler = vi.fn(() => true);
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+describe("createMarkdownPasteHandler — chunked rendering", () => {
+  it("inserts a small paste in a single synchronous transaction", () => {
+    const N = 20;
+    const handler = createMarkdownPasteHandler(() => makeBlocks(N) as any);
+    const { editor, inserted } = makeEditor();
+
+    vi.useFakeTimers();
+    const result = handler({
+      event: makeEvent("a\nb\nc"),
+      editor,
+      defaultPasteHandler,
+    });
+
+    expect(result).toBe(true);
+    expect(inserted.length).toBe(N); // everything inserted up front
+    expect(editor.replaceBlocks).toHaveBeenCalledTimes(1);
+    expect(editor.insertBlocks).not.toHaveBeenCalled(); // nothing deferred
+    expect(vi.getTimerCount()).toBe(0); // no background work scheduled
+  });
+
+  it("does NOT render a large paste synchronously — only a bounded first chunk", () => {
+    const N = 1000;
+    const handler = createMarkdownPasteHandler(() => makeBlocks(N) as any);
+    const { editor, inserted } = makeEditor();
+
+    vi.useFakeTimers();
+    handler({ event: makeEvent("big\npaste"), editor, defaultPasteHandler });
+
+    const syncCount = inserted.length;
+    expect(syncCount).toBeGreaterThan(0);
+    expect(syncCount).toBeLessThan(N); // the whole doc was NOT built synchronously
+    expect(syncCount).toBeLessThanOrEqual(100); // first chunk stays small
+    expect(editor.replaceBlocks).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBeGreaterThan(0); // remainder is scheduled, not run
+  });
+
+  it("eventually streams in every block exactly once and in order", () => {
+    const N = 1000;
+    const handler = createMarkdownPasteHandler(() => makeBlocks(N) as any);
+    const { editor, inserted } = makeEditor();
+
+    vi.useFakeTimers();
+    handler({ event: makeEvent("big\npaste"), editor, defaultPasteHandler });
+    vi.runAllTimers(); // flush all deferred batches
+
+    expect(inserted.length).toBe(N);
+    inserted.forEach((block, i) => {
+      expect(block.content[0].text).toBe(`line ${i}`);
+    });
+
+    // Every background batch is bounded — no single batch rebuilds the doc.
+    for (const call of editor.insertBlocks.mock.calls) {
+      expect((call[0] as any[]).length).toBeLessThanOrEqual(100);
+    }
+  });
+
+  it("delegates to the default handler when the converter yields nothing", () => {
+    const handler = createMarkdownPasteHandler(() => [] as any);
+    const { editor } = makeEditor();
+
+    const result = handler({ event: makeEvent("x"), editor, defaultPasteHandler });
+
+    expect(result).toBe(true);
+    expect(defaultPasteHandler).toHaveBeenCalled();
+    expect(editor.replaceBlocks).not.toHaveBeenCalled();
+  });
+});

package/src/editor/createMarkdownPasteHandler.ts

@@ -12,6 +12,25 @@ type PasteHandlerContext = {
 
 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;
+
+type ScheduleFn = (cb: () => void) => void;
+
+const scheduleIdle: ScheduleFn =
+  typeof window !== "undefined" && typeof (window as any).requestIdleCallback === "function"
+    ? (cb) => (window as any).requestIdleCallback(() => cb(), { timeout: 200 })
+    : (cb) => setTimeout(cb, 0);
+
+function lastBlockId(blocks: Array<{ id?: string }>): string | undefined {
+  return blocks.length ? blocks[blocks.length - 1]?.id : undefined;
+}
+
 function isInlineOnlyPaste(plainText: string, parsedBlocks: CustomPartialBlock[]): boolean {
   if (parsedBlocks.length !== 1) return false;
   const [block] = parsedBlocks;
@@ -55,18 +74,51 @@ export function createMarkdownPasteHandler(
         ?.map((block: any) => block.id)
         .filter((id: unknown): id is string => Boolean(id)) ?? [];
 
-      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: CustomPartialBlock[],
+      ): Array<{ id?: string }> | null => {
+        if (selectedIds.length > 0) {
+          return editor.replaceBlocks(selectedIds, blocksToInsert).insertedBlocks;
+        }
         const cursorBlock = editor.getTextCursorPosition().block;
         if (cursorBlock) {
-          editor.replaceBlocks([cursorBlock.id], parsedBlocks);
-        } else if (editor.document.length > 0) {
+          return editor.replaceBlocks([cursorBlock.id], blocksToInsert).insertedBlocks;
+        }
+        if (editor.document.length > 0) {
           const reference = editor.document[editor.document.length - 1];
-          editor.insertBlocks(parsedBlocks, reference.id, "after");
-        } else {
-          return defaultPasteHandler();
+          return editor.insertBlocks(blocksToInsert, reference.id, "after");
         }
+        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 = () => {
+          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 = lastBlockId(insertedBatch) ?? anchorId;
+          } catch {
+            return; // stop streaming on any structural error
+          }
+          if (cursor < rest.length) scheduleIdle(pump);
+        };
+        scheduleIdle(pump);
       }
 
       editor.focus();

package/src/editor/renderingPerf.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { markdownToBlocks } from "./customMarkdownConverter";
+
+// Coarse regression guard for parse cost. Parsing was never the bottleneck
+// (~5-15ms for a 1000-block document) — rendering was — but a future change
+// could accidentally make the parser quadratic. These use best-of-N timing
+// (noise only ever adds time, so the minimum approximates true compute cost)
+// with generous bounds, so they only fail on a real algorithmic regression.
+
+function generateMarkdown(testCases: number): string {
+  const parts: string[] = ["<!-- suite -->", "# Generated Suite", ""];
+  for (let t = 0; t < testCases; t++) {
+    parts.push("<!-- test\nid: @T" + t + "\n-->");
+    parts.push("# Test case number " + t);
+    parts.push("## Steps", "");
+    for (let s = 0; s < 6; s++) {
+      parts.push("* Perform action " + s + " in test " + t);
+      parts.push("  *Expected:* Result " + s + " is observed in test " + t);
+    }
+    parts.push("");
+  }
+  return parts.join("\n");
+}
+
+function bestOfMs(runs: number, fn: () => void): number {
+  // warm up the JIT first
+  for (let i = 0; i < 3; i++) fn();
+  let min = Infinity;
+  for (let i = 0; i < runs; i++) {
+    const t0 = performance.now();
+    fn();
+    min = Math.min(min, performance.now() - t0);
+  }
+  return min;
+}
+
+describe("rendering perf — markdown parsing stays fast", () => {
+  it("parses a large (1000+ block) document well within budget", () => {
+    const md = generateMarkdown(150);
+    const blocks = markdownToBlocks(md);
+    expect(blocks.length).toBeGreaterThan(500);
+
+    const ms = bestOfMs(8, () => markdownToBlocks(md));
+    // ~20-50x headroom over the real ~5-15ms cost.
+    expect(ms).toBeLessThan(250);
+  });
+
+  it("scales sub-quadratically with document size", () => {
+    const small = generateMarkdown(100);
+    const large = generateMarkdown(400); // 4x the content
+
+    const tSmall = bestOfMs(8, () => markdownToBlocks(small));
+    const tLarge = bestOfMs(8, () => markdownToBlocks(large));
+
+    // 4x the input: linear parsing ≈ 4x time, quadratic ≈ 16x. Allow a generous
+    // 8x (plus a small cushion for tiny-time measurement noise).
+    expect(tLarge).toBeLessThan(tSmall * 8 + 5);
+  });
+});

package/src/editor/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;