Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Text editor bugs/enhancements #107

Closed
5 tasks done
kof opened this issue Jul 3, 2022 · 2 comments
Closed
5 tasks done

Text editor bugs/enhancements #107

kof opened this issue Jul 3, 2022 · 2 comments
Assignees
@TrySound
Labels
area:canvas Anything related to rendering on canvas complexity:medium Up to 1 week of work prio:2 Always look for prio:1 issues first before working on prio:2 type:bug Something isn't working type:enhancement New feature or request

Comments

@kof
Copy link
Member

kof commented Jul 3, 2022 •
edited

When selecting inline instances e.g. bold/italic or link inside a paragraph or other text editable components, currently toolbar doesn't know that user selects an instance and would execute the same command again.

Instead it should be made aware that user has selected part or entire instance and show "active" state in the toolbar, then when clicked again it should turn selected instance text back to text.

This is a follow-up from #93

Todo

  • inform toolbar about selected instance
  • support selecting part of the word
  • when turning instance to text, make sure it works both entire word and part of it
  • italicizing text removes bold
  • apply the new design from figma (icons, styling)
@kof kof added type:enhancement New feature or request area:canvas Anything related to rendering on canvas complexity:medium Up to 1 week of work prio:2 Always look for prio:1 issues first before working on prio:2 labels Jul 3, 2022
@kof kof mentioned this issue Jul 3, 2022
Merged
7 tasks
@kof kof changed the title When selecting an inline instance, toolbar should be aware Text editor bugs/enhancements Jul 5, 2022
@kof kof added the type:bug Something isn't working label Jul 5, 2022
@kof kof mentioned this issue Jul 5, 2022
Closed
@TrySound TrySound self-assigned this Oct 31, 2022
@taylornowotny
Copy link
Contributor

Check the Design System docs in figma for design details!

Screenshot 2022-11-14 at 11 18 12 AM

TrySound added a commit that referenced this issue Nov 18, 2022
@TrySound
Use floating-ui to position text toolbar
c5ac052 
Ref #107

Text toolbar is badly positioned when flipped up. Keeping it too close
to cursor makes text selection harder.

Here I replaced custom logic with computed rect from toolbar parent and
state from canvas. A few middlewares polished offsets. Flip no longer
overlap text.

Also fixed toolbar background.
@TrySound TrySound mentioned this issue Nov 18, 2022
Merged
11 tasks
TrySound added a commit that referenced this issue Nov 19, 2022
@TrySound
Use floating-ui to position text toolbar (#467)
b163fdf 
Ref #107

Text toolbar is badly positioned when flipped up. Keeping it too close
to cursor makes text selection harder.

Here I replaced custom logic with computed rect from toolbar parent and
state from canvas. A few middlewares polished offsets. Flip no longer
overlap text.

Also fixed toolbar background.

Hide toolbar while selecting text with mouse.
TrySound added a commit that referenced this issue Nov 23, 2022
@TrySound
Improve text editor styling and enable auto focus
355e4d6 
Ref #107

- fixed bold italic styling
- populate default style for instances created from text editor
- added unmount support to css engine
- auto focus text editor when start editing
@TrySound TrySound mentioned this issue Nov 23, 2022
Merged
12 tasks
TrySound added a commit that referenced this issue Nov 23, 2022
@TrySound
Improve text editor styling and enable auto focus (#504)
7f44d78 
Ref #107

- fixed bold italic styling
- populate default style for instances created from text editor
- added unmount support to css engine
- auto focus text editor when start editing
@TrySound TrySound mentioned this issue Dec 7, 2022
Merged
12 tasks
TrySound added a commit that referenced this issue Dec 9, 2022
@TrySound
Redesign text toolbar (#567)
7637d48 
Ref #555
#107

Implemented icon button according new design,
added hover and disabled states for non-default variant.

Migrated text toolbar from toggle group to icon button.
Toggle between superscript and subscript.

<img width="285" alt="image"
src="https://user-images.githubusercontent.com/5635476/206522786-28cc6b7d-6336-4c13-8eb7-b83428598dcb.png">

<img width="315" alt="image"
src="https://user-images.githubusercontent.com/5635476/206523165-1b4a080d-0c8d-41a1-b5a9-47c197b78998.png">

<img width="197" alt="image"
src="https://user-images.githubusercontent.com/5635476/206521819-14c1fbb3-6c37-4264-8f7b-cef256b4ab23.png">
@kof
Copy link
Member Author

kof commented Dec 10, 2022

Done?

@kof kof closed this as completed Dec 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@TrySound TrySound

Labels
area:canvas Anything related to rendering on canvas complexity:medium Up to 1 week of work prio:2 Always look for prio:1 issues first before working on prio:2 type:bug Something isn't working type:enhancement New feature or request
Projects
No open projects
Webstudio Beta
Status: Done
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kof @TrySound @taylornowotny