Highlight BiDi chars on the frontend

Highlights BiDi chars in the refactored source viewer

app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue

 <script>
 import { GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { setAttributes } from '~/lib/utils/dom_utils';
+import { BIDI_CHARS, BIDI_CHARS_CLASS_LIST, BIDI_CHAR_TOOLTIP } from '../constants';
 
 export default {
   components: {
@@ -22,6 +24,34 @@ 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>
@@ -39,6 +69,6 @@ export default {
 
     <pre
       class="code highlight gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11!"
-    ><code><span :id="`LC${number}`" v-safe-html="content" :lang="language" class="line" data-testid="content"></span></code></pre>
+    ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/source_viewer/constants.js

+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).
@@ -111,3 +113,24 @@ export const ROUGE_TO_HLJS_LANGUAGE_MAP = {
 };
 
 export const LINES_PER_CHUNK = 70;
+
+export const BIDI_CHARS = [
+  '\u202A', // Left-to-Right Embedding (Try treating following text as left-to-right)
+  '\u202B', // Right-to-Left Embedding (Try treating following text as right-to-left)
+  '\u202D', // Left-to-Right Override (Force treating following text as left-to-right)
+  '\u202E', // Right-to-Left Override (Force treating following text as right-to-left)
+  '\u2066', // Left-to-Right Isolate (Force treating following text as left-to-right without affecting adjacent text)
+  '\u2067', // Right-to-Left Isolate (Force treating following text as right-to-left without affecting adjacent text)
+  '\u2068', // First Strong Isolate (Force treating following text in direction indicated by the next character)
+  '\u202C', // Pop Directional Formatting (Terminate nearest LRE, RLE, LRO, or RLO)
+  '\u2069', // Pop Directional Isolate (Terminate nearest LRI or RLI)
+  '\u061C', // Arabic Letter Mark (Right-to-left zero-width Arabic character)
+  '\u200F', // Right-to-Left Mark (Right-to-left zero-width character non-Arabic character)
+  '\u200E', // Left-to-Right Mark (Left-to-right zero-width character)
+];
+
+export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip';
+
+export const BIDI_CHAR_TOOLTIP = __(
+  'Potentially unwanted character detected: Unicode BiDi Control',
+);

spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js

 import { GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ChunkLine from '~/vue_shared/components/source_viewer/components/chunk_line.vue';
+import {
+  BIDI_CHARS,
+  BIDI_CHARS_CLASS_LIST,
+  BIDI_CHAR_TOOLTIP,
+} from '~/vue_shared/components/source_viewer/constants';
 
 const DEFAULT_PROPS = {
   number: 2,
@@ -17,6 +22,7 @@ describe('Chunk Line component', () => {
 
   const findLink = () => wrapper.findComponent(GlLink);
   const findContent = () => wrapper.findByTestId('content');
+  const findWrappedBidiChars = () => wrapper.findAllByTestId('bidi-wrapper');
 
   beforeEach(() => {
     createComponent();
@@ -25,6 +31,22 @@ describe('Chunk Line component', () => {
   afterEach(() => wrapper.destroy());
 
   describe('rendering', () => {
+    it('wraps BiDi characters', () => {
+      const content = `// some content ${BIDI_CHARS.toString()} with BiDi chars`;
+      createComponent({ content });
+      const wrappedBidiChars = findWrappedBidiChars();
+
+      expect(wrappedBidiChars.length).toBe(BIDI_CHARS.length);
+
+      wrappedBidiChars.wrappers.forEach((_, i) => {
+        expect(wrappedBidiChars.at(i).text()).toBe(BIDI_CHARS[i]);
+        expect(wrappedBidiChars.at(i).attributes()).toMatchObject({
+          class: BIDI_CHARS_CLASS_LIST,
+          title: BIDI_CHAR_TOOLTIP,
+        });
+      });
+    });
+
     it('renders a line number', () => {
       expect(findLink().attributes()).toMatchObject({
         'data-line-number': `${DEFAULT_PROPS.number}`,