feat: allow passing variable context

5 files changed, 54 insertions, 41 deletions

diff --git a/src/demo/content.md b/src/demo/content.md
new file mode 100644
index 0000000..ad61d33
--- /dev/null
+++ b/src/demo/content.md
@@ -0,0 +1,17 @@
+## Markdown
+[Markdown file](${url}) *(...
+```react
+fileName
+```
+)* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:
+Switch between tabs on the header to explore other markdown templates. :recycle:
+Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:
+## How do I use this feature?
+```
+import Markdown from \'react-benzin\';
+const data = \'# Header\\nHello, *world!*\';
+ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));
+```
+```react
+tryButton
+```
diff --git a/src/index.tsx b/src/index.tsx
index 9a80262..3f312bb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,6 +14,7 @@ import {
 
 import Header from './demo/Header/Header';
 import Window from './demo/Window/Window';
+import content from './demo/content.md';
 import icon from './assets/icon.svg';
 
 const useStyles = makeStyles(theme => ({
@@ -128,19 +129,6 @@ const App: React.FC = () => {
 
   const url = pageMap[page];
   const fileName = url?.slice(url.lastIndexOf('/') + 1);
-  const info = [
-    /* eslint-disable max-len */
-    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
-    'Switch between tabs on the header to explore other markdown templates. :recycle: ',
-    'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
-    '## How do I use this feature?',
-    '```',
-    'import Markdown from \'react-benzin\';',
-    'const data = \'# Header\\nHello, *world!*\';',
-    'ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));',
-    '```',
-    /* eslint-enable max-len */
-  ].join('\n');
 
   let primaryWindowContent = <Markdown url={url} />;
   if (page === 'custom') primaryWindowContent = <CustomPage />;
@@ -148,6 +136,19 @@ const App: React.FC = () => {
     primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;
   }
 
+  const tryButton = (
+    <p className={classes.promoButton}>
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={handleGoLivePreview}
+      >
+        Try it yourself!
+      </Button>
+    </p>
+  );
+
   return (
     <Benzin>
       <Header
@@ -167,21 +168,7 @@ const App: React.FC = () => {
           {
             (page === 'live preview')
               ? <LivePreviewPage setLivePreviewData={setLivePreviewData} />
-              : (
-                <>
-                  <Markdown data={info} />
-                  <p className={classes.promoButton}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      size="large"
-                      onClick={handleGoLivePreview}
-                    >
-                      Try it yourself!
-                    </Button>
-                  </p>
-                </>
-              )
+              : <Markdown url={content} context={{ tryButton, fileName }} />
           }
         </div>
       </Window>
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index 955aeda..9bc05a0 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -12,6 +12,7 @@ import Image from './Image';
 interface PropTypes {
   data?: string;
   url?: string;
+  context?: any;
 }
 
 const resolveUrls = (line: string, baseUrl: string): string => line.replace(
@@ -22,15 +23,8 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace(
   (match, text, url) => `[${text}](${baseUrl}/${url})`,
 );
 
-const renderers = {
-  heading: Heading,
-  inlineCode: InlineCode,
-  code: CodeBlock,
-  link: Link,
-  image: Image,
-};
 
-const Markdown: React.FC<PropTypes> = ({ data, url }) => {
+const Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {
   const [markdown, setMarkdown] = useState<string>(data || '');
 
   if (url) axios.get(url).then(response => setMarkdown(response.data));
@@ -43,15 +37,26 @@ const Markdown: React.FC<PropTypes> = ({ data, url }) => {
 
   const sanitized = resolveUrls(markdown, baseUrl);
 
+  const renderers = {
+    heading: Heading,
+    inlineCode: InlineCode,
+    link: Link,
+    image: Image,
+    code: ({ language, value }: any) => {
+      if (language === 'react') return context[value] || null;
+      return CodeBlock({ value });
+    },
+  };
+
+
   return (
     <Typography>
       <ReactMarkdown
+        source={sanitized}
         renderers={renderers}
         plugins={[emoji]}
         allowDangerousHtml
-      >
-        {sanitized}
-      </ReactMarkdown>
+      />
     </Typography>
   );
 };
diff --git a/src/lib/Markdown/remark-gemoji.d.ts b/src/lib/Markdown/remark-gemoji.d.ts
deleted file mode 100644
index d4b4bf6..0000000
--- a/src/lib/Markdown/remark-gemoji.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare module 'remark-gemoji';
-
diff --git a/src/lib/Markdown/types.d.ts b/src/lib/Markdown/types.d.ts
new file mode 100644
index 0000000..f39e4f2
--- /dev/null
+++ b/src/lib/Markdown/types.d.ts
@@ -0,0 +1,6 @@
+declare module 'remark-gemoji';
+declare module '*.md' {
+  let Markdown: string;
+  export default Markdown;
+}
+