testomatio-editor-blocks 0.4.71 → 0.4.73

package/package/editor/blocks/testMeta.js

@@ -115,10 +115,13 @@ export const testMetaBlock = createReactBlockSpec({
             .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
             .map(({ field }) => `${field.key}: ${field.value}`)
             .join("  ·  ");
-        // Nothing readable to summarise (no fields, or only empty values) -> start
-        // expanded so the block is immediately editable. `expanded` is UI-only
-        // state — never serialized.
-        const [expanded, setExpanded] = useState(() => summaryText.length === 0);
+        // Default to the compact (collapsed) view whenever the block carries any
+        // field — this keeps suite blocks compact too, even when their fields have
+        // no value yet (e.g. a seeded `emoji:` row) and so produce an empty
+        // summary. Only a genuinely empty block (no fields at all) starts expanded
+        // so it's immediately editable. `expanded` is UI-only state — never
+        // serialized.
+        const [expanded, setExpanded] = useState(() => fields.length === 0);
         return (_jsxs("div", { className: `bn-testmeta${expanded ? " bn-testmeta--expanded" : " bn-testmeta--collapsed"}`, "data-block-id": block.id, "data-kind": kind, contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: [_jsxs("div", { className: "bn-testmeta__header", children: [_jsx("span", { className: "bn-testmeta__label", children: kind.toUpperCase() }), (idField === null || idField === void 0 ? void 0 : idField.value) && _jsx("span", { className: "bn-testmeta__id", children: idField.value }), !expanded && (_jsx("button", { type: "button", className: "bn-testmeta__summary", title: summaryText || "No metadata yet", onClick: () => setExpanded(true), children: summaryText || _jsx("span", { className: "bn-testmeta__summary--empty", children: "No metadata" }) })), _jsxs("div", { className: "bn-testmeta__actions", children: [expanded && _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField }), _jsx("button", { type: "button", className: `bn-testmeta__toggle${expanded ? " bn-testmeta__toggle--expanded" : ""}`, "aria-expanded": expanded, "aria-label": expanded ? "Collapse metadata" : "Expand metadata", title: expanded ? "Collapse" : "Expand", onClick: () => setExpanded((prev) => !prev), children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), expanded && editableFields.length > 0 && (_jsx("div", { className: "bn-testmeta__rows", children: editableFields.map(({ field, index }) => (_jsxs("div", { className: "bn-testmeta__row", children: [_jsx("input", { className: "bn-testmeta__key bn-testmeta__key--input", type: "text", value: field.key, placeholder: "key", spellCheck: false, onChange: (e) => handleKeyChange(index, e.target.value) }), _jsx("input", { className: "bn-testmeta__value", type: "text", value: field.value, placeholder: "value", spellCheck: false, onChange: (e) => handleValueChange(index, e.target.value) }), _jsx("button", { type: "button", className: "bn-testmeta__remove", "aria-label": "Remove field", title: "Remove field", onClick: () => handleRemove(index), children: "\u00D7" })] }, index))) }))] }));
     },
 });

package/package/editor/customMarkdownConverter.js

@@ -387,13 +387,21 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             if (stepData.length > 0) {
                 const dataLines = stepData.split(/\r?\n/);
+                let insideCodeFence = false;
                 dataLines.forEach((dataLine) => {
                     const trimmedLine = dataLine.trim();
-                    if (trimmedLine.length > 0) {
-                        lines.push(`  ${escapeStepContent(trimmedLine)}`);
-                    }
-                    else {
+                    if (trimmedLine.length === 0) {
                         lines.push("  ");
+                        return;
+                    }
+                    // Don't escape dots inside fenced code blocks (or on the fence lines
+                    // themselves) — Markdown ignores backslash escapes there, so `\.`
+                    // would render literally.
+                    const isFence = trimmedLine.startsWith("```");
+                    const content = insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
+                    lines.push(`  ${content}`);
+                    if (isFence) {
+                        insideCodeFence = !insideCodeFence;
                     }
                 });
             }
@@ -401,16 +409,23 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             if (normalizedExpected.length > 0) {
                 const expectedLines = normalizedExpected.split(/\r?\n/);
                 const label = "*Expected result*";
+                let insideCodeFence = false;
                 expectedLines.forEach((expectedLine, index) => {
                     const trimmedLine = expectedLine.trim();
                     if (trimmedLine.length === 0) {
                         return;
                     }
+                    // As with step data, leave dots untouched inside fenced code blocks.
+                    const isFence = trimmedLine.startsWith("```");
+                    const content = insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
                     if (index === 0) {
-                        lines.push(`  ${label}: ${escapeStepContent(trimmedLine)}`);
+                        lines.push(`  ${label}: ${content}`);
                     }
                     else {
-                        lines.push(`  ${escapeStepContent(trimmedLine)}`);
+                        lines.push(`  ${content}`);
+                    }
+                    if (isFence) {
+                        insideCodeFence = !insideCodeFence;
                     }
                 });
             }

package/package/editor/tagBadge.d.ts

@@ -0,0 +1,35 @@
+import { BlockNoteExtension } from "@blocknote/core";
+/** Matches a tag (capture group 1) preceded by start-of-string or whitespace. */
+export declare const TAGS_DETECT_REGEXP: RegExp;
+export interface TagMatch {
+    /** Offset of the `@` within the scanned string (the leading space is excluded). */
+    start: number;
+    /** Offset just past the last character of the tag. */
+    end: number;
+    /** The matched tag text, including the leading `@`. */
+    tag: string;
+}
+/**
+ * Find all `@tag` tokens inside a plain string and return their offsets.
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export declare function detectTags(text: string): TagMatch[];
+/**
+ * BlockNote extension that renders `@tags` inside headings as badges.
+ *
+ * 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: [tagBadgeExtension()],
+ * });
+ * ```
+ */
+export declare class TagBadgeExtension extends BlockNoteExtension {
+    static key(): string;
+    constructor();
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export declare const tagBadgeExtension: () => TagBadgeExtension;

package/package/editor/tagBadge.js

@@ -0,0 +1,114 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+/**
+ * Tags are tokens that start with `@` and may contain alphanumerics plus a few
+ * symbols (`= - _ ( ) . : &`), e.g. `@smoke`, `@severity:high`, `@T1234abcd`.
+ *
+ * This is a faithful JS port of the backend (Ruby) tag regexes:
+ *   TAG_PREFIX_REGEXP         = /(?:^|[ \t])/
+ *   TAG_ALLOWED_SYMBOLS_REGEXP = /[\w\d\=\-\_\(\)\.\:\&]*[\w\d\)]/
+ *   TAGS_DETECT_REGEXP        = /(?:^|[ \t])(\@<allowed>)/
+ *
+ * `\w` already covers `[0-9_]`, so the symbol class is kept minimal while
+ * staying faithful to the allowed characters. A tag must be preceded by the
+ * start of the string or whitespace — so email-like text (`user@example.com`)
+ * is correctly ignored.
+ */
+const TAG_ALLOWED_SYMBOLS = String.raw `[\w=\-_().:&]*[\w)]`;
+/** Matches a tag (capture group 1) preceded by start-of-string or whitespace. */
+export const TAGS_DETECT_REGEXP = new RegExp(String.raw `(?:^|[ \t])(@${TAG_ALLOWED_SYMBOLS})`, "g");
+/**
+ * Find all `@tag` tokens inside a plain string and return their offsets.
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function detectTags(text) {
+    const matches = [];
+    // Use a fresh regex each call so the shared `lastIndex` state never leaks
+    // between invocations.
+    const regexp = new RegExp(TAGS_DETECT_REGEXP.source, "g");
+    let match;
+    while ((match = regexp.exec(text)) !== null) {
+        const tag = match[1];
+        // The match may include a leading space/tab consumed by the prefix; the tag
+        // itself starts that many characters into the overall match.
+        const start = match.index + (match[0].length - tag.length);
+        matches.push({ start, end: start + tag.length, tag });
+        // Defensive guard against a zero-length match looping forever (a tag always
+        // starts with `@`, so this should never trigger).
+        if (regexp.lastIndex === match.index) {
+            regexp.lastIndex++;
+        }
+    }
+    return matches;
+}
+const tagBadgePluginKey = new PluginKey("testomatioTagBadge");
+/**
+ * Build inline decorations for every `@tag` found inside heading blocks. Tags
+ * are only *painted* — the underlying text is untouched, so markdown
+ * serialization round-trips unchanged.
+ */
+function buildHeadingTagDecorations(doc) {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        if (node.type.name !== "heading") {
+            return undefined;
+        }
+        // Walk the heading's inline children so positions stay correct even when it
+        // contains links or inline images alongside text.
+        node.forEach((child, offset) => {
+            if (!child.isText || !child.text) {
+                return;
+            }
+            // `pos + 1` steps inside the heading content node; `offset` is the child's
+            // position relative to the node's content.
+            const base = pos + 1 + offset;
+            for (const { start, end } of detectTags(child.text)) {
+                decorations.push(Decoration.inline(base + start, base + end, {
+                    class: "bn-tag-badge",
+                }));
+            }
+        });
+        // Headings only hold inline content; no need to descend further.
+        return false;
+    });
+    return DecorationSet.create(doc, decorations);
+}
+function tagBadgePlugin() {
+    return new Plugin({
+        key: tagBadgePluginKey,
+        state: {
+            init: (_config, state) => buildHeadingTagDecorations(state.doc),
+            apply: (tr, value) => tr.docChanged ? buildHeadingTagDecorations(tr.doc) : value,
+        },
+        props: {
+            decorations(state) {
+                return tagBadgePluginKey.getState(state);
+            },
+        },
+    });
+}
+/**
+ * BlockNote extension that renders `@tags` inside headings as badges.
+ *
+ * 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: [tagBadgeExtension()],
+ * });
+ * ```
+ */
+export class TagBadgeExtension extends BlockNoteExtension {
+    static key() {
+        return "tagBadge";
+    }
+    constructor() {
+        super();
+        this.addProsemirrorPlugin(tagBadgePlugin());
+    }
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const tagBadgeExtension = () => new TagBadgeExtension();

package/package/index.d.ts

@@ -4,6 +4,7 @@ export { snippetBlock } from "./editor/blocks/snippet";
 export { testMetaBlock } 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 { 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

@@ -4,6 +4,7 @@ export { snippetBlock } from "./editor/blocks/snippet";
 export { testMetaBlock } 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 { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";

package/package/styles.css

@@ -723,6 +723,30 @@ html.dark .bn-teststep__view-toggle--compact svg {
   --prev-level: 18px;
 }
 
+/* ============================================
+   TAG BADGES IN HEADINGS
+   `@tag` tokens inside headings are painted as compact badges by a ProseMirror
+   inline decoration (see src/editor/tagBadge.ts). The text stays editable; only
+   the styling is applied.
+   ============================================ */
+.testomatio-editor [data-content-type="heading"] .bn-tag-badge {
+  font-size: 0.78em;
+  font-weight: 500;
+  line-height: 1.2;
+  background: var(--bg-muted);
+  color: var(--text-muted);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  padding: 0.05em 0.4em;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
 /* ============================================
    TEST / SUITE METADATA BLOCK
    Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.

package/package.json

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

@@ -20,6 +20,7 @@ import {
 } from "./editor/customMarkdownConverter";
 import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
+import { tagBadgeExtension } from "./editor/tagBadge";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import { setImageUploadHandler } from "./editor/stepImageUpload";
@@ -404,6 +405,7 @@ function CustomSlashMenu() {
 function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
+    extensions: [tagBadgeExtension()],
     pasteHandler: createMarkdownPasteHandler(markdownToBlocks),
     uploadFile: async (file: File) => {
       const url = `https://placehold.co/600x400?text=${encodeURIComponent(file.name)}`;

package/src/editor/blocks/testMeta.tsx

@@ -196,10 +196,13 @@ export const testMetaBlock = createReactBlockSpec(
         .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
         .map(({ field }) => `${field.key}: ${field.value}`)
         .join("  ·  ");
-      // Nothing readable to summarise (no fields, or only empty values) -> start
-      // expanded so the block is immediately editable. `expanded` is UI-only
-      // state — never serialized.
-      const [expanded, setExpanded] = useState(() => summaryText.length === 0);
+      // Default to the compact (collapsed) view whenever the block carries any
+      // field — this keeps suite blocks compact too, even when their fields have
+      // no value yet (e.g. a seeded `emoji:` row) and so produce an empty
+      // summary. Only a genuinely empty block (no fields at all) starts expanded
+      // so it's immediately editable. `expanded` is UI-only state — never
+      // serialized.
+      const [expanded, setExpanded] = useState(() => fields.length === 0);
 
       return (
         <div

package/src/editor/customMarkdownConverter.test.ts

@@ -1249,6 +1249,53 @@ describe("markdownToBlocks", () => {
     );
   });
 
+  it("does not escape dots inside fenced code blocks in step data", () => {
+    const stepData = [
+      "```",
+      "curl 'https://stable.testomat.io/api/runs/54?page=1&entry=' \\",
+      "  -H 'accept-language: en-US,en;q=0.9' \\",
+      "  -b 'gclau=1.1.1681594017.1781077572;'",
+      "```",
+    ].join("\n");
+
+    const markdown = blocksToMarkdown([
+      {
+        id: "step1",
+        type: "testStep",
+        props: {
+          stepTitle: "Run the request.",
+          stepData,
+          expectedResult: "",
+          listStyle: "bullet",
+        },
+        content: undefined,
+        children: [],
+      },
+    ]);
+
+    expect(markdown).toBe(
+      [
+        // Title outside the fence is still escaped.
+        "* Run the request\\.",
+        // Dots inside the fence stay literal.
+        "  ```",
+        "  curl 'https://stable.testomat.io/api/runs/54?page=1&entry=' \\",
+        "  -H 'accept-language: en-US,en;q=0.9' \\",
+        "  -b 'gclau=1.1.1681594017.1781077572;'",
+        "  ```",
+      ].join("\n"),
+    );
+
+    // Round-trip stays stable.
+    const roundTrip = blocksToMarkdown(
+      markdownToBlocks(["### Steps", "", markdown].join("\n")) as CustomEditorBlock[],
+    );
+    expect(roundTrip).toContain(
+      "  curl 'https://stable.testomat.io/api/runs/54?page=1&entry=' \\",
+    );
+    expect(roundTrip).toContain("  -b 'gclau=1.1.1681594017.1781077572;'");
+  });
+
   it("does not include content after a blank line in step data", () => {
     const markdown = [
       "### Steps",

package/src/editor/customMarkdownConverter.ts

@@ -469,12 +469,22 @@ function serializeBlock(
 
       if (stepData.length > 0) {
         const dataLines = stepData.split(/\r?\n/);
+        let insideCodeFence = false;
         dataLines.forEach((dataLine: string) => {
           const trimmedLine = dataLine.trim();
-          if (trimmedLine.length > 0) {
-            lines.push(`  ${escapeStepContent(trimmedLine)}`);
-          } else {
+          if (trimmedLine.length === 0) {
             lines.push("  ");
+            return;
+          }
+          // Don't escape dots inside fenced code blocks (or on the fence lines
+          // themselves) — Markdown ignores backslash escapes there, so `\.`
+          // would render literally.
+          const isFence = trimmedLine.startsWith("```");
+          const content =
+            insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
+          lines.push(`  ${content}`);
+          if (isFence) {
+            insideCodeFence = !insideCodeFence;
           }
         });
       }
@@ -483,16 +493,24 @@ function serializeBlock(
       if (normalizedExpected.length > 0) {
         const expectedLines = normalizedExpected.split(/\r?\n/);
         const label = "*Expected result*";
+        let insideCodeFence = false;
         expectedLines.forEach((expectedLine: string, index: number) => {
           const trimmedLine = expectedLine.trim();
           if (trimmedLine.length === 0) {
             return;
           }
 
+          // As with step data, leave dots untouched inside fenced code blocks.
+          const isFence = trimmedLine.startsWith("```");
+          const content =
+            insideCodeFence || isFence ? trimmedLine : escapeStepContent(trimmedLine);
           if (index === 0) {
-            lines.push(`  ${label}: ${escapeStepContent(trimmedLine)}`);
+            lines.push(`  ${label}: ${content}`);
           } else {
-            lines.push(`  ${escapeStepContent(trimmedLine)}`);
+            lines.push(`  ${content}`);
+          }
+          if (isFence) {
+            insideCodeFence = !insideCodeFence;
           }
         });
       }

package/src/editor/styles.css

@@ -723,6 +723,30 @@ html.dark .bn-teststep__view-toggle--compact svg {
   --prev-level: 18px;
 }
 
+/* ============================================
+   TAG BADGES IN HEADINGS
+   `@tag` tokens inside headings are painted as compact badges by a ProseMirror
+   inline decoration (see src/editor/tagBadge.ts). The text stays editable; only
+   the styling is applied.
+   ============================================ */
+.testomatio-editor [data-content-type="heading"] .bn-tag-badge {
+  font-size: 0.78em;
+  font-weight: 500;
+  line-height: 1.2;
+  background: var(--bg-muted);
+  color: var(--text-muted);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  padding: 0.05em 0.4em;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
 /* ============================================
    TEST / SUITE METADATA BLOCK
    Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.

package/src/editor/tagBadge.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { detectTags } from "./tagBadge";
+
+describe("detectTags", () => {
+  it("detects a single tag at the start of the string", () => {
+    expect(detectTags("@smoke")).toEqual([{ start: 0, end: 6, tag: "@smoke" }]);
+  });
+
+  it("detects a tag that follows a space", () => {
+    // "Login flow @smoke" — the @ is at index 11.
+    expect(detectTags("Login flow @smoke")).toEqual([
+      { start: 11, end: 17, tag: "@smoke" },
+    ]);
+  });
+
+  it("detects multiple tags in one title", () => {
+    const matches = detectTags("Login flow @smoke @regression");
+    expect(matches).toEqual([
+      { start: 11, end: 17, tag: "@smoke" },
+      { start: 18, end: 29, tag: "@regression" },
+    ]);
+  });
+
+  it("detects tags that contain allowed symbols", () => {
+    expect(detectTags("@severity:high")).toEqual([
+      { start: 0, end: 14, tag: "@severity:high" },
+    ]);
+    expect(detectTags("@T1234abcd")).toEqual([
+      { start: 0, end: 10, tag: "@T1234abcd" },
+    ]);
+    expect(detectTags("@a-b_c")).toEqual([{ start: 0, end: 6, tag: "@a-b_c" }]);
+    expect(detectTags("@group(1)")).toEqual([
+      { start: 0, end: 9, tag: "@group(1)" },
+    ]);
+    expect(detectTags("@key=value")).toEqual([
+      { start: 0, end: 10, tag: "@key=value" },
+    ]);
+  });
+
+  it("detects a tag after a tab character", () => {
+    expect(detectTags("title\t@flaky")).toEqual([
+      { start: 6, end: 12, tag: "@flaky" },
+    ]);
+  });
+
+  it("does not match an email address", () => {
+    // The `@` is preceded by a word character, not start/whitespace.
+    expect(detectTags("Contact user@example.com")).toEqual([]);
+  });
+
+  it("does not match a bare @ with no body", () => {
+    expect(detectTags("just an @ symbol")).toEqual([]);
+  });
+
+  it("does not match @ in the middle of a word", () => {
+    expect(detectTags("foo@bar")).toEqual([]);
+  });
+
+  it("returns an empty array for text without tags", () => {
+    expect(detectTags("A plain heading title")).toEqual([]);
+  });
+
+  it("ignores a trailing dot that is not a valid tag terminator", () => {
+    // The tag must end with a word char or `)`, so the trailing `.` is excluded.
+    expect(detectTags("end of @smoke.")).toEqual([
+      { start: 7, end: 13, tag: "@smoke" },
+    ]);
+  });
+
+  it("does not keep stale regex state across calls", () => {
+    // Guards against a shared lastIndex leaking between invocations.
+    expect(detectTags("@one")).toEqual([{ start: 0, end: 4, tag: "@one" }]);
+    expect(detectTags("@two")).toEqual([{ start: 0, end: 4, tag: "@two" }]);
+  });
+});

package/src/editor/tagBadge.ts

@@ -0,0 +1,143 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import type { Node as PMNode } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+/**
+ * Tags are tokens that start with `@` and may contain alphanumerics plus a few
+ * symbols (`= - _ ( ) . : &`), e.g. `@smoke`, `@severity:high`, `@T1234abcd`.
+ *
+ * This is a faithful JS port of the backend (Ruby) tag regexes:
+ *   TAG_PREFIX_REGEXP         = /(?:^|[ \t])/
+ *   TAG_ALLOWED_SYMBOLS_REGEXP = /[\w\d\=\-\_\(\)\.\:\&]*[\w\d\)]/
+ *   TAGS_DETECT_REGEXP        = /(?:^|[ \t])(\@<allowed>)/
+ *
+ * `\w` already covers `[0-9_]`, so the symbol class is kept minimal while
+ * staying faithful to the allowed characters. A tag must be preceded by the
+ * start of the string or whitespace — so email-like text (`user@example.com`)
+ * is correctly ignored.
+ */
+const TAG_ALLOWED_SYMBOLS = String.raw`[\w=\-_().:&]*[\w)]`;
+
+/** Matches a tag (capture group 1) preceded by start-of-string or whitespace. */
+export const TAGS_DETECT_REGEXP = new RegExp(
+  String.raw`(?:^|[ \t])(@${TAG_ALLOWED_SYMBOLS})`,
+  "g",
+);
+
+export interface TagMatch {
+  /** Offset of the `@` within the scanned string (the leading space is excluded). */
+  start: number;
+  /** Offset just past the last character of the tag. */
+  end: number;
+  /** The matched tag text, including the leading `@`. */
+  tag: string;
+}
+
+/**
+ * Find all `@tag` tokens inside a plain string and return their offsets.
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function detectTags(text: string): TagMatch[] {
+  const matches: TagMatch[] = [];
+  // Use a fresh regex each call so the shared `lastIndex` state never leaks
+  // between invocations.
+  const regexp = new RegExp(TAGS_DETECT_REGEXP.source, "g");
+  let match: RegExpExecArray | null;
+  while ((match = regexp.exec(text)) !== null) {
+    const tag = match[1];
+    // The match may include a leading space/tab consumed by the prefix; the tag
+    // itself starts that many characters into the overall match.
+    const start = match.index + (match[0].length - tag.length);
+    matches.push({ start, end: start + tag.length, tag });
+    // Defensive guard against a zero-length match looping forever (a tag always
+    // starts with `@`, so this should never trigger).
+    if (regexp.lastIndex === match.index) {
+      regexp.lastIndex++;
+    }
+  }
+  return matches;
+}
+
+const tagBadgePluginKey = new PluginKey<DecorationSet>("testomatioTagBadge");
+
+/**
+ * Build inline decorations for every `@tag` found inside heading blocks. Tags
+ * are only *painted* — the underlying text is untouched, so markdown
+ * serialization round-trips unchanged.
+ */
+function buildHeadingTagDecorations(doc: PMNode): DecorationSet {
+  const decorations: Decoration[] = [];
+
+  doc.descendants((node, pos) => {
+    if (node.type.name !== "heading") {
+      return undefined;
+    }
+
+    // Walk the heading's inline children so positions stay correct even when it
+    // contains links or inline images alongside text.
+    node.forEach((child, offset) => {
+      if (!child.isText || !child.text) {
+        return;
+      }
+      // `pos + 1` steps inside the heading content node; `offset` is the child's
+      // position relative to the node's content.
+      const base = pos + 1 + offset;
+      for (const { start, end } of detectTags(child.text)) {
+        decorations.push(
+          Decoration.inline(base + start, base + end, {
+            class: "bn-tag-badge",
+          }),
+        );
+      }
+    });
+
+    // Headings only hold inline content; no need to descend further.
+    return false;
+  });
+
+  return DecorationSet.create(doc, decorations);
+}
+
+function tagBadgePlugin(): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: tagBadgePluginKey,
+    state: {
+      init: (_config, state) => buildHeadingTagDecorations(state.doc),
+      apply: (tr, value) =>
+        tr.docChanged ? buildHeadingTagDecorations(tr.doc) : value,
+    },
+    props: {
+      decorations(state) {
+        return tagBadgePluginKey.getState(state);
+      },
+    },
+  });
+}
+
+/**
+ * BlockNote extension that renders `@tags` inside headings as badges.
+ *
+ * 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: [tagBadgeExtension()],
+ * });
+ * ```
+ */
+export class TagBadgeExtension extends BlockNoteExtension {
+  static key() {
+    return "tagBadge";
+  }
+
+  constructor() {
+    super();
+    this.addProsemirrorPlugin(tagBadgePlugin());
+  }
+}
+
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const tagBadgeExtension = () => new TagBadgeExtension();

package/src/index.ts

@@ -15,6 +15,14 @@ export {
 } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 
+export {
+  tagBadgeExtension,
+  TagBadgeExtension,
+  TAGS_DETECT_REGEXP,
+  detectTags,
+  type TagMatch,
+} from "./editor/tagBadge";
+
 export {
   blocksToMarkdown,
   markdownToBlocks,