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

# Conflicts:
#	src/client/js/components/PageEditor/GridEditModal.jsx

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
-import geu from './GridEditorUtil';
 
 export default class GridEditModal extends React.PureComponent {
 
@@ -36,7 +35,9 @@ export default class GridEditModal extends React.PureComponent {
 
   pasteCodedGrid() {
     // dummy data
-    const pastedGridData = '<div class="container"><div class="row"><div class="col-sm-6 col-md-5 col-lg-12">dummy</div></div></div>';
+    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);
     }
@@ -54,6 +55,7 @@ export default class GridEditModal extends React.PureComponent {
   showBgCols() {
     const cols = [];
     for (let i = 0; i < 12; i++) {
+      // [bg-light:TODO support dark mode by GW-3037]
       cols.push(<div className="bg-light grid-bg-col col-1"></div>);
     }
     return cols;
@@ -67,6 +69,15 @@ export default class GridEditModal extends React.PureComponent {
     }
   }
 
+  showEditableCols() {
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+      // [bg-light:TODO support dark mode by GW-3037]
+      cols.push(<div className="bg-dark grid-bg-col col-1"></div>);
+    }
+    return cols;
+  }
+
   render() {
     return (
       <Modal isOpen={this.state.show} toggle={this.cancel} size="xl">
@@ -86,7 +97,17 @@ export default class GridEditModal extends React.PureComponent {
                 <h5>Large Desktop</h5>
                 <div className="device-container"></div>
               </div>
-              <div className="row col-9 flex-nowrap overflow-auto">{this.showBgCols()}</div>
+              <div className="col-9">
+                <div className="row h-100">
+                  {this.showBgCols()}
+                </div>
+                <div className="row w-100 h-100 position-absolute grid-editable-row">
+                  {/* [Just an example to check if bg-cols and editable-cols fit] */}
+                  <div className="bg-dark grid-editable-col col-3"></div>
+                  <div className="bg-dark grid-editable-col col-5"></div>
+                  <div className="bg-dark grid-editable-col col-4"></div>
+                </div>
+              </div>
             </div>
           </div>
         </ModalBody>

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

@@ -4,10 +4,10 @@
 class GridEditorUtil {
 
   constructor() {
-    // TODO url
-    this.lineBeginPartOfGridRE = /(<[^/].*>)/;
-    this.lineEndPartOfGridRE = /(<\/.*>)/;
-    this.linePartOfGridRE = /(<[^/].*>)[\s\S]*<\/.*>$/;
+    // https://regex101.com/r/7BN2fR/11
+    this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
+    this.lineEndPartOfGridRE = /^:::$/;
+    this.isInRow = this.isInRow.bind(this);
     this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);
   }
 
@@ -15,10 +15,9 @@ class GridEditorUtil {
    * return boolean value whether the cursor position is in a row
    */
   isInRow(editor) {
-    const curPos = editor.getCursor();
-    // return this.linePartOfTableRE.test(editor.getDoc().getLine(curPos.line));
-    console.log(this.linePartOfGridRE.test(editor.getDoc().getLine(curPos.line)));
-    return this.linePartOfGridRE.test(editor.getDoc().getLine(curPos.line));
+    const bog = this.getBog(editor);
+    const eog = this.getEog(editor);
+    return (JSON.stringify(bog) !== JSON.stringify(eog));
   }
 
   /**
@@ -28,6 +27,10 @@ class GridEditorUtil {
     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--) {
@@ -37,7 +40,7 @@ class GridEditorUtil {
         break;
       }
 
-      if (this.lineBeginPartOfGridRE.test(strLine)) {
+      if (this.lineEndPartOfGridRE.test(strLine)) {
         isFound = false;
         break;
       }
@@ -58,7 +61,11 @@ class GridEditorUtil {
     const curPos = editor.getCursor();
     const lastLine = editor.getDoc().lastLine();
 
-    let line = curPos.line;
+    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);
@@ -67,7 +74,7 @@ class GridEditorUtil {
         break;
       }
 
-      if (this.lineEndPartOfGridRE.test(strLine)) {
+      if (this.lineBeginPartOfGridRE.test(strLine)) {
         isFound = false;
         break;
       }
@@ -80,13 +87,13 @@ class GridEditorUtil {
     const eodLine = Math.min(line, lastLine);
     const lineLength = editor.getDoc().getLine(eodLine).length;
     return { line: eodLine, ch: lineLength };
-    // return { line: lastLine, ch: curPos.ch };
   }
 
   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);
+    console.log(this.isInRow(editor));
   }
 
 }

src/client/styles/scss/_on-edit.scss

@@ -316,7 +316,18 @@ body.on-edit {
   height: 135px;
 }
 
+// [border-color:TODO support dark mode by GW-3037]
 .grid-bg-col {
   border-right: 5px solid white;
   border-left: 5px solid white;
 }
+
+.grid-editable-row {
+  top: 0;
+}
+
+.grid-editable-col {
+  border-right: 5px solid white;
+  border-left: 5px solid white;
+  opacity: 0.5;
+}