From 20a996ec2c97dc6a3c3af3af4a5af64ca62e814e Mon Sep 17 00:00:00 2001
From: JingZhang Chen <iRoiocam@gmail.com>
Date: Sat, 31 Aug 2024 04:01:35 +0800
Subject: [PATCH 1/3] feat(theme-classic): code block button place improve

---
 .../src/theme/CodeBlock/Content/String.tsx    | 40 ++++++++++++++-----
 .../theme/CodeBlock/Content/styles.module.css |  3 ++
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
index b7ee289e2dca..820228eb4713 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
@@ -71,7 +71,23 @@ export default function CodeBlockString({
           !blockClassName.includes(`language-${language}`) &&
           `language-${language}`,
       )}>
-      {title && <div className={styles.codeBlockTitle}>{title}</div>}
+      {title && (
+        <div className={styles.codeBlockTitle}>
+          {title}
+          {title && (
+            <div className={styles.buttonGroup}>
+              {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+                <WordWrapButton
+                  className={styles.codeButton}
+                  onClick={() => wordWrap.toggle()}
+                  isEnabled={wordWrap.isEnabled}
+                />
+              )}
+              <CopyButton className={styles.codeButton} code={code} />
+            </div>
+          )}
+        </div>
+      )}
       <div className={styles.codeBlockContent}>
         <Highlight
           theme={prismTheme}
@@ -103,16 +119,18 @@ export default function CodeBlockString({
             </pre>
           )}
         </Highlight>
-        <div className={styles.buttonGroup}>
-          {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
-            <WordWrapButton
-              className={styles.codeButton}
-              onClick={() => wordWrap.toggle()}
-              isEnabled={wordWrap.isEnabled}
-            />
-          )}
-          <CopyButton className={styles.codeButton} code={code} />
-        </div>
+        {!title && (
+          <div className={styles.buttonGroup}>
+            {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+              <WordWrapButton
+                className={styles.codeButton}
+                onClick={() => wordWrap.toggle()}
+                isEnabled={wordWrap.isEnabled}
+              />
+            )}
+            <CopyButton className={styles.codeButton} code={code} />
+          </div>
+        )}
       </div>
     </Container>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
index 3760c530c4c4..508aa048a38e 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
@@ -19,6 +19,9 @@
   padding: 0.75rem var(--ifm-pre-padding);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
+  position: relative;
+  /* rtl:ignore */
+  direction: ltr;
 }
 
 .codeBlock {

From 198965e983240bd9015e3199d17758db9a4d713f Mon Sep 17 00:00:00 2001
From: JingZhang Chen <iRoiocam@gmail.com>
Date: Sat, 31 Aug 2024 04:21:01 +0800
Subject: [PATCH 2/3] clean code

---
 .../src/theme/CodeBlock/Content/String.tsx    | 39 +++++++------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
index 820228eb4713..4f2e70b3a9a2 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
@@ -62,6 +62,19 @@ export default function CodeBlockString({
   const showLineNumbers =
     showLineNumbersProp ?? containsLineNumbers(metastring);
 
+  function ButtonGroup() {
+  return <div className={styles.buttonGroup}>
+      {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+        <WordWrapButton
+          className={styles.codeButton}
+          onClick={() => wordWrap.toggle()}
+          isEnabled={wordWrap.isEnabled}
+        />
+      )}
+      <CopyButton className={styles.codeButton} code={code} />
+    </div>
+}
+
   return (
     <Container
       as="div"
@@ -74,18 +87,7 @@ export default function CodeBlockString({
       {title && (
         <div className={styles.codeBlockTitle}>
           {title}
-          {title && (
-            <div className={styles.buttonGroup}>
-              {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
-                <WordWrapButton
-                  className={styles.codeButton}
-                  onClick={() => wordWrap.toggle()}
-                  isEnabled={wordWrap.isEnabled}
-                />
-              )}
-              <CopyButton className={styles.codeButton} code={code} />
-            </div>
-          )}
+          <ButtonGroup />
         </div>
       )}
       <div className={styles.codeBlockContent}>
@@ -119,18 +121,7 @@ export default function CodeBlockString({
             </pre>
           )}
         </Highlight>
-        {!title && (
-          <div className={styles.buttonGroup}>
-            {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
-              <WordWrapButton
-                className={styles.codeButton}
-                onClick={() => wordWrap.toggle()}
-                isEnabled={wordWrap.isEnabled}
-              />
-            )}
-            <CopyButton className={styles.codeButton} code={code} />
-          </div>
-        )}
+        {!title && <ButtonGroup />}
       </div>
     </Container>
   );

From d7c9188fdd23b41053920c1b32f9960a472d8a2b Mon Sep 17 00:00:00 2001
From: JingZhang Chen <iRoiocam@gmail.com>
Date: Sat, 31 Aug 2024 04:22:30 +0800
Subject: [PATCH 3/3] fix indentation

---
 .../src/theme/CodeBlock/Content/String.tsx    | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
index 4f2e70b3a9a2..28bdaea826e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
@@ -63,17 +63,19 @@ export default function CodeBlockString({
     showLineNumbersProp ?? containsLineNumbers(metastring);
 
   function ButtonGroup() {
-  return <div className={styles.buttonGroup}>
-      {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
-        <WordWrapButton
-          className={styles.codeButton}
-          onClick={() => wordWrap.toggle()}
-          isEnabled={wordWrap.isEnabled}
-        />
-      )}
-      <CopyButton className={styles.codeButton} code={code} />
-    </div>
-}
+    return (
+      <div className={styles.buttonGroup}>
+        {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+          <WordWrapButton
+            className={styles.codeButton}
+            onClick={() => wordWrap.toggle()}
+            isEnabled={wordWrap.isEnabled}
+          />
+        )}
+        <CopyButton className={styles.codeButton} code={code} />
+      </div>
+    );
+  }
 
   return (
     <Container