@tensor_1/react 2.39.0 → 2.40.0

package/dist/index.d.cts

@@ -3220,12 +3220,19 @@ interface RelatedLinksProps extends Omit<HTMLAttributes<HTMLElement>, 'title' |
 declare function RelatedLinks({ title, items, className, ...props }: RelatedLinksProps): react.JSX.Element;
 
 interface ToggleRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The row's visible label. It is the switch's `<label>`: clicking it flips the switch, and it names the switch. */
     label: ReactNode;
+    /** Shown under the label and announced as the switch's description (`aria-describedby`). */
     description?: ReactNode;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
-    accessibleLabel: string;
+    /**
+     * The switch's name when the visible label is not text (an icon, an image).
+     * Leave it out for a text label: the label already names the switch, and a
+     * repeated `aria-label` would replace it.
+     */
+    accessibleLabel?: string;
 }
 declare function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }: ToggleRowProps): react.JSX.Element;
 
@@ -4454,7 +4461,10 @@ interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
 interface CommentProps extends HTMLAttributes<HTMLDivElement> {
-    /** Usually an `<Avatar />` (the grid reserves the leading column). */
+    /**
+     * Usually an `<Avatar />` (the grid reserves the leading column). `false` drops the
+     * column, for a comment that sits on a rail which already marks each row (a timeline).
+     */
     avatar?: ReactNode;
     author?: ReactNode;
     meta?: ReactNode;

package/dist/markdown-model-Cuwi6pIk.d.cts

@@ -0,0 +1,110 @@
+type MarkdownInline = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'code';
+    value: string;
+} | {
+    type: 'strong';
+    children: MarkdownInline[];
+} | {
+    type: 'em';
+    children: MarkdownInline[];
+} | {
+    type: 'del';
+    children: MarkdownInline[];
+} | {
+    type: 'link';
+    href: string;
+    title?: string;
+    children: MarkdownInline[];
+    bare?: boolean;
+} | {
+    type: 'image';
+    src: string;
+    alt: string;
+    title?: string;
+}
+/** `@[Display name](mention:<id>)` — a person mentioned by id; `label` is the stored name. */
+ | {
+    type: 'mention';
+    id: string;
+    label: string;
+} | {
+    type: 'br';
+};
+/**
+ * The one stored form of a mention: `@[Display name](mention:<id>)`. The id is the
+ * product's (a user id); the name is what the author saw, kept so the text still reads
+ * without the product. `[`, `]` and `\` in the name are backslash-escaped. Ids are
+ * limited to letters, digits and `_ . -`, so a mention can never carry a URL.
+ */
+declare const MENTION_SCHEME = "mention:";
+/** True when `id` can be stored in a mention. */
+declare function isMentionId(id: string): boolean;
+/** The markdown for one mention, or `null` when the id cannot be stored or the name is empty. */
+declare function formatMention(mention: {
+    id: string;
+    label: string;
+}): string | null;
+/**
+ * The mention at the start of `text`, with the number of characters it spans, or `null`.
+ * Used by the viewer, the editor and products that read stored text on the server.
+ */
+declare function readMention(text: string): {
+    id: string;
+    label: string;
+    length: number;
+} | null;
+type TableAlign = 'left' | 'center' | 'right' | null;
+interface MarkdownListItem {
+    /** `null` for a plain item, otherwise the task state. */
+    checked: boolean | null;
+    children: MarkdownInline[];
+    /** Nested lists. */
+    lists: MarkdownList[];
+}
+interface MarkdownList {
+    type: 'list';
+    ordered: boolean;
+    start: number;
+    items: MarkdownListItem[];
+}
+type MarkdownBlock = {
+    type: 'paragraph';
+    children: MarkdownInline[];
+} | {
+    type: 'heading';
+    level: number;
+    children: MarkdownInline[];
+} | {
+    type: 'code';
+    lang: string;
+    value: string;
+} | {
+    type: 'quote';
+    children: MarkdownInline[];
+} | {
+    type: 'rule';
+} | MarkdownList | {
+    type: 'table';
+    align: TableAlign[];
+    head: MarkdownInline[][];
+    rows: MarkdownInline[][][];
+};
+/** Inline markdown to nodes. Newlines become line breaks. */
+declare function parseInline(text: string, depth?: number): MarkdownInline[];
+/** The text a reader sees, for accessible names and image alt text. */
+declare function plainText(nodes: ReadonlyArray<MarkdownInline>): string;
+/**
+ * Every mention in a markdown text, in reading order (an id may repeat). Code spans and
+ * code blocks hold no mentions. For products that act on mentions when text is saved.
+ */
+declare function findMentions(markdown: string): Array<{
+    id: string;
+    label: string;
+}>;
+/** Markdown source to blocks. Empty or whitespace-only input yields no blocks. */
+declare function parseMarkdown(source: string): MarkdownBlock[];
+
+export { MENTION_SCHEME as M, type TableAlign as T, type MarkdownBlock as a, type MarkdownInline as b, type MarkdownList as c, type MarkdownListItem as d, formatMention as e, findMentions as f, parseMarkdown as g, plainText as h, isMentionId as i, parseInline as p, readMention as r };

