https://github.com/konstantinmuenster/lexical-floating-menu

Designed for @lexical/react. Headless & fully-customizable.
https://github.com/konstantinmuenster/lexical-floating-menu

bubble-menu floating-menu headless javascript lexical react text-editor typescript wysiwyg

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/konstantinmuenster/lexical-floating-menu
• Owner: konstantinmuenster
• License: mit
• Created: 2023-04-24T15:50:06.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-06T02:28:56.000Z (8 months ago)
• Last Synced: 2024-11-09T18:11:52.525Z (3 months ago)
• Topics: bubble-menu, floating-menu, headless, javascript, lexical, react, text-editor, typescript, wysiwyg
• Language: TypeScript
• Homepage: https://lexical-floating-menu.vercel.app
• Size: 446 KB
• Stars: 35
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🌬️ 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](https://lexical-floating-menu.vercel.app/)

---



---

## Getting Started

#### Install

```bash

npm install lexical-floating-menu

```

Note: Make sure you have all [peer dependencies](https://github.com/konstantinmuenster/lexical-floating-menu/blob/main/package.json#L45) installed.

#### Configure

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

```tsx

import { FloatingMenuPlugin } from "lexical-floating-menu";

import { YourFloatingMenuUI } from "../components/FloatingMenu";

export function LexicalEditor(props: LexicalEditorProps) {

  return (

    

      {/** ... other plugins (e.g. RichTextPlugin) */}

      

    

  );

}

```

Take a look at the [Storybook example](https://github.com/konstantinmuenster/lexical-floating-menu/blob/main/stories/FloatingMenuPlugin.stories.ts) to see how your FloatingMenu component could look like.

---

## About



Konstantin Münster – [konstantin.digital](https://konstantin.digital)

Distributed under the [MIT](http://showalicense.com/?fullname=Konstantin+M%C3%BCnster&year=2019#license-mit) license.

See `LICENSE` for more information.

[https://github.com/konstantinmuenster](https://github.com/konstantinmuenster)