testomatio-editor-blocks 0.4.65 → 0.4.67

package/package/styles.css

@@ -595,6 +595,207 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   flex-shrink: 0;
 }
 
+/* ============================================
+   HEADING SIZES INSIDE THE EDITOR
+   Override BlockNote's default heading scale (3em / 2em / 1.3em) with a
+   compact 22px → 14px range. BlockNote derives heading font-size from the
+   `--level` custom property, so we just redefine it per level.
+   ============================================ */
+.testomatio-editor [data-content-type="heading"] {
+  --level: 22px; /* h1 (level 1 has no [data-level] rule of its own) */
+}
+.testomatio-editor [data-content-type="heading"][data-level="2"] {
+  --level: 20px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="3"] {
+  --level: 18px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="4"] {
+  --level: 16px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="5"] {
+  --level: 14px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="6"] {
+  --level: 14px;
+}
+/* Keep size stable during BlockNote's heading-transition animation. */
+.testomatio-editor [data-prev-level="1"] {
+  --prev-level: 22px;
+}
+.testomatio-editor [data-prev-level="2"] {
+  --prev-level: 20px;
+}
+.testomatio-editor [data-prev-level="3"] {
+  --prev-level: 18px;
+}
+
+/* ============================================
+   TEST / SUITE METADATA BLOCK
+   Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.
+   ============================================ */
+.bn-testmeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  background: var(--bg-muted);
+  /*border: 1px solid var(--border-default);*/
+  /* Stronger top edge signals that the test case begins below this line. */
+  border-top: 3px solid var(--color-slate-400);
+  /*border-radius: 8px;*/
+  margin-top: 2rem;
+  opacity: 0.5;
+}
+
+/* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
+   always share one row. */
+.bn-testmeta__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+}
+
+.bn-testmeta__header .bn-testmeta__add-wrap {
+  margin-left: auto;
+}
+
+.bn-testmeta__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.bn-testmeta__id {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.bn-testmeta__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bn-testmeta__row {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 8px;
+}
+
+.bn-testmeta__key {
+  min-width: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Defined values blend into the block like normal text, and only reveal the
+   input affordance on hover/focus ("activate on click"). */
+.bn-testmeta__key--input,
+.bn-testmeta__value {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: text;
+}
+
+.bn-testmeta__key--input:hover,
+.bn-testmeta__value:hover {
+  border-color: var(--border-light);
+}
+
+.bn-testmeta__key--input:focus,
+.bn-testmeta__value:focus {
+  outline: none;
+  background: var(--bg-white);
+  border-color: var(--step-input-border-focus);
+  box-shadow: 0 0 0 2px var(--step-input-shadow);
+}
+
+.bn-testmeta__remove,
+.bn-testmeta__add {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.bn-testmeta__remove:hover,
+.bn-testmeta__add:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__add-wrap {
+  position: relative;
+}
+
+.bn-testmeta__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 100;
+  min-width: 160px;
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--bg-white-opaque);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px var(--shadow-medium);
+}
+
+.bn-testmeta__menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.bn-testmeta__menu-item:hover {
+  background: var(--bg-muted);
+}
+
+.bn-testmeta__menu-item--custom {
+  margin-top: 2px;
+  border-top: 1px solid var(--border-light);
+  border-radius: 0 0 6px 6px;
+  color: var(--text-muted);
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }
@@ -1039,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.65",
+  "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,
@@ -347,11 +347,30 @@ function CustomSlashMenu() {
       },
     };
 
+    const addTestItem = {
+      key: "add_test" as any,
+      title: "Add Test",
+      subtext: "Insert test metadata (id, priority, tags…)",
+      group: "Test documentation",
+      icon: <span className="bn-suggestion-icon">@T</span>,
+      aliases: ["test", "metadata", "meta", "test id"],
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "testMeta",
+          props: {
+            metaKind: "test",
+            metaFields: "[]",
+            metaInline: false,
+          },
+        });
+      },
+    };
+
     const currentBlock = editor.getTextCursorPosition().block;
     const canInsert = canInsertStepOrSnippet(editor, currentBlock.id);
     const items = canInsert
-      ? [...defaultItems, stepItem, snippetItem]
-      : defaultItems;
+      ? [...defaultItems, stepItem, snippetItem, addTestItem]
+      : [...defaultItems, addTestItem];
     return filterSuggestionItems(items, query);
   };
 
@@ -411,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);
+  });
+});