docs: update content

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: `
-        <p>Hello <span data-mention="Hans"></span> and <span data-mention="Philipp"></span> and <span data-mention="Kris"></span>!</p>
+        <p>Hi <span data-mention="Winona Ryder"></span> and <span data-mention="Axl Rose"></span>! Don’t forget the daily stand up at 8 AM.</p>
       `,
     })
   },

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/)
 

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)

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
+        # - title: Annotation
-          link: /api/extensions/annotation
+        #   link: /api/extensions/annotation
-          type: draft
+        #   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:

packages/extension-mention/src/mention.ts

@@ -5,7 +5,7 @@ export type MentionOptions = {
   HTMLAttributes: {
     [key: string]: any,
   },
-  suggestionOptions: Omit<SuggestionOptions, 'editor'>,
+  suggestion: Omit<SuggestionOptions, 'editor'>,
 }
 
 export const Mention = Node.create({
@@ -13,7 +13,7 @@ export const Mention = Node.create({
 
   defaultOptions: <MentionOptions>{
     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,
       }),
     ]
   },