demos: move suggestion to its own file

2021-10-13 14:53:40 +02:00
parent b7c492c213
commit f9059a372f
8 changed files with 280 additions and 264 deletions
--- a/demos/src/Experiments/Commands/Vue/suggestion.js
+++ b/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()
+      },
+    }
+  },
+}