Skip to content

feat(studio): edit and style text in the preview - #3131

Closed
miguel-heygen wants to merge 2 commits into
stack/p3-inline-text-stylingfrom
stack/p4-inline-text-editing
Closed

feat(studio): edit and style text in the preview#3131
miguel-heygen wants to merge 2 commits into
stack/p3-inline-text-stylingfrom
stack/p4-inline-text-editing

Conversation

@miguel-heygen

Copy link
Copy Markdown
Collaborator

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

  • 3264 studio tests green
  • Open an edit, type, click away, reload: the text persisted. Bold half a word and the other half stays unbolded through a save.

Fourth of eight stacked PRs re-cutting #3077. 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.

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
miguel-heygen force-pushed the stack/p4-inline-text-editing branch from a23f5a9 to 27e3d85 Compare August 9, 2026 15:40
@miguel-heygen

Copy link
Copy Markdown
Collaborator Author

Superseded: reordering the stack so the preview fixes land before the rich-text feature. GitHub locks base branches on a recognised stack, so the chain is being recreated rather than retargeted.

@miguel-heygen
miguel-heygen deleted the stack/p4-inline-text-editing branch August 9, 2026 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant