testomatio-editor-blocks 0.4.77 → 0.4.79

package/src/editor/mentionAutocomplete.test.ts

@@ -0,0 +1,267 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyMention,
+  buildMentionInsertText,
+  filterMentionItems,
+  getMentionSources,
+  normalizeMentionItems,
+  parseActiveMention,
+  parseMentionsFromJsonApi,
+  resolveMentionQuery,
+  resolveMentionSource,
+  setMentionSources,
+  type MentionItem,
+  type MentionSource,
+} from "./mentionAutocomplete";
+
+const users: MentionItem[] = [
+  { id: "u1", label: "alice", detail: "alice@team.io" },
+  { id: "u2", label: "bob", detail: "bob@team.io" },
+  { id: "u3", label: "albert", detail: "albert@team.io" },
+];
+
+const sources: MentionSource[] = [
+  { prefix: "T", label: "Tests", search: () => [] },
+  { prefix: "S", label: "Suites", search: () => [] },
+  { prefix: "", label: "Users", items: users, insert: (item) => `@${item.label}` },
+];
+
+describe("resolveMentionSource", () => {
+  it("routes single-letter prefixes to their source", () => {
+    expect(resolveMentionSource("T123", sources)?.prefix).toBe("T");
+    expect(resolveMentionSource("S9", sources)?.prefix).toBe("S");
+  });
+
+  it("falls back to the empty-prefix source", () => {
+    expect(resolveMentionSource("bob", sources)?.prefix).toBe("");
+    expect(resolveMentionSource("", sources)?.prefix).toBe("");
+  });
+
+  it("prefers the longest matching prefix", () => {
+    const withLong: MentionSource[] = [
+      { prefix: "T" },
+      { prefix: "TC" },
+      { prefix: "" },
+    ];
+    expect(resolveMentionSource("TC5", withLong)?.prefix).toBe("TC");
+    expect(resolveMentionSource("T5", withLong)?.prefix).toBe("T");
+  });
+
+  it("returns null when no source matches and there is no fallback", () => {
+    expect(resolveMentionSource("T5", [{ prefix: "S" }])).toBeNull();
+  });
+
+  it("matches prefixes case-sensitively", () => {
+    // lowercase 't' is not the tests prefix, so it falls through to users
+    expect(resolveMentionSource("tom", sources)?.prefix).toBe("");
+  });
+});
+
+describe("parseActiveMention", () => {
+  it("detects a bare @ (empty query) against the fallback source", () => {
+    const text = "assigned to @";
+    const active = parseActiveMention(text, text.length, sources);
+    expect(active).toMatchObject({ prefix: "", query: "", start: 12, end: 13 });
+  });
+
+  it("detects a prefixed mention and strips the prefix from the query", () => {
+    const text = "see @T123";
+    const active = parseActiveMention(text, text.length, sources);
+    expect(active).toMatchObject({ prefix: "T", query: "123", token: "T123", start: 4 });
+  });
+
+  it("parses when the caret is mid-token, not at the end", () => {
+    const text = "see @T123 done";
+    // caret right after "@T12"
+    const active = parseActiveMention(text, 8, sources);
+    expect(active).toMatchObject({ prefix: "T", query: "12", end: 8 });
+  });
+
+  it("triggers at the very start of the text", () => {
+    const active = parseActiveMention("@bob", 4, sources);
+    expect(active).toMatchObject({ prefix: "", query: "bob", start: 0 });
+  });
+
+  it("does not trigger inside an email (@ not preceded by whitespace)", () => {
+    const text = "ping bob@team.io";
+    expect(parseActiveMention(text, text.length, sources)).toBeNull();
+  });
+
+  it("does not trigger once whitespace follows the @", () => {
+    const text = "hello @ world";
+    expect(parseActiveMention(text, text.length, sources)).toBeNull();
+  });
+
+  it("uses the @ nearest to the caret", () => {
+    const text = "@alice and @bob";
+    const active = parseActiveMention(text, text.length, sources);
+    expect(active).toMatchObject({ query: "bob", start: 11 });
+  });
+
+  it("returns null with no sources", () => {
+    expect(parseActiveMention("@bob", 4, [])).toBeNull();
+  });
+
+  it("returns null when there is no @ before the caret", () => {
+    expect(parseActiveMention("plain text", 5, sources)).toBeNull();
+  });
+});
+
+describe("buildMentionInsertText", () => {
+  it("defaults to @{prefix}{id}", () => {
+    expect(buildMentionInsertText({ prefix: "T" }, { id: "123456", label: "Login" })).toBe(
+      "@T123456",
+    );
+  });
+
+  it("honors a source insert() override", () => {
+    const source: MentionSource = { prefix: "", insert: (item) => `@${item.label}` };
+    expect(buildMentionInsertText(source, { id: "u2", label: "bob" })).toBe("@bob");
+  });
+
+  it("honors a per-item insertText override", () => {
+    expect(
+      buildMentionInsertText({ prefix: "T" }, { id: "1", label: "x", insertText: "@custom" }),
+    ).toBe("@custom");
+  });
+});
+
+describe("applyMention", () => {
+  it("replaces the token and appends a trailing space", () => {
+    const text = "see @T12 here";
+    const active = parseActiveMention(text, 8, sources)!;
+    const result = applyMention(text, active, "@T123456");
+    expect(result.text).toBe("see @T123456 here");
+    expect(result.caret).toBe("see @T123456 ".length);
+  });
+
+  it("does not double up a space when one already follows", () => {
+    const text = "@bob ";
+    const active = { start: 0, end: 4 };
+    const result = applyMention(text, active, "@bob");
+    expect(result.text).toBe("@bob ");
+    expect(result.caret).toBe(5);
+  });
+
+  it("inserts at the end of the text", () => {
+    const text = "assigned to @al";
+    const active = parseActiveMention(text, text.length, sources)!;
+    const result = applyMention(text, active, "@albert");
+    expect(result.text).toBe("assigned to @albert ");
+    expect(result.caret).toBe(result.text.length);
+  });
+});
+
+describe("filterMentionItems", () => {
+  it("returns the head of the list for an empty query", () => {
+    expect(filterMentionItems(users, "").map((u) => u.label)).toEqual([
+      "alice",
+      "bob",
+      "albert",
+    ]);
+  });
+
+  it("ranks starts-with above contains", () => {
+    // "al" -> alice & albert (starts-with) come before nothing else
+    expect(filterMentionItems(users, "al").map((u) => u.label)).toEqual(["alice", "albert"]);
+  });
+
+  it("matches case-insensitively", () => {
+    expect(filterMentionItems(users, "BOB").map((u) => u.label)).toEqual(["bob"]);
+  });
+
+  it("falls back to detail matches", () => {
+    expect(filterMentionItems(users, "team.io").length).toBe(3);
+  });
+
+  it("respects the limit", () => {
+    expect(filterMentionItems(users, "", 2)).toHaveLength(2);
+  });
+});
+
+describe("normalization", () => {
+  it("parses JSON:API resources with varied label attributes", () => {
+    const items = parseMentionsFromJsonApi({
+      data: [
+        { id: 10, type: "test", attributes: { title: "Login redirects", description: "auth" } },
+        { id: "u5", type: "user", attributes: { username: "carol", email: "carol@team.io" } },
+      ],
+    });
+    expect(items).toEqual([
+      { id: "10", label: "Login redirects", detail: "auth" },
+      { id: "u5", label: "carol", detail: "carol@team.io" },
+    ]);
+  });
+
+  it("drops resources without an id", () => {
+    expect(parseMentionsFromJsonApi({ data: [{ attributes: { title: "x" } }] })).toEqual([]);
+  });
+
+  it("passes through arrays already shaped as MentionItem[]", () => {
+    const raw: MentionItem[] = [{ id: "1", label: "one" }];
+    expect(normalizeMentionItems(raw)).toBe(raw);
+  });
+
+  it("normalizes a JSON:API array and handles nullish input", () => {
+    expect(normalizeMentionItems([{ id: 1, attributes: { name: "n" } }])).toEqual([
+      { id: "1", label: "n", detail: null },
+    ]);
+    expect(normalizeMentionItems(null)).toEqual([]);
+    expect(normalizeMentionItems([])).toEqual([]);
+  });
+});
+
+describe("resolveMentionQuery (main-editor routing)", () => {
+  const asyncSources: MentionSource[] = [
+    {
+      prefix: "T",
+      label: "Tests",
+      minChars: 1,
+      search: async (q) => [{ id: `t-${q}`, label: `Test ${q}` }],
+    },
+    { prefix: "", label: "Users", items: users, insert: (u) => `@${u.label}` },
+  ];
+
+  it("routes a prefixed query to its async source and strips the prefix", async () => {
+    const result = await resolveMentionQuery("T123", asyncSources);
+    expect(result?.source.prefix).toBe("T");
+    expect(result?.items).toEqual([{ id: "t-123", label: "Test 123" }]);
+  });
+
+  it("filters the static fallback source for a bare query", async () => {
+    const result = await resolveMentionQuery("al", asyncSources);
+    expect(result?.source.prefix).toBe("");
+    expect(result?.items.map((i) => i.label)).toEqual(["alice", "albert"]);
+  });
+
+  it("honors minChars by returning the source with no items", async () => {
+    const result = await resolveMentionQuery("T", asyncSources);
+    expect(result?.source.prefix).toBe("T");
+    expect(result?.items).toEqual([]);
+  });
+
+  it("resolves a static provider function once", async () => {
+    let calls = 0;
+    const provider = () => {
+      calls += 1;
+      return users;
+    };
+    const src: MentionSource[] = [{ prefix: "", items: provider }];
+    const result = await resolveMentionQuery("bob", src);
+    expect(result?.items.map((i) => i.label)).toEqual(["bob"]);
+    expect(calls).toBe(1);
+  });
+
+  it("returns null when no source matches", async () => {
+    expect(await resolveMentionQuery("X1", [{ prefix: "T" }])).toBeNull();
+  });
+});
+
+describe("global source registry", () => {
+  it("stores and clears sources", () => {
+    setMentionSources(sources);
+    expect(getMentionSources()).toHaveLength(3);
+    setMentionSources(null);
+    expect(getMentionSources()).toEqual([]);
+  });
+});

