testomatio-editor-blocks 0.4.78 → 0.4.80

package/package/editor/autoLink.d.ts

@@ -0,0 +1,45 @@
+import { BlockNoteExtension } from "@blocknote/core";
+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;
+}
+/**
+ * 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 declare function detectLinks(text: string): LinkMatch[];
+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;
+}
+/**
+ * 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 declare class AutoLinkExtension extends BlockNoteExtension {
+    static key(): string;
+    constructor(options?: Partial<AutoLinkPluginOptions>);
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export declare const autoLinkExtension: (options?: Partial<AutoLinkPluginOptions>) => AutoLinkExtension;
+export {};

package/package/editor/autoLink.js

@@ -0,0 +1,199 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } 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 = {
+    ")": "(",
+    "]": "[",
+    "}": "{",
+};
+function countChar(text, char) {
+    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) {
+    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) {
+    const matches = [];
+    // Fresh regex per call so the shared `lastIndex` never leaks between calls.
+    const regexp = new RegExp(URL_DETECT_REGEXP.source, "gi");
+    let match;
+    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("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) {
+    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) {
+    const decorations = [];
+    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) {
+    // Cmd on macOS, Ctrl elsewhere — the same convention as VS Code / IntelliJ.
+    return event.metaKey || event.ctrlKey;
+}
+function findAutoHrefAt(view, pos) {
+    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.autoHref;
+        if (typeof href === "string")
+            return href;
+    }
+    return null;
+}
+function openHref(href) {
+    if (typeof window === "undefined")
+        return;
+    // `noopener,noreferrer` so the opened tab can't reach back via `window.opener`.
+    window.open(href, "_blank", "noopener,noreferrer");
+}
+function autoLinkPlugin(options) {
+    return new Plugin({
+        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 = {}) {
+        var _a;
+        super();
+        this.addProsemirrorPlugin(autoLinkPlugin({ openOnPlainClick: (_a = options.openOnPlainClick) !== null && _a !== void 0 ? _a : false }));
+    }
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const autoLinkExtension = (options) => new AutoLinkExtension(options);

package/package/index.d.ts

@@ -5,12 +5,13 @@ export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export { setMetaFieldSuggestions, getMetaFieldSuggestions, type MetaFieldSuggestion, type MetaFieldSuggestionsConfig, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, type TagMatch, } from "./editor/tagBadge";
+export { autoLinkExtension, AutoLinkExtension, detectLinks, type LinkMatch, } from "./editor/autoLink";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, type MarkdownToBlocksOptions, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";
 export { setMentionSources, getMentionSources, parseActiveMention, resolveMentionSource, buildMentionInsertText, applyMention, filterMentionItems, resolveMentionQuery, normalizeMentionItems, parseMentionsFromJsonApi, type MentionSource, type MentionItem, type MentionItemsInput, type MentionSearchResult, type ActiveMention, type MentionJsonApiDocument, type MentionJsonApiResource, } from "./editor/mentionAutocomplete";
 export { MentionMenu, type MentionMenuProps, } from "./editor/MentionMenu";
-export { useMentionAutocomplete, type UseMentionAutocompleteOptions, type UseMentionAutocompleteResult, } from "./editor/MentionAutocomplete";
+export { useMentionAutocomplete, type UseMentionAutocompleteOptions, type UseMentionAutocompleteResult, } from "./editor/useMentionAutocomplete";
 export { setFileDisplayUrlResolver, resolveFileDisplayUrl, type FileDisplayUrlResolver, } from "./editor/fileDisplayUrl";
 export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -5,12 +5,13 @@ export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export { setMetaFieldSuggestions, getMetaFieldSuggestions, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, } from "./editor/tagBadge";
+export { autoLinkExtension, AutoLinkExtension, detectLinks, } from "./editor/autoLink";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";
 export { setMentionSources, getMentionSources, parseActiveMention, resolveMentionSource, buildMentionInsertText, applyMention, filterMentionItems, resolveMentionQuery, normalizeMentionItems, parseMentionsFromJsonApi, } from "./editor/mentionAutocomplete";
 export { MentionMenu, } from "./editor/MentionMenu";
-export { useMentionAutocomplete, } from "./editor/MentionAutocomplete";
+export { useMentionAutocomplete, } from "./editor/useMentionAutocomplete";
 export { setFileDisplayUrlResolver, resolveFileDisplayUrl, } from "./editor/fileDisplayUrl";
 export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export const testomatioEditorClassName = "markdown testomatio-editor";

package/package/styles.css

@@ -771,6 +771,26 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   border-color: rgba(255, 255, 255, 0.12);
 }
 
+/* ============================================
+   AUTO-LINKED URLS
+   Bare `http(s)://` URLs are painted as links by a ProseMirror inline
+   decoration (see src/editor/autoLink.ts). The text stays editable and the
+   markdown is untouched; only the styling and a Cmd/Ctrl+click handler are
+   added. Opening on click is wired in the plugin, not via `pointer-events`.
+   ============================================ */
+.testomatio-editor .bn-auto-link {
+  color: var(--color-primary-700);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.testomatio-editor .bn-auto-link:hover {
+  color: var(--color-primary-600);
+}
+html.dark .testomatio-editor .bn-auto-link {
+  color: rgba(129, 140, 248, 1);
+}
+
 /* ============================================
    TEST / SUITE METADATA BLOCK
    Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.
@@ -1932,6 +1952,20 @@ html.dark .bn-step-editor--preview a.step-preview-link {
   font-size: var(--badge-fz-sm);
 }
 
+.bn-mantine .bn-suggestion-menu {
+  max-width: 24rem;
+}
+
+.bn-mt-suggestion-menu-item-body {
+  min-width: 0;
+}
+
+.bn-mt-suggestion-menu-item-subtitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .bn-suggestion-icon {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.78",
+  "version": "0.4.80",
   "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

@@ -21,6 +21,7 @@ import {
 import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { tagBadgeExtension } from "./editor/tagBadge";
+import { autoLinkExtension } from "./editor/autoLink";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import {
@@ -307,9 +308,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 +334,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 +500,7 @@ function CustomSlashMenu() {
 function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
-    extensions: [tagBadgeExtension()],
+    extensions: [tagBadgeExtension(), autoLinkExtension()],
     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/styles.css

@@ -771,6 +771,26 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   border-color: rgba(255, 255, 255, 0.12);
 }
 
+/* ============================================
+   AUTO-LINKED URLS
+   Bare `http(s)://` URLs are painted as links by a ProseMirror inline
+   decoration (see src/editor/autoLink.ts). The text stays editable and the
+   markdown is untouched; only the styling and a Cmd/Ctrl+click handler are
+   added. Opening on click is wired in the plugin, not via `pointer-events`.
+   ============================================ */
+.testomatio-editor .bn-auto-link {
+  color: var(--color-primary-700);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.testomatio-editor .bn-auto-link:hover {
+  color: var(--color-primary-600);
+}
+html.dark .testomatio-editor .bn-auto-link {
+  color: rgba(129, 140, 248, 1);
+}
+
 /* ============================================
    TEST / SUITE METADATA BLOCK
    Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.
@@ -1932,6 +1952,20 @@ html.dark .bn-step-editor--preview a.step-preview-link {
   font-size: var(--badge-fz-sm);
 }
 
+.bn-mantine .bn-suggestion-menu {
+  max-width: 24rem;
+}
+
+.bn-mt-suggestion-menu-item-body {
+  min-width: 0;
+}
+
+.bn-mt-suggestion-menu-item-subtitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .bn-suggestion-icon {
   display: inline-flex;
   align-items: center;

package/src/index.ts

@@ -23,6 +23,13 @@ export {
   type TagMatch,
 } from "./editor/tagBadge";
 
+export {
+  autoLinkExtension,
+  AutoLinkExtension,
+  detectLinks,
+  type LinkMatch,
+} from "./editor/autoLink";
+
 export {
   blocksToMarkdown,
   markdownToBlocks,
@@ -75,7 +82,7 @@ export {
   useMentionAutocomplete,
   type UseMentionAutocompleteOptions,
   type UseMentionAutocompleteResult,
-} from "./editor/MentionAutocomplete";
+} from "./editor/useMentionAutocomplete";
 
 export {
   setFileDisplayUrlResolver,