Desktop: Resolves #10025 Toggle external editing button overlaps with bold button fixes

[JanhaviAlekar]

Before Changes:
Screencast from 05-03-24 03:47:55 PM IST.webm

After Changes:
Screencast from 05-03-24 03:51:28 PM IST.webm

fixes #10025

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[JanhaviAlekar]

I have read the CLA Document and I hereby sign the CLA

[laurent22]

The reason this bug hasn't been fixed for a long time is that it's indeed hard to fix. Anybody can do what you've done and add a useless gap next to the button:

[JanhaviAlekar]

I'm sorry if I interpreted it wrong. But can you suggest how to move forward with it if this is not the way to fix it.

[laurent22]

No, sorry, I don't know. The button size needs to be dynamic - small when there's just an icon and large when there's the text+icon. I'm going to close the pull request for now but feel free to try again

[personalizedrefrigerator]

I'm sorry if I interpreted it wrong. But can you suggest how to move forward with it if this is not the way to fix it.

One way forward could be to adjust styles.leftExtraToolbarContainer.width in packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.ts based on the global state watchedNoteFiles. Note that watchedNoteFiles is what is currently used to update the external editing button's title.

Note that NoteEditor already has access to watchedNoteFiles, so one solution could be to pass it to TinyMCE by adding a property to NoteBodyEditorProps.