@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/dist-esm/ui/render-markdown.mjs

@@ -1,45 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-function renderMarkdown(text) {
-  return text.trim().split(/\n{2,}/).map((block, i) => {
-    const lines = block.split("\n");
-    if (lines.every((line) => /^\s*[-*]\s+/.test(line))) {
-      return (
-        /* @__PURE__ */ jsx("ul", { className: "md-list", children: lines.map((line, j) => /* @__PURE__ */ jsx("li", { children: renderInline(line.replace(/^\s*[-*]\s+/, "")) }, j)) }, i)
-      );
-    }
-    return /* @__PURE__ */ jsx("p", { className: "md-p", children: lines.map((line, j) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      j > 0 && /* @__PURE__ */ jsx("br", {}),
-      renderInline(line)
-    ] }, j)) }, i);
-  });
-}
-const INLINE = /(\*\*[^*]+\*\*|\*[^*]+\*|_[^_]+_|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
-function renderInline(text) {
-  const out = [];
-  let last = 0;
-  let key = 0;
-  for (const match of text.matchAll(INLINE)) {
-    const index = match.index ?? 0;
-    if (index > last) out.push(text.slice(last, index));
-    out.push(renderToken(match[0], key++));
-    last = index + match[0].length;
-  }
-  if (last < text.length) out.push(text.slice(last));
-  return out;
-}
-function renderToken(token, key) {
-  if (token.startsWith("**")) return /* @__PURE__ */ jsx("strong", { children: token.slice(2, -2) }, key);
-  if (token.startsWith("`"))
-    return /* @__PURE__ */ jsx("code", { className: "md-code", children: token.slice(1, -1) }, key);
-  if (token.startsWith("[")) {
-    const link = /\[([^\]]+)\]\(([^)]+)\)/.exec(token);
-    if (!link) return token;
-    return /* @__PURE__ */ jsx("a", { href: link[2], target: "_blank", rel: "noreferrer", children: link[1] }, key);
-  }
-  return /* @__PURE__ */ jsx("em", { children: token.slice(1, -1) }, key);
-}
-export {
-  renderMarkdown
-};
-//# sourceMappingURL=render-markdown.mjs.map

