How To Build A Floating Menu With Lexical and React
Nowadays text editors like Notion let you easily format text with a bubble menu near your selection. Let’s build one!
Nowadays tools like Notion achieved quite a leap in terms of text editing experience. They introduced new patterns which seamlessly integrate into our flow of writing.
One of these new patterns is a floating menu that shows up whenever you select text. It keeps your attention on the text you are editing — instead of letting it wander to a menu bar at the very top of the page. I love those little details!
Since I recently explored Lexical as a new framework for building rich text editors, I wanted to try creating such a bubble menu with Lexical and React.
Here’s the result:
Let’s go through it, step by step!
Setting up the editor
For this article, I created a simple editor upfront so that we can avoid any boilerplate code for the setup. You find this setup on this branch in the Github project.
If you want to follow along, you can clone the project and follow the installation…
