Add latest changes from gitlab-org/gitlab@master

4 files changed, 36 insertions, 37 deletions

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 257b9f57222..6395dbdac50 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -1,8 +1,6 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { setAttributes } from '~/lib/utils/dom_utils';
-import { BIDI_CHARS, BIDI_CHARS_CLASS_LIST, BIDI_CHAR_TOOLTIP } from '../constants';
 
 export default {
   directives: {
@@ -27,34 +25,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    formattedContent() {
-      let { content } = this;
-
-      BIDI_CHARS.forEach((bidiChar) => {
-        if (content.includes(bidiChar)) {
-          content = content.replace(bidiChar, this.wrapBidiChar(bidiChar));
-        }
-      });
-
-      return content;
-    },
-  },
-  methods: {
-    wrapBidiChar(bidiChar) {
-      const span = document.createElement('span');
-
-      setAttributes(span, {
-        class: BIDI_CHARS_CLASS_LIST,
-        title: BIDI_CHAR_TOOLTIP,
-        'data-testid': 'bidi-wrapper',
-      });
-
-      span.innerText = bidiChar;
-
-      return span.outerHTML;
-    },
-  },
 };
 </script>
 <template>
@@ -79,6 +49,6 @@ export default {
 
     <pre
       class="gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-line-height-normal"
-    ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre>
+    ><code><span :id="`LC${number}`" v-safe-html="content" :lang="language" class="line" data-testid="content"></span></code></pre>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
index e2d1a81ee2b..10489a4eff3 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
@@ -1,5 +1,3 @@
-import { __ } from '~/locale';
-
 // Language map from Rouge::Lexer to highlight.js
 // Rouge::Lexer - We use it on the BE to determine the language of a source file (https://github.com/rouge-ruby/rouge/blob/master/docs/Languages.md).
 // Highlight.js - We use it on the FE to highlight the syntax of a source file (https://github.com/highlightjs/highlight.js/tree/main/src/languages).
@@ -139,9 +137,7 @@ export const BIDI_CHARS = [
 
 export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip';
 
-export const BIDI_CHAR_TOOLTIP = __(
-  'Potentially unwanted character detected: Unicode BiDi Control',
-);
+export const BIDI_CHAR_TOOLTIP = 'Potentially unwanted character detected: Unicode BiDi Control';
 
 export const HLJS_COMMENT_SELECTOR = 'hljs-comment';
 
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
index 5d24a3d110b..e38c9b8f66f 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
@@ -1,6 +1,8 @@
-import { HLJS_ON_AFTER_HIGHLIGHT } from '../constants';
 import wrapComments from './wrap_comments';
 import linkDependencies from './link_dependencies';
+import wrapBidiChars from './wrap_bidi_chars';
+
+export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
 
 /**
  * Registers our plugins for Highlight.js
@@ -10,6 +12,7 @@ import linkDependencies from './link_dependencies';
  * @param {Object} hljs - the Highlight.js instance.
  */
 export const registerPlugins = (hljs, fileType, rawContent) => {
+  hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
   hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapComments });
   hljs.addPlugin({
     [HLJS_ON_AFTER_HIGHLIGHT]: (result) => linkDependencies(result, fileType, rawContent),
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_bidi_chars.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_bidi_chars.js
new file mode 100644
index 00000000000..3b6cd96ef78
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_bidi_chars.js
@@ -0,0 +1,30 @@
+import {
+  BIDI_CHARS,
+  BIDI_CHARS_CLASS_LIST,
+  BIDI_CHAR_TOOLTIP,
+} from '~/vue_shared/components/source_viewer/constants';
+
+/**
+ * Highlight.js plugin for wrapping BIDI chars.
+ * This ensures potentially dangerous BIDI characters are highlighted.
+ *
+ * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+ *
+ * @param {Object} Result - an object that represents the highlighted result from Highlight.js
+ */
+
+function wrapBidiChar(bidiChar) {
+  return `<span class="${BIDI_CHARS_CLASS_LIST}" title="${BIDI_CHAR_TOOLTIP}">${bidiChar}</span>`;
+}
+
+export default (result) => {
+  let { value } = result;
+  BIDI_CHARS.forEach((bidiChar) => {
+    if (value.includes(bidiChar)) {
+      value = value.replace(bidiChar, wrapBidiChar(bidiChar));
+    }
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  result.value = value; // Highlight.js expects the result param to be mutated for plugins to work
+};