ensure to switch Editor component behavior for GFM by CommentForm.state.isMarkdown

resource/js/components/PageComment/CommentForm.js

@@ -56,6 +56,8 @@ export default class CommentForm extends React.Component {
   updateStateCheckbox(event) {
     const value = event.target.checked;
     this.setState({isMarkdown: value});
+    // changeMode
+    this.refs.editor.setGfmMode(value);
   }
 
   handleSelect(key) {
@@ -208,6 +210,7 @@ export default class CommentForm extends React.Component {
                     <Tab eventKey={1} title="Write">
                       <Editor ref="editor"
                         value={this.state.comment}
+                        isGfmMode={this.state.isMarkdown}
                         editorOptions={this.props.editorOptions}
                         lineNumbers={false}
                         isMobile={this.props.crowi.isMobile}

resource/js/components/PageEditor/AbstractEditor.js

@@ -27,6 +27,13 @@ export default class AbstractEditor extends React.Component {
   setValue(newValue) {
   }
 
+  /**
+   * Enable/Disable GFM mode
+   * @param {bool} bool
+   */
+  setGfmMode(bool) {
+  }
+
   /**
    * set caret position of codemirror
    * @param {string} number
@@ -106,6 +113,7 @@ export default class AbstractEditor extends React.Component {
 
 AbstractEditor.propTypes = {
   value: PropTypes.string,
+  ifGfmMode: PropTypes.bool,
   editorOptions: PropTypes.object,
   onChange: PropTypes.func,
   onScroll: PropTypes.func,
@@ -114,4 +122,7 @@ AbstractEditor.propTypes = {
   onPasteFiles: PropTypes.func,
   onDragEnter: PropTypes.func,
 };
+AbstractEditor.defaultProps = {
+  isGfmMode: true,
+};
 

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -45,6 +45,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
     this.state = {
       value: this.props.value,
+      isGfmMode: this.props.isGfmMode,
       isEnabledEmojiAutoComplete: false,
       isLoadingKeymap: false,
       additionalClass: '',
@@ -137,6 +138,18 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.getCodeMirror().getDoc().setValue(newValue);
   }
 
+  /**
+   * @inheritDoc
+   */
+  setGfmMode(bool) {
+    this.setState({
+      isGfmMode: bool,
+      isEnabledEmojiAutoComplete: bool,
+    });
+    const mode = bool ? 'gfm' : undefined;
+    this.getCodeMirror().setOption('mode', mode);
+  }
+
   /**
    * @inheritDoc
    */
@@ -330,6 +343,11 @@ export default class CodeMirrorEditor extends AbstractEditor {
    * handle ENTER key
    */
   handleEnterKey() {
+    if (!this.state.isGfmMode) {
+      codemirror.commands.newlineAndIndent(this.getCodeMirror());
+      return;
+    }
+
     const context = {
       handlers: [],  // list of handlers which process enter key
       editor: this,
@@ -404,6 +422,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   render() {
+    const mode = this.state.isGfmMode ? 'gfm' : undefined;
     const defaultEditorOptions = {
       theme: 'elegant',
       lineNumbers: true,
@@ -421,7 +440,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         }}
         value={this.state.value}
         options={{
-          mode: 'gfm',
+          mode: mode,
           theme: editorOptions.theme,
           styleActiveLine: editorOptions.styleActiveLine,
           lineNumbers: this.props.lineNumbers,

resource/js/components/PageEditor/Editor.js

@@ -57,6 +57,13 @@ export default class Editor extends AbstractEditor {
     this.getEditorSubstance().setValue(newValue);
   }
 
+  /**
+   * @inheritDoc
+   */
+  setGfmMode(bool) {
+    this.getEditorSubstance().setGfmMode(bool);
+  }
+
   /**
    * @inheritDoc
    */

resource/js/components/PageEditor/TextAreaEditor.js

@@ -20,6 +20,7 @@ export default class TextAreaEditor extends AbstractEditor {
 
     this.state = {
       value: this.props.value,
+      isGfmMode: this.props.isGfmMode,
     };
 
     this.init();
@@ -65,6 +66,15 @@ export default class TextAreaEditor extends AbstractEditor {
     this.textarea.value = newValue;
   }
 
+  /**
+   * @inheritDoc
+   */
+  setGfmMode(bool) {
+    this.setState({
+      isGfmMode: bool,
+    });
+  }
+
   /**
    * @inheritDoc
    */
@@ -173,14 +183,19 @@ export default class TextAreaEditor extends AbstractEditor {
         return;
       }
 
-      event.preventDefault();
-      this.handleEnterKey();
+      this.handleEnterKey(event);
     }
   }
 
   /**
    * handle ENTER key
+   * @param {string} event
    */
+  handleEnterKey(event) {
+    if (!this.state.isGfmMode) {
+      return; // do nothing
+    }
+
     const context = {
       handlers: [],  // list of handlers which process enter key
       editor: this,
@@ -189,6 +204,7 @@ export default class TextAreaEditor extends AbstractEditor {
     const interceptorManager = this.interceptorManager;
     interceptorManager.process('preHandleEnter', context)
       .then(() => {
+        event.preventDefault();
         if (context.handlers.length == 0) {
           mlu.newlineAndIndentContinueMarkdownList(this);
         }