From 711b78b8329dc7b5af7e32407bbc0fc3f3f9ea45 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 28 Feb 2021 18:39:54 +0300
Subject: [PATCH] Rework

---
 .../src/theme/CodeBlock/index.tsx             |  4 +-
 .../src/theme/CodeBlock/styles.module.css     |  5 +-
 .../src/theme/MDXComponents/index.tsx         |  5 +-
 .../docusaurus-theme-classic/src/types.d.ts   |  2 +-
 .../src/theme/Playground/index.js             | 68 ++++++++++---------
 .../src/theme/Playground/styles.module.css    | 10 ++-
 .../src/pages/examples/markdownPageExample.md | 61 +++++++++++++++++
 7 files changed, 115 insertions(+), 40 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index 1793a0aa1ff2..49d14a4cc4c3 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -201,7 +201,7 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <>
+        <div className={styles.codeBlockContainer}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -262,7 +262,7 @@ export default function CodeBlock({
               )}
             </button>
           </div>
-        </>
+        </div>
       )}
     </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
index f9aa8ec795d1..6aedbd715d8a 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .codeBlockContent {
   position: relative;
   /*rtl:ignore*/
   direction: ltr;
-  margin-bottom: var(--ifm-leading);
 }
 
 .codeBlockTitle {
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
index 9792c64e03b7..286a86fd5052 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -23,7 +23,10 @@ const MDXComponents: MDXComponentsObject = {
     return children;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => <div className="mdxCodeBlock" {...props} />,
+  pre: (props: any) => {
+    const {children} = props;
+    return <CodeBlock {...children?.props} />;
+  },
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index b4d5866db195..ba860b2046ad 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -265,7 +265,7 @@ declare module '@theme/MDXComponents' {
   export type MDXComponentsObject = {
     readonly code: typeof CodeBlock;
     readonly a: (props: ComponentProps<'a'>) => JSX.Element;
-    readonly pre: (props: ComponentProps<'div'>) => JSX.Element;
+    readonly pre: typeof CodeBlock;
     readonly h1: (props: ComponentProps<'h1'>) => JSX.Element;
     readonly h2: (props: ComponentProps<'h2'>) => JSX.Element;
     readonly h3: (props: ComponentProps<'h3'>) => JSX.Element;
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
index 16f4eb3a9704..99fa5ae7e4eb 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@@ -14,38 +14,40 @@ import styles from './styles.module.css';
 
 export default function Playground({children, theme, transformCode, ...props}) {
   return (
-    <LiveProvider
-      code={children.replace(/\n$/, '')}
-      transformCode={transformCode || ((code) => `${code};`)}
-      theme={theme}
-      {...props}>
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundEditorHeader,
-        )}>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </div>
-      <LiveEditor className={styles.playgroundEditor} />
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundPreviewHeader,
-        )}>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </div>
-      <div className={styles.playgroundPreview}>
-        <LivePreview />
-        <LiveError />
-      </div>
-    </LiveProvider>
+    <div className={styles.playgroundContainer}>
+      <LiveProvider
+        code={children.replace(/\n$/, '')}
+        transformCode={transformCode || ((code) => `${code};`)}
+        theme={theme}
+        {...props}>
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundEditorHeader,
+          )}>
+          <Translate
+            id="theme.Playground.liveEditor"
+            description="The live editor label of the live codeblocks">
+            Live Editor
+          </Translate>
+        </div>
+        <LiveEditor className={styles.playgroundEditor} />
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundPreviewHeader,
+          )}>
+          <Translate
+            id="theme.Playground.result"
+            description="The result label of the live codeblocks">
+            Result
+          </Translate>
+        </div>
+        <div className={styles.playgroundPreview}>
+          <LivePreview />
+          <LiveError />
+        </div>
+      </LiveProvider>
+    </div>
   );
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
index 50dc7f6553e6..8d23e8d3c412 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .playgroundHeader {
   letter-spacing: 0.08rem;
   padding: 0.75rem;
@@ -15,6 +19,8 @@
 .playgroundEditorHeader {
   background: var(--ifm-color-emphasis-600);
   color: var(--ifm-color-content-inverse);
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .playgroundPreviewHeader {
@@ -23,7 +29,8 @@
 }
 
 .playgroundEditor {
-  font-family: var(--ifm-font-family-monospace) !important;
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
   /*rtl:ignore*/
   direction: ltr;
 }
@@ -32,6 +39,5 @@
   border: 1px solid var(--ifm-color-emphasis-200);
   border-bottom-left-radius: var(--ifm-global-radius);
   border-bottom-right-radius: var(--ifm-global-radius);
-  position: relative;
   padding: 1rem;
 }
diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
index 1c9e1722de90..c774cc94a4f4 100644
--- a/website/src/pages/examples/markdownPageExample.md
+++ b/website/src/pages/examples/markdownPageExample.md
@@ -119,3 +119,64 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myCompone
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
 
 </BrowserWindow>
+
+---
+
+## Code block test
+
+```js title="Title"
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+      // highlight-start
+      {/* prettier-ignore */}
+      long long long long long long long long long long long long line
+      {/* prettier-ignore */}
+      // highlight-end
+    </div>
+  );
+}
+```
+
+```jsx live
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```
+
+<CodeBlock className="language-yaml" title="test">
+  test
+</CodeBlock>
+
+<code>test</code>