code fixes for Obsidian approval

Author: code-forge-temple

package-lock.json

@@ -0,0 +1,5 @@
+.workspace-leaf-content[data-type="circuit-sketcher-view"] {
+    .view-content {
+        overflow: hidden;
+    }
+}

src/CircuitSketcherView.scss

@@ -7,16 +7,18 @@
 
 import {WorkspaceLeaf, TextFileView} from "obsidian";
 import React, {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client'
+import {createRoot, Root} from 'react-dom/client'
 import {App} from "./components/App";
 import {CanvasManager} from "circuit-sketcher-core";
 import CircuitSketcherPlugin from "./main";
 import {LocalStorageManager} from "circuit-sketcher-core";
+import "./CircuitSketcherView.scss";
 
 export const CIRCUIT_VIEW_TYPE = "circuit-sketcher-view";
 
 export class CircuitSketcherView extends TextFileView {
     private plugin: CircuitSketcherPlugin;
+    private root: Root | null = null;
 
     constructor (leaf: WorkspaceLeaf, plugin: CircuitSketcherPlugin) {
         super(leaf);
@@ -37,14 +39,15 @@ export class CircuitSketcherView extends TextFileView {
     // Set the data to the editor. This is used to load the file contents.
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setViewData = async (fileContents: string, clear: boolean) => {
+        LocalStorageManager.setLibrary(await this.plugin.getLibraryFile());
+
         const viewDomContent = this.containerEl.children[1];
-        viewDomContent.innerHTML = ``;
 
-        (viewDomContent as HTMLElement).style.overflow = "hidden"; // important for the canvas to be able to drag on it
+        if (!this.root) {
+            this.root = createRoot(viewDomContent);
+        }
 
-        LocalStorageManager.setLibrary(await this.plugin.getLibraryFile());
-
-        createRoot(viewDomContent).render(
+        this.root.render(
             <StrictMode>
                 <App fileContents= {fileContents} />
             </StrictMode>,
@@ -63,9 +66,16 @@ export class CircuitSketcherView extends TextFileView {
     clear (): void {}
 
     async onClose () {
+        if (this.root) {
+            this.root.unmount();
+            this.root = null;
+        }
+
         const viewDomContent = this.containerEl.children[1];
 
-        viewDomContent.innerHTML = ``;
+        while (viewDomContent.firstChild) {
+            viewDomContent.removeChild(viewDomContent.firstChild);
+        }
 
         CanvasManager.destroy();
     }

src/CircuitSketcherView.tsx

@@ -18,6 +18,7 @@ const CANVAS_ID = "circuit-board";
 export const DrawBoard = ({fileContents}: DrawBoardProps) => {
     const canvasRef = useRef<HTMLDivElement>(null);
     const resizeTimeoutRef = useRef<number | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (!canvasRef.current) return;
@@ -39,12 +40,18 @@ export const DrawBoard = ({fileContents}: DrawBoardProps) => {
         }, 300);
     };
 
-
     useEffect(() => {
-        window.addEventListener("resize", handleResize);
+        const observer = new ResizeObserver(handleResize);
+        const currentContainer = containerRef.current;
+
+        if (currentContainer) {
+            observer.observe(currentContainer);
+        }
 
         return () => {
-            window.removeEventListener("resize", handleResize);
+            if (currentContainer) {
+                observer.unobserve(currentContainer);
+            }
 
             if (resizeTimeoutRef.current) {
                 clearTimeout(resizeTimeoutRef.current);
@@ -53,7 +60,7 @@ export const DrawBoard = ({fileContents}: DrawBoardProps) => {
     }, []);
 
     return (
-        <div className="canvas-container">
+        <div className="canvas-container" ref={containerRef}>
             <ModalAddImage />
             <div className="canvas" id={CANVAS_ID} ref={canvasRef}></div>
         </div>

src/components/DrawBoard/DrawBoard.tsx

@@ -47,16 +47,15 @@ export default class CircuitSketcherPlugin extends Plugin {
         // Add a command to create a new `.circuit-sketcher` file
         this.addCommand({
             id: "circuit-sketcher-create-new",
-            name: "Create New Circuit Sketcher File",
+            name: "Create New Circuit File",
             callback: this.createNewCircuitSketcher,
         });
 
 
-        this.addRibbonIcon('circuit', 'Create New Circuit Sketcher', this.createNewCircuitSketcher);
+        this.addRibbonIcon('circuit', 'Create New Circuit Sketcher File', this.createNewCircuitSketcher);
     }
 
     async onunload () {
-        this.app.workspace.detachLeavesOfType(CIRCUIT_VIEW_TYPE);
     }
 
     public fileName: string = "";
@@ -99,7 +98,12 @@ export default class CircuitSketcherPlugin extends Plugin {
 
         const libraryFile = this.app.vault.getAbstractFileByPath(this.settings.libraryPath);
 
-        return await this.app.vault.read(libraryFile as TFile);
+        //return await this.app.vault.read(libraryFile as TFile);
+        if (libraryFile instanceof TFile) {
+            return await this.app.vault.read(libraryFile);
+        }
+
+        throw new Error("Library file is not a valid TFile");
     }
 
     public async setLibraryFile (content: string): Promise<void> {
@@ -112,6 +116,11 @@ export default class CircuitSketcherPlugin extends Plugin {
 
         const libraryFile = this.app.vault.getAbstractFileByPath(this.settings.libraryPath);
 
-        await this.app.vault.modify(libraryFile as TFile, content);
+        if (libraryFile instanceof TFile) {
+            await this.app.vault.modify(libraryFile, content);
+        } else {
+            throw new Error("Library file is not a valid TFile");
+        }
+        //await this.app.vault.modify(libraryFile as TFile, content);
     }
 }