testomatio-editor-blocks 0.4.65 → 0.4.67

package/src/editor/blocks/testMeta.tsx

@@ -0,0 +1,242 @@
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ChangeEvent } from "react";
+import { getMetaFieldSuggestions } from "../testMetaFields";
+
+export type MetaField = { key: string; value: string };
+
+const ID_KEYS = new Set(["id"]);
+
+function parseMetaFields(raw: unknown): MetaField[] {
+  if (typeof raw !== "string" || raw.trim().length === 0) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed
+      .filter((item) => item && typeof item === "object")
+      .map((item) => ({
+        key: typeof item.key === "string" ? item.key : "",
+        value: typeof item.value === "string" ? item.value : "",
+      }));
+  } catch {
+    return [];
+  }
+}
+
+export function serializeMetaFields(fields: MetaField[]): string {
+  return JSON.stringify(fields);
+}
+
+type AddFieldMenuProps = {
+  kind: "test" | "suite";
+  usedKeys: string[];
+  onPick: (key: string) => void;
+};
+
+function AddFieldMenu({ kind, usedKeys, onPick }: AddFieldMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+
+  const available = useMemo(() => {
+    const used = new Set(usedKeys.map((k) => k.trim().toLowerCase()));
+    return getMetaFieldSuggestions(kind).filter((s) => !used.has(s.key.trim().toLowerCase()));
+  }, [kind, usedKeys]);
+
+  const pick = useCallback(
+    (key: string) => {
+      onPick(key);
+      setIsOpen(false);
+    },
+    [onPick],
+  );
+
+  return (
+    <div className="bn-testmeta__add-wrap" ref={containerRef}>
+      <button
+        type="button"
+        className="bn-testmeta__add"
+        aria-label="Add field"
+        title="Add field"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        +
+      </button>
+      {isOpen && (
+        <div className="bn-testmeta__menu" role="listbox">
+          {available.map((suggestion) => (
+            <button
+              type="button"
+              key={suggestion.key}
+              role="option"
+              className="bn-testmeta__menu-item"
+              onMouseDown={(event) => {
+                event.preventDefault();
+                pick(suggestion.key);
+              }}
+            >
+              {suggestion.label ?? suggestion.key}
+            </button>
+          ))}
+          <button
+            type="button"
+            className="bn-testmeta__menu-item bn-testmeta__menu-item--custom"
+            onMouseDown={(event) => {
+              event.preventDefault();
+              pick("");
+            }}
+          >
+            Custom field…
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const testMetaBlock = createReactBlockSpec(
+  {
+    type: "testMeta",
+    content: "none",
+    propSchema: {
+      // "test" | "suite" — which keyword the comment opened with.
+      metaKind: {
+        default: "test",
+      },
+      // JSON-encoded MetaField[] so insertion order is preserved.
+      metaFields: {
+        default: "[]",
+      },
+      // true when the source comment was a one-liner (`<!-- test id: @T.. -->`).
+      metaInline: {
+        default: false,
+      },
+    },
+  },
+  {
+    render: ({ block, editor }) => {
+      const kind = (block.props.metaKind as string) === "suite" ? "suite" : "test";
+      const fields = useMemo(
+        () => parseMetaFields(block.props.metaFields),
+        [block.props.metaFields],
+      );
+
+      const commitFields = useCallback(
+        (next: MetaField[]) => {
+          editor.updateBlock(block.id, {
+            props: { metaFields: serializeMetaFields(next) } as any,
+          });
+        },
+        [block.id, editor],
+      );
+
+      const handleValueChange = useCallback(
+        (index: number, value: string) => {
+          const next = fields.map((field, i) =>
+            i === index ? { ...field, value } : field,
+          );
+          commitFields(next);
+        },
+        [fields, commitFields],
+      );
+
+      const handleKeyChange = useCallback(
+        (index: number, key: string) => {
+          const next = fields.map((field, i) =>
+            i === index ? { ...field, key } : field,
+          );
+          commitFields(next);
+        },
+        [fields, commitFields],
+      );
+
+      const handleRemove = useCallback(
+        (index: number) => {
+          commitFields(fields.filter((_, i) => i !== index));
+        },
+        [fields, commitFields],
+      );
+
+      const handleAddField = useCallback(
+        (key: string) => {
+          commitFields([...fields, { key, value: "" }]);
+        },
+        [fields, commitFields],
+      );
+
+      const usedKeys = useMemo(() => fields.map((f) => f.key), [fields]);
+
+      // The read-only `id` is shown inline on the header line next to the kind
+      // label; every other field renders as an editable row below.
+      const idField = fields.find((f) => ID_KEYS.has(f.key.trim().toLowerCase()));
+      const editableFields = fields
+        .map((field, index) => ({ field, index }))
+        .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
+
+      return (
+        <div
+          className="bn-testmeta"
+          data-block-id={block.id}
+          data-kind={kind}
+          contentEditable={false}
+          suppressContentEditableWarning
+          draggable={false}
+        >
+          <div className="bn-testmeta__header">
+            <span className="bn-testmeta__label">{kind.toUpperCase()}</span>
+            {idField?.value && <span className="bn-testmeta__id">{idField.value}</span>}
+            <AddFieldMenu kind={kind} usedKeys={usedKeys} onPick={handleAddField} />
+          </div>
+
+          {editableFields.length > 0 && (
+            <div className="bn-testmeta__rows">
+              {editableFields.map(({ field, index }) => (
+                <div className="bn-testmeta__row" key={index}>
+                  <input
+                    className="bn-testmeta__key bn-testmeta__key--input"
+                    type="text"
+                    value={field.key}
+                    placeholder="key"
+                    spellCheck={false}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => handleKeyChange(index, e.target.value)}
+                  />
+                  <input
+                    className="bn-testmeta__value"
+                    type="text"
+                    value={field.value}
+                    placeholder="value"
+                    spellCheck={false}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => handleValueChange(index, e.target.value)}
+                  />
+                  <button
+                    type="button"
+                    className="bn-testmeta__remove"
+                    aria-label="Remove field"
+                    title="Remove field"
+                    onClick={() => handleRemove(index)}
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    },
+  },
+);

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

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/customMarkdownConverter.test.ts

@@ -3053,3 +3053,138 @@ describe("blank line <-> empty paragraph mapping", () => {
     expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
   });
 });
+
+describe("test/suite metadata comments", () => {
+  it("parses a one-liner test comment into a testMeta block", () => {
+    const blocks = markdownToBlocks("<!-- test id: @T12345678 -->");
+    expect(blocks).toEqual([
+      {
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([{ key: "id", value: "@T12345678" }]),
+          metaInline: true,
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips a one-liner test comment", () => {
+    const markdown = "<!-- test id: @T12345678 -->";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("parses a multi-line suite block with ordered fields", () => {
+    const markdown = [
+      "<!-- suite",
+      "id: @S12345678",
+      "emoji: 🔐",
+      "tags: smoke, regression",
+      "assignee: qa@example.com",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toEqual([
+      {
+        type: "testMeta",
+        props: {
+          metaKind: "suite",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@S12345678" },
+            { key: "emoji", value: "🔐" },
+            { key: "tags", value: "smoke, regression" },
+            { key: "assignee", value: "qa@example.com" },
+          ]),
+          metaInline: false,
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips a multi-line suite block", () => {
+    const markdown = [
+      "<!-- suite",
+      "id: @S12345678",
+      "emoji: 🔐",
+      "tags: smoke, regression",
+      "assignee: qa@example.com",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("ignores lines without a colon inside a metadata block", () => {
+    const markdown = [
+      "<!-- test",
+      "id: @T12345678",
+      "this line is ignored",
+      "priority: high",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect((blocks[0].props as any).metaFields).toBe(
+      JSON.stringify([
+        { key: "id", value: "@T12345678" },
+        { key: "priority", value: "high" },
+      ]),
+    );
+  });
+
+  it("serializes a one-liner that gained extra fields as a block", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "m1",
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@T12345678" },
+            { key: "priority", value: "high" },
+          ]),
+          metaInline: true,
+        } as any,
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["<!-- test", "id: @T12345678", "priority: high", "-->"].join("\n"),
+    );
+  });
+
+  it("skips fields with empty values when serializing", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "m2",
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@T12345678" },
+            { key: "priority", value: "high" },
+            { key: "tags", value: "" },
+            { key: "", value: "orphan" },
+          ]),
+          metaInline: false,
+        } as any,
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["<!-- test", "id: @T12345678", "priority: high", "-->"].join("\n"),
+    );
+  });
+
+  it("leaves a generic HTML comment as paragraph text", () => {
+    const blocks = markdownToBlocks("<!-- ai/agent generated description -->");
+    expect(blocks[0].type).toBe("paragraph");
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(
+      "<!-- ai/agent generated description -->",
+    );
+  });
+});