Merge pull request #757 from Chrissi2812/async-suggestions

Async suggestions

babel.config.js

@@ -6,5 +6,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-transform-runtime',
   ],
 }

examples/Components/Routes/Suggestions/index.vue

@@ -63,7 +63,11 @@ export default {
           new Heading({ levels: [1, 2, 3] }),
           new Mention({
             // a list of all suggested items
-            items: () => [
+            items: async () => {
+              await new Promise(resolve => {
+                setTimeout(resolve, 500)
+              })
+              return [
                 { id: 1, name: 'Sven Adlung' },
                 { id: 2, name: 'Patrick Baber' },
                 { id: 3, name: 'Nick Hirche' },
@@ -72,7 +76,8 @@ export default {
                 { id: 6, name: 'Philipp Kühn' },
                 { id: 7, name: 'Hans Pagel' },
                 { id: 8, name: 'Sebastian Schrama' },
-            ],
+              ]
+            },
             // is called when a suggestion starts
             onEnter: ({
               items, query, range, command, virtualNode,
@@ -128,11 +133,15 @@ export default {
             // this function is optional because there is basic filtering built-in
             // you can overwrite it if you prefer your own filtering
             // in this example we use fuse.js with support for fuzzy search
-            onFilter: (items, query) => {
+            onFilter: async (items, query) => {
               if (!query) {
                 return items
               }
 
+              await new Promise(resolve => {
+                setTimeout(resolve, 500)
+              })
+
               const fuse = new Fuse(items, {
                 threshold: 0.2,
                 keys: ['name'],

examples/helpers/svg-sprite-loader.js

@@ -1,4 +1,3 @@
-;(function(window, document) {
 'use strict';
 
 var isSvg = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect;
@@ -71,10 +70,4 @@
   }
 }
 
-  if (typeof exports === 'object') {
-    module.exports = svgSpriteInjector;
-  } else {
-    window.svgSpriteInjector = svgSpriteInjector;
-  }
-
-} (window, document));
+export default svgSpriteInjector;

packages/tiptap-extensions/src/plugins/Suggestions.js

@@ -95,7 +95,7 @@ export default function SuggestionsPlugin({
 
     view() {
       return {
-        update: (view, prevState) => {
+        update: async (view, prevState) => {
           const prev = this.key.getState(prevState)
           const next = this.key.getState(view.state)
 
@@ -133,7 +133,9 @@ export default function SuggestionsPlugin({
             text: state.text,
             decorationNode,
             virtualNode,
-            items: onFilter(Array.isArray(items) ? items : items(), state.query),
+            items: (handleChange || handleStart)
+              ? await onFilter(Array.isArray(items) ? items : await items(), state.query)
+              : [],
             command: ({ range, attrs }) => {
               command({
                 range,