package/src/editor/mentionAutocomplete.ts

@@ -0,0 +1,348 @@
+/**
+ * Universal, prefix-based `@`-mention autocomplete.
+ *
+ * A single mechanism that turns typed tokens like `@`, `@T`, `@S` into inserted
+ * references such as `@T123456`, `@S98765`, or `@username`. Which list is shown
+ * (and what gets inserted) is decided by a configurable set of {@link MentionSource}s,
+ * each keyed by the characters that follow the `@`:
+ *
+ *   { prefix: "T", search: (q) => api.findTests(q) }        // @T -> fetch tests -> "@T123456"
+ *   { prefix: "S", search: (q) => api.findSuites(q) }       // @S -> fetch suites -> "@S98765"
+ *   { prefix: "",  items: users, insert: (u) => `@${u.label}` } // @  -> filter users -> "@john"
+ *
+ * This file is intentionally DOM-free: it holds only the pure logic (matching,
+ * source resolution, filtering, token building) plus the global source registry.
+ * The React wiring lives in `MentionAutocomplete.tsx`.
+ */
+
+export type MentionItem = {
+  /** Stable identifier. For test/suite sources this is what gets inserted (`@T{id}`). */
+  id: string;
+  /** Primary text shown in the popup and used for client-side filtering. */
+  label: string;
+  /** Optional secondary text (e.g. `#123`, an email, a description). */
+  detail?: string | null;
+  /**
+   * Optional explicit text to insert for this specific item. When omitted the
+   * source's `insert` builder (or the default `@{prefix}{id}`) is used.
+   */
+  insertText?: string;
+  /** Sources may carry arbitrary extra data through to their renderers. */
+  [key: string]: unknown;
+};
+
+/** Static item list, or a (possibly async) provider of one. */
+export type MentionItemsInput =
+  | MentionItem[]
+  | (() => MentionItem[] | Promise<MentionItem[]>);
+
+/** Result of an async `search`. May be raw items or a JSON:API document. */
+export type MentionSearchResult =
+  | MentionItem[]
+  | MentionJsonApiDocument
+  | MentionJsonApiResource[]
+  | null
+  | undefined;
+
+export type MentionSource = {
+  /**
+   * Characters that must appear immediately after `@` to select this source.
+   * Use `""` for the default/fallback source (e.g. usernames on a bare `@`).
+   * Matching is case-sensitive and longest-prefix wins, so `@T` routes to the
+   * `"T"` source rather than the `""` source.
+   */
+  prefix: string;
+  /** Human label for the popup header / grouping (e.g. "Tests", "Users"). */
+  label?: string;
+  /**
+   * Static list (or provider). Filtered client-side by the typed query. Use
+   * this for data already in memory, like the list of project members.
+   */
+  items?: MentionItemsInput;
+  /**
+   * Async fetcher invoked with the typed query (the text after the prefix).
+   * Use this for server-backed lookups like tests (`@T`) and suites (`@S`).
+   */
+  search?: (query: string) => Promise<MentionSearchResult> | MentionSearchResult;
+  /**
+   * Builds the text inserted when an item is chosen. Defaults to
+   * `@{prefix}{id}` (so a test with id `123456` becomes `@T123456`).
+   */
+  insert?: (item: MentionItem, source: MentionSource) => string;
+  /** Minimum query length before `search` runs. Default 0 (fires on empty query). */
+  minChars?: number;
+  /** Max items shown. Default 8. */
+  limit?: number;
+};
+
+/** A currently-active mention detected at the caret. */
+export type ActiveMention = {
+  source: MentionSource;
+  /** Matched prefix (e.g. "T", "S", or ""). */
+  prefix: string;
+  /** Text typed after the prefix (what `search`/filter receives). */
+  query: string;
+  /** Index of the `@` in the source text. */
+  start: number;
+  /** Caret index (exclusive end of the token being edited). */
+  end: number;
+  /** Full token text between `@` (exclusive) and the caret, i.e. `prefix + query`. */
+  token: string;
+};
+
+/* ------------------------------------------------------------------ *
+ * JSON:API shapes (mirrors stepAutocomplete / snippetAutocomplete)
+ * ------------------------------------------------------------------ */
+
+export type MentionJsonApiAttributes = {
+  title?: string | null;
+  name?: string | null;
+  label?: string | null;
+  username?: string | null;
+  email?: string | null;
+  description?: string | null;
+  detail?: string | null;
+  [key: string]: unknown;
+};
+
+export type MentionJsonApiResource = {
+  id?: string | number | null;
+  type?: string | null;
+  attributes?: MentionJsonApiAttributes | null;
+};
+
+export type MentionJsonApiDocument = {
+  data?: MentionJsonApiResource[] | null;
+};
+
+/* ------------------------------------------------------------------ *
+ * Global source registry (dependency-injection seam, mirrors the rest
+ * of the library's `setXFetcher` pattern).
+ * ------------------------------------------------------------------ */
+
+let globalSources: MentionSource[] = [];
+
+/** Register the mention sources used when a consumer doesn't pass `sources` explicitly. */
+export function setMentionSources(sources: MentionSource[] | null): void {
+  globalSources = Array.isArray(sources) ? sources : [];
+}
+
+/** Read the globally-registered mention sources. */
+export function getMentionSources(): MentionSource[] {
+  return globalSources;
+}
+
+/* ------------------------------------------------------------------ *
+ * Pure logic
+ * ------------------------------------------------------------------ */
+
+const WHITESPACE = /\s/;
+
+/**
+ * Pick the source whose `prefix` matches the start of `token`. Longest prefix
+ * wins; the empty-prefix source is the ultimate fallback. Returns `null` when
+ * nothing matches (e.g. `@T` typed but only a `""` source is registered and it
+ * is absent).
+ */
+export function resolveMentionSource(
+  token: string,
+  sources: MentionSource[],
+): MentionSource | null {
+  let best: MentionSource | null = null;
+  for (const source of sources) {
+    const prefix = source.prefix ?? "";
+    if (!token.startsWith(prefix)) continue;
+    if (best === null || prefix.length > (best.prefix ?? "").length) {
+      best = source;
+    }
+  }
+  return best;
+}
+
+/**
+ * Detect the mention being edited at `caret` within `text`.
+ *
+ * A mention is the run of non-whitespace characters after an `@` that sits at
+ * the start of the text or immediately after whitespace (so emails like
+ * `a@b.com` never trigger). Returns `null` when the caret is not inside such a
+ * token or no source matches.
+ */
+export function parseActiveMention(
+  text: string,
+  caret: number,
+  sources: MentionSource[],
+): ActiveMention | null {
+  if (!sources.length) return null;
+  const pos = Math.max(0, Math.min(caret, text.length));
+  const before = text.slice(0, pos);
+
+  const at = before.lastIndexOf("@");
+  if (at === -1) return null;
+
+  // The `@` must start a word: preceded by nothing or whitespace.
+  const charBefore = at === 0 ? "" : text[at - 1];
+  if (charBefore !== "" && !WHITESPACE.test(charBefore)) return null;
+
+  // The token is everything from just after `@` up to the caret. Whitespace
+  // ends a mention, so a caret past a space means we're no longer inside one.
+  const token = before.slice(at + 1);
+  if (WHITESPACE.test(token)) return null;
+
+  const source = resolveMentionSource(token, sources);
+  if (!source) return null;
+
+  const prefix = source.prefix ?? "";
+  return {
+    source,
+    prefix,
+    query: token.slice(prefix.length),
+    start: at,
+    end: pos,
+    token,
+  };
+}
+
+/** The text a chosen item inserts, honoring item/source overrides. */
+export function buildMentionInsertText(source: MentionSource, item: MentionItem): string {
+  if (typeof item.insertText === "string") return item.insertText;
+  if (typeof source.insert === "function") return source.insert(item, source);
+  return `@${source.prefix ?? ""}${item.id}`;
+}
+
+export type MentionApplication = {
+  /** The full text after replacing the active token with the inserted mention. */
+  text: string;
+  /** Caret position after insertion (after the token and its trailing space). */
+  caret: number;
+};
+
+/**
+ * Replace the active mention token in `text` with `insertText`, adding a single
+ * trailing space so the caret lands ready for the next word and the freshly
+ * inserted `@…` token does not immediately re-trigger the popup.
+ */
+export function applyMention(
+  text: string,
+  active: Pick<ActiveMention, "start" | "end">,
+  insertText: string,
+): MentionApplication {
+  const before = text.slice(0, active.start);
+  const after = text.slice(active.end);
+  const hasLeadingSpace = after.length > 0 && WHITESPACE.test(after[0]);
+  const separator = hasLeadingSpace ? "" : " ";
+  return {
+    text: `${before}${insertText}${separator}${after}`,
+    // Land just past the single following space (added or pre-existing) so the
+    // caret is ready for the next word.
+    caret: before.length + insertText.length + 1,
+  };
+}
+
+/**
+ * Rank static items against a query: label starts-with beats label contains,
+ * which beats id matches. Case-insensitive. An empty query returns the head of
+ * the list unchanged.
+ */
+export function filterMentionItems(
+  items: MentionItem[],
+  query: string,
+  limit = 8,
+): MentionItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items.slice(0, limit);
+
+  const scored: Array<{ item: MentionItem; score: number; order: number }> = [];
+  items.forEach((item, order) => {
+    const label = (item.label ?? "").toLowerCase();
+    const id = String(item.id ?? "").toLowerCase();
+    const detail = (item.detail ?? "").toString().toLowerCase();
+    let score = -1;
+    if (label.startsWith(q)) score = 0;
+    else if (label.includes(q)) score = 1;
+    else if (id.startsWith(q) || id.includes(q)) score = 2;
+    else if (detail.includes(q)) score = 3;
+    if (score >= 0) scored.push({ item, score, order });
+  });
+
+  scored.sort((a, b) => (a.score - b.score) || (a.order - b.order));
+  return scored.slice(0, limit).map((s) => s.item);
+}
+
+/**
+ * Route a typed query (everything after the trigger char, e.g. `T123` or `bob`)
+ * to its source and resolve the items to show. Handles prefix stripping,
+ * `minChars`, async `search`, static `items` (incl. provider functions),
+ * normalization, and the `limit`. Returns `null` when no source matches.
+ *
+ * Shared by both mention frontends (the textarea hook and the BlockNote menu).
+ */
+export async function resolveMentionQuery(
+  query: string,
+  sources: MentionSource[],
+): Promise<{ source: MentionSource; items: MentionItem[] } | null> {
+  const source = resolveMentionSource(query, sources);
+  if (!source) return null;
+
+  const prefix = source.prefix ?? "";
+  const sub = query.slice(prefix.length);
+  const limit = source.limit ?? 8;
+
+  if (typeof source.search === "function") {
+    const minChars = source.minChars ?? 0;
+    if (sub.length < minChars) return { source, items: [] };
+    const items = normalizeMentionItems(await source.search(sub)).slice(0, limit);
+    return { source, items };
+  }
+
+  const input = source.items;
+  const raw = typeof input === "function" ? await input() : input ?? [];
+  const items = filterMentionItems(normalizeMentionItems(raw), sub, limit);
+  return { source, items };
+}
+
+/* ------------------------------------------------------------------ *
+ * Normalization of async / JSON:API results into MentionItem[]
+ * ------------------------------------------------------------------ */
+
+export function parseMentionsFromJsonApi(
+  document: MentionJsonApiDocument | MentionJsonApiResource[] | null | undefined,
+): MentionItem[] {
+  const resources = Array.isArray(document) ? document : document?.data;
+  if (!Array.isArray(resources) || resources.length === 0) return [];
+  return resources
+    .map((resource) => normalizeJsonApiResource(resource))
+    .filter((value): value is MentionItem => Boolean(value));
+}
+
+/** Coerce any supported `search`/`items` result into a clean `MentionItem[]`. */
+export function normalizeMentionItems(result: MentionSearchResult): MentionItem[] {
+  if (!result) return [];
+  if (Array.isArray(result)) {
+    if (result.length === 0) return [];
+    if (isMentionItemArray(result)) return result as MentionItem[];
+    return parseMentionsFromJsonApi(result as MentionJsonApiResource[]);
+  }
+  return parseMentionsFromJsonApi(result);
+}
+
+function normalizeJsonApiResource(
+  resource: MentionJsonApiResource | null | undefined,
+): MentionItem | null {
+  if (!resource) return null;
+  const attrs = resource.attributes ?? {};
+  const id = resource.id;
+  if (id === null || id === undefined || id === "") return null;
+
+  const label =
+    attrs.title ?? attrs.name ?? attrs.label ?? attrs.username ?? String(id);
+  return {
+    id: String(id),
+    label: String(label),
+    detail: attrs.detail ?? attrs.description ?? attrs.email ?? null,
+  };
+}
+
+function isMentionItemArray(value: unknown[]): boolean {
+  const first = value[0] as Partial<MentionItem> | undefined;
+  return Boolean(first) && typeof first?.label === "string";
+}

package/src/editor/styles.css

@@ -1844,6 +1844,81 @@ html.dark .bn-step-editor--preview a.step-preview-link {
   color: var(--step-muted);
 }
 
+/* Universal @-mention autocomplete popup (portaled to <body>, fixed to caret). */
+.bn-mention-popup {
+  position: fixed;
+  min-width: 15rem;
+  max-width: 24rem;
+  background: var(--bg-white-opaque);
+  border-radius: 0.65rem;
+  border: 1px solid var(--step-border-light);
+  box-shadow: 0 18px 35px var(--shadow-medium);
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 9999;
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.bn-mention-popup__header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.6rem 0.35rem;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--step-muted);
+}
+
+.bn-mention-popup__prefix {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.bn-mention-popup__status {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  color: var(--step-muted);
+}
+
+.bn-mention-item {
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  text-align: left;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  cursor: pointer;
+  color: var(--text-primary);
+  width: 100%;
+}
+
+.bn-mention-item:hover,
+.bn-mention-item--active {
+  background: var(--step-bg-light);
+}
+
+.bn-mention-item__label {
+  font-size: 0.92rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bn-mention-item__detail {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--step-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .bn-inline-image {
   display: block;
   max-width: 100%;