Method loadFile

src/adapters/obsidian/ui/editors/MKitFileViewer.tsx:171–226

(file: TFile)

  }

  async loadFile(file: TFile) {
    try {
      const mkitString = await this.plugin.app.vault.read(file);
      this.spaceKit = safelyParseJSON(mkitString) as SpaceKit;

      // Destroy existing root before creating new one
      if (this.root) {
        try {
          this.root.unmount();
        } catch (e) {
          console.error("Error unmounting previous root:", e);
        }
        this.root = null;
      }

      // Clear content
      this.contentEl.empty();

      // Create a container div for React
      const container = this.contentEl.createDiv("mk-mkit-root");

      // Check if fullWidth is set and apply CSS variable
      if (this.spaceKit?.definition?.fullWidth) {
        this.contentEl.style.setProperty("--page-width", "100%");
      }

      // Use the plugin's UI createRoot method if available, otherwise use React's createRoot
      if (this.plugin.ui?.createRoot) {
        this.root = this.plugin.ui.createRoot(container);
      } else {
        // Fallback to standard React createRoot
        this.root = createRoot(container);
      }

      if (this.root) {
        this.root.render(
          <MKitViewerComponent
            plugin={this.plugin}
            spaceKit={this.spaceKit}
            filePath={file.path}
            onInstall={() => {
              // Refresh the view after installation
              this.loadFile(file);
            }}
          />
        );
      }
    } catch (error) {
      console.error("Failed to load MKit file:", error);
      this.contentEl.empty();
      this.contentEl.createEl("div", {
        cls: "mk-mkit-error",
        text: `Failed to load MKit file: ${error.message}`,
      });
    }
  }
}