Refactor so that the variable regexp is shared across markdown and highlighter

Author: Dom Harrington

packages/api-explorer/src/lib/markdown/variable-parser.js

@@ -1,9 +1,7 @@
 function tokenizeVariable(eat, value, silent) {
-  // Regex to match the following:
-  // - \<<apiKey\>> - escaped variables
-  // - <<apiKey>> - regular variables
-  // - <<glossary:glossary items>> - glossary
-  const match = /^(?:\\)?<<([-\w:\s]+)(?:\\)?>>/.exec(value);
+  // Modifies the regular expression to match from
+  // the start of the line
+  const match = new RegExp(`^${module.exports.VARIABLE_REGEXP}`).exec(value);
 
   if (!match) return false;
 
@@ -62,3 +60,9 @@ module.exports.sanitize = sanitizeSchema => {
 
   return parser;
 };
+
+// Regex to match the following:
+// - \<<apiKey\>> - escaped variables
+// - <<apiKey>> - regular variables
+// - <<glossary:glossary items>> - glossary
+module.exports.VARIABLE_REGEXP = /(?:\\)?<<([-\w:\s]+)(?:\\)?>>/.source;

packages/syntax-highlighter/codemirror.jsx

@@ -1,5 +1,6 @@
 const CodeMirror = require('codemirror');
 const React = require('react');
+const { VARIABLE_REGEXP } = require('@readme/api-explorer/src/lib/markdown/variable-parser');
 const Variable = require('@readme/api-explorer/src/Variable');
 
 require('codemirror/addon/runmode/runmode');
@@ -65,13 +66,9 @@ module.exports = (code, lang, opts = { tokenizeVariables: false }) => {
   const mode = getMode(lang);
 
   function tokenizeVariable(value) {
-    // Regex to match the following:
-    // - \<<apiKey\>> - escaped variables
-    // - <<apiKey>> - regular variables
-    // - '<<apiKey>>' - quoted regular variables (code samples)
-    // - <<glossary:glossary items>> - glossary
-    // Also matches any characters that may be enclosing the variable like: ' "
-    const match = /(.*)(?:\\)?<<([-\w:\s]+)(?:\\)?>>(.*)/.exec(value);
+    // Modifies the regular expression to match anything
+    // before or after like quote characters: ' "
+    const match = new RegExp(`(.*)${VARIABLE_REGEXP}(.*)`).exec(value);
 
     if (!match) return value;
 

packages/syntax-highlighter/test/index.test.jsx

@@ -23,7 +23,7 @@ test('should concat the same style items', () => {
 });
 
 
-test.only('should work with modes', () => {
+test('should work with modes', () => {
   expect(shallow(syntaxHighlighter('{ "a": 1 }', 'json')).html()).toBe('<span class="cm-s-neo">{ <span class="cm-property">&quot;a&quot;</span>: <span class="cm-number">1</span> }</span>');
 });