@tldraw/commenting 0.0.0-bootstrap

package/src/canvas/canvas.css

@@ -0,0 +1,148 @@
+/* The comments layer is portaled into the editor container. Pins live in the canvas-in-front layer
+   (beneath the UI panels at z-index 300), so the toolbar and style panel draw over them; the open
+   thread's popover portals up to the menus layer separately (`.cmt-canvas-popover`) so it isn't
+   clipped. Click-through except on its own children. */
+.cmt-canvas-layer {
+	position: absolute;
+	inset: 0;
+	z-index: var(--tl-layer-canvas-in-front);
+	pointer-events: none;
+}
+
+.cmt-canvas-pin,
+.cmt-canvas-cluster,
+.cmt-canvas-composer {
+	position: absolute;
+}
+
+.cmt-canvas-pin,
+.cmt-canvas-composer {
+	pointer-events: auto;
+}
+
+/* Badges are clickable (zoom to the cluster's first split). */
+.cmt-canvas-cluster {
+	transform: translate(-50%, -50%);
+	pointer-events: auto;
+	cursor: pointer;
+}
+
+.cmt-cluster-fade {
+	opacity: 1;
+	transition: opacity 150ms ease;
+}
+
+.cmt-cluster-fade--entering {
+	opacity: 0;
+}
+
+.cmt-cluster-fade--present {
+	opacity: 1;
+}
+
+.cmt-cluster-fade--exiting {
+	opacity: 0;
+}
+
+.cmt-cluster-fade--entering *,
+.cmt-cluster-fade--exiting * {
+	pointer-events: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.cmt-cluster-fade {
+		transition: none;
+	}
+}
+
+/* The open thread (its pin + popover) sits above the other pins, so nearby markers don't
+   overlap its popover — they tuck behind it. */
+.cmt-canvas-pin--open {
+	z-index: 1;
+}
+
+/* A region anchor's area: a dashed box under the pins, non-interactive so canvas events pass
+   through. Drawn for the live drag draft and for a region thread while hovered or open. */
+.cmt-canvas-region {
+	position: absolute;
+	pointer-events: none;
+	border: 2px dashed var(--tl-color-selected);
+	border-radius: 6px;
+	background: color-mix(in srgb, var(--tl-color-selected) 10%, transparent);
+}
+
+/* A movable region body (the 'body'/'both' move modes): draggable to translate the whole region.
+   Interactive, so it captures the interior while shown — the tradeoff of dragging the body. */
+.cmt-canvas-region--movable {
+	pointer-events: auto;
+	cursor: move;
+}
+
+/* Corner resize handles on a region box (three corners; the pin corner is the move handle). */
+.cmt-canvas-region-handle {
+	position: absolute;
+	width: 9px;
+	height: 9px;
+	transform: translate(-50%, -50%);
+	background: var(--tl-color-panel);
+	border: 1.5px solid var(--tl-color-selected);
+	border-radius: 2px;
+	pointer-events: auto;
+	touch-action: none;
+}
+
+/* Centre the pin marker on its anchor point. */
+.cmt-canvas-pin__marker {
+	width: max-content;
+	transform: translate(-50%, -50%);
+	cursor: grab;
+	touch-action: none;
+}
+.cmt-canvas-pin__marker:active {
+	cursor: grabbing;
+}
+
+/* The open thread's popover — portaled to the menus layer (above the UI), positioned at the pin. */
+.cmt-canvas-popover {
+	position: absolute;
+	z-index: var(--tl-layer-menus);
+	pointer-events: auto;
+}
+
+/* The placement composer — a distinct floating view (portaled to the menus layer, below the click
+   point): a pencil "draft" avatar beside a pill field that is itself the surface (no wrapping
+   panel). Scoped here so the in-thread reply composer keeps its own squarer look. */
+.cmt-canvas-composer {
+	position: absolute;
+	z-index: var(--tl-layer-menus);
+	pointer-events: auto;
+	transform: translateY(8px);
+	/* The rich-text editor has no intrinsic width (unlike the old <input>), so give the floating
+	   placement composer a definite width or it collapses to nothing. */
+	width: 280px;
+}
+.cmt-canvas-composer .cmt-composer__field {
+	background: var(--tl-color-panel);
+	border-color: transparent;
+	border-radius: var(--tl-radius-4);
+	box-shadow: var(--tl-shadow-2);
+}
+
+/* The comments list panel — a right-side surface shown while the comment tool is active. Below
+   the popover layer, so an open thread still draws over it. Sits under the top-right share panel
+   (top offset clears its ~48px height) and sizes to its content, scrolling past max-height rather
+   than stretching the full canvas height. */
+.cmt-canvas-sidebar {
+	position: absolute;
+	top: 56px;
+	right: 8px;
+	width: 280px;
+	max-height: calc(100% - 64px);
+	z-index: var(--tl-layer-panels);
+	pointer-events: auto;
+	display: flex;
+	background: var(--tl-color-panel);
+	border-radius: var(--tl-radius-4);
+	box-shadow: var(--tl-shadow-2);
+	overflow: hidden;
+}

