implement table data saving

src/client/js/components/PageEditor/Editor.js

@@ -35,6 +35,7 @@ export default class Editor extends AbstractEditor {
     this.getDropzoneAccept = this.getDropzoneAccept.bind(this);
     this.getDropzoneClassName = this.getDropzoneClassName.bind(this);
     this.renderDropzoneOverlay = this.renderDropzoneOverlay.bind(this);
+    this.replaceMarkDownTable = this.replaceMarkDownTable.bind(this);
   }
 
   getEditorSubstance() {
@@ -219,6 +220,16 @@ export default class Editor extends AbstractEditor {
     return mtu.parseFromTableStringToMarkdownTable(mtu.getStrFromBotToEot(cm));
   }
 
+  /**
+   * TODO move this func to a proper class
+   */
+  replaceMarkDownTable(markdownTable) {
+    const cm = this.getEditorSubstance().getCodeMirror();
+    const curPos = cm.getCursor();
+    cm.getDoc().replaceRange(markdownTable.toString(), mtu.getBot(cm), mtu.getEot(cm));
+    cm.getDoc().setCursor(curPos.line + 1, 2);
+  }
+
   render() {
     const flexContainer = {
       height: '100%',
@@ -281,7 +292,7 @@ export default class Editor extends AbstractEditor {
           </span>
         </button>
 
-        <HandsontableModal ref='handsontableModal' />
+        <HandsontableModal ref='handsontableModal' onSave={ this.replaceMarkDownTable }/>
 
       </div>
     );

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -33,7 +33,7 @@ export default class HandsontableModal extends React.Component {
 
     this.init = this.init.bind(this);
     this.cancel = this.cancel.bind(this);
-    this.dispatchSave = this.dispatchSave.bind(this);
+    this.save = this.save.bind(this);
   }
 
   componentWillMount() {
@@ -58,13 +58,11 @@ export default class HandsontableModal extends React.Component {
     this.setState({ show: false });
   }
 
-  /**
-   * dispatch save event
-   */
-  dispatchSave() {
+  save() {
     if (this.props.onSave != null) {
       this.props.onSave(this.state.markdownTable);
     }
+    this.setState({ show: false });
   }
 
   render() {
@@ -100,7 +98,7 @@ export default class HandsontableModal extends React.Component {
             <Button bsStyle="danger" onClick={() => this.init(this.props.markdownTable)}>Reset</Button>
             <div className="d-flex">
               <Button bsStyle="default" onClick={this.cancel}>Cancel</Button>
-              <Button bsStyle="primary" onClick={this.dispatchSave}>Done</Button>
+              <Button bsStyle="primary" onClick={this.save}>Done</Button>
             </div>
           </div>
         </Modal.Footer>