onlook-dev
[feat] Basic text editing hotkeys for selected text
Describe the feature
Allow the user to...
- CMD+B for Bolding a selected text
- CMD+I for Italicisizing a selected text
- CMD+U for Underlining a selected text
Ideally this would allow a user to stule purely a highlighted element. This may require wrapping the element in a for the highlighted selection.
@Paribesh01 go for it but I don't think it'll be simple on the writing to code side. It will be similar to this where we'd have to format the code being written back correctly https://github.com/onlook-dev/onlook/pull/2083
@drfarrell @Kitenite need your inputs do we only need the functionality here, or should we add UI as well? Personally, I think it looks good like this, and it only triggers when the user uses CMD+B, CMD+I, or CMD+U, which feels quite natural.
Ref :
@drfarrell @Kitenite need your inputs do we only need the functionality here, or should we add UI as well? Personally, I think it looks good like this, and it only triggers when the user uses CMD+B, CMD+I, or CMD+U, which feels quite natural. Ref :
@Rish-it thanks for your patience – that's a great point. I like the idea of adding in UI for this but we may have to get clever with it.
- Bold – We should just set the font weight to Bold in the dropdown with CMD+B
- Underline is handled in the decoration section of the advanced typography
- It would be great to add an italics button beneath the decoration section – perhaps just two options, one as an X and the other as I for italics. If you need a mockup let me know, but I image you can borrow the same structure as the text decoration section from the advanced typography, but just make it two options instead of 4.
@drfarrell @Kitenite need your inputs do we only need the functionality here, or should we add UI as well? Personally, I think it looks good like this, and it only triggers when the user uses CMD+B, CMD+I, or CMD+U, which feels quite natural. Ref :
@Rish-it thanks for your patience – that's a great point. I like the idea of adding in UI for this but we may have to get clever with it.
- Bold – We should just set the font weight to Bold in the dropdown with CMD+B
- Underline is handled in the decoration section of the advanced typography
3. It would be great to add an italics button beneath the decoration section – perhaps just two options, one as an X and the other as _I_ for italics. If you need a mockup let me know, but I image you can borrow the same structure as the text decoration section from the advanced typography, but just make it two options instead of 4.
A mockup would be great to see if we're on the same page - here's mine, let me know your thoughts!
@drfarrell @Kitenite drop your feedback
https://github.com/user-attachments/assets/ff477095-99ad-49fa-a6a8-c3553a6fd69d
@Rish-it I'm realizing it's very rare that anyone uses the upper-line(?), and bold is technically already handled with the font weight (Arial, Regular in the topbar)
So with that, in the text details, lets do...
Decorate ------ Italic • Underline • Strikethrough • X
For when a user "bolds" a selected text, it should set the font weight from regular to bold.
How does that sound?