package/dist-esm/ui/render-markdown.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/render-markdown.tsx"],
-  "sourcesContent": ["import { Fragment, ReactNode } from 'react'\n\n/**\n * Minimal markdown for comment bodies: paragraphs, line breaks, bullet lists, and\n * inline **bold**, *italic*, `code`, and [links](url). Not a full CommonMark parser \u2014\n * just the markdown people actually write in comments. Renders React elements only \u2014\n * never raw HTML \u2014 so there's no HTML-injection surface.\n * @public\n */\nexport function renderMarkdown(text: string): ReactNode {\n\treturn text\n\t\t.trim()\n\t\t.split(/\\n{2,}/)\n\t\t.map((block, i) => {\n\t\t\tconst lines = block.split('\\n')\n\t\t\tif (lines.every((line) => /^\\s*[-*]\\s+/.test(line))) {\n\t\t\t\treturn (\n\t\t\t\t\t<ul key={i} className=\"md-list\">\n\t\t\t\t\t\t{lines.map((line, j) => (\n\t\t\t\t\t\t\t<li key={j}>{renderInline(line.replace(/^\\s*[-*]\\s+/, ''))}</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<p key={i} className=\"md-p\">\n\t\t\t\t\t{lines.map((line, j) => (\n\t\t\t\t\t\t<Fragment key={j}>\n\t\t\t\t\t\t\t{j > 0 && <br />}\n\t\t\t\t\t\t\t{renderInline(line)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</p>\n\t\t\t)\n\t\t})\n}\n\nconst INLINE = /(\\*\\*[^*]+\\*\\*|\\*[^*]+\\*|_[^_]+_|`[^`]+`|\\[[^\\]]+\\]\\([^)]+\\))/g\n\nfunction renderInline(text: string): ReactNode {\n\tconst out: ReactNode[] = []\n\tlet last = 0\n\tlet key = 0\n\tfor (const match of text.matchAll(INLINE)) {\n\t\tconst index = match.index ?? 0\n\t\tif (index > last) out.push(text.slice(last, index))\n\t\tout.push(renderToken(match[0], key++))\n\t\tlast = index + match[0].length\n\t}\n\tif (last < text.length) out.push(text.slice(last))\n\treturn out\n}\n\nfunction renderToken(token: string, key: number): ReactNode {\n\tif (token.startsWith('**')) return <strong key={key}>{token.slice(2, -2)}</strong>\n\tif (token.startsWith('`'))\n\t\treturn (\n\t\t\t<code key={key} className=\"md-code\">\n\t\t\t\t{token.slice(1, -1)}\n\t\t\t</code>\n\t\t)\n\tif (token.startsWith('[')) {\n\t\tconst link = /\\[([^\\]]+)\\]\\(([^)]+)\\)/.exec(token)\n\t\tif (!link) return token\n\t\treturn (\n\t\t\t<a key={key} href={link[2]} target=\"_blank\" rel=\"noreferrer\">\n\t\t\t\t{link[1]}\n\t\t\t</a>\n\t\t)\n\t}\n\treturn <em key={key}>{token.slice(1, -1)}</em>\n}\n"],
-  "mappings": "AAmBO,cAQD,YARC;AAnBP,SAAS,gBAA2B;AAS7B,SAAS,eAAe,MAAyB;AACvD,SAAO,KACL,KAAK,EACL,MAAM,QAAQ,EACd,IAAI,CAAC,OAAO,MAAM;AAClB,UAAM,QAAQ,MAAM,MAAM,IAAI;AAC9B,QAAI,MAAM,MAAM,CAAC,SAAS,cAAc,KAAK,IAAI,CAAC,GAAG;AACpD,aACC,oBAAC,QAAW,WAAU,WACpB,gBAAM,IAAI,CAAC,MAAM,MACjB,oBAAC,QAAY,uBAAa,KAAK,QAAQ,eAAe,EAAE,CAAC,KAAhD,CAAkD,CAC3D,KAHO,CAIT;AAAA,IAEF;AACA,WACC,oBAAC,OAAU,WAAU,QACnB,gBAAM,IAAI,CAAC,MAAM,MACjB,qBAAC,YACC;AAAA,UAAI,KAAK,oBAAC,QAAG;AAAA,MACb,aAAa,IAAI;AAAA,SAFJ,CAGf,CACA,KANM,CAOR;AAAA,EAEF,CAAC;AACH;AAEA,MAAM,SAAS;AAEf,SAAS,aAAa,MAAyB;AAC9C,QAAM,MAAmB,CAAC;AAC1B,MAAI,OAAO;AACX,MAAI,MAAM;AACV,aAAW,SAAS,KAAK,SAAS,MAAM,GAAG;AAC1C,UAAM,QAAQ,MAAM,SAAS;AAC7B,QAAI,QAAQ,KAAM,KAAI,KAAK,KAAK,MAAM,MAAM,KAAK,CAAC;AAClD,QAAI,KAAK,YAAY,MAAM,CAAC,GAAG,KAAK,CAAC;AACrC,WAAO,QAAQ,MAAM,CAAC,EAAE;AAAA,EACzB;AACA,MAAI,OAAO,KAAK,OAAQ,KAAI,KAAK,KAAK,MAAM,IAAI,CAAC;AACjD,SAAO;AACR;AAEA,SAAS,YAAY,OAAe,KAAwB;AAC3D,MAAI,MAAM,WAAW,IAAI,EAAG,QAAO,oBAAC,YAAkB,gBAAM,MAAM,GAAG,EAAE,KAAvB,GAAyB;AACzE,MAAI,MAAM,WAAW,GAAG;AACvB,WACC,oBAAC,UAAe,WAAU,WACxB,gBAAM,MAAM,GAAG,EAAE,KADR,GAEX;AAEF,MAAI,MAAM,WAAW,GAAG,GAAG;AAC1B,UAAM,OAAO,0BAA0B,KAAK,KAAK;AACjD,QAAI,CAAC,KAAM,QAAO;AAClB,WACC,oBAAC,OAAY,MAAM,KAAK,CAAC,GAAG,QAAO,UAAS,KAAI,cAC9C,eAAK,CAAC,KADA,GAER;AAAA,EAEF;AACA,SAAO,oBAAC,QAAc,gBAAM,MAAM,GAAG,EAAE,KAAvB,GAAyB;AAC1C;",
-  "names": []
-}

