refactor: move syntax highlighter inline

newrelic · Oct 15, 2020 · 9482d11 · 9482d11
1 parent 6965354
commit 9482d11
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 51 deletions.
diff --git a/src/components/Terminal/Terminal.js b/src/components/Terminal/Terminal.js
@@ -2,11 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { Button, useClipboard } from '@newrelic/gatsby-theme-newrelic';
-import SyntaxHighlighter from './SyntaxHighlighter';
-import Cursor from './Cursor';
+import Highlight from 'prism-react-renderer';
+import Prism from 'prismjs';
+import Command from './Command';
+import Output from './Output';
 import theme from './theme';
+import rollupIntoCommands from './rollupIntoCommands';
 
 const Terminal = ({ children }) => {
+  const code = children.trim();
   const [copied, copy] = useClipboard();
 
   return (
@@ -48,7 +52,7 @@ const Terminal = ({ children }) => {
         <Button
           variant={Button.VARIANT.LINK}
           size={Button.SIZE.SMALL}
-          onClick={() => copy(filterOutput(children))}
+          onClick={() => copy(filterCopyOutput(children))}
           className="dark-mode"
           css={css`
             justify-self: end;
@@ -91,14 +95,35 @@ const Terminal = ({ children }) => {
         `}
       >
         <code>
-          <SyntaxHighlighter code={children.trim()} />
+          <Highlight Prism={Prism} code={code} language="shell">
+            {({ tokens, getTokenProps }) => {
+              const commands = rollupIntoCommands(tokens, code);
+
+              return commands.map(({ lines, output }, commandIdx) => (
+                <>
+                  {lines.map((line, idx) => (
+                    <Command
+                      key={`${commandIdx}-${idx}`}
+                      line={line}
+                      prompt={idx > 0 ? '>' : '$'}
+                      getTokenProps={getTokenProps}
+                    />
+                  ))}
+
+                  {output.map((line, idx) => (
+                    <Output key={`${commandIdx}-${idx}`} line={line} />
+                  ))}
+                </>
+              ));
+            }}
+          </Highlight>
         </code>
       </pre>
     </div>
   );
 };
 
-const filterOutput = (commands) => {
+const filterCopyOutput = (commands) => {
   return commands
     .split('\n')
     .filter((line) => !line.startsWith('[output]'))

diff --git a/src/components/Terminal/SyntaxHighlighter.js → ...components/Terminal/rollupIntoCommands.js b/src/components/Terminal/SyntaxHighlighter.js → ...components/Terminal/rollupIntoCommands.js
@@ -1,47 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Highlight from 'prism-react-renderer';
-import Prism from 'prismjs';
-import Command from './Command';
-import Output from './Output';
-
 const MULTILINE_COMMAND = /\\\s*$/;
 const OUTPUT_TAG = /^\[output\](\s|$)/;
 const OUTPUT_COLOR_TOKENS = /{([a-z]+)}(.*?(?={|$))/g;
 
-const SyntaxHighlighter = ({ code }) => (
-  <Highlight Prism={Prism} code={code} language="shell">
-    {({ tokens, getTokenProps }) => {
-      const commands = rollupIntoCommands(tokens, code);
-
-      return commands.map(({ lines, output }, commandIdx) => (
-        <>
-          {lines.map((line, idx) => {
-            return (
-              <Command
-                key={`${commandIdx}-${idx}`}
-                line={line}
-                prompt={idx > 0 ? '>' : '$'}
-                getTokenProps={getTokenProps}
-              />
-            );
-          })}
-          {output.map((line, idx) => (
-            <Output key={`${commandIdx}-${idx}`} line={line} />
-          ))}
-        </>
-      ));
-    }}
-  </Highlight>
-);
-
-const collapse = (line) => {
-  return line
-    .filter((token) => !token.types.includes('comment'))
-    .map((token) => token.content)
-    .join('');
-};
-
 const rollupIntoCommands = (lines, code) => {
   const rawLines = code.split('\n');
 
@@ -71,6 +31,13 @@ const rollupIntoCommands = (lines, code) => {
   return commands;
 };
 
+const collapse = (line) => {
+  return line
+    .filter((token) => !token.types.includes('comment'))
+    .map((token) => token.content)
+    .join('');
+};
+
 const tokenizeOutputLine = (line) => {
   const text = line.replace(OUTPUT_TAG, '');
   const tokens = Array.from(text.matchAll(OUTPUT_COLOR_TOKENS));
@@ -89,9 +56,4 @@ const tokenizeOutputLine = (line) => {
       );
 };
 
-SyntaxHighlighter.propTypes = {
-  className: PropTypes.string,
-  code: PropTypes.string.isRequired,
-};
-
-export default SyntaxHighlighter;
+export default rollupIntoCommands;