package/src/canvas/cluster-input.test.ts

@@ -0,0 +1,223 @@
+import type { Editor, TLCommentAnchor, TLCommentThread } from 'tldraw'
+import { describe, expect, it } from 'vitest'
+// This import is red until step 6's filter module is implemented — that is
+// intentional. Implement `cluster-input.ts` per CLUSTERING-STEPS.md step 6
+// until this suite passes, without modifying this file.
+import { collectClusterLeaves } from './cluster-input'
+
+const CURRENT_PAGE = 'page:one'
+const OTHER_PAGE = 'page:two'
+
+/** Minimal thread record for filter tests. */
+function thread(
+	id: string,
+	anchor: TLCommentAnchor,
+	opts: { pageId?: string; resolved?: boolean } = {}
+): TLCommentThread {
+	return {
+		id,
+		typeName: 'comment-thread',
+		pageId: opts.pageId ?? CURRENT_PAGE,
+		anchor,
+		createdBy: 'user:1',
+		createdAt: 0,
+		resolved: opts.resolved ? { at: 1, by: 'user:1' } : null,
+		meta: {},
+	} as unknown as TLCommentThread
+}
+
+/**
+ * Stub editor: the filter's only editor dependencies are the current page id
+ * and shape page bounds (via anchorPagePoint). `shapes` maps shape id → bounds
+ * for shapes that exist; anything else resolves to undefined (deleted shape).
+ */
+function stubEditor(
+	shapes: Record<string, { minX: number; minY: number; maxX: number; maxY: number }> = {}
+): Editor {
+	return {
+		getCurrentPageId: () => CURRENT_PAGE,
+		getShapePageBounds: (id: string) => {
+			const bounds = shapes[id]
+			if (!bounds) return undefined
+			return { ...bounds, w: bounds.maxX - bounds.minX, h: bounds.maxY - bounds.minY }
+		},
+	} as unknown as Editor
+}
+
+function leafIds(leaves: { id: string }[]): string[] {
+	return leaves.map((l) => l.id).sort()
+}
+
+describe('collectClusterLeaves anchor resolution', () => {
+	it('maps point anchors to their page coordinates', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor(),
+			[thread('t1', { type: 'point', x: 12, y: 34 })],
+			null
+		)
+		expect(leaves).toEqual([{ id: 't1', point: { x: 12, y: 34 } }])
+	})
+
+	it('maps region anchors to their bottom-right corner (x + w, y + h)', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor(),
+			[thread('t1', { type: 'region', x: 10, y: 20, w: 30, h: 40 })],
+			null
+		)
+		expect(leaves).toEqual([{ id: 't1', point: { x: 40, y: 60 } }])
+	})
+
+	it('maps shape and text-range anchors to the shape bounds top-right corner', () => {
+		const editor = stubEditor({
+			'shape:a': { minX: 0, minY: 5, maxX: 100, maxY: 50 },
+		})
+		const leaves = collectClusterLeaves(
+			editor,
+			[
+				thread('t1', { type: 'shape', shapeId: 'shape:a' as any, x: 0, y: 0, isPrecise: false }),
+				thread('t2', { type: 'text-range', shapeId: 'shape:a' as any, from: 0, to: 3 }),
+			],
+			null
+		)
+		expect(leaves).toEqual([
+			{ id: 't1', point: { x: 100, y: 5 } },
+			{ id: 't2', point: { x: 100, y: 5 } },
+		])
+	})
+
+	it('places imprecise shape leaves at a custom impreciseShapeAnchor, matching pin rendering', () => {
+		const editor = stubEditor({
+			'shape:a': { minX: 0, minY: 0, maxX: 100, maxY: 50 },
+		})
+		const threads = [
+			thread('imprecise', {
+				type: 'shape',
+				shapeId: 'shape:a' as any,
+				x: 0,
+				y: 0,
+				isPrecise: false,
+			}),
+			thread('precise', {
+				type: 'shape',
+				shapeId: 'shape:a' as any,
+				x: 0.5,
+				y: 0.5,
+				isPrecise: true,
+			}),
+		]
+		// bottom-center instead of the default top-right
+		const leaves = collectClusterLeaves(editor, threads, null, { x: 0.5, y: 1 })
+		expect(leaves).toEqual([
+			{ id: 'imprecise', point: { x: 50, y: 50 } },
+			{ id: 'precise', point: { x: 50, y: 25 } },
+		])
+	})
+
+	it('excludes shape anchors whose shape no longer resolves', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor({}), // no shapes exist
+			[
+				thread('gone', {
+					type: 'shape',
+					shapeId: 'shape:deleted' as any,
+					x: 0,
+					y: 0,
+					isPrecise: false,
+				}),
+				thread('kept', { type: 'point', x: 1, y: 2 }),
+			],
+			null
+		)
+		expect(leafIds(leaves)).toEqual(['kept'])
+	})
+
+	it('excludes page anchors (no spatial position)', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor(),
+			[thread('pageThread', { type: 'page' }), thread('kept', { type: 'point', x: 1, y: 2 })],
+			null
+		)
+		expect(leafIds(leaves)).toEqual(['kept'])
+	})
+})
+
+describe('collectClusterLeaves filtering', () => {
+	it('excludes threads on other pages', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor(),
+			[
+				thread('here', { type: 'point', x: 0, y: 0 }),
+				thread('elsewhere', { type: 'point', x: 0, y: 0 }, { pageId: OTHER_PAGE }),
+			],
+			null
+		)
+		expect(leafIds(leaves)).toEqual(['here'])
+	})
+
+	it('excludes the open thread, and only the open thread', () => {
+		const threads = [
+			thread('open', { type: 'point', x: 0, y: 0 }),
+			thread('closed', { type: 'point', x: 10, y: 0 }),
+		]
+		expect(leafIds(collectClusterLeaves(stubEditor(), threads, 'open'))).toEqual(['closed'])
+		expect(leafIds(collectClusterLeaves(stubEditor(), threads, null))).toEqual(['closed', 'open'])
+		// an id that matches no thread excludes nothing
+		expect(leafIds(collectClusterLeaves(stubEditor(), threads, 'unknown'))).toEqual([
+			'closed',
+			'open',
+		])
+	})
+
+	it('includes resolved threads (v1 decision — resolve is appearance-only)', () => {
+		const leaves = collectClusterLeaves(
+			stubEditor(),
+			[
+				thread('resolved', { type: 'point', x: 0, y: 0 }, { resolved: true }),
+				thread('unresolved', { type: 'point', x: 10, y: 0 }),
+			],
+			null
+		)
+		expect(leafIds(leaves)).toEqual(['resolved', 'unresolved'])
+	})
+
+	it('returns [] for no threads', () => {
+		expect(collectClusterLeaves(stubEditor(), [], null)).toEqual([])
+	})
+
+	it('applies every rule at once on a mixed set', () => {
+		const editor = stubEditor({
+			'shape:live': { minX: 0, minY: 0, maxX: 10, maxY: 10 },
+		})
+		const threads = [
+			thread('point', { type: 'point', x: 1, y: 2 }),
+			thread('region', { type: 'region', x: 0, y: 0, w: 5, h: 5 }),
+			thread('onShape', {
+				type: 'shape',
+				shapeId: 'shape:live' as any,
+				x: 0,
+				y: 0,
+				isPrecise: false,
+			}),
+			thread('orphaned', {
+				type: 'shape',
+				shapeId: 'shape:gone' as any,
+				x: 0,
+				y: 0,
+				isPrecise: false,
+			}),
+			thread('pageLevel', { type: 'page' }),
+			thread('otherPage', { type: 'point', x: 9, y: 9 }, { pageId: OTHER_PAGE }),
+			thread('openOne', { type: 'point', x: 3, y: 3 }),
+			thread('resolvedOne', { type: 'point', x: 4, y: 4 }, { resolved: true }),
+		]
+		const leaves = collectClusterLeaves(editor, threads, 'openOne')
+		expect(leafIds(leaves)).toEqual(['onShape', 'point', 'region', 'resolvedOne'])
+	})
+
+	it('does not mutate the threads array', () => {
+		const threads = [thread('a', { type: 'point', x: 0, y: 0 }), thread('b', { type: 'page' })]
+		const snapshot = JSON.parse(JSON.stringify(threads))
+		collectClusterLeaves(stubEditor(), threads, 'a')
+		expect(JSON.parse(JSON.stringify(threads))).toEqual(snapshot)
+	})
+})

