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] 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 {