# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1538961887 -7200
# Node ID a4705c2b4544d21f8443ec4827adb41f2f3b9af3
# Parent  964438ef84011b08a56ff15f73d33198de4f7b8b
Add send note options to the editor

diff -r 964438ef8401 -r a4705c2b4544 client/src/HtmlSerializer.js
--- a/client/src/HtmlSerializer.js	Mon Oct 01 00:17:45 2018 +0200
+++ b/client/src/HtmlSerializer.js	Mon Oct 08 03:24:47 2018 +0200
@@ -35,7 +35,7 @@
           return <ol>{children}</ol>;
         case 'bulleted-list':
           return <ul>{children}</ul>;
-         case 'list-item':
+        case 'list-item':
           return <li>{children}</li>;
         case 'paragraph':
         case 'line':
@@ -65,7 +65,7 @@
         case 'underlined':
           return <ins>{children}</ins>
         case 'category':
-          return <span style={{ backgroundColor: obj.data.get('color') }}>{children}</span>
+          return <span style={{ backgroundColor: obj.get('color') }}>{children}</span>
         default: return;
       }
     }
diff -r 964438ef8401 -r a4705c2b4544 client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Mon Oct 01 00:17:45 2018 +0200
+++ b/client/src/components/SlateEditor.js	Mon Oct 08 03:24:47 2018 +0200
@@ -7,6 +7,7 @@
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
 import CategoriesTooltip from './CategoriesTooltip'
+// import './SlateEditor.css';
 import { now } from '../utils';
 import { defaultAnnotationsCategories } from '../constants';
 
@@ -26,6 +27,7 @@
 // TODO Check if we can move this to the plugin using the schema option
 // https://docs.slatejs.org/reference/plugins/plugin.html#schema
 const schema = {
+
   nodes: {
     'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
     'list-item': props => <li {...props.attributes}>{props.children}</li>,
@@ -46,6 +48,7 @@
       textDecoration: 'underlined'
     }
   }
+
 }
 
 const initialValue = Value.fromJSON({
@@ -90,7 +93,7 @@
         this.setState({
           currentSelectionText: text,
           currentSelectionStart: start,
-          currentSelectionEnd: end
+          currentSelectionEnd: end,
         });
       }
     });
@@ -99,7 +102,7 @@
 
 
     this.state = {
-      value: props.note ? initialValue : Plain.deserialize(''),
+      value: props.note ? Value.fromJSON(initialValue) : Plain.deserialize(''),
       startedAt: null,
       finishedAt: null,
       currentSelectionText: '',
@@ -109,6 +112,7 @@
       isPortalOpen: false,
       categories: Immutable.List([]),
       isCheckboxChecked: false,
+      enterKeyValue: 0,
     };
   }
 
@@ -212,52 +216,6 @@
     this.refs.editor.focus();
   }
 
