add TextAreaEditor

resource/js/components/PageEditor.js

@@ -368,7 +368,8 @@ export default class PageEditor extends React.Component {
         <div className="col-md-6 col-sm-12 page-editor-editor-container">
           <Editor ref="editor" value={this.state.markdown}
             editorOptions={this.state.editorOptions}
-            isMobile={this.props.crowi.isMobile}
+            // isMobile={this.props.crowi.isMobile}
+            isMobile={true}
             isUploadable={this.state.isUploadable}
             isUploadableFile={this.state.isUploadableFile}
             emojiStrategy={emojiStrategy}

resource/js/components/PageEditor/Editor.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import AbstractEditor from './AbstractEditor';
 import CodeMirrorEditor from './CodeMirrorEditor';
+import TextAreaEditor from './TextAreaEditor';
 
-import FormControl from 'react-bootstrap/es/FormControl';
 import Dropzone from 'react-dropzone';
 
 import pasteHelper from './PasteHelper';
@@ -39,7 +39,7 @@ export default class Editor extends AbstractEditor {
 
   getEditorSubstance() {
     return this.props.isMobile
-      ? this.refs.simpleEditor
+      ? this.refs.taEditor
       : this.refs.cmEditor;
   }
 
@@ -236,16 +236,12 @@ export default class Editor extends AbstractEditor {
 
           {/* for mobile */}
           { isMobile &&
-            <FormControl
-              ref="simpleEditor"
-              componentClass="textarea" className="textarea-for-mobile"
-              inputRef={ref => { this.mobileeditor = ref }}
-              defaultValue={this.state.value}
-              onChange={(e) => {
-                if (this.props.onChange != null) {
-                  this.props.onChange(e.target.value);
-                }
-              }} />
+            <TextAreaEditor
+              ref="taEditor"
+              onPasteFiles={this.pasteFilesHandler}
+              onDragEnter={this.dragEnterHandler}
+              {...this.props}
+            />
           }
 
         </Dropzone>

resource/js/components/PageEditor/TextAreaEditor.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FormControl from 'react-bootstrap/es/FormControl';
+
+import AbstractEditor from './AbstractEditor';
+
+import pasteHelper from './PasteHelper';
+
+import InterceptorManager from '../../../../lib/util/interceptor-manager';
+
+import MarkdownListInterceptor from './MarkdownListInterceptor';
+
+export default class TextAreaEditor extends AbstractEditor {
+
+  constructor(props) {
+    super(props);
+    this.logger = require('@alias/logger')('growi:PageEditor:TextAreaEditor');
+
+    this.state = {
+      value: this.props.value,
+    };
+
+    this.init();
+
+    this.handleEnterKey = this.handleEnterKey.bind(this);
+
+    this.pasteHandler = this.pasteHandler.bind(this);
+  }
+
+  init() {
+    this.interceptorManager = new InterceptorManager();
+    this.interceptorManager.addInterceptors([
+      new MarkdownListInterceptor(),
+    ]);
+  }
+
+  componentDidMount() {
+    // initialize caret line
+    this.setCaretLine(0);
+
+    this.textarea.addEventListener('paste', (e) => {
+      this.logger.info('paste');
+      this.pasteHandler(e);
+    });
+    this.textarea.addEventListener('dragenter', (e) => {
+      this.logger.info('dragenter');
+      this.dispatchDragEnter(e);
+    });
+  }
+
+  /**
+   * @inheritDoc
+   */
+  forceToFocus() {
+  }
+
+  /**
+   * @inheritDoc
+   */
+  setCaretLine(line) {
+    if (isNaN(line)) {
+      return;
+    }
+
+  }
+
+  /**
+   * @inheritDoc
+   */
+  setScrollTopByLine(line) {
+    if (isNaN(line)) {
+      return;
+    }
+
+  }
+
+  /**
+   * @inheritDoc
+   */
+  insertText(text) {
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getStrFromBol() {
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getStrToEol() {
+  }
+
+  /**
+   * @inheritDoc
+   */
+  replaceBolToCurrentPos(text) {
+  }
+
+  /**
+   * handle ENTER key
+   */
+  handleEnterKey() {
+    var context = {
+      handlers: [],  // list of handlers which process enter key
+      editor: this,
+    };
+
+    const interceptorManager = this.interceptorManager;
+    interceptorManager.process('preHandleEnter', context)
+      .then(() => {
+        if (context.handlers.length == 0) {
+          // TODO impl
+          // codemirror.commands.newlineAndIndentContinueMarkdownList(this.getCodeMirror());
+        }
+      });
+  }
+
+  /**
+   * paste event handler
+   * @param {any} event
+   */
+  pasteHandler(event) {
+    const types = event.clipboardData.types;
+
+    // text
+    if (types.includes('text/plain')) {
+      pasteHelper.pasteText(this, event);
+    }
+    // files
+    else if (types.includes('Files')) {
+      this.dispatchPasteFiles(event);
+    }
+  }
+
+  dispatchDragEnter(event) {
+    if (this.props.onDragEnter != null) {
+      this.props.onDragEnter(event);
+    }
+  }
+
+  render() {
+    return <React.Fragment>
+      <FormControl
+        componentClass="textarea" className="textarea-editor"
+        inputRef={ref => { this.textarea = ref }}
+        defaultValue={this.state.value}
+        onChange={(e) => {
+          if (this.props.onChange != null) {
+            this.props.onChange(e.target.value);
+          }
+        }} />
+    </React.Fragment>;
+  }
+
+}
+
+TextAreaEditor.propTypes = Object.assign({
+}, AbstractEditor.propTypes);
+

resource/styles/scss/_on-edit.scss

@@ -98,7 +98,7 @@ body.on-edit {
           height: calc(100vh - #{$header-plus-footer});
 
           .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
-          .textarea-for-mobile {
+          .textarea-editor {
             height: calc(100vh - #{$editor-margin});
             // less than smartphone
             @media (max-width: $screen-xs) {
@@ -284,8 +284,9 @@ body.on-edit {
       }
     } // end of.dropzone
 
-    .textarea-for-mobile {
+    .textarea-editor {
       border: none;
+      font-family: monospace;
     }
 
     .loading-keymap {