perf(text): improve rich text performance by steveruizok · Pull Request #5658 · tldraw/tldraw

steveruizok · 2025-03-15T13:53:23Z

This PR improves the performance of the app with regard to text.

Kapture.2025-03-15.at.14.22.33.mp4

The renderPlaintextFromRichText method is slow. It depends on TipTap's getText method. This parses the rich text and flattens it to plain text. As usual, we can improve performance by:

making renderPlaintextFromRichText faster
not calling renderPlaintextFromRichText

Making it faster

We can make it faster by using a weak cache so that we don't need to re-flatten text if we've flattened it before. We can also make it faster by skipping the flatten if the text content is empty. This can be done very quickly without using getText.

Avoiding it entirely

It turns out that most of the places where we call renderPlaintextFromRichText are checks against empty text, meaning we don't need to call renderPlaintextFromRichText at all. In these cases we just check whether the text is empty and continue based on that result.

Change type

improvement

Test plan

Create shapes with rich text (Geo, Note, Text).
Verify text rendering and editing still works correctly.
Verify performance improvements when handling large amounts of text or empty text states.

Unit tests
End to end tests

Release notes

Improved performance related to rich text.

vercel · 2025-03-15T13:53:29Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	Mar 17, 2025 0:44am

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
tldraw-docs	⬜️ Ignored (Inspect)	Visit Preview	Mar 17, 2025 0:44am

SomeHats · 2025-03-17T09:58:21Z

packages/tldraw/src/lib/utils/text/richText.ts

+export function isEmptyRichText(richText: TLRichText) {
+	if (richText.content.length === 1) {
+		if (!(richText.content[0] as any).content) return true
+	}
+	return false
+}
+
+export function isSingleCharacterRichText(richText: TLRichText) {
+	if (richText.content.length === 1) {
+		if ((richText.content[0] as any)?.content?.length === 1) return true
+	}
+	return false
+}


these are fine for us, but we should double-check they work with non-texty extensions people might add like images, mentions, or horizontal rules

mimecuvalo · 2025-03-17T12:14:55Z

packages/tldraw/src/lib/shapes/shared/useEditableRichText.ts

 	const editor = useEditor()
 	const rInput = useRef<HTMLDivElement>(null)
-	const isEmpty = richText ? renderPlaintextFromRichText(editor, richText).length === 0 : true
+	const isEmpty = richText && !isEmptyRichText(richText)


patching this up, this was inverted

mimecuvalo · 2025-03-17T12:23:46Z

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

