Merge pull request #2489 from uccser/issue/1833

fix: Regular Expression Search interactive doesn't show syntax highlighting
uccser · Jan 25, 2024 · 6e89e70 · 6e89e70
2 parents 589c762 + c70657c
commit 6e89e70
Showing 1 changed file with 44 additions and 44 deletions.
diff --git a/csfieldguide/static/interactives/regular-expression-search/js/regular-expression-search.js b/csfieldguide/static/interactives/regular-expression-search/js/regular-expression-search.js
@@ -1,63 +1,63 @@
 // Regular expression search using CodeMirrors
 // Author: Jack Morgan
 
-var urlParameters = require('../../../js/third-party/url-parameters.js');
+const urlParameters = require('../../../js/third-party/url-parameters.js');
 const CodeMirror = require('codemirror');
 
-RegularExpressionSearch = {};
-
-$(document).ready(function () {
+// Add RegEx syntax highlighting mode to Codemirror
+const _ = require('../../../js/codemirror-mode-regex.js');
 
-  // Save URL parameters (undefined if not available)
-  var starting_regex = urlParameters.getUrlParameter('regex');
-  var starting_text = urlParameters.getUrlParameter('text');
-  var reference = urlParameters.getUrlParameter('reference');
+RegularExpressionSearch = {};
 
-  // Create regex CodeMirror
-  RegularExpressionSearch.regex = CodeMirror(document.getElementById('interactive-regular-expression-search-regex'),{
-    value: "",
-    mode: "regex",
-    scrollbarStyle: "null"
-  });
+// Save URL parameters (undefined if not available)
+var starting_regex = urlParameters.getUrlParameter('regex');
+var starting_text = urlParameters.getUrlParameter('text');
+var reference = urlParameters.getUrlParameter('reference');
 
-  // Create search text CodeMirror
-  RegularExpressionSearch.search_text = CodeMirror.fromTextArea(document.getElementById('interactive-regular-expression-search-text'),{
-    mode: "text"
-    });
+// Create regex CodeMirror
+RegularExpressionSearch.regex = CodeMirror(document.getElementById('interactive-regular-expression-search-regex'),{
+  value: "",
+  mode: "regex",
+  scrollbarStyle: "null"
+});
 
-  // If regex box is changed
-  RegularExpressionSearch.regex.on("change", function(){
-    processRegularExpression();
+// Create search text CodeMirror
+RegularExpressionSearch.search_text = CodeMirror.fromTextArea(document.getElementById('interactive-regular-expression-search-text'),{
+  mode: "text"
   });
 
-  // If text box is changed
-  RegularExpressionSearch.search_text.on("change", function() {
-    processRegularExpression();
-  });
+// If regex box is changed
+RegularExpressionSearch.regex.on("change", function(){
+  processRegularExpression();
+});
 
-  // Prevent new lines occuring in regex
-  RegularExpressionSearch.regex.on("beforeChange", function(cm, change) {
-    var newtext = change.text.join("").replace(/\n/g, "");
-    if (change.update) {
-      change.update(change.from, change.to, [newtext]);
-    }
-  });
+// If text box is changed
+RegularExpressionSearch.search_text.on("change", function() {
+  processRegularExpression();
+});
 
-  // Process any given URL parameters
-  if (starting_regex) {
-    RegularExpressionSearch.regex.setValue(decodeURI(starting_regex));
-  }
-  if (starting_text) {
-    RegularExpressionSearch.search_text.setValue(decodeURI(starting_text));
-  }
-  if (reference == 'true') {
-    $('#quick-reference').collapse('show');
+// Prevent new lines occuring in regex
+RegularExpressionSearch.regex.on("beforeChange", function(cm, change) {
+  var newtext = change.text.join("").replace(/\n/g, "");
+  if (change.update) {
+    change.update(change.from, change.to, [newtext]);
   }
-
-  // Highlight inital regular expression
-  processRegularExpression();
 });
 
+// Process any given URL parameters
+if (starting_regex) {
+  RegularExpressionSearch.regex.setValue(decodeURI(starting_regex));
+}
+if (starting_text) {
+  RegularExpressionSearch.search_text.setValue(decodeURI(starting_text));
+}
+if (reference == 'true') {
+  $('#quick-reference').collapse('show');
+}
+
+// Highlight inital regular expression
+processRegularExpression();
+
 
 // Find and highlight regex matches
 function processRegularExpression() {