package/src/canvas/cluster-input.ts

@@ -0,0 +1,29 @@
+import type { Editor, TLCommentThread } from 'tldraw'
+import type { LeafInput } from '../clustering/types'
+import { anchorPagePoint } from './thread-state'
+
+/** @public */
+export function collectClusterLeaves(
+	editor: Editor,
+	threads: readonly TLCommentThread[],
+	openThreadId: string | null,
+	impreciseShapeAnchor?: { x: number; y: number }
+): LeafInput[] {
+	const pageId = editor.getCurrentPageId()
+	const leaves: LeafInput[] = []
+
+	for (const thread of threads) {
+		if (thread.id === openThreadId) continue
+		if (thread.pageId !== pageId) continue
+
+		const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)
+		if (!point) continue
+
+		leaves.push({
+			id: thread.id,
+			point: { x: point.x, y: point.y },
+		})
+	}
+
+	return leaves
+}

package/src/canvas/comment-body.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { TLRichText } from 'tldraw'
+import { renderCommentHtml } from './comment-render'
+
+/** @public */
+export interface CommentBodyProps {
+	richText: TLRichText
+	/** Maps a member id to its current display name, so \@mentions show the live name. */
+	resolveName?(id: string): string | undefined
+}
+
+/**
+ * Renders a comment's rich-text body read-only through the limited comment extension set (no
+ * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and
+ * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.
+ * @public @react
+ */
+export function CommentBody({ richText, resolveName }: CommentBodyProps) {
+	const html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])
+	return <div className="cmt-text" dangerouslySetInnerHTML={{ __html: html }} />
+}

