Select message content with Ctrl + A if message is in focus

Fixes #92

app/src/components/Sidebar/CodeDiff.tsx

@@ -58,6 +58,23 @@ class CodeDiff extends React.Component<Props, {}> {
     return this.props.classes.noChange
   }
 
+  private selectText = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const isCtrlA = (e.metaKey || e.ctrlKey) && e.key === 'a'
+
+    if (isCtrlA && window.getSelection) {
+      e.persist()
+      e.preventDefault()
+      e.stopPropagation()
+      const selection = window.getSelection()
+      const range = document.createRange()
+      range.selectNodeContents((e.target as HTMLElement).getElementsByTagName('pre')[0])
+      if (selection) {
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    }
+  }
+
   public render() {
     const changes = diff.diffLines(this.props.previous, this.props.current)
     const styledLines = Prism.highlight(this.props.current, Prism.languages.json, 'json').split('\n')
@@ -84,10 +101,12 @@ class CodeDiff extends React.Component<Props, {}> {
     })
 
     return (
-      <div className={this.props.classes.gutters}>
+      <div>
-        <pre className={`language-json ${this.props.classes.codeBlock}`}>
+        <div className={this.props.classes.gutters} tabIndex={0} onKeyDown={this.selectText}>
+          <pre className={`language-json ${this.props.classes.codeBlock}`} >
             {code}
           </pre>
+        </div>
         {this.renderChangeAmount(changes)}
       </div>
     )