refactor suggestion list

webapp/components/Editor/Editor.vue

@@ -4,14 +4,12 @@
     <editor-content ref="editor" :editor="editor" />
     <context-menu ref="contextMenu" />
     <suggestion-list
-      v-show="showSuggestions"
       ref="suggestions"
       :suggestion-type="suggestionType"
       :filtered-items="filteredItems"
       :navigated-item-index="navigatedItemIndex"
       :query="query"
       :select-item="selectItem"
-      :has-results="hasResults"
     />
     <link-input v-show="linkMenuIsActive" ref="linkMenu" :editorCommand="editor.commands.link" />
   </div>
@@ -68,12 +66,6 @@ export default {
   },
   computed: {
     ...mapGetters({ placeholder: 'editor/placeholder' }),
-    hasResults() {
-      return this.filteredItems.length
-    },
-    showSuggestions() {
-      return this.query || this.hasResults
-    },
     optionalExtensions() {
       const extensions = []
       // Don't change the following line. The functionallity is in danger!
@@ -290,32 +282,6 @@ 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;

webapp/components/Editor/SuggestionList.vue

@@ -1,48 +1,29 @@
 <template>
-  <div class="suggestion-list">
+  <ul v-show="showSuggestions" class="suggestion-list">
-    <!-- "filteredItems" array is not empty -->
+    <li
-    <template v-if="hasResults">
-      <div
       v-for="(item, index) in filteredItems"
       :key="item.id"
       class="suggestion-list__item"
       :class="{ 'is-selected': navigatedItemIndex === index }"
       @click="selectItem(item)"
     >
-        <div v-if="isMention">@{{ item.slug }}</div>
+      {{ createItemLabel(item) }}
-        <div v-if="isHashtag">#{{ item.id }}</div>
+    </li>
-      </div>
+    <template v-if="isHashtag">
-      <div v-if="isHashtag">
+      <li v-if="!query" class="suggestion-list__item hint">
-        <!-- if query is not empty and is find fully in the suggestions array ... -->
+        {{ $t('editor.hashtag.addLetter') }}
-        <div v-if="query && !filteredItems.find(el => el.id === query)">
+      </li>
-          <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addHashtag') }}</div>
+      <template v-else-if="!filteredItems.find(el => el.id === query)">
-          <div class="suggestion-list__item" @click="selectItem({ id: query })">#{{ query }}</div>
+        <li class="suggestion-list__item hint">{{ $t('editor.hashtag.addHashtag') }}</li>
-        </div>
+        <li class="suggestion-list__item" @click="selectItem({ id: query })">#{{ query }}</li>
-        <!-- otherwise if sanitized query is empty advice the user to add a char -->
-        <div v-else-if="!query">
-          <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addLetter') }}</div>
-        </div>
-      </div>
       </template>
-    <!-- if "!hasResults" -->
+    </template>
-    <div v-else>
+    <template v-else-if="isMention">
-      <div
+      <li v-if="!hasResults" class="suggestion-list__item hint">
-        v-if="isMention"
+        {{ $t('editor.mention.noUsersFound') }}
-        class="suggestion-list__item is-empty"
+      </li>
-      >{{ $t('editor.mention.noUsersFound') }}</div>
+    </template>
-      <div v-if="isHashtag">
+  </ul>
-        <div
-          v-if="query === ''"
-          class="suggestion-list__item is-empty"
-        >{{ $t('editor.hashtag.noHashtagsFound') }}</div>
-        <!-- if "query" is not empty -->
-        <div v-else>
-          <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addHashtag') }}</div>
-          <div class="suggestion-list__item" @click="selectItem({ id: query })">#{{ query }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -55,15 +36,60 @@ export default {
     query: String,
     navigatedItemIndex: Number,
     selectItem: Function,
-    hasResults: Number,
   },
   computed: {
+    hasResults() {
+      return this.filteredItems.length > 0
+    },
     isMention() {
       return this.suggestionType === MENTION
     },
     isHashtag() {
       return this.suggestionType === HASHTAG
     },
+    showSuggestions() {
+      return this.query || this.hasResults
+    },
+  },
+  methods: {
+    createItemLabel(item) {
+      if (this.isMention) {
+        return `@${item.slug}`
+      } else {
+        return `#${item.id}`
+      }
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.suggestion-list {
+  list-style-type: none;
+  padding: 0.2rem;
+  border: 2px solid rgba($color-neutral-0, 0.1);
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
+.suggestion-list__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);
+  }
+
+  &.hint {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+</style>