package/src/canvas/comment-render.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { EMPTY_COMMENT, isCommentEmpty } from '../ui/comment-extensions'
+import { renderCommentHtml, renderCommentPlaintext } from './comment-render'
+
+const doc = (...content: any[]) => ({ type: 'doc', content }) as any
+const para = (...content: any[]) => ({ type: 'paragraph', content })
+const text = (value: string, marks?: any[]) => ({
+	type: 'text',
+	text: value,
+	...(marks ? { marks } : {}),
+})
+const mention = (id: string, label?: string) => ({ type: 'mention', attrs: { id, label } })
+
+describe('renderCommentHtml', () => {
+	it('preserves bold, links, and lists from the limited set', () => {
+		const html = renderCommentHtml(doc(para(text('hi', [{ type: 'bold' }]))))
+		expect(html).toContain('<strong>hi</strong>')
+
+		const list = renderCommentHtml(
+			doc({
+				type: 'bulletList',
+				content: [{ type: 'listItem', content: [para(text('one'))] }],
+			})
+		)
+		expect(list).toContain('<ul')
+		expect(list).toContain('one')
+	})
+
+	it('renders a heading node as a paragraph, never a heading', () => {
+		const html = renderCommentHtml(
+			doc({ type: 'heading', attrs: { level: 1 }, content: [text('Title')] })
+		)
+		expect(html).not.toMatch(/<h[1-6]/)
+		expect(html).toContain('<p')
+		expect(html).toContain('Title')
+	})
+
+	it('renders a mention as a pill and resolves its id to the current name', () => {
+		const body = doc(para(text('hey '), mention('u1', 'Ada')))
+		const html = renderCommentHtml(body, (id) => (id === 'u1' ? 'Ada Lovelace' : '?'))
+		expect(html).toContain('cmt-mention')
+		// the live name from the resolver, not the label stored at insert time
+		expect(html).toContain('@Ada Lovelace')
+		expect(html).not.toContain('@Ada<')
+	})
+
+	it('falls back to the stored label when no resolver is given', () => {
+		const html = renderCommentHtml(doc(para(mention('u1', 'Ada'))))
+		expect(html).toContain('@Ada')
+	})
+
+	it('escapes a resolved name, so it can never inject markup', () => {
+		const html = renderCommentHtml(doc(para(mention('u1'))), () => '<img src=x onerror=alert(1)>')
+		expect(html).not.toContain('<img')
+		expect(html).toContain('&lt;img')
+	})
+})
+
+describe('renderCommentPlaintext', () => {
+	it('flattens paragraphs and demotes headings without throwing', () => {
+		const flat = renderCommentPlaintext(
+			doc({ type: 'heading', attrs: { level: 2 }, content: [text('Title')] }, para(text('body')))
+		)
+		expect(flat).toBe('Title\nbody')
+	})
+
+	it('returns an empty string for an empty body', () => {
+		expect(renderCommentPlaintext(EMPTY_COMMENT)).toBe('')
+	})
+
+	it('renders a mention as @name, resolved to the current name', () => {
+		const result = renderCommentPlaintext(
+			doc(para(text('hi '), mention('u1', 'Ada'))),
+			() => 'Ada Lovelace'
+		)
+		expect(result).toBe('hi @Ada Lovelace')
+	})
+})
+
+describe('isCommentEmpty', () => {
+	it('treats the empty seed and empty encodings as empty', () => {
+		expect(isCommentEmpty(EMPTY_COMMENT)).toBe(true)
+		expect(isCommentEmpty(doc())).toBe(true)
+		expect(isCommentEmpty(doc(para()))).toBe(true)
+	})
+
+	it('treats a body with text as non-empty', () => {
+		expect(isCommentEmpty(doc(para(text('hi'))))).toBe(false)
+	})
+})

