testomatio-editor-blocks 0.4.79 → 0.4.82

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/editor/blocks/exampleMarker.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 declare const exampleMarkerBlock: {
+    config: {
+        readonly type: "exampleMarker";
+        readonly content: "none";
+        readonly propSchema: {};
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "exampleMarker";
+        readonly content: "none";
+        readonly propSchema: {};
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/exampleMarker.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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: () => (_jsx("div", { className: "bn-example-marker", contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: _jsx("span", { className: "bn-example-marker__label", children: "examples" }) })),
+});

package/package/editor/customMarkdownConverter.js

@@ -354,6 +354,8 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return lines;
         }
+        case "exampleMarker":
+            return ["<!-- example -->"];
         case "testMeta": {
             const kind = block.props.metaKind === "suite" ? "suite" : "test";
             const inline = Boolean(block.props.metaInline);
@@ -1223,6 +1225,18 @@ function parseParagraph(lines, index) {
     };
 }
 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, index) {
+    if (!EXAMPLE_MARKER_REGEX.test(lines[index].trim())) {
+        return null;
+    }
+    return {
+        block: { type: "exampleMarker", props: {}, children: [] },
+        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.
@@ -1440,6 +1454,14 @@ export function markdownToBlocks(markdown, _options) {
             index = metaComment.nextIndex;
             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/package/editor/customSchema.d.ts

@@ -149,6 +149,18 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
             };
         }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
     };
