Merge pull request #374 from weseek/attach_an_icon_to_the_cursor

refs #310:##GC-173　キャレットが行末にきた時 かつ マークダウンテーブル中の行である時に キャレットのそばにアイコンを表示する

resource/js/components/PageEditor/Editor.js

@@ -6,6 +6,7 @@ const loadScript = require('simple-load-script');
 const loadCssSync = require('load-css-file');
 
 import * as codemirror from 'codemirror';
+import mtu from './MarkdownTableUtil';
 
 import { UnControlled as ReactCodeMirror } from 'react-codemirror2';
 require('codemirror/addon/display/autorefresh');
@@ -56,6 +57,7 @@ export default class Editor extends React.Component {
       isEnabledEmojiAutoComplete: false,
       isUploading: false,
       isLoadingKeymap: false,
+      additionalClass: "",
     };
 
     this.loadedThemeSet = new Set(['eclipse', 'elegant']);   // themes imported in _vendor.scss
@@ -74,6 +76,7 @@ export default class Editor extends React.Component {
     this.onScrollCursorIntoView = this.onScrollCursorIntoView.bind(this);
     this.onPaste = this.onPaste.bind(this);
 
+    this.onCursor = this.onCursor.bind(this);
     this.onDragEnterForCM = this.onDragEnterForCM.bind(this);
     this.onDragLeave = this.onDragLeave.bind(this);
     this.onDrop = this.onDrop.bind(this);
@@ -430,6 +433,16 @@ export default class Editor extends React.Component {
       : '';
   }
 
+  onCursor(editor, event) {
+    const strFromBol = mtu.getStrFromBol(editor);
+    if (mtu.isEndOfLine(editor) && mtu.linePartOfTableRE.test(strFromBol)) {
+      this.setState({additionalClass: 'add-cursor-icon'});
+    }
+    else {
+      this.setState({additionalClass: ''});
+    }
+  }
+
   render() {
     const flexContainer = {
       height: '100%',
@@ -440,7 +453,7 @@ export default class Editor extends React.Component {
     const theme = this.props.editorOptions.theme || 'elegant';
     const styleActiveLine = this.props.editorOptions.styleActiveLine || undefined;
     return <React.Fragment>
-      <div style={flexContainer}>
+      <div style={flexContainer} className={this.state.additionalClass}>
         <Dropzone
           ref="dropzone"
           disableClick
@@ -508,6 +521,7 @@ export default class Editor extends React.Component {
                 this.emojiAutoCompleteHelper.showHint(editor);
               }
             }}
+            onCursor={this.onCursor}
             onDragEnter={this.onDragEnterForCM}
           />
         </Dropzone>

resource/styles/scss/_on-edit.scss

@@ -96,6 +96,7 @@ body.on-edit {
         // left(editor)
         .page-editor-editor-container {
           height: calc(100vh - #{$header-plus-footer});
+        }
         .react-codemirror2, .CodeMirror, .CodeMirror-scroll {
           height: calc(100vh - #{$editor-margin});
           // less than smartphone
@@ -104,7 +105,7 @@ body.on-edit {
           }
         }
       }
-      }
+
 
       .page-editor-footer {
         width: 100%;
@@ -210,6 +211,13 @@ body.on-edit {
         color: #444;
       }
     }
+    // add icon on cursor
+    .add-cursor-icon .CodeMirror-cursor {
+      &:after {
+        font-family: 'FontAwesome';
+        content: '\f0ce';
+      }
+    }
 
     // for Dropzone
     .dropzone {