refactor CodeMirrorEditor

use Set to create additionalClasses

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -57,7 +57,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       isGfmMode: this.props.isGfmMode,
       isEnabledEmojiAutoComplete: false,
       isLoadingKeymap: false,
-      additionalClass: '',
+      additionalClassSet: new Set(),
     };
 
     this.init();
@@ -388,11 +388,21 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   cursorHandler(editor, event) {
     const strFromBol = this.getStrFromBol();
+
+    const autoformatTableClass = 'autoformat-markdown-table-activated';
+    const additionalClassSet = this.state.additionalClassSet;
+    const hasCustomClass = additionalClassSet.has(autoformatTableClass);
     if (mtu.isEndOfLine(editor) && mtu.linePartOfTableRE.test(strFromBol)) {
-      this.setState({additionalClass: 'autoformat-markdown-table-activated'});
+      if (!hasCustomClass) {
+        additionalClassSet.add(autoformatTableClass);
+        this.setState({additionalClassSet});
+      }
     }
     else {
-      this.setState({additionalClass: ''});
+      if (hasCustomClass) {
+        additionalClassSet.delete(autoformatTableClass);
+        this.setState({additionalClassSet});
+      }
     }
   }
 
@@ -444,12 +454,13 @@ export default class CodeMirrorEditor extends AbstractEditor {
       theme: 'elegant',
       lineNumbers: true,
     };
+    const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
     const editorOptions = Object.assign(defaultEditorOptions, this.props.editorOptions || {});
 
     return <React.Fragment>
       <ReactCodeMirror
         ref="cm"
-        className={this.state.additionalClass}
+        className={additionalClasses}
         editorDidMount={(editor) => {
           // add event handlers
           editor.on('paste', this.pasteHandler);