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.

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

Inline toolbar gets recreated on every action used #2822

Open
tmclagen opened this issue Sep 1, 2024 · 0 comments
Open

Inline toolbar gets recreated on every action used #2822

tmclagen opened this issue Sep 1, 2024 · 0 comments

Comments

@tmclagen
Copy link

tmclagen commented Sep 1, 2024

Might not be a bug, but a feature.

Whenever you click on any of the available actions inside inline toolbar (i.e. make text bold, italic, underlined, etc) the whole inline toolbar gets recreated. It's smooth and invisible it you don't use any transitions or animations on this toolbar. But if you open the inline toolbar with a bit more ✨fashion✨, then you get some flashing every time you use any of the inline tools.

Steps to reproduce:

  1. Add some transitions to .ce-popover__container (to clearly see the problem)
  2. Type some text
  3. Open inline toolbar by selecting some parts of the text
  4. Use any of the inline tools, for example, make that text bold
  5. See the flashing

Expected behavior:

  1. The whole toolbar doesn't get recreated but instead the state of each button is updated using classes or data attributes?
  2. This will allow us to have entry and leave transitions and animations for the inline toolbar

Video of the bug:
https://github.com/user-attachments/assets/ff6be587-b52a-45f8-a8bb-ac3399a35221

OS: Window 11
Browser: Google Chrome 128.0.6613.114
Editor.js version: 2.30.5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants