From 7d3b1ea3cccebb3ee5dac5ced5378e87778ce48f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Apr 2019 00:05:39 +0200
Subject: [PATCH] Copy+paste from tiptap example

See https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/Suggestions/index.vue
---
 webapp/components/Editor/Editor.vue | 251 +++++++++++++++++++++++++++-
 webapp/package.json                 |   2 +
 webapp/yarn.lock                    |  30 +++-
 3 files changed, 278 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index b59ca376d..2dc0fb899 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -1,5 +1,29 @@
 <template>
   <div class="editor">
+    <div
+      v-show="showSuggestions"
+      ref="suggestions"
+      class="suggestion-list"
+    >
+      <template v-if="hasResults">
+        <div
+          v-for="(user, index) in filteredUsers"
+          :key="user.id"
+          class="suggestion-list__item"
+          :class="{ 'is-selected': navigatedUserIndex === index }"
+          @click="selectUser(user)"
+        >
+          {{ user.name }}
+        </div>
+      </template>
+      <div
+        v-else
+        class="suggestion-list__item is-empty"
+      >
+        No users found
+      </div>
+    </div>
+
     <editor-menu-bubble :editor="editor">
       <div
         ref="menu"
@@ -137,6 +161,8 @@
 <script>
 import linkify from 'linkify-it'
 import stringHash from 'string-hash'
+import Fuse from 'fuse.js'
+import tippy from 'tippy.js'
 import {
   Editor,
   EditorContent,
@@ -158,7 +184,8 @@ import {
   Strike,
   Underline,
   Link,
-  History
+  History,
+  Mention
 } from 'tiptap-extensions'
 
 let throttleInputEvent
@@ -198,7 +225,75 @@ export default {
             emptyNodeClass: 'is-empty',
             emptyNodeText: 'Schreib etwas inspirerendes…'
           }),
-          new History()
+          new History(),
+          new Mention({
+            items: () => [
+              { id: 1, name: 'Philipp Kühn' },
+              { id: 2, name: 'Hans Pagel' },
+              { id: 3, name: 'Kris Siepert' },
+              { id: 4, name: 'Justin Schueler' }
+            ],
+            onEnter: ({ items, query, range, command, virtualNode }) => {
+              this.query = query
+              this.filteredUsers = items
+              this.suggestionRange = range
+              this.renderPopup(virtualNode)
+              // we save the command for inserting a selected mention
+              // this allows us to call it inside of our custom popup
+              // via keyboard navigation and on click
+              this.insertMention = command
+            },
+            // is called when a suggestion has changed
+            onChange: ({ items, query, range, virtualNode }) => {
+              this.query = query
+              this.filteredUsers = items
+              this.suggestionRange = range
+              this.navigatedUserIndex = 0
+              this.renderPopup(virtualNode)
+            },
+            // is called when a suggestion is cancelled
+            onExit: () => {
+              // reset all saved values
+              this.query = null
+              this.filteredUsers = []
+              this.suggestionRange = null
+              this.navigatedUserIndex = 0
+              this.destroyPopup()
+            },
+            // is called on every keyDown event while a suggestion is active
+            onKeyDown: ({ event }) => {
+              // pressing up arrow
+              if (event.keyCode === 38) {
+                this.upHandler()
+                return true
+              }
+              // pressing down arrow
+              if (event.keyCode === 40) {
+                this.downHandler()
+                return true
+              }
+              // pressing enter
+              if (event.keyCode === 13) {
+                this.enterHandler()
+                return true
+              }
+              return false
+            },
+            // is called when a suggestion has changed
+            // 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) => {
+              if (!query) {
+                return items
+              }
+              const fuse = new Fuse(items, {
+                threshold: 0.2,
+                keys: ['name']
+              })
+              return fuse.search(query)
+            }
+          })
         ],
         onUpdate: e => {
           clearTimeout(throttleInputEvent)
@@ -206,7 +301,21 @@ export default {
         }
       }),
       linkUrl: null,
