fix(v2): make code blocks scrollable (#2241)

* wip

* fix(v2): make code blocks scrollable

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -90,11 +90,17 @@ export default ({children, className: languageClassName, metastring}) => {
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+        <pre className={classnames(className, styles.codeBlock)}>
-          <pre
+          <button
-            ref={target}
+            ref={button}
-            className={classnames(className, styles.codeBlock)}
+            type="button"
-            style={style}>
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+
+          <code ref={target} className={styles.codeBlockLines} style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({line, key: i});
 
@@ -110,16 +116,8 @@ export default ({children, className: languageClassName, metastring}) => {
                 </div>
               );
             })}
+          </code>
         </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
       )}
     </Highlight>
   );

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -6,19 +6,10 @@
  */
 
 .codeBlock {
-  margin-bottom: 0;
+  overflow: auto;
-  overflow: hidden;
+  display: block;
-  overflow-wrap: break-word;
+  padding: 0;
-  white-space: pre-wrap;
+  margin: 0;
-}
-
-.codeBlockWrapper {
-  position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
-  visibility: visible;
-  opacity: 1;
 }
 
 .copyButton {
@@ -38,3 +29,17 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
+
+.codeBlock:hover > .copyButton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.codeBlockLines {
+  background-color: transparent;
+  border-radius: 0;
+  margin-bottom: 0;
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}

packages/docusaurus-theme-classic/src/theme/DocItem/index.js

@@ -13,6 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import DocPaginator from '@theme/DocPaginator';
 import useTOCHighlight from '@theme/hooks/useTOCHighlight';
 
+import classnames from 'classnames';
 import styles from './styles.module.css';
 
 const LINK_CLASS_NAME = 'contents__link';
@@ -101,7 +102,7 @@ function DocItem(props) {
       <div className="padding-vert--lg">
         <div className="container">
           <div className="row">
-            <div className="col">
+            <div className={classnames('col', styles.docItemCol)}>
               <div className={styles.docItemContainer}>
                 <article>
                   {version && (

packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css

@@ -22,6 +22,12 @@
   padding: 0 0.5rem;
 }
 
+@media only screen and (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
 .tableOfContents {
   display: inherit;
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js

@@ -9,6 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
+
 import styles from './styles.module.css';
 
 export default {
@@ -26,7 +27,7 @@ export default {
     }
     return <Link {...props} />;
   },
-  pre: props => <pre className={styles.mdxCodeBlock} {...props} />,
+  pre: props => <div className={styles.mdxCodeBlock} {...props} />,
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),

packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css

@@ -6,9 +6,12 @@
  */
 
 .mdxCodeBlock {
-  background-color: transparent;
+  position: relative;
   border-radius: var(--ifm-global-radius);
-  box-sizing: border-box;
+  margin-bottom: var(--ifm-leading);
-  font-family: inherit;
+  font-size: var(--ifm-code-font-size);
-  padding: 0;
+}
+
+.mdxCodeBlock pre {
+  font-size: inherit;
 }

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -109,11 +109,17 @@ export default ({
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+        <pre className={classnames(className, styles.codeBlock)}>
-          <pre
+          <button
-            ref={target}
+            ref={button}
-            className={classnames(className, styles.codeBlock)}
+            type="button"
-            style={style}>
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+
+          <code ref={target} className={styles.codeBlockLines} style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({line, key: i});
 
@@ -129,16 +135,8 @@ export default ({
                 </div>
               );
             })}
+          </code>
         </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
       )}
     </Highlight>
   );

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css

@@ -1,18 +1,15 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 .codeBlock {
-  font-size: inherit;
+  overflow: auto;
-  margin-bottom: 0;
+  display: block;
-  overflow: hidden;
+  padding: 0;
-  overflow-wrap: break-word;
+  margin: 0;
-  white-space: pre-wrap;
-}
-
-.codeBlockWrapper {
-  position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
-  visibility: visible;
-  opacity: 1;
 }
 
 .copyButton {
@@ -32,3 +29,17 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
+
+.codeBlock:hover > .copyButton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.codeBlockLines {
+  background-color: transparent;
+  border-radius: 0;
+  margin-bottom: 0;
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}