Revert "fix(v2): remove auto wrap for code blocks (#2048)" (#2071)

This reverts commit 10cd99b3e4.

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

@@ -63,26 +63,16 @@ export default ({children, className: languageClassName, metastring}) => {
   };
 
   return (
-    <div className={styles.codeBlockWrapper}>
-      <button
-        ref={button}
-        type="button"
-        aria-label="Copy code to clipboard"
-        className={styles.copyButton}
-        onClick={handleCopyCode}>
-        {showCopied ? 'Copied' : 'Copy'}
-      </button>
-
     <Highlight
       {...defaultProps}
       theme={prism.theme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <pre className={classnames(className, styles.codeBlock)}>
+        <div className={styles.codeBlockWrapper}>
-            <code
+          <pre
             ref={target}
-              className={classnames(className, styles.codeBlockLines)}
+            className={classnames(className, styles.codeBlock)}
             style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({line, key: i});
@@ -99,10 +89,17 @@ 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>
-    </div>
   );
 };

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

@@ -5,6 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
  
+.codeBlock {
+  border-radius: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
 .codeBlockWrapper {
   position: relative;
 }
@@ -31,18 +39,3 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
-
-.codeBlock {
-  overflow: auto;
-  display: block;
-  padding: 0;
-  font-size: inherit;
-}
-
-.codeBlockLines {
-  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

@@ -94,7 +94,7 @@ function DocItem(props) {
       <div className="padding-vert--lg">
         <div className="container">
           <div className="row">
-            <div className="col col--9">
+            <div className="col">
               <div className={styles.docItemContainer}>
                 <article>
                   {version && (

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

@@ -81,26 +81,16 @@ export default ({
   };
 
   return (
-    <div className={styles.codeBlockWrapper}>
-      <button
-        ref={button}
-        type="button"
-        aria-label="Copy code to clipboard"
-        className={styles.copyButton}
-        onClick={handleCopyCode}>
-        {showCopied ? 'Copied' : 'Copy'}
-      </button>
-
     <Highlight
       {...defaultProps}
       theme={prism.theme || defaultTheme}
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <pre className={classnames(className, styles.codeBlock)}>
+        <div className={styles.codeBlockWrapper}>
-            <code
+          <pre
             ref={target}
-              className={classnames(className, styles.codeBlockLines)}
+            className={classnames(className, styles.codeBlock)}
             style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({line, key: i});
@@ -117,10 +107,17 @@ 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>
-    </div>
   );
 };

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

@@ -1,3 +1,12 @@
+.codeBlock {
+  border-radius: 0;
+  font-size: inherit;
+  margin-bottom: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
 .codeBlockWrapper {
   position: relative;
 }
@@ -24,18 +33,3 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
-
-.codeBlock {
-  overflow: auto;
-  display: block;
-  padding: 0;
-  font-size: inherit;
-}
-
-.codeBlockLines {
-  border-radius: 0;
-  margin-bottom: 0;
-  float: left;
-  min-width: 100%;
-  padding: var(--ifm-pre-padding);
-}