fix: reduce tab width to 2 spaces in rich text (tldraw #7703)

[sahiee-dev]

Reduce rich text tab width to 2 spaces

This PR reduces the visual width of tab characters (\t) in text and rich text shapes from the browser default (~8 spaces) to 2 spaces, making indentation more compact and practical for notes and code-like content.

What changed

• Add --tl-tab-size CSS custom property to .tl-container for theming and configurability
• Apply tab-size: var(--tl-tab-size, 2) to:
  • .tl-text (plain text shapes)
  • .tl-rich-text .ProseMirror (rich text editor)
• Tabs now render at 2-space width instead of the browser default

Before / After

Before (browser default tab width ~8 spaces)

After (tab-size = 2 spaces)

This is a visual-only improvement; text data remains unchanged.

---

Change type

• bugfix
• improvement
• feature
• api
• other

---

Test plan

1. Create a text or note shape
2. Press Tab to insert indentation
3. Verify the tab renders at approximately 2 spaces
4. Repeat in a rich text shape (notes / labels)
5. Confirm text measurement and resizing behave normally

• Unit tests
• End to end tests

---

Release notes

• Improved tab indentation in text and rich text shapes by reducing tab width to 2 spaces

fixes #7703

---

Note

Low Risk
Low risk: this is a visual-only styling change affecting how tab characters render in text/rich-text editing and SVG export, with no data-model or behavior changes.

Overview
Tab characters now render with a 2-space width instead of the browser default by introducing --tl-tab-size on .tl-container.

This applies tab-size: var(--tl-tab-size, 2) to .tl-text and .tl-rich-text .ProseMirror, and sets tabSize in RichTextLabel’s SVG export styling so exported rich text matches on-canvas rendering.

^{Written by Cursor Bugbot for commit dea295c. This will update automatically on new commits. Configure here.}

[vercel]

@sahiee-dev is attempting to deploy a commit to the tldraw Team on Vercel.

A member of the Team first needs to authorize it.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[steveruizok]

Sorry @sahiee-dev, we're not accepting pull requests from external contributors at this time. See discussion here. If you'd like to report a bug or suggest a feature, please open an issue instead.

[mimecuvalo]

i think this was actually a decent way to address the issue.

@sahiee-dev i'm reopening this - sorry we've been closing a bunch of PRs lately to reduce noise from AI-generated PRs. i'll re-examine this one more closely.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
tldraw-shader	Ignored	Preview	Jan 29, 2026 3:41pm

[mimecuvalo]

looks like @steveruizok is redoing this over in another PR: #7796

[sahiee-dev]

@mimecuvalo Thanks for revisiting this and landing a fix. Appreciate the time.