From 6c6628fdb59ebddd1f87e6c197cecbd3f1786afd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Apr 2019 22:45:23 +0200
Subject: [PATCH 01/17] Get rid of annoying lint error screen

@appinteractive we have `yarn run lint` on our build server. I would say
this is enough to enforce linting. I get slowed down a little during
development. Instead of runing `yarn run lint --fix` every time I save, I
would like to `yarn run lint --fix` all in one before I commit.
---
 webapp/nuxt.config.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 6cac26ea1..9d0ae0fc3 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -196,15 +196,6 @@ module.exports = {
     ** You can extend webpack config here
     */
     extend(config, ctx) {
-      // Run ESLint on save
-      if (ctx.isDev && ctx.isClient) {
-        config.module.rules.push({
-          enforce: 'pre',
-          test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /(node_modules)/
-        })
-      }
       if (process.env.STYLEGUIDE_DEV) {
         const path = require('path')
         config.resolve.alias['@@'] = path.resolve(

From 11d217fa6b3aa93c930d95ee2910bdc335453bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Apr 2019 20:27:32 +0200
Subject: [PATCH 02/17] Scaffold test for `Editor.vue`

---
 webapp/components/Editor/Editor.spec.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 webapp/components/Editor/Editor.spec.js

diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js
new file mode 100644
index 000000000..19c50e1e3
--- /dev/null
+++ b/webapp/components/Editor/Editor.spec.js
@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils'
+import Editor from './Editor.vue'
+
+describe('Editor.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(Editor, {})
+  })
+
+  it('renders', () => {
+    expect(wrapper.is('div')).toBe(true)
+  })
+})

From e94e81ea2d39a99b1f3ad5d892732c55b6060cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Apr 2019 23:55:09 +0200
Subject: [PATCH 03/17] Convenience: Run seeds from root folder

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b22dd158c..703997ee1 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "nonGlobalStepDefinitions": true
   },
   "scripts": {
+    "db:seed": "cd backend && yarn run db:seed",
+    "db:reset": "cd backend && yarn run db:reset",
     "cypress:backend:server": "cd backend && yarn run test:before:server",
     "cypress:backend:seeder": "cd backend && yarn run test:before:seeder",
     "cypress:webapp": "cd webapp && cross-env GRAPHQL_URI=http://localhost:4123 yarn run dev",
@@ -25,4 +27,4 @@
     "neo4j-driver": "^1.7.3",
     "npm-run-all": "^4.1.5"
   }
-}
\ No newline at end of file
+}

From 2529c621371a7db79af02e09ebcec7ca4aac32cd 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 04/17] 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"

From f760f3718640977745ae235d642b20f0396c961a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Apr 2019 00:58:35 +0200
Subject: [PATCH 05/17] Pass entire user collection to Editor

---
 webapp/components/ContributionForm.vue | 17 +++++++++++++++++
 webapp/components/Editor/Editor.vue    | 10 ++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/webapp/components/ContributionForm.vue b/webapp/components/ContributionForm.vue
index 3ef041569..a859fd0fb 100644
--- a/webapp/components/ContributionForm.vue
+++ b/webapp/components/ContributionForm.vue
@@ -16,6 +16,7 @@
         />
         <no-ssr>
           <hc-editor
+            :users="users"
             :value="form.content"
             @input="updateEditorContent"
           />
@@ -125,6 +126,22 @@ export default {
       // this.form.content = value
       this.$refs.contributionForm.update('content', value)
     }
+  },
+  apollo: {
+    User: {
+      query() {
+        return gql(`{
+          User {
+            id
+            name
+            slug
+          }
+        }`)
+      },
+      result(result) {
+        this.users = result.data.User
+      }
+    }
   }
 }
 </script>
diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 2dc0fb899..7bf697363 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -197,6 +197,7 @@ export default {
     EditorMenuBubble
   },
   props: {
+    users: { type: Array, default: () => [] },
     value: { type: String, default: '' },
     doc: { type: Object, default: () => {} }
   },
@@ -227,12 +228,9 @@ export default {
           }),
           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' }
