Skip to content

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

Merged
mimecuvalo merged 6 commits intomainfrom
cache-rich-text-fonts
Mar 24, 2025
Merged

perf(editor): cache fonts extracted from rich text#5735
mimecuvalo merged 6 commits intomainfrom
cache-rich-text-fonts

Conversation

@steveruizok
Copy link
Copy Markdown
Collaborator

@steveruizok steveruizok commented Mar 23, 2025

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
  • improvement
  • feature
  • api
  • other

Test plan

  1. Create lots of geo shapes.
  2. Drag all the geo shapes around.
  • Unit tests
  • End to end tests

Release notes

  • Improved performance while editing many geo shapes or text shapes.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 23, 2025

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

Name Status Preview Updated (UTC)
examples ✅ Ready (Inspect) Visit Preview Mar 24, 2025 0:16am
1 Skipped Deployment
Name Status Preview Updated (UTC)
tldraw-docs ⬜️ Ignored (Inspect) Visit Preview Mar 24, 2025 0:16am

@huppy-bot huppy-bot bot added the improvement Product improvement label Mar 23, 2025
@steveruizok steveruizok requested a review from mimecuvalo March 23, 2025 15:37
assert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')
assert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')
if (isEmptyRichText(richText)) return EMPTY_ARRAY
return fontsFromTextCache.get(richText, () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is quite right - the fonts found will depend largely on initialState, which encodes stuff like the initial font (from the styles panel). Right now, i think if you change the font, you won't invalidate the cache.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can probably see this by removing the font preloading that we do in onMount in Tldraw

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add that another concern that the cache would have grown, perhaps, to a large size. Because the rich text would change more often than not (not on every keystroke but maybe in the future it would), we would have a cache that would have needed more work.

@mimecuvalo
Copy link
Copy Markdown
Member

pushed up the fix @SomeHats

Copy link
Copy Markdown
Contributor

@SomeHats SomeHats left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice! ty

@mimecuvalo mimecuvalo enabled auto-merge March 24, 2025 12:14
@mimecuvalo mimecuvalo added this pull request to the merge queue Mar 24, 2025
Merged via the queue into main with commit 5642859 Mar 24, 2025
12 checks passed
@mimecuvalo mimecuvalo deleted the cache-rich-text-fonts branch March 24, 2025 12:26
@steveruizok steveruizok added the sdk Affects the tldraw sdk label Jan 2, 2026
@steveruizok steveruizok changed the title Cache the fonts extracted from rich text. perf(editor): cache fonts extracted from rich text Jan 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

improvement Product improvement sdk Affects the tldraw sdk

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants