Extensions
bubbleMenu
A menu that appears over the selection.
You bring the element; this shows it when something is selected, places it above the selection, and hides it when the selection collapses or focus leaves both the editor and the menu. Buttons inside it should prevent the default on `mousedown`, so pressing one does not take the selection away from the text it is about to format.
1 · Install
One package for every extension · there is no @matrajs/bubbleMenu to install.
npm i @matrajs/core2 · Add it to the editor
Import it and put it in the extensions array. That array is the whole feature list:
what is not in it is not in your bundle and not in the document's schema.
import { createEditor, document, paragraph, text, bubbleMenu } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, bubbleMenu({ … })],
element: document.querySelector('#editor'),
})3 · Use it
Nothing to call · this one works once it is in the array. A menu that appears over the selection.
Options
bubbleMenu is a function · call it with an options object.
| Option | Type | What it does |
|---|---|---|
element required | HTMLElement | The element to show. Positioned absolutely by this extension, hidden when not needed. |
shouldShow | (editor: Editor) => boolean | When to show it. Default: the selection is not empty and the editor, or the menu, has focus. |
placement | 'top' | 'bottom' | Above or below the selection. Default `top`. |
offset | number | Pixels between the selection and the menu. Default 8. |