@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.c5c7f1d817d0

package/src/clustering/runtime.test.ts

@@ -460,6 +460,7 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 			])
 		)
 		expect(rt.k).toBe(1)
+		expect(rt.getSuppressedCount()).toBe(0)
 		expect(visibleIds(rt)).toEqual(['cluster:3:a', 'd'])
 	})
 
@@ -477,7 +478,8 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 				[D.id, D],
 			])
 		)
-		expect(rt.k).toBe(0)
+		expect(rt.k).toBe(1)
+		expect(rt.getSuppressedCount()).toBe(1)
 		expect(visibleIds(rt)).toEqual(['a', 'b', 'c', 'd'])
 	})
 
@@ -512,7 +514,9 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 		const table = microTraceTable()
 		const rt = createClusterRuntime(table)
 		rt.seedFrom(5, new Map())
-		expect(rt.k).toBe(0)
+		expect(rt.k).toBe(1)
+		expect(rt.getSuppressedCount()).toBe(1)
+		expect(visibleIds(rt)).toEqual(['a', 'b', 'c', 'd'])
 		const partial = node(['a', 'b'], 5, 0)
 		rt.seedFrom(
 			5,
@@ -522,7 +526,9 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 				[D.id, D],
 			])
 		)
-		expect(rt.k).toBe(0)
+		expect(rt.k).toBe(1)
+		expect(rt.getSuppressedCount()).toBe(1)
+		expect(visibleIds(rt)).toEqual(['a', 'b', 'c', 'd'])
 	})
 
 	it('membership in a superset cluster counts as merged', () => {
@@ -534,10 +540,58 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 		expect(visibleIds(rt)).toEqual(['cluster:4:a'])
 	})
 
-	it('classification stops at the first inactive event (prefix cut is conservative)', () => {
-		// Two independent band events at zoom 4.5. The first is split in history, the
-		// second merged — but active events must be a prefix, so the second resolves
-		// to split (conservative: never merges anything history did not sanction).
+	it('carries over mixed band states exactly (split before merged in table order)', () => {
+		// Two independent band events at zoom 4.5: the earlier-sorted one split in history,
+		// the later one merged. The old prefix cut forced the second to split (the mass-split
+		// bug); with suppression the carryover is exact — each keeps its own state.
+		const AB = node(['a', 'b'], 5, 0)
+		const CD = node(['c', 'd'], 105, 0)
+		const table: ClusterTable = {
+			events: [mev(4, 6, [A, B], AB), mev(3, 5, [C, D], CD)],
+			leaves: [A, B, C, D],
+		}
+		const rt = createClusterRuntime(table)
+		rt.seedFrom(
+			4.5,
+			new Map([
+				[A.id, A],
+				[B.id, B],
+				[CD.id, CD],
+			])
+		)
+		expect(rt.k).toBe(2)
+		expect(rt.getSuppressedCount()).toBe(1)
+		expect(visibleIds(rt)).toEqual(['a', 'b', 'cluster:2:c'])
+	})
+
+	it('a suppressed event merges (heals) when a zoom-out crosses its own zMerge', () => {
+		const AB = node(['a', 'b'], 5, 0)
+		const CD = node(['c', 'd'], 105, 0)
+		const table: ClusterTable = {
+			events: [mev(4, 6, [A, B], AB), mev(3, 5, [C, D], CD)],
+			leaves: [A, B, C, D],
+		}
+		const rt = createClusterRuntime(table)
+		rt.seedFrom(
+			4.5,
+			new Map([
+				[A.id, A],
+				[B.id, B],
+				[CD.id, CD],
+			])
+		)
+		const versionBefore = rt.version
+		rt.onCamera(4.4) // still inside AB's band: nothing happens
+		expect(rt.version).toBe(versionBefore)
+		rt.onCamera(3.9) // below AB's zMerge (4): the held-out merge fires at its own threshold
+		expect(rt.version).toBeGreaterThan(versionBefore)
+		expect(rt.k).toBe(2)
+		expect(rt.getSuppressedCount()).toBe(0)
+		expect(visibleIds(rt)).toEqual(['cluster:2:a', 'cluster:2:c'])
+		expectPostconditions(rt, table, 3.9)
+	})
+
+	it('the split walk retreats past a suppressed event without corrupting the partition', () => {
 		const AB = node(['a', 'b'], 5, 0)
 		const CD = node(['c', 'd'], 105, 0)
 		const table: ClusterTable = {
@@ -553,8 +607,18 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 				[CD.id, CD],
 			])
 		)
+		rt.onCamera(5.5) // past CD's zSplit (5): CD splits; suppressed AB stays put
+		expect(rt.k).toBe(1)
+		expect(rt.getSuppressedCount()).toBe(1)
+		expect(visibleIds(rt)).toEqual(['a', 'b', 'c', 'd'])
+		rt.onCamera(6.5) // past AB's zSplit (6): retreat past the suppressed (never-applied) event
 		expect(rt.k).toBe(0)
+		expect(rt.getSuppressedCount()).toBe(0)
 		expect(visibleIds(rt)).toEqual(['a', 'b', 'c', 'd'])
+		rt.onCamera(3.9) // zoom back out: normal cursor walk from a clean state
+		expect(rt.k).toBe(1)
+		expect(visibleIds(rt)).toEqual(['c', 'cluster:2:a', 'd'])
+		expectPostconditions(rt, table, 3.9)
 	})
 
 	it('seedFrom followed by onCamera at the same zoom is a no-op', () => {
@@ -594,3 +658,115 @@ describe('createClusterRuntime seedFrom (carryover seeding)', () => {
 		expect(() => rt.seedFrom(NaN, new Map())).toThrow()
 	})
 })
