create launchHandsonTableModal func

src/client/js/util/Crowi.js

@@ -3,6 +3,8 @@
  */
 
 import axios from 'axios';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
 
@@ -12,6 +14,7 @@ import {
   DetachCodeBlockInterceptor,
   RestoreCodeBlockInterceptor,
 } from './interceptor/detach-code-blocks';
+import HandsontableModal from '../components/PageEditor/HandsontableModal';
 
 export default class Crowi {
   constructor(context, window) {
@@ -227,6 +230,12 @@ export default class Crowi {
       });
   }
 
+  launchHandsonTableModal() {
+    const handsonTableModalElem = document.getElementById('handsontable-modal');
+    const handsonTableModal = ReactDOM.render(<HandsontableModal />, handsonTableModalElem);
+    handsonTableModal.show();
+  }
+
   apiGet(path, params) {
     return this.apiRequest('get', path, {params: 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 data-markdowntable-begin-line=${beginLine} data-markdown-table-end-line=${endLine}></button><table class="table table-bordered">`;
+      return `<div><button onClick="crowi.launchHandsonTableModal()" data-markdowntable-begin-line=${beginLine} data-markdown-table-end-line=${endLine}></button><table class="table table-bordered">`;
     };
 
     md.renderer.rules.table_close = (tokens, idx) => {

src/server/views/widget/page_modals.html

@@ -3,4 +3,4 @@
 {% include '../modal/create_template.html' %}
 {% include '../modal/duplicate.html' %}
 {% include '../modal/put_back.html' %}
-<div id="handsontable-modal" />
+<div id="handsontable-modal"></div>