konstantinmuenster / lexical-floating-menu

Designed for @lexical/react. Headless & fully-customizable.

🌬️ lexical-floating-menu

Designed for @lexical/react. Headless & fully customizable.

Improve your text editing experience with an intuitive floating menu / bubble menu.

📌 Live Demo: lexical-floating-menu.vercel.app

---

---

Getting Started

Install

npm install lexical-floating-menu

Note: Make sure you have all peer dependencies installed.

Configure

lexical-floating-menu exports a React component that can be included as a plugin within your editor.

import { FloatingMenuPlugin } from "lexical-floating-menu";
import { YourFloatingMenuUI } from "../components/FloatingMenu";

export function LexicalEditor(props: LexicalEditorProps) {
  return (
    <LexicalComposer initialConfig={props.config}>
      {/** ... other plugins (e.g. RichTextPlugin) */}
      <FloatingMenuPlugin
        // This component represents the rendered menu. You can include any formatting
        // options. FloatingMenuPlugin takes care of rendering it at the right position.
        MenuComponent={YourFloatingMenuUI}
        // optional – Define to which HTML element the menu gets appended to
        element={document.body}
      />
    </LexicalComposer>
  );
}

Take a look at the Storybook example to see how your FloatingMenu component could look like.

---

About

Konstantin Münster – konstantin.digital

Distributed under the MIT license. See LICENSE for more information.

https://github.com/konstantinmuenster