1 files changed, 7 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 657e4498b53..b5f2602af5e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,15 +1,16 @@
 <script>
-import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
-import '~/behaviors/markdown/render_gfm';
 import { debounce, unescape } from 'lodash';
 import { createAlert } from '~/flash';
 import GLForm from '~/gl_form';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { stripHtml } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import MarkdownHeader from './header.vue';
 import MarkdownToolbar from './toolbar.vue';
 
@@ -25,7 +26,7 @@ export default {
     Suggestions,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -313,7 +314,9 @@ export default {
       this.markdownPreview = data.body || __('Nothing to preview.');
 
       this.$nextTick()
-        .then(() => $(this.$refs['markdown-preview']).renderGFM())
+        .then(() => {
+          renderGFM(this.$refs['markdown-preview']);
+        })
         .catch(() =>
           createAlert({
             message: __('Error rendering Markdown preview'),