diff --git a/public/js/extra.js b/public/js/extra.js index b62f0e6f..03f04664 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -30,7 +30,7 @@ require('prismjs/components/prism-gherkin') require('./lib/common/login') require('../vendor/md-toc') -var Viz = require('viz.js') +const viz = new window.Viz() const plantumlEncoder = require('plantuml-encoder') const ui = getUIElements() @@ -369,13 +369,15 @@ export function finishView (view) { try { var $value = $(value) var $ele = $(value).parent().parent() + $value.unwrap() + viz.renderString($value.text()) + .then(graphviz => { + if (!graphviz) throw Error('viz.js output empty graph') + $value.html(graphviz) - var graphviz = Viz($value.text()) - if (!graphviz) throw Error('viz.js output empty graph') - $value.html(graphviz) - - $ele.addClass('graphviz') - $value.children().unwrap().unwrap() + $ele.addClass('graphviz') + $value.children().unwrap() + }) } catch (err) { $value.unwrap() $value.parent().append(`
${escapeHTML(err)}
`) diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs index babddf76..5dbaa2cb 100644 --- a/public/views/codimd/foot.ejs +++ b/public/views/codimd/foot.ejs @@ -1,7 +1,7 @@ <% if(useCDN) { %> - + @@ -9,16 +9,17 @@ - + - - + + - - + + + diff --git a/public/views/index/foot.ejs b/public/views/index/foot.ejs index 78bbc867..e9af48e5 100644 --- a/public/views/index/foot.ejs +++ b/public/views/index/foot.ejs @@ -1,10 +1,10 @@ <% if(useCDN) { %> - - + + - + <%- include ../build/cover-scripts %> diff --git a/public/views/index/head.ejs b/public/views/index/head.ejs index 0a6ac3f0..6fc56fc8 100644 --- a/public/views/index/head.ejs +++ b/public/views/index/head.ejs @@ -11,10 +11,10 @@ <% if(useCDN) { %> - + - - + + <%- include ../build/cover-header %> <%- include ../shared/polyfill %> <% } else { %> diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs index 28c67213..2c0ccffb 100644 --- a/public/views/pretty.ejs +++ b/public/views/pretty.ejs @@ -73,21 +73,22 @@ <% if(useCDN) { %> - - + + - + - - + + - + + diff --git a/public/views/slide.ejs b/public/views/slide.ejs index 4644406f..d50e3cda 100644 --- a/public/views/slide.ejs +++ b/public/views/slide.ejs @@ -16,7 +16,7 @@ <% if(useCDN) { %> - + @@ -90,20 +90,21 @@ <% if(useCDN) { %> - - + + - - + + - + - - + + - + + diff --git a/webpack.common.js b/webpack.common.js index 2fe57720..fce94b35 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -259,7 +259,8 @@ module.exports = { 'script-loader!ot', 'flowchart.js', 'imports-loader?Raphael=raphael!js-sequence-diagrams', - 'expose-loader?Viz!viz.js', + 'script-loader!viz.js', + 'script-loader!viz.render.js', 'script-loader!abcjs', 'script-loader!vega', 'script-loader!vega-lite', @@ -297,7 +298,8 @@ module.exports = { 'script-loader!gist-embed', 'flowchart.js', 'imports-loader?Raphael=raphael!js-sequence-diagrams', - 'expose-loader?Viz!viz.js', + 'script-loader!viz.js', + 'script-loader!viz.render.js', 'script-loader!abcjs', 'script-loader!vega', 'script-loader!vega-lite', @@ -338,7 +340,8 @@ module.exports = { 'script-loader!gist-embed', 'flowchart.js', 'imports-loader?Raphael=raphael!js-sequence-diagrams', - 'expose-loader?Viz!viz.js', + 'script-loader!viz.js', + 'script-loader!viz.render.js', 'script-loader!abcjs', 'script-loader!vega', 'script-loader!vega-lite', @@ -380,7 +383,9 @@ module.exports = { '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'), 'emojify.js': path.join(__dirname, 'node_modules/@hackmd/emojify.js/dist/js/emojify-browser.min.js'), - 'markdown-it': path.join(__dirname, 'node_modules/markdown-it/dist/markdown-it.js') + 'markdown-it': path.join(__dirname, 'node_modules/markdown-it/dist/markdown-it.js'), + 'viz.js': path.join(__dirname, 'node_modules/viz.js/viz.js'), + 'viz.render.js': path.join(__dirname, 'node_modules/viz.js/full.render.js') } },