feat(studio): edit and style text in the preview - #3143
Draft
miguel-heygen wants to merge 2 commits into
Draft
Conversation
miguel-heygen
force-pushed
the
stack/inline-text-editing
branch
from
August 9, 2026 23:07
27e3d85 to
18ca774
Compare
Double-press a text element in the canvas and the caret opens where you pressed, in the element itself rather than in a panel. Select characters and a small toolbar offers colour, bold, italic and underline, applied to exactly those characters. The toolbar lives in Studio's document rather than the composition's. Putting it in the preview would inject Studio's chrome into the user's composition, where a render would capture it and the composition's own styling would inherit into it. In a flex or grid container the rebuilt runs go inside one wrapper, so a coloured word cannot reflow the element it sits in. Also fixes the keyboard: the shortcut guards matched contenteditable=true only, so playback shortcuts ate letters typed into the composition.
The rich-text operation pushed this file past the 600-line gate. Same change the branch made later, landed with the commit that caused it.
miguel-heygen
force-pushed
the
stack/inline-text-editing
branch
from
August 10, 2026 00:00
18ca774 to
c38bfbc
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Double-press a text element in the canvas and the caret opens where you pressed, in the element itself rather than in a panel. Select characters and a small toolbar offers colour, bold, italic and underline, applied to exactly those characters.
Why
Editing text meant finding it in a panel and retyping it there. The panel could not express styling at all.
How
The toolbar lives in Studio's document rather than the composition's. Putting it in the preview would inject Studio's chrome into the user's composition, where a render would capture it and the composition's own styling would inherit into it. It is positioned over the selection in viewport coordinates, so it does not have to know which of the canvas' nested coordinate systems it was mounted into.
In a flex or grid container the rebuilt runs go inside one wrapper, so a coloured word cannot reflow the element it sits in.
Also fixes the keyboard: the shortcut guards matched contenteditable=true only, so playback shortcuts ate letters typed into the composition.
Test plan
This one is over the usual size budget. The editor and the toolbar cannot be separated, since the editing layer is what mounts the toolbar; about 40% of the diff is tests.
Part of a stack re-cutting #3077, which stays open as the reference for the whole tree. The preview fixes land first; this is the feature half.