package/src/canvas/comment-render.ts

@@ -0,0 +1,92 @@
+import { generateHTML, generateText, JSONContent } from '@tiptap/core'
+import { TLRichText } from 'tldraw'
+import { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'
+import { commentMention } from '../ui/comment-mention'
+
+/**
+ * The author name shown in a byline when no source can name an id (e.g. a deleted account, or a
+ * member with no comment and no live presence). The toolkit's one generic default, applied where a
+ * byline needs a name; hosts pre-empt it by returning a name from `resolveName`. Not a translation
+ * key — a single English literal, matching the prior host-side default.
+ */
+export const UNKNOWN_AUTHOR = 'Someone'
+
+/**
+ * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a
+ * record created programmatically or synced from a client with a fuller set) would make TipTap
+ * throw on an unknown node type. Demote any heading to a paragraph first, so headings can never
+ * render as headings and rendering never crashes.
+ */
+function demoteHeadings(node: JSONContent): JSONContent {
+	const content = Array.isArray(node.content) ? node.content.map(demoteHeadings) : node.content
+	if (node.type === 'heading') {
+		const { attrs: _attrs, ...rest } = node
+		return { ...rest, type: 'paragraph', content }
+	}
+	return content === node.content ? node : { ...node, content }
+}
+
+/**
+ * Whether a body contains a mention node. Mention text is resolved from a member id at render time,
+ * so a body with one can't be cached by identity alone (the same body renders differently as names
+ * change) — those bodies skip the cache and re-render each call.
+ */
+function hasMention(node: JSONContent): boolean {
+	if (node.type === 'mention') return true
+	return Array.isArray(node.content) ? node.content.some(hasMention) : false
+}
+
+const htmlCache = new WeakMap<TLRichText, string>()
+
+/**
+ * Render a comment body to HTML through the limited comment extension set (no headings), so a body
+ * always renders with comment formatting regardless of the host editor's rich-text config. Mirrors
+ * tldraw's `renderHtmlFromRichText`, including the empty-paragraph fix that keeps blank lines from
+ * collapsing. `resolveName` maps a member id to its current name for any @mentions.
+ */
+export function renderCommentHtml(
+	richText: TLRichText,
+	resolveName?: (id: string) => string | undefined
+): string {
+	const mentions = hasMention(richText as JSONContent)
+	if (!mentions) {
+		const cached = htmlCache.get(richText)
+		if (cached !== undefined) return cached
+	}
+	const extensions = mentions
+		? [...commentTipTapExtensions, commentMention({ resolveName })]
+		: commentTipTapExtensions
+	const html = generateHTML(demoteHeadings(richText as JSONContent), extensions).replaceAll(
+		'<p dir="auto"></p>',
+		'<p><br /></p>'
+	)
+	if (!mentions) htmlCache.set(richText, html)
+	return html
+}
+
+const textCache = new WeakMap<TLRichText, string>()
+
+/**
+ * Flatten a comment body to plaintext through the limited comment extension set — paragraphs and
+ * list items separated by newlines. Used for previews (e.g. the sidebar) where formatting is dropped.
+ * `resolveName` maps a member id to its current name for any @mentions.
+ */
+export function renderCommentPlaintext(
+	richText: TLRichText,
+	resolveName?: (id: string) => string | undefined
+): string {
+	if (isCommentEmpty(richText)) return ''
+	const mentions = hasMention(richText as JSONContent)
+	if (!mentions) {
+		const cached = textCache.get(richText)
+		if (cached !== undefined) return cached
+	}
+	const extensions = mentions
+		? [...commentTipTapExtensions, commentMention({ resolveName })]
+		: commentTipTapExtensions
+	const text = generateText(demoteHeadings(richText as JSONContent), extensions, {
+		blockSeparator: '\n',
+	})
+	if (!mentions) textCache.set(richText, text)
+	return text
+}

package/src/canvas/comment-store.ts

@@ -0,0 +1,55 @@
+import {
+	Editor,
+	TLComment,
+	TLCommentId,
+	TLCommentThread,
+	TLCommentThreadId,
+	TLRecord,
+} from 'tldraw'
+
+/**
+ * Typed access to comment records on the editor store.
+ *
+ * Comment threads and comments live on the editor's local store so the canvas can render them
+ * reactively, but they are opt-in records that aren't part of the `TLRecord` union (they ride the
+ * sync server's object-store lane on the wire — see `TLCommentThread`). `editor.store` is therefore
+ * statically typed `Store<TLRecord>` and doesn't know about them, so every access has to reinterpret
+ * the type. These helpers own that reinterpretation — an `unknown` hop to exactly the type the store
+ * expects, so the rest of each call stays checked — behind one boundary, and keep call sites typed.
+ */
+
+/** A record that lives in a comment thread: the thread itself or one of its messages. @public */
+export type TLCommentRecord = TLComment | TLCommentThread
+
+/** Write comment records to the store. @public */
+export function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {
+	editor.store.put(records as unknown as TLRecord[])
+}
+
+/** Remove comment records from the store by id. @public */
+export function removeCommentRecords(
+	editor: Editor,
+	ids: (TLCommentId | TLCommentThreadId)[]
+): void {
+	editor.store.remove(ids as unknown as TLRecord['id'][])
+}
+
+/** Read one comment record by id, or `undefined` if the id isn't a present comment record. @public */
+export function getCommentRecord(editor: Editor, id: string): TLCommentRecord | undefined {
+	const record = editor.store.get(id as TLRecord['id']) as unknown as TLCommentRecord | undefined
+	if (!record) return undefined
+	if (record.typeName === 'comment' || record.typeName === 'comment-thread') return record
+	return undefined
+}
+
+/** All comment threads currently in the store (non-reactive; wrap in `useValue` to react). @public */
+export function getCommentThreads(editor: Editor): TLCommentThread[] {
+	const typeName = 'comment-thread' as TLRecord['typeName']
+	return editor.store.query.records(typeName).get() as unknown as TLCommentThread[]
+}
+
+/** All comments currently in the store (non-reactive; wrap in `useValue` to react). @public */
+export function getComments(editor: Editor): TLComment[] {
+	const typeName = 'comment' as TLRecord['typeName']
+	return editor.store.query.records(typeName).get() as unknown as TLComment[]
+}