diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue index 16bbf954f..9b47d092a 100644 --- a/docs/src/demos/Nodes/Mention/index.vue +++ b/docs/src/demos/Nodes/Mention/index.vue @@ -34,9 +34,11 @@ export default { HTMLAttributes: { class: 'mention', }, - suggestionOptions: { + suggestion: { items: query => { - return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query)) + return [ + 'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet', + ].filter(item => item.startsWith(query)).slice(0, 5) }, render: () => { let component @@ -56,7 +58,7 @@ export default { showOnCreate: true, interactive: true, trigger: 'manual', - placement: 'top-start', + placement: 'bottom-start', }) }, onUpdate(props) { @@ -79,7 +81,7 @@ export default { }), ], content: ` -

Hello and and !

+

Hi and ! Don’t forget the daily stand up at 8 AM.

`, }) }, diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md index 3d15ae561..3ebb62c86 100644 --- a/docs/src/docPages/api/nodes/mention.md +++ b/docs/src/docPages/api/nodes/mention.md @@ -9,6 +9,24 @@ npm install @tiptap/extension-mention yarn add @tiptap/extension-mention ``` +## Settings +| Option | Type | Default | Description | +| -------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- | +| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | +| suggestion | `Object` | `{ char: '@', command: … ` | [Suggestion utility](/api/utilities/suggestion) | + +## Settings for suggestions +| Option | Type | Default | Description | +| --------------- | ---------- | -------------- | ----------------------------------------------------------- | +| char | `String` | `'@'` | The character that triggers the autocomplete popup. | +| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. | +| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. | +| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. | +| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. | +| command | `Function` | `() => {}'` | Executed when a suggestion is selected. | +| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. | +| render | `Function` | `() => ({})` | A render function for the autocomplete popup. | + ## Source code [packages/extension-mention/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) diff --git a/docs/src/docPages/api/utilities/suggestion.md b/docs/src/docPages/api/utilities/suggestion.md new file mode 100644 index 000000000..8a6fd4fd9 --- /dev/null +++ b/docs/src/docPages/api/utilities/suggestion.md @@ -0,0 +1,25 @@ +# Suggestion +TODO + +## Settings +| Option | Type | Default | Description | +| --------------- | ---------- | -------------- | ----------------------------------------------------------- | +| char | `String` | `'@'` | The character that triggers the autocomplete popup. | +| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. | +| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. | +| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. | +| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. | +| command | `Function` | `() => {}'` | Executed when a suggestion is selected. | +| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. | +| render | `Function` | `() => ({})` | A render function for the autocomplete popup. | + +## Render +TODO + +## Source code +[packages/suggestion/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/suggestion/) + +## Usage +* [`Emoji`](/api/nodes/emoji) +* [`Hashtag`](/api/nodes/hashtag) +* [`Mention`](/api/nodes/mention) diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 0c7ced81b..3c89bcdea 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -113,7 +113,7 @@ link: /api/nodes/list-item - title: Mention link: /api/nodes/mention - type: draft + type: new - title: OrderedList link: /api/nodes/ordered-list - title: Paragraph @@ -155,9 +155,9 @@ - title: Extensions link: /api/extensions items: - - title: Annotation - link: /api/extensions/annotation - type: draft + # - title: Annotation + # link: /api/extensions/annotation + # type: draft - title: Collaboration link: /api/extensions/collaboration type: pro @@ -186,7 +186,12 @@ link: /api/schema - title: Keyboard Shortcuts link: /api/keyboard-shortcuts - + - title: Utilities + link: /api/utilities + redirect: /api/utilities/suggestion + items: + - title: Suggestion + link: /api/utilities/suggestion - title: Links items: diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts index c5e2cd94f..e116a789d 100644 --- a/packages/extension-mention/src/mention.ts +++ b/packages/extension-mention/src/mention.ts @@ -5,7 +5,7 @@ export type MentionOptions = { HTMLAttributes: { [key: string]: any, }, - suggestionOptions: Omit, + suggestion: Omit, } export const Mention = Node.create({ @@ -13,7 +13,7 @@ export const Mention = Node.create({ defaultOptions: { HTMLAttributes: {}, - suggestionOptions: { + suggestion: { char: '@', command: ({ editor, range, attributes }) => { editor @@ -76,7 +76,7 @@ export const Mention = Node.create({ return [ Suggestion({ editor: this.editor, - ...this.options.suggestionOptions, + ...this.options.suggestion, }), ] },