testomatio-editor-blocks 0.4.79 → 0.4.82

package/src/App.tsx

@@ -21,6 +21,8 @@ import {
 import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { tagBadgeExtension } from "./editor/tagBadge";
+import { autoLinkExtension } from "./editor/autoLink";
+import { exampleTableHighlightExtension } from "./editor/exampleTableHighlight";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import {
@@ -307,9 +309,24 @@ const DEMO_USERS: MentionItem[] = [
 
 // Simulated "tests" API dataset — insertion uses the numeric id -> "@T{id}".
 const DEMO_TESTS: MentionItem[] = [
-  { id: "10231", label: "Login redirects to dashboard", detail: "#10231" },
-  { id: "10232", label: "Login rejects wrong password", detail: "#10232" },
-  { id: "10245", label: "Logout clears the session", detail: "#10245" },
+  {
+    id: "10231",
+    label: "Login redirects to dashboard",
+    detail:
+      "Given a registered user with valid credentials, when they submit the login form, the app authenticates against the API, persists the session token, and redirects to the dashboard within 2 seconds. Verifies the welcome banner shows the user's name and that the navigation reflects an authenticated state.",
+  },
+  {
+    id: "10232",
+    label: "Login rejects wrong password",
+    detail:
+      "Given a registered user, when they submit the login form with an incorrect password, the app keeps them on the login page, shows an inline 'Invalid email or password' error, does not create a session, and increments the failed-attempt counter used for rate limiting after five consecutive failures.",
+  },
+  {
+    id: "10245",
+    label: "Logout clears the session",
+    detail:
+      "Given an authenticated user on any page, when they trigger logout, the app revokes the session token server-side, clears local storage and cookies, redirects to the login screen, and ensures that pressing the browser back button does not restore access to protected routes.",
+  },
   { id: "10310", label: "Checkout applies discount code", detail: "#10310" },
   { id: "10311", label: "Checkout blocks empty cart", detail: "#10311" },
   { id: "10420", label: "Profile avatar upload", detail: "#10420" },
@@ -318,8 +335,18 @@ const DEMO_TESTS: MentionItem[] = [
 ];
 
 const DEMO_SUITES: MentionItem[] = [
-  { id: "1001", label: "Authentication", detail: "#1001" },
-  { id: "1002", label: "Checkout flow", detail: "#1002" },
+  {
+    id: "1001",
+    label: "Authentication",
+    detail:
+      "End-to-end coverage of the authentication surface: login with valid and invalid credentials, session persistence and expiry, logout and token revocation, password reset via email, rate limiting after repeated failures, and redirect behaviour for protected routes when unauthenticated.",
+  },
+  {
+    id: "1002",
+    label: "Checkout flow",
+    detail:
+      "Covers the full purchase journey from cart to confirmation: applying and rejecting discount codes, blocking checkout on an empty cart, tax and shipping calculation, payment authorization and failure handling, and the order confirmation screen with a valid receipt number.",
+  },
   { id: "1003", label: "User profile", detail: "#1003" },
   { id: "1004", label: "Notifications", detail: "#1004" },
   { id: "1005", label: "Admin panel", detail: "#1005" },
@@ -474,7 +501,7 @@ function CustomSlashMenu() {
 function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
-    extensions: [tagBadgeExtension()],
+    extensions: [tagBadgeExtension(), autoLinkExtension(), exampleTableHighlightExtension()],
     pasteHandler: createMarkdownPasteHandler(markdownToBlocks),
     uploadFile: async (file: File) => {
       const url = `https://placehold.co/600x400?text=${encodeURIComponent(file.name)}`;

package/src/editor/autoLink.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from "vitest";
+import { detectLinks } from "./autoLink";
+
+describe("detectLinks", () => {
+  it("detects a single https URL", () => {
+    expect(detectLinks("https://example.com")).toEqual([
+      { start: 0, end: 19, href: "https://example.com" },
+    ]);
+  });
+
+  it("detects an http URL", () => {
+    expect(detectLinks("http://example.com")).toEqual([
+      { start: 0, end: 18, href: "http://example.com" },
+    ]);
+  });
+
+  it("detects a URL embedded in prose", () => {
+    // "See https://example.com now" — the URL starts at index 4.
+    expect(detectLinks("See https://example.com now")).toEqual([
+      { start: 4, end: 23, href: "https://example.com" },
+    ]);
+  });
+
+  it("detects multiple URLs in one string", () => {
+    const matches = detectLinks("a https://a.com b http://b.com");
+    expect(matches).toEqual([
+      { start: 2, end: 15, href: "https://a.com" },
+      { start: 18, end: 30, href: "http://b.com" },
+    ]);
+  });
+
+  it("keeps a full URL with path, query and fragment", () => {
+    const url = "https://example.com/path/to?q=1&x=2#frag";
+    expect(detectLinks(url)).toEqual([{ start: 0, end: url.length, href: url }]);
+  });
+
+  it("trims a trailing sentence period", () => {
+    expect(detectLinks("Read https://example.com.")).toEqual([
+      { start: 5, end: 24, href: "https://example.com" },
+    ]);
+  });
+
+  it("trims trailing punctuation like comma and question mark", () => {
+    expect(detectLinks("go to https://a.com, ok?")).toEqual([
+      { start: 6, end: 19, href: "https://a.com" },
+    ]);
+    expect(detectLinks("is it https://a.com?")).toEqual([
+      { start: 6, end: 19, href: "https://a.com" },
+    ]);
+  });
+
+  it("excludes an unbalanced closing paren wrapping the URL", () => {
+    expect(detectLinks("(see https://example.com)")).toEqual([
+      { start: 5, end: 24, href: "https://example.com" },
+    ]);
+  });
+
+  it("keeps balanced parentheses that belong to the URL", () => {
+    const url = "https://en.wikipedia.org/wiki/Foo_(bar)";
+    expect(detectLinks(url)).toEqual([{ start: 0, end: url.length, href: url }]);
+  });
+
+  it("keeps a balanced paren but trims the trailing sentence period", () => {
+    const text = "https://en.wikipedia.org/wiki/Foo_(bar).";
+    expect(detectLinks(text)).toEqual([
+      {
+        start: 0,
+        end: text.length - 1,
+        href: "https://en.wikipedia.org/wiki/Foo_(bar)",
+      },
+    ]);
+  });
+
+  it("stops the URL at whitespace", () => {
+    expect(detectLinks("https://a.com and more")).toEqual([
+      { start: 0, end: 13, href: "https://a.com" },
+    ]);
+  });
+
+  it("does not match bare domains without a scheme", () => {
+    expect(detectLinks("visit example.com or www.example.com")).toEqual([]);
+  });
+
+  it("does not match ftp or other schemes", () => {
+    expect(detectLinks("ftp://files.example.com")).toEqual([]);
+  });
+
+  it("does not match a scheme with no host", () => {
+    expect(detectLinks("https://")).toEqual([]);
+  });
+
+  it("returns an empty array for text without URLs", () => {
+    expect(detectLinks("A plain sentence with no links")).toEqual([]);
+  });
+
+  it("is case-insensitive on the scheme", () => {
+    expect(detectLinks("HTTPS://Example.com")).toEqual([
+      { start: 0, end: 19, href: "HTTPS://Example.com" },
+    ]);
+  });
+
+  it("does not keep stale regex state across calls", () => {
+    // Guards against a shared lastIndex leaking between invocations.
+    expect(detectLinks("https://one.com")).toEqual([
+      { start: 0, end: 15, href: "https://one.com" },
+    ]);
+    expect(detectLinks("https://two.com")).toEqual([
+      { start: 0, end: 15, href: "https://two.com" },
+    ]);
+  });
+});

package/src/editor/autoLink.ts

@@ -0,0 +1,248 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import type { Mark, Node as PMNode } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import type { EditorView } from "prosemirror-view";
+
+/**
+ * Auto-linking paints bare `http(s)://…` URLs as clickable links *without*
+ * modifying the document. Like the tag-badge decoration, the underlying text is
+ * left untouched, so markdown serialization round-trips unchanged — a bare URL
+ * stays a bare URL (which GFM auto-links anyway) instead of being rewritten into
+ * `[url](url)`.
+ *
+ * A URL is greedily matched as `http://`/`https://` followed by any run of
+ * non-whitespace, non-angle-bracket, non-quote characters; trailing sentence
+ * punctuation and unbalanced closing brackets are then trimmed so that natural
+ * prose like `see https://example.com.` or `(https://example.com)` links the URL
+ * without swallowing the surrounding punctuation.
+ */
+const URL_DETECT_REGEXP = /https?:\/\/[^\s<>"'`]+/gi;
+
+/** Trailing characters that are almost always prose punctuation, not URL. */
+const TRAILING_PUNCTUATION = /[.,;:!?'"”’»)\]}]$/;
+
+const CLOSING_TO_OPENING: Record<string, string> = {
+  ")": "(",
+  "]": "[",
+  "}": "{",
+};
+
+export interface LinkMatch {
+  /** Offset of the first character of the URL within the scanned string. */
+  start: number;
+  /** Offset just past the last character of the URL. */
+  end: number;
+  /** The matched URL, used verbatim as the `href`. */
+  href: string;
+}
+
+function countChar(text: string, char: string): number {
+  let count = 0;
+  for (const c of text) {
+    if (c === char) count++;
+  }
+  return count;
+}
+
+/**
+ * Strip trailing punctuation that the greedy match may have swallowed. A closing
+ * bracket is only stripped when it is *unbalanced* (no matching opener inside the
+ * URL), so real URLs such as a Wikipedia `..._(disambiguation)` link keep their
+ * parentheses.
+ */
+function trimTrailingPunctuation(url: string): string {
+  let result = url;
+  // Loop because stripping a bracket can expose more punctuation and vice versa,
+  // e.g. `https://x.com/a).` → `https://x.com/a)` → `https://x.com/a`.
+  for (;;) {
+    const last = result[result.length - 1];
+    if (last === undefined) break;
+
+    const opening = CLOSING_TO_OPENING[last];
+    if (opening) {
+      if (countChar(result, last) > countChar(result, opening)) {
+        result = result.slice(0, -1);
+        continue;
+      }
+      break;
+    }
+
+    if (TRAILING_PUNCTUATION.test(last)) {
+      result = result.slice(0, -1);
+      continue;
+    }
+
+    break;
+  }
+  return result;
+}
+
+/**
+ * Find every `http(s)://` URL inside a plain string and return their offsets.
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function detectLinks(text: string): LinkMatch[] {
+  const matches: LinkMatch[] = [];
+  // Fresh regex per call so the shared `lastIndex` never leaks between calls.
+  const regexp = new RegExp(URL_DETECT_REGEXP.source, "gi");
+  let match: RegExpExecArray | null;
+  while ((match = regexp.exec(text)) !== null) {
+    const href = trimTrailingPunctuation(match[0]);
+    // The trim only ever removes characters from the end, so `start` is stable.
+    if (href.length > 0) {
+      matches.push({ start: match.index, end: match.index + href.length, href });
+    }
+    // Defensive guard against a zero-length match looping forever (a URL always
+    // starts with `http`, so this should never trigger).
+    if (regexp.lastIndex === match.index) {
+      regexp.lastIndex++;
+    }
+  }
+  return matches;
+}
+
+const autoLinkPluginKey = new PluginKey<DecorationSet>("testomatioAutoLink");
+
+/**
+ * Text carrying a real `link` mark (already an anchor) or a `code` mark
+ * (inline code, where a URL is a literal, not a link) is skipped so we never
+ * double-decorate or linkify code.
+ */
+function hasBlockingMark(marks: readonly Mark[]): boolean {
+  return marks.some(
+    (mark) => mark.type.name === "link" || mark.type.name === "code",
+  );
+}
+
+/**
+ * Build inline decorations for every URL in the document. Code blocks are
+ * skipped wholesale; inside every other block, each text node is scanned and any
+ * URL that isn't already a link or inline code is painted.
+ */
+function buildLinkDecorations(doc: PMNode): DecorationSet {
+  const decorations: Decoration[] = [];
+
+  doc.descendants((node, pos) => {
+    // Never linkify inside code blocks — a URL there is source text, not a link.
+    if (node.type.spec.code) {
+      return false;
+    }
+
+    if (!node.isText || !node.text || hasBlockingMark(node.marks)) {
+      return undefined;
+    }
+
+    for (const { start, end, href } of detectLinks(node.text)) {
+      decorations.push(
+        Decoration.inline(
+          pos + start,
+          pos + end,
+          {
+            class: "bn-auto-link",
+            "data-auto-href": href,
+            title: href,
+          },
+          // Stored on the decoration spec so the click handler can resolve the
+          // href from document coordinates without trusting the DOM.
+          { autoHref: href },
+        ),
+      );
+    }
+
+    return undefined;
+  });
+
+  return DecorationSet.create(doc, decorations);
+}
+
+/** True when the pointer event carries the platform "open link" modifier. */
+function hasOpenModifier(event: MouseEvent): boolean {
+  // Cmd on macOS, Ctrl elsewhere — the same convention as VS Code / IntelliJ.
+  return event.metaKey || event.ctrlKey;
+}
+
+function findAutoHrefAt(view: EditorView, pos: number): string | null {
+  const decorations = autoLinkPluginKey.getState(view.state);
+  if (!decorations) return null;
+  const found = decorations.find(pos, pos);
+  for (const deco of found) {
+    const href = (deco.spec as { autoHref?: string }).autoHref;
+    if (typeof href === "string") return href;
+  }
+  return null;
+}
+
+function openHref(href: string): void {
+  if (typeof window === "undefined") return;
+  // `noopener,noreferrer` so the opened tab can't reach back via `window.opener`.
+  window.open(href, "_blank", "noopener,noreferrer");
+}
+
+interface AutoLinkPluginOptions {
+  /**
+   * When `true`, a plain click opens the link. When `false` (default), the
+   * platform modifier (Cmd/Ctrl) is required so plain clicks still place the
+   * text cursor for editing — the safer default inside an editor.
+   */
+  openOnPlainClick: boolean;
+}
+
+function autoLinkPlugin(options: AutoLinkPluginOptions): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: autoLinkPluginKey,
+    state: {
+      init: (_config, state) => buildLinkDecorations(state.doc),
+      apply: (tr, value) =>
+        tr.docChanged ? buildLinkDecorations(tr.doc) : value,
+    },
+    props: {
+      decorations(state) {
+        return autoLinkPluginKey.getState(state);
+      },
+      handleClick(view, pos, event) {
+        if (!options.openOnPlainClick && !hasOpenModifier(event)) {
+          return false;
+        }
+        const href = findAutoHrefAt(view, pos);
+        if (!href) return false;
+        event.preventDefault();
+        openHref(href);
+        return true;
+      },
+    },
+  });
+}
+
+/**
+ * BlockNote extension that renders bare `http(s)://` URLs as clickable links.
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried
+ * by the schema, so consumers add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [autoLinkExtension()],
+ * });
+ * ```
+ *
+ * By default a link opens on Cmd/Ctrl+click (plain clicks still edit the text).
+ * Pass `{ openOnPlainClick: true }` to open on a plain click instead.
+ */
+export class AutoLinkExtension extends BlockNoteExtension {
+  static key() {
+    return "autoLink";
+  }
+
+  constructor(options: Partial<AutoLinkPluginOptions> = {}) {
+    super();
+    this.addProsemirrorPlugin(
+      autoLinkPlugin({ openOnPlainClick: options.openOnPlainClick ?? false }),
+    );
+  }
+}
+
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const autoLinkExtension = (options?: Partial<AutoLinkPluginOptions>) =>
+  new AutoLinkExtension(options);

package/src/editor/blocks/exampleMarker.tsx

@@ -0,0 +1,24 @@
+import { createReactBlockSpec } from "@blocknote/react";
+
+/**
+ * A read-only marker rendered from the `<!-- example -->` HTML comment that
+ * precedes a data/examples table in a testomat.io test file. It shows a compact
+ * "examples" panel (a cropped variant of the SUITE/TEST metadata bar) so the
+ * marker reads as a UI label instead of raw comment text. It has no fields and
+ * round-trips back to `<!-- example -->` on serialize.
+ */
+export const exampleMarkerBlock = createReactBlockSpec(
+  { type: "exampleMarker", content: "none", propSchema: {} },
+  {
+    render: () => (
+      <div
+        className="bn-example-marker"
+        contentEditable={false}
+        suppressContentEditableWarning
+        draggable={false}
+      >
+        <span className="bn-example-marker__label">examples</span>
+      </div>
+    ),
+  },
+);

package/src/editor/customMarkdownConverter.test.ts

@@ -3182,6 +3182,34 @@ describe("test/suite metadata comments", () => {
     expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
   });
 
+  it("parses an <!-- example --> marker into an exampleMarker block", () => {
+    const blocks = markdownToBlocks("<!-- example -->");
+    expect(blocks).toEqual([
+      {
+        type: "exampleMarker",
+        props: {},
+        children: [],
+      },
+    ]);
+  });
+
+  it("parses the plural <!-- examples --> spelling too", () => {
+    const blocks = markdownToBlocks("<!-- examples -->");
+    expect(blocks).toEqual([
+      {
+        type: "exampleMarker",
+        props: {},
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips an <!-- example --> marker", () => {
+    const markdown = "<!-- example -->";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
   it("parses a multi-line suite block with ordered fields", () => {
     const markdown = [
       "<!-- suite",

package/src/editor/customMarkdownConverter.ts

@@ -425,6 +425,8 @@ function serializeBlock(
       }
       return lines;
     }
+    case "exampleMarker":
+      return ["<!-- example -->"];
     case "testMeta": {
       const kind = (block.props as any).metaKind === "suite" ? "suite" : "test";
       const inline = Boolean((block.props as any).metaInline);
@@ -1435,6 +1437,23 @@ function parseParagraph(lines: string[], index: number): { block: CustomPartialB
 
 const META_COMMENT_OPEN_REGEX = /^<!--\s*(test|suite)(?=\s|-->|$)/i;
 
+// Marks the data/examples table that follows in a testomat.io test file. Accepts
+// both the singular `example` and plural `examples` spellings.
+const EXAMPLE_MARKER_REGEX = /^<!--\s*examples?\s*-->\s*$/i;
+
+function parseExampleMarker(
+  lines: string[],
+  index: number,
+): { block: CustomPartialBlock; nextIndex: number } | null {
+  if (!EXAMPLE_MARKER_REGEX.test(lines[index].trim())) {
+    return null;
+  }
+  return {
+    block: { type: "exampleMarker", props: {}, children: [] } as CustomPartialBlock,
+    nextIndex: index + 1,
+  };
+}
+
 // Keys whose value is a YAML-style list (`key:` followed by indented `- item`
 // lines) in the testomat.io comment format — e.g. `issues` holding URLs. These
 // round-trip back to a list on serialize; everything else stays a flat line.
@@ -1691,6 +1710,15 @@ export function markdownToBlocks(markdown: string, _options?: MarkdownToBlocksOp
       continue;
     }
 
+    // Caught before parseParagraph so the `<!-- example -->` marker renders as
+    // an "examples" panel instead of raw comment text.
+    const exampleMarker = parseExampleMarker(lines, index);
+    if (exampleMarker) {
+      blocks.push(exampleMarker.block);
+      index = exampleMarker.nextIndex;
+      continue;
+    }
+
     const snippetWrapper = stepsHeadingLevel !== null
       ? parseSnippetWrapper(lines, index)
       : null;

package/src/editor/customSchema.tsx

@@ -3,6 +3,7 @@ import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
 import { testMetaBlock } from "./blocks/testMeta";
+import { exampleMarkerBlock } from "./blocks/exampleMarker";
 import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 
@@ -13,6 +14,7 @@ export const customSchema = BlockNoteSchema.create({
     testStep: stepBlock,
     snippet: snippetBlock,
     testMeta: testMetaBlock,
+    exampleMarker: exampleMarkerBlock,
   },
 });
 

package/src/editor/exampleTableHighlight.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { isSuiteDocument, markExampleTables } from "./exampleTableHighlight";
+
+describe("isSuiteDocument", () => {
+  it("is true only when the first block is a suite testMeta", () => {
+    expect(isSuiteDocument("testMeta", "suite")).toBe(true);
+  });
+
+  it("is false for a document opening with a test (not a suite)", () => {
+    expect(isSuiteDocument("testMeta", "test")).toBe(false);
+  });
+
+  it("is false when the first block is not a testMeta", () => {
+    expect(isSuiteDocument("heading", undefined)).toBe(false);
+    expect(isSuiteDocument("paragraph", "suite")).toBe(false);
+  });
+
+  it("is false for an empty document", () => {
+    expect(isSuiteDocument(undefined, undefined)).toBe(false);
+  });
+});
+
+describe("markExampleTables", () => {
+  it("flags a table that follows an example marker", () => {
+    expect(markExampleTables(["exampleMarker", "paragraph", "table"])).toEqual([
+      false,
+      false,
+      true,
+    ]);
+  });
+
+  it("stops the region at the next test/suite comment", () => {
+    // First table is in the example region; the testMeta closes it, so the
+    // second table (belonging to the next test) is not flagged.
+    expect(
+      markExampleTables(["exampleMarker", "table", "testMeta", "table"]),
+    ).toEqual([false, true, false, false]);
+  });
+
+  it("does not flag tables without a preceding example marker", () => {
+    expect(markExampleTables(["table"])).toEqual([false]);
+    expect(markExampleTables(["testMeta", "table"])).toEqual([false, false]);
+  });
+
+  it("keeps the region open across headings and other blocks", () => {
+    expect(
+      markExampleTables(["exampleMarker", "heading", "paragraph", "table"]),
+    ).toEqual([false, false, false, true]);
+  });
+
+  it("flags every table in the region until the next test", () => {
+    expect(
+      markExampleTables(["exampleMarker", "table", "table", "testMeta", "table"]),
+    ).toEqual([false, true, true, false, false]);
+  });
+
+  it("reopens the region when a new example marker appears", () => {
+    expect(
+      markExampleTables(["exampleMarker", "table", "testMeta", "exampleMarker", "table"]),
+    ).toEqual([false, true, false, false, true]);
+  });
+
+  it("returns an empty array for no blocks", () => {
+    expect(markExampleTables([])).toEqual([]);
+  });
+});