chore: add the ability to wrap the terminal commands

newrelic · Oct 21, 2020 · ce4618b · ce4618b
1 parent ee8c5ea
commit ce4618b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js b/src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js
@@ -8,10 +8,11 @@ const CustomCodeBlock = ({
   children,
   animate,
   copyable,
+  wrap,
   ...props
 }) => {
   return isShellLanguage(language) ? (
-    <Terminal animate={animate} copyable={copyable}>
+    <Terminal animate={animate} copyable={copyable} wrap={wrap}>
       {children}
     </Terminal>
   ) : (

diff --git a/src/components/Terminal/CommandLine.js b/src/components/Terminal/CommandLine.js
@@ -22,6 +22,7 @@ const CommandLine = ({
   prompt,
   typingDelay,
   onFinishedTyping,
+  wrap,
 }) => {
   const element = animate ? (
     <Typist
@@ -44,19 +45,24 @@ const CommandLine = ({
   return (
     <div
       css={css`
-        display: grid;
-        grid-template-columns: 1ch auto;
-        grid-gap: 1ch;
+        display: flex;
+        flex-wrap: ${wrap ? 'wrap' : null};
+        gap: 1ch;
         justify-content: start;
-        align-items: baseline;
+        align-items: flex-start;
+
+        @supports not (gap: 1ch) {
+          margin-right: 1ch;
+        }
       `}
     >
       <Prompt character={prompt} />
       <div
         css={css`
+          flex: 1;
           position: relative;
           color: #fafafa;
-          white-space: pre;
+          white-space: ${wrap ? 'pre-wrap' : 'pre'};
 
           &:empty {
             height: 100%;
@@ -91,12 +97,14 @@ CommandLine.propTypes = {
   prompt: PropTypes.oneOf(['$', '>']),
   typingDelay: PropTypes.number,
   onFinishedTyping: PropTypes.func,
+  wrap: PropTypes.bool,
 };
 
 CommandLine.defaultProps = {
   animate: false,
   avgTypingDelay: 40,
   typingDelay: 0,
+  wrap: false,
 };
 
 export default CommandLine;
diff --git a/src/components/Terminal/Shell.js b/src/components/Terminal/Shell.js
@@ -12,7 +12,7 @@ import MenuBar from './MenuBar';
 import { useIntersection } from 'react-use';
 import { useClipboard } from '@newrelic/gatsby-theme-newrelic';
 
-const Shell = ({ animate, copyable, highlight, code }) => {
+const Shell = ({ animate, copyable, highlight, code, wrap }) => {
   const { tokens, getTokenProps } = highlight;
   const lines = translateLines(tokens, code);
 
@@ -103,7 +103,7 @@ const Shell = ({ animate, copyable, highlight, code }) => {
             const previousLine = renderedLines[idx - 1];
 
             return type === 'OUTPUT' ? (
-              <ShellOutput key={idx} line={line} />
+              <ShellOutput key={idx} line={line} wrap={wrap} />
             ) : (
               <CommandLine
                 key={idx}
@@ -117,13 +117,15 @@ const Shell = ({ animate, copyable, highlight, code }) => {
                 }
                 typingDelay={getTypingDelay(line, previousLine)}
                 onFinishedTyping={() => send('PRESS_ENTER')}
+                wrap={wrap}
               >
                 {line.map((token, key) => (
                   // eslint-disable-next-line react/jsx-key
                   <span
                     css={css`
                       display: inline-block;
                       vertical-align: baseline;
+                      word-break: break-all;
                     `}
                     {...getTokenProps({ token, key })}
                   />
@@ -181,6 +183,7 @@ Shell.propTypes = {
     tokens: PropTypes.array.isRequired,
     getTokenProps: PropTypes.func.isRequired,
   }),
+  wrap: PropTypes.bool,
 };
 
 export default Shell;