-            ],
+            items: () => {
+              return this.users
+            },
             onEnter: ({ items, query, range, command, virtualNode }) => {
               this.query = query
               this.filteredUsers = items

From b70e5be8b145f4a50ccf4a72f5563f64354ff318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 11 Apr 2019 12:46:50 +0200
Subject: [PATCH 06/17] Follow file naming convention

All components should consist of a folder with these three files:
```
README.d
index.vue
spec.js
```

When you import components, omit the `index.vue`. That helps to `git
grep` for component names.
---
 webapp/components/ContributionForm.vue        |  2 +-
 webapp/components/Editor/Editor.spec.js       | 14 ------
 .../Editor/{Editor.vue => index.vue}          |  0
 webapp/components/Editor/spec.js              | 44 +++++++++++++++++++
 4 files changed, 45 insertions(+), 15 deletions(-)
 delete mode 100644 webapp/components/Editor/Editor.spec.js
 rename webapp/components/Editor/{Editor.vue => index.vue} (100%)
 create mode 100644 webapp/components/Editor/spec.js

diff --git a/webapp/components/ContributionForm.vue b/webapp/components/ContributionForm.vue
index a859fd0fb..8ef232af4 100644
--- a/webapp/components/ContributionForm.vue
+++ b/webapp/components/ContributionForm.vue
@@ -49,7 +49,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcEditor from '~/components/Editor/Editor.vue'
+import HcEditor from '~/components/Editor'
 
 export default {
   components: {
diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js
deleted file mode 100644
index 19c50e1e3..000000000
--- a/webapp/components/Editor/Editor.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import Editor from './Editor.vue'
-
-describe('Editor.vue', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallowMount(Editor, {})
-  })
-
-  it('renders', () => {
-    expect(wrapper.is('div')).toBe(true)
-  })
-})
diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/index.vue
similarity index 100%
rename from webapp/components/Editor/Editor.vue
rename to webapp/components/Editor/index.vue
diff --git a/webapp/components/Editor/spec.js b/webapp/components/Editor/spec.js
new file mode 100644
index 000000000..d6659ef04
--- /dev/null
+++ b/webapp/components/Editor/spec.js
@@ -0,0 +1,44 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Editor from './'
+
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+describe('Editor.vue', () => {
+  let wrapper
+  let propsData
+
+  beforeEach(() => {
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    let Wrapper = () => {
+      return (wrapper = mount(Editor, {
+        propsData,
+        localVue,
+        sync: false,
+        stubs: { transition: false }
+      }))
+    }
+
+    it('renders', () => {
+      expect(Wrapper().is('div')).toBe(true)
+    })
+
+    describe('given a piece of text', () => {
+      beforeEach(() => {
+        propsData.value = 'I am a piece of text'
+      })
+
+      it.skip('renders', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('.ProseMirror').text()).toContain(
+          'I am a piece of text'
+        )
+      })
+    })
+  })
+})

From d87a0d5694e24904468dd612c26a29ac46e49f43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 15 Apr 2019 22:10:55 +0200
Subject: [PATCH 07/17] Customize Mention node based on Superclass

---
 webapp/components/ContributionForm.vue    |  3 ++-
 webapp/components/Editor/index.vue        | 16 ++++-----------
 webapp/components/Editor/nodes/Mention.js | 25 +++++++++++++++++++++++
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 webapp/components/Editor/nodes/Mention.js

