Add plantuml support (#1096)

Add plantuml support

Author: jackycute

config.json.example

@@ -122,6 +122,10 @@
         {
           "connectionString": "change this",
           "container": "change this"
+        },
+        "plantuml":
+        {
+          "server": "http://www.plantuml.com/plantuml"
         }
     }
 }

lib/config/environment.js

@@ -126,6 +126,9 @@ module.exports = {
       email: process.env.CMD_SAML_ATTRIBUTE_EMAIL
     }
   },
+  plantuml: {
+    server: process.env.CMD_PLANTUML_SERVER
+  },
   email: toBooleanConfig(process.env.CMD_EMAIL),
   allowEmailRegister: toBooleanConfig(process.env.CMD_ALLOW_EMAIL_REGISTER),
   allowGravatar: toBooleanConfig(process.env.CMD_ALLOW_GRAVATAR),

lib/web/statusRouter.js

@@ -97,6 +97,7 @@ statusRouter.get('/config', function (req, res) {
     urlpath: config.urlPath,
     debug: config.debug,
     version: config.fullversion,
+    plantumlServer: config.plantuml.server,
     DROPBOX_APP_KEY: config.dropbox.appKey,
     allowedUploadMimeTypes: config.allowedUploadMimeTypes
   }

package.json

@@ -118,6 +118,7 @@
     "pdfobject": "~2.0.201604172",
     "pg": "~6.1.2",
     "pg-hstore": "~2.3.2",
+    "plantuml-encoder": "^1.2.5",
     "prismjs": "~1.6.0",
     "randomcolor": "~0.5.3",
     "raphael": "~2.2.8",

public/js/extra.js

@@ -1,5 +1,5 @@
 /* eslint-env browser, jquery */
-/* global moment, serverurl */
+/* global moment, serverurl, plantumlServer */
 
 import Prism from 'prismjs'
 import hljs from 'highlight.js'
@@ -31,6 +31,8 @@ require('prismjs/components/prism-gherkin')
 require('./lib/common/login')
 require('../vendor/md-toc')
 var Viz = require('viz.js')
+const plantumlEncoder = require('plantuml-encoder')
+
 const ui = getUIElements()
 
 // auto update last change
@@ -1036,6 +1038,33 @@ md.renderer.rules.fence = (tokens, idx, options, env, self) => {
   return `<pre><code${self.renderAttrs(token)}>${highlighted}</code></pre>\n`
 }
 
+const makePlantumlURL = (umlCode) => {
+  let format = 'svg'
+  let code = plantumlEncoder.encode(umlCode)
+  return `${plantumlServer}/${format}/${code}`
+}
+
+// https://github.com/qjebbs/vscode-plantuml/tree/master/src/markdown-it-plantuml
+md.renderer.rules.plantuml = (tokens, idx) => {
+  let token = tokens[idx]
+  if (token.type !== 'plantuml') {
+    return tokens[idx].content
+  }
+
+  let url = makePlantumlURL(token.content)
+  return `<img src="${url}" />`
+}
+
+// https://github.com/qjebbs/vscode-plantuml/tree/master/src/markdown-it-plantuml
+md.core.ruler.push('plantuml', (state) => {
+  let blockTokens = state.tokens
+  for (let blockToken of blockTokens) {
+    if (blockToken.type === 'fence' && blockToken.info === 'plantuml') {
+      blockToken.type = 'plantuml'
+    }
+  }
+})
+
 // youtube
 const youtubePlugin = new Plugin(
   // regexp to match

public/js/lib/common/constant.ejs

@@ -2,6 +2,7 @@ window.domain = '<%- domain %>'
 window.urlpath = '<%- urlpath %>'
 window.debug = <%- debug %>
 window.version = '<%- version %>'
+window.plantumlServer = '<%- plantumlServer %>'
 
 window.allowedUploadMimeTypes = <%- JSON.stringify(allowedUploadMimeTypes) %>