From f2382e2ef5c59106a880352e134f8a08f41d4b63 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 18 Jan 2025 11:15:54 +0200
Subject: [PATCH] refactor(canvas): solve API deprecation

---
 src/public/app/widgets/type_widgets/canvas.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/canvas.ts b/src/public/app/widgets/type_widgets/canvas.ts
index 8a70f5c67..4ba76fa9d 100644
--- a/src/public/app/widgets/type_widgets/canvas.ts
+++ b/src/public/app/widgets/type_widgets/canvas.ts
@@ -8,6 +8,7 @@ import type { ExcalidrawElement, Theme } from "@excalidraw/excalidraw/types/elem
 import type { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem, SceneData } from "@excalidraw/excalidraw/types/types.js";
 import type { JSX } from "react";
 import type React from "react";
+import type { Root } from "react-dom/client";
 
 const TPL = `
     <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
@@ -127,6 +128,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
     private excalidrawWrapperRef!: React.RefObject<HTMLElement | null>;
 
     private $render!: JQuery<HTMLElement>;
+    private root?: Root;
     private reactHandlers!: JQuery<HTMLElement>;
 
     constructor() {
@@ -199,12 +201,11 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         const excalidraw = (await import("@excalidraw/excalidraw"));
         this.excalidrawLib = excalidraw;
 
-        const { unmountComponentAtNode } = await import("react-dom");
         const { createRoot } = await import("react-dom/client");
         const React = (await import("react")).default;
-        unmountComponentAtNode(renderElement);
-        const root = createRoot(renderElement);
-        root.render(React.createElement(() => this.createExcalidrawReactApp(React, excalidraw.Excalidraw)));
+        this.root?.unmount();
+        this.root = createRoot(renderElement);
+        this.root.render(React.createElement(() => this.createExcalidrawReactApp(React, excalidraw.Excalidraw)));
     }
 
     /**