feat: Add support for text wrapping in code highlight

newrelic · Jul 7, 2020 · 5f3dd27 · 5f3dd27
1 parent 526718e
commit 5f3dd27
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/src/components/CodeHighlight.js b/src/components/CodeHighlight.js
@@ -1,34 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Highlight from 'prism-react-renderer';
 import Prism from 'prismjs';
 import styles from './CodeHighlight.module.scss';
 
-const CodeHighlight = ({ children, language, lineNumbers }) => (
+const CodeHighlight = ({
+  className,
+  children,
+  language,
+  lineNumbers,
+  wrap,
+}) => (
   <Highlight Prism={Prism} code={children.trim()} language={language}>
     {({ tokens, getLineProps, getTokenProps }) => {
-      const characterWidth = String(tokens.length).length;
+      const lineNumberWidth = String(tokens.length).length;
 
       return (
-        <pre className={styles.container} data-language={language}>
+        <pre
+          className={cx(styles.container, className, {
+            [styles.wrap]: wrap,
+            [styles.lineNumbers]: lineNumbers,
+          })}
+          style={{
+            '--line-number-width': `${lineNumberWidth}ch`,
+          }}
+          data-language={language}
+        >
           <code>
             {tokens.map((line, i) => (
               // eslint-disable-next-line react/jsx-key
               <div {...getLineProps({ line, key: i })}>
                 {lineNumbers && (
-                  <span
-                    className={styles.lineNumber}
-                    style={{
-                      '--character-width': `${characterWidth}ch`,
-                    }}
-                  >
-                    {i + 1}
-                  </span>
+                  <div className={styles.lineNumber}>{i + 1}</div>
                 )}
-                {line.map((token, key) => (
-                  // eslint-disable-next-line react/jsx-key
-                  <span {...getTokenProps({ token, key })} />
-                ))}
+                <div>
+                  {line.map((token, key) => (
+                    // eslint-disable-next-line react/jsx-key
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
               </div>
             ))}
           </code>
@@ -39,9 +50,15 @@ const CodeHighlight = ({ children, language, lineNumbers }) => (
 );
 
 CodeHighlight.propTypes = {
+  className: PropTypes.string,
   children: PropTypes.string.isRequired,
   language: PropTypes.string,
   lineNumbers: PropTypes.bool,
+  wrap: PropTypes.bool,
+};
+
+CodeHighlight.defaultProps = {
+  wrap: false,
 };
 
 export default CodeHighlight;
diff --git a/src/components/CodeHighlight.module.scss b/src/components/CodeHighlight.module.scss
@@ -12,12 +12,6 @@
   text-shadow: none;
   padding: 1rem;
 
-  &::selection,
-  &::mozselection {
-    text-shadow: none;
-    background: none;
-  }
-
   > code {
     display: table;
     width: 100%;
@@ -31,19 +25,25 @@
   }
 }
 
+.lineNumbers {
+  :global(.token-line) {
+    display: grid;
+    grid-template-columns: var(--line-number-width) 1fr;
+    grid-gap: 1rem;
+  }
+}
+
 .lineNumber {
-  display: inline-block;
-  width: var(--character-width, 3ch);
+  user-select: none;
   color: var(--color-nord-3);
-  margin-right: 1rem;
   text-align: right;
 }
 
-:global {
-  .token-line {
-    display: table-row;
-  }
+.wrap {
+  white-space: pre-wrap;
+}
 
+:global {
   .namespace {
     opacity: 0.7;
   }