From e96fb9c32c3aa84692310eccdd10c1ea9fa7d15f Mon Sep 17 00:00:00 2001
From: Claudio Costa <cstcld91@gmail.com>
Date: Wed, 8 Nov 2023 16:21:26 -0600
Subject: [PATCH] Register WebVTT format to be previewable as text (#25289)

---
 webapp/channels/src/utils/constants.tsx               | 3 ++-
 webapp/channels/src/utils/syntax_highlighting.test.ts | 9 +++++++++
 webapp/channels/src/utils/syntax_highlighting.tsx     | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 895d42f090..fb2560d066 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -1444,7 +1444,7 @@ export const Constants = {
     MENTIONS_REGEX: /(?:\B|\b_+)@([a-z0-9.\-_]+)/gi,
     DEFAULT_CHARACTER_LIMIT: 4000,
     IMAGE_TYPE_GIF: 'gif',
-    TEXT_TYPES: ['txt', 'rtf'],
+    TEXT_TYPES: ['txt', 'rtf', 'vtt'],
     IMAGE_TYPES: ['jpg', 'gif', 'bmp', 'png', 'jpeg', 'tiff', 'tif', 'psd'],
     AUDIO_TYPES: ['mp3', 'wav', 'wma', 'm4a', 'flac', 'aac', 'ogg', 'm4r'],
     VIDEO_TYPES: ['mp4', 'avi', 'webm', 'mkv', 'wmv', 'mpg', 'mov', 'flv'],
@@ -1902,6 +1902,7 @@ export const Constants = {
         vbscript: {name: 'VBScript', extensions: ['vbs'], aliases: ['vbs']},
         verilog: {name: 'Verilog', extensions: ['v', 'veo', 'sv', 'svh']},
         vhdl: {name: 'VHDL', extensions: ['vhd', 'vhdl'], aliases: ['vhd']},
+        vtt: {name: 'WebVTT', extensions: ['vtt'], aliases: ['vtt', 'webvtt']},
         xml: {name: 'HTML, XML', extensions: ['xml', 'html', 'xhtml', 'rss', 'atom', 'xsl', 'plist']},
         yaml: {name: 'YAML', extensions: ['yaml'], aliases: ['yml']},
     },
diff --git a/webapp/channels/src/utils/syntax_highlighting.test.ts b/webapp/channels/src/utils/syntax_highlighting.test.ts
index 14a728a43f..49df5003e8 100644
--- a/webapp/channels/src/utils/syntax_highlighting.test.ts
+++ b/webapp/channels/src/utils/syntax_highlighting.test.ts
@@ -3,6 +3,7 @@
 
 import hlJS from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
+import plaintext from 'highlight.js/lib/languages/plaintext';
 import swift from 'highlight.js/lib/languages/swift';
 
 import {highlight} from './syntax_highlighting';
@@ -25,4 +26,12 @@ describe('utils/syntax_highlighting.tsx', () => {
 
         expect(hlJS.registerLanguage).toHaveBeenCalledWith('javascript', javascript);
     });
+
+    it('should register WebVTT format as plaintext', async () => {
+        expect.assertions(1);
+
+        await highlight('vtt', '');
+
+        expect(hlJS.registerLanguage).toHaveBeenCalledWith('vtt', plaintext);
+    });
 });
diff --git a/webapp/channels/src/utils/syntax_highlighting.tsx b/webapp/channels/src/utils/syntax_highlighting.tsx
index b4471aaa99..8060bbe138 100644
--- a/webapp/channels/src/utils/syntax_highlighting.tsx
+++ b/webapp/channels/src/utils/syntax_highlighting.tsx
@@ -145,6 +145,7 @@ async function registerLanguage(languageName: string) {
         vbscript: () => import('highlight.js/lib/languages/vbscript'),
         verilog: () => import('highlight.js/lib/languages/verilog'),
         vhdl: () => import('highlight.js/lib/languages/vhdl'),
+        vtt: () => import('highlight.js/lib/languages/plaintext'),
         xml: () => import('highlight.js/lib/languages/xml'),
         yaml: () => import('highlight.js/lib/languages/yaml'),
     };