Feature/support vega lite (#1251)

Feature/support vega lite

package.json

@@ -138,6 +138,9 @@
     "turndown": "~5.0.3",
     "uuid": "~3.3.2",
     "validator": "~11.1.0",
+    "vega": "~5.4.0",
+    "vega-embed": "~4.2.2",
+    "vega-lite": "~3.4.0",
     "velocity-animate": "~1.5.2",
     "visibilityjs": "~2.0.2",
     "viz.js": "~2.1.2",

public/css/markdown.css

@@ -126,7 +126,8 @@
 .markdown-body pre.sequence-diagram,
 .markdown-body pre.graphviz,
 .markdown-body pre.mermaid,
-.markdown-body pre.abc {
+.markdown-body pre.abc,
+.markdown-body pre.vega {
     text-align: center;
     background-color: inherit;
     border-radius: 0;
@@ -147,7 +148,8 @@
 .markdown-body pre.sequence-diagram > code,
 .markdown-body pre.graphviz > code,
 .markdown-body pre.mermaid > code,
-.markdown-body pre.abc > code {
+.markdown-body pre.abc > code,
+.markdown-body pre.vega > code {
     text-align: left;
 }
 
@@ -155,7 +157,8 @@
 .markdown-body pre.sequence-diagram > svg,
 .markdown-body pre.graphviz > svg,
 .markdown-body pre.mermaid > svg,
-.markdown-body pre.abc > svg {
+.markdown-body pre.abc > svg,
+.markdown-body pre.vega > svg {
     max-width: 100%;
     height: 100%;
 }

public/css/slide.css

@@ -223,7 +223,8 @@ pre.flow-chart,
 pre.sequence-diagram,
 pre.graphviz,
 pre.mermaid,
-pre.abc {
+pre.abc,
+pre.vega {
     text-align: center;
     background-color: white;
     border-radius: 0;
@@ -234,7 +235,8 @@ pre.flow-chart > code,
 pre.sequence-diagram > code,
 pre.graphviz > code,
 pre.mermaid > code,
-pre.abc > code {
+pre.abc > code,
+pre.vega > code {
     text-align: left;
 }
 
@@ -242,7 +244,8 @@ pre.flow-chart > svg,
 pre.sequence-diagram > svg,
 pre.graphviz > svg,
 pre.mermaid > svg,
-pre.abc > svg {
+pre.abc > svg,
+pre.vega > svg {
     max-width: 100%;
     height: 100%;
 }

public/docs/features.md

@@ -313,11 +313,45 @@ GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
 g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
 ```
 
+### PlantUML
+```plantuml
+start
+if (condition A) then (yes)
+  :Text 1;
+elseif (condition B) then (yes)
+  :Text 2;
+  stop
+elseif (condition C) then (yes)
+  :Text 3;
+elseif (condition D) then (yes)
+  :Text 4;
+else (nothing)
+  :Text else;
+endif
+stop
+```
+
+### Vega-Lite
+```vega
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
+  "data": {"url": "https://vega.github.io/editor/data/barley.json"},
+  "mark": "bar",
+  "encoding": {
+    "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
+    "y": {"field": "variety", "type": "nominal"},
+    "color": {"field": "site", "type": "nominal"}
+  }
+}
+```
+
 > More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
 > More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
 > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
 > More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
 > More information about **abc** syntax [here](http://abcnotation.com/learn)
+> More information about **plantuml** syntax [here](http://plantuml.com/index)
+> More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs)
 
 Alert Area
 ---

public/js/extra.js

@@ -419,6 +419,32 @@ export function finishView (view) {
       console.warn(err)
     }
   })
+  // vega-lite
+  const vegas = view.find('div.vega.raw').removeClass('raw')
+  vegas.each((key, value) => {
+    try {
+      var $value = $(value)
+      var $ele = $(value).parent().parent()
+
+      const specText = $value.text()
+
+      $value.unwrap()
+      window.vegaEmbed($ele[0], JSON.parse(specText))
+        .then(result => {
+          $ele.addClass('vega')
+        })
+        .catch(err => {
+          $ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+          console.warn(err)
+        })
+        .finally(() => {
+          if (window.viewAjaxCallback) window.viewAjaxCallback()
+        })
+    } catch (err) {
+      $ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
   // image href new window(emoji not included)
   const images = view.find('img.raw[src]').removeClass('raw')
   images.each((key, value) => {
@@ -926,6 +952,8 @@ function highlightRender (code, lang) {
     return `<div class="mermaid raw">${code}</div>`
   } else if (lang === 'abc') {
     return `<div class="abc raw">${code}</div>`
+  } else if (lang === 'vega') {
+    return `<div class="vega raw">${code}</div>`
   }
   const result = {
     value: code

public/js/index.js

@@ -100,7 +100,7 @@ var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
 var supportHeaders = [
   {
     text: '# h1',

public/views/codimd/foot.ejs

@@ -19,7 +19,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js" integrity="sha256-LHeY7YoYJ0SSXbCx7sR14Pqna+52moaH3bhv0Mjzd/M=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
 <%- include ../build/index-scripts %>
 <% } else { %>
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/pretty.ejs

@@ -88,7 +88,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
 <%- include build/pretty-scripts %>
 <% } else { %>
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/slide.ejs

@@ -104,7 +104,10 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
         <%- include build/slide-scripts %>
         <% } else { %>
         <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

webpack.common.js

@@ -257,6 +257,9 @@ module.exports = {
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
       'expose-loader?Viz!viz.js',
       'script-loader!abcjs',
+      'script-loader!vega',
+      'script-loader!vega-lite',
+      'script-loader!vega-embed',
       'expose-loader?io!socket.io-client',
       'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/index.js')
@@ -292,6 +295,9 @@ module.exports = {
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
       'expose-loader?Viz!viz.js',
       'script-loader!abcjs',
+      'script-loader!vega',
+      'script-loader!vega-lite',
+      'script-loader!vega-embed',
       'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/pretty.js')
     ],
@@ -330,6 +336,9 @@ module.exports = {
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
       'expose-loader?Viz!viz.js',
       'script-loader!abcjs',
+      'script-loader!vega',
+      'script-loader!vega-lite',
+      'script-loader!vega-embed',
       'headjs',
       'expose-loader?Reveal!reveal.js',
       'expose-loader?RevealMarkdown!reveal-markdown',
@@ -362,7 +371,10 @@ module.exports = {
       'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
       abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'),
       raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'),
-      'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js')
+      'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'),
+      vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'),
+      'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'),
+      'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js')
     }
   },