From 0468d9972c2515b91c54a8478343afe4a32a8f67 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <support@dependabot.com>
Date: Tue, 16 Apr 2019 04:55:13 +0000
Subject: [PATCH 01/27] Bump tiptap-extensions from 1.14.0 to 1.15.0 in /webapp

Bumps [tiptap-extensions](https://github.com/scrumpy/tiptap) from 1.14.0 to 1.15.0.
- [Release notes](https://github.com/scrumpy/tiptap/releases)
- [Commits](https://github.com/scrumpy/tiptap/compare/tiptap-extensions@1.14.0...tiptap-extensions@1.15.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>
---
 webapp/package.json |  2 +-
 webapp/yarn.lock    | 30 +++++++++++++++---------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 3033970b0..3187feeb8 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -52,7 +52,7 @@
     "stack-utils": "^1.0.2",
     "string-hash": "^1.1.3",
     "tiptap": "^1.14.0",
-    "tiptap-extensions": "^1.14.0",
+    "tiptap-extensions": "^1.15.0",
     "v-tooltip": "~2.0.1",
     "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 36b048d53..1bdcd1c6b 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -8856,10 +8856,10 @@ prosemirror-utils@^0.7.6:
   resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.7.6.tgz#c462ddfbf2452e56e4b25d1f02b34caccddb0f33"
   integrity sha512-vzsCBTiJ56R3nRDpIJnKOJzsZP7KFO8BkXk7zvQgQiXpml2o/djPCRhuyaFc7VTqSHlLPQHVI1feTLAwHp+prQ==
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.8.3.tgz#f8deff22c7d371f63db2686ac6f3661ded1b3ae3"
-  integrity sha512-CAW3SycaJgfPlWwYcDGiwNaCwcikBLSFAgLF+H+bTn0aCAUzcl2DXQdU9dMvK3HeWG+6Xn/QPQbhyyqCcV3ZBw==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.8.8:
+  version "1.8.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.8.8.tgz#e61f60ed716d4f943be2fbc3f3be765322ff891f"
+  integrity sha512-rBDmBKRPmWhF4R2k9vW7CkGo+bafjj278lFxEGVpCHlnLhhhYX1XHU59KgMCsDnNhxh8Oexup1yIPbfg99eynA==
   dependencies:
     prosemirror-model "^1.1.0"
     prosemirror-state "^1.0.0"
@@ -10341,18 +10341,18 @@ tiptap-commands@^1.7.0:
     prosemirror-state "^1.2.2"
     tiptap-utils "^1.3.0"
 
-tiptap-extensions@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.14.0.tgz#5517afd1ca556715a8cce6c022c88584a762004a"
-  integrity sha512-WzYukrUHGGjCi3+F156LEVn5R58Pw1F6zKHT2o4SMHuv0LrWTIJK1XsDv8uwi/szfTlXm9BJ4MKmRbDulBeioQ==
+tiptap-extensions@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.15.0.tgz#72768ba4c1d016ce752468466c91b33c87699e60"
+  integrity sha512-BqrHw5ZiF1WJVDw1r/9Xbta+ln1rITeQZHhA2p5ZaTi9ZRM7y9Bp44oSn2Pwzvb3bwCz+TO1Jv1MwASRKDMhug==
   dependencies:
     lowlight "^1.11.0"
     prosemirror-history "^1.0.4"
     prosemirror-state "^1.2.2"
     prosemirror-tables "^0.7.10"
     prosemirror-utils "^0.7.6"
-    prosemirror-view "^1.8.3"
-    tiptap "^1.14.0"
+    prosemirror-view "^1.8.8"
+    tiptap "^1.15.0"
     tiptap-commands "^1.7.0"
 
 tiptap-utils@^1.3.0:
@@ -10365,10 +10365,10 @@ tiptap-utils@^1.3.0:
     prosemirror-tables "^0.7.9"
     prosemirror-utils "^0.7.6"
 
-tiptap@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.14.0.tgz#8dd84b199533e08f0dcc34b39d517ea73e20fb95"
-  integrity sha512-38gCYeJx5O83oTnpfgMGGrjem1ZNDK2waaUMq+bkYPaQwvvtyMDGffvEIT9/jcLvA+WYfaNp8BWnn1rqNpYKxA==
+tiptap@^1.14.0, tiptap@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.15.0.tgz#198b6a3b477a10a25de79674a4d8bb58dad56743"
+  integrity sha512-qQfcK9Vs0QzUgw1x9oKYXimX8+m1TckivTrD/0als095qrq+fFQpQWkce++8kBW+2lGkM6nXsogZvHoV6Dzl4Q==
   dependencies:
     prosemirror-commands "^1.0.7"
     prosemirror-dropcursor "^1.1.1"
@@ -10377,7 +10377,7 @@ tiptap@^1.14.0:
     prosemirror-keymap "^1.0.1"
     prosemirror-model "^1.7.0"
     prosemirror-state "^1.2.1"
-    prosemirror-view "^1.8.3"
+    prosemirror-view "^1.8.8"
     tiptap-commands "^1.7.0"
     tiptap-utils "^1.3.0"
 

From 1fc76e0c4eb7de2fc31eef6fe1bec083e2f96a40 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 02/27] 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 5f456fe752a27104e757e381108a3e4220738867 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 03/27] 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 3be83ca7d070f72d4fe0e5e2de97b5a1790434e3 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 04/27] 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 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 05/27] 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 4d9c6c5b1c3e7fde721ef3a72d7462039764af70 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 06/27] 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 b5f60369a503defb7820e08bd2e2a8598ac0db78 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 07/27] 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 bf18754b4d4ab90c8ab37b90e8735267c78d88cb 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 08/27] 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 fcafb4e1051c02b7bcb4dd652fb91a92175b1b50 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 09/27] 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 d885fd1beb013710996aa742534d5ce49a18e7e4 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 10/27] 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 25bef856834012a6fd127ad418ccf8b59851bfc1 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 11/27] 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 dd1d86e02ccbf73768af24eaa20ed4852517a743 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 12/27] 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 c050bddf4eeade38b1a8218625a661ae76637381 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 13/27] 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 cd2bbbef30ae0b5ed128822e6a34c993a00b04b2 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 14/27] 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 4a6ef3f9f697e6baa8bbaded68d555e088f3fc0b 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 15/27] 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 f86e98b32e671a57b949c3fe66ac7c1fc1f075f3 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 16/27] 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 fe551ece474fa0e99a09c7722dd3331f19368c8d 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 17/27] 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 9ed204fa72e13aadeb2637bcab7c28234bebd614 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 18/27] 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}`
       ]

From 0fe1bcb982f8094f7370d2359555b8d3bbdd4a68 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <support@dependabot.com>
Date: Tue, 16 Apr 2019 04:55:13 +0000
Subject: [PATCH 19/27] Bump tiptap-extensions from 1.14.0 to 1.15.0 in /webapp

Bumps [tiptap-extensions](https://github.com/scrumpy/tiptap) from 1.14.0 to 1.15.0.
- [Release notes](https://github.com/scrumpy/tiptap/releases)
- [Commits](https://github.com/scrumpy/tiptap/compare/tiptap-extensions@1.14.0...tiptap-extensions@1.15.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>
---
 webapp/package.json |  2 +-
 webapp/yarn.lock    | 30 +++++++++++++++---------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 3f3c6f8ef..eeb700d11 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -52,7 +52,7 @@
     "stack-utils": "^1.0.2",
     "string-hash": "^1.1.3",
     "tiptap": "^1.14.0",
-    "tiptap-extensions": "^1.14.0",
+    "tiptap-extensions": "^1.15.0",
     "v-tooltip": "~2.0.1",
     "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 28e0b4588..1b1d4b2d6 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -8875,10 +8875,10 @@ prosemirror-utils@^0.7.6:
   resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.7.6.tgz#c462ddfbf2452e56e4b25d1f02b34caccddb0f33"
   integrity sha512-vzsCBTiJ56R3nRDpIJnKOJzsZP7KFO8BkXk7zvQgQiXpml2o/djPCRhuyaFc7VTqSHlLPQHVI1feTLAwHp+prQ==
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.8.3.tgz#f8deff22c7d371f63db2686ac6f3661ded1b3ae3"
-  integrity sha512-CAW3SycaJgfPlWwYcDGiwNaCwcikBLSFAgLF+H+bTn0aCAUzcl2DXQdU9dMvK3HeWG+6Xn/QPQbhyyqCcV3ZBw==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.8.8:
+  version "1.8.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.8.8.tgz#e61f60ed716d4f943be2fbc3f3be765322ff891f"
+  integrity sha512-rBDmBKRPmWhF4R2k9vW7CkGo+bafjj278lFxEGVpCHlnLhhhYX1XHU59KgMCsDnNhxh8Oexup1yIPbfg99eynA==
   dependencies:
     prosemirror-model "^1.1.0"
     prosemirror-state "^1.0.0"
@@ -10367,18 +10367,18 @@ tiptap-commands@^1.7.0:
     prosemirror-state "^1.2.2"
     tiptap-utils "^1.3.0"
 
-tiptap-extensions@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.14.0.tgz#5517afd1ca556715a8cce6c022c88584a762004a"
-  integrity sha512-WzYukrUHGGjCi3+F156LEVn5R58Pw1F6zKHT2o4SMHuv0LrWTIJK1XsDv8uwi/szfTlXm9BJ4MKmRbDulBeioQ==
+tiptap-extensions@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/tiptap-extensions/-/tiptap-extensions-1.15.0.tgz#72768ba4c1d016ce752468466c91b33c87699e60"
+  integrity sha512-BqrHw5ZiF1WJVDw1r/9Xbta+ln1rITeQZHhA2p5ZaTi9ZRM7y9Bp44oSn2Pwzvb3bwCz+TO1Jv1MwASRKDMhug==
   dependencies:
     lowlight "^1.11.0"
     prosemirror-history "^1.0.4"
     prosemirror-state "^1.2.2"
     prosemirror-tables "^0.7.10"
     prosemirror-utils "^0.7.6"
-    prosemirror-view "^1.8.3"
-    tiptap "^1.14.0"
+    prosemirror-view "^1.8.8"
+    tiptap "^1.15.0"
     tiptap-commands "^1.7.0"
 
 tiptap-utils@^1.3.0:
@@ -10391,10 +10391,10 @@ tiptap-utils@^1.3.0:
     prosemirror-tables "^0.7.9"
     prosemirror-utils "^0.7.6"
 
-tiptap@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.14.0.tgz#8dd84b199533e08f0dcc34b39d517ea73e20fb95"
-  integrity sha512-38gCYeJx5O83oTnpfgMGGrjem1ZNDK2waaUMq+bkYPaQwvvtyMDGffvEIT9/jcLvA+WYfaNp8BWnn1rqNpYKxA==
+tiptap@^1.14.0, tiptap@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.15.0.tgz#198b6a3b477a10a25de79674a4d8bb58dad56743"
+  integrity sha512-qQfcK9Vs0QzUgw1x9oKYXimX8+m1TckivTrD/0als095qrq+fFQpQWkce++8kBW+2lGkM6nXsogZvHoV6Dzl4Q==
   dependencies:
     prosemirror-commands "^1.0.7"
     prosemirror-dropcursor "^1.1.1"
@@ -10403,7 +10403,7 @@ tiptap@^1.14.0:
     prosemirror-keymap "^1.0.1"
     prosemirror-model "^1.7.0"
     prosemirror-state "^1.2.1"
-    prosemirror-view "^1.8.3"
+    prosemirror-view "^1.8.8"
     tiptap-commands "^1.7.0"
     tiptap-utils "^1.3.0"
 

From af60ad39a4f3b53120d970fbab201b37f486b959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 22:42:36 +0200
Subject: [PATCH 20/27] Follow directory layout

---
 .../notifications/{ => Notification}/NotificationPostCard.vue | 0
 .../{Notification.vue => Notification/index.vue}              | 0
 .../{NotificationList.vue => NotificationList/index.vue}      | 2 +-
 .../{NotificationList.spec.js => NotificationList/spec.js}    | 4 ++--
 .../{NotificationMenu.vue => NotificationMenu/index.vue}      | 2 +-
 .../{NotificationMenu.spec.js => NotificationMenu/spec.js}    | 2 +-
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename webapp/components/notifications/{ => Notification}/NotificationPostCard.vue (100%)
 rename webapp/components/notifications/{Notification.vue => Notification/index.vue} (100%)
 rename webapp/components/notifications/{NotificationList.vue => NotificationList/index.vue} (92%)
 rename webapp/components/notifications/{NotificationList.spec.js => NotificationList/spec.js} (96%)
 rename webapp/components/notifications/{NotificationMenu.vue => NotificationMenu/index.vue} (97%)
 rename webapp/components/notifications/{NotificationMenu.spec.js => NotificationMenu/spec.js} (97%)

diff --git a/webapp/components/notifications/NotificationPostCard.vue b/webapp/components/notifications/Notification/NotificationPostCard.vue
similarity index 100%
rename from webapp/components/notifications/NotificationPostCard.vue
rename to webapp/components/notifications/Notification/NotificationPostCard.vue
diff --git a/webapp/components/notifications/Notification.vue b/webapp/components/notifications/Notification/index.vue
similarity index 100%
rename from webapp/components/notifications/Notification.vue
rename to webapp/components/notifications/Notification/index.vue
diff --git a/webapp/components/notifications/NotificationList.vue b/webapp/components/notifications/NotificationList/index.vue
similarity index 92%
rename from webapp/components/notifications/NotificationList.vue
rename to webapp/components/notifications/NotificationList/index.vue
index 2d6cd3828..b8235f853 100644
--- a/webapp/components/notifications/NotificationList.vue
+++ b/webapp/components/notifications/NotificationList/index.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Notification from './Notification'
+import Notification from '../Notification'
 
 export default {
   name: 'NotificationList',
diff --git a/webapp/components/notifications/NotificationList.spec.js b/webapp/components/notifications/NotificationList/spec.js
similarity index 96%
rename from webapp/components/notifications/NotificationList.spec.js
rename to webapp/components/notifications/NotificationList/spec.js
index d98a7ea31..49e7262df 100644
--- a/webapp/components/notifications/NotificationList.spec.js
+++ b/webapp/components/notifications/NotificationList/spec.js
@@ -5,8 +5,8 @@ import {
   createLocalVue,
   RouterLinkStub
 } from '@vue/test-utils'
-import NotificationList from './NotificationList.vue'
-import Notification from './Notification.vue'
+import NotificationList from '.'
+import Notification from '../Notification'
 import Vue from 'vue'
 import Vuex from 'vuex'
 
diff --git a/webapp/components/notifications/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/index.vue
similarity index 97%
rename from webapp/components/notifications/NotificationMenu.vue
rename to webapp/components/notifications/NotificationMenu/index.vue
index 4ec80657f..113b2be78 100644
--- a/webapp/components/notifications/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/index.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import NotificationList from './NotificationList'
+import NotificationList from '../NotificationList'
 import Dropdown from '~/components/Dropdown'
 import gql from 'graphql-tag'
 
diff --git a/webapp/components/notifications/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/spec.js
similarity index 97%
rename from webapp/components/notifications/NotificationMenu.spec.js
rename to webapp/components/notifications/NotificationMenu/spec.js
index e5d5539f8..a9f89f31f 100644
--- a/webapp/components/notifications/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/spec.js
@@ -1,5 +1,5 @@
 import { config, shallowMount, createLocalVue } from '@vue/test-utils'
-import NotificationMenu from './NotificationMenu.vue'
+import NotificationMenu from '.'
 
 import Styleguide from '@human-connection/styleguide'
 

From 128480fd0ee64f664d212a4db6142482be82560b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 16 Apr 2019 23:13:55 +0200
Subject: [PATCH 21/27] Implement first test for Notification

Fixed a bug along the way `(post.contentExcerpt == null)`
---
 .../Notification/NotificationPostCard.vue     |  7 ++-
 .../notifications/Notification/spec.js        | 43 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/notifications/Notification/spec.js

diff --git a/webapp/components/notifications/Notification/NotificationPostCard.vue b/webapp/components/notifications/Notification/NotificationPostCard.vue
index 85049b0c3..6197f0bda 100644
--- a/webapp/components/notifications/Notification/NotificationPostCard.vue
+++ b/webapp/components/notifications/Notification/NotificationPostCard.vue
@@ -20,10 +20,13 @@
       />
     </no-ssr>
     <ds-space margin-bottom="x-small" />
+    <!-- eslint-disable vue/no-v-html -->
+    <!-- TODO: replace editor content with tiptap render view -->
     <div
       class="hc-editor-content"
       v-html="excerpt"
     />
+    <!-- eslint-enable vue/no-v-html -->
   </ds-card>
 </template>
 
@@ -43,8 +46,10 @@ export default {
   },
   computed: {
     excerpt() {
+      const { contentExcerpt } = this.post
+      if (!contentExcerpt) return ''
       // remove all links from excerpt to prevent issues with the sorrounding link
-      let excerpt = this.post.contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      let excerpt = contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
       // do not display content that is only linebreaks
       if (excerpt.replace(/<br>/gim, '').trim() === '') {
         excerpt = ''
diff --git a/webapp/components/notifications/Notification/spec.js b/webapp/components/notifications/Notification/spec.js
new file mode 100644
index 000000000..a39cb5940
--- /dev/null
+++ b/webapp/components/notifications/Notification/spec.js
@@ -0,0 +1,43 @@
+import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import Notification from '.'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+
+describe('Notification', () => {
+  let wrapper
+  let stubs
+  let propsData
+  beforeEach(() => {
+    propsData = {}
+    stubs = {
+      NuxtLink: RouterLinkStub
+    }
+  })
+
+  const Wrapper = () => {
+    return mount(Notification, {
+      stubs,
+      propsData,
+      localVue
+    })
+  }
+
+  describe('given a notification', () => {
+    beforeEach(() => {
+      propsData.notification = {
+        post: {
+          title: "It's a title"
+        }
+      }
+    })
+
+    it('renders title', () => {
+      expect(Wrapper().text()).toContain("It's a title")
+    })
+  })
+})

From 4f2e70e871c2e70d1cc09cc0ea614c82d3bafbcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 00:00:26 +0200
Subject: [PATCH 22/27] Refactor and harden PostCard component

---
 .../{PostCard.vue => PostCard/index.vue}      | 18 +++---
 webapp/components/PostCard/spec.js            | 60 +++++++++++++++++++
 webapp/mixins/removeLinks.js                  | 15 +++++
 webapp/pages/index.vue                        |  2 +-
 webapp/pages/post/_id/_slug/more-info.vue     |  2 +-
 webapp/pages/profile/_id/_slug.vue            |  2 +-
 6 files changed, 87 insertions(+), 12 deletions(-)
 rename webapp/components/{PostCard.vue => PostCard/index.vue} (88%)
 create mode 100644 webapp/components/PostCard/spec.js
 create mode 100644 webapp/mixins/removeLinks.js

diff --git a/webapp/components/PostCard.vue b/webapp/components/PostCard/index.vue
similarity index 88%
rename from webapp/components/PostCard.vue
rename to webapp/components/PostCard/index.vue
index 07f548fb0..87d70b720 100644
--- a/webapp/components/PostCard.vue
+++ b/webapp/components/PostCard/index.vue
@@ -76,6 +76,8 @@
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
+import RemoveLinks from '~/mixins/removeLinks.js'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcPostCard',
@@ -90,18 +92,16 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      user: 'auth/user'
+    }),
     excerpt() {
-      // remove all links from excerpt to prevent issues with the serounding link
-      let excerpt = this.post.contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
+      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
-      return this.$store.getters['auth/user'].id === this.post.author.id
+      const { author } = this.post
+      if (!author) return false
+      return this.user.id === this.post.author.id
     }
   },
   methods: {
diff --git a/webapp/components/PostCard/spec.js b/webapp/components/PostCard/spec.js
new file mode 100644
index 000000000..451326ed6
--- /dev/null
+++ b/webapp/components/PostCard/spec.js
@@ -0,0 +1,60 @@
+import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import PostCard from '.'
+import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+
+describe('PostCard', () => {
+  let wrapper
+  let stubs
+  let mocks
+  let propsData
+  let getters
+
+  beforeEach(() => {
+    propsData = {}
+    stubs = {
+      NuxtLink: RouterLinkStub
+    }
+    mocks = {
+      $t: jest.fn()
+    }
+    getters = {
+      'auth/user': () => {
+        return {}
+      }
+    }
+  })
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters
+    })
+    return mount(PostCard, {
+      stubs,
+      mocks,
+      propsData,
+      store,
+      localVue
+    })
+  }
+
+  describe('given a post', () => {
+    beforeEach(() => {
+      propsData.post= {
+        title: "It's a title"
+      }
+    })
+
+    it('renders title', () => {
+      expect(Wrapper().text()).toContain("It's a title")
+    })
+  })
+})
diff --git a/webapp/mixins/removeLinks.js b/webapp/mixins/removeLinks.js
new file mode 100644
index 000000000..4dfb3ce31
--- /dev/null
+++ b/webapp/mixins/removeLinks.js
@@ -0,0 +1,15 @@
+export default {
+  methods: {
+    removeLinks(content){
+      if (!content) return ''
+      // remove all links from excerpt to prevent issues with the surrounding link
+      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      // do not display content that is only linebreaks
+      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+        excerpt = ''
+      }
+
+      return excerpt
+    }
+  }
+}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index f5d7e03ba..26ff6296d 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -34,7 +34,7 @@
 <script>
 import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index d4de5f6f3..ae03fe658 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -56,7 +56,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcEmpty from '~/components/Empty.vue'
 
 export default {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index a70058b06..89ca09ab9 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -323,7 +323,7 @@
 import uniqBy from 'lodash/uniqBy'
 
 import User from '~/components/User'
-import HcPostCard from '~/components/PostCard.vue'
+import HcPostCard from '~/components/PostCard'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'

From c4577aa3e87038e6523fbc6cd712595dd8a9ad7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 00:04:06 +0200
Subject: [PATCH 23/27] Move mixins to the right place

---
 webapp/components/PostCard/spec.js    | 2 +-
 webapp/layouts/blank.vue              | 2 +-
 webapp/layouts/default.vue            | 2 +-
 webapp/mixins/removeLinks.js          | 2 +-
 webapp/{components => }/mixins/seo.js | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename webapp/{components => }/mixins/seo.js (100%)

diff --git a/webapp/components/PostCard/spec.js b/webapp/components/PostCard/spec.js
index 451326ed6..cb1be45ee 100644
--- a/webapp/components/PostCard/spec.js
+++ b/webapp/components/PostCard/spec.js
@@ -48,7 +48,7 @@ describe('PostCard', () => {
 
   describe('given a post', () => {
     beforeEach(() => {
-      propsData.post= {
+      propsData.post = {
         title: "It's a title"
       }
     })
diff --git a/webapp/layouts/blank.vue b/webapp/layouts/blank.vue
index 140ec9f6e..570799a4d 100644
--- a/webapp/layouts/blank.vue
+++ b/webapp/layouts/blank.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import seo from '~/components/mixins/seo'
+import seo from '~/mixins/seo'
 
 export default {
   mixins: [seo]
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index dd518e213..d4ac731e3 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -120,7 +120,7 @@ import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
-import seo from '~/components/mixins/seo'
+import seo from '~/mixins/seo'
 
 export default {
   components: {
diff --git a/webapp/mixins/removeLinks.js b/webapp/mixins/removeLinks.js
index 4dfb3ce31..e9a2de6b8 100644
--- a/webapp/mixins/removeLinks.js
+++ b/webapp/mixins/removeLinks.js
@@ -1,6 +1,6 @@
 export default {
   methods: {
-    removeLinks(content){
+    removeLinks(content) {
       if (!content) return ''
       // remove all links from excerpt to prevent issues with the surrounding link
       let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
diff --git a/webapp/components/mixins/seo.js b/webapp/mixins/seo.js
similarity index 100%
rename from webapp/components/mixins/seo.js
rename to webapp/mixins/seo.js

From 00046a5429cc056766de36da344bc7102e8ccb53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 00:08:03 +0200
Subject: [PATCH 24/27] Remove obsolete href method

---
 webapp/components/PostCard/index.vue                      | 8 --------
 .../notifications/Notification/NotificationPostCard.vue   | 8 --------
 2 files changed, 16 deletions(-)

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 87d70b720..6cf5b5d7c 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -103,14 +103,6 @@ export default {
       if (!author) return false
       return this.user.id === this.post.author.id
     }
-  },
-  methods: {
-    href(post) {
-      return this.$router.resolve({
-        name: 'post-id-slug',
-        params: { id: post.id, slug: post.slug }
-      }).href
-    }
   }
 }
 </script>
diff --git a/webapp/components/notifications/Notification/NotificationPostCard.vue b/webapp/components/notifications/Notification/NotificationPostCard.vue
index 6197f0bda..108882cbb 100644
--- a/webapp/components/notifications/Notification/NotificationPostCard.vue
+++ b/webapp/components/notifications/Notification/NotificationPostCard.vue
@@ -57,14 +57,6 @@ export default {
 
       return excerpt
     }
-  },
-  methods: {
-    href(post) {
-      return this.$router.resolve({
-        name: 'post-id-slug',
-        params: { id: post.id, slug: post.slug }
-      }).href
-    }
   }
 }
 </script>

From f5afdf243563804e85a5d8d73b1b5338ca135400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 01:04:47 +0200
Subject: [PATCH 25/27] Merge Notification with NotificationPostCard

cc @mattwr18 Please don't see this as a revert of your work. Your
structure of the `notification-post-card` component was helpful and showed
the redundancy with `hc-post-card`. I reused a lot of the code, but
because I merged both components it now *looks* as if I authored all the code.
---
 .../Notification/NotificationPostCard.vue     | 81 -------------------
 .../notifications/Notification/index.vue      | 52 +++++++++---
 .../notifications/Notification/spec.js        |  5 ++
 .../notifications/NotificationList/spec.js    |  2 +-
 webapp/locales/de.json                        |  5 ++
 webapp/locales/en.json                        |  5 ++
 6 files changed, 57 insertions(+), 93 deletions(-)
 delete mode 100644 webapp/components/notifications/Notification/NotificationPostCard.vue

diff --git a/webapp/components/notifications/Notification/NotificationPostCard.vue b/webapp/components/notifications/Notification/NotificationPostCard.vue
deleted file mode 100644
index 108882cbb..000000000
--- a/webapp/components/notifications/Notification/NotificationPostCard.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <ds-card
-    :header="post.title"
-    :image="post.image"
-    :class="{'post-card': true, 'disabled-content': post.disabled}"
-    hover
-    space="x-small"
-  >
-    <nuxt-link
-      class="post-link"
-      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
-    >
-      {{ post.title }}
-    </nuxt-link>
-    <ds-space margin-bottom="x-small" />
-    <no-ssr>
-      <hc-user
-        :user="post.author"
-        :trunc="35"
-      />
-    </no-ssr>
-    <ds-space margin-bottom="x-small" />
-    <!-- eslint-disable vue/no-v-html -->
-    <!-- TODO: replace editor content with tiptap render view -->
-    <div
-      class="hc-editor-content"
-      v-html="excerpt"
-    />
-    <!-- eslint-enable vue/no-v-html -->
-  </ds-card>
-</template>
-
-<script>
-import HcUser from '~/components/User'
-
-export default {
-  name: 'HcPostCard',
-  components: {
-    HcUser
-  },
-  props: {
-    post: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    excerpt() {
-      const { contentExcerpt } = this.post
-      if (!contentExcerpt) return ''
-      // remove all links from excerpt to prevent issues with the sorrounding link
-      let excerpt = contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.post-card {
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-
-  .post-link {
-    margin: 15px;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-indent: -999999px;
-  }
-}
-</style>
diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index ecf696d75..55b889876 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -1,21 +1,48 @@
 <template>
-  <nuxt-link
-    :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
-    @click.native="$emit('read')"
-  >
-    <ds-space margin-bottom="x-small">
-      <hc-notification-post-card :post="post" />
-    </ds-space>
-  </nuxt-link>
+  <ds-space margin-bottom="x-small">
+    <no-ssr>
+      <ds-space margin-bottom="x-small">
+      <hc-user
+        :user="post.author"
+        :trunc="35"
+      />
+      </ds-space>
+      <ds-text color="soft">
+        {{ $t("notifications.menu.mentioned") }}
+      </ds-text>
+    </no-ssr>
+    <ds-space margin-bottom="x-small" />
+    <nuxt-link
+      class="notification-mention-post"
+      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+      @click.native="$emit('read')"
+    >
+      <ds-space margin-bottom="x-small">
+        <ds-card
+          :header="post.title"
+          :image="post.image"
+          :class="{'post-card': true, 'disabled-content': post.disabled}"
+          hover
+          space="x-small"
+        >
+          <ds-space margin-bottom="x-small" />
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="excerpt" />
+        <!-- eslint-enable vue/no-v-html -->
+        </ds-card>
+      </ds-space>
+    </nuxt-link>
+  </ds-space>
 </template>
 
 <script>
-import HcNotificationPostCard from './NotificationPostCard.vue'
+import HcUser from '~/components/User'
+import RemoveLinks from '~/mixins/removeLinks'
 
 export default {
   name: 'Notification',
   components: {
-    HcNotificationPostCard
+    HcUser
   },
   props: {
     notification: {
@@ -24,8 +51,11 @@ export default {
     }
   },
   computed: {
+    excerpt() {
+      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+    },
     post() {
-      return this.notification.post
+      return this.notification.post || {}
     }
   }
 }
diff --git a/webapp/components/notifications/Notification/spec.js b/webapp/components/notifications/Notification/spec.js
index a39cb5940..c65f0ba3c 100644
--- a/webapp/components/notifications/Notification/spec.js
+++ b/webapp/components/notifications/Notification/spec.js
@@ -11,9 +11,13 @@ config.stubs['no-ssr'] = '<span><slot /></span>'
 describe('Notification', () => {
   let wrapper
   let stubs
+  let mocks
   let propsData
   beforeEach(() => {
     propsData = {}
+    mocks = {
+      $t: jest.fn()
+    }
     stubs = {
       NuxtLink: RouterLinkStub
     }
@@ -22,6 +26,7 @@ describe('Notification', () => {
   const Wrapper = () => {
     return mount(Notification, {
       stubs,
+      mocks,
       propsData,
       localVue
     })
diff --git a/webapp/components/notifications/NotificationList/spec.js b/webapp/components/notifications/NotificationList/spec.js
index 49e7262df..a4c129620 100644
--- a/webapp/components/notifications/NotificationList/spec.js
+++ b/webapp/components/notifications/NotificationList/spec.js
@@ -114,7 +114,7 @@ describe('NotificationList.vue', () => {
     describe('click on a notification', () => {
       beforeEach(() => {
         wrapper
-          .findAll(Notification)
+          .findAll('.notification-mention-post')
           .at(1)
           .trigger('click')
       })
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 94ca1ac1b..04a14f2a7 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -18,6 +18,11 @@
     "commented": "Kommentiert",
     "socialMedia": "Wo sonst finde ich"
   },
+  "notifications": {
+    "menu": {
+       "mentioned": "hat dich in einem Beitrag erwähnt"
+    }
+  },
   "search": {
     "placeholder": "Suchen",
     "hint": "Wonach suchst du?",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 40cc766d0..b0f06952b 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -18,6 +18,11 @@
     "commented": "Commented",
     "socialMedia": "Where else can I find"
   },
+  "notifications": {
+    "menu": {
+      "mentioned": "has mentioned you in a post"
+    }
+  },
   "search": {
     "placeholder": "Search",
     "hint": "What are you searching for?",

From e595135e9d0ade6ce2d7abf0c8f69637e7da7588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 01:18:53 +0200
Subject: [PATCH 26/27] Display post.createdAt along with Notification

---
 webapp/components/notifications/Notification/index.vue     | 1 +
 webapp/components/notifications/NotificationMenu/index.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index 55b889876..14f660ed6 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -4,6 +4,7 @@
       <ds-space margin-bottom="x-small">
       <hc-user
         :user="post.author"
+        :date-time="post.createdAt"
         :trunc="35"
       />
       </ds-space>
diff --git a/webapp/components/notifications/NotificationMenu/index.vue b/webapp/components/notifications/NotificationMenu/index.vue
index 113b2be78..f609d66f2 100644
--- a/webapp/components/notifications/NotificationMenu/index.vue
+++ b/webapp/components/notifications/NotificationMenu/index.vue
@@ -54,7 +54,7 @@ const NOTIFICATIONS = gql(`{
     notifications(read: false, orderBy: createdAt_desc) {
       id read createdAt
       post {
-        title contentExcerpt slug
+        id createdAt disabled deleted title contentExcerpt slug
         author { id slug name disabled deleted }
       }
     }

From 055b79bfe224a3ab994a666989981ec418c1aa7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 01:46:29 +0200
Subject: [PATCH 27/27] RemoveLinks is better suited as a filter

Unfortunately with `v-html` you cannot use filters directly in
handlebars.
See: https://github.com/nuxt/nuxt.js/issues/231

I also fixed the tests even **without** mocking vue-filters.js plugin :+1:
---
 webapp/components/PostCard/index.vue              |  3 +--
 webapp/components/PostCard/spec.js                |  2 ++
 .../notifications/Notification/index.vue          | 13 ++++++-------
 .../components/notifications/Notification/spec.js |  2 ++
 .../notifications/NotificationList/spec.js        |  2 ++
 .../notifications/NotificationMenu/spec.js        |  2 ++
 webapp/mixins/removeLinks.js                      | 15 ---------------
 webapp/plugins/vue-filters.js                     | 13 ++++++++++++-
 8 files changed, 27 insertions(+), 25 deletions(-)
 delete mode 100644 webapp/mixins/removeLinks.js

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 6cf5b5d7c..acddba5d6 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -76,7 +76,6 @@
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
-import RemoveLinks from '~/mixins/removeLinks.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -96,7 +95,7 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
       const { author } = this.post
diff --git a/webapp/components/PostCard/spec.js b/webapp/components/PostCard/spec.js
index cb1be45ee..1914733c0 100644
--- a/webapp/components/PostCard/spec.js
+++ b/webapp/components/PostCard/spec.js
@@ -2,11 +2,13 @@ import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import PostCard from '.'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index 14f660ed6..40b7d9405 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -2,11 +2,11 @@
   <ds-space margin-bottom="x-small">
     <no-ssr>
       <ds-space margin-bottom="x-small">
-      <hc-user
-        :user="post.author"
-        :date-time="post.createdAt"
-        :trunc="35"
-      />
+        <hc-user
+          :user="post.author"
+          :date-time="post.createdAt"
+          :trunc="35"
+        />
       </ds-space>
       <ds-text color="soft">
         {{ $t("notifications.menu.mentioned") }}
@@ -38,7 +38,6 @@
 
 <script>
 import HcUser from '~/components/User'
-import RemoveLinks from '~/mixins/removeLinks'
 
 export default {
   name: 'Notification',
@@ -53,7 +52,7 @@ export default {
   },
   computed: {
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     post() {
       return this.notification.post || {}
diff --git a/webapp/components/notifications/Notification/spec.js b/webapp/components/notifications/Notification/spec.js
index c65f0ba3c..c55ea7bdc 100644
--- a/webapp/components/notifications/Notification/spec.js
+++ b/webapp/components/notifications/Notification/spec.js
@@ -1,10 +1,12 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import Notification from '.'
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 
diff --git a/webapp/components/notifications/NotificationList/spec.js b/webapp/components/notifications/NotificationList/spec.js
index a4c129620..c433abd80 100644
--- a/webapp/components/notifications/NotificationList/spec.js
+++ b/webapp/components/notifications/NotificationList/spec.js
@@ -9,6 +9,7 @@ import NotificationList from '.'
 import Notification from '../Notification'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 import Styleguide from '@human-connection/styleguide'
 
@@ -16,6 +17,7 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
diff --git a/webapp/components/notifications/NotificationMenu/spec.js b/webapp/components/notifications/NotificationMenu/spec.js
index a9f89f31f..4c9dd9d43 100644
--- a/webapp/components/notifications/NotificationMenu/spec.js
+++ b/webapp/components/notifications/NotificationMenu/spec.js
@@ -2,10 +2,12 @@ import { config, shallowMount, createLocalVue } from '@vue/test-utils'
 import NotificationMenu from '.'
 
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['dropdown'] = '<span class="dropdown"><slot /></span>'
diff --git a/webapp/mixins/removeLinks.js b/webapp/mixins/removeLinks.js
deleted file mode 100644
index e9a2de6b8..000000000
--- a/webapp/mixins/removeLinks.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  methods: {
-    removeLinks(content) {
-      if (!content) return ''
-      // remove all links from excerpt to prevent issues with the surrounding link
-      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
-    }
-  }
-}
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index 93fa1f50b..bf59a7dba 100644
--- a/webapp/plugins/vue-filters.js
+++ b/webapp/plugins/vue-filters.js
@@ -6,7 +6,7 @@ import formatRelative from 'date-fns/formatRelative'
 import addSeconds from 'date-fns/addSeconds'
 import accounting from 'accounting'
 
-export default ({ app }) => {
+export default ({ app = {} }) => {
   const locales = {
     en: enUS,
     de: de,
@@ -88,6 +88,17 @@ export default ({ app }) => {
           return index === 0 ? letter.toUpperCase() : letter.toLowerCase()
         })
         .replace(/\s+/g, '')
+    },
+    removeLinks: content => {
+      if (!content) return ''
+      // remove all links from excerpt to prevent issues with the surrounding link
+      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      // do not display content that is only linebreaks
+      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+        excerpt = ''
+      }
+
+      return excerpt
     }
   })