package/src/canvas/region-options.ts

@@ -1,57 +0,0 @@
-import { atom, Atom, Editor, VecLike } from 'tldraw'
-
-/**
- * The configurable dimensions of region comments — a design surface for prototyping the interaction
- * before settling it. Region is **off by default**, so a consumer that leaves it unset keeps plain
- * click-only point/shape commenting. Set it per editor through `<CanvasComments regionOptions>`.
- * @public
- */
-export interface RegionCommentOptions {
-	/** Whether dragging the comment tool out creates a region anchor. Off → click-only. */
-	enabled: boolean
-	/** Which corner the pin and composer sit on, as a normalized 0–1 offset. Default bottom-right. */
-	pinCorner: VecLike
-	/** When the dashed box and its handles reveal: while the pointer is within the region, while the
-	 *  pin is hovered, or only while the thread is open. */
-	reveal: 'pointer' | 'pin-hover' | 'open'
-	/** How a region is moved: dragging its pin, dragging its body, or either. */
-	move: 'pin' | 'body' | 'both'
-	/** The resize affordance: corner handles, edge handles, or none. */
-	resize: 'corners' | 'edges' | 'none'
-}
-
-/** The out-of-the-box region config: disabled, and — when a consumer enables it — the current
- *  bottom-right / pointer-reveal / pin-move / corner-resize behaviour.
- * @public */
-export const DEFAULT_REGION_COMMENT_OPTIONS: RegionCommentOptions = {
-	enabled: false,
-	pinCorner: { x: 1, y: 1 },
-	reveal: 'pointer',
-	move: 'pin',
-	resize: 'corners',
-}
-
-// Per-editor region config. The overlay publishes its merged `regionOptions` here so the comment
-// tool — which has no props of its own — can read the same per-instance config at interaction time.
-// Held in an atom so reactive readers (e.g. `anchorPagePoint`, called inside `useValue`) recompute
-// when the config changes; a plain map read wouldn't, leaving the pin at the stale default corner.
-const byEditor = new WeakMap<Editor, Atom<RegionCommentOptions>>()
-
-function getEditorAtom(editor: Editor): Atom<RegionCommentOptions> {
-	let a = byEditor.get(editor)
-	if (!a) {
-		a = atom('regionCommentOptions', DEFAULT_REGION_COMMENT_OPTIONS)
-		byEditor.set(editor, a)
-	}
-	return a
-}
-
-/** Publish an editor's region config (called by the overlay from its `regionOptions` prop). */
-export function setRegionCommentOptions(editor: Editor, options: RegionCommentOptions): void {
-	getEditorAtom(editor).set(options)
-}
-
-/** The editor's region config, or the disabled default when none was set. */
-export function getRegionCommentOptions(editor: Editor): RegionCommentOptions {
-	return getEditorAtom(editor).get()
-}

package/src/ui/avatar.tsx

@@ -1,31 +0,0 @@
-import { getFirstCharacter } from 'tldraw'
-
-/** @public */
-export interface AvatarProps {
-	name: string
-	/** Background colour, used when there's no `image`. Falls back to the default avatar tint. */
-	color?: string
-	/** Avatar image URL. When set, shows the image instead of the coloured initial. */
-	image?: string
-}
-
-function initial(name: string) {
-	return (getFirstCharacter(name.trim()) || '?').toUpperCase()
-}
-
-/** A commenter's avatar — their image if provided, otherwise a single-initial coloured circle.
- * @public @react */
-export function Avatar({ name, color, image }: AvatarProps) {
-	if (image) {
-		return <img className="cmt-avatar cmt-avatar--image" src={image} alt="" aria-hidden="true" />
-	}
-	return (
-		<div
-			className="cmt-avatar"
-			aria-hidden="true"
-			style={color ? { backgroundColor: color } : undefined}
-		>
-			{initial(name)}
-		</div>
-	)
-}

