PLT-1752/PLT-3567/PLT-3998 Highlighting links in search, unit tests for autolinking (#3865)

* Added highlighting to links when their URL includes the search term

* Decoupling UserStore from react-router to allow for unit tests involving it

* PLT-3998 Added SiteURL as an option to be passed into the text formatting code

* Removed reference to PreferenceStore and window from TextFormatting

* Refactored TextFormatting to remove remaining browser-only code

* Updated ChannelHeader and MessageWrapper to match the changes to TextFormatting

* Increased max listeners for Preference and Emoji stores

* PLT-3832 Added automated unit tests for autolinking

* PLT-3567 Rerender posts when mention keywords change

* Updated RHS and search to match the changes to TextFormatting

* Broke TextFormatting's dependency on the UserStore

1 files changed, 20 insertions, 10 deletions

diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx
index 028e667fd..f6b218812 100644
--- a/webapp/utils/markdown.jsx
+++ b/webapp/utils/markdown.jsx
@@ -6,12 +6,11 @@ import * as SyntaxHighlighting from './syntax_hightlighting.jsx';
 
 import marked from 'marked';
 import katex from 'katex';
-import 'katex/dist/katex.min.css';
 
 function markdownImageLoaded(image) {
     image.style.height = 'auto';
 }
-window.markdownImageLoaded = markdownImageLoaded;
+global.markdownImageLoaded = markdownImageLoaded;
 
 class MattermostMarkdownRenderer extends marked.Renderer {
     constructor(options, formattingOptions = {}) {
@@ -63,11 +62,11 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         const content = SyntaxHighlighting.highlight(usedLanguage, code);
         let searchedContent = '';
 
-        if (this.formattingOptions.searchTerm) {
+        if (this.formattingOptions.searchPatterns) {
             const tokens = new Map();
 
             let searched = TextFormatting.sanitizeHtml(code);
-            searched = TextFormatting.highlightSearchTerms(searched, tokens, this.formattingOptions.searchTerm);
+            searched = TextFormatting.highlightSearchTerms(searched, tokens, this.formattingOptions.searchPatterns);
 
             if (tokens.size > 0) {
                 searched = TextFormatting.replaceTokens(searched, tokens);
@@ -94,9 +93,9 @@ class MattermostMarkdownRenderer extends marked.Renderer {
     codespan(text) {
         let output = text;
 
-        if (this.formattingOptions.searchTerm) {
+        if (this.formattingOptions.searchPatterns) {
             const tokens = new Map();
-            output = TextFormatting.highlightSearchTerms(output, tokens, this.formattingOptions.searchTerm);
+            output = TextFormatting.highlightSearchTerms(output, tokens, this.formattingOptions.searchPatterns);
             output = TextFormatting.replaceTokens(output, tokens);
         }
 
@@ -149,11 +148,22 @@ class MattermostMarkdownRenderer extends marked.Renderer {
             outHref = `http://${outHref}`;
         }
 
-        let output = '<a class="theme markdown__link" href="' + outHref + '" rel="noreferrer"';
+        let output = '<a class="theme markdown__link';
+
+        if (this.formattingOptions.searchPatterns) {
+            for (const pattern of this.formattingOptions.searchPatterns) {
+                if (pattern.test(href)) {
+                    output += ' search-highlight';
+                    break;
+                }
+            }
+        }
+
+        output += '" href="' + outHref + '" rel="noreferrer"';
 
         // special case for channel links and permalinks that are inside the app
-        if (new RegExp('^' + TextFormatting.escapeRegex(global.mm_config.SiteURL) + '\\/[^\\/]+\\/(pl|channels)\\/').test(outHref)) {
-            output += ' data-link="' + outHref.substring(global.mm_config.SiteURL.length) + '"';
+        if (this.formattingOptions.siteURL && new RegExp('^' + TextFormatting.escapeRegex(this.formattingOptions.siteURL) + '\\/[^\\/]+\\/(pl|channels)\\/').test(outHref)) {
+            output += ' data-link="' + outHref.substring(this.formattingOptions.siteURL) + '"';
         } else {
             output += ' target="_blank"';
         }
@@ -201,7 +211,7 @@ class MattermostMarkdownRenderer extends marked.Renderer {
     }
 }
 
-export function format(text, options) {
+export function format(text, options = {}) {
     const markdownOptions = {
         renderer: new MattermostMarkdownRenderer(null, options),
         sanitize: true,