3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-28 17:57:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): Hide code block buttons before React hydration (#10866)

Browse source
This commit is contained in:
Kenneth Ormandy 2025-01-30 09:24:33 -08:00 • committed by GitHub
parent 4d7a28963a
commit 78f44d0ae7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
View file

@ -15,6 +15,7 @@ import {
getLineNumbersStart,
useCodeWordWrap,
} from '@docusaurus/theme-common/internal';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {Highlight, type Language} from 'prism-react-renderer';
import Line from '@theme/CodeBlock/Line';
import CopyButton from '@theme/CodeBlock/CopyButton';
@ -48,6 +49,7 @@ export default function CodeBlockString({
const prismTheme = usePrismTheme();
const wordWrap = useCodeWordWrap();
const isBrowser = useIsBrowser();
// We still parse the metastring in case we want to support more syntax in the
// future. Note that MDX doesn't strip quotes when parsing metastring:
@ -111,16 +113,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>
{isBrowser ? (
<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>
) : null}
</div>
</Container>
);