package/src/ui/comment-mention.ts

@@ -1,47 +0,0 @@
-import { mergeAttributes } from '@tiptap/core'
-import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention'
-
-/**
- * A mention node's display name: the member's current name, resolved live from its id when a
- * resolver is given (so a rename shows through), falling back to the label captured at insert time
- * when no source can name the id — e.g. a deleted account. The stored id is always the source of
- * truth; live resolution only freshens the displayed name over that captured label.
- */
-function mentionName(
-	attrs: MentionNodeAttrs,
-	resolveName?: (id: string) => string | undefined
-): string {
-	const resolved = attrs.id && resolveName ? resolveName(attrs.id) : undefined
-	return resolved ?? attrs.label ?? attrs.id ?? ''
-}
-
-export interface CommentMentionOptions {
-	/**
-	 * Resolve a member id to its current display name — for the read-only render paths. Returns
-	 * `undefined` when the id can't be resolved, so the render falls back to the mention's stored label.
-	 */
-	resolveName?(id: string): string | undefined
-	/** The `@`-picker suggestion config — for the composer (omit on the render paths). */
-	suggestion?: MentionOptions['suggestion']
-}
-
-/**
- * The comment @-mention node — TipTap's `Mention` configured to render as a `.cmt-mention` pill.
- *
- * A factory rather than a shared constant because it's configured differently per context: the
- * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's
- * current name, not a copy frozen at insert time), while the composer passes a `suggestion` (the
- * `@` picker). The node schema is identical either way — only these two levers differ.
- */
-export function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {
-	return Mention.configure({
-		HTMLAttributes: { class: 'cmt-mention' },
-		renderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
-		renderHTML: ({ node, options }) => [
-			'span',
-			mergeAttributes(options.HTMLAttributes, { 'data-mention-id': node.attrs.id }),
-			`@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
-		],
-		...(suggestion ? { suggestion } : {}),
-	})
-}

package/src/ui/comment-text.tsx

@@ -1,12 +0,0 @@
-import { renderMarkdown } from './render-markdown'
-
-/** @public */
-export interface CommentTextProps {
-	/** Rich text body, authored as markdown. */
-	text: string
-}
-
-/** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */
-export function CommentText({ text }: CommentTextProps) {
-	return <div className="cmt-text">{renderMarkdown(text)}</div>
-}

package/src/ui/mention-list.tsx

@@ -1,106 +0,0 @@
-import { ReactNode } from 'react'
-import { useTranslation } from 'tldraw'
-import { Avatar } from './avatar'
-
-/** A person the composer's \@-mention picker can offer. @public */
-export interface MentionMember {
-	id: string
-	name: string
-	/** Avatar image URL. Falls back to a coloured initial when omitted. */
-	avatar?: string
-	/** Avatar background colour, used when there's no `avatar` image. */
-	color?: string
-	/** A secondary line under the name — e.g. an email or handle. Omit for a single-line row. */
-	secondary?: string
-	/** Marks the current user; shown as a "(You)" suffix after the name. */
-	you?: boolean
-	/** Hosts may carry extra fields; a custom `renderMember` can read them. */
-	[key: string]: unknown
-}
-
-/** @public */
-export interface MentionListProps {
-	/** Members to choose from — already resolved for the current query by the host. */
-	members: MentionMember[]
-	/** Index of the highlighted row, driven by the composer's keyboard navigation. */
-	activeIndex?: number
-	/** Called when a member is chosen (click, or Enter on the active row). */
-	onSelect?(member: MentionMember): void
-	/** Shown when no member matches the query. Defaults to a translated "No matches". */
-	emptyLabel?: string
-	/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */
-	renderMember?(member: MentionMember): ReactNode
-}
-
-/** The default row content: avatar, name (with a "(You)" marker), and an optional secondary line. */
-function DefaultMemberRow({ member }: { member: MentionMember }) {
-	const msg = useTranslation()
-	return (
-		<>
-			<Avatar name={member.name} color={member.color} image={member.avatar} />
-			<span className="cmt-mention-list__text">
-				<span className="cmt-mention-list__name">
-					{member.name}
-					{member.you && (
-						<span className="cmt-mention-list__you">{`(${msg('comments.mention-you')})`}</span>
-					)}
-				</span>
-				{member.secondary && (
-					<span className="cmt-mention-list__secondary">{member.secondary}</span>
-				)}
-			</span>
-		</>
-	)
-}
-
-/**
- * The \@-mention member picker: a popover list of people to mention, shown as the user types after
- * `@`. Presentational — the composer's suggestion plugin owns resolution, keyboard navigation, and
- * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.
- * @public @react
- */
-export function MentionList({
-	members,
-	activeIndex = 0,
-	onSelect,
-	emptyLabel,
-	renderMember,
-}: MentionListProps) {
-	const msg = useTranslation()
-	if (members.length === 0) {
-		return (
-			<div className="cmt-mention-list cmt-mention-list--empty">
-				{emptyLabel ?? msg('comments.mention-no-matches')}
-			</div>
-		)
-	}
-	return (
-		<div className="cmt-mention-list" role="listbox">
-			{members.map((member, i) => {
-				const active = i === activeIndex
-				return (
-					<button
-						key={member.id}
-						type="button"
-						role="option"
-						aria-selected={active}
-						className={
-							active
-								? 'cmt-mention-list__item cmt-mention-list__item--active'
-								: 'cmt-mention-list__item'
-						}
-						// Keep the composer focused on a row press: it's portaled outside the editor, so a
-						// bare mousedown would blur the composer — which now dismisses the picker — before
-						// the click could select. Selection runs on click; focus stays put.
-						onMouseDown={(e) => e.preventDefault()}
-						onClick={() => {
-							if (onSelect) onSelect(member)
-						}}
-					>
-						{renderMember ? renderMember(member) : <DefaultMemberRow member={member} />}
-					</button>
-				)
-			})}
-		</div>
-	)
-}

package/src/ui/mention-suggestion.test.ts

@@ -1,18 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { filterMentionMembers } from './mention-suggestion'
-
-const members = [
-	{ id: 'u1', name: 'Ada Lovelace' },
-	{ id: 'u2', name: 'Alan Turing' },
-	{ id: 'u3', name: 'Grace Hopper' },
-]
-const ids = (q: string) => filterMentionMembers(members, q).map((m) => m.id)
-
-describe('filterMentionMembers', () => {
-	it('matches a case-insensitive substring; empty query keeps all', () => {
-		expect(ids('')).toEqual(['u1', 'u2', 'u3'])
-		expect(ids('grace')).toEqual(['u3'])
-		expect(ids('AL')).toEqual(['u2']) // "Alan", case-insensitive; "Ada Lovelace" has no "al"
-		expect(ids('zzz')).toEqual([])
-	})
-})

package/src/ui/mention-suggestion.tsx

@@ -1,285 +0,0 @@
-import type { MentionNodeAttrs } from '@tiptap/extension-mention'
-import { ReactRenderer } from '@tiptap/react'
-import type { SuggestionKeyDownProps, SuggestionOptions } from '@tiptap/suggestion'
-import { type ReactNode, forwardRef, useImperativeHandle, useState } from 'react'
-import { type Editor as TldrawEditor, atom, react } from 'tldraw'
-import { MentionList, MentionMember } from './mention-list'
-
-/** The handle the suggestion plugin drives — it forwards navigation keys into the popup. */
-export interface MentionPopupHandle {
-	onKeyDown(props: SuggestionKeyDownProps): boolean
-}
-
-interface MentionPopupProps {
-	items: MentionMember[]
-	command(attrs: MentionNodeAttrs): void
-	renderMember?(member: MentionMember): ReactNode
-}
-
-/** The live @-picker popup: owns the highlighted index and keyboard, renders the presentational list. */
-const MentionPopup = forwardRef<MentionPopupHandle, MentionPopupProps>(function MentionPopup(
-	{ items, command, renderMember },
-	ref
-) {
-	const [activeIndex, setActiveIndex] = useState(0)
-	// A new query yields new items; reset the highlight to the top during render — not in an effect,
-	// which would leave a frame where `activeIndex` still points past a shrunk list and Enter selects
-	// its (now out-of-range, undefined) item, swallowing the key without inserting a mention.
-	const [prevItems, setPrevItems] = useState(items)
-	if (items !== prevItems) {
-		setPrevItems(items)
-		setActiveIndex(0)
-	}
-
-	const select = (member: MentionMember | undefined) => {
-		if (member) command({ id: member.id, label: member.name })
-	}
-
-	useImperativeHandle(ref, () => ({
-		onKeyDown: ({ event }) => {
-			if (items.length === 0) return false
-			if (event.key === 'ArrowUp') {
-				setActiveIndex((i) => (i + items.length - 1) % items.length)
-				return true
-			}
-			if (event.key === 'ArrowDown') {
-				setActiveIndex((i) => (i + 1) % items.length)
-				return true
-			}
-			// Enter and Tab both complete the highlighted member (falling back to the top match so a
-			// stale index never selects `undefined`). The empty-roster case is handled a level up, in
-			// the suggestion's onKeyDown, which cancels the picker.
-			if (event.key === 'Enter' || event.key === 'Tab') {
-				select(items[activeIndex] ?? items[0])
-				return true
-			}
-			return false
-		},
-	}))
-
-	return (
-		<MentionList
-			members={items}
-			activeIndex={activeIndex}
-			onSelect={select}
-			renderMember={renderMember}
-		/>
-	)
-})
-
-const MAX_SUGGESTIONS = 8
-
-/** Members whose name contains the query (case-insensitive), capped to the popup's length.
- * @public */
-export function filterMentionMembers(members: MentionMember[], query: string): MentionMember[] {
-	const q = query.toLowerCase()
-	return members.filter((m) => m.name.toLowerCase().includes(q)).slice(0, MAX_SUGGESTIONS)
-}
-
-// A reactive flag for whether the @-picker is showing. Deliberately NOT tldraw's open-menu registry:
-// registering there mounts MenuClickCapture, which covers the canvas with a click-capture overlay to
-// make it inert while a menu is open. But the picker is an inline autocomplete, not a modal — the
-// canvas must stay pannable/zoomable beneath it — so we track "open" ourselves instead.
-const mentionPickerOpen = atom('isMentionPickerOpen', false)
-
-/**
- * Whether the @-mention picker is currently showing. Host dismissal (Escape, outside-click) checks
- * this so it can defer to the picker instead of tearing down the composer or thread beneath it.
- */
-export function isMentionPickerOpen(): boolean {
-	return mentionPickerOpen.get()
-}
-
-/** @public */
-export interface MentionSuggestionOptions {
-	/** Override a member row's content in the picker. Defaults to avatar + name (+ secondary). */
-	renderMember?(member: MentionMember): ReactNode
-	/**
-	 * The tldraw editor the composer lives in. When provided, the popup re-anchors reactively as the
-	 * canvas camera moves (the composer rides it) instead of polling every frame. Omit off-canvas.
-	 */
-	editor?: TldrawEditor | null
-}
-
-/**
- * Build the TipTap `suggestion` config for the comment \@-picker. `getSuggestions(query)` is the
- * host's resolver — it returns the members matching the query (sync or async); the SDK owns neither
- * the roster nor the filtering. The plugin runs outside React, so `render` mounts `MentionPopup` via
- * a `ReactRenderer`, forwards navigation keys through the popup's imperative handle, and lets it call
- * `command` to insert.
- * @public
- */
-export function createMentionSuggestion(
-	getSuggestions: (query: string) => MentionMember[] | Promise<MentionMember[]>,
-	options: MentionSuggestionOptions = {}
-): Omit<SuggestionOptions<MentionMember, MentionNodeAttrs>, 'editor'> {
-	return {
-		char: '@',
-		items: ({ query }) => getSuggestions(query),
-		render: () => {
-			let renderer: ReactRenderer<MentionPopupHandle, MentionPopupProps> | null = null
-			let container: HTMLElement | null = null
-			let editorEl: HTMLElement | null = null
-			let canvasEl: Element | null = null
-			let stopCameraReaction: (() => void) | null = null
-			// The composer field's top-left in page space, plus the popup's screen width. Captured on a
-			// fresh read so camera moves can re-derive the popup's screen position from the page anchor
-			// (see reposition) rather than the field's DOM rect.
-			let anchorPage: { x: number; y: number } | null = null
-			let popupWidth = 0
-
-			const applyScreen = (left: number, top: number, width: number) => {
-				if (!container) return
-				container.style.left = `${left}px`
-				container.style.top = `${top + 4}px`
-				container.style.width = `${width}px`
-			}
-
-			// Fresh placement: read the field's real screen rect, position the popup flush under it (not
-			// the caret, matching its width), and remember the field's page-space anchor for reposition.
-			const place = () => {
-				if (!container || !editorEl || container.style.display === 'none') return
-				const field = editorEl.closest('.cmt-composer__field') ?? editorEl
-				const rect = field.getBoundingClientRect()
-				popupWidth = rect.width
-				anchorPage = options.editor?.screenToPage({ x: rect.left, y: rect.bottom }) ?? null
-				applyScreen(rect.left, rect.bottom, rect.width)
-			}
-
-			// Re-derive the popup's screen position from the remembered page anchor — pure camera math,
-			// always current. Reading the field's DOM rect here instead would lag by a frame: the canvas
-			// composer re-positions itself on a React commit (a `useValue(pageToViewport(...))`), which
-			// lands after a camera reaction runs, so the rect is still last frame's during a pan.
-			const reposition = () => {
-				if (!anchorPage || !options.editor) return
-				const s = options.editor.pageToScreen(anchorPage)
-				applyScreen(s.x, s.y, popupWidth)
-			}
-
-			// The popup is `position: fixed`, but its anchor — a canvas composer — rides the camera:
-			// panning or zooming moves the composer with no scroll/resize event to hook. Re-anchor when
-			// the camera actually changes (via a tldraw reaction) rather than polling every frame, plus
-			// on window scroll/resize for the off-canvas case (which re-read the field directly).
-			const startFollowing = () => {
-				window.addEventListener('scroll', place, true)
-				window.addEventListener('resize', place)
-				if (options.editor) {
-					stopCameraReaction = react('anchor mention popup to camera', () => {
-						options.editor!.getCamera() // track the camera so this re-runs as it moves
-						reposition()
-					})
-				}
-			}
-			const stopFollowing = () => {
-				window.removeEventListener('scroll', place, true)
-				window.removeEventListener('resize', place)
-				stopCameraReaction?.()
-				stopCameraReaction = null
-				anchorPage = null
-			}
-
-			// Dismiss the roster — on Escape, or when the composer loses focus — by hiding it and
-			// clearing the open flag, so isMentionPickerOpen() stays accurate and the thread's own
-			// Escape/outside-click dismissal can take over. The TipTap suggestion stays active, so typing
-			// re-shows the roster via onUpdate.
-			const hide = () => {
-				if (container) container.style.display = 'none'
-				mentionPickerOpen.set(false)
-			}
-
-			// Wheel/panning over the popup drives the canvas beneath it, so scrolling to pan or zoom
-			// isn't swallowed by the roster — the same passthrough the rest of the comments UI gets from
-			// `usePassThroughWheelEvents`. The list still scrolls itself when the roster overflows (we
-			// only redispatch when it can't). Done imperatively because the popup lives outside React.
-			const onWheel = (e: WheelEvent) => {
-				if ((e as any).isSpecialRedispatchedEvent || !canvasEl) return
-				const list = container?.querySelector('.cmt-mention-list')
-				if (list && list.scrollHeight > list.clientHeight) return
-				e.preventDefault()
-				const redispatched = new WheelEvent('wheel', e)
-				;(redispatched as any).isSpecialRedispatchedEvent = true
-				canvasEl.dispatchEvent(redispatched)
-			}
-
-			return {
-				onStart: (props) => {
-					renderer = new ReactRenderer(MentionPopup, {
-						props: {
-							items: props.items,
-							command: props.command,
-							renderMember: options.renderMember,
-						},
-						editor: props.editor,
-					})
-					editorEl = props.editor.view.dom as HTMLElement
-					// The TipTap suggestion has no blur handling, so without this the picker would stay
-					// "open" (and the thread would defer its Escape to it) after focus moved away from the
-					// composer — leaving Escape a no-op and the roster stuck on screen.
-					editorEl.addEventListener('blur', hide)
-					container = document.createElement('div')
-					container.className = 'cmt-mention-popup'
-					container.appendChild(renderer.element)
-					// Mount inside the tldraw container so the popup inherits the theme variables
-					// (--tl-color-*); portaling to document.body would strip them and lose the panel.
-					const themed = editorEl.closest('.tl-container')
-					;(themed ?? document.body).appendChild(container)
-					canvasEl = themed?.querySelector('.tl-canvas') ?? null
-					container.addEventListener('wheel', onWheel, { passive: false })
-					place()
-					startFollowing()
-					mentionPickerOpen.set(true)
-				},
-				onUpdate: (props) => {
-					if (renderer)
-						renderer.updateProps({
-							items: props.items,
-							command: props.command,
-							renderMember: options.renderMember,
-						})
-					// Typing after an Escape re-shows the roster.
-					if (container) container.style.display = ''
-					mentionPickerOpen.set(true)
-					place()
-				},
-				onKeyDown: (props) => {
-					// Once the roster is hidden (a prior Escape), the TipTap suggestion is still active but
-					// this handler goes inert — every key passes through to the composer/thread (so a second
-					// Escape closes them, and Arrow/Enter don't select from an invisible list). Typing
-					// re-shows the roster via onUpdate.
-					if (!isMentionPickerOpen()) return false
-					if (props.event.key === 'Escape') {
-						// Dismiss only the roster: hide it and stop the key so the composer/thread beneath
-						// doesn't also treat Escape as "abandon".
-						hide()
-						props.event.stopPropagation()
-						return true
-					}
-					if (props.event.key === 'Enter' || props.event.key === 'Tab') {
-						// Complete the highlighted member if there is one to complete; if the roster is empty
-						// there's nothing to pick, so cancel the picker and swallow the key — the composer
-						// beneath neither submits (Enter) nor moves focus / indents (Tab).
-						const completed = renderer?.ref?.onKeyDown(props) ?? false
-						if (!completed) {
-							hide()
-							props.event.stopPropagation()
-						}
-						return true
-					}
-					if (renderer && renderer.ref) return renderer.ref.onKeyDown(props)
-					return false
-				},
-				onExit: () => {
-					stopFollowing()
-					if (editorEl) editorEl.removeEventListener('blur', hide)
-					if (container) container.removeEventListener('wheel', onWheel)
-					if (container) container.remove()
-					if (renderer) renderer.destroy()
-					renderer = null
-					container = null
-					canvasEl = null
-					mentionPickerOpen.set(false)
-				},
-			}
-		},
-	}
-}

package/src/ui/mention.tsx

@@ -1,9 +0,0 @@
-/** @public */
-export interface MentionProps {
-	name: string
-}
-
-/** An \@-mention pill for referencing a person in a comment. @public @react */
-export function Mention({ name }: MentionProps) {
-	return <span className="cmt-mention">@{name}</span>
-}