chore: integrate mermaid.js into the build process and update initialization in extra.js

- Added mermaid.min.js to the build output in webpack.common.js.
- Updated mermaid initialization in extra.js to use the new API.
- Included mermaid.min.js script in foot.ejs, pretty.ejs, and slide.ejs for rendering diagrams.

Signed-off-by: Yukai Huang <[email protected]>

Author: Yukaii

public/js/extra.js

@@ -254,7 +254,10 @@ function replaceExtraTags (html) {
 }
 
 if (typeof window.mermaid !== 'undefined' && window.mermaid) {
-  window.mermaid.startOnLoad = false
+  window.mermaid.initialize({
+    startOnLoad: false
+  })
+
   window.mermaid.parseError = function (err, hash) {
     console.warn(err)
   }
@@ -433,7 +436,7 @@ export function finishView (view) {
   })
   // mermaid
   const mermaids = view.find('div.mermaid.raw').removeClass('raw')
-  mermaids.each((key, value) => {
+  mermaids.each(async (key, value) => {
     try {
       var $value = $(value)
       const $ele = $(value).closest('pre')
@@ -444,7 +447,9 @@ export function finishView (view) {
         $ele.addClass('mermaid')
         $ele.text(text)
         // render the diagram
-        window.mermaid.init(undefined, $ele)
+        await window.mermaid.run({
+          nodes: [$ele[0]]
+        })
       }
     } catch (err) {
       $value.unwrap()

public/views/codimd/foot.ejs

@@ -30,5 +30,6 @@
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+<script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
 <%- include('../build/index-pack-scripts') %>
 <% } %>

public/views/pretty.ejs

@@ -105,6 +105,7 @@
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+<script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
 <%- include('build/pretty-pack-scripts') %>
 <% } %>
 <%- include('shared/ga') %>

public/views/slide.ejs

@@ -117,6 +117,7 @@
         <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
         <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
         <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+        <script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
         <%- include('build/slide-pack-scripts') %>
         <% } %>
     </body>

webpack.common.js

@@ -205,6 +205,11 @@ module.exports = {
         context: path.join(__dirname, 'node_modules/fork-awesome'),
         from: 'css',
         to: 'fork-awesome/css'
+      },
+      {
+        context: path.join(__dirname, 'node_modules/mermaid'),
+        from: 'dist/mermaid.min.js',
+        to: 'mermaid/mermaid.min.js'
       }
     ]),
     new MiniCssExtractPlugin(
@@ -295,7 +300,6 @@ module.exports = {
       'script-loader!jquery-ui-resizable',
       'bootstrap-validator',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -340,7 +344,6 @@ module.exports = {
     'pretty-pack': [
       'babel-polyfill',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -383,7 +386,6 @@ module.exports = {
       'imports-loader?$=jquery!jquery-mousewheel',
       'bootstrap-tooltip',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -419,7 +421,6 @@ module.exports = {
       jqueryTextcomplete: path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
       codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
       ot: path.join(__dirname, 'public/vendor/ot/ot.min.js'),
-      mermaid: path.join(__dirname, 'node_modules/mermaid/dist/mermaid.min.js'),
       handlebars: path.join(__dirname, 'node_modules/handlebars/dist/handlebars.min.js'),
       'jquery-ui-resizable': path.join(__dirname, 'public/vendor/jquery-ui/jquery-ui.min.js'),
       'gist-embed': path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'),