From 9820e8aa12b0e5e2311e28fd4d0dda272568f0cf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 19 Jan 2025 23:34:57 +0200
Subject: [PATCH] fix(mindmap): use dynamic import instead of static one

---
 src/public/app/entities/fblob.ts              |  2 +-
 .../app/widgets/type_widgets/mind_map.ts      | 21 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/public/app/entities/fblob.ts b/src/public/app/entities/fblob.ts
index fc00e1d1f..739027d4d 100644
--- a/src/public/app/entities/fblob.ts
+++ b/src/public/app/entities/fblob.ts
@@ -27,7 +27,7 @@ export default class FBlob {
     /**
      * @throws Error in case of invalid JSON
      */
-    getJsonContent(): unknown {
+    getJsonContent<T>(): T | null {
         if (!this.content || !this.content.trim()) {
             return null;
         }
diff --git a/src/public/app/widgets/type_widgets/mind_map.ts b/src/public/app/widgets/type_widgets/mind_map.ts
index ef8fdaf27..91aabda79 100644
--- a/src/public/app/widgets/type_widgets/mind_map.ts
+++ b/src/public/app/widgets/type_widgets/mind_map.ts
@@ -1,6 +1,6 @@
 import TypeWidget from "./type_widget.js";
 import utils from "../../services/utils.js";
-import MindElixir, { type MindElixirCtor } from "mind-elixir";
+import type { MindElixirCtor } from "mind-elixir";
 import nodeMenu from "@mind-elixir/node-menu";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
@@ -141,11 +141,16 @@ const TPL = `
 </div>
 `;
 
+interface MindmapModel {
+    direction: number;
+}
+
 export default class MindMapWidget extends TypeWidget {
 
     private $content!: JQuery<HTMLElement>;
     private triggeredByUserOperation?: boolean;
     private mind?: ReturnType<MindElixirCtor["new"]>;
+    private MindElixir: any; // TODO: Fix type
 
     static getType() {
         return "mindMap";
@@ -188,25 +193,27 @@ export default class MindMapWidget extends TypeWidget {
 
     async #loadData(note: FNote) {
         const blob = await note.getBlob();
-        const content = blob?.getJsonContent() || MindElixir.new(NEW_TOPIC_NAME);
+        const content = blob?.getJsonContent<MindmapModel>();
 
         if (!this.mind) {
-            this.#initLibrary(content.direction ?? MindElixir.LEFT);
+            await this.#initLibrary(content?.direction ?? this.MindElixir.LEFT);
         }
 
-        this.mind.refresh(content);
+        this.mind.refresh(content ?? this.MindElixir.new(NEW_TOPIC_NAME));
         this.mind.toCenter();
     }
 
-    #initLibrary(direction: unknown) {
-        const mind = new MindElixir({
+    async #initLibrary(direction: unknown) {
+        this.MindElixir = (await import("mind-elixir")).default;
+
+        const mind = new this.MindElixir({
             el: this.$content[0],
             direction
         });
         mind.install(nodeMenu);
 
         this.mind = mind;
-        mind.init(MindElixir.new(NEW_TOPIC_NAME));
+        mind.init(this.MindElixir.new(NEW_TOPIC_NAME));
         // TODO: See why the typeof mindmap is not correct.
         mind.bus.addListener("operation", (operation: { name: string }) => {
             this.triggeredByUserOperation = true;