Merge pull request #2496 from weseek/imprv/re-edit-in-row-with-editor

Imprv/re edit in row with editor

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

@@ -654,7 +654,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   showGridEditorHandler() {
-    this.gridEditModal.current.show();
+    this.gridEditModal.current.show(geu.getGridHtml(this.getCodeMirror()));
   }
 
   showHandsonTableHandler() {

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

@@ -12,15 +12,26 @@ export default class GridEditModal extends React.PureComponent {
 
     this.state = {
       show: false,
+      gridHtml: '',
     };
 
+    this.init = this.init.bind(this);
     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() {
+  init(gridHtml) {
+    const initGridHtml = gridHtml;
+    this.setState({ gridHtml: initGridHtml }, function() {
+      // display gridHtml for re-editing
+      console.log(this.state.gridHtml);
+    });
+  }
+
+  show(gridHtml) {
+    this.init(gridHtml);
     this.setState({ show: true });
   }
 

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

@@ -7,9 +7,38 @@ class GridEditorUtil {
     // https://regex101.com/r/7BN2fR/11
     this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
     this.lineEndPartOfGridRE = /^:::$/;
+    this.isInGridBlock = this.isInGridBlock.bind(this);
     this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);
   }
 
+  /**
+   * return boolean value whether the cursor position is in a grid block
+   */
+  isInGridBlock(editor) {
+    const bog = this.getBog(editor);
+    const eog = this.getEog(editor);
+    return (JSON.stringify(bog) !== JSON.stringify(eog));
+  }
+
+  /**
+   * return grid html where the cursor is
+   */
+  getGridHtml(editor) {
+    const curPos = editor.getCursor();
+
+    if (this.isInGridBlock(editor)) {
+      const bog = this.getBog(editor);
+      const eog = this.getEog(editor);
+      // skip block begin sesion("::: editable-row")
+      bog.line++;
+      // skip block end sesion(":::")
+      eog.line--;
+      eog.ch = editor.getDoc().getLine(eog.line).length;
+      return editor.getDoc().getRange(bog, eog);
+    }
+    return editor.getDoc().getLine(curPos.line);
+  }
+
   /**
    * return the postion of the BOD(beginning of grid)
    */