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

website/client/components/tasks/tagsPopup.vue

@@ -8,7 +8,7 @@
         .col-4(v-for="tag in tags")
           .custom-control.custom-checkbox
             input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags", :id="`tag-${tag.id}`")
-            label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`") {{tag.name}}
+            label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`", v-markdown="tag.name")
   .tags-footer
     span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
     span.close-tags(@click="close()") {{$t("close")}}
@@ -95,8 +95,13 @@
 </style>
 
 <script>
+import markdownDirective from 'client/directives/markdown';
+
 export default {
   props: ['tags', 'value'],
+  directives: {
+    markdown: markdownDirective,
+  },
   data () {
     return {
       selectedTags: [],

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 () {