Merge pull request #2443 from weseek/imprv/press-done-button-to-paste-code

Imprv/press done button to paste code

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={(grid) => { return geu.replaceGridWithHtmlWithEditor(this.getCodeMirror(), grid) }}
         />
         <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,17 @@ export default class GridEditModal extends React.PureComponent {
     this.hide();
   }
 
+  pasteCodedGrid() {
+    // dummy data
+    const pastedGridData = `::: editable-row\n<div class="container">\n  <div class="row">
+    <div class="col-sm-6 col-md-5 col-lg-12">dummy</div>\n  </div>\n</div>\n:::`;
+
+    if (this.props.onSave != null) {
+      this.props.onSave(pastedGridData);
+    }
+    this.cancel();
+  }
+
   showBgCols() {
     const cols = [];
     for (let i = 0; i < 12; i++) {
@@ -84,7 +97,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>
@@ -92,3 +105,7 @@ export default class GridEditModal extends React.PureComponent {
   }
 
 }
+
+GridEditModal.propTypes = {
+  onSave: PropTypes.func,
+};

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

@@ -0,0 +1,93 @@
+/**
+ * Utility for grid editor
+ */
+class GridEditorUtil {
+
+  constructor() {
+    // https://regex101.com/r/7BN2fR/11
+    this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
+    this.lineEndPartOfGridRE = /^:::$/;
+    this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);
+  }
+
+  /**
+   * return the postion of the BOD(beginning of grid)
+   */
+  getBog(editor) {
+    const curPos = editor.getCursor();
+    const firstLine = editor.getDoc().firstLine();
+
+    if (this.lineBeginPartOfGridRE.test(editor.getDoc().getLine(curPos.line))) {
+      return { line: curPos.line, ch: 0 };
+    }
+
+    let line = curPos.line - 1;
+    let isFound = false;
+    for (; line >= firstLine; line--) {
+      const strLine = editor.getDoc().getLine(line);
+      if (this.lineBeginPartOfGridRE.test(strLine)) {
+        isFound = true;
+        break;
+      }
+
+      if (this.lineEndPartOfGridRE.test(strLine)) {
+        isFound = false;
+        break;
+      }
+    }
+
+    if (!isFound) {
+      return { line: curPos.line, ch: curPos.ch };
+    }
+
+    const bodLine = Math.max(firstLine, line);
+    return { line: bodLine, ch: 0 };
+  }
+
+  /**
+   * return the postion of the EOD(end of grid)
+   */
+  getEog(editor) {
+    const curPos = editor.getCursor();
+    const lastLine = editor.getDoc().lastLine();
+
+    if (this.lineEndPartOfGridRE.test(editor.getDoc().getLine(curPos.line))) {
+      return { line: curPos.line, ch: editor.getDoc().getLine(curPos.line).length };
+    }
+
+    let line = curPos.line + 1;
+    let isFound = false;
+    for (; line <= lastLine; line++) {
+      const strLine = editor.getDoc().getLine(line);
+      if (this.lineEndPartOfGridRE.test(strLine)) {
+        isFound = true;
+        break;
+      }
+
+      if (this.lineBeginPartOfGridRE.test(strLine)) {
+        isFound = false;
+        break;
+      }
+    }
+
+    if (!isFound) {
+      return { line: curPos.line, ch: curPos.ch };
+    }
+
+    const eodLine = Math.min(line, lastLine);
+    const lineLength = editor.getDoc().getLine(eodLine).length;
+    return { line: eodLine, ch: lineLength };
+  }
+
+  replaceGridWithHtmlWithEditor(editor, grid) {
+    const curPos = editor.getCursor();
+    editor.getDoc().replaceRange(grid.toString(), this.getBog(editor), this.getEog(editor));
+    editor.getDoc().setCursor(curPos.line + 1, 2);
+  }
+
+}
+
+// singleton pattern
+const instance = new GridEditorUtil();
+Object.freeze(instance);
+export default instance;