Commit 86a697f6 authored by Dheeraj Joshi's avatar Dheeraj Joshi Committed by Peter Hegman

Switch to v-safe-html for Markdown Fields

parent 238e5184
<script> <script>
import { GlIcon } from '@gitlab/ui'; import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
import $ from 'jquery'; import $ from 'jquery';
import '~/behaviors/markdown/render_gfm'; import '~/behaviors/markdown/render_gfm';
import { debounce, unescape } from 'lodash'; import { debounce, unescape } from 'lodash';
...@@ -24,6 +24,9 @@ export default { ...@@ -24,6 +24,9 @@ export default {
GlIcon, GlIcon,
Suggestions, Suggestions,
}, },
directives: {
SafeHtml: GlSafeHtmlDirective,
},
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
props: { props: {
/** /**
...@@ -308,6 +311,9 @@ export default { ...@@ -308,6 +311,9 @@ export default {
); );
}, },
}, },
safeHtmlConfig: {
ADD_TAGS: ['gl-emoji'],
},
}; };
</script> </script>
...@@ -369,19 +375,19 @@ export default { ...@@ -369,19 +375,19 @@ export default {
<div <div
v-show="previewMarkdown" v-show="previewMarkdown"
ref="markdown-preview" ref="markdown-preview"
v-safe-html:[$options.safeHtmlConfig]="markdownPreview"
class="js-vue-md-preview md md-preview-holder" class="js-vue-md-preview md md-preview-holder"
v-html="markdownPreview /* eslint-disable-line vue/no-v-html */"
></div> ></div>
</template> </template>
<div <div
v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading" v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading"
v-safe-html:[$options.safeHtmlConfig]="referencedCommands"
class="referenced-commands" class="referenced-commands"
data-testid="referenced-commands" data-testid="referenced-commands"
v-html="referencedCommands /* eslint-disable-line vue/no-v-html */"
></div> ></div>
<div v-if="shouldShowReferencedUsers" class="referenced-users"> <div v-if="shouldShowReferencedUsers" class="referenced-users">
<gl-icon name="warning-solid" /> <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>
</div> </div>
</template> </template>
...@@ -85,7 +85,7 @@ describe('Markdown field component', () => { ...@@ -85,7 +85,7 @@ describe('Markdown field component', () => {
describe('mounted', () => { describe('mounted', () => {
const previewHTML = ` const previewHTML = `
<p>markdown preview</p> <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 previewLink;
let writeLink; let writeLink;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment