Merge branch 'imprv/press-done-button-to-paste-code' into imprv/re-edit-in-row-with-editor

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

@@ -18,6 +18,7 @@ import PreventMarkdownListInterceptor from './PreventMarkdownListInterceptor';
 import MarkdownTableInterceptor from './MarkdownTableInterceptor';
 import mtu from './MarkdownTableUtil';
 import mdu from './MarkdownDrawioUtil';
+import geu from './GridEditorUtil';
 import GridEditModal from './GridEditModal';
 import HandsontableModal from './HandsontableModal';
 import EditorIcon from './EditorIcon';
@@ -867,6 +868,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
         <GridEditModal
           ref={this.gridEditModal}
+          onSave={() => { return geu.replaceGridWithHtmlWithEditor(this.getCodeMirror()) }}
         />
         <HandsontableModal
           ref={this.handsontableModal}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
@@ -16,6 +17,7 @@ export default class GridEditModal extends React.PureComponent {
     this.show = this.show.bind(this);
     this.hide = this.hide.bind(this);
     this.cancel = this.cancel.bind(this);
+    this.pasteCodedGrid = this.pasteCodedGrid.bind(this);
   }
 
   show() {
@@ -30,6 +32,13 @@ export default class GridEditModal extends React.PureComponent {
     this.hide();
   }
 
+  pasteCodedGrid() {
+    if (this.props.onSave != null) {
+      this.props.onSave();
+    }
+    this.cancel();
+  }
+
   showBgCols() {
     const cols = [];
     for (let i = 0; i < 12; i++) {
@@ -72,7 +81,7 @@ export default class GridEditModal extends React.PureComponent {
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">
             <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>Cancel</button>
-            <button type="button" className="btn btn-primary">Done</button>
+            <button type="button" className="btn btn-primary" onClick={this.pasteCodedGrid}>Done</button>
           </div>
         </ModalFooter>
       </Modal>
@@ -80,3 +89,7 @@ export default class GridEditModal extends React.PureComponent {
   }
 
 }
+
+GridEditModal.propTypes = {
+  onSave: PropTypes.func,
+};

src/client/js/components/PageEditor/GridEditorUtil.js

@@ -0,0 +1,25 @@
+/**
+ * Utility for grid editor
+ */
+class GridEditorUtil {
+
+  constructor() {
+    this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);
+  }
+
+  replaceGridWithHtmlWithEditor(editor) {
+    const curPos = editor.getCursor();
+    editor.getDoc().replaceRange(
+      // dummy data
+      '<div class="container"><div class="row"><div class="col-sm-6 col-md-5 col-lg-12">dummy</div></div></div>',
+      { line: editor.getDoc().getCursor().line, ch: editor.getDoc().getCursor().ch },
+    );
+    editor.getDoc().setCursor(curPos.line + 1, 2);
+  }
+
+}
+
+// singleton pattern
+const instance = new GridEditorUtil();
+Object.freeze(instance);
+export default instance;