WIP: Inline PUML

src/Page.js

@@ -6,6 +6,7 @@ const nunjucks = require('nunjucks');
 const path = require('path');
 const pathIsInside = require('path-is-inside');
 const Promise = require('bluebird');
+const fsUtils = require('./util/fsUtil');
 
 const _ = {};
 _.isString = require('lodash/isString');
@@ -786,6 +787,8 @@ Page.prototype.generate = function (builtFiles) {
     baseUrlMap: this.baseUrlMap,
     rootPath: this.rootPath,
     userDefinedVariablesMap: this.userDefinedVariablesMap,
+    resultPath: this.resultPath,
+    sourcePath: this.sourcePath,
   };
   return new Promise((resolve, reject) => {
     markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/lib/markdown-it/index.js

@@ -1,3 +1,7 @@
+const path = require('path');
+const { exec } = require('child_process');
+const logger = require('../../../../../util/logger');
+
 const hljs = require('highlight.js');
 const markdownIt = require('markdown-it')({
   html: true,
@@ -43,6 +47,71 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
   return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+  var token = tokens[idx],
+    info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+    langName = '',
+    highlighted;
+
+  // console.log(token, options, env);
+  if (info) {
+    langName = info.split(/\s+/g)[0];
+  }
+
+  // TODO: Make Fence blocks pluggable
+  if (langName == "puml" && env.cwf !== undefined) {
+    // TODO: Is there a way for PUML blocks to not rely on env for file directory?
+    const outputDir = path.dirname(env.sourcePath);
+
+    // Path of the .puml file
+    const outputPath = path.join(outputDir, "PLACEHOLDER.png");
+
+    const JAR_PATH = path.resolve(__dirname, 'plantuml.jar');
+
+    // Java command to launch PlantUML jar
+    const cmd = `java -jar "${JAR_PATH}" -pipe > "${outputPath}"`;
+    const childProcess = exec(cmd);
+
+    let errorLog = '';
+
+    const umlCode = token.content;
+
+    childProcess.stdin.write(
+      umlCode,
+      (e) => {
+        if (e) {
+          logger.debug(e);
+        }
+        childProcess.stdin.end();
+      },
+    );
+
+    childProcess.on('error', (error) => {
+      logger.debug(error);
+    });
+
+    childProcess.stderr.on('data', (errorMsg) => {
+      errorLog += errorMsg;
+    });
+
+    childProcess.on('exit', () => {
+      // This goes to the log file, but not shown on the console
+      logger.debug(errorLog);
+    });
+
+    return `<pic src='PLACEHOLDER.png'></pic>` + "\n"
+  }
+
+  if (options.highlight) {
+    highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+  } else {
+    highlighted = escapeHtml(token.content);
+  }
+
+  return  highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
   const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -589,7 +589,7 @@ Parser.prototype._parse = function (node, context, config) {
   if (element.name) {
     element.name = element.name.toLowerCase();
   }
-
+  // console.log(element.name);
   switch (element.name) {
   case 'md':
     element.name = 'span';
@@ -619,6 +619,18 @@ Parser.prototype._parse = function (node, context, config) {
     delete element.attribs.boilerplate;
     break;
   }
+  case 'puml':
+    element.name = 'div';
+    cheerio.prototype.options.xmlMode = false;
+    element.children = cheerio.parseHTML(md.render(cheerio.html(element.children),
+                                                   {
+                                                     cwf: context.cwf,
+                                                     resultPath: config.resultPath,
+                                                     sourcePath: config.sourcePath,
+                                                   }), true);
+    element.children.cwf = context.cwf;
+    cheerio.prototype.options.xmlMode = true;
+    break;
   default:
     break;
   }

src/plugins/default/markbind-plugin-plantuml.js

@@ -95,25 +95,25 @@ function generateDiagram(src, cwf, config) {
 }
 
 module.exports = {
-  preRender: (content, pluginContext, frontmatter, config) => {
-    // Clear <puml> tags processed before for live reload
-    processedDiagrams.clear();
-    // Processes all <puml> tags
-    const $ = cheerio.load(content, { xmlMode: true });
-    $('puml').each((i, tag) => {
-      // eslint-disable-next-line no-param-reassign
-      tag.name = 'pic';
-      const { src, cwf } = tag.attribs;
-      // eslint-disable-next-line no-param-reassign
-      tag.attribs.src = generateDiagram(src, cwf, config);
-    });
-
-    return $.html();
-  },
-  getSources: (content) => {
-    // Add all src attributes in <puml> tags to watch list
-    const $ = cheerio.load(content, { xmlMode: true });
-
-    return $('puml').map((i, tag) => tag.attribs.src).get();
-  },
+  // preRender: (content, pluginContext, frontmatter, config) => {
+  //   // Clear <puml> tags processed before for live reload
+  //   processedDiagrams.clear();
+  //   // Processes all <puml> tags
+  //   const $ = cheerio.load(content, { xmlMode: true });
+  //   $('puml').each((i, tag) => {
+  //     // eslint-disable-next-line no-param-reassign
+  //     tag.name = 'pic';
+  //     const { src, cwf } = tag.attribs;
+  //     // eslint-disable-next-line no-param-reassign
+  //     tag.attribs.src = generateDiagram(src, cwf, config);
+  //   });
+
+  //   return $.html();
+  // },
+  // getSources: (content) => {
+  //   // Add all src attributes in <puml> tags to watch list
+  //   const $ = cheerio.load(content, { xmlMode: true });
+
+  //   return $('puml').map((i, tag) => tag.attribs.src).get();
+  // },
 };