demos: move suggestion to its own file

demos/src/Examples/Community/React/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import tippy from 'tippy.js'
-import { useEditor, EditorContent, ReactRenderer } from '@tiptap/react'
+import { useEditor, EditorContent } from '@tiptap/react'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CharacterCount from '@tiptap/extension-character-count'
 import Mention from '@tiptap/extension-mention'
-import { MentionList } from './MentionList'
+import suggestion from './suggestion'
 import './styles.scss'
 
 export default () => {
@@ -24,56 +23,7 @@ export default () => {
         HTMLAttributes: {
           class: 'mention',
         },
-        suggestion: {
-          items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
-          },
-          render: () => {
-            let reactRenderer
-            let popup
-
-            return {
-              onStart: props => {
-                reactRenderer = new ReactRenderer(MentionList, {
-                  props,
-                  editor: props.editor,
-                })
-
-                popup = tippy('body', {
-                  getReferenceClientRect: props.clientRect,
-                  appendTo: () => document.body,
-                  content: reactRenderer.element,
-                  showOnCreate: true,
-                  interactive: true,
-                  trigger: 'manual',
-                  placement: 'bottom-start',
-                })
-              },
-              onUpdate(props) {
-                reactRenderer.updateProps(props)
-
-                popup[0].setProps({
-                  getReferenceClientRect: props.clientRect,
-                })
-              },
-              onKeyDown(props) {
-                if (props.event.key === 'Escape') {
-                  popup[0].hide()
-
-                  return true
-                }
-
-                return reactRenderer.ref?.onKeyDown(props)
-              },
-              onExit() {
-                popup[0].destroy()
-                reactRenderer.destroy()
-              },
-            }
-          },
-        },
+        suggestion,
       }),
     ],
     content: `

demos/src/Examples/Community/React/suggestion.js

@@ -0,0 +1,54 @@
+import { ReactRenderer } from '@tiptap/react'
+import tippy from 'tippy.js'
+import { MentionList } from './MentionList'
+
+export default {
+  items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+  },
+  render: () => {
+    let reactRenderer
+    let popup
+
+    return {
+      onStart: props => {
+        reactRenderer = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor,
+        })
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: reactRenderer.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+      onUpdate(props) {
+        reactRenderer.updateProps(props)
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        })
+      },
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+
+          return true
+        }
+
+        return reactRenderer.ref?.onKeyDown(props)
+      },
+      onExit() {
+        popup[0].destroy()
+        reactRenderer.destroy()
+      },
+    }
+  },
+}

demos/src/Examples/Community/Vue/index.vue

@@ -41,14 +41,13 @@
 </template>
 
 <script>
-import tippy from 'tippy.js'
-import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CharacterCount from '@tiptap/extension-character-count'
 import Mention from '@tiptap/extension-mention'
-import MentionList from './MentionList.vue'
+import suggestion from './suggestion'
 
 export default {
   components: {
@@ -75,59 +74,7 @@ export default {
           HTMLAttributes: {
             class: 'mention',
           },
-          suggestion: {
-            items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
-            },
-            render: () => {
-              let component
-              let popup
-
-              return {
-                onStart: props => {
-                  component = new VueRenderer(MentionList, {
-                    // using vue 2:
-                    // parent: this,
-                    // propsData: props,
-                    props,
-                    editor: props.editor,
-                  })
-
-                  popup = tippy('body', {
-                    getReferenceClientRect: props.clientRect,
-                    appendTo: () => document.body,
-                    content: component.element,
-                    showOnCreate: true,
-                    interactive: true,
-                    trigger: 'manual',
-                    placement: 'bottom-start',
-                  })
-                },
-                onUpdate(props) {
-                  component.updateProps(props)
-
-                  popup[0].setProps({
-                    getReferenceClientRect: props.clientRect,
-                  })
-                },
-                onKeyDown(props) {
-                  if (props.event.key === 'Escape') {
-                    popup[0].hide()
-
-                    return true
-                  }
-
-                  return component.ref?.onKeyDown(props)
-                },
-                onExit() {
-                  popup[0].destroy()
-                  component.destroy()
-                },
-              }
-            },
-          },
+          suggestion,
         }),
       ],
       content: `

demos/src/Examples/Community/Vue/suggestion.js

@@ -0,0 +1,57 @@
+import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
+import MentionList from './MentionList.vue'
+
+export default {
+  items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+  },
+  render: () => {
+    let component
+    let popup
+
+    return {
+      onStart: props => {
+        component = new VueRenderer(MentionList, {
+          // using vue 2:
+          // parent: this,
+          // propsData: props,
+          props,
+          editor: props.editor,
+        })
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+      onUpdate(props) {
+        component.updateProps(props)
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        })
+      },
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      },
+    }
+  },
+}

demos/src/Experiments/Commands/Vue/index.vue

@@ -5,11 +5,10 @@
 </template>
 
 <script>