diff --git a/webapp/components/ContributionForm.vue b/webapp/components/ContributionForm.vue
index 8ef232af4..c91290796 100644
--- a/webapp/components/ContributionForm.vue
+++ b/webapp/components/ContributionForm.vue
@@ -71,7 +71,8 @@ export default {
       id: null,
       loading: false,
       disabled: false,
-      slug: null
+      slug: null,
+      users: []
     }
   },
   watch: {
diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index 7bf697363..84306736d 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -185,8 +185,8 @@ import {
   Underline,
   Link,
   History,
-  Mention
 } from 'tiptap-extensions'
+import Mention from './nodes/Mention.js'
 
 let throttleInputEvent
 
@@ -358,7 +358,8 @@ export default {
       this.insertMention({
         range: this.suggestionRange,
         attrs: {
-          id: user.id,
+          // TODO: use router here
+          url: `/profile/${user.id}`,
           label: user.name
         }
       })
@@ -533,17 +534,8 @@ 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);
+    color: $color-primary
   }
   &__floating-menu {
     position: absolute;
diff --git a/webapp/components/Editor/nodes/Mention.js b/webapp/components/Editor/nodes/Mention.js
new file mode 100644
index 000000000..1f459df76
--- /dev/null
+++ b/webapp/components/Editor/nodes/Mention.js
@@ -0,0 +1,25 @@
+import { Node } from 'tiptap'
+import { replaceText } from 'tiptap-commands'
+import { Mention as TipTapMention } from 'tiptap-extensions'
+
+export default class Mention extends TipTapMention {
+  get schema() {
+    const schema = super.schema
+    schema.attrs = {
+      url: {},
+      label: {},
+    },
+    schema.toDOM = node => [
+      'a',
+      {
+        class: this.options.mentionClass,
+        href: node.attrs.url,
+      },
+      `${this.options.matcher.char}${node.attrs.label}`
+    ]
+    schema.parseDOM = [
+      // this is not implemented
+    ]
+    return schema
+  }
+}

From b21df879c68229ca448f04f5c36ca5937bda2870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 01:05:51 +0200
Subject: [PATCH 08/17] Fix lint

---
 webapp/components/Editor/index.vue        |  4 +--
 webapp/components/Editor/nodes/Mention.js | 31 +++++++++++++----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index 84306736d..270c20840 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -184,7 +184,7 @@ import {
   Strike,
   Underline,
   Link,
-  History,
+  History
 } from 'tiptap-extensions'
 import Mention from './nodes/Mention.js'
 
@@ -535,7 +535,7 @@ li > p {
 
 .editor {
   .mention-suggestion {
-    color: $color-primary
+    color: $color-primary;
   }
   &__floating-menu {
     position: absolute;
diff --git a/webapp/components/Editor/nodes/Mention.js b/webapp/components/Editor/nodes/Mention.js
index 1f459df76..f86f20bd9 100644
--- a/webapp/components/Editor/nodes/Mention.js
+++ b/webapp/components/Editor/nodes/Mention.js
@@ -4,22 +4,25 @@ import { Mention as TipTapMention } from 'tiptap-extensions'
 
 export default class Mention extends TipTapMention {
   get schema() {
-    const schema = super.schema
-    schema.attrs = {
+    const patchedSchema = super.schema
+
+    patchedSchema.attrs = {
       url: {},
-      label: {},
-    },
-    schema.toDOM = node => [
-      'a',
-      {
-        class: this.options.mentionClass,
-        href: node.attrs.url,
-      },
-      `${this.options.matcher.char}${node.attrs.label}`
-    ]
-    schema.parseDOM = [
+      label: {}
+    }
+    patchedSchema.toDOM = node => {
+      return [
+        'a',
+        {
+          class: this.options.mentionClass,
+          href: node.attrs.url
+        },
+        `${this.options.matcher.char}${node.attrs.label}`
+      ]
+    }
+    patchedSchema.parseDOM = [
       // this is not implemented
     ]
-    return schema
+    return patchedSchema
   }
 }

From 4efb8345998940ba0f4735fcc302aa2fc5e2b1b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 01:08:33 +0200
Subject: [PATCH 09/17] Move ContributionForm in dedicated folder

---
 .../{ContributionForm.vue => ContributionForm/index.vue}        | 0
 webapp/pages/post/create.vue                                    | 2 +-
 webapp/pages/post/edit/_id.vue                                  | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename webapp/components/{ContributionForm.vue => ContributionForm/index.vue} (100%)

diff --git a/webapp/components/ContributionForm.vue b/webapp/components/ContributionForm/index.vue
similarity index 100%
rename from webapp/components/ContributionForm.vue
rename to webapp/components/ContributionForm/index.vue
diff --git a/webapp/pages/post/create.vue b/webapp/pages/post/create.vue
index 72cf65174..fd8b493d3 100644
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@@ -14,7 +14,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcContributionForm from '~/components/ContributionForm.vue'
+import HcContributionForm from '~/components/ContributionForm'
 
 export default {
   components: {
diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index 5f6a3b271..cb61e2b40 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -14,7 +14,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcContributionForm from '~/components/ContributionForm.vue'
+import HcContributionForm from '~/components/ContributionForm'
 
 export default {
   components: {

From 7492e6b8c3ccdd53832efa2f43ab834cdf21c5ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 01:10:05 +0200
Subject: [PATCH 10/17] Order users by name

---
 webapp/components/ContributionForm/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index c91290796..231c94d8d 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -132,7 +132,7 @@ export default {
     User: {
       query() {
         return gql(`{
-          User {
+          User(orderBy: name_asc) {
             id
             name
             slug

From f5cf3d9b684984096f8b720a5db60b952e33537f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 01:16:31 +0200
Subject: [PATCH 11/17] Use slugs instead of names for mentions

---
 webapp/components/ContributionForm/index.vue | 3 +--
 webapp/components/Editor/index.vue           | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index 231c94d8d..6dc74f104 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -132,9 +132,8 @@ export default {
     User: {
       query() {
         return gql(`{
-          User(orderBy: name_asc) {
+          User(orderBy: slug_asc) {
             id
-            name
             slug
           }
         }`)
diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index 270c20840..5636c3714 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -13,7 +13,7 @@
           :class="{ 'is-selected': navigatedUserIndex === index }"
           @click="selectUser(user)"
         >
-          {{ user.name }}
+          @{{ user.slug }}
         </div>
       </template>
       <div
@@ -287,7 +287,7 @@ export default {
               }
               const fuse = new Fuse(items, {
                 threshold: 0.2,
-                keys: ['name']
+                keys: ['slug']
               })
               return fuse.search(query)
             }
@@ -360,7 +360,7 @@ export default {
         attrs: {
           // TODO: use router here
           url: `/profile/${user.id}`,
-          label: user.name
+          label: user.slug
         }
       })
       this.editor.focus()

From 23a461d16ea0b0dbd7a2f3784b87e51153bc6de9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 11:13:40 +0200
Subject: [PATCH 12/17] Follow component directory strucutre in backend

---
 backend/src/middleware/index.js                               | 2 +-
 .../{notificationsMiddleware.js => notifications/index.js}    | 2 +-
 .../spec.js}                                                  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename backend/src/middleware/{notificationsMiddleware.js => notifications/index.js} (92%)
 rename backend/src/middleware/{notificationsMiddleware.spec.js => notifications/spec.js} (95%)

diff --git a/backend/src/middleware/index.js b/backend/src/middleware/index.js
index e6759e8ff..39bb0e775 100644
--- a/backend/src/middleware/index.js
+++ b/backend/src/middleware/index.js
@@ -11,7 +11,7 @@ import userMiddleware from './userMiddleware'
 import includedFieldsMiddleware from './includedFieldsMiddleware'
 import orderByMiddleware from './orderByMiddleware'
 import validUrlMiddleware from './validUrlMiddleware'
-import notificationsMiddleware from './notificationsMiddleware'
+import notificationsMiddleware from './notifications'
 
 export default schema => {
   let middleware = [
diff --git a/backend/src/middleware/notificationsMiddleware.js b/backend/src/middleware/notifications/index.js
similarity index 92%
rename from backend/src/middleware/notificationsMiddleware.js
rename to backend/src/middleware/notifications/index.js
index 30205278b..159f055f3 100644
--- a/backend/src/middleware/notificationsMiddleware.js
+++ b/backend/src/middleware/notifications/index.js
@@ -1,4 +1,4 @@
-import { extractSlugs } from './notifications/mentions'
+import { extractSlugs } from './mentions'
 
 const notify = async (resolve, root, args, context, resolveInfo) => {
   const post = await resolve(root, args, context, resolveInfo)
diff --git a/backend/src/middleware/notificationsMiddleware.spec.js b/backend/src/middleware/notifications/spec.js
similarity index 95%
rename from backend/src/middleware/notificationsMiddleware.spec.js
rename to backend/src/middleware/notifications/spec.js
index e6fc78c52..656f10636 100644
--- a/backend/src/middleware/notificationsMiddleware.spec.js
+++ b/backend/src/middleware/notifications/spec.js
@@ -1,6 +1,6 @@
-import Factory from '../seed/factories'
 import { GraphQLClient } from 'graphql-request'
-import { host, login } from '../jest/helpers'
+import { host, login } from '../../jest/helpers'
+import Factory from '../../seed/factories'
 
 const factory = Factory()
 let client

From f30da038d99d09306ad5eb2eb6a88aeea12242e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 11:21:38 +0200
Subject: [PATCH 13/17] Change backend test to parse html not plain text

---
 .../middleware/notifications/mentions.spec.js | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/backend/src/middleware/notifications/mentions.spec.js b/backend/src/middleware/notifications/mentions.spec.js
index f12df7f07..3e70514b7 100644
--- a/backend/src/middleware/notifications/mentions.spec.js
+++ b/backend/src/middleware/notifications/mentions.spec.js
@@ -1,30 +1,18 @@
 import { extractSlugs } from './mentions'
 
 describe('extract', () => {
-  describe('finds mentions in the form of', () => {
-    it('@user', () => {
-      const content = 'Hello @user'
-      expect(extractSlugs(content)).toEqual(['user'])
+  describe('searches through links', () => {
+    it('ignores links without .mention class', () => {
+      const content = '<p>Something inspirational about <a href="/profile/u2" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3" target="_blank">@jenny-rostock</a>.</p>'
+      expect(extractSlugs(content)).toEqual([])
     })
 
-    it('@user-with-dash', () => {
-      const content = 'Hello @user-with-dash'
-      expect(extractSlugs(content)).toEqual(['user-with-dash'])
-    })
+    describe('given a link with .mention class', () => {
+      const content = '<p>Something inspirational about <a href="/profile/u2" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3/jenny-rostock" class="mention" target="_blank">@jenny-rostock</a>.</p>'
 
-    it('@user.', () => {
-      const content = 'Hello @user.'
-      expect(extractSlugs(content)).toEqual(['user'])
+      it('extracts ID', () => {
+        expect(extractSlugs(content)).toEqual(['u2', 'u3'])
+      })
     })
-
-    it('@user-With-Capital-LETTERS', () => {
-      const content = 'Hello @user-With-Capital-LETTERS'
-      expect(extractSlugs(content)).toEqual(['user-With-Capital-LETTERS'])
-    })
-  })
-
-  it('ignores email addresses', () => {
-    const content = 'Hello somebody@example.org'
-    expect(extractSlugs(content)).toEqual([])
   })
 })

From b2d72ae74a68214067e358b60e30f104390015dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 16:05:09 +0200
Subject: [PATCH 14/17] Implement parsing of mention links

---
 .../notifications/extractMentions.js          | 17 +++++++
 .../notifications/extractMentions.spec.js     | 46 +++++++++++++++++++
 backend/src/middleware/notifications/index.js |  4 +-
 .../src/middleware/notifications/mentions.js  | 10 ----
 .../middleware/notifications/mentions.spec.js | 18 --------
 5 files changed, 65 insertions(+), 30 deletions(-)
 create mode 100644 backend/src/middleware/notifications/extractMentions.js
 create mode 100644 backend/src/middleware/notifications/extractMentions.spec.js
 delete mode 100644 backend/src/middleware/notifications/mentions.js
 delete mode 100644 backend/src/middleware/notifications/mentions.spec.js

diff --git a/backend/src/middleware/notifications/extractMentions.js b/backend/src/middleware/notifications/extractMentions.js
new file mode 100644
index 000000000..f2b28444f
--- /dev/null
+++ b/backend/src/middleware/notifications/extractMentions.js
@@ -0,0 +1,17 @@
+import cheerio from 'cheerio'
+const ID_REGEX = /\/profile\/([\w\-.!~*'"(),]+)/g
+
+export default function (content) {
+  const $ = cheerio.load(content)
+  const urls = $('.mention').map((_, el) => {
+    return $(el).attr('href')
+  }).get()
+  const ids = []
+  urls.forEach((url) => {
+    let match
+    while ((match = ID_REGEX.exec(url)) != null) {
+      ids.push(match[1])
+    }
+  })
+  return ids
+}
diff --git a/backend/src/middleware/notifications/extractMentions.spec.js b/backend/src/middleware/notifications/extractMentions.spec.js
new file mode 100644
index 000000000..625b1d8fe
--- /dev/null
+++ b/backend/src/middleware/notifications/extractMentions.spec.js
@@ -0,0 +1,46 @@
+import extractIds from './extractMentions'
+
+describe('extract', () => {
+  describe('searches through links', () => {
+    it('ignores links without .mention class', () => {
+      const content = '<p>Something inspirational about <a href="/profile/u2" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3" target="_blank">@jenny-rostock</a>.</p>'
+      expect(extractIds(content)).toEqual([])
+    })
+
+    describe('given a link with .mention class', () => {
+      it('extracts ids', () => {
+        const content = '<p>Something inspirational about <a href="/profile/u2" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3/jenny-rostock" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+        expect(extractIds(content)).toEqual(['u2', 'u3'])
+      })
+
+      describe('handles links', () => {
+        it('with slug and id', () => {
+          const content = '<p>Something inspirational about <a href="/profile/u2/bob-der-baumeister" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3/jenny-rostock/" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+          expect(extractIds(content)).toEqual(['u2', 'u3'])
+        })
+
+        it('with domains', () => {
+          const content = '<p>Something inspirational about <a href="http://localhost:3000/profile/u2/bob-der-baumeister" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="http://localhost:3000//profile/u3/jenny-rostock/" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+          expect(extractIds(content)).toEqual(['u2', 'u3'])
+        })
+
+        it('special characters', () => {
+          const content = '<p>Something inspirational about <a href="http://localhost:3000/profile/u!*(),2/bob-der-baumeister" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="http://localhost:3000//profile/u.~-3/jenny-rostock/" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+          expect(extractIds(content)).toEqual(['u!*(),2', 'u.~-3'])
+        })
+      })
+
+      describe('does not crash if', () => {
+        it('`href` contains no user id', () => {
+          const content = '<p>Something inspirational about <a href="/profile" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="/profile/" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+          expect(extractIds(content)).toEqual([])
+        })
+
+        it('`href` is empty or invalid', () => {
+          const content = '<p>Something inspirational about <a href="" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="not-a-url" class="mention" target="_blank">@jenny-rostock</a>.</p>'
+          expect(extractIds(content)).toEqual([])
+        })
+      })
+    })
+  })
+})
diff --git a/backend/src/middleware/notifications/index.js b/backend/src/middleware/notifications/index.js
index 159f055f3..0efd140d2 100644
--- a/backend/src/middleware/notifications/index.js
+++ b/backend/src/middleware/notifications/index.js
@@ -1,11 +1,11 @@
-import { extractSlugs } from './mentions'
+import extractIds from './extractMentions'
 
 const notify = async (resolve, root, args, context, resolveInfo) => {
   const post = await resolve(root, args, context, resolveInfo)
 
   const session = context.driver.session()
   const { content, id: postId } = post
-  const slugs = extractSlugs(content)
+  const slugs = extractIds(content)
   const createdAt = (new Date()).toISOString()
   const cypher = `
     match(u:User) where u.slug in $slugs
diff --git a/backend/src/middleware/notifications/mentions.js b/backend/src/middleware/notifications/mentions.js
deleted file mode 100644
index 137c23f1c..000000000
--- a/backend/src/middleware/notifications/mentions.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const MENTION_REGEX = /\s@([\w_-]+)/g
-
-export function extractSlugs (content) {
-  let slugs = []
-  let match
-  while ((match = MENTION_REGEX.exec(content)) != null) {
-    slugs.push(match[1])
-  }
-  return slugs
-}
diff --git a/backend/src/middleware/notifications/mentions.spec.js b/backend/src/middleware/notifications/mentions.spec.js
deleted file mode 100644
index 3e70514b7..000000000
--- a/backend/src/middleware/notifications/mentions.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { extractSlugs } from './mentions'
-
-describe('extract', () => {
-  describe('searches through links', () => {
-    it('ignores links without .mention class', () => {
-      const content = '<p>Something inspirational about <a href="/profile/u2" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3" target="_blank">@jenny-rostock</a>.</p>'
-      expect(extractSlugs(content)).toEqual([])
-    })
-
-    describe('given a link with .mention class', () => {
-      const content = '<p>Something inspirational about <a href="/profile/u2" class="mention" target="_blank">@bob-der-baumeister</a> and <a href="/profile/u3/jenny-rostock" class="mention" target="_blank">@jenny-rostock</a>.</p>'
-
-      it('extracts ID', () => {
-        expect(extractSlugs(content)).toEqual(['u2', 'u3'])
-      })
-    })
-  })
-})

From aa3762a095de2dfc4421ee32a7b8f78727f25f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 17:48:42 +0200
Subject: [PATCH 15/17] Implement right order of notifications middleware

---
 backend/src/middleware/index.js               |  2 +-
 backend/src/middleware/notifications/index.js |  6 +++---
 backend/src/middleware/notifications/spec.js  | 13 +++++++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/backend/src/middleware/index.js b/backend/src/middleware/index.js
index 39bb0e775..4f725ef72 100644
--- a/backend/src/middleware/index.js
+++ b/backend/src/middleware/index.js
@@ -20,9 +20,9 @@ export default schema => {
     validUrlMiddleware,
     sluggifyMiddleware,
     excerptMiddleware,
+    notificationsMiddleware,
     xssMiddleware,
     fixImageUrlsMiddleware,
-    notificationsMiddleware,
     softDeleteMiddleware,
     userMiddleware,
     includedFieldsMiddleware,
diff --git a/backend/src/middleware/notifications/index.js b/backend/src/middleware/notifications/index.js
index 0efd140d2..89d86bed3 100644
--- a/backend/src/middleware/notifications/index.js
+++ b/backend/src/middleware/notifications/index.js
@@ -1,20 +1,20 @@
 import extractIds from './extractMentions'
 
 const notify = async (resolve, root, args, context, resolveInfo) => {
+  const ids = extractIds(args.content) // before mention class gets removed
   const post = await resolve(root, args, context, resolveInfo)
 
   const session = context.driver.session()
   const { content, id: postId } = post
-  const slugs = extractIds(content)
   const createdAt = (new Date()).toISOString()
   const cypher = `
-    match(u:User) where u.slug in $slugs
+    match(u:User) where u.id in $ids
     match(p:Post) where p.id = $postId
     create(n:Notification{id: apoc.create.uuid(), read: false, createdAt: $createdAt})
     merge (n)-[:NOTIFIED]->(u)
     merge (p)-[:NOTIFIED]->(n)
     `
-  await session.run(cypher, { slugs, createdAt, postId })
+  await session.run(cypher, { ids, createdAt, postId })
   session.close()
 
   return post
diff --git a/backend/src/middleware/notifications/spec.js b/backend/src/middleware/notifications/spec.js
index 656f10636..c7dd99613 100644
--- a/backend/src/middleware/notifications/spec.js
+++ b/backend/src/middleware/notifications/spec.js
@@ -54,26 +54,31 @@ describe('currentUser { notifications }', () => {
       })
 
       describe('who mentions me in a post', () => {
+        let post
+        const title = 'Mentioning Al Capone'
+        const content = 'Hey <a class="mention" href="/profile/you/al-capone">@al-capone</a> how do you do?'
+
         beforeEach(async () => {
-          const content = 'Hey @al-capone how do you do?'
-          const title = 'Mentioning Al Capone'
           const createPostMutation = `
           mutation($title: String!, $content: String!) {
             CreatePost(title: $title, content: $content) {
+              id
               title
               content
             }
           }
           `
           authorClient = new GraphQLClient(host, { headers: authorHeaders })
-          await authorClient.request(createPostMutation, { title, content })
+          const { CreatePost } = await authorClient.request(createPostMutation, { title, content })
+          post = CreatePost
         })
 
         it('sends you a notification', async () => {
+          const newContent = 'Hey <a href="/profile/you/al-capone" target=\"_blank\">@al-capone</a> how do you do?'
           const expected = {
             currentUser: {
               notifications: [
-                { read: false, post: { content: 'Hey @al-capone how do you do?' } }
+                { read: false, post: { content: newContent } }
               ]
             }
           }

From 65f96c2b28cc7c807eb3c8e78a735c9de80bf39c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 18:07:18 +0200
Subject: [PATCH 16/17] Create notifications on UpdatePost, too

Note that we don't create duplicate notifications. I made use of the behaviour
of XSS-middleware: It removes all css classes from `<a>` anchors. Because
notifications rely on a css class `mention` which gets removed in a later
middleware, this gives us a nice behaviour for re-notifications without creating
duplicates. The downside is that it creates dependencies between middlewares and
it's not that obvious at all.

cc @mattwr18 @ulfgebhardt @appinteractive @Tirokk
---
 backend/src/middleware/notifications/index.js |  9 +++--
 backend/src/middleware/notifications/spec.js  | 38 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/backend/src/middleware/notifications/index.js b/backend/src/middleware/notifications/index.js
index 89d86bed3..942eb588d 100644
--- a/backend/src/middleware/notifications/index.js
+++ b/backend/src/middleware/notifications/index.js
@@ -1,11 +1,13 @@
 import extractIds from './extractMentions'
 
 const notify = async (resolve, root, args, context, resolveInfo) => {
-  const ids = extractIds(args.content) // before mention class gets removed
+  // extract user ids before xss-middleware removes link classes
+  const ids = extractIds(args.content)
+
   const post = await resolve(root, args, context, resolveInfo)
 
   const session = context.driver.session()
-  const { content, id: postId } = post
+  const { id: postId } = post
   const createdAt = (new Date()).toISOString()
   const cypher = `
     match(u:User) where u.id in $ids
@@ -22,6 +24,7 @@ const notify = async (resolve, root, args, context, resolveInfo) => {
 
 export default {
   Mutation: {
-    CreatePost: notify
+    CreatePost: notify,
+    UpdatePost: notify
   }
 }
diff --git a/backend/src/middleware/notifications/spec.js b/backend/src/middleware/notifications/spec.js
index c7dd99613..786ee7115 100644
--- a/backend/src/middleware/notifications/spec.js
+++ b/backend/src/middleware/notifications/spec.js
@@ -74,16 +74,50 @@ describe('currentUser { notifications }', () => {
         })
 
         it('sends you a notification', async () => {
-          const newContent = 'Hey <a href="/profile/you/al-capone" target=\"_blank\">@al-capone</a> how do you do?'
+          const expectedContent = 'Hey <a href="/profile/you/al-capone" target="_blank">@al-capone</a> how do you do?'
           const expected = {
             currentUser: {
               notifications: [
-                { read: false, post: { content: newContent } }
+                { read: false, post: { content: expectedContent } }
               ]
             }
           }
           await expect(client.request(query, { read: false })).resolves.toEqual(expected)
         })
+
+        describe('who mentions me again', () => {
+          beforeEach(async () => {
+            const updatedContent = `${post.content} One more mention to <a href="/profile/you" class="mention">@al-capone</a>`
+            // The response `post.content` contains a link but the XSSmiddleware
+            // should have the `mention` CSS class removed. I discovered this
+            // during development and thought: A feature not a bug! This way we
+            // can encode a re-mentioning of users when you edit your post or
+            // comment.
+            const createPostMutation = `
+            mutation($id: ID!, $content: String!) {
+              UpdatePost(id: $id, content: $content) {
+                title
+                content
+              }
+            }
+            `
+            authorClient = new GraphQLClient(host, { headers: authorHeaders })
+            await authorClient.request(createPostMutation, { id: post.id, content: updatedContent })
+          })
+
+          it('creates exactly one more notification', async () => {
+            const expectedContent = 'Hey <a href="/profile/you/al-capone" target="_blank">@al-capone</a> how do you do? One more mention to <a href="/profile/you" target="_blank">@al-capone</a>'
+            const expected = {
+              currentUser: {
+                notifications: [
+                  { read: false, post: { content: expectedContent } },
+                  { read: false, post: { content: expectedContent } }
+                ]
+              }
+            }
+            await expect(client.request(query, { read: false })).resolves.toEqual(expected)
+          })
+        })
       })
     })
   })

From e247d25aee17f3c7757b2f218838f46f75b88f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 18:19:29 +0200
Subject: [PATCH 17/17] Open mentioning link in new tab

This will help some people not to loose data after accidently clicking
on the user @-mentioning.
---
 webapp/components/Editor/nodes/Mention.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Editor/nodes/Mention.js b/webapp/components/Editor/nodes/Mention.js
index f86f20bd9..134fdc64b 100644
--- a/webapp/components/Editor/nodes/Mention.js
+++ b/webapp/components/Editor/nodes/Mention.js
@@ -15,7 +15,8 @@ export default class Mention extends TipTapMention {
         'a',
         {
           class: this.options.mentionClass,
-          href: node.attrs.url
+          href: node.attrs.url,
+          target: '_blank'
         },
         `${this.options.matcher.char}${node.attrs.label}`
       ]