3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-30 10:48:05 +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, getLineNumbersStart,
useCodeWordWrap, useCodeWordWrap,
} from '@docusaurus/theme-common/internal'; } from '@docusaurus/theme-common/internal';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {Highlight, type Language} from 'prism-react-renderer'; import {Highlight, type Language} from 'prism-react-renderer';
import Line from '@theme/CodeBlock/Line'; import Line from '@theme/CodeBlock/Line';
import CopyButton from '@theme/CodeBlock/CopyButton'; import CopyButton from '@theme/CodeBlock/CopyButton';
@ -48,6 +49,7 @@ export default function CodeBlockString({
const prismTheme = usePrismTheme(); const prismTheme = usePrismTheme();
const wordWrap = useCodeWordWrap(); const wordWrap = useCodeWordWrap();
const isBrowser = useIsBrowser();
// We still parse the metastring in case we want to support more syntax in the // 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: // future. Note that MDX doesn't strip quotes when parsing metastring:
@ -111,16 +113,18 @@ export default function CodeBlockString({
</pre> </pre>
)} )}
</Highlight> </Highlight>
<div className={styles.buttonGroup}> {isBrowser ? (
{(wordWrap.isEnabled || wordWrap.isCodeScrollable) && ( <div className={styles.buttonGroup}>
<WordWrapButton {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
className={styles.codeButton} <WordWrapButton
onClick={() => wordWrap.toggle()} className={styles.codeButton}
isEnabled={wordWrap.isEnabled} onClick={() => wordWrap.toggle()}
/> isEnabled={wordWrap.isEnabled}
)} />
<CopyButton className={styles.codeButton} code={code} /> )}
</div> <CopyButton className={styles.codeButton} code={code} />
</div>
) : null}
</div> </div>
</Container> </Container>
); );