Fixed broken Editor tests without breaking the Mentions and the Hashtags in the Editor

webapp/components/Editor/Editor.spec.js

@@ -71,26 +71,38 @@ describe('Editor.vue', () => {
 
     describe('optional extensions', () => {
       it('sets the Mention items to the users', () => {
-        propsData.users = [{ id: 'u345' }]
+        propsData.users = [
+          {
+            id: 'u345',
+          },
+        ]
         wrapper = Wrapper()
         expect(wrapper.vm.editor.extensions.options.mention.items()).toEqual(propsData.users)
       })
 
       it('mentions is not an option when there are no users', () => {
         expect(wrapper.vm.editor.extensions.options).toEqual(
-          expect.not.objectContaining({ mention: expect.anything() }),
+          expect.not.objectContaining({
+            mention: expect.anything(),
+          }),
         )
       })
 
       it('sets the Hashtag items to the hashtags', () => {
-        propsData.hashtags = [{ id: 'Frieden' }]
+        propsData.hashtags = [
+          {
+            id: 'Frieden',
+          },
+        ]
         wrapper = Wrapper()
         expect(wrapper.vm.editor.extensions.options.hashtag.items()).toEqual(propsData.hashtags)
       })
 
       it('hashtags is not an option when there are no hashtags', () => {
         expect(wrapper.vm.editor.extensions.options).toEqual(
-          expect.not.objectContaining({ hashtag: expect.anything() }),
+          expect.not.objectContaining({
+            hashtag: expect.anything(),
+          }),
         )
       })
     })

webapp/components/Editor/Editor.vue

@@ -18,9 +18,7 @@
           <!-- if query is not empty and is find fully in the suggestions array ... -->
           <div v-if="query && !filteredItems.find(el => el.name === query)">
             <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addHashtag') }}</div>
-            <div class="suggestion-list__item" @click="selectItem({ name: query })">
+            <div class="suggestion-list__item" @click="selectItem({ name: query })">#{{ query }}</div>
-              #{{ query }}
-            </div>
           </div>
           <!-- otherwise if sanitized query is empty advice the user to add a char -->
           <div v-else-if="!query">
@@ -30,19 +28,19 @@
       </template>
       <!-- if "!hasResults" -->
       <div v-else>
-        <div v-if="isMention" class="suggestion-list__item is-empty">
+        <div
-          {{ $t('editor.mention.noUsersFound') }}
+          v-if="isMention"
-        </div>
+          class="suggestion-list__item is-empty"
+        >{{ $t('editor.mention.noUsersFound') }}</div>
         <div v-if="isHashtag">
-          <div v-if="query === ''" class="suggestion-list__item is-empty">
+          <div
-            {{ $t('editor.hashtag.noHashtagsFound') }}
+            v-if="query === ''"
-          </div>
+            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({ name: query })">
+            <div class="suggestion-list__item" @click="selectItem({ name: query })">#{{ query }}</div>
-              #{{ query }}
-            </div>
           </div>
         </div>
       </div>
@@ -128,18 +126,14 @@
           size="small"
           :ghost="!isActive.heading({ level: 3 })"
           @click.prevent="commands.heading({ level: 3 })"
-        >
+        >H3</ds-button>
-          H3
-        </ds-button>
 
         <ds-button
           class="menubar__button"
           size="small"
           :ghost="!isActive.heading({ level: 4 })"
           @click.prevent="commands.heading({ level: 4 })"
-        >
+        >H4</ds-button>
-          H4
-        </ds-button>
 
         <ds-button
           class="menubar__button"
@@ -204,8 +198,8 @@ export default {
     EditorMenuBubble,
   },
   props: {
-    users: { type: Array, default: () => [] }, // If 'null', than the Mention extention is not assigned.
+    users: { type: Array, default: () => null }, // If 'null', than the Mention extention is not assigned.
-    hashtags: { type: Array, default: () => [] }, // If 'null', than the Hashtag extention is not assigned.
+    hashtags: { type: Array, default: () => null }, // If 'null', than the Hashtag extention is not assigned.
     value: { type: String, default: '' },
     doc: { type: Object, default: () => {} },
   },