-  /**
-   * On key down, if it's a formatting command toggle a mark.
-   *
-   * @param {Event} e
-   * @param {Object} data
-   * @param {Change} change
-   * @return {Change}
-   */
-
-  onKeyDown = (e, change) => {
-    //   if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
-
-    //   e.preventDefault();
-    //   this.props.onEnterKeyDown();
-
-    //   return change;
-    // }
-
-    // if (!data.isMod) return
-    if (!e.ctrlKey) return
-        // Decide what to do based on the key code...
-        switch (e.key) {
-          // When "B" is pressed, add a "bold" mark to the text.
-          case 'b': {
-            e.preventDefault()
-            change.toggleMark('bold')
-
-            return true
-          }
-          case 'i': {
-            // When "U" is pressed, add an "italic" mark to the text.
-            e.preventDefault()
-            change.toggleMark('italic')
-
-            return true
-          }
-          case 'u': {
-            // When "U" is pressed, add an "underline" mark to the text.
-            e.preventDefault()
-            change.toggleMark('underlined')
-
-            return true
-          }
-        }
-    }
-
       /**
    * When a mark button is clicked, toggle the current mark.
    *
@@ -267,7 +225,7 @@
 
   onClickMark = (e, type) => {
 
-      e.preventDefault()
+    e.preventDefault()
     const { value } = this.state
     let { categories } = this.state
 
@@ -398,7 +356,6 @@
         key: category.key
       }
     })
-    this.onChange(change)
 
     Object.assign(category, {
       text: currentSelectionText,
@@ -409,8 +366,9 @@
     });
     categories = categories.push(category);
 
+    this.onChange(change)
+
     this.setState({
-      value: value,
       isPortalOpen: false,
       categories: categories
     });
@@ -429,6 +387,94 @@
   }
 
   /**
+   * On key down, if it's a formatting command toggle a mark.
+   *
+   * @param {Event} e
+   * @param {Change} change
+   * @return {Change}
+   */
+
+  onKeyDown = (e, change) => {
+
+    const {value} = this.state;
+
+    // if (e.key === 'Enter' && value.document.text === '') {
+    //   change.removeChild()
+    // }
+
+    if (e.key === 'Enter' && value.document.text !== '') {
+      this.setState({enterKeyValue: 1})
+    }
+
+    if (e.key !== 'Enter') {
+      this.setState({
+        enterKeyValue: 0,
+      })
+
+    }
+
+    if (e.key === 'Enter' && !this.props.isChecked && this.state.enterKeyValue === 1 && typeof this.props.onEnterKeyDown === 'function') {
+      e.preventDefault();
+      this.props.onEnterKeyDown();
+      this.setState({
+        enterKeyValue: 0,
+      })
+
+
+      return change
+    }
+
+    else if (e.key === 'Enter' && value.document.text !== '' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
+
+      e.preventDefault();
+      this.props.onEnterKeyDown();
+
+      return change
+    }
+
+    if (!e.ctrlKey) return
+        // Decide what to do based on the key code...
+        switch (e.key) {
+          default: {
+            break;
+          }
+          // When "B" is pressed, add a "bold" mark to the text.
+          case 'b': {
+            e.preventDefault()
+            change.toggleMark('bold')
+
+            return true
+          }
+          case 'i': {
+            // When "U" is pressed, add an "italic" mark to the text.
+            e.preventDefault()
+            change.toggleMark('italic')
+
+            return true
+          }
+          case 'u': {
+            // When "U" is pressed, add an "underline" mark to the text.
+            e.preventDefault()
+            change.toggleMark('underlined')
+
+            return true
+          }
+          case 'Enter': {
+            // When "ENTER" is pressed, autosubmit the note.
+            if (value.document.text !== '' && typeof this.props.onEnterKeyDown === 'function') {
+              e.preventDefault()
+              this.props.onEnterKeyDown();
+              this.setState({
+                enterKeyValue: 0,
+              })
+
+              return true
+            }
+        }
+      }
+  }
+
+  /**
    * Render.
    *
    * @return {Element}
@@ -453,7 +499,7 @@
 
   renderToolbar = () => {
     return (
-      <div className="menu toolbar-menu d-flex bg-secondary">
+      <div className="menu toolbar-menu d-flex sticky-top bg-secondary">
           {this.renderMarkButton('bold', 'format_bold')}
           {this.renderMarkButton('italic', 'format_italic')}
           {this.renderMarkButton('underlined', 'format_underlined')}
@@ -478,12 +524,20 @@
     )
   }
 
+  renderSaveButton = () => {
+    if (this.props.note) {
+      return <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold mr-2" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+      Sauvegarder</button>
+    }
+  }
+
   renderToolbarButtons = () => {
     return (
       <div>
-        <button type="button" className="btn btn-primary btn-sm text-secondary float-right mr-5" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
-          { this.props.note ? 'Save note' : 'Ajouter' }
-        </button>
+        {/* <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold float-right" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}> */}
+          {/* { this.props.note ? 'Sauvegarder' : 'Ajouter' } */}
+          {this.renderSaveButton()}
+        {/* </button> */}
         { !this.props.note && this.renderToolbarCheckbox() }
       </div>
     );
@@ -500,10 +554,12 @@
   renderMarkButton = (type, icon) => {
     const isActive = this.hasMark(type)
     const onMouseDown = e => this.onClickMark(e, type)
-
+    const markActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
 
     return (
-      <span className="button text-primary" onMouseDown={onMouseDown} data-active={isActive}>
+      // <span className="button text-primary" onMouseDown={onMouseDown} data-active={isActive}>
+      <span className={markActivation} onMouseDown={onMouseDown} data-active={isActive}>
+
         <span className="material-icons">{icon}</span>
       </span>
     )
@@ -515,6 +571,9 @@
       const { children, mark, attributes } = props
 
       switch (mark.type) {
+        default: {
+          break;
+        }
         case 'bold':
           return <strong {...attributes}>{children}</strong>
         case 'code':
@@ -542,9 +601,10 @@
       isActive = this.hasBlock('list-item') && parent && parent.type === type
     }
     const onMouseDown = e => this.onClickBlock(e, type)
+    const blockActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");
 
     return (
-      <span className="button text-primary" onMouseDown={onMouseDown} data-active={isActive}>
+      <span className={blockActivation} onMouseDown={onMouseDown} data-active={isActive}>
         <span className="material-icons">{icon}</span>
       </span>
     )
@@ -554,6 +614,9 @@
     const { attributes, children, node } = props
 
     switch (node.type) {
+      default: {
+        break;
+      }
       case 'block-quote':
         return <blockquote {...attributes}>{children}</blockquote>
       case 'bulleted-list':
@@ -577,13 +640,11 @@
 
   renderEditor = () => {
     return (
-      <div className="editor-wrapper sticky-bottom p-2">
-      <div className="editor-slatejs">
+      <div className="editor-slatejs p-2">
         {this.renderHoveringMenu()}
         <Editor
           ref="editor"
           spellCheck
-          autoFocus
           placeholder={'Votre espace de prise de note...'}
           schema={schema}
           plugins={plugins}
@@ -594,7 +655,6 @@
           renderNode = {this.renderNode}
         />
       </div>
-      </div>
     )
   }