2021-10-14 06:13:50 +08:00
---
2021-10-16 04:48:57 +08:00
description: Add a toolbar that pops up above the text. Great to apply inline formatting.
2021-10-15 03:20:21 +08:00
icon: chat-2-line
2021-10-14 06:13:50 +08:00
---
2021-03-30 20:07:18 +08:00
# Bubble Menu
[![Version ](https://img.shields.io/npm/v/@tiptap/extension-bubble-menu.svg?label=version )](https://www.npmjs.com/package/@tiptap/extension-bubble-menu)
[![Downloads ](https://img.shields.io/npm/dm/@tiptap/extension-bubble-menu.svg )](https://npmcharts.com/compare/@tiptap/extension-bubble-menu?minimal=true)
2021-04-01 04:35:00 +08:00
This extension will make a contextual menu appear near a selection of text. Use it to let users apply [marks ](/api/marks ) to their text selection.
2021-04-21 18:11:56 +08:00
As always, the markup and styling is totally up to you.
2021-03-30 20:07:18 +08:00
## Installation
```bash
npm install @tiptap/extension -bubble-menu
```
## Settings
2021-10-02 07:20:09 +08:00
### element
The DOM element that contains your menu.
Type: `HTMLElement`
Default: `null`
2022-11-04 23:39:41 +08:00
### delay
The `BubbleMenu` debounces the `update` method to allow the bubble menu to not be updated on every selection update. This can be controlled in milliseconds.
The BubbleMenuPlugin will come with a default delay of 250ms. This can be deactivated, by setting the delay to `0` which deactivates the debounce.
Type: `Number`
Default: `undefined`
2021-10-02 07:20:09 +08:00
### tippyOptions
Under the hood, the `BubbleMenu` uses [tippy.js ](https://atomiks.github.io/tippyjs/v6/all-props/ ). You can directly pass options to it.
Type: `Object`
Default: `{}`
### pluginKey
The key for the underlying ProseMirror plugin. Make sure to use different keys if you add more than one instance.
Type: `string | PluginKey`
Default: `'bubbleMenu'`
### shouldShow
A callback to control whether the menu should be shown or not.
Type: `(props) => boolean`
2021-03-30 20:07:18 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-bubble-menu/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bubble-menu/ )
2021-03-30 20:07:18 +08:00
2021-04-01 04:35:00 +08:00
## Usage
### JavaScript
2021-03-30 20:07:18 +08:00
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
```
2021-04-01 04:35:00 +08:00
### Frameworks
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Extensions/BubbleMenu
2021-08-11 20:37:58 +08:00
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
```js
BubbleMenu.configure({
shouldShow: ({ editor, view, state, oldState, from, to }) => {
// only show the bubble menu for images and links
return editor.isActive('image') || editor.isActive('link')
},
})
```
### Multiple menus
2021-08-13 18:33:06 +08:00
Use multiple menus by setting an unique `pluginKey` .
2021-08-11 20:37:58 +08:00
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
2021-08-13 18:33:06 +08:00
pluginKey: 'bubbleMenuOne',
2021-08-11 20:37:58 +08:00
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
2021-08-13 18:33:06 +08:00
pluginKey: 'bubbleMenuTwo',
2021-08-11 20:37:58 +08:00
element: document.querySelector('.menu-two'),
}),
],
})
```
Alternatively you can pass a ProseMirror `PluginKey` .
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
import { PluginKey } from 'prosemirror-state'
new Editor({
extensions: [
BubbleMenu.configure({
2021-08-13 18:33:06 +08:00
pluginKey: new PluginKey('bubbleMenuOne'),
2021-08-11 20:37:58 +08:00
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
2021-08-13 18:33:06 +08:00
pluginKey: new PluginKey('bubbleMenuTwo'),
2021-08-11 20:37:58 +08:00
element: document.querySelector('.menu-two'),
}),
],
})
```