-      linkMenuIsActive: false
+      linkMenuIsActive: false,
+      query: null,
+      suggestionRange: null,
+      filteredUsers: [],
+      navigatedUserIndex: 0,
+      insertMention: () => {},
+      observer: null
+    }
+  },
+  computed: {
+    hasResults() {
+      return this.filteredUsers.length
+    },
+    showSuggestions() {
+      return this.query || this.hasResults
     }
   },
   watch: {
@@ -226,6 +335,76 @@ export default {
     this.editor.destroy()
   },
   methods: {
+    // navigate to the previous item
+    // if it's the first item, navigate to the last one
+    upHandler() {
+      this.navigatedUserIndex =
+        (this.navigatedUserIndex + this.filteredUsers.length - 1) %
+        this.filteredUsers.length
+    },
+    // navigate to the next item
+    // if it's the last item, navigate to the first one
+    downHandler() {
+      this.navigatedUserIndex =
+        (this.navigatedUserIndex + 1) % this.filteredUsers.length
+    },
+    enterHandler() {
+      const user = this.filteredUsers[this.navigatedUserIndex]
+      if (user) {
+        this.selectUser(user)
+      }
+    },
+    // we have to replace our suggestion text with a mention
+    // so it's important to pass also the position of your suggestion text
+    selectUser(user) {
+      this.insertMention({
+        range: this.suggestionRange,
+        attrs: {
+          id: user.id,
+          label: user.name
+        }
+      })
+      this.editor.focus()
+    },
+    // renders a popup with suggestions
+    // tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
+    renderPopup(node) {
+      if (this.popup) {
+        return
+      }
+      this.popup = tippy(node, {
+        content: this.$refs.suggestions,
+        trigger: 'mouseenter',
+        interactive: true,
+        theme: 'dark',
+        placement: 'top-start',
+        inertia: true,
+        duration: [400, 200],
+        showOnInit: true,
+        arrow: true,
+        arrowType: 'round'
+      })
+      // we have to update tippy whenever the DOM is updated
+      if (MutationObserver) {
+        this.observer = new MutationObserver(() => {
+          this.popup.popperInstance.scheduleUpdate()
+        })
+        this.observer.observe(this.$refs.suggestions, {
+          childList: true,
+          subtree: true,
+          characterData: true
+        })
+      }
+    },
+    destroyPopup() {
+      if (this.popup) {
+        this.popup.destroy()
+        this.popup = null
+      }
+      if (this.observer) {
+        this.observer.disconnect()
+      }
+    },
     onUpdate(e) {
       const content = e.getHTML()
       const contentHash = stringHash(content)
@@ -273,6 +452,60 @@ export default {
 </script>
 
 <style lang="scss">
+.suggestion-list {
+  padding: 0.2rem;
+  border: 2px solid rgba($color-neutral-0, 0.1);
+  font-size: 0.8rem;
+  font-weight: bold;
+  &__no-results {
+    padding: 0.2rem 0.5rem;
+  }
+  &__item {
+    border-radius: 5px;
+    padding: 0.2rem 0.5rem;
+    margin-bottom: 0.2rem;
+    cursor: pointer;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &.is-selected,
+    &:hover {
+      background-color: rgba($color-neutral-100, 0.2);
+    }
+    &.is-empty {
+      opacity: 0.5;
+    }
+  }
+}
+
+.tippy-tooltip.dark-theme {
+  background-color: $color-neutral-0;
+  padding: 0;
+  font-size: 1rem;
+  text-align: inherit;
+  color: $color-neutral-100;
+  border-radius: 5px;
+  .tippy-backdrop {
+    display: none;
+  }
+
+  .tippy-roundarrow {
+    fill: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='top'] & .tippy-arrow {
+    border-top-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='bottom'] & .tippy-arrow {
+    border-bottom-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='left'] & .tippy-arrow {
+    border-left-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='right'] & .tippy-arrow {
+    border-right-color: $color-neutral-0;
+  }
+}
+
 .ProseMirror {
   padding: $space-base;
   margin: -$space-base;
@@ -302,6 +535,18 @@ li > p {
 }
 
 .editor {
+  .mention {
+    background: rgba($color-neutral-0, 0.1);
+    color: rgba($color-neutral-0, 0.6);
+    font-size: 0.8rem;
+    font-weight: bold;
+    border-radius: 5px;
+    padding: 0.2rem 0.5rem;
+    white-space: nowrap;
+  }
+  .mention-suggestion {
+    color: rgba($color-neutral-0, 0.6);
+  }
   &__floating-menu {
     position: absolute;
     margin-top: -0.25rem;
diff --git a/webapp/package.json b/webapp/package.json
index 3033970b0..3f3c6f8ef 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -74,11 +74,13 @@
     "eslint-loader": "~2.1.2",
     "eslint-plugin-prettier": "~3.0.1",
     "eslint-plugin-vue": "~5.2.2",
+    "fuse.js": "^3.4.4",
     "jest": "~24.7.1",
     "node-sass": "~4.11.0",
     "nodemon": "~1.18.11",
     "prettier": "~1.14.3",
     "sass-loader": "~7.1.0",
+    "tippy.js": "^4.2.1",
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 36b048d53..28e0b4588 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1381,6 +1381,11 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
 "@types/strip-bom@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
@@ -4872,6 +4877,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.4.tgz#f98f55fcb3b595cf6a3e629c5ffaf10982103e95"
+  integrity sha512-pyLQo/1oR5Ywf+a/tY8z4JygnIglmRxVUOiyFAbd11o9keUDpUJSMGRWJngcnkURj30kDHPmhoKY8ChJiz3EpQ==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -6164,6 +6174,15 @@ jest-message-util@^24.7.1:
   version "24.7.1"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.7.1.tgz#f1dc3a6c195647096a99d0f1dadbc447ae547018"
   integrity sha512-dk0gqVtyqezCHbcbk60CdIf+8UHgD+lmRHifeH3JRcnAqh4nEyPytSc9/L1+cQyxC+ceaeP696N4ATe7L+omcg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.7.1"
+    "@jest/types" "^24.7.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
 
 jest-mock@^24.7.0:
   version "24.7.0"
@@ -7997,7 +8016,7 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.15.0:
+popper.js@^1.14.7, popper.js@^1.15.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
   integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
@@ -9865,7 +9884,7 @@ stack-trace@0.0.10:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
   integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
 
-stack-utils@^1.0.2:
+stack-utils@^1.0.1, stack-utils@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
@@ -10330,6 +10349,13 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.2.1.tgz#9e4939d976465f77229b05a3cb233b5dc28cf850"
+  integrity sha512-xEE7zYNgQxCDdPcuT6T04f0frPh0wO7CcIqJKMFazU/NqusyjCgYSkLRosIHoiRkZMRzSPOudC8wRN5GjvAyOQ==
+  dependencies:
+    popper.js "^1.14.7"
+
 tiptap-commands@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.7.0.tgz#d15cec2cb09264b5c1f6f712dab8819bb9ab7e13"