feat(context): exporting context provider (#22)

Attempting to minimize potential provider instances, mirroring our markdown lib implementation.

Author: gratcliff

public/index.js

@@ -1,33 +1,45 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import syntaxHighlighter from '../src/index';
+import syntaxHighlighter, { cmVariableContext } from '../src/index';
 
 ReactDOM.render(
   <div>
     <h1>Core Syntax Highlighter</h1>
     <pre id="hub-reference">
-      {syntaxHighlighter(
-        `curl --request POST
-        --url <<url>>
-        --header 'authorization: Bearer 123'
-        --header 'content-type: application/json'`,
-        'curl',
-        {
-          dark: true,
-          highlightMode: true,
-          tokenizeVariables: true,
-          ranges: [
-            [
-              { ch: 0, line: 0 },
-              { ch: 0, line: 1 },
-            ],
-            [
-              { ch: 0, line: 4 },
-              { ch: 0, line: 5 },
-            ],
+      <cmVariableContext.Provider
+        value={{
+          user: {},
+          defaults: [
+            {
+              name: 'url',
+              default: 'GET',
+            },
           ],
-        }
-      )}
+        }}
+      >
+        {syntaxHighlighter(
+          `curl --request POST
+          --url <<url>>
+          --header 'authorization: Bearer 123'
+          --header 'content-type: application/json'`,
+          'curl',
+          {
+            dark: true,
+            highlightMode: true,
+            tokenizeVariables: true,
+            ranges: [
+              [
+                { ch: 0, line: 0 },
+                { ch: 0, line: 1 },
+              ],
+              [
+                { ch: 0, line: 4 },
+                { ch: 0, line: 5 },
+              ],
+            ],
+          }
+        )}
+      </cmVariableContext.Provider>
     </pre>
     <hr />
     <h1>Code Editor</h1>

src/codeMirror/index.jsx

@@ -1,7 +1,7 @@
 import CodeMirror from 'codemirror';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Variable, { VARIABLE_REGEXP } from '@readme/variable';
+import Variable, { VARIABLE_REGEXP, VariablesContext } from '@readme/variable';
 import { getMode } from '../utils/modes';
 
 import '../utils/cm-mode-imports';
@@ -191,3 +191,4 @@ const ReadmeCodeMirror = (code, lang, opts = { tokenizeVariables: false, highlig
 };
 
 export default ReadmeCodeMirror;
+export { VariablesContext };

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import codemirror from './codeMirror';
+import codemirror, { VariablesContext as cmVariableContext } from './codeMirror';
 import codeEditor from './codeEditor';
 import uppercase from './utils/uppercase';
 import canonical from './utils/canonical';
@@ -34,4 +34,4 @@ const SyntaxHighlighter = (
 };
 
 export default SyntaxHighlighter;
-export { uppercase, canonical, modes };
+export { uppercase, canonical, modes, cmVariableContext };