refactor(mermaid): use webpack import for mermaid-elk

libraries/mermaid-elk/package-lock.json

@@ -1,13 +0,0 @@
-{
-  "name": "mermaid-elk",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "mermaid-elk",
-      "version": "1.0.0",
-      "license": "ISC"
-    }
-  }
-}

libraries/mermaid-elk/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "mermaid-elk",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "build": "tsx ../../node_modules/webpack/bin/webpack.js -c webpack.config.cjs"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {}
-}

libraries/mermaid-elk/webpack.config.cjs

@@ -1,19 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-
-module.exports = {
-    mode: "production",
-    entry: "../../node_modules/@mermaid-js/layout-elk/dist/mermaid-layout-elk.esm.min.mjs",
-    output: {
-        library: "MERMAID_ELK",
-        filename: "elk.min.js",
-        path: path.resolve(__dirname),
-        libraryTarget: "umd",
-        libraryExport: "default"
-    },
-    plugins: [
-        new webpack.optimize.LimitChunkCountPlugin({
-            maxChunks: 1
-        })
-    ]
-}

src/public/app/services/library_loader.ts

@@ -76,14 +76,6 @@ const MERMAID: Library = {
     js: ["node_modules/mermaid/dist/mermaid.min.js"]
 };
 
-/**
- * The ELK extension of Mermaid.js, which supports more advanced layouts.
- * See https://www.npmjs.com/package/@mermaid-js/layout-elk for more information.
- */
-const MERMAID_ELK: Library = {
-    js: ["libraries/mermaid-elk/elk.min.js"]
-};
-
 const EXCALIDRAW: Library = {
     js: ["node_modules/react/umd/react.production.min.js", "node_modules/react-dom/umd/react-dom.production.min.js", "node_modules/@excalidraw/excalidraw/dist/excalidraw.production.min.js"]
 };
@@ -211,7 +203,6 @@ export default {
     WHEEL_ZOOM,
     FORCE_GRAPH,
     MERMAID,
-    MERMAID_ELK,
     EXCALIDRAW,
     MARKJS,
     I18NEXT,

src/public/app/services/mermaid.ts

@@ -1,5 +1,3 @@
-import library_loader from "./library_loader.js";
-
 let elkLoaded = false;
 
 /**
@@ -22,7 +20,6 @@ export async function loadElkIfNeeded(mermaidContent: string) {
     });
     if (parsedContent?.config?.layout === "elk") {
         elkLoaded = true;
-        await library_loader.requireLibrary(library_loader.MERMAID_ELK);
-        mermaid.registerLayoutLoaders(MERMAID_ELK);
+        mermaid.registerLayoutLoaders((await import("@mermaid-js/layout-elk")).default);
     }
 }

src/public/app/types.d.ts

@@ -155,13 +155,12 @@ declare global {
         registerLayoutLoaders(loader: MermaidLoader);
         parse(content: string, opts: {
             suppressErrors: true
-        }): {
+        }): Promise<{
             config: {
                 layout: string;
             }
-        }
+        }>
     };
-    var MERMAID_ELK: MermaidLoader;
 
     var CKEditor: {
         BalloonEditor: {