Merge branch 'feature/suggestions' of github.com:ueberdosis/tiptap-next into feature/suggestions

docs/src/demos/Nodes/Mention/MentionList.vue

@@ -94,6 +94,7 @@ export default {
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
+
 .item {
   display: block;
   width: 100%;

packages/extension-mention/src/mention.ts

@@ -15,6 +15,14 @@ export const Mention = Node.create({
     HTMLAttributes: {},
     suggestionOptions: {
       char: '@',
+      command: ({ editor, range, attributes }) => {
+        editor
+          .chain()
+          .focus()
+          .replace(range, 'mention', attributes)
+          .insertText(' ')
+          .run()
+      },
     },
   },
 
@@ -69,14 +77,6 @@ export const Mention = Node.create({
       Suggestion({
         editor: this.editor,
         ...this.options.suggestionOptions,
-        command: ({ range, attributes }) => {
-          this.editor
-            .chain()
-            .focus()
-            .replace(range, 'mention', attributes)
-            .insertText(' ')
-            .run()
-        },
       }),
     ]
   },

packages/suggestion/src/suggestion.ts

@@ -8,8 +8,13 @@ export interface SuggestionOptions {
   char?: string,
   allowSpaces?: boolean,
   startOfLine?: boolean,
-  suggestionClass?: string,
+  decorationTag?: string,
-  command?: (props: { range: Range, attributes: AnyObject }) => void,
+  decorationClass?: string,
+  command?: (props: {
+    editor: Editor,
+    range: Range,
+    attributes: AnyObject
+  }) => void,
   items?: (query: string) => any[],
   render?: () => {
     onStart?: (props: SuggestionProps) => void,
@@ -41,7 +46,8 @@ export function Suggestion({
   char = '@',
   allowSpaces = false,
   startOfLine = false,
-  suggestionClass = 'suggestion',
+  decorationTag = 'span',
+  decorationClass = 'suggestion',
   command = () => null,
   items = () => [],
   render = () => ({}),
@@ -83,7 +89,11 @@ export function Suggestion({
               ? await items(state.query)
               : [],
             command: attributes => {
-              command({ range: state.range, attributes })
+              command({
+                editor,
+                range: state.range,
+                attributes,
+              })
             },
             decorationNode,
             // virtual node for popper.js or tippy.js
@@ -186,8 +196,8 @@ export function Suggestion({
 
         return DecorationSet.create(state.doc, [
           Decoration.inline(range.from, range.to, {
-            nodeName: 'span',
+            nodeName: decorationTag,
-            class: suggestionClass,
+            class: decorationClass,
             'data-decoration-id': decorationId,
           }),
         ])