From ffbe0b949a3bdba6bbc20869e51f120c92af5ce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jun 2019 08:40:05 +0200
Subject: [PATCH] Translate menu item, renamed variables and tried to get
 hashtag to work correct

---
 webapp/components/Editor/index.vue    | 43 ++++++++++++++++-----------
 webapp/components/Editor/nodes/Tag.js |  1 +
 webapp/locales/de.json                |  8 ++++-
 webapp/locales/en.json                |  8 ++++-
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index d8fd45697..4375681b5 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -6,25 +6,27 @@
           v-for="(user, index) in filteredUsers"
           :key="user.id"
           class="suggestion-list__item"
-          :class="{ 'is-selected': navigatedUserIndex === index }"
+          :class="{ 'is-selected': navigatedItemIndex === index }"
           @click="selectItem(user, 'mention')"
         >
           @{{ user.slug }}
         </div>
       </template>
-      <div v-else class="suggestion-list__item is-empty">No users found</div>
+      <div v-else class="suggestion-list__item is-empty">
+        {{ $t('editor.mention.noUsersFound') }}
+      </div>
       <template v-if="tagsFilterHasResults">
         <div
           v-for="(tag, index) in filteredTags"
           :key="tag.id"
           class="suggestion-list__item"
-          :class="{ 'is-selected': navigatedUserIndex === index }"
+          :class="{ 'is-selected': navigatedItemIndex === index }"
           @click="selectItem(tag, 'tag')"
         >
           #{{ tag.name }}
         </div>
       </template>
-      <div v-else class="suggestion-list__item is-empty">No users found</div>
+      <div v-else class="suggestion-list__item is-empty">{{ $t('editor.tag.noTagsFound') }}</div>
     </div>
 
     <editor-menu-bubble :editor="editor">
@@ -246,7 +248,7 @@ export default {
               this.query = query
               this.filteredUsers = items
               this.suggestionRange = range
-              this.navigatedUserIndex = 0
+              this.navigatedItemIndex = 0
               this.renderPopup(virtualNode)
             },
             // is called when a suggestion is cancelled
@@ -255,7 +257,7 @@ export default {
               this.query = null
               this.filteredUsers = []
               this.suggestionRange = null
-              this.navigatedUserIndex = 0
+              this.navigatedItemIndex = 0
               this.destroyPopup()
             },
             // is called on every keyDown event while a suggestion is active
@@ -311,7 +313,7 @@ export default {
               this.query = query
               this.filteredTags = items
               this.suggestionRange = range
-              this.navigatedUserIndex = 0
+              this.navigatedItemIndex = 0
               this.renderPopup(virtualNode)
             },
             // is called when a suggestion is cancelled
@@ -320,7 +322,7 @@ export default {
               this.query = null
               this.filteredTags = []
               this.suggestionRange = null
-              this.navigatedUserIndex = 0
+              this.navigatedItemIndex = 0
               this.destroyPopup()
             },
             // is called on every keyDown event while a suggestion is active
@@ -340,6 +342,11 @@ export default {
                 this.enterHandler(this.filteredTags, 'tag')
                 return true
               }
+              // pressing space
+              if (event.keyCode === 32) {
+                // this.enterHandler(this.filteredTags, 'tag')
+                return true
+              }
               return false
             },
             // is called when a suggestion has changed
@@ -369,17 +376,17 @@ export default {
       suggestionRange: null,
       filteredUsers: [],
       filteredTags: [],
-      navigatedUserIndex: 0,
+      navigatedItemIndex: 0,
       insertMention: () => {},
       observer: null,
     }
   },
   computed: {
     usersFilterHasResults() {
-      return this.filteredUsers.length
+      return this.filteredUsers.length > 0
     },
     tagsFilterHasResults() {
-      return this.filteredTags.length
+      return this.filteredTags.length > 0
     },
     showSuggestions() {
       return this.query || this.usersFilterHasResults || this.tagsFilterHasResults
@@ -414,16 +421,16 @@ export default {
     // navigate to the previous item
     // if it's the first item, navigate to the last one
     upHandler(filteredArray) {
-      this.navigatedUserIndex =
-        (this.navigatedUserIndex + this.filteredArray.length - 1) % this.filteredArray.length
+      this.navigatedItemIndex =
+        (this.navigatedItemIndex + this.filteredArray.length - 1) % this.filteredArray.length
     },
     // navigate to the next item
     // if it's the last item, navigate to the first one
     downHandler(filteredArray) {
-      this.navigatedUserIndex = (this.navigatedUserIndex + 1) % this.filteredArray.length
+      this.navigatedItemIndex = (this.navigatedItemIndex + 1) % this.filteredArray.length
     },
     enterHandler(filteredArray, type) {
-      const item = this.filteredArray[this.navigatedUserIndex]
+      const item = this.filteredArray[this.navigatedItemIndex]
       if (item) {
         this.selectItem(item, type)
       }
@@ -439,8 +446,7 @@ export default {
         },
         tag: {
           // TODO: Fill up with input tag in search field
-          url: ``,
-          // callBack: () => {},
+          url: `/search/hashtag:${item.name}`,
           label: item.name,
         },
       }
@@ -625,6 +631,9 @@ li > p {
   .mention-suggestion {
     color: $color-primary;
   }
+  .tag {
+    color: $color-primary;
+  }
   .tag-suggestion {
     color: $color-primary;
   }
diff --git a/webapp/components/Editor/nodes/Tag.js b/webapp/components/Editor/nodes/Tag.js
index 0a7324c81..e372eb21c 100644
--- a/webapp/components/Editor/nodes/Tag.js
+++ b/webapp/components/Editor/nodes/Tag.js
@@ -31,6 +31,7 @@ export default class Tag extends TipTapMention {
           class: this.options.mentionClass,
           href: node.attrs.url,
           target: '_blank',
+          // contenteditable: 'true',
         },
         `${this.options.matcher.char}${node.attrs.label}`,
       ]
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 2f40bf165..cd9d86819 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -14,7 +14,13 @@
     "hello": "Hallo"
   },
   "editor": {
-    "placeholder": "Schreib etwas Inspirierendes..."
+    "placeholder": "Schreib etwas Inspirierendes...",
+    "mention": {
+      "noUsersFound": "Keine Benutzer gefunden"
+    },
+    "tag": {
+      "noTagsFound": "Keine Hashtags gefunden"
+    }
   },
   "profile": {
     "name": "Mein Profil",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 2d105bc3b..47e649395 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -14,7 +14,13 @@
     "hello": "Hello"
   },
   "editor": {
-    "placeholder": "Leave your inspirational thoughts..."
+    "placeholder": "Leave your inspirational thoughts...",
+    "mention": {
+      "noUsersFound": "No users found"
+    },
+    "tag": {
+      "noTagsFound": "No hashtags found"
+    }
   },
   "profile": {
     "name": "My Profile",