testomatio-editor-blocks 0.4.70 → 0.4.72

package/package/editor/blocks/testMeta.js

@@ -106,6 +106,22 @@ export const testMetaBlock = createReactBlockSpec({
         const editableFields = fields
             .map((field, index) => ({ field, index }))
             .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
-        return (_jsxs("div", { className: "bn-testmeta", "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 }), _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField })] }), 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))) }))] }));
+        // Compact (reading) view: collapse the rows into a single truncated line
+        // built only from fields that actually have a value — keys without values
+        // are an editing-only concern and never appear in the compact summary (the
+        // expanded rows still show them so they can be filled in). The
+        // expand/collapse toggle pinned to the far right reveals the full rows.
+        const summaryText = editableFields
+            .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
+            .map(({ field }) => `${field.key}: ${field.value}`)
+            .join("  ·  ");
+        // 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/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.
@@ -752,8 +776,69 @@ html.dark .bn-teststep__view-toggle--compact svg {
   margin-left: 8px;
 }
 
-.bn-testmeta__header .bn-testmeta__add-wrap {
+/* Add button + expand/collapse toggle live in a right-pinned action group. */
+.bn-testmeta__header .bn-testmeta__actions {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Compact one-liner: the metadata rendered as truncated read text, click to
+   expand. Takes the remaining header width and ellipsizes when it overflows. */
+.bn-testmeta__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.bn-testmeta__summary:hover {
+  color: var(--text-primary);
+}
+
+.bn-testmeta__summary--empty {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.bn-testmeta__toggle {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+
+.bn-testmeta__toggle:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__toggle svg {
+  transition: transform 150ms ease;
+}
+
+.bn-testmeta__toggle--expanded svg {
+  transform: rotate(180deg);
 }
 
 .bn-testmeta__label {

package/package.json

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

@@ -187,9 +187,26 @@ export const testMetaBlock = createReactBlockSpec(
         .map((field, index) => ({ field, index }))
         .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
 
+      // Compact (reading) view: collapse the rows into a single truncated line
+      // built only from fields that actually have a value — keys without values
+      // are an editing-only concern and never appear in the compact summary (the
+      // expanded rows still show them so they can be filled in). The
+      // expand/collapse toggle pinned to the far right reveals the full rows.
+      const summaryText = editableFields
+        .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
+        .map(({ field }) => `${field.key}: ${field.value}`)
+        .join("  ·  ");
+      // 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
-          className="bn-testmeta"
+          className={`bn-testmeta${expanded ? " bn-testmeta--expanded" : " bn-testmeta--collapsed"}`}
           data-block-id={block.id}
           data-kind={kind}
           contentEditable={false}
@@ -199,10 +216,34 @@ export const testMetaBlock = createReactBlockSpec(
           <div className="bn-testmeta__header">
             <span className="bn-testmeta__label">{kind.toUpperCase()}</span>
             {idField?.value && <span className="bn-testmeta__id">{idField.value}</span>}
-            <AddFieldMenu kind={kind} usedKeys={usedKeys} onPick={handleAddField} />
+            {!expanded && (
+              <button
+                type="button"
+                className="bn-testmeta__summary"
+                title={summaryText || "No metadata yet"}
+                onClick={() => setExpanded(true)}
+              >
+                {summaryText || <span className="bn-testmeta__summary--empty">No metadata</span>}
+              </button>
+            )}
+            <div className="bn-testmeta__actions">
+              {expanded && <AddFieldMenu kind={kind} usedKeys={usedKeys} onPick={handleAddField} />}
+              <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)}
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            </div>
           </div>
 
-          {editableFields.length > 0 && (
+          {expanded && editableFields.length > 0 && (
             <div className="bn-testmeta__rows">
               {editableFields.map(({ field, index }) => (
                 <div className="bn-testmeta__row" key={index}>

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.
@@ -752,8 +776,69 @@ html.dark .bn-teststep__view-toggle--compact svg {
   margin-left: 8px;
 }
 
-.bn-testmeta__header .bn-testmeta__add-wrap {
+/* Add button + expand/collapse toggle live in a right-pinned action group. */
+.bn-testmeta__header .bn-testmeta__actions {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Compact one-liner: the metadata rendered as truncated read text, click to
+   expand. Takes the remaining header width and ellipsizes when it overflows. */
+.bn-testmeta__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.bn-testmeta__summary:hover {
+  color: var(--text-primary);
+}
+
+.bn-testmeta__summary--empty {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.bn-testmeta__toggle {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+
+.bn-testmeta__toggle:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__toggle svg {
+  transition: transform 150ms ease;
+}
+
+.bn-testmeta__toggle--expanded svg {
+  transform: rotate(180deg);
 }
 
 .bn-testmeta__label {

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,