Merge branch 'djadmin-v-safe-html-markdown-fields' into 'master'

Switch to v-safe-html for Markdown Fields

See merge request gitlab-org/gitlab!84463

app/assets/javascripts/vue_shared/components/markdown/field.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { debounce, unescape } from 'lodash';
@@ -24,6 +24,9 @@ export default {
     GlIcon,
     Suggestions,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   mixins: [glFeatureFlagsMixin()],
   props: {
     /**
@@ -308,6 +311,9 @@ export default {
         );
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['gl-emoji'],
+  },
 };
 </script>
 
@@ -369,19 +375,19 @@ export default {
       <div
         v-show="previewMarkdown"
         ref="markdown-preview"
+        v-safe-html:[$options.safeHtmlConfig]="markdownPreview"
         class="js-vue-md-preview md md-preview-holder"
-        v-html="markdownPreview /* eslint-disable-line vue/no-v-html */"
       ></div>
     </template>
     <div
       v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading"
+      v-safe-html:[$options.safeHtmlConfig]="referencedCommands"
       class="referenced-commands"
       data-testid="referenced-commands"
-      v-html="referencedCommands /* eslint-disable-line vue/no-v-html */"
     ></div>
     <div v-if="shouldShowReferencedUsers" class="referenced-users">
       <gl-icon name="warning-solid" />
-      <span v-html="addMultipleToDiscussionWarning /* eslint-disable-line vue/no-v-html */"></span>
+      <span v-safe-html:[$options.safeHtmlConfig]="addMultipleToDiscussionWarning"></span>
     </div>
   </div>
 </template>

spec/frontend/vue_shared/components/markdown/field_spec.js

@@ -85,7 +85,7 @@ describe('Markdown field component', () => {
   describe('mounted', () => {
     const previewHTML = `
     <p>markdown preview</p>
-    <video src="${FIXTURES_PATH}/static/mock-video.mp4" muted="muted"></video>
+    <video src="${FIXTURES_PATH}/static/mock-video.mp4"></video>
   `;
     let previewLink;
     let writeLink;