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

feat: add key option and shouldShow option to menus (fix #1480, fix #1043, fix #1268, fix #1503)

Browse Source 
* add key option to bubble menu

* ignore react for now

* add shouldShow option to bubble menu extension

* improve types

* remove BubbleMenuPluginKey

* add key and shouldShow option to floating menu extension

* fix: don’t show floating menu within code block

* docs: add new menu options
This commit is contained in:
Philipp Kühn
2021-08-11 14:37:58 +02:00
committed by GitHub
parent bcc1309cd9
commit 9ba61c1582
12 changed files with 312 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,10 +15,12 @@ yarn add @tiptap/extension-bubble-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | ------------- | ------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element that contains your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| Option | Type | Default | Description |
| ------------ | -------------------- | -------------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element that contains your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| key | `string | PluginKey` | `'bubbleMenu'` | The key for the underlying ProseMirror plugin. |
| shouldShow | `(props) => boolean` | | Controls whether the menu should be shown or not. |
## Source code
[packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bubble-menu/)
@@ -44,3 +46,57 @@ new Editor({
Vue: 'Extensions/BubbleMenu/Vue',
React: 'Extensions/BubbleMenu/React',
}" />
### 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
Use multiple menus by setting an unique `key`.
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
key: 'bubbleMenuOne',
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
key: 'bubbleMenuTwo',
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({
key: new PluginKey('bubbleMenuOne'),
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
key: new PluginKey('bubbleMenuTwo'),
element: document.querySelector('.menu-two'),
}),
],
})
```

64
docs/src/docPages/api/extensions/floating-menu.md
View File

@@ -13,10 +13,12 @@ yarn add @tiptap/extension-floating-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | ------------- | ------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element of your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| Option | Type | Default | Description |
| ------------ | -------------------- | ---------------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element of your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| key | `string | PluginKey` | `'floatingMenu'` | The key for the underlying ProseMirror plugin. |
| shouldShow | `(props) => boolean` | | Controls whether the menu should be shown or not. |
## Source code
[packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-floating-menu/)
@@ -40,3 +42,57 @@ new Editor({
Vue: 'Extensions/FloatingMenu/Vue',
React: 'Extensions/FloatingMenu/React',
}" />
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
```js
FloatingMenu.configure({
shouldShow: ({ editor, view, state, oldState }) => {
// show the floating within any paragraph
return editor.isActive('paragraph')
},
})
```
### Multiple menus
Use multiple menus by setting an unique `key`.
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
key: 'floatingMenuOne',
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
key: 'floatingMenuTwo',
element: document.querySelector('.menu-two'),
}),
],
})
```
Alternatively you can pass a ProseMirror `PluginKey`.
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
import { PluginKey } from 'prosemirror-state'
new Editor({
extensions: [
FloatingMenu.configure({
key: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
key: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-two'),
}),
],
})
```