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

fix: add pluginKey option to suggestion plugin, fix #1282

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-13 13:14:54 +02:00
parent 1127f0efcb
commit 7cf3350a83
4 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/src/docPages/api/utilities/suggestion.md
View File

@@ -5,16 +5,17 @@
This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action. This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action.
## Settings ## Settings
| Option | Type | Default | Description | | Option | Type | Default | Description |
| --------------- | ---------- | -------------- | ----------------------------------------------------------- | | --------------- | ----------- | --------------------- | ----------------------------------------------------------- |
| char | `String` | `'@'` | The character that triggers the autocomplete popup. | | char | `String` | `'@'` | The character that triggers the autocomplete popup. |
| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. | | pluginKey | `PluginKey` | `SuggestionPluginKey` | A ProseMirror PluginKey. |
| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. | | allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. |
| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. | | startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. |
| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. | | decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. |
| command | `Function` | `() => {}'` | Executed when a suggestion is selected. | | decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. |
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. | | command | `Function` | `() => {}'` | Executed when a suggestion is selected. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. | | items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
## Source code ## Source code
[packages/suggestion/](https://github.com/ueberdosis/tiptap/blob/main/packages/suggestion/) [packages/suggestion/](https://github.com/ueberdosis/tiptap/blob/main/packages/suggestion/)

4
packages/extension-mention/package.json
View File

@@ -24,7 +24,9 @@
"@tiptap/core": "^2.0.0-beta.1" "@tiptap/core": "^2.0.0-beta.1"
}, },
"dependencies": { "dependencies": {
"@tiptap/suggestion": "^2.0.0-beta.62" "@tiptap/suggestion": "^2.0.0-beta.62",
"prosemirror-model": "^1.14.3",
"prosemirror-state": "^1.3.4"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

4
packages/extension-mention/src/mention.ts
View File

@@ -1,5 +1,6 @@
import { Node, mergeAttributes } from '@tiptap/core' import { Node, mergeAttributes } from '@tiptap/core'
import { Node as ProseMirrorNode } from 'prosemirror-model' import { Node as ProseMirrorNode } from 'prosemirror-model'
import { PluginKey } from 'prosemirror-state'
import Suggestion, { SuggestionOptions } from '@tiptap/suggestion' import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
export type MentionOptions = { export type MentionOptions = {
@@ -11,6 +12,8 @@ export type MentionOptions = {
suggestion: Omit<SuggestionOptions, 'editor'>, suggestion: Omit<SuggestionOptions, 'editor'>,
} }
export const MentionPluginKey = new PluginKey('mention')
export const Mention = Node.create<MentionOptions>({ export const Mention = Node.create<MentionOptions>({
name: 'mention', name: 'mention',
@@ -21,6 +24,7 @@ export const Mention = Node.create<MentionOptions>({
}, },
suggestion: { suggestion: {
char: '@', char: '@',
pluginKey: MentionPluginKey,
command: ({ editor, range, props }) => { command: ({ editor, range, props }) => {
editor editor
.chain() .chain()

6
packages/suggestion/src/suggestion.ts
View File

@@ -4,6 +4,7 @@ import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
import { findSuggestionMatch } from './findSuggestionMatch' import { findSuggestionMatch } from './findSuggestionMatch'
export interface SuggestionOptions { export interface SuggestionOptions {
pluginKey?: PluginKey,
editor: Editor, editor: Editor,
char?: string, char?: string,
allowSpaces?: boolean, allowSpaces?: boolean,
@@ -45,7 +46,10 @@ export interface SuggestionKeyDownProps {
range: Range, range: Range,
} }
export const SuggestionPluginKey = new PluginKey('suggestion')
export function Suggestion({ export function Suggestion({
pluginKey = SuggestionPluginKey,
editor, editor,
char = '@', char = '@',
allowSpaces = false, allowSpaces = false,
@@ -61,7 +65,7 @@ export function Suggestion({
const renderer = render?.() const renderer = render?.()
return new Plugin({ return new Plugin({
key: new PluginKey('suggestion'), key: pluginKey,
view() { view() {
return { return {