Added markdown to tag edit fields/popup (#9867)

website/client/components/tasks/taskModal.vue

@@ -143,7 +143,7 @@
                   .tags-none {{$t('none')}}
                   .dropdown-toggle
                 span.category-select(v-else)
-                  .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }}
+                  .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName", v-markdown='tagName')
                   .tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
                   .dropdown-toggle
           tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
@@ -346,7 +346,7 @@
       position: relative;
 
       label {
-        margin-bottom: 8px;
+        max-height: 30px;
       }
     }
 
@@ -637,6 +637,7 @@
 <script>
 import TagsPopup from './tagsPopup';
 import { mapGetters, mapActions, mapState } from 'client/libs/store';
+import markdownDirective from 'client/directives/markdown';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 import clone from 'lodash/clone';
 import Datepicker from 'vuejs-datepicker';
@@ -664,6 +665,9 @@ export default {
     toggleSwitch,
     draggable,
   },
+  directives: {
+    markdown: markdownDirective,
+  },
   // purpose is either create or edit, task is the task created or edited
   props: ['task', 'purpose', 'challengeId', 'groupId'],
   data () {