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

* wip * fix(v2): make code blocks scrollable Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
facebook · Feb 8, 2020 · bb82d0e · bb82d0e
1 parent 0fa080c
commit bb82d0e
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 63 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/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
- ref={target}
- className={classnames(className, styles.codeBlock)}
- style={style}>
+ <pre className={classnames(className, styles.codeBlock)}>
+ <button
+ ref={button}
+ type="button"
+ 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>
  );
  })}
- </pre>
- <button
- ref={button}
- type="button"
- aria-label="Copy code to clipboard"
- className={styles.copyButton}
- onClick={handleCopyCode}>
- {showCopied ? 'Copied' : 'Copy'}
- </button>
- </div>
+ </code>
+ </pre>
  )}
  </Highlight>
  );

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -6,19 +6,10 @@
  */
 
 .codeBlock {
- margin-bottom: 0;
- overflow: hidden;
- overflow-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.codeBlockWrapper {
- position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
- visibility: visible;
- opacity: 1;
+ overflow: auto;
+ display: block;
+ padding: 0;
+ margin: 0;
 }
 
 .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);
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.js b/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 && (

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/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));

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js b/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'),

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css b/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;
- font-family: inherit;
- padding: 0;
+ margin-bottom: var(--ifm-leading);
+ font-size: var(--ifm-code-font-size);
+}
+
+.mdxCodeBlock pre {
+ font-size: inherit;
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/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
- ref={target}
- className={classnames(className, styles.codeBlock)}
- style={style}>
+ <pre className={classnames(className, styles.codeBlock)}>
+ <button
+ ref={button}
+ type="button"
+ 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>
  );
  })}
- </pre>
- <button
- ref={button}
- type="button"
- aria-label="Copy code to clipboard"
- className={styles.copyButton}
- onClick={handleCopyCode}>
- {showCopied ? 'Copied' : 'Copy'}
- </button>
- </div>
+ </code>
+ </pre>
  )}
  </Highlight>
  );

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -1,18 +1,15 @@
-.codeBlock {
- font-size: inherit;
- margin-bottom: 0;
- overflow: hidden;
- overflow-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.codeBlockWrapper {
- position: relative;
-}
+/**
+ * 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.
+ */
 
-.codeBlockWrapper:hover > .copyButton {
- visibility: visible;
- opacity: 1;
+.codeBlock {
+ overflow: auto;
+ display: block;
+ padding: 0;
+ margin: 0;
 }
 
 .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);
+}