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

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: {