+
+describe('createClusterRuntime detachLeaf (local partition edits)', () => {
+	it('shrinks the containing badge in place: members, count, centroid', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4) // P = a+b+c visible, d separate
+		const versionBefore = rt.version
+		rt.detachLeaf('a')
+		expect(rt.version).toBeGreaterThan(versionBefore)
+		expect(rt.getDetachedCount()).toBe(1)
+		const patchedP = rt.getVisible().get(P.id)!
+		expect(patchedP.members).toEqual(['b', 'c'])
+		expect(patchedP.count).toBe(2)
+		// centroid recomputed from the remaining leaves: B (10,0), C (20,0)
+		expect(patchedP.centroid).toEqual({ x: 15, y: 0 })
+		// keeps the structural id so cursor events keep addressing it
+		expect(patchedP.id).toBe(P.id)
+		// everything else untouched
+		expect(rt.getVisible().get('d')).toEqual(D)
+		expect(rt.getVisible().size).toBe(2)
+	})
+
+	it('is idempotent and ignores unknown ids', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		const version = rt.version
+		rt.detachLeaf('a')
+		rt.detachLeaf('nonexistent')
+		expect(rt.version).toBe(version)
+		expect(rt.getDetachedCount()).toBe(1)
+	})
+
+	it('collapses a badge to its surviving leaf, and to nothing', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		rt.detachLeaf('b')
+		// P = {a,b,c} minus a,b → the leaf node c, keyed by its own id
+		expect(rt.getVisible().get('c')).toEqual(C)
+		expect(rt.getVisible().has(P.id)).toBe(false)
+		rt.detachLeaf('c')
+		expect(visibleIds(rt)).toEqual(['d'])
+	})
+
+	it('removes a leaf that is visible as its own pin', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(8) // everything split
+		rt.detachLeaf('a')
+		expect(visibleIds(rt)).toEqual(['b', 'c', 'd'])
+	})
+
+	it('zoom walks stay correct while patches are active (split)', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		rt.onCamera(6.5) // past P's zSplit (6): structural split of a+b+c
+		expect(rt.k).toBe(0)
+		// resolved view: a stays gone, b/c/d as pins — the split itself changed nothing for a
+		expect(visibleIds(rt)).toEqual(['b', 'c', 'd'])
+	})
+
+	it('zoom walks stay correct while patches are active (merge)', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		rt.onCamera(0.9) // below E1's zMerge (1): P+D merge into Q
+		expect(rt.k).toBe(2)
+		const patchedQ = rt.getVisible().get(Q.id)!
+		expect(patchedQ.members).toEqual(['b', 'c', 'd'])
+		expect(patchedQ.count).toBe(3)
+		// mean of B (10,0), C (20,0), D (100,0)
+		expect(patchedQ.centroid.x).toBeCloseTo(130 / 3)
+		expect(rt.getVisible().size).toBe(1)
+	})
+
+	it('seed and seedFrom clear detaches', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		rt.seed(4)
+		expect(rt.getDetachedCount()).toBe(0)
+		expect(rt.getVisible().get(P.id)).toEqual(P)
+		rt.detachLeaf('a')
+		rt.seedFrom(
+			4,
+			new Map([
+				[P.id, P],
+				[D.id, D],
+			])
+		)
+		expect(rt.getDetachedCount()).toBe(0)
+		expect(rt.getVisible().get(P.id)).toEqual(P)
+	})
+
+	it('getVisible returns a stable reference until the partition changes', () => {
+		const table = microTraceTable()
+		const rt = createClusterRuntime(table)
+		rt.seed(4)
+		rt.detachLeaf('a')
+		const first = rt.getVisible()
+		expect(rt.getVisible()).toBe(first)
+		rt.detachLeaf('b')
+		expect(rt.getVisible()).not.toBe(first)
+	})
+})

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/ui/avatar.tsx

