@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

package/src/clustering/runtime.ts

@@ -2,23 +2,43 @@ import type { ClusterNode, ClusterTable, MergeEvent } from './types'
 
 /** @public */
 export interface ClusterRuntime {
-	/** Events[0..k) are active. Exposed for tests and debugging. */
+	/** Events[0..k) are in the cursor (applied unless suppressed). Exposed for tests/debugging. */
 	readonly k: number
-	/** Reset state from scratch for the given zoom (cold start / after rebuild). */
+	/**
+	 * Increments whenever the displayed partition changes. Subscribe to this, not `k`: detaches
+	 * and suppressed-event healing change the partition without moving the cursor.
+	 */
+	readonly version: number
+	/** Number of suppressed band events currently inside the cursor. Exposed for tests. */
+	getSuppressedCount(): number
+	/** Number of leaves currently detached from the displayed partition. Exposed for tests. */
+	getDetachedCount(): number
+	/** Reset state from scratch for the given zoom (cold start / after rebuild). Clears detaches. */
 	seed(zoom: number): void
 	/**
 	 * Reset state for the given zoom, carrying hysteresis state over from a previous partition
 	 * (the visible map of the model being replaced). Threshold-forced events ignore history:
-	 * zoom \<= zMerge is always active, zoom \>= zSplit always inactive. An event inside its band
-	 * is active iff its members were merged together in `previous`; a band event with no history
-	 * (e.g. introduced by the rebuild) stays inactive until the next zoom-out crosses its zMerge.
-	 * Active events must form a prefix of the table, so classification stops at the first
-	 * inactive event; later band-active events conservatively resolve to split.
+	 * zoom \<= zMerge is always merged, zoom \>= zSplit always split. An event inside its band
+	 * keeps its previous state: merged iff its members were merged together in `previous`; a band
+	 * event that was unmerged (or has no history, e.g. introduced by the rebuild) stays unmerged —
+	 * inside the cursor but suppressed — until a zoom-out crosses its own zMerge, exactly like any
+	 * other pending merge. Carryover is exact: no group changes state because of the swap alone.
+	 * Clears detaches.
 	 */
 	seedFrom(zoom: number, previous: ReadonlyMap<string, ClusterNode>): void
 	/** Advance/retreat the cursor for a camera change. No-op if zoom sits inside all bands. */
 	onCamera(zoom: number): void
-	/** The current partition: cluster id → node. Do not mutate. */
+	/**
+	 * Remove one leaf from the displayed partition without touching the event table. Local by
+	 * construction: only the nodes containing the leaf change — a badge shrinks in place (count
+	 * and centroid recomputed from its remaining members), a pair collapses to its surviving
+	 * leaf, and the leaf on its own disappears. Everything else is untouched, so a deletion,
+	 * pop-out, or thread-open never re-flows the rest of the document. The table's thresholds
+	 * around the detached leaf go stale; the caller is expected to hold a corrected rebuild and
+	 * adopt it (with seedFrom) at the next zoom-out. Unknown or already-detached ids are no-ops.
+	 */
+	detachLeaf(leafId: string): void
+	/** The displayed partition: cluster id → node, with detaches applied. Do not mutate. */
 	getVisible(): ReadonlyMap<string, ClusterNode>
 }
 
