ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-03-31 22:35:00 +02:00
parent 2cf5792bea
commit cc44f1a65a
18 changed files with 161 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/src/docPages/api/extensions/bubble-menu.md
View File

@@ -2,7 +2,9 @@
[![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)
This extension will make a contextual menu appear near a selection of text.
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.
As always, the markup and styling is totally up to you. The menu is positioned absolute and requires a wrapper with `position: relative`, that’s basically the only requirement though.
## Installation
```bash
@@ -13,15 +15,17 @@ yarn add @tiptap/extension-bubble-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | ------------- | --------- | --------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element of your menu. |
| keepInBounds | `Boolean` | `true` | Specifies that the element is not rendered across bounds. |
| Option | Type | Default | Description |
| ------------ | ------------- | ------- | -------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element that contains your menu. |
| keepInBounds | `Boolean` | `true` | When enabled, it’s rendered inside the bounding box of the document. |
## Source code
[packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bubble-menu/)
## Using Vanilla JavaScript
## Usage
### JavaScript
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
@@ -35,7 +39,7 @@ new Editor({
})
```
## Using a framework
### Frameworks
<demos :items="{
Vue: 'Extensions/BubbleMenu/Vue',
React: 'Extensions/BubbleMenu/React',