Add warning for BIDI characters in page renders and in diffs (#17562)

Fix #17514

Given the comments I've adjusted this somewhat. The numbers of characters detected are increased and include things like the use of U+300 to make à instead of à and non-breaking spaces.

There is a button which can be used to escape the content to show it.

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: Gwyneth Morgan <gwymor@tilde.club>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 28 insertions, 0 deletions

diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js
new file mode 100644
index 0000000000..5791c23155
--- /dev/null
+++ b/web_src/js/features/repo-unicode-escape.js
@@ -0,0 +1,28 @@
+export function initUnicodeEscapeButton() {
+  $(document).on('click', 'a.escape-button', (e) => {
+    e.preventDefault();
+    $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped');
+    $(e.target).hide();
+    $(e.target).siblings('a.unescape-button').show();
+  });
+  $(document).on('click', 'a.unescape-button', (e) => {
+    e.preventDefault();
+    $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped');
+    $(e.target).hide();
+    $(e.target).siblings('a.escape-button').show();
+  });
+  $(document).on('click', 'a.toggle-escape-button', (e) => {
+    e.preventDefault();
+    const fileContent = $(e.target).parents('.file-content, .non-diff-file-content');
+    const fileView = fileContent.find('.file-code, .file-view');
+    if (fileView.hasClass('unicode-escaped')) {
+      fileView.removeClass('unicode-escaped');
+      fileContent.find('a.unescape-button').hide();
+      fileContent.find('a.escape-button').show();
+    } else {
+      fileView.addClass('unicode-escaped');
+      fileContent.find('a.unescape-button').show();
+      fileContent.find('a.escape-button').hide();
+    }
+  });
+}