From edbe6915e07a516f5fad2a38eb8ffe96a7b28318 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 17 Dec 2017 13:22:54 -0600
Subject: Fixed https://github.com/0xProject/wiki/issues/19 by disabling
 re-rendering of markdownCodeBlock renderer if props haven't updated

---
 .../ts/pages/shared/markdown_code_block.tsx        | 29 ++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts')

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>
+        );
+    }
 }
-- 
cgit v1.2.3