diff options
author | Fabio Berger <me@fabioberger.com> | 2017-12-18 03:22:54 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2017-12-18 03:22:54 +0800 |
commit | edbe6915e07a516f5fad2a38eb8ffe96a7b28318 (patch) | |
tree | 3e2ab815b5ed259e78a35366c307dba8b7106a68 | |
parent | fd3e8cd8133510a02aa6779a780c20018bebabe0 (diff) | |
download | dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar.gz dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar.bz2 dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar.lz dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar.xz dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.tar.zst dexon-0x-contracts-edbe6915e07a516f5fad2a38eb8ffe96a7b28318.zip |
Fixed https://github.com/0xProject/wiki/issues/19 by disabling re-rendering of markdownCodeBlock renderer if props haven't updated
-rw-r--r-- | packages/website/ts/pages/shared/markdown_code_block.tsx | 29 |
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> + ); + } } |