+    exampleMarker: {
+        config: {
+            readonly type: "exampleMarker";
+            readonly content: "none";
+            readonly propSchema: {};
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            readonly type: "exampleMarker";
+            readonly content: "none";
+            readonly propSchema: {};
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";

package/package/editor/customSchema.js

@@ -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";
 export const customSchema = BlockNoteSchema.create({
@@ -12,6 +13,7 @@ export const customSchema = BlockNoteSchema.create({
         testStep: stepBlock,
         snippet: snippetBlock,
         testMeta: testMetaBlock,
+        exampleMarker: exampleMarkerBlock,
     },
 });
 export const __markdownTestUtils = {

package/package/editor/exampleTableHighlight.d.ts

@@ -0,0 +1,46 @@
+import { BlockNoteExtension } from "@blocknote/core";
+/**
+ * An "example table" is a data table that belongs to a testomat.io `<!-- example -->`
+ * marker: it sits between that marker and the start of the next test — i.e. the next
+ * `testMeta` block (`<!-- test ... -->` / `<!-- suite ... -->`) — or the end of the
+ * document. Such tables are painted with a gray cell background so they read as the
+ * marker's data table.
+ *
+ * Given the block content-type names in document order, returns a boolean[] where
+ * entry `i` is `true` iff a `"table"` at index `i` falls inside an example region.
+ * `exampleMarker` opens a region; `testMeta` closes it; everything else (headings,
+ * paragraphs, …) leaves the region unchanged.
+ *
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export declare function markExampleTables(types: readonly string[]): boolean[];
+/**
+ * Example tables only occur in a *suite* document — one that opens with a
+ * `<!-- suite ... -->` comment (a `testMeta` block whose `metaKind` is `"suite"`).
+ * Gating on the first block lets the plugin skip the whole scan for any other
+ * document (a lone test, plain notes, …) instead of walking it on every change.
+ *
+ * Pure so it can be unit-tested directly.
+ */
+export declare function isSuiteDocument(firstBlockType: string | undefined, firstBlockMetaKind: string | undefined): boolean;
+/**
+ * BlockNote extension that grays the cells of the table following an
+ * `<!-- example -->` marker (bounded by the next test/suite comment or the end of
+ * the document).
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried by
+ * the schema, so consumers must add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [exampleTableHighlightExtension()],
+ * });
+ * ```
+ */
+export declare class ExampleTableHighlightExtension extends BlockNoteExtension {
+    static key(): string;
+    constructor();
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export declare const exampleTableHighlightExtension: () => ExampleTableHighlightExtension;

package/package/editor/exampleTableHighlight.js

@@ -0,0 +1,131 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+/**
+ * An "example table" is a data table that belongs to a testomat.io `<!-- example -->`
+ * marker: it sits between that marker and the start of the next test — i.e. the next
+ * `testMeta` block (`<!-- test ... -->` / `<!-- suite ... -->`) — or the end of the
+ * document. Such tables are painted with a gray cell background so they read as the
+ * marker's data table.
+ *
+ * Given the block content-type names in document order, returns a boolean[] where
+ * entry `i` is `true` iff a `"table"` at index `i` falls inside an example region.
+ * `exampleMarker` opens a region; `testMeta` closes it; everything else (headings,
+ * paragraphs, …) leaves the region unchanged.
+ *
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function markExampleTables(types) {
+    const flags = [];
+    let active = false;
+    for (const name of types) {
+        if (name === "exampleMarker") {
+            active = true;
+            flags.push(false);
+        }
+        else if (name === "testMeta") {
+            active = false;
+            flags.push(false);
+        }
+        else {
+            flags.push(name === "table" && active);
+        }
+    }
+    return flags;
+}
+/**
+ * Example tables only occur in a *suite* document — one that opens with a
+ * `<!-- suite ... -->` comment (a `testMeta` block whose `metaKind` is `"suite"`).
+ * Gating on the first block lets the plugin skip the whole scan for any other
+ * document (a lone test, plain notes, …) instead of walking it on every change.
+ *
+ * Pure so it can be unit-tested directly.
+ */
+export function isSuiteDocument(firstBlockType, firstBlockMetaKind) {
+    return firstBlockType === "testMeta" && firstBlockMetaKind === "suite";
+}
+/**
+ * Build node decorations that add `.bn-example-table` to every table in an example
+ * region. Tables are only *painted* — the document is untouched, so markdown
+ * serialization round-trips unchanged.
+ *
+ * The `<!-- example -->` marker, the metadata comment, and the table each become a
+ * top-level block whose content node is named by its block type (`exampleMarker`,
+ * `testMeta`, `table`), so a single document-order walk yields them directly.
+ *
+ * Nothing is highlighted unless the document is a suite (see `isSuiteDocument`).
+ */
+function buildExampleTableDecorations(doc) {
+    const entries = [];
+    let firstBlockType;
+    let firstBlockMetaKind;
+    doc.descendants((node, pos, parent) => {
+        var _a;
+        // The first content node encountered under a blockContainer is the document's
+        // first block — capture its type/metaKind for the suite gate below.
+        if (firstBlockType === undefined && (parent === null || parent === void 0 ? void 0 : parent.type.name) === "blockContainer") {
+            firstBlockType = node.type.name;
+            const metaKind = (_a = node.attrs) === null || _a === void 0 ? void 0 : _a.metaKind;
+            firstBlockMetaKind = typeof metaKind === "string" ? metaKind : undefined;
+        }
+        const name = node.type.name;
+        if (name === "exampleMarker" || name === "testMeta" || name === "table") {
+            entries.push({ pos, size: node.nodeSize, name });
+            // No need to descend into table cells or the marker's (empty) internals.
+            return false;
+        }
+        // Descend through the blockGroup / blockContainer wrappers to reach content.
+        return undefined;
+    });
+    if (!isSuiteDocument(firstBlockType, firstBlockMetaKind)) {
+        return DecorationSet.empty;
+    }
+    const flags = markExampleTables(entries.map((entry) => entry.name));
+    const decorations = entries
+        .filter((_, index) => flags[index])
+        .map((entry) => Decoration.node(entry.pos, entry.pos + entry.size, {
+        class: "bn-example-table",
+    }));
+    return DecorationSet.create(doc, decorations);
+}
+const exampleTablePluginKey = new PluginKey("testomatioExampleTable");
+function exampleTablePlugin() {
+    return new Plugin({
+        key: exampleTablePluginKey,
+        state: {
+            init: (_config, state) => buildExampleTableDecorations(state.doc),
+            apply: (tr, value) => tr.docChanged ? buildExampleTableDecorations(tr.doc) : value,
+        },
+        props: {
+            decorations(state) {
+                return exampleTablePluginKey.getState(state);
+            },
+        },
+    });
+}
+/**
+ * BlockNote extension that grays the cells of the table following an
+ * `<!-- example -->` marker (bounded by the next test/suite comment or the end of
+ * the document).
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried by
+ * the schema, so consumers must add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [exampleTableHighlightExtension()],
+ * });
+ * ```
+ */
+export class ExampleTableHighlightExtension extends BlockNoteExtension {
+    static key() {
+        return "exampleTableHighlight";
+    }
+    constructor() {
+        super();
+        this.addProsemirrorPlugin(exampleTablePlugin());
+    }
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const exampleTableHighlightExtension = () => new ExampleTableHighlightExtension();

package/package/index.d.ts

@@ -5,6 +5,8 @@ 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 { exampleTableHighlightExtension, ExampleTableHighlightExtension, markExampleTables, } from "./editor/exampleTableHighlight";
 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";

package/package/index.js

@@ -5,6 +5,8 @@ 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 { exampleTableHighlightExtension, ExampleTableHighlightExtension, markExampleTables, } from "./editor/exampleTableHighlight";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";

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.
@@ -791,6 +811,37 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   opacity: 0.5;
 }
 
+/* Compact marker for `<!-- example -->` — a cropped variant of the testMeta bar
+   (fit-content width, not full editor width) labelling the table below it. */
+.bn-example-marker {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  background: var(--bg-muted);
+  border-top: 3px solid var(--color-slate-400);
+  margin-top: 1rem;
+  opacity: 0.6;
+}
+
+.bn-example-marker__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* Gray cells for the data table that follows an `<!-- example -->` marker. The
+   `.bn-example-table` class is applied by a ProseMirror decoration (see
+   exampleTableHighlight.ts), bounded to tables between the marker and the next
+   test/suite comment (or end of document). */
+.bn-editor [data-content-type="table"].bn-example-table td,
+.bn-editor [data-content-type="table"].bn-example-table th {
+  background: var(--bg-muted);
+}
+
 /* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
    always share one row. */
 .bn-testmeta__header {
@@ -1932,6 +1983,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.79",
+  "version": "0.4.82",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",