package/dist/markdown-model.d.ts

@@ -24,9 +24,38 @@ type MarkdownInline = {
     src: string;
     alt: string;
     title?: string;
+}
+/** `@[Display name](mention:<id>)` — a person mentioned by id; `label` is the stored name. */
+ | {
+    type: 'mention';
+    id: string;
+    label: string;
 } | {
     type: 'br';
 };
+/**
+ * The one stored form of a mention: `@[Display name](mention:<id>)`. The id is the
+ * product's (a user id); the name is what the author saw, kept so the text still reads
+ * without the product. `[`, `]` and `\` in the name are backslash-escaped. Ids are
+ * limited to letters, digits and `_ . -`, so a mention can never carry a URL.
+ */
+declare const MENTION_SCHEME = "mention:";
+/** True when `id` can be stored in a mention. */
+declare function isMentionId(id: string): boolean;
+/** The markdown for one mention, or `null` when the id cannot be stored or the name is empty. */
+declare function formatMention(mention: {
+    id: string;
+    label: string;
+}): string | null;
+/**
+ * The mention at the start of `text`, with the number of characters it spans, or `null`.
+ * Used by the viewer, the editor and products that read stored text on the server.
+ */
+declare function readMention(text: string): {
+    id: string;
+    label: string;
+    length: number;
+} | null;
 type TableAlign = 'left' | 'center' | 'right' | null;
 interface MarkdownListItem {
     /** `null` for a plain item, otherwise the task state. */
@@ -67,9 +96,17 @@ type MarkdownBlock = {
 declare function parseInline(text: string, depth?: number): MarkdownInline[];
 /** The text a reader sees, for accessible names and image alt text. */
 declare function plainText(nodes: ReadonlyArray<MarkdownInline>): string;
+/**
+ * Every mention in a markdown text, in reading order (an id may repeat). Code spans and
+ * code blocks hold no mentions. For products that act on mentions when text is saved.
+ */
+declare function findMentions(markdown: string): Array<{
+    id: string;
+    label: string;
+}>;
 /** Split a table row on unescaped pipes outside code spans. */
 declare function splitTableRow(line: string): string[];
 /** Markdown source to blocks. Empty or whitespace-only input yields no blocks. */
 declare function parseMarkdown(source: string): MarkdownBlock[];
 
-export { type MarkdownBlock, type MarkdownInline, type MarkdownList, type MarkdownListItem, type TableAlign, parseInline, parseMarkdown, plainText, splitTableRow };
+export { MENTION_SCHEME, type MarkdownBlock, type MarkdownInline, type MarkdownList, type MarkdownListItem, type TableAlign, findMentions, formatMention, isMentionId, parseInline, parseMarkdown, plainText, readMention, splitTableRow };

package/dist/markdown-model.js

@@ -1,3 +1,21 @@
+const MENTION_SCHEME = "mention:";
+const MENTION_ID = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
+const MENTION_RE = /^@\[((?:\\[\\[\]]|[^\\[\]\n]){1,200})\]\(mention:([A-Za-z0-9][A-Za-z0-9_.-]{0,127})\)/;
+const cleanMentionLabel = (label) => label.replace(/\s+/gu, " ").trim().slice(0, 200);
+function isMentionId(id) {
+  return MENTION_ID.test(id);
+}
+function formatMention(mention) {
+  const label = cleanMentionLabel(mention.label);
+  if (!isMentionId(mention.id) || !label) return null;
+  return `@[${label.replace(/[\\[\]]/g, (ch) => `\\${ch}`)}](${MENTION_SCHEME}${mention.id})`;
+}
+function readMention(text) {
+  const match = MENTION_RE.exec(text);
+  if (!match) return null;
+  const label = cleanMentionLabel(match[1].replace(/\\([\\[\]])/g, "$1"));
+  return label ? { id: match[2], label, length: match[0].length } : null;
+}
 const ASCII_PUNCT = /[!-/:-@[-`{-~]/;
 const WORD = /[\p{L}\p{N}]/u;
 const NAMED_ENTITIES = {
@@ -152,6 +170,14 @@ function parseInline(text, depth = 0) {
       i += run.length;
       continue;
     }
+    if (ch === "@" && text[i + 1] === "[") {
+      const mention = readMention(rest);
+      if (mention) {
+        out.push({ type: "mention", id: mention.id, label: mention.label });
+        i += mention.length;
+        continue;
+      }
+    }
     if (ch === "!" && text[i + 1] === "[") {
       const end = findBracketEnd(text, i + 1);
       const dest = end > 0 ? readDestination(text, end + 1) : null;
@@ -246,11 +272,47 @@ function plainText(nodes) {
         return " ";
       case "image":
         return n.alt;
+      case "mention":
+        return `@${n.label}`;
       default:
         return plainText(n.children);
     }
   }).join("");
 }
+const collectMentions = (nodes, out) => {
+  for (const n of nodes) {
+    if (n.type === "mention") out.push({ id: n.id, label: n.label });
+    else if ("children" in n) collectMentions(n.children, out);
+  }
+};
+function findMentions(markdown) {
+  const out = [];
+  const walkList = (list) => {
+    for (const item of list.items) {
+      collectMentions(item.children, out);
+      item.lists.forEach(walkList);
+    }
+  };
+  for (const block of parseMarkdown(markdown)) {
+    switch (block.type) {
+      case "paragraph":
+      case "heading":
+      case "quote":
+        collectMentions(block.children, out);
+        break;
+      case "list":
+        walkList(block);
+        break;
+      case "table":
+        block.head.forEach((cell) => collectMentions(cell, out));
+        block.rows.forEach((row) => row.forEach((cell) => collectMentions(cell, out)));
+        break;
+      default:
+        break;
+    }
+  }
+  return out;
+}
 const FENCE_RE = /^(`{3,}|~{3,})\s*([^`\s]*)/;
 const HEADING_RE = /^(#{1,6})\s+(.*?)(?:\s+#+)?$/;
 const RULE_RE = /^(?:(?:\*\s*){3,}|(?:-\s*){3,}|(?:_\s*){3,})$/;
@@ -431,8 +493,13 @@ ${current.trim()}`;
   return blocks;
 }
 export {
+  MENTION_SCHEME,
+  findMentions,
+  formatMention,
+  isMentionId,
   parseInline,
   parseMarkdown,
   plainText,
+  readMention,
   splitTableRow
 };

package/dist/markdown.cjs

@@ -20,11 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/markdown.ts
 var markdown_exports = {};
 __export(markdown_exports, {
+  MENTION_SCHEME: () => MENTION_SCHEME,
   Markdown: () => Markdown,
   defaultMarkdownIsSafeUrl: () => defaultMarkdownIsSafeUrl,
+  findMentions: () => findMentions,
+  formatMention: () => formatMention,
+  isMentionId: () => isMentionId,
   parseInline: () => parseInline,
   parseMarkdown: () => parseMarkdown,
-  plainText: () => plainText
+  plainText: () => plainText,
+  readMention: () => readMention
 });
 module.exports = __toCommonJS(markdown_exports);
 
@@ -34,6 +39,24 @@ function cx(...args) {
 }
 
 // src/markdown-model.ts
+var MENTION_SCHEME = "mention:";
+var MENTION_ID = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
+var MENTION_RE = /^@\[((?:\\[\\[\]]|[^\\[\]\n]){1,200})\]\(mention:([A-Za-z0-9][A-Za-z0-9_.-]{0,127})\)/;
+var cleanMentionLabel = (label) => label.replace(/\s+/gu, " ").trim().slice(0, 200);
+function isMentionId(id) {
+  return MENTION_ID.test(id);
+}
+function formatMention(mention) {
+  const label = cleanMentionLabel(mention.label);
+  if (!isMentionId(mention.id) || !label) return null;
+  return `@[${label.replace(/[\\[\]]/g, (ch) => `\\${ch}`)}](${MENTION_SCHEME}${mention.id})`;
+}
+function readMention(text) {
+  const match = MENTION_RE.exec(text);
+  if (!match) return null;
+  const label = cleanMentionLabel(match[1].replace(/\\([\\[\]])/g, "$1"));
+  return label ? { id: match[2], label, length: match[0].length } : null;
+}
 var ASCII_PUNCT = /[!-/:-@[-`{-~]/;
 var WORD = /[\p{L}\p{N}]/u;
 var NAMED_ENTITIES = {
@@ -188,6 +211,14 @@ function parseInline(text, depth = 0) {
       i += run.length;
       continue;
     }
+    if (ch === "@" && text[i + 1] === "[") {
+      const mention = readMention(rest);
+      if (mention) {
+        out.push({ type: "mention", id: mention.id, label: mention.label });
+        i += mention.length;
+        continue;
+      }
+    }
     if (ch === "!" && text[i + 1] === "[") {
       const end = findBracketEnd(text, i + 1);
       const dest = end > 0 ? readDestination(text, end + 1) : null;
@@ -282,11 +313,47 @@ function plainText(nodes) {
         return " ";
       case "image":
         return n.alt;
+      case "mention":
+        return `@${n.label}`;
       default:
         return plainText(n.children);
     }
   }).join("");
 }
+var collectMentions = (nodes, out) => {
+  for (const n of nodes) {
+    if (n.type === "mention") out.push({ id: n.id, label: n.label });
+    else if ("children" in n) collectMentions(n.children, out);
+  }
+};
+function findMentions(markdown) {
+  const out = [];
+  const walkList = (list) => {
+    for (const item of list.items) {
+      collectMentions(item.children, out);
+      item.lists.forEach(walkList);
+    }
+  };
+  for (const block of parseMarkdown(markdown)) {
+    switch (block.type) {
+      case "paragraph":
+      case "heading":
+      case "quote":
+        collectMentions(block.children, out);
+        break;
+      case "list":
+        walkList(block);
+        break;
+      case "table":
+        block.head.forEach((cell) => collectMentions(cell, out));
+        block.rows.forEach((row) => row.forEach((cell) => collectMentions(cell, out)));
+        break;
+      default:
+        break;
+    }
+  }
+  return out;
+}
 var FENCE_RE = /^(`{3,}|~{3,})\s*([^`\s]*)/;
 var HEADING_RE = /^(#{1,6})\s+(.*?)(?:\s+#+)?$/;
 var RULE_RE = /^(?:(?:\*\s*){3,}|(?:-\s*){3,}|(?:_\s*){3,})$/;
@@ -510,6 +577,13 @@ function renderInlines(nodes, policy) {
           i
         );
       }
+      case "mention": {
+        const name = policy.resolveMention?.(node.id, node.label) ?? node.label;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uix-mention", "data-mention-id": node.id, children: [
+          "@",
+          name
+        ] }, i);
+      }
       case "image": {
         const resolved = policy.resolveImageSrc?.(node.src) ?? null;
         if (resolved) {
@@ -568,18 +642,30 @@ function renderBlock(block, policy, headingOffset, key) {
       );
   }
 }
-function Markdown({ children, className, isSafeUrl = defaultMarkdownIsSafeUrl, resolveImageSrc, headingOffset = 2 }) {
+function Markdown({
+  children,
+  className,
+  isSafeUrl = defaultMarkdownIsSafeUrl,
+  resolveImageSrc,
+  headingOffset = 2,
+  resolveMention
+}) {
   const source = typeof children === "string" ? children : "";
   if (source.trim() === "") return null;
-  const policy = { isSafeUrl, resolveImageSrc };
+  const policy = { isSafeUrl, resolveImageSrc, resolveMention };
   const blocks = parseMarkdown(source);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("uix-prose", "uix-markdown", className), "data-component": "markdown", children: blocks.map((block, i) => renderBlock(block, policy, headingOffset, i)) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MENTION_SCHEME,
   Markdown,
   defaultMarkdownIsSafeUrl,
+  findMentions,
+  formatMention,
+  isMentionId,
   parseInline,
   parseMarkdown,
-  plainText
+  plainText,
+  readMention
 });

package/dist/markdown.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+export { M as MENTION_SCHEME, a as MarkdownBlock, b as MarkdownInline, c as MarkdownList, d as MarkdownListItem, T as TableAlign, f as findMentions, e as formatMention, i as isMentionId, p as parseInline, g as parseMarkdown, h as plainText, r as readMention } from './markdown-model-Cuwi6pIk.cjs';
 
 /**
  * Allows http(s), mailto and same-app references (`/path`, `#anchor`, `./x`, `../x`).
@@ -26,6 +27,12 @@ interface MarkdownProps {
      * (`#` → `<h3>` by default, as in TENSOR's original renderer). Capped at `<h6>`.
      */
     headingOffset?: number;
+    /**
+     * The name to show for a mention (`@[Name](mention:<id>)`), e.g. the person's current
+     * or masked name. Return `undefined` to show the name stored in the text. Without it
+     * every mention shows its stored name.
+     */
+    resolveMention?: (id: string, storedLabel: string) => string | undefined;
 }
 /**
  * Safe markdown viewer over `.uix-prose`. It never produces an HTML string and never
@@ -35,81 +42,10 @@ interface MarkdownProps {
  * Supports headings, paragraphs (single newline = line break), bold, italic,
  * strikethrough, inline and fenced code, links and bare http(s) URLs, blockquotes,
  * horizontal rules, nested bulleted/numbered lists, read-only task lists, GFM tables
- * (in a keyboard-scrollable wrapper) and images gated by `resolveImageSrc`.
+ * (in a keyboard-scrollable wrapper), images gated by `resolveImageSrc` and mentions
+ * (`@[Name](mention:<id>)`, drawn as `.uix-mention`, named by `resolveMention`).
  * Server-component safe.
  */
-declare function Markdown({ children, className, isSafeUrl, resolveImageSrc, headingOffset }: MarkdownProps): react.JSX.Element | null;
-
-type MarkdownInline = {
-    type: 'text';
-    value: string;
-} | {
-    type: 'code';
-    value: string;
-} | {
-    type: 'strong';
-    children: MarkdownInline[];
-} | {
-    type: 'em';
-    children: MarkdownInline[];
-} | {
-    type: 'del';
-    children: MarkdownInline[];
-} | {
-    type: 'link';
-    href: string;
-    title?: string;
-    children: MarkdownInline[];
-    bare?: boolean;
-} | {
-    type: 'image';
-    src: string;
-    alt: string;
-    title?: string;
-} | {
-    type: 'br';
-};
-type TableAlign = 'left' | 'center' | 'right' | null;
-interface MarkdownListItem {
-    /** `null` for a plain item, otherwise the task state. */
-    checked: boolean | null;
-    children: MarkdownInline[];
-    /** Nested lists. */
-    lists: MarkdownList[];
-}
-interface MarkdownList {
-    type: 'list';
-    ordered: boolean;
-    start: number;
-    items: MarkdownListItem[];
-}
-type MarkdownBlock = {
-    type: 'paragraph';
-    children: MarkdownInline[];
-} | {
-    type: 'heading';
-    level: number;
-    children: MarkdownInline[];
-} | {
-    type: 'code';
-    lang: string;
-    value: string;
-} | {
-    type: 'quote';
-    children: MarkdownInline[];
-} | {
-    type: 'rule';
-} | MarkdownList | {
-    type: 'table';
-    align: TableAlign[];
-    head: MarkdownInline[][];
-    rows: MarkdownInline[][][];
-};
-/** Inline markdown to nodes. Newlines become line breaks. */
-declare function parseInline(text: string, depth?: number): MarkdownInline[];
-/** The text a reader sees, for accessible names and image alt text. */
-declare function plainText(nodes: ReadonlyArray<MarkdownInline>): string;
-/** Markdown source to blocks. Empty or whitespace-only input yields no blocks. */
-declare function parseMarkdown(source: string): MarkdownBlock[];
+declare function Markdown({ children, className, isSafeUrl, resolveImageSrc, headingOffset, resolveMention, }: MarkdownProps): react.JSX.Element | null;
 
-export { Markdown, type MarkdownBlock, type MarkdownInline, type MarkdownList, type MarkdownListItem, type MarkdownProps, type TableAlign, defaultMarkdownIsSafeUrl, parseInline, parseMarkdown, plainText };
+export { Markdown, type MarkdownProps, defaultMarkdownIsSafeUrl };

package/dist/markdown.d.ts

@@ -1,4 +1,4 @@
 export { Markdown, MarkdownProps, defaultMarkdownIsSafeUrl } from './components/Markdown.js';
-export { MarkdownBlock, MarkdownInline, MarkdownList, MarkdownListItem, TableAlign, parseInline, parseMarkdown, plainText } from './markdown-model.js';
+export { MENTION_SCHEME, MarkdownBlock, MarkdownInline, MarkdownList, MarkdownListItem, TableAlign, findMentions, formatMention, isMentionId, parseInline, parseMarkdown, plainText, readMention } from './markdown-model.js';
 import 'react';
 import './url-policy.js';

package/dist/markdown.js

@@ -1,9 +1,23 @@
 import { Markdown, defaultMarkdownIsSafeUrl } from "./components/Markdown.js";
-import { parseMarkdown, parseInline, plainText } from "./markdown-model.js";
+import {
+  parseMarkdown,
+  parseInline,
+  plainText,
+  findMentions,
+  formatMention,
+  readMention,
+  isMentionId,
+  MENTION_SCHEME
+} from "./markdown-model.js";
 export {
+  MENTION_SCHEME,
   Markdown,
   defaultMarkdownIsSafeUrl,
+  findMentions,
+  formatMention,
+  isMentionId,
   parseInline,
   parseMarkdown,
-  plainText
+  plainText,
+  readMention
 };

package/dist/rich-text/mention.d.ts

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+
+/** A person the consumer offers in the `@` listbox. */
+interface MentionCandidate {
+    /** Stored in the text; letters, digits and `_ . -` only (see `isMentionId`). */
+    id: string;
+    /** The name inserted and shown. */
+    label: string;
+    /** A second line in the listbox (e.g. team or e-mail), never stored. */
+    description?: string;
+}
+declare const Mention: Node<any, any>;
+
+export { Mention, type MentionCandidate };

package/dist/rich-text/mention.js

@@ -0,0 +1,57 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { formatMention, readMention } from "../markdown-model.js";
+const Mention = Node.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: false,
+  addAttributes() {
+    return {
+      id: { default: null },
+      label: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: "span[data-mention-id]",
+      getAttrs: (el) => {
+        const node = el;
+        const id = node.getAttribute("data-mention-id") ?? "";
+        const label = node.getAttribute("data-mention-label") ?? node.textContent?.replace(/^@/, "") ?? "";
+        return formatMention({ id, label }) ? { id, label } : false;
+      }
+    }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const label = String(node.attrs.label ?? "");
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        class: "uix-mention",
+        "data-mention-id": String(node.attrs.id ?? ""),
+        "data-mention-label": label,
+        contenteditable: "false"
+      }),
+      `@${label}`
+    ];
+  },
+  renderText({ node }) {
+    return `@${String(node.attrs.label ?? "")}`;
+  },
+  markdownTokenizer: {
+    name: "mention",
+    level: "inline",
+    start: (src) => src.indexOf("@["),
+    tokenize: (src) => {
+      const found = readMention(src);
+      if (!found) return void 0;
+      return { type: "mention", raw: src.slice(0, found.length), id: found.id, label: found.label };
+    }
+  },
+  parseMarkdown: (token, helpers) => helpers.createNode("mention", { id: String(token.id ?? ""), label: String(token.label ?? "") }),
+  renderMarkdown: (node) => formatMention({ id: String(node.attrs?.id ?? ""), label: String(node.attrs?.label ?? "") }) ?? `@${String(node.attrs?.label ?? "")}`
+});
+export {
+  Mention
+};

package/dist/rich-text/pipeline.js

@@ -6,6 +6,7 @@ import { Image } from "@tiptap/extension-image";
 import { StarterKit } from "@tiptap/starter-kit";
 import { Marked } from "marked";
 import { defaultIsSafeUrl } from "../url-policy.js";
+import { Mention } from "./mention.js";
 const indentContinuation = (h) => {
   let first = true;
   return {
@@ -60,7 +61,9 @@ function createSchemaExtensions(options = {}) {
     TaskList,
     UixTaskItem.configure({ nested: true }),
     TableKit.configure({ table: { resizable: false } }),
-    options.image ?? Image.configure({ inline: true, allowBase64: false })
+    options.image ?? Image.configure({ inline: true, allowBase64: false }),
+    // HAR-1599: `@[Name](mention:<id>)` is one token in every editor and headless pipeline.
+    Mention
   ];
 }
 const ENTITY_AFTER_AMP = /^(?:#\d+;|#x[\da-f]+;|[a-z][a-z\d]*;)/i;