@@ -30,21 +50,49 @@ export function createClusterRuntime(table: ClusterTable): ClusterRuntime {
 class ClusterRuntimeImpl implements ClusterRuntime {
 	// mutable internally; readonly through the ClusterRuntime interface
 	k = 0
+	version = 0
+	// Structural partition: exactly leaves + applied events, never patched. The cursor invariants
+	// live here, untouched by detaches — resolution to the displayed partition happens at read
+	// time in getVisible().
 	private visible = new Map<string, ClusterNode>()
 	private seeded = false
+	// Indices (< k) of band events held unmerged by seedFrom carryover. The single cursor can
+	// only express "merged up to here", but a carried-over partition can be "merged except these"
+	// — the exceptions live here. Self-draining: an entry leaves via onCamera when the zoom
+	// crosses its own zMerge (merges) or its zSplit (the split walk retreats past it).
+	private suppressed = new Set<number>()
+	// Leaves removed from the displayed partition (deleted / popped out / opened). Patches map
+	// each structural node containing a detached leaf to its displayed replacement (or null to
+	// drop it). Rebuilt from the detached set; cleared by seed/seedFrom.
+	private detached = new Set<string>()
+	private patched = new Map<string, ClusterNode | null>()
+	private leafById: Map<string, ClusterNode> | null = null
+	private resolvedCache: { version: number; map: Map<string, ClusterNode> } | null = null
 
 	constructor(private readonly table: ClusterTable) {
 		this.resetVisible()
 	}
 
+	getSuppressedCount(): number {
+		return this.suppressed.size
+	}
+
+	getDetachedCount(): number {
+		return this.detached.size
+	}
+
 	seed(zoom: number): void {
 		validateZoom(zoom)
 		this.k = seedCount(this.table.events, zoom)
+		this.suppressed.clear()
+		this.detached.clear()
+		this.patched.clear()
 		this.resetVisible()
 		for (let i = 0; i < this.k; i++) {
 			applyEvent(this.visible, this.table.events[i])
 		}
 		this.seeded = true
+		this.version++
 	}
 
 	seedFrom(zoom: number, previous: ReadonlyMap<string, ClusterNode>): void {
@@ -56,21 +104,34 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 			}
 		}
 
+		// Cut the cursor purely on split thresholds. zSplit is non-increasing down the table, so
+		// everything past the first mandatory split (zoom >= zSplit) is also mandatorily split —
+		// this cut can never conflict with an event that should be merged.
 		const events = this.table.events
 		let k = 0
-		while (k < events.length) {
-			const event = events[k]
-			if (zoom >= event.zSplit) break
-			if (zoom > event.zMerge && !wasMergedTogether(event.result.members, ownerByMember)) break
+		while (k < events.length && zoom < events[k].zSplit) {
 			k++
 		}
 
 		this.k = k
+		this.suppressed.clear()
+		this.detached.clear()
+		this.patched.clear()
 		this.resetVisible()
 		for (let i = 0; i < k; i++) {
-			applyEvent(this.visible, events[i])
+			const event = events[i]
+			if (zoom > event.zMerge && !wasMergedTogether(event.result.members, ownerByMember)) {
+				// In its band and previously unmerged: keep it unmerged, as an exception inside
+				// the cursor. Dependency-safe: an applied event can never consume a suppressed
+				// result — merged members imply merged (subset) children, and threshold-forced
+				// events force their children too (zMerge is non-increasing down the table).
+				this.suppressed.add(i)
+			} else {
+				applyEvent(this.visible, event)
+			}
 		}
 		this.seeded = true
+		this.version++
 	}
 
 	onCamera(zoom: number): void {
@@ -79,18 +140,106 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 			throw new Error('Cluster runtime must be seeded before onCamera')
 		}
 
+		let changed = false
 		while (this.k < this.table.events.length && zoom <= this.table.events[this.k].zMerge) {
 			applyEvent(this.visible, this.table.events[this.k])
 			this.k++
+			changed = true
 		}
 		while (this.k > 0 && zoom >= this.table.events[this.k - 1].zSplit) {
 			this.k--
-			unapplyEvent(this.visible, this.table.events[this.k])
+			// A suppressed event was never applied — retreating past it is bookkeeping only.
+			if (!this.suppressed.delete(this.k)) {
+				unapplyEvent(this.visible, this.table.events[this.k])
+				changed = true
+			}
 		}
+		// Heal suppressed events at their own merge threshold: a zoom-out past zMerge merges a
+		// held-out band event exactly as if it had still been ahead of the cursor. Set iteration
+		// is insertion order (ascending index), so a healed event's suppressed children (larger
+		// zMerge, smaller index) always heal before it.
+		if (this.suppressed.size > 0) {
+			for (const i of [...this.suppressed]) {
+				if (zoom <= this.table.events[i].zMerge) {
+					this.suppressed.delete(i)
+					applyEvent(this.visible, this.table.events[i])
+					changed = true
+				}
+			}
+		}
+		if (changed) this.version++
+	}
+
+	detachLeaf(leafId: string): void {
+		if (this.detached.has(leafId)) return
+		if (!this.getLeafById().has(leafId)) return
+		this.detached.add(leafId)
+		this.rebuildPatches()
+		this.version++
 	}
 
 	getVisible(): ReadonlyMap<string, ClusterNode> {
-		return this.visible
+		if (this.resolvedCache && this.resolvedCache.version === this.version) {
+			return this.resolvedCache.map
+		}
+		let map: Map<string, ClusterNode>
+		if (this.patched.size === 0) {
+			map = this.visible
+		} else {
+			map = new Map()
+			for (const node of this.visible.values()) {
+				const resolved = this.patched.has(node.id) ? this.patched.get(node.id)! : node
+				if (resolved) map.set(resolved.id, resolved)
+			}
+		}
+		this.resolvedCache = { version: this.version, map }
+		return map
+	}
+
+	private getLeafById(): Map<string, ClusterNode> {
+		if (!this.leafById) {
+			this.leafById = new Map(this.table.leaves.map((leaf) => [leaf.id, leaf]))
+		}
+		return this.leafById
+	}
+
+	/** Recompute the patch map from the detached set. A node is patched iff it contains a
+	 *  detached member; the patch drops those members and recomputes count/centroid, collapsing
+	 *  to the surviving leaf node at count 1 and to nothing at count 0. Patched nodes keep their
+	 *  structural id, so cursor events keep addressing them. */
+	private rebuildPatches() {
+		this.patched.clear()
+		const leafById = this.getLeafById()
+		for (const id of this.detached) {
+			this.patched.set(id, null)
+		}
+		const patch = (node: ClusterNode) => {
+			if (node.members.length === 1 || !node.members.some((m) => this.detached.has(m))) return
+			const members = node.members.filter((m) => !this.detached.has(m))
+			if (members.length === 0) {
+				this.patched.set(node.id, null)
+			} else if (members.length === 1) {
+				this.patched.set(node.id, leafById.get(members[0])!)
+			} else {
+				let x = 0
+				let y = 0
+				for (const m of members) {
+					const leaf = leafById.get(m)!
+					x += leaf.centroid.x
+					y += leaf.centroid.y
+				}
+				this.patched.set(node.id, {
+					id: node.id,
+					centroid: { x: x / members.length, y: y / members.length },
+					count: members.length,
+					members,
+				})
+			}
+		}
+		for (const event of this.table.events) {
+			patch(event.result)
+			for (const child of event.children) patch(child)
+		}
 	}
 
 	private resetVisible() {

package/src/index.ts

@@ -4,6 +4,7 @@ import { registerTldrawLibraryVersion } from '@tldraw/utils'
 // custom commenting UI.
 export { Avatar, type AvatarProps } from './ui/avatar'
 export { Byline, type BylineProps } from './ui/byline'
+export { type CommentAuthor } from './ui/comment-author'
 export { CommentCard, type CommentCardProps } from './ui/comment-card'
 export { CommentComposer, type CommentComposerProps } from './ui/comment-composer'
 export { CountBadge, type CountBadgeProps } from './ui/count-badge'
@@ -61,9 +62,11 @@ export {
 	type CommentingOptions,
 	defaultCommentingOptions,
 	getCommentingOptions,
+	type ShapeCommentPrecisionContext,
 	useCommentingOptions,
 } from './canvas/options'
 export { CommentsOverflowMenu } from './canvas/comments-overflow-menu'
+export { CommentsVisibilityToggle } from './canvas/comments-visibility-toggle'
 export { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'
 export { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'
 export { useCommentingEnabled } from './canvas/license'
@@ -72,12 +75,15 @@ export { richTextToPlaintext } from './canvas/rich-text'
 export { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'
 export {
 	commentsHidden,
+	commentsSidebarOpen,
 	commitCommentMutation,
 	openThreadId,
 	pendingComment,
 	sidebarFilters,
 	toggleCommentsHidden,
+	toggleCommentsSidebar,
 	useCommentsHidden,
+	useCommentsSidebarOpen,
 	useOpenThreadId,
 	usePendingComment,
 	useSidebarFilters,
@@ -86,6 +92,7 @@ export {
 	anchorPagePoint,
 	DEFAULT_IMPRECISE_SHAPE_ANCHOR,
 	focusThread,
+	regionAnchorPinCorner,
 	shapeAnchorAt,
 } from './canvas/thread-state'
 

package/src/ui/avatar.tsx

@@ -1,12 +1,9 @@
 import { getFirstCharacter } from 'tldraw'
+import { CommentAuthor } from './comment-author'
 
 /** @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
+	author: CommentAuthor
 }
 
 function initial(name: string) {
@@ -15,17 +12,24 @@ function initial(name: string) {
 
 /** 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" />
+export function Avatar({ author }: AvatarProps) {
+	if (author.image) {
+		return (
+			<img
+				className="tlui-cmt-avatar tlui-cmt-avatar--image"
+				src={author.image}
+				alt=""
+				aria-hidden="true"
+			/>
+		)
 	}
 	return (
 		<div
-			className="cmt-avatar"
+			className="tlui-cmt-avatar"
 			aria-hidden="true"
-			style={color ? { backgroundColor: color } : undefined}
+			style={author.color ? { backgroundColor: author.color } : undefined}
 		>
-			{initial(name)}
+			{initial(author.name)}
 		</div>
 	)
 }

package/src/ui/byline.tsx

@@ -1,8 +1,9 @@
+import { CommentAuthor } from './comment-author'
 import { formatRelativeTime } from './format-time'
 
 /** @public */
 export interface BylineProps {
-	author: string
+	author: CommentAuthor
 	/** ISO datetime; formatted to relative time by the component. */
 	date: string
 	/** Shows an "edited" marker when the comment has been edited. */
@@ -12,11 +13,11 @@ export interface BylineProps {
 /** A comment's metadata line: author name, relative time, and an edited marker. @public @react */
 export function Byline({ author, date, edited }: BylineProps) {
 	return (
-		<div className="cmt-head">
-			<span className="cmt-author">{author}</span>
-			<span className="cmt-time">
+		<div className="tlui-cmt-head">
+			<span className="tlui-cmt-author">{author.name}</span>
+			<span className="tlui-cmt-time">
 				{formatRelativeTime(date)}
-				{edited && <span className="cmt-edited"> · edited</span>}
+				{edited && <span className="tlui-cmt-edited"> · edited</span>}
 			</span>
 		</div>
 	)

package/src/ui/comment-author.ts

@@ -0,0 +1,15 @@
+import { JsonObject } from 'tldraw'
+
+/** A comment author's display identity, resolved from an author id.
+ * @public */
+export interface CommentAuthor {
+	name: string
+	/** The author's color (any CSS color) — colors their avatar and pins.
+	 *  Omit for the default tint. */
+	color?: string
+	/** Avatar image URL. When set, avatars show the image instead of the colored initial;
+	 *  the canvas pin keeps the initial-on-color. */
+	image?: string
+	/** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */
+	meta?: JsonObject
+}

package/src/ui/comment-card.tsx

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react'
 import { Avatar } from './avatar'
 import { Byline } from './byline'
+import { CommentAuthor } from './comment-author'
 
 /** @public */
 export interface CommentCardProps {
-	author: string
+	author: CommentAuthor
 	/** The rendered comment body. The card doesn't dictate a format — pass a `<CommentText>`
 	 *  for markdown, a rich-text render, or any node. */
 	body: ReactNode
@@ -20,13 +21,13 @@ export interface CommentCardProps {
 /** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */
 export function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {
 	return (
-		<div className={you ? 'cmt-card cmt-card--you' : 'cmt-card'}>
-			<Avatar name={author} />
-			<div className="cmt-body">
+		<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>
+			<Avatar author={author} />
+			<div className="tlui-cmt-body">
 				<Byline author={author} date={date} edited={edited} />
 				{body}
 			</div>
-			{actions !== undefined && <div className="cmt-card__actions">{actions}</div>}
+			{actions !== undefined && <div className="tlui-cmt-card__actions">{actions}</div>}
 		</div>
 	)
 }

package/src/ui/comment-composer.tsx

@@ -1,8 +1,9 @@
-import { Extension, JSONContent } from '@tiptap/core'
+import { JSONContent } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactNode, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { isEqual, TLRichText, useMaybeEditor } from 'tldraw'
 import { Avatar } from './avatar'
+import { CommentAuthor } from './comment-author'
 import { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'
 import { commentMention } from './comment-mention'
 import { MentionMember } from './mention-list'
@@ -11,7 +12,7 @@ import { SendButton } from './send-button'
 
 /** @public */
 export interface CommentComposerProps {
-	author: string
+	author: CommentAuthor
 	placeholder: string
 	/** Controlled rich-text value. Omit for the presentational (display-only) composer. */
 	value?: TLRichText
@@ -68,29 +69,69 @@ export function CommentComposer({
 	renderMentionSuggestionRef.current = renderMentionSuggestion
 
 	const [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))
+	// Whether the field has grown to two rows: input across the full width, send button below.
+	// Flips when the (single-line) content width reaches the space left beside the send button.
+	const [expanded, setExpanded] = useState(false)
+	const expandedRef = useRef(expanded)
+	expandedRef.current = expanded
+	const inputWrapRef = useRef<HTMLDivElement>(null)
+	const mirrorRef = useRef<HTMLDivElement>(null)
 
-	// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior — a
-	// new line — for the occasional multi-line comment.
-	const submitExtension = useMemo(
-		() =>
-			Extension.create({
-				name: 'commentComposerSubmit',
-				priority: 1000,
-				addKeyboardShortcuts() {
-					return {
-						Enter: () => {
-							// While the @-mention picker is open, Enter selects the highlighted member.
-							// This extension outranks the mention plugin (priority 1000), so defer to the
-							// picker here or Enter would submit before the member could be inserted.
-							if (isMentionPickerOpen()) return false
-							if (!disabledRef.current) onSubmitRef.current?.()
-							return true
-						},
-					}
-				},
-			}),
-		[]
-	)
+	// Measure whether the content still fits on one line beside the send button. The mirror is a
+	// hidden, nowrap clone of the editor's rendered content, so marks and mention chips measure at
+	// their true width. A small dead zone between the expand and collapse thresholds keeps the
+	// layout from flapping while typing at the boundary.
+	const remeasure = () => {
+		const wrap = inputWrapRef.current
+		const mirror = mirrorRef.current
+		const editor = editorRef.current
+		if (!wrap || !mirror || !editor) return
+		// Empty always fits — and measuring before TipTap's DOM has laid out reads zero widths,
+		// which would flash the expanded layout for a frame on mount.
+		if (editor.isEmpty) {
+			if (expandedRef.current) setExpanded(false)
+			return
+		}
+		if (wrap.clientWidth === 0) return
+		const doc = editor.state.doc
+		const multiBlock =
+			doc.childCount > 1 || (doc.firstChild !== null && doc.firstChild.type.name !== 'paragraph')
+		if (multiBlock) {
+			if (!expandedRef.current) setExpanded(true)
+			return
+		}
+		const field = wrap.parentElement
+		const send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null
+		const input = wrap.querySelector('.tlui-cmt-input')
+		if (!send || !input) return
+		mirror.innerHTML = input.innerHTML
+		const textWidth = mirror.offsetWidth
+		// The single-line space the input has beside the send button: when already expanded the
+		// wrap spans the full field, so subtract the button (plus the field's 6px gap) back out.
+		const collapsedAvailable = wrap.clientWidth - (expandedRef.current ? send.offsetWidth + 6 : 0)
+		if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+			setExpanded(true)
+		} else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+			setExpanded(false)
+		}
+	}
+	const remeasureRef = useRef(remeasure)
+	remeasureRef.current = remeasure
+
+	// The editor instance, reachable from `handleKeyDown` (which is created before `useEditor`
+	// returns). Updated on every render so the ref never points at a stale editor.
+	const editorRef = useRef<ReturnType<typeof useEditor>>(null)
+
+	// Set while we replay Enter through the keymaps for a Shift+Enter newline: `commands.enter()`
+	// re-dispatches Enter through `handleKeyDown`, and without this guard our own handler would catch
+	// that synthetic Enter and submit instead.
+	const replayingEnter = useRef(false)
+
+	// Enter and Cmd/Ctrl+Enter submit the comment; Shift+Enter inserts a new line for the occasional
+	// multi-line comment. This is handled through `editorProps.handleKeyDown` (below) rather than a
+	// keyboard-shortcut extension: ProseMirror runs `handleKeyDown` before every keymap plugin, so it
+	// can tell Shift+Enter apart from Enter — an `Enter` keymap binding also fires on Shift/Cmd+Enter
+	// and would otherwise swallow the newline.
 
 	// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs
 	// outside React, so it must read the mention callbacks through refs — like onChange/onSubmit —
@@ -100,7 +141,7 @@ export function CommentComposer({
 	const mentionsEnabled = !!getMentionSuggestions
 	const hasCustomRow = !!renderMentionSuggestion
 	const extensions = useMemo(() => {
-		const list = [...commentTipTapExtensions, submitExtension]
+		const list = [...commentTipTapExtensions]
 		// Always register the mention node so an existing body that contains a mention keeps it on
 		// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`
 		// picker itself only turns on when the host provides a resolver; otherwise the node is present
@@ -122,7 +163,7 @@ export function CommentComposer({
 			list.push(commentMention({ suggestion: { char: '@', allow: () => false } }))
 		}
 		return list
-	}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])
+	}, [mentionsEnabled, hasCustomRow, tlEditor])
 
 	const editor = useEditor(
 		{
@@ -134,14 +175,44 @@ export function CommentComposer({
 			// mirrors RichTextArea's setup.
 			enableCoreExtensions: { textDirection: false },
 			textDirection: 'auto',
-			editorProps: { attributes: { class: 'cmt-input' } },
+			editorProps: {
+				attributes: { class: 'tlui-cmt-input' },
+				// Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
+				// `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
+				handleKeyDown: (_view, event) => {
+					// Let the keymaps handle the synthetic Enter we replay for a Shift+Enter newline.
+					if (replayingEnter.current) return false
+					if (event.key !== 'Enter' || event.isComposing) return false
+					// While the @-mention picker is open, Enter selects the highlighted member — defer.
+					if (isMentionPickerOpen()) return false
+					// Shift+Enter inserts a new line. Replay a plain Enter through the keymaps (guarded so
+					// we don't re-enter and submit) to reuse the editor's list-aware Enter handling — a new
+					// list item in a list, a new paragraph otherwise. tldraw doesn't do soft breaks.
+					if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+						replayingEnter.current = true
+						try {
+							editorRef.current?.commands.enter()
+						} finally {
+							replayingEnter.current = false
+						}
+						return true
+					}
+					// Enter, Cmd+Enter, and Ctrl+Enter submit.
+					if (!disabledRef.current) onSubmitRef.current?.()
+					return true
+				},
+			},
 			onUpdate: ({ editor }) => {
 				setIsEmpty(editor.isEmpty)
+				// Same-value state sets don't re-render, so measure here — the editor's DOM is
+				// already updated when onUpdate fires.
+				remeasureRef.current()
 				onChangeRef.current?.(editor.getJSON() as TLRichText)
 			},
 		},
 		[interactive]
 	)
+	editorRef.current = editor
 
 	// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the
 	// editor without echoing back the value the editor itself just emitted.
@@ -152,6 +223,12 @@ export function CommentComposer({
 		setIsEmpty(editor.isEmpty)
 	}, [editor, value])
 
+	// Measure once the editor's content is in the DOM, so a composer that mounts pre-filled (the
+	// edit-in-place composer) starts in the right layout.
+	useLayoutEffect(() => {
+		remeasureRef.current()
+	}, [editor, value])
+
 	// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a
 	// canvas pointer event whose default focus handling would otherwise steal it back.
 	useEffect(() => {
@@ -161,16 +238,28 @@ export function CommentComposer({
 	}, [autoFocus, editor])
 
 	return (
-		<div className="cmt-composer">
-			{leading ?? <Avatar name={author} />}
-			<div className="cmt-composer__field">
-				<div className="cmt-composer__input-wrap">
+		<div className="tlui-cmt-composer">
+			{leading ?? <Avatar author={author} />}
+			<div
+				className={[
+					'tlui-cmt-composer__field',
+					interactive && expanded && 'tlui-cmt-composer__field--expanded',
+				]
+					.filter(Boolean)
+					.join(' ')}
+			>
+				<div className="tlui-cmt-composer__input-wrap" ref={inputWrapRef}>
 					<EditorContent editor={editor} />
 					{isEmpty && (
-						<div className="cmt-input__placeholder" aria-hidden="true">
+						<div className="tlui-cmt-input__placeholder" aria-hidden="true">
 							{placeholder}
 						</div>
 					)}
+					<div
+						className="tlui-cmt-composer__mirror tlui-cmt-input"
+						ref={mirrorRef}
+						aria-hidden="true"
+					/>
 				</div>
 				{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}
 			</div>

package/src/ui/comment-mention.ts

@@ -26,7 +26,7 @@ export interface CommentMentionOptions {
 }
 
 /**
- * The comment @-mention node — TipTap's `Mention` configured to render as a `.cmt-mention` pill.
+ * The comment @-mention node — TipTap's `Mention` configured to render as a `.tlui-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
@@ -35,7 +35,7 @@ export interface CommentMentionOptions {
  */
 export function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {
 	return Mention.configure({
-		HTMLAttributes: { class: 'cmt-mention' },
+		HTMLAttributes: { class: 'tlui-cmt-mention' },
 		renderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
 		renderHTML: ({ node, options }) => [
 			'span',