create synchronizeAlignment

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -43,6 +43,7 @@ export default class HandsontableModal extends React.Component {
     this.expandWindow = this.expandWindow.bind(this);
     this.contractWindow = this.contractWindow.bind(this);
     this.align = this.align.bind(this);
+    this.synchronizeAlignment = this.synchronizeAlignment.bind(this);
 
     // create debounced method for expanding HotTable
     this.expandHotTableHeightWithDebounce = debounce(100, this.expandHotTableHeight);
@@ -50,26 +51,12 @@ export default class HandsontableModal extends React.Component {
 
   init(markdownTable) {
     const initMarkdownTable = markdownTable || HandsontableModal.getDefaultMarkdownTable();
-
-    const ref = this;
     this.setState(
       {
         markdownTableOnInit: initMarkdownTable,
         markdownTable: initMarkdownTable.clone(),
         handsontableSetting: Object.assign({}, this.state.handsontableSetting, {
-          afterUpdateSettings: function() {
-            const mapping = {
-              'r': 'htRight',
-              'c': 'htCenter',
-              'l': 'htLeft',
-              '': ''
-            };
-
-            for (let i = 0; i < ref.state.markdownTable.options.align.length; i++) {
-              HandsontableUtil.setClassNameToColumns(this, i, i, mapping[ref.state.markdownTable.options.align[i]]);
-            }
-          },
-          // afterUpdateSettings:
+          afterUpdateSettings: this.synchronizeAlignment
         })
       }
     );
@@ -123,10 +110,23 @@ export default class HandsontableModal extends React.Component {
       }
       return { markdownTable: markdownTable };
     }, () => {
-      HandsontableUtil.synchronizeHandsontableModalWithMarkdownTable(this.refs.hotTable.hotInstance, this.state.markdownTable);
+      this.synchronizeAlignment();
     });
   }
 
+  synchronizeAlignment() {
+    const mapping = {
+      'r': 'htRight',
+      'c': 'htCenter',
+      'l': 'htLeft',
+      '': ''
+    };
+
+    for (let i = 0; i < this.state.markdownTable.options.align.length; i++) {
+      HandsontableUtil.setClassNameToColumns(this.refs.hotTable.hotInstance, i, i, mapping[this.state.markdownTable.options.align[i]]);
+    }
+  }
+
   toggleDataImportArea() {
     this.setState({ isDataImportAreaExpanded: !this.state.isDataImportAreaExpanded });
   }

src/client/js/components/PageEditor/HandsontableUtil.js

@@ -12,38 +12,6 @@ export default class HandsontableUtil {
     core.render();
   }
 
-  /**
-   * return a function(handsontable event handler) to adjust the handsontable alignment to the markdown table
-   */
-  static createHandlerToSynchronizeHandontableAlignWith(markdownTableAlign) {
-    const mapping = {
-      'r': 'htRight',
-      'c': 'htCenter',
-      'l': 'htLeft',
-      '': ''
-    };
-
-    return function() {
-      const align = markdownTableAlign;
-      for (let i = 0; i < align.length; i++) {
-        HandsontableUtil.setClassNameToColumns(this, i, i, mapping[align[i]]);
-      }
-    };
-  }
-
-  static synchronizeHandsontableModalWithMarkdownTable(handsontable, markdownTable) {
-    const mapping = {
-      'r': 'htRight',
-      'c': 'htCenter',
-      'l': 'htLeft',
-      '': ''
-    };
-
-    for (let i = 0; i < markdownTable.options.align.length; i++) {
-      HandsontableUtil.setClassNameToColumns(handsontable, i, i, mapping[markdownTable.options.align[i]]);
-    }
-  }
-
   /**
    * return MarkdownTable alignment retrieved from Handsontable instance
    */