feat(theme-classic): code block button place improve

facebook · Aug 30, 2024 · 20a996e · 20a996e
1 parent a4329d3
commit 20a996e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 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
@@ -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
@@ -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 {