client/src/components/SlateEditor.js
changeset 72 7634b424f426
parent 64 aecde527900a
child 74 043477fd5c5c
--- a/client/src/components/SlateEditor.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/components/SlateEditor.js	Thu Jun 22 10:47:10 2017 +0200
@@ -1,6 +1,7 @@
 import { Editor, Plain, Raw } from 'slate'
 import React from 'react'
 import Portal from 'react-portal'
+import { Button } from 'react-bootstrap'
 import moment from 'moment'
 import Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
@@ -83,6 +84,7 @@
       hoveringMenu: null,
       isPortalOpen: false,
       categories: Immutable.List([]),
+      isCheckboxChecked: false,
     };
   }
 
@@ -197,12 +199,11 @@
 
   onKeyDown = (e, data, state) => {
 
-    if (data.key === 'enter') {
-      if (typeof this.props.onEnterKeyDown === 'function') {
-        e.preventDefault();
-        this.props.onEnterKeyDown();
-        return state;
-      }
+    if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
+      e.preventDefault();
+      this.props.onEnterKeyDown();
+
+      return state;
     }
 
     if (!data.isMod) return
@@ -376,6 +377,18 @@
     });
   }
 
+  onButtonClick = () => {
+    if (typeof this.props.onButtonClick === 'function') {
+      this.props.onButtonClick();
+    }
+  }
+
+  onCheckboxChange = (e) => {
+    if (typeof this.props.onCheckboxChange === 'function') {
+      this.props.onCheckboxChange(e);
+    }
+  }
+
   /**
    * Render.
    *
@@ -407,6 +420,14 @@
 
         {this.renderBlockButton('numbered-list', 'format_list_numbered')}
         {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
+        <div>
+          <div className="checkbox">
+            <label>
+              <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
+            </label>
+          </div>
+          <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>Add note</Button>
+        </div>
       </div>
     )
   }