-		if (prevPlaintext && !nextPlaintext) {
+		const wasEmpty = isEmptyRichText(prev.props.richText)
+		const isEmpty = isEmptyRichText(next.props.richText)
+		if (wasEmpty && !isEmpty) {


going to fix this inversion too :)

mimecuvalo · 2025-03-17T12:24:17Z

packages/tldraw/src/lib/utils/text/richText.ts

+
+export function isSingleCharacterRichText(richText: TLRichText) {
+	if (richText.content.length === 1) {
+		if ((richText.content[0] as any)?.content?.length === 1) return true


this should be checking the text

mimecuvalo · 2025-03-17T12:28:41Z

packages/tldraw/src/lib/tools/SelectTool/childStates/EditingShape.ts

 				const isEmptyTextShape =
 					this.editor.isShapeOfType<TLTextShape>(editingShape, 'text') &&
-					renderPlaintextFromRichText(this.editor, editingShape.props.richText).trim() === ''
+					isEmptyRichText(editingShape.props.richText)


this isn't quite the same - we want the shapes to be removed if they're just whitespace, going to revert this bit

Good catch, I'd left the one in onShapeUpdate or EditEnd or whatever that deletes the shape, though with a note that we should see if we can do a version of tiptap/pm's getText that bails as soon as it finds any text, so that we don't block after editing large pieces of text.

mimecuvalo · 2025-03-17T12:41:12Z

packages/tldraw/src/lib/utils/text/richText.ts

+	return false
+}
+
+export function isSingleCharacterRichText(richText: TLRichText) {


actually, i'm gonna nix this — it's too surgical and we call this rarely.

steveruizok · 2025-03-19T12:57:19Z

Looks good, landing! Thanks for the help @mime

This PR improves the performance of shapes with rich text content. ## The bug Due to reasons I cannot understand, we extract the fonts from rich text on every frame while translating shapes. Maybe we shouldn't, I don't know. Anyway, this is expensive when many shapes are moving around. Actually, not even that many. Try it yourself! ## The fix The fix here is the same as #5658, which is to skip the work if the text is empt; or use a weak cache to re-use the result from last time. ### Change type - [ ] `bugfix` - [x] `improvement` - [ ] `feature` - [ ] `api` - [ ] `other` ### Test plan 1. Create lots of geo shapes. 2. Drag all the geo shapes around. ### Release notes - Improved performance while editing many geo shapes or text shapes. --------- Co-authored-by: Mime Čuvalo <[email protected]>

huppy-bot · 2026-01-02T13:43:02Z

Hey! 👋

This PR contains changes to api-report.api.md, which means you've made some API changes. To help reviewers and SDK users understand the impact, please add a "### API changes" section to your PR description.

Here's an example:

### API changes
- Describe what API changes were made
- List any breaking changes
- Note any new or removed parameters

Once you add this section, the check will pass automatically!

steveruizok added 6 commits March 15, 2025 13:17

Update GeoShapeUtil.tsx

c9e6a17

add fast way to get Text

0e8b330

cache plain text from rich text

08b4f52

tighten

643f3a0

Update richText.ts

a6b87ea

ok

f7d83ff

steveruizok requested a review from mimecuvalo March 15, 2025 13:53

huppy-bot bot added the improvement Product improvement label Mar 15, 2025

steveruizok added 2 commits March 15, 2025 14:02

Merge branch 'main' into rich-text-perf-issue

103790c

tighten indicators perf

6f9945c

steveruizok mentioned this pull request Mar 15, 2025

perf(canvas): improve panning performance in large rooms #5603

Closed

3 tasks

steveruizok added the sdk-hotfix-please ⚙️ Triggers SDK hotfix release after merge label Mar 15, 2025

SomeHats reviewed Mar 17, 2025

View reviewed changes

fix logic inversion

23ac70d

mimecuvalo reviewed Mar 17, 2025

View reviewed changes

fix inversion and single char check

284d555

mimecuvalo reviewed Mar 17, 2025

View reviewed changes

revert the trim check

fd07c71

mimecuvalo reviewed Mar 17, 2025

View reviewed changes

nix isSingleCharacterRichText

0fa3fda

mimecuvalo temporarily deployed to e2e-dotcom March 17, 2025 12:41 — with GitHub Actions Inactive

mimecuvalo temporarily deployed to bemo-canary March 17, 2025 12:41 — with GitHub Actions Inactive

mimecuvalo temporarily deployed to deploy-staging March 17, 2025 12:41 — with GitHub Actions Inactive

github-actions bot deployed to bemo-preview March 17, 2025 12:43 View deployment

vercel bot deployed to Preview – examples March 17, 2025 12:44 View deployment

github-actions bot deployed to dotcom-preview March 17, 2025 12:45 View deployment

steveruizok added this pull request to the merge queue Mar 19, 2025

Merged via the queue into main with commit f007270 Mar 19, 2025
12 checks passed

steveruizok deleted the rich-text-perf-issue branch March 19, 2025 13:03

steveruizok mentioned this pull request Mar 23, 2025

perf(editor): cache fonts extracted from rich text #5735

Merged

7 tasks

steveruizok added the sdk Affects the tldraw sdk label Jan 2, 2026

steveruizok changed the title ~~[Fix] Rich text perf issue~~ perf(text): improve rich text performance Jan 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(text): improve rich text performance#5658

perf(text): improve rich text performance#5658
steveruizok merged 12 commits intomainfrom
rich-text-perf-issue

steveruizok commented Mar 15, 2025 •

edited

Loading

Uh oh!

vercel bot commented Mar 15, 2025 •

edited

Loading

Uh oh!

SomeHats Mar 17, 2025

Uh oh!

mimecuvalo Mar 17, 2025

Uh oh!

mimecuvalo Mar 17, 2025

Uh oh!

mimecuvalo Mar 17, 2025

Uh oh!

mimecuvalo Mar 17, 2025

Uh oh!

steveruizok Mar 19, 2025

Uh oh!

mimecuvalo Mar 17, 2025

Uh oh!

steveruizok commented Mar 19, 2025

Uh oh!

Uh oh!

huppy-bot bot commented Jan 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

steveruizok commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Making it faster

Avoiding it entirely

Change type

Test plan

Release notes

Uh oh!

vercel bot commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SomeHats Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

mimecuvalo Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

mimecuvalo Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

mimecuvalo Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

mimecuvalo Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

steveruizok Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

mimecuvalo Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

steveruizok commented Mar 19, 2025

Uh oh!

Uh oh!

huppy-bot bot commented Jan 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

steveruizok commented Mar 15, 2025 •

edited

Loading

vercel bot commented Mar 15, 2025 •

edited

Loading