aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx29
1 files changed, 19 insertions, 10 deletions
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index 621e5b606..aded15f0c 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -7,14 +7,23 @@ interface MarkdownCodeBlockProps {
language: string;
}
-export function MarkdownCodeBlock(props: MarkdownCodeBlockProps) {
- return (
- <span style={{fontSize: 16}}>
- <HighLight
- className={props.language || 'js'}
- >
- {props.literal}
- </HighLight>
- </span>
- );
+interface MarkdownCodeBlockState {}
+
+export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
+ // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
+ // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
+ public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
+ return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+ }
+ public render() {
+ return (
+ <span style={{fontSize: 16}}>
+ <HighLight
+ className={this.props.language || 'javascript'}
+ >
+ {this.props.literal}
+ </HighLight>
+ </span>
+ );
+ }
}