Crowi delegates launchHandsonTableModal to Page

src/client/js/components/Page.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import RevisionBody from './Page/RevisionBody';
 import HandsontableModal from './PageEditor/HandsontableModal';
+import MarkdownTable from '../models/MarkdownTable';
 
 export default class Page extends React.Component {
 
@@ -70,8 +71,9 @@ export default class Page extends React.Component {
     return returnBody;
   }
 
-  getHandsontableModal() {
-    return this.refs.handsontableModal;
+  launchHandsonTableModal(beginLineNumber, endLineNumber) {
+    const tableLines = this.state.markdown.split('\n').slice(beginLineNumber - 1, endLineNumber).join('\n');
+    this.refs.handsontableModal.show(MarkdownTable.fromMarkdownString(tableLines));
   }
 
   renderHtml(markdown, highlightKeywords) {

src/client/js/util/Crowi.js

@@ -232,8 +232,14 @@ export default class Crowi {
       });
   }
 
-  launchHandsonTableModal() {
-    this.page.getHandsontableModal().show();
+  launchHandsonTableModal(componentKind, beginLineNumber, endLineNumber) {
+    let targetComponent;
+    switch (componentKind) {
+      case 'page':
+        targetComponent = this.page;
+        break;
+    }
+    targetComponent.launchHandsonTableModal(beginLineNumber, endLineNumber);
   }
 
   apiGet(path, params) {

src/client/js/util/markdown-it/table.js

@@ -8,7 +8,7 @@ export default class TableConfigurer {
     md.renderer.rules.table_open = (tokens, idx) => {
       const beginLine = tokens[idx].map[0] + 1;
       const endLine  = tokens[idx].map[1];
-      return `<div><button onClick="crowi.launchHandsonTableModal()" data-markdowntable-begin-line=${beginLine} data-markdown-table-end-line=${endLine}></button><table class="table table-bordered">`;
+      return `<div><button onClick="crowi.launchHandsonTableModal('page', ${beginLine}, ${endLine})"><i class="fa fa-table"></i></button><table class="table table-bordered">`;
     };
 
     md.renderer.rules.table_close = (tokens, idx) => {