Merge pull request #619 from weseek/feat/button-for-handsontable-in-view-panel

Feat/button for handsontable in view panel

src/client/js/app.js

@@ -158,6 +158,10 @@ Object.keys(componentMappings).forEach((key) => {
   }
 });
 
+// set page if exists
+if (componentInstances['page'] != null) {
+  crowi.setPage(componentInstances['page']);
+}
 
 /**
  * save success handler when reloading is not needed

src/client/js/components/Page.js

@@ -2,6 +2,8 @@ import React from 'react';
 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 {
 
@@ -9,7 +11,7 @@ export default class Page extends React.Component {
     super(props);
 
     this.state = {
-      html: '',
+      html: ''
     };
 
     this.appendEditSectionButtons = this.appendEditSectionButtons.bind(this);
@@ -30,7 +32,6 @@ export default class Page extends React.Component {
   }
 
   setMarkdown(markdown) {
-    this.setState({ markdown });
     this.renderHtml(markdown, this.props.highlightKeywords);
   }
 
@@ -69,8 +70,18 @@ export default class Page extends React.Component {
     return returnBody;
   }
 
+  /**
+   * launch HandsontableModal with data specified by arguments
+   * @param beginLineNumber
+   * @param endLineNumber
+   */
+  launchHandsontableModal(beginLineNumber, endLineNumber) {
+    const tableLines = this.props.markdown.split('\n').slice(beginLineNumber - 1, endLineNumber).join('\n');
+    this.refs.handsontableModal.show(MarkdownTable.fromMarkdownString(tableLines));
+  }
+
   renderHtml(markdown, highlightKeywords) {
-    var context = {
+    let context = {
       markdown,
       dom: this.revisionBodyElement,
       currentPagePath: this.props.pagePath,
@@ -85,8 +96,7 @@ export default class Page extends React.Component {
       })
       .then(() => interceptorManager.process('postPreProcess', context))
       .then(() => {
-        var parsedHTML = crowiRenderer.process(context.markdown);
-        context['parsedHTML'] = parsedHTML;
+        context['parsedHTML'] = crowiRenderer.process(context.markdown);
       })
       .then(() => interceptorManager.process('prePostProcess', context))
       .then(() => {
@@ -119,6 +129,7 @@ export default class Page extends React.Component {
           isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={true}
       />
+      <HandsontableModal ref='handsontableModal' />
     </div>;
   }
 }

src/client/js/util/Crowi.js

@@ -26,6 +26,7 @@ export default class Crowi {
     this.document = window.document || {};
     this.localStorage = window.localStorage || {};
     this.socketClientId = Math.floor(Math.random() * 100000);
+    this.page = undefined;
     this.pageEditor = undefined;
 
     this.fetchUsers = this.fetchUsers.bind(this);
@@ -66,6 +67,10 @@ export default class Crowi {
     return this.config;
   }
 
+  setPage(page) {
+    this.page = page;
+  }
+
   setPageEditor(pageEditor) {
     this.pageEditor = pageEditor;
   }
@@ -227,6 +232,16 @@ export default class Crowi {
       });
   }
 
+  launchHandsontableModal(componentKind, beginLineNumber, endLineNumber) {
+    let targetComponent;
+    switch (componentKind) {
+      case 'page':
+        targetComponent = this.page;
+        break;
+    }
+    targetComponent.launchHandsontableModal(beginLineNumber, endLineNumber);
+  }
+
   apiGet(path, params) {
     return this.apiRequest('get', path, {params: params});
   }

src/client/js/util/GrowiRenderer.js

@@ -16,6 +16,7 @@ import TableConfigurer from './markdown-it/table';
 import TaskListsConfigurer from './markdown-it/task-lists';
 import TocAndAnchorConfigurer from './markdown-it/toc-and-anchor';
 import BlockdiagConfigurer from './markdown-it/blockdiag';
+import TableWithHandsontableButtonConfigurer from './markdown-it/table-with-handsontable-button';
 
 export default class GrowiRenderer {
 
@@ -72,7 +73,6 @@ export default class GrowiRenderer {
     this.markdownItConfigurers = [
       new TaskListsConfigurer(crowi),
       new HeaderConfigurer(crowi),
-      new TableConfigurer(crowi),
       new EmojiConfigurer(crowi),
       new MathJaxConfigurer(crowi),
       new PlantUMLConfigurer(crowi),
@@ -87,16 +87,19 @@ export default class GrowiRenderer {
           new FooternoteConfigurer(crowi),
           new TocAndAnchorConfigurer(crowi, options.renderToc),
           new HeaderLineNumberConfigurer(crowi),
+          new TableWithHandsontableButtonConfigurer(crowi)
         ]);
         break;
       case 'editor':
         this.markdownItConfigurers = this.markdownItConfigurers.concat([
           new FooternoteConfigurer(crowi),
-          new HeaderLineNumberConfigurer(crowi)
+          new HeaderLineNumberConfigurer(crowi),
+          new TableConfigurer(crowi)
         ]);
         break;
       case 'comment':
         this.markdownItConfigurers = this.markdownItConfigurers.concat([
+          new TableConfigurer(crowi)
         ]);
         break;
       default:

src/client/js/util/markdown-it/table-with-handsontable-button.js

@@ -0,0 +1,18 @@
+export default class TableWithHandsontableButtonConfigurer {
+
+  constructor(crowi) {
+    this.crowi = crowi;
+  }
+
+  configure(md) {
+    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('page', ${beginLine}, ${endLine})"><i class="fa fa-table"></i></button><table class="table table-bordered">`;
+    };
+
+    md.renderer.rules.table_close = (tokens, idx) => {
+      return '</table></div>';
+    };
+  }
+}

src/server/views/widget/page_modals.html

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