Fixed toolbar in RichText Lexical editor.

[revnelson]

I love the lexical editor's floating toolbar for most cases, but is there a way to have the toolbar fixed to the top of the RichText box? There are a few places where it would make more sense , such as fields where inserting an icon in the middle of text is more common than modifying something that has been selected. Currently it seems like the only menus are the slash menu for a new section, or when selecting existing text.

[johngrantdev]

While I'm quite happy with using the more modern context menu for my projects, I thought I'd dump some extra arguments for the traditional toolbar here:

• Familiarity for end users - the context menu and + menu hide features by default. This provides a clean and efficient way of working for frequent/power users but the slight learning curve may be challenging or annoying for infrequent users.
• When transitioning from slate to lexical, you may not want to initially deal with a major change to the UI.

[patricsgamma]

One additional weakness of the floating toolbar we experience is.

Our Feature

Some of our Text is sent to a TextToSpeech service to be voiced out, we can easily do this with hooks.
Now we also have a Substitution alias feature implemented that lets us replace certain words of a text to be spoken differently.
A next feature that would be nice is to have the possibility to add Audio files inline to be added and sent along to the TTS service.

Missing Payload lexical feature

For a use-case like this, we would need to add a marker at an arbitrary text position. But we have no toolbar to achieve this.
Right now we have to create a random character. This so we can select this character which opens the toolbar, then we can add a our desired marker node instead of this char.
But I can't see how to get a toolbar to open at a desired curser position, without such a hack.

[pvaladez]

I would also like to see a traditional fixed toolbar, like the official Lexical playground has: https://playground.lexical.dev/

Additionally I would like there to be a border and/or different color background on the rich text editing area. Right now the Lexical editor in Payload just makes the background the same color as everything around it, and it's hard to tell where the rich text editing area starts and ends. I believe this in combination with the fact that there is no fixed toolbar will cause a lot of confusion and questions for end users.

[AlessioGr]

Thank you for your feedback! We listen to our community, so we've just added a fixed toolbar to 3.0-beta.25! 🎉 You can test it out by enabling the FixedToolbarFeature like this

editor: lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    FixedToolbarFeature(),
  ],
})

It's fully-configurable and you can add your own buttons, dropdowns or any other react component to it - just like with our floating toolbar!

While it is an opt-in feature, so by default, only the inline toolbar is enabled, it will receive the same level of support as the default inline toolbar.

Additionally, the default inline toolbar has been extracted into a InlineToolbarFeature. This means that, if you want to, you can now disable the inline toolbar.

[SimonVreman]

@AlessioGr not sure if known, but it has some overflow issues on smaller screens, when using live preview for example.