WIP: refactor - MarkdownListUtil

resource/js/components/PageEditor/AbstractEditor.js

@@ -31,6 +31,20 @@ export default class AbstractEditor extends React.Component {
   insertText(text) {
   }
 
+  /**
+   * return strings from BOL(beginning of line) to current position
+   */
+  getStrFromBol() {
+    throw new Error('this method should be impelemented in subclass');
+  }
+
+  /**
+   * return strings from current position to EOL(end of line)
+   */
+  getStrToEol(editor) {
+    throw new Error('this method should be impelemented in subclass');
+  }
+
   /**
    * dispatch onSave event
    */

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -40,6 +40,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   constructor(props) {
     super(props);
+    this.logger = require('@alias/logger')('growi:PageEditor:CodeMirrorEditor');
 
     this.state = {
       value: this.props.value,
@@ -52,12 +53,20 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.init();
 
     this.getCodeMirror = this.getCodeMirror.bind(this);
+
+    this.forceToFocus = this.forceToFocus.bind(this);
     this.setCaretLine = this.setCaretLine.bind(this);
     this.setScrollTopByLine = this.setScrollTopByLine.bind(this);
+
+    this.getStrFromBol = this.getStrFromBol.bind(this);
+    this.getStrToEol = this.getStrToEol.bind(this);
+    this.getBol = this.getBol.bind(this);
+    this.getEol = this.getEol.bind(this);
+    this.insertLinebreak = this.insertLinebreak.bind(this);
+
     this.loadTheme = this.loadTheme.bind(this);
     this.loadKeymapMode = this.loadKeymapMode.bind(this);
     this.setKeymapMode = this.setKeymapMode.bind(this);
-    this.forceToFocus = this.forceToFocus.bind(this);
     this.dispatchSave = this.dispatchSave.bind(this);
     this.handleEnterKey = this.handleEnterKey.bind(this);
 
@@ -73,7 +82,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.interceptorManager = new InterceptorManager();
     this.interceptorManager.addInterceptors([
       new MarkdownListInterceptor(),
-      new MarkdownTableInterceptor(),
+      // TODO refactor
+      // new MarkdownTableInterceptor(),
     ]);
 
     this.loadedThemeSet = new Set(['eclipse', 'elegant']);   // themes imported in _vendor.scss
@@ -168,6 +178,51 @@ export default class CodeMirrorEditor extends AbstractEditor {
     editor.getDoc().replaceSelection(text);
   }
 
+  /**
+   * @inheritDoc
+   */
+  getStrFromBol() {
+    const editor = this.getCodeMirror();
+    const curPos = editor.getCursor();
+    return editor.getDoc().getRange(this.getBol(), curPos);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getStrToEol() {
+    const editor = this.getCodeMirror();
+    const curPos = editor.getCursor();
+    return editor.getDoc().getRange(curPos, this.getEol());
+  }
+
+  /**
+   * return the postion of the BOL(beginning of line)
+   */
+  getBol() {
+    const editor = this.getCodeMirror();
+    const curPos = editor.getCursor();
+    return { line: curPos.line, ch: 0 };
+  }
+
+  /**
+   * return the postion of the EOL(end of line)
+   */
+  getEol() {
+    const editor = this.getCodeMirror();
+    const curPos = editor.getCursor();
+    const lineLength = editor.getDoc().getLine(curPos.line).length;
+    return { line: curPos.line, ch: lineLength };
+  }
+
+  insertLinebreak(strToEol) {
+    const editor = this.getCodeMirror();
+    codemirror.commands.newlineAndIndent(editor);
+
+    // replace the line with strToEol (abort auto indent)
+    editor.getDoc().replaceRange(strToEol, this.getBol(), this.getEol());
+  }
+
   loadCss(source) {
     return new Promise((resolve) => {
       loadCssSync(source);
@@ -243,24 +298,21 @@ export default class CodeMirrorEditor extends AbstractEditor {
    * handle ENTER key
    */
   handleEnterKey() {
-    if (this.props.isMobile) {
-      // TODO impl
-    }
-    else {
-      const editor = this.getCodeMirror();
-      var context = {
-        handlers: [],  // list of handlers which process enter key
-        editor: editor,
-      };
-
-      const interceptorManager = this.interceptorManager;
-      interceptorManager.process('preHandleEnter', context)
-        .then(() => {
-          if (context.handlers.length == 0) {
-            codemirror.commands.newlineAndIndentContinueMarkdownList(editor);
-          }
-        });
-    }
+    // TODO refactor
+    // input both of AbstractEditor and CodeMirror
+
+    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) {
+          codemirror.commands.newlineAndIndentContinueMarkdownList(this.getCodeMirror());
+        }
+      });
   }
 
   scrollCursorIntoViewHandler(editor, event) {
@@ -281,7 +333,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
     // text
     if (types.includes('text/plain')) {
-      pasteHelper.pasteText(editor, event);
+      // TODO refactor
+      // pasteHelper.pasteText(editor, event);
     }
     // files
     else if (types.includes('Files')) {

resource/js/components/PageEditor/MarkdownListInterceptor.js

@@ -31,9 +31,9 @@ export default class MarkdownListInterceptor extends BasicInterceptor {
     const editor = context.editor;
 
     // get strings from current position to EOL(end of line) before break the line
-    const strToEol = mlu.getStrToEol(editor);
+    const strToEol = editor.getStrToEol();
     if (mlu.indentAndMarkRE.test(strToEol)) {
-      mlu.newlineWithoutIndent(editor, strToEol);
+      editor.insertLinebreak(strToEol);
 
       // report to manager that handling was done
       context.handlers.push(this.className);

resource/js/components/PageEditor/MarkdownListUtil.js

@@ -12,25 +12,18 @@ class MarkdownListUtil {
     this.indentAndMarkOnlyRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/;
 
     this.pasteText = this.pasteText.bind(this);
-
-    this.getBol = this.getBol.bind(this);
-    this.getEol = this.getEol.bind(this);
-    this.getStrFromBol = this.getStrFromBol.bind(this);
-    this.getStrToEol = this.getStrToEol.bind(this);
-    this.newlineWithoutIndent = this.newlineWithoutIndent.bind(this);
   }
 
   /**
    * paste text
-   * @param {any} editor An editor instance of CodeMirror
+   * @param {any} editor An editor instance of AbstractEditor
    * @param {any} event
    * @param {string} text
    */
   pasteText(editor, event, text) {
     // get strings from BOL(beginning of line) to current position
-    const strFromBol = this.getStrFromBol(editor);
+    const strFromBol = editor.getStrFromBol();
 
-    const matched = strFromBol.match(this.indentAndMarkRE);
     // when match indentAndMarkOnlyRE
     // (this means the current position is the beginning of the list item)
     if (this.indentAndMarkOnlyRE.test(strFromBol)) {
@@ -39,7 +32,9 @@ class MarkdownListUtil {
       // replace
       if (adjusted != null) {
         event.preventDefault();
-        editor.getDoc().replaceRange(adjusted, this.getBol(editor), editor.getCursor());
+        // TODO refactor
+        // editor.getDoc().replaceRange(adjusted, this.getBol(editor), editor.getCursor());
+        console.log('replaceRange with:', adjusted);
       }
     }
   }
@@ -112,48 +107,6 @@ class MarkdownListUtil {
     return isListful;
   }
 
-  /**
-   * return the postion of the BOL(beginning of line)
-   */
-  getBol(editor) {
-    const curPos = editor.getCursor();
-    return { line: curPos.line, ch: 0 };
-  }
-
-  /**
-   * return the postion of the EOL(end of line)
-   */
-  getEol(editor) {
-    const curPos = editor.getCursor();
-    const lineLength = editor.getDoc().getLine(curPos.line).length;
-    return { line: curPos.line, ch: lineLength };
-  }
-
-  /**
-   * return strings from BOL(beginning of line) to current position
-   */
-  getStrFromBol(editor) {
-    const curPos = editor.getCursor();
-    return editor.getDoc().getRange(this.getBol(editor), curPos);
-  }
-
-  /**
-   * return strings from current position to EOL(end of line)
-   */
-  getStrToEol(editor) {
-    const curPos = editor.getCursor();
-    return editor.getDoc().getRange(curPos, this.getEol(editor));
-  }
-
-  /**
-   * insert newline without indent
-   */
-  newlineWithoutIndent(editor, strToEol) {
-    codemirror.commands.newlineAndIndent(editor);
-
-    // replace the line with strToEol (abort auto indent)
-    editor.getDoc().replaceRange(strToEol, this.getBol(editor), this.getEol(editor));
-  }
 }
 
 // singleton pattern

resource/js/components/PageEditor/MarkdownTableInterceptor.js

@@ -32,7 +32,7 @@ export default class MarkdownTableInterceptor extends BasicInterceptor {
    */
   process(contextName, ...args) {
     const context = Object.assign(args[0]);   // clone
-    const editor = context.editor;
+    const editor = context.editor;            // codemirror
 
     // get strings from BOL(beginning of line) to current position
     const strFromBol = mtu.getStrFromBol(editor);