-import tippy from 'tippy.js'
-import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Commands from './commands'
-import CommandsList from './CommandsList.vue'
+import suggestion from './suggestion'
 
 export default {
   components: {
@@ -27,102 +26,7 @@ export default {
       extensions: [
         StarterKit,
         Commands.configure({
-          suggestion: {
-            items: query => {
-              return [
-                {
-                  title: 'H1',
-                  command: ({ editor, range }) => {
-                    editor
-                      .chain()
-                      .focus()
-                      .deleteRange(range)
-                      .setNode('heading', { level: 1 })
-                      .run()
-                  },
-                },
-                {
-                  title: 'H2',
-                  command: ({ editor, range }) => {
-                    editor
-                      .chain()
-                      .focus()
-                      .deleteRange(range)
-                      .setNode('heading', { level: 2 })
-                      .run()
-                  },
-                },
-                {
-                  title: 'bold',
-                  command: ({ editor, range }) => {
-                    editor
-                      .chain()
-                      .focus()
-                      .deleteRange(range)
-                      .setMark('bold')
-                      .run()
-                  },
-                },
-                {
-                  title: 'italic',
-                  command: ({ editor, range }) => {
-                    editor
-                      .chain()
-                      .focus()
-                      .deleteRange(range)
-                      .setMark('italic')
-                      .run()
-                  },
-                },
-              ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
-            },
-            render: () => {
-              let component
-              let popup
-
-              return {
-                onStart: props => {
-                  component = new VueRenderer(CommandsList, {
-                    // using vue 2:
-                    // parent: this,
-                    // propsData: props,
-                    props,
-                    editor: props.editor,
-                  })
-
-                  popup = tippy('body', {
-                    getReferenceClientRect: props.clientRect,
-                    appendTo: () => document.body,
-                    content: component.element,
-                    showOnCreate: true,
-                    interactive: true,
-                    trigger: 'manual',
-                    placement: 'bottom-start',
-                  })
-                },
-                onUpdate(props) {
-                  component.updateProps(props)
-
-                  popup[0].setProps({
-                    getReferenceClientRect: props.clientRect,
-                  })
-                },
-                onKeyDown(props) {
-                  if (props.event.key === 'Escape') {
-                    popup[0].hide()
-
-                    return true
-                  }
-
-                  return component.ref?.onKeyDown(props)
-                },
-                onExit() {
-                  popup[0].destroy()
-                  component.destroy()
-                },
-              }
-            },
-          },
+          suggestion,
         }),
       ],
       content: `

demos/src/Experiments/Commands/Vue/suggestion.js

@@ -0,0 +1,100 @@
+import tippy from 'tippy.js'
+import { VueRenderer } from '@tiptap/vue-3'
+import CommandsList from './CommandsList.vue'
+
+export default {
+  items: query => {
+    return [
+      {
+        title: 'H1',
+        command: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .setNode('heading', { level: 1 })
+            .run()
+        },
+      },
+      {
+        title: 'H2',
+        command: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .setNode('heading', { level: 2 })
+            .run()
+        },
+      },
+      {
+        title: 'bold',
+        command: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .setMark('bold')
+            .run()
+        },
+      },
+      {
+        title: 'italic',
+        command: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .setMark('italic')
+            .run()
+        },
+      },
+    ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
+  },
+  render: () => {
+    let component
+    let popup
+
+    return {
+      onStart: props => {
+        component = new VueRenderer(CommandsList, {
+          // using vue 2:
+          // parent: this,
+          // propsData: props,
+          props,
+          editor: props.editor,
+        })
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+      onUpdate(props) {
+        component.updateProps(props)
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        })
+      },
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      },
+    }
+  },
+}

demos/src/Nodes/Mention/Vue/index.vue

@@ -5,13 +5,12 @@
 </template>
 
 <script>
-import tippy from 'tippy.js'
-import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Mention from '@tiptap/extension-mention'
-import MentionList from './MentionList.vue'
+import suggestion from './suggestion'
 
 export default {
   components: {
@@ -34,59 +33,7 @@ export default {
           HTMLAttributes: {
             class: 'mention',
           },
-          suggestion: {
-            items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
-            },
-            render: () => {
-              let component
-              let popup
-
-              return {
-                onStart: props => {
-                  component = new VueRenderer(MentionList, {
-                    // using vue 2:
-                    // parent: this,
-                    // propsData: props,
-                    props,
-                    editor: props.editor,
-                  })
-
-                  popup = tippy('body', {
-                    getReferenceClientRect: props.clientRect,
-                    appendTo: () => document.body,
-                    content: component.element,
-                    showOnCreate: true,
-                    interactive: true,
-                    trigger: 'manual',
-                    placement: 'bottom-start',
-                  })
-                },
-                onUpdate(props) {
-                  component.updateProps(props)
-
-                  popup[0].setProps({
-                    getReferenceClientRect: props.clientRect,
-                  })
-                },
-                onKeyDown(props) {
-                  if (props.event.key === 'Escape') {
-                    popup[0].hide()
-
-                    return true
-                  }
-
-                  return component.ref?.onKeyDown(props)
-                },
-                onExit() {
-                  popup[0].destroy()
-                  component.destroy()
-                },
-              }
-            },
-          },
+          suggestion,
         }),
       ],
       content: `

demos/src/Nodes/Mention/Vue/suggestion.js

@@ -0,0 +1,57 @@
+import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
+import MentionList from './MentionList.vue'
+
+export default {
+  items: 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.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+  },
+  render: () => {
+    let component
+    let popup
+
+    return {
+      onStart: props => {
+        component = new VueRenderer(MentionList, {
+          // using vue 2:
+          // parent: this,
+          // propsData: props,
+          props,
+          editor: props.editor,
+        })
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+      onUpdate(props) {
+        component.updateProps(props)
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        })
+      },
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      },
+    }
+  },
+}