Merge pull request #268 from 0xProject/fix/codeSelectingInDocs

Fix code selection bug in docs

2 files changed, 20 insertions, 10 deletions

diff --git a/package.json b/package.json
index e6230bf18..e702c1d90 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "scripts": {
         "testrpc": "testrpc -p 8545 --networkId 50 -m \"${npm_package_config_mnemonic}\"",
         "lerna:run": "lerna run",
+        "lerna:rebuild": "lerna run clean; lerna run build;",
         "lerna:publish": "yarn install; lerna run clean; lerna run build; lerna publish --registry=https://registry.npmjs.org/"
     },
     "config": {
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>
+        );
+    }
 }