Merge branch 'djadminv-html-notes-body' into 'master'

Switch to v-safe-html for rendering notes

See merge request gitlab-org/gitlab!72877

app/assets/javascripts/batch_comments/components/draft_note.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import PublishButton from './publish_button.vue';
@@ -10,6 +10,9 @@ export default {
     PublishButton,
     GlButton,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     draft: {
       type: Object,
@@ -72,6 +75,9 @@ export default {
       }
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use', 'gl-emoji'],
+  },
 };
 </script>
 <template>
@@ -104,8 +110,8 @@ export default {
     <template v-if="!isEditingDraft">
       <div
         v-if="draftCommands"
+        v-safe-html:[$options.safeHtmlConfig]="draftCommands"
         class="referenced-commands draft-note-commands"
-        v-html="draftCommands /* eslint-disable-line vue/no-v-html */"
       ></div>
 
       <p class="draft-note-actions d-flex">

app/assets/javascripts/notes/components/note_body.vue

 <script>
 import $ from 'jquery';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
@@ -19,6 +20,9 @@ export default {
     noteForm,
     Suggestions,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   mixins: [autosave],
   props: {
     note: {
@@ -144,6 +148,9 @@ export default {
       this.removeSuggestionInfoFromBatch(suggestionId);
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use', 'gl-emoji'],
+  },
 };
 </script>
 
@@ -163,11 +170,7 @@ export default {
       @addToBatch="addSuggestionToBatch"
       @removeFromBatch="removeSuggestionFromBatch"
     />
-    <div
-      v-else
-      class="note-text md"
-      v-html="note.note_html /* eslint-disable-line vue/no-v-html */"
-    ></div>
+    <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"