Add typo highlighting checkbox to the app

package.json

@@ -30,6 +30,7 @@
   "scripts": {
     "buildDev": "webpack -d --devtool=source-map",
     "build": "webpack --mode=production",
+    "watch": "webpack -w",
     "start": "webpack-dev-server -d --hot --inline --content-base example/"
   },
   "devDependencies": {

src/App/index.js

@@ -19,6 +19,7 @@ class App extends Component {
     this.state = {
       correctionMode: false,
       isTimeout: false,
+      contentEditable: false
     }
 
     this.selectionContext = "";
@@ -26,6 +27,44 @@ class App extends Component {
     this.registerHandlers();
   }
 
+  setContenteditable = (e) => {
+    if (e.target.checked) {
+      this.setState({
+        contentEditable: true
+      });
+
+      alertify.success(i18n.typoHighlightingEnabled);
+    } else {
+      this.setState({
+        contentEditable: false
+      });
+
+      alertify.success(i18n.typoHighlightingDisabled);
+    }
+  }
+
+  /**
+   * Enables browser typo highlighting on page
+   */
+  enableTypoHighlighting = () => {
+    let body = $("body");
+    body.attr("contenteditable", true);
+    body.attr("oncut", "return false");
+    body.attr("onpaste", "return false");
+    body.attr("onkeydown", "if(event.metaKey) return true; return false;");
+  }
+
+  /**
+  * Disables browser typo highlighting on page
+  */
+  disableTypoHighlighting = () => {
+    let body = $("body");
+    body.attr("contenteditable", false);
+    body.attr("oncut", "return true");
+    body.attr("onpaste", "return true");
+    body.attr("onkeydown", "return true");
+  }
+
   // Returns selected text or null if no
   // text was selected
   getSelectedText() {
@@ -61,6 +100,8 @@ class App extends Component {
 
         this.typo = selection;
 
+        this.disableTypoHighlighting();
+
         // Ctrl-Enter pressed
         this.setState({
           correctionMode: true
@@ -75,6 +116,8 @@ class App extends Component {
     return (
       <TypoModal text={this.typo} context={this.selectionContext}
         closeCallback={this.modalClosedCallback.bind(true)} 
+        contentEditableCallback={this.setContenteditable}
+        contentEditable={this.state.contentEditable}
         show={this.state.correctionMode}/>
     );
   }
@@ -85,17 +128,22 @@ class App extends Component {
       this.setState({
         correctionMode: false
       });
-      return;
+    } else {
+
+      this.setState({
+        correctionMode: false,
+        isTimeout: true,
+      });
+
+      this.requestTimer = window.setTimeout(() => { 
+        this.setState({ isTimeout: false }); 
+      }, config.requestTimeout);
     }
 
-    this.setState({
-      correctionMode: false,
-      isTimeout: true,
-    });
+    if (this.state.contentEditable) {
+      this.enableTypoHighlighting();
+    }
 
-    this.requestTimer = window.setTimeout(() => { 
-      this.setState({ isTimeout: false }); 
-    }, config.requestTimeout);
   }
 
   componentWillUnmount() {

src/Localization.js

@@ -19,6 +19,9 @@ export const i18n = new LocalizedStrings({
         messageSuccess:             "Благодарим за отправку опечатки. Мы уже работаем над её исправлением!",
         errorFormContainsErrors:    "Форма отправки содержит ошибки!",
         errorSendFailture:          "Не удалось отправить исправление. Мы уже работаем над решением проблемы!",
+        typoHighlightingEnable:     "Включить подсветку ошибок",
+        typoHighlightingEnabled:    "Подсветка опечаток на странице включена",
+        typoHighlightingDisabled:   "Подсветка опечаток на странице выключена",
     },
     en: {
         modalTitle:                 "Typo correction system Etersoft",
@@ -38,5 +41,8 @@ export const i18n = new LocalizedStrings({
         messageSuccess:             "Thank you for a typo submitting! We are already working on this report!",
         errorFormContainsErrors:    "The form contains errors!",
         errorSendFailture:          "Failed to send request. We are fixing a problem!",
+        typoHighlightingEnable:     "Typo highlighting on page",
+        typoHighlightingEnabled:    "Typo highlighting enabled on this page",
+        typoHighlightingDisabled:   "Typo highlighting disabled on this page",
     }
 })
\ No newline at end of file

src/Modal/index.js

 import React, { Component } from 'react';
 
-import {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Alert } from 'react-bootstrap';
+import {Modal, Checkbox, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Alert } from 'react-bootstrap';
 
 import $ from 'jquery';
 import './Modal.css';
@@ -22,6 +22,7 @@ class TypoModal extends Component {
       text: this.props.text,
       correct: this.props.text,
       context: this.props.context,
+      contentEditable: this.props.contentEditable,
       language: this.getLanguage(),
       comment: "",
       error: ""
@@ -32,6 +33,7 @@ class TypoModal extends Component {
     i18n.setLanguage(this.state.language);
 
     this.closeCallback = props.closeCallback;
+    this.contentEditableCallback = props.contentEditableCallback;
 
     // Bindings 
     this.submitTypo = this.submitTypo.bind(this);
@@ -166,6 +168,14 @@ class TypoModal extends Component {
     this.persistLanguage(language);
   }
 
+  onContentEditableCheckboxChanged = (e) => {
+    this.setState({
+      contentEditable: e.target.checked
+    });
+
+    this.contentEditableCallback(e);
+  }
+
   render() {
     if (!this.state.show) return null;
 
@@ -204,6 +214,9 @@ class TypoModal extends Component {
         </Modal.Body>
 
         <Modal.Footer>
+          <Checkbox onChange={this.onContentEditableCheckboxChanged} checked={this.state.contentEditable}>
+            {i18n.typoHighlightingEnable}
+          </Checkbox>
           <LangSwitcher activeLanguage={this.state.language} onLangChanged={this.onLangChanged} languages={this.languages}></LangSwitcher>
 
           <Button onClick={this.handleClose}>{i18n.close}</Button>