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,10 +1,9 @@
-;(function(window, document) {
+'use strict';
-  'use strict';
 
-  var isSvg = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect;
+var isSvg = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect;
-  var localStorage = 'localStorage' in window && window['localStorage'] !== null ? window.localStorage : false;
+var localStorage = 'localStorage' in window && window['localStorage'] !== null ? window.localStorage : false;
 
-  function svgSpriteInjector(source, opts) {
+function svgSpriteInjector(source, opts) {
   var file;
   opts = opts || {};
 
@@ -24,9 +23,9 @@
   } else {
     console.error('svg-sprite-injector require ie9 or greater!');
   }
-  };
+};
 
-  function injector(filepath, opts) {
+function injector(filepath, opts) {
   var name = 'injectedSVGSprite' + filepath,
     revision = opts.revision,
     request;
@@ -51,9 +50,9 @@
     }
   };
   request.send();
-  }
+}
 
-  function injectOnLoad(data) {
+function injectOnLoad(data) {
   if (data) {
     if (document.body) {
       injectData(data);
@@ -61,20 +60,14 @@
       document.addEventListener('DOMContentLoaded', injectData.bind(null, data));
     }
   }
-  }
+}
 
-  function injectData(data) {
+function injectData(data) {
   var body = document.body;
   body.insertAdjacentHTML('afterbegin', data);
   if (body.firstChild.tagName === 'svg') {
     body.firstChild.style.display = 'none';
   }
-  }
+}
 
-  if (typeof exports === 'object') {
+export default svgSpriteInjector;
-    module.exports = svgSpriteInjector;
-  } else {
-    window.svgSpriteInjector = svgSpriteInjector;
-  }
-
-} (window, document));

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,