@tutti-os/ui-rich-text 0.0.11 → 0.0.13

package/dist/editor/index.js

@@ -2,12 +2,12 @@ import {
   createDefaultRichTextI18nRuntime
 } from "../chunk-VQHCWUBH.js";
 import {
-  createRichTextAtRegistry,
   createRichTextMentionAttrs,
+  createRichTextTriggerRegistry,
   getRichTextMentionDisplayText,
-  renderRichTextAtInsertResult,
+  renderRichTextTriggerInsertResult,
   resolveRichTextMentionView
-} from "../chunk-K5POY2YJ.js";
+} from "../chunk-QK6NMNYN.js";
 import {
   findRichTextMarkdownLinks,
   isRichTextMentionHref,
@@ -18,9 +18,9 @@ import {
   parseRichTextMentionHref,
   serializeRichTextDocumentToContent,
   workspaceReferenceNodeName
-} from "../chunk-52PIIFZA.js";
+} from "../chunk-QOVFZUZN.js";
 
-// src/editor/RichTextAtEditor.tsx
+// src/editor/RichTextTriggerEditor.tsx
 import {
   useEffect as useEffect2,
   useLayoutEffect,
@@ -36,12 +36,18 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import { ViewportMenuSurface } from "@tutti-os/ui-system/components";
 import { cn } from "@tutti-os/ui-system/utils";
 
-// src/editor/richTextAtQuery.ts
-function isTriggerPrefixBoundary(character) {
+// src/editor/richTextTriggerQuery.ts
+function isRichTextTriggerPrefixBoundary(character, boundary) {
+  if (boundary === "whitespace") {
+    return /\s/.test(character);
+  }
   return /[\s,;:!?<>{}|\\'"`~()[\]]/.test(character);
 }
-function findRichTextAtQuery(value, caret) {
+function findRichTextTriggerQuery(value, caret, triggerConfigs) {
   const cursor = Math.max(0, Math.min(caret, value.length));
+  if (triggerConfigs.length === 0) {
+    return null;
+  }
   let segmentStart = cursor;
   while (segmentStart > 0) {
     const previous = value[segmentStart - 1] ?? "";
@@ -51,9 +57,18 @@ function findRichTextAtQuery(value, caret) {
     segmentStart -= 1;
   }
   const segment = value.slice(segmentStart, cursor);
-  for (let index = segment.lastIndexOf("@"); index >= 0; index = segment.lastIndexOf("@", index - 1)) {
+  for (let index = segment.length - 1; index >= 0; index -= 1) {
+    const trigger = segment[index];
+    const matchingConfigs = triggerConfigs.filter(
+      (config) => config.trigger === trigger
+    );
+    if (matchingConfigs.length === 0) {
+      continue;
+    }
     const previous = segment[index - 1] ?? "";
-    if (index > 0 && !isTriggerPrefixBoundary(previous)) {
+    if (index > 0 && !matchingConfigs.some(
+      (config) => isRichTextTriggerPrefixBoundary(previous, config.boundary)
+    )) {
       continue;
     }
     const candidate = segment.slice(index);
@@ -63,12 +78,13 @@ function findRichTextAtQuery(value, caret) {
     return {
       from: segmentStart + index,
       to: cursor,
+      trigger,
       keyword: candidate.slice(1)
     };
   }
   return null;
 }
-async function queryRichTextAtMatches(registry, input) {
+async function queryRichTextTriggerMatches(registry, input) {
   try {
     return await registry.query(input);
   } catch {
@@ -86,16 +102,74 @@ function isRichTextImeComposing(event) {
   return keyCode === 229 || which === 229;
 }
 
-// src/editor/richTextAtText.ts
+// src/editor/richTextTriggerText.ts
 var defaultRichTextI18n = createDefaultRichTextI18nRuntime();
-function resolveRichTextAtText(overrides, removeDecorationAriaLabel, i18n = defaultRichTextI18n) {
+function resolveRichTextTriggerText(overrides, removeDecorationAriaLabel, i18n = defaultRichTextI18n) {
   return {
     loadingLabel: overrides?.loadingLabel?.trim() || i18n.t("richTextAt.loading"),
     noMatchesLabel: overrides?.noMatchesLabel?.trim() || i18n.t("richTextAt.noMatches"),
     removeReferenceActionLabel: removeDecorationAriaLabel?.trim() || overrides?.removeReferenceActionLabel?.trim() || i18n.t("richTextAt.removeReferenceActionLabel")
   };
 }
-var defaultRichTextAtText = resolveRichTextAtText();
+var defaultRichTextTriggerText = resolveRichTextTriggerText();
+
+// src/editor/RichTextTriggerMenuItem.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RichTextTriggerMenuItem({
+  label,
+  selected,
+  subtitle,
+  thumbnailUrl,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-selected": selected,
+      className: [
+        "flex w-full cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-[var(--text-primary)] outline-0 transition-colors duration-100",
+        selected ? "bg-[var(--transparency-block)]" : "",
+        "hover:bg-[var(--transparency-block)]"
+      ].join(" "),
+      type: "button",
+      onMouseDown: (event) => {
+        event.preventDefault();
+        onSelect();
+      },
+      children: [
+        /* @__PURE__ */ jsx(RichTextTriggerMenuThumbnail, { thumbnailUrl }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-auto flex-col items-start gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-5 font-semibold", children: label }),
+          subtitle ? /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[11px] leading-4 text-[var(--text-secondary)]", children: subtitle }) : null
+        ] })
+      ]
+    }
+  );
+}
+function RichTextTriggerMenuThumbnail({
+  thumbnailUrl
+}) {
+  const normalizedThumbnailUrl = thumbnailUrl?.trim() ?? "";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-grid size-4 flex-none place-items-center overflow-hidden rounded bg-[var(--bg-block,var(--transparency-block))]",
+      "data-rich-text-trigger-thumbnail": "true",
+      children: normalizedThumbnailUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: "",
+          className: "block size-full object-cover object-center",
+          decoding: "async",
+          draggable: false,
+          loading: "lazy",
+          src: normalizedThumbnailUrl
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "block size-3 rounded-[3px] bg-[var(--transparency-block)]" })
+    }
+  );
+}
 
 // src/extensions/mentionReference.ts
 import { mergeAttributes, Node } from "@tiptap/core";
@@ -103,26 +177,60 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/extensions/MentionReferenceNodeView.tsx
 import { NodeViewWrapper } from "@tiptap/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function readMentionPresentationUrl(presentation) {
+  if (!presentation || typeof presentation !== "object") {
+    return null;
+  }
+  const value = presentation.iconUrl ?? presentation.thumbnailUrl;
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed || null;
+}
 function MentionReferenceNodeView({
   node,
   selected
 }) {
-  const label = typeof node.attrs.label === "string" ? node.attrs.label.trim() : "";
-  return /* @__PURE__ */ jsx(
+  const label = typeof node.attrs.label === "string" ? node.attrs.label.trim().replace(/^@+/, "").trim() : "";
+  const iconUrl = readMentionPresentationUrl(node.attrs.presentation);
+  return /* @__PURE__ */ jsx2(
     NodeViewWrapper,
     {
       as: "span",
-      className: `inline-flex max-w-full align-baseline ${selected ? "is-selected" : ""}`,
+      className: selected ? "is-selected" : void 0,
       contentEditable: false,
       "data-rich-text-mention-reference": "true",
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         "span",
         {
-          className: `inline-flex max-w-full items-center overflow-hidden rounded-md px-1.5 py-0.5 text-[13px] font-medium ${selected ? "bg-[var(--background-fronted)] text-[var(--text-primary)] shadow-soft" : "bg-transparency-block text-[var(--text-primary)]"}`,
+          className: [
+            "inline-flex max-w-full items-center gap-1 overflow-hidden rounded-md px-[7px] py-0.5 text-[13px] leading-[18px] font-semibold align-baseline text-[var(--text-primary)]",
+            selected ? "bg-[var(--background-fronted)] shadow-[var(--shadow-soft,0_1px_2px_rgb(0_0_0/8%))]" : "bg-[var(--transparency-block)]"
+          ].join(" "),
+          "data-rich-text-mention-chip": "true",
           children: [
-            "@",
-            label
+            iconUrl ? /* @__PURE__ */ jsx2(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "inline-grid size-4 flex-none place-items-center overflow-hidden rounded",
+                "data-rich-text-mention-icon": "true",
+                children: /* @__PURE__ */ jsx2(
+                  "img",
+                  {
+                    alt: "",
+                    className: "block size-full object-cover object-center",
+                    decoding: "async",
+                    draggable: false,
+                    loading: "lazy",
+                    src: iconUrl
+                  }
+                )
+              }
+            ) : null,
+            label ? iconUrl ? label : `@${label}` : ""
           ]
         }
       )
@@ -142,26 +250,20 @@ var MentionReference = Node.create({
       entityId: {
         default: ""
       },
-      href: {
-        default: null
-      },
-      kind: {
-        default: null
-      },
       label: {
         default: ""
       },
-      meta: {
+      presentation: {
         default: null
       },
-      plugin: {
+      providerId: {
         default: ""
       },
+      scope: {
+        default: null
+      },
       trigger: {
         default: "@"
-      },
-      version: {
-        default: null
       }
     };
   },
@@ -170,13 +272,14 @@ var MentionReference = Node.create({
   },
   renderHTML({ HTMLAttributes }) {
     const label = typeof HTMLAttributes.label === "string" ? HTMLAttributes.label : "";
+    const displayLabel = label.trim().replace(/^@+/, "").trim();
     return [
       "span",
       mergeAttributes(HTMLAttributes, {
         "data-rich-text-mention-reference": "true",
         class: "inline-flex max-w-full items-center overflow-hidden rounded-md bg-transparency-block px-1.5 py-0.5 align-baseline text-[13px] font-medium text-[var(--text-primary)]"
       }),
-      `@${label}`
+      displayLabel ? `@${displayLabel}` : ""
     ];
   },
   addNodeView() {
@@ -239,7 +342,7 @@ function isPathRoot(path) {
 }
 
 // src/extensions/WorkspaceReferenceNodeView.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var richTextWorkspaceReferencePillClassName = "max-w-[18rem]";
 function WorkspaceReferenceNodeView({
   deleteNode,
@@ -255,7 +358,7 @@ function WorkspaceReferenceNodeView({
   const label = typeof attrs.label === "string" ? attrs.label : "";
   const path = typeof attrs.path === "string" ? attrs.path : "";
   const presentation = getWorkspaceReferencePresentation(label, path);
-  const removeActionAriaLabel = typeof extensionOptions.removeActionAriaLabel === "string" ? extensionOptions.removeActionAriaLabel : defaultRichTextAtText.removeReferenceActionLabel;
+  const removeActionAriaLabel = typeof extensionOptions.removeActionAriaLabel === "string" ? extensionOptions.removeActionAriaLabel : defaultRichTextTriggerText.removeReferenceActionLabel;
   useEffect(() => {
     const syncEditable = () => {
       setIsEditable(editor.isEditable);
@@ -276,15 +379,15 @@ function WorkspaceReferenceNodeView({
     }
     deleteNode();
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     NodeViewWrapper2,
     {
       as: "span",
       className: `inline-flex max-w-full align-baseline ${selected ? "is-selected" : ""}`,
       contentEditable: false,
       "data-rich-text-workspace-reference": "true",
-      children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
-        /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
+        /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
           MentionPill,
           {
             className: richTextWorkspaceReferencePillClassName,
@@ -298,7 +401,7 @@ function WorkspaceReferenceNodeView({
             } : void 0
           }
         ) }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           TooltipContent,
           {
             className: "max-w-md whitespace-normal break-all",
@@ -316,7 +419,7 @@ var WorkspaceReference = Node2.create({
   name: workspaceReferenceNodeName,
   addOptions() {
     return {
-      removeActionAriaLabel: defaultRichTextAtText.removeReferenceActionLabel
+      removeActionAriaLabel: defaultRichTextTriggerText.removeReferenceActionLabel
     };
   },
   group: "inline",
@@ -381,12 +484,12 @@ var WorkspaceReference = Node2.create({
   }
 });
 
-// src/editor/RichTextAtEditor.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function RichTextAtEditor({
+// src/editor/RichTextTriggerEditor.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function RichTextTriggerEditor({
   value,
   onChange,
-  providers = [],
+  triggerProviders = [],
   placeholder,
   disabled = false,
   className,
@@ -398,11 +501,12 @@ function RichTextAtEditor({
   i18n,
   textOverrides,
   overlay,
-  focusSignal
+  focusSignal,
+  menuZIndex
 }) {
   const menuOffset = 6;
   const normalizedValue = normalizeRichTextContent(value);
-  const text = resolveRichTextAtText(
+  const text = resolveRichTextTriggerText(
     textOverrides,
     removeDecorationAriaLabel,
     i18n
@@ -410,14 +514,23 @@ function RichTextAtEditor({
   const latestOnChangeRef = useRef(onChange);
   const lastSerializedValueRef = useRef(normalizedValue);
   const lastFocusSignalRef = useRef(focusSignal);
+  const mentionHydrationRequestRef = useRef(0);
   const containerRef = useRef(null);
   const registry = useMemo(
-    () => createRichTextAtRegistry(providers),
-    [providers]
+    () => createRichTextTriggerRegistry(triggerProviders),
+    [triggerProviders]
+  );
+  const activeTriggerConfigs = useMemo(
+    () => registry.listTriggerConfigs(),
+    [registry]
   );
   const [isFocused, setIsFocused] = useState2(false);
-  const [query, setQuery] = useState2(null);
-  const [matches, setMatches] = useState2([]);
+  const [query, setQuery] = useState2(
+    null
+  );
+  const [matches, setMatches] = useState2(
+    []
+  );
   const [activeIndex, setActiveIndex] = useState2(0);
   const [isLoading, setIsLoading] = useState2(false);
   const [menuPoint, setMenuPoint] = useState2(
@@ -449,6 +562,7 @@ function RichTextAtEditor({
     onBlur() {
       window.setTimeout(() => {
         setIsFocused(false);
+        setQuery(null);
         setMatches([]);
         setActiveIndex(0);
         setIsLoading(false);
@@ -486,6 +600,33 @@ function RichTextAtEditor({
     );
     lastSerializedValueRef.current = normalizedValue;
   }, [editor, normalizedValue]);
+  useEffect2(() => {
+    if (!editor) {
+      return;
+    }
+    const requestId = mentionHydrationRequestRef.current + 1;
+    mentionHydrationRequestRef.current = requestId;
+    const mentions = collectHydratableMentionNodes(editor);
+    if (mentions.length === 0) {
+      return;
+    }
+    for (const mention of mentions) {
+      const provider = registry.getProvider(mention.attrs.providerId);
+      if (!provider?.resolveMention) {
+        continue;
+      }
+      void Promise.resolve(provider.resolveMention(mention.attrs)).then((resolved) => {
+        if (!resolved || mentionHydrationRequestRef.current !== requestId || editor.isDestroyed) {
+          return;
+        }
+        applyResolvedMentionAttrs(editor, mention.pos, mention.attrs, {
+          label: resolved.label,
+          presentation: resolved.presentation
+        });
+      }).catch(() => {
+      });
+    }
+  }, [editor, registry, normalizedValue]);
   useEffect2(() => {
     if (!editor) {
       return;
@@ -510,11 +651,26 @@ function RichTextAtEditor({
       return;
     }
     const updateQueryState = () => {
-      const nextQuery = isFocused ? findEditorAtQuery(editor) : null;
+      const nextQuery = findEditorAtQuery(editor, activeTriggerConfigs);
+      logRichTextTriggerDebug("query-state", {
+        activeTriggerConfigs,
+        focused: editor.isFocused,
+        query: nextQuery,
+        selection: {
+          empty: editor.state.selection.empty,
+          from: editor.state.selection.from,
+          to: editor.state.selection.to
+        },
+        textBeforeCursor: readEditorTextBeforeCursor(editor)
+      });
       setQuery(nextQuery);
     };
     const updateFocus = () => {
-      setIsFocused(editor.isFocused);
+      const nextFocused = editor.isFocused;
+      logRichTextTriggerDebug("focus-state", {
+        focused: nextFocused
+      });
+      setIsFocused(nextFocused);
       updateQueryState();
     };
     updateQueryState();
@@ -528,15 +684,20 @@ function RichTextAtEditor({
       editor.off("focus", updateFocus);
       editor.off("blur", updateFocus);
     };
-  }, [editor, isFocused]);
+  }, [activeTriggerConfigs, editor]);
   useEffect2(() => {
-    if (!editor || !query || !isFocused || providers.length === 0) {
+    if (!editor || !query || activeTriggerConfigs.length === 0) {
       setMatches([]);
       setActiveIndex(0);
       setIsLoading(false);
       return;
     }
     if (query.keyword.length < minQueryLength) {
+      logRichTextTriggerDebug("query-skipped", {
+        minQueryLength,
+        query,
+        reason: "keyword-too-short"
+      });
       setMatches([]);
       setActiveIndex(0);
       setIsLoading(false);
@@ -544,10 +705,16 @@ function RichTextAtEditor({
     }
     const abortController = new AbortController();
     setIsLoading(true);
-    void queryRichTextAtMatches(registry, {
+    logRichTextTriggerDebug("query-start", {
+      maxResults,
+      minQueryLength,
+      query
+    });
+    void queryRichTextTriggerMatches(registry, {
       abortSignal: abortController.signal,
       keyword: query.keyword,
       maxResults,
+      trigger: query.trigger,
       context: {
         blockText: editor.state.selection.$from.parent.textBetween(
           0,
@@ -561,6 +728,16 @@ function RichTextAtEditor({
       if (abortController.signal.aborted) {
         return;
       }
+      logRichTextTriggerDebug("query-result", {
+        matchCount: nextMatches.length,
+        matches: nextMatches.map((match) => ({
+          key: match.key,
+          label: match.label,
+          providerId: match.providerId,
+          trigger: match.trigger
+        })),
+        query
+      });
       setMatches(nextMatches);
       setActiveIndex(
         (current) => nextMatches.length === 0 ? 0 : Math.max(0, Math.min(current, nextMatches.length - 1))
@@ -575,24 +752,38 @@ function RichTextAtEditor({
     };
   }, [
     editor,
-    isFocused,
     maxResults,
     minQueryLength,
-    providers.length,
+    activeTriggerConfigs.length,
     query,
     registry
   ]);
   useLayoutEffect(() => {
-    if (!editor || !query || !isFocused) {
+    if (!editor || !query) {
+      logRichTextTriggerDebug("menu-point-cleared", {
+        hasEditor: Boolean(editor),
+        query
+      });
       setMenuPoint(null);
       return;
     }
     const updateMenuPoint = () => {
       const coords = editor.view.coordsAtPos(editor.state.selection.from);
-      setMenuPoint({
+      const nextMenuPoint = {
         x: coords.left,
         y: coords.bottom + menuOffset
+      };
+      logRichTextTriggerDebug("menu-point", {
+        coords: {
+          bottom: coords.bottom,
+          left: coords.left,
+          right: coords.right,
+          top: coords.top
+        },
+        menuPoint: nextMenuPoint,
+        query
       });
+      setMenuPoint(nextMenuPoint);
     };
     updateMenuPoint();
     window.addEventListener("resize", updateMenuPoint);
@@ -604,9 +795,31 @@ function RichTextAtEditor({
       window.removeEventListener("resize", updateMenuPoint);
       window.removeEventListener("scroll", updateMenuPoint, true);
     };
-  }, [editor, isFocused, menuOffset, query]);
-  const isMenuOpen = isFocused && !!query && (isLoading || matches.length > 0);
+  }, [editor, menuOffset, query]);
+  const canQueryTrigger = !!query && activeTriggerConfigs.length > 0 && query.keyword.length >= minQueryLength;
+  const isMenuOpen = canQueryTrigger && (isFocused || !!menuPoint);
   const isEmpty = !editor || serializeRichTextDocumentToContent(editor.getJSON()).trim().length === 0;
+  useEffect2(() => {
+    logRichTextTriggerDebug("menu-state", {
+      activeIndex,
+      canQueryTrigger,
+      isFocused,
+      isLoading,
+      isMenuOpen,
+      matchesLength: matches.length,
+      menuPoint,
+      query
+    });
+  }, [
+    activeIndex,
+    canQueryTrigger,
+    isFocused,
+    isLoading,
+    isMenuOpen,
+    matches.length,
+    menuPoint,
+    query
+  ]);
   const applyMatch = (match) => {
     if (!editor || !query) {
       return;
@@ -628,7 +841,18 @@ function RichTextAtEditor({
     if (isRichTextImeComposing(event)) {
       return;
     }
-    if (!isMenuOpen || matches.length === 0) {
+    if (!isMenuOpen) {
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setMatches([]);
+      setActiveIndex(0);
+      setIsLoading(false);
+      setMenuPoint(null);
+      return;
+    }
+    if (matches.length === 0) {
       return;
     }
     if (event.key === "ArrowDown") {
@@ -652,22 +876,15 @@ function RichTextAtEditor({
       applyMatch(match);
       return;
     }
-    if (event.key === "Escape") {
-      event.preventDefault();
-      setMatches([]);
-      setActiveIndex(0);
-      setIsLoading(false);
-      setMenuPoint(null);
-    }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("relative min-w-0 w-full", className),
       ref: containerRef,
       children: [
-        /* @__PURE__ */ jsx3("div", { className: "w-full min-w-0", onKeyDownCapture: handleKeyDown, children: /* @__PURE__ */ jsx3(EditorContent, { editor }) }),
-        isEmpty && placeholder ? /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute top-0 right-0 left-0 px-0 py-0 text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("div", { className: "w-full min-w-0", onKeyDownCapture: handleKeyDown, children: /* @__PURE__ */ jsx4(EditorContent, { editor }) }),
+        isEmpty && placeholder ? /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute top-0 right-0 left-0 px-0 py-0 text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx4(
           "div",
           {
             className: cn(
@@ -679,7 +896,7 @@ function RichTextAtEditor({
           }
         ) }) : null,
         overlay,
-        isMenuOpen && menuPoint ? /* @__PURE__ */ jsx3(
+        isMenuOpen && menuPoint ? /* @__PURE__ */ jsx4(
           ViewportMenuSurface,
           {
             open: true,
@@ -694,33 +911,47 @@ function RichTextAtEditor({
                 height: 256
               }
             },
-            children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsxs3(
-              "button",
+            style: menuZIndex === void 0 ? void 0 : { zIndex: menuZIndex },
+            children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx4(
+              RichTextTriggerMenuItem,
               {
-                "aria-selected": index === activeIndex,
-                className: cn(
-                  "flex w-full cursor-pointer flex-col items-start gap-0.5 rounded-md px-2.5 py-2 text-left outline-none transition-colors",
-                  index === activeIndex ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-transparency-block"
-                ),
-                type: "button",
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                  applyMatch(match);
-                },
-                children: [
-                  /* @__PURE__ */ jsx3("div", { className: "text-[13px] leading-5 font-medium", children: match.label }),
-                  match.subtitle ? /* @__PURE__ */ jsx3("div", { className: "text-[11px] leading-4 text-[var(--text-secondary)]", children: match.subtitle }) : null
-                ]
+                label: match.label,
+                selected: index === activeIndex,
+                subtitle: match.subtitle,
+                thumbnailUrl: match.thumbnailUrl,
+                onSelect: () => applyMatch(match)
               },
               `${match.providerId}:${match.key}`
-            )) : /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+            )) : /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
           }
         ) : null
       ]
     }
   );
 }
-function findEditorAtQuery(editor) {
+function findEditorAtQuery(editor, triggers) {
+  const query = findEditorTriggerQuery(editor, triggers);
+  if (!query) {
+    return null;
+  }
+  return query;
+}
+function readEditorTextBeforeCursor(editor) {
+  const { selection } = editor.state;
+  if (!selection.empty) {
+    return null;
+  }
+  const { $from } = selection;
+  if (!$from.parent.isTextblock) {
+    return null;
+  }
+  return $from.parent.textBetween(0, $from.parentOffset, "\n", "\uFFFC");
+}
+function logRichTextTriggerDebug(event, payload) {
+  console.info(`[tutti-rich-text-trigger] ${event}`, payload);
+  window.__tuttiRichTextDebugLog?.(event, payload);
+}
+function findEditorTriggerQuery(editor, triggers) {
   const { selection } = editor.state;
   if (!selection.empty) {
     return null;
@@ -735,7 +966,11 @@ function findEditorAtQuery(editor) {
     "\n",
     "\uFFFC"
   );
-  const query = findRichTextAtQuery(textBeforeCursor, textBeforeCursor.length);
+  const query = findRichTextTriggerQuery(
+    textBeforeCursor,
+    textBeforeCursor.length,
+    triggers
+  );
   if (!query) {
     return null;
   }
@@ -743,6 +978,7 @@ function findEditorAtQuery(editor) {
   return {
     from: selection.from - distanceFromQueryStart,
     keyword: query.keyword,
+    trigger: query.trigger,
     to: selection.from
   };
 }
@@ -770,8 +1006,95 @@ function renderInsertResultAsEditorContent(providerId, result) {
       return null;
   }
 }
+function collectHydratableMentionNodes(editor) {
+  const mentions = [];
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== mentionReferenceNodeName) {
+      return;
+    }
+    const attrs = node.attrs;
+    if (attrs.trigger !== "@" || typeof attrs.providerId !== "string" || !attrs.providerId.trim() || typeof attrs.entityId !== "string" || !attrs.entityId.trim() || typeof attrs.label !== "string" || !attrs.label.trim()) {
+      return;
+    }
+    mentions.push({
+      pos,
+      attrs: {
+        trigger: "@",
+        providerId: attrs.providerId.trim(),
+        entityId: attrs.entityId.trim(),
+        label: attrs.label.trim().replace(/^@+/, "").trim(),
+        scope: normalizeMentionStringRecord(attrs.scope),
+        presentation: normalizeMentionPresentation(attrs.presentation)
+      }
+    });
+  });
+  return mentions;
+}
+function applyResolvedMentionAttrs(editor, pos, currentAttrs, resolved) {
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== mentionReferenceNodeName) {
+    return;
+  }
+  const attrs = node.attrs;
+  if (attrs.providerId !== currentAttrs.providerId || attrs.entityId !== currentAttrs.entityId || JSON.stringify(normalizeMentionStringRecord(attrs.scope) ?? {}) !== JSON.stringify(currentAttrs.scope ?? {})) {
+    return;
+  }
+  const nextLabel = resolved.label?.trim().replace(/^@+/, "").trim();
+  const nextPresentation = normalizeMentionPresentation(resolved.presentation);
+  const nextAttrs = {
+    trigger: "@",
+    providerId: currentAttrs.providerId,
+    entityId: currentAttrs.entityId,
+    label: nextLabel || currentAttrs.label,
+    scope: currentAttrs.scope,
+    presentation: nextPresentation ?? currentAttrs.presentation
+  };
+  if (attrs.label === nextAttrs.label && JSON.stringify(normalizeMentionPresentation(attrs.presentation) ?? {}) === JSON.stringify(nextAttrs.presentation ?? {})) {
+    return;
+  }
+  const transaction = editor.state.tr.setNodeMarkup(pos, void 0, nextAttrs);
+  transaction.setMeta("addToHistory", false);
+  transaction.setMeta("preventUpdate", true);
+  editor.view.dispatch(transaction);
+}
+function normalizeMentionStringRecord(value) {
+  if (!value || typeof value !== "object") {
+    return void 0;
+  }
+  const entries = Object.entries(value).map(
+    ([key, entryValue]) => [
+      key.trim(),
+      typeof entryValue === "string" ? entryValue.trim() : ""
+    ]
+  ).filter(([key, entryValue]) => key.length > 0 && entryValue.length > 0).sort(([left], [right]) => left.localeCompare(right));
+  return entries.length > 0 ? Object.freeze(Object.fromEntries(entries)) : void 0;
+}
+function normalizeMentionPresentation(value) {
+  if (!value || typeof value !== "object") {
+    return void 0;
+  }
+  const source = value;
+  const next = {};
+  for (const key of [
+    "iconUrl",
+    "thumbnailUrl",
+    "subtitle",
+    "description",
+    "status"
+  ]) {
+    const fieldValue = source[key];
+    if (typeof fieldValue !== "string") {
+      continue;
+    }
+    const trimmed = fieldValue.trim();
+    if (trimmed) {
+      next[key] = trimmed;
+    }
+  }
+  return Object.keys(next).length > 0 ? Object.freeze(next) : void 0;
+}
 
-// src/editor/RichTextAtTextarea.tsx
+// src/editor/RichTextTriggerTextarea.tsx
 import {
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
@@ -910,7 +1233,7 @@ function getTextareaPresentationStyle(textarea) {
 // src/editor/richTextTextareaDecorations.tsx
 import { MentionPill as MentionPill2 } from "@tutti-os/ui-system/components";
 import { cn as cn2 } from "@tutti-os/ui-system/utils";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var richTextWorkspaceReferencePillClassName2 = "max-w-[18rem]";
 function RichTextTextareaDecoratedContent({
   onClickSegment,
@@ -921,7 +1244,7 @@ function RichTextTextareaDecoratedContent({
   segments,
   textareaStyle
 }) {
-  return /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-10 overflow-hidden", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute inset-0 z-10 overflow-hidden", children: /* @__PURE__ */ jsx5(
     "div",
     {
       className: "min-h-full min-w-full",
@@ -931,11 +1254,11 @@ function RichTextTextareaDecoratedContent({
       },
       children: segments.map((segment, index) => {
         if (segment.type === "text") {
-          return /* @__PURE__ */ jsx4("span", { children: segment.text }, index);
+          return /* @__PURE__ */ jsx5("span", { children: segment.text }, index);
         }
-        return /* @__PURE__ */ jsxs4("span", { className: "relative", children: [
-          /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "text-transparent", children: segment.text }),
-          /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsxs5("span", { className: "relative", children: [
+          /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "text-transparent", children: segment.text }),
+          /* @__PURE__ */ jsx5(
             MentionPill2,
             {
               className: cn2(
@@ -953,7 +1276,7 @@ function RichTextTextareaDecoratedContent({
                   onRemoveSegment(segment);
                 }
               },
-              summary: /* @__PURE__ */ jsx4(
+              summary: /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: cn2(
@@ -1077,12 +1400,12 @@ function getTextareaCaretViewportPoint(textarea, selectionStart) {
   }
 }
 
-// src/editor/RichTextAtTextarea.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function RichTextAtTextarea({
+// src/editor/RichTextTriggerTextarea.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RichTextTriggerTextarea({
   value,
   onChange,
-  providers = [],
+  triggerProviders = [],
   placeholder,
   disabled = false,
   className,
@@ -1096,14 +1419,16 @@ function RichTextAtTextarea({
   overlay
 }) {
   const menuOffset = 6;
-  const text = resolveRichTextAtText(
+  const text = resolveRichTextTriggerText(
     textOverrides,
     removeDecorationAriaLabel,
     i18n
   );
   const textareaRef = useRef2(null);
   const [selectionStart, setSelectionStart] = useState3(0);
-  const [matches, setMatches] = useState3([]);
+  const [matches, setMatches] = useState3(
+    []
+  );
   const [activeIndex, setActiveIndex] = useState3(0);
   const [isLoading, setIsLoading] = useState3(false);
   const [isFocused, setIsFocused] = useState3(false);
@@ -1114,16 +1439,23 @@ function RichTextAtTextarea({
   const [textareaPresentationStyle, setTextareaPresentationStyle] = useState3(null);
   const pendingSelectionRef = useRef2(null);
   const registry = useMemo2(
-    () => createRichTextAtRegistry(providers),
-    [providers]
+    () => createRichTextTriggerRegistry(triggerProviders),
+    [triggerProviders]
+  );
+  const activeTriggerConfigs = useMemo2(
+    () => registry.listTriggerConfigs(),
+    [registry]
   );
   const decorationSegments = useMemo2(
     () => buildRichTextTextareaDecorationSegments(value),
     [value]
   );
   const hasDecorations = hasRichTextTextareaDecorations(decorationSegments);
-  const query = isFocused ? findRichTextAtQuery(value, selectionStart) : null;
-  const shouldQuery = query !== null && query.keyword.length >= minQueryLength && providers.length > 0;
+  const query = useMemo2(
+    () => isFocused ? findRichTextTriggerQuery(value, selectionStart, activeTriggerConfigs) : null,
+    [activeTriggerConfigs, isFocused, selectionStart, value]
+  );
+  const shouldQuery = query !== null && query.keyword.length >= minQueryLength && activeTriggerConfigs.length > 0;
   const isMenuOpen = isFocused && shouldQuery && (isLoading || matches.length > 0);
   useEffect3(() => {
     const nextSelection = pendingSelectionRef.current;
@@ -1142,10 +1474,11 @@ function RichTextAtTextarea({
     }
     const abortController = new AbortController();
     setIsLoading(true);
-    void queryRichTextAtMatches(registry, {
+    void queryRichTextTriggerMatches(registry, {
       abortSignal: abortController.signal,
       keyword: query.keyword,
       maxResults,
+      trigger: query.trigger,
       context: {
         documentText: value,
         blockText: value
@@ -1273,14 +1606,15 @@ function RichTextAtTextarea({
     });
   };
   const applyMatch = (match) => {
-    const currentQuery = findRichTextAtQuery(
+    const currentQuery = findRichTextTriggerQuery(
       value,
-      textareaRef.current?.selectionStart ?? selectionStart
+      textareaRef.current?.selectionStart ?? selectionStart,
+      activeTriggerConfigs
     );
     if (!currentQuery) {
       return;
     }
-    const insertedValue = renderRichTextAtInsertResult(
+    const insertedValue = renderRichTextTriggerInsertResult(
       match.providerId,
       match.insertResult
     );
@@ -1323,8 +1657,8 @@ function RichTextAtTextarea({
       closeMenu();
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: cn3("relative min-w-0 w-full", className), children: [
-    hasDecorations && textareaPresentationStyle ? /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("div", { className: cn3("relative min-w-0 w-full", className), children: [
+    hasDecorations && textareaPresentationStyle ? /* @__PURE__ */ jsx6(
       RichTextTextareaDecoratedContent,
       {
         onClickSegment: handleClickDecoration,
@@ -1336,7 +1670,7 @@ function RichTextAtTextarea({
         textareaStyle: textareaPresentationStyle
       }
     ) : null,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "textarea",
       {
         ref: textareaRef,
@@ -1407,7 +1741,7 @@ function RichTextAtTextarea({
       }
     ),
     overlay,
-    isMenuOpen && menuPoint ? /* @__PURE__ */ jsx5(
+    isMenuOpen && menuPoint ? /* @__PURE__ */ jsx6(
       ViewportMenuSurface2,
       {
         open: true,
@@ -1423,33 +1757,24 @@ function RichTextAtTextarea({
             height: 256
           }
         },
-        children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsxs5(
-          "button",
+        children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx6(
+          RichTextTriggerMenuItem,
           {
-            "aria-selected": index === activeIndex,
-            className: cn3(
-              "flex w-full cursor-pointer flex-col items-start gap-0.5 rounded-md px-2.5 py-2 text-left outline-none transition-colors",
-              index === activeIndex ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-transparency-block"
-            ),
-            type: "button",
-            onMouseDown: (event) => {
-              event.preventDefault();
-              applyMatch(match);
-            },
-            children: [
-              /* @__PURE__ */ jsx5("div", { className: "text-[13px] leading-5 font-medium", children: match.label }),
-              match.subtitle ? /* @__PURE__ */ jsx5("div", { className: "text-[11px] leading-4 text-[var(--text-secondary)]", children: match.subtitle }) : null
-            ]
+            label: match.label,
+            selected: index === activeIndex,
+            subtitle: match.subtitle,
+            thumbnailUrl: match.thumbnailUrl,
+            onSelect: () => applyMatch(match)
           },
           `${match.providerId}:${match.key}`
-        )) : /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+        )) : /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
       }
     ) : null
   ] });
 }
 
 // src/editor/RichTextMentionReadonly.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var baseStyle = {
   alignItems: "center",
   border: "1px solid transparent",
@@ -1526,7 +1851,7 @@ function RichTextMentionReadonly({
       `tutti-rich-text-mention--${view.state}`,
       className
     ),
-    "data-plugin": mention.plugin,
+    "data-provider-id": mention.providerId,
     "data-state": view.state,
     style: {
       ...baseStyle,
@@ -1534,21 +1859,8 @@ function RichTextMentionReadonly({
     },
     title: elementTitle
   };
-  if (view.interactive && view.href) {
-    return /* @__PURE__ */ jsx6(
-      "a",
-      {
-        ...sharedProps,
-        href: view.href,
-        onClick: (event) => {
-          handleClick(event);
-        },
-        children: label
-      }
-    );
-  }
   if (view.interactive && onClick) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "button",
       {
         ...sharedProps,
@@ -1565,7 +1877,7 @@ function RichTextMentionReadonly({
       }
     );
   }
-  return /* @__PURE__ */ jsx6("span", { ...sharedProps, children: label });
+  return /* @__PURE__ */ jsx7("span", { ...sharedProps, children: label });
 }
 
 // src/editor/RichTextReadonlyContent.tsx
@@ -1605,13 +1917,14 @@ function buildRichTextReadonlyInlineSegments(content) {
 }
 
 // src/editor/RichTextReadonlyContent.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var externalHrefPattern = /^(?:[a-z]+:)?\/\//i;
 var richTextWorkspaceReferencePillClassName3 = "max-w-[18rem]";
 function RichTextReadonlyContent({
   value,
   className,
   paragraphClassName,
+  onMentionAction,
   onOpenWorkspaceReference
 }) {
   const normalizedValue = normalizeRichTextContent(value).trim();
@@ -1619,29 +1932,34 @@ function RichTextReadonlyContent({
     return null;
   }
   const paragraphs = normalizedValue.split(/\n{2,}/).map((paragraph) => paragraph.trim()).filter(Boolean);
-  return /* @__PURE__ */ jsx7("div", { className: cn4("space-y-4", className), children: paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8("div", { className: cn4("space-y-4", className), children: paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx8(
     "p",
     {
       className: cn4("whitespace-pre-wrap", paragraphClassName),
-      children: renderReadonlyInlineMarkdown(paragraph, onOpenWorkspaceReference)
+      children: renderReadonlyInlineMarkdown(
+        paragraph,
+        onOpenWorkspaceReference,
+        onMentionAction
+      )
     },
     `${paragraphIndex}:${paragraph}`
   )) });
 }
-function renderReadonlyInlineMarkdown(content, onOpenWorkspaceReference) {
+function renderReadonlyInlineMarkdown(content, onOpenWorkspaceReference, onMentionAction) {
   const parts = [];
   const segments = buildRichTextReadonlyInlineSegments(content);
   segments.forEach((segment, index) => {
     if (segment.type === "text") {
-      parts.push(/* @__PURE__ */ jsx7("span", { children: segment.text }, `text:${index}`));
+      parts.push(/* @__PURE__ */ jsx8("span", { children: segment.text }, `text:${index}`));
       return;
     }
     parts.push(
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         RichTextReadonlyInlineLink,
         {
           href: segment.href,
           label: segment.label,
+          onMentionAction,
           onOpenWorkspaceReference
         },
         `link:${index}:${segment.href}`
@@ -1653,18 +1971,27 @@ function renderReadonlyInlineMarkdown(content, onOpenWorkspaceReference) {
 function RichTextReadonlyInlineLink({
   href,
   label,
+  onMentionAction,
   onOpenWorkspaceReference
 }) {
   const trimmedHref = href.trim();
   const mention = parseRichTextMentionHref(trimmedHref, label);
   if (mention) {
-    return /* @__PURE__ */ jsx7(RichTextMentionReadonly, { mention });
+    return /* @__PURE__ */ jsx8(
+      RichTextMentionReadonly,
+      {
+        mention,
+        onClick: onMentionAction ? ({ mention: mention2 }) => {
+          void onMentionAction(mention2);
+        } : void 0
+      }
+    );
   }
   if (!trimmedHref) {
-    return /* @__PURE__ */ jsx7("span", { children: label });
+    return /* @__PURE__ */ jsx8("span", { children: label });
   }
   if (externalHrefPattern.test(trimmedHref) && !isRichTextMentionHref(trimmedHref)) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "a",
       {
         className: "font-medium text-[var(--text-primary)] underline decoration-[var(--border-1)] underline-offset-4 hover:text-[var(--text-primary-hover)]",
@@ -1677,7 +2004,7 @@ function RichTextReadonlyInlineLink({
   }
   const kind = trimmedHref.endsWith("/") ? "folder" : "file";
   const path = normalizeRichTextLinkHref(trimmedHref, kind);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     WorkspaceReferenceReadonly,
     {
       reference: {
@@ -1697,7 +2024,7 @@ function WorkspaceReferenceReadonly({
     reference.label,
     reference.path
   );
-  const content = /* @__PURE__ */ jsx7(
+  const content = /* @__PURE__ */ jsx8(
     MentionPill3,
     {
       className: richTextWorkspaceReferencePillClassName3,
@@ -1707,8 +2034,8 @@ function WorkspaceReferenceReadonly({
       removable: false
     }
   );
-  return /* @__PURE__ */ jsxs6(Tooltip2, { children: [
-    /* @__PURE__ */ jsx7(TooltipTrigger2, { asChild: true, children: onOpenWorkspaceReference ? /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7(Tooltip2, { children: [
+    /* @__PURE__ */ jsx8(TooltipTrigger2, { asChild: true, children: onOpenWorkspaceReference ? /* @__PURE__ */ jsx8(
       "button",
       {
         className: "inline-flex max-w-full appearance-none items-baseline bg-transparent p-0 text-inherit",
@@ -1718,8 +2045,8 @@ function WorkspaceReferenceReadonly({
         },
         children: content
       }
-    ) : /* @__PURE__ */ jsx7("span", { className: "inline-flex max-w-full align-baseline", children: content }) }),
-    /* @__PURE__ */ jsx7(
+    ) : /* @__PURE__ */ jsx8("span", { className: "inline-flex max-w-full align-baseline", children: content }) }),
+    /* @__PURE__ */ jsx8(
       TooltipContent2,
       {
         className: "max-w-md whitespace-normal break-all",
@@ -1730,9 +2057,12 @@ function WorkspaceReferenceReadonly({
   ] });
 }
 export {
-  RichTextAtEditor,
-  RichTextAtTextarea,
   RichTextMentionReadonly,
-  RichTextReadonlyContent
+  RichTextReadonlyContent,
+  RichTextTriggerEditor,
+  RichTextTriggerTextarea,
+  findRichTextTriggerQuery,
+  isRichTextTriggerPrefixBoundary,
+  queryRichTextTriggerMatches
 };
 //# sourceMappingURL=index.js.map