impl LsxPreProcessor

packages/growi-plugin-lsx/src/client-entry.js

@@ -5,6 +5,7 @@ export default (crowi, crowiRenderer) => {
   require('./resource/css/index.css');
 
   // add preprocessor
-  crowiRenderer.preProcessors = crowiRenderer.preProcessors.concat(
-        crowiRenderer.preProcessors, [new LsxPreProcessor()]);
+  crowiRenderer.preProcessors = crowiRenderer.preProcessors.concat([
+    new LsxPreProcessor(crowi),
+  ]);
 }

packages/growi-plugin-lsx/src/lib/routes/lsx.js

@@ -3,19 +3,20 @@ module.exports = (crowi, app) => {
     , path = require('path')
     , Lsx = require('../util/Lsx')
     , lsx = new Lsx(crowi, app)
+    , ApiResponse = crowi.require('../util/apiResponse')
     , actions = {};
 
   actions.renderHtml = (req, res) => {
     var currentPath = req.query.currentPath;
     var args = req.query.args;
 
-    lsx.renderHtml
+    lsx.renderHtml(req.user, currentPath, args)
       .then((html) => {
-        res.send(html);
+        return res.json(ApiResponse.success({html}));
       })
       .catch((err) => {
         debug('Error on rendering lsx.renderHtml', err);
-        res.send(err);
+        return res.json(ApiResponse.error(err));
       });
   }
 

packages/growi-plugin-lsx/src/resource/js/util/PreProcessor/LsxPreProcessor.js

@@ -3,6 +3,11 @@ const stringReplaceAsync = require('string-replace-async');
 // TODO change to PostProcessor
 export class LsxPreProcessor {
 
+  constructor(crowi) {
+    this.crowi = crowi;
+    this.crowiForJquery = crowi.getCrowiForJquery();
+  }
+
   process(markdown) {
     // get current path from window.location
     let currentPath = window.location.pathname;
@@ -16,20 +21,48 @@ export class LsxPreProcessor {
           return storedItem;
         }
 
-        const tempHtml = '<i class="fa fa-spinner fa-pulse fa-fw"></i>'
-           + `<span class="lsx-blink">${all}</span>`;
-        /*
-         * TODO regist post processor
-         *
-        $.get('/_api/plugins/lsx', {currentPath: currentPath, args: group1},
-          (res) => {
-            // TODO
-          })
-          .fail((data) => {
-            console.error(data);
-          });
-         */
+        const tempHtml = this.createLoadingHtml(all);
+
+        this.replaceLater(tempHtml, currentPath, all, group1);
+
         return tempHtml;
       });
   }
+
+  replaceLater(tempHtml, currentPath, tagExpression, lsxArgs) {
+    // get and replace
+    crowi.apiGet('/plugins/lsx', {currentPath: currentPath, args: lsxArgs})
+      .then((res) => {
+        // get original content
+        const orgContent = this.crowiForJquery.getRevisionBodyContent();
+
+        // create pattern from escaped html
+        const tempHtmlRegexp = new RegExp(this.regexpEscape(tempHtml), 'g');
+
+        let replacedContent;
+        if (res.ok) {
+          replacedContent = orgContent.replace(tempHtmlRegexp, res.html)
+        }
+        else {
+          const errorHtml = this.createErrorHtml(tagExpression, res.error);
+          replacedContent = orgContent.replace(tempHtmlRegexp, errorHtml)
+        }
+
+        this.crowiForJquery.replaceRevisionBodyContent(replacedContent);
+      });
+  }
+
+  createLoadingHtml(tagExpression) {
+    return `<i class="fa fa-spinner fa-pulse fa-fw"></i>`
+        + `<span class="lsx-blink">${tagExpression}</span>`;
+  }
+
+  createErrorHtml(tagExpression, error) {
+    return `<i class="fa fa-exclamation-triangle fa-fw"></i>`
+        + `${tagExpression} (-> <small>${error}</small>)`;
+  }
+
+  regexpEscape(s) {
+    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+  };
 }