diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-09-20 16:18:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-09-20 16:18:24 +0300 |
commit | 0653e08efd039a5905f3fa4f6e9cef9f5d2f799c (patch) | |
tree | 4dcc884cf6d81db44adae4aa99f8ec1233a41f55 /app/assets/javascripts/popovers | |
parent | 744144d28e3e7fddc117924fef88de5d9674fe4c (diff) |
Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42
Diffstat (limited to 'app/assets/javascripts/popovers')
-rw-r--r-- | app/assets/javascripts/popovers/components/popovers.vue | 21 |
1 files changed, 9 insertions, 12 deletions
diff --git a/app/assets/javascripts/popovers/components/popovers.vue b/app/assets/javascripts/popovers/components/popovers.vue index 05a209a97ad..a758503b56b 100644 --- a/app/assets/javascripts/popovers/components/popovers.vue +++ b/app/assets/javascripts/popovers/components/popovers.vue @@ -1,11 +1,5 @@ <script> -// We can't use v-safe-html here as the popover's title or content might contains SVGs that would -// be stripped by the directive's sanitizer. Instead, we fallback on v-html and we use GitLab's -// dompurify config that lets SVGs be rendered properly. -// Context: https://gitlab.com/gitlab-org/gitlab/-/issues/247207 -/* eslint-disable vue/no-v-html */ -import { GlPopover } from '@gitlab/ui'; -import { sanitize } from '~/lib/dompurify'; +import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui'; const newPopover = (element) => { const { content, html, placement, title, triggers = 'focus' } = element.dataset; @@ -24,6 +18,9 @@ export default { components: { GlPopover, }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, data() { return { popovers: [], @@ -71,9 +68,9 @@ export default { popoverExists(element) { return this.popovers.some((popover) => popover.target === element); }, - getSafeHtml(html) { - return sanitize(html); - }, + }, + safeHtmlConfig: { + ADD_TAGS: ['use'], // to support icon SVGs }, }; </script> @@ -82,10 +79,10 @@ export default { <div> <gl-popover v-for="(popover, index) in popovers" :key="index" v-bind="popover"> <template #title> - <span v-if="popover.html" v-html="getSafeHtml(popover.title)"></span> + <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.title"></span> <span v-else>{{ popover.title }}</span> </template> - <span v-if="popover.html" v-html="getSafeHtml(popover.content)"></span> + <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.content"></span> <span v-else>{{ popover.content }}</span> </gl-popover> </div> |