@@ -17,11 +17,18 @@ function initial(name: string) {
  * @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 (
+			<img
+				className="tlui-cmt-avatar tlui-cmt-avatar--image"
+				src={image}
+				alt=""
+				aria-hidden="true"
+			/>
+		)
 	}
 	return (
 		<div
-			className="cmt-avatar"
+			className="tlui-cmt-avatar"
 			aria-hidden="true"
 			style={color ? { backgroundColor: color } : undefined}
 		>

package/src/ui/byline.tsx

@@ -12,11 +12,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}</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-card.tsx

@@ -20,13 +20,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'}>
+		<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>
 			<Avatar name={author} />
-			<div className="cmt-body">
+			<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,4 +1,4 @@
-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 { isEqual, TLRichText, useMaybeEditor } from 'tldraw'
@@ -69,28 +69,20 @@ export function CommentComposer({
 
 	const [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))
 
-	// 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
-						},
-					}
-				},
-			}),
-		[]
-	)
+	// 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 +92,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 +114,7 @@ export function CommentComposer({
 			list.push(commentMention({ suggestion: { char: '@', allow: () => false } }))
 		}
 		return list
-	}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])
+	}, [mentionsEnabled, hasCustomRow, tlEditor])
 
 	const editor = useEditor(
 		{
@@ -134,7 +126,33 @@ 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)
 				onChangeRef.current?.(editor.getJSON() as TLRichText)
@@ -142,6 +160,7 @@ export function CommentComposer({
 		},
 		[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.
@@ -161,13 +180,13 @@ export function CommentComposer({
 	}, [autoFocus, editor])
 
 	return (
-		<div className="cmt-composer">
+		<div className="tlui-cmt-composer">
 			{leading ?? <Avatar name={author} />}
-			<div className="cmt-composer__field">
-				<div className="cmt-composer__input-wrap">
+			<div className="tlui-cmt-composer__field">
+				<div className="tlui-cmt-composer__input-wrap">
 					<EditorContent editor={editor} />
 					{isEmpty && (
-						<div className="cmt-input__placeholder" aria-hidden="true">
+						<div className="tlui-cmt-input__placeholder" aria-hidden="true">
 							{placeholder}
 						</div>
 					)}