From 3e0f420eeccc44e71518c15fbc3eadbc709a7a58 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Jun 2025 22:44:11 +0300
Subject: [PATCH] chore(canvas): reintroduce wrapper

---
 .../client/src/widgets/type_widgets/canvas.ts |  1 +
 .../src/widgets/type_widgets/canvas_el.ts     | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts
index 6ce7a3b83..32bb1e325 100644
--- a/apps/client/src/widgets/type_widgets/canvas.ts
+++ b/apps/client/src/widgets/type_widgets/canvas.ts
@@ -20,6 +20,7 @@ const TPL = /*html*/`
 
         .excalidraw-wrapper {
             height: 100%;
+        }
 
         :root[dir="ltr"]
         .excalidraw
diff --git a/apps/client/src/widgets/type_widgets/canvas_el.ts b/apps/client/src/widgets/type_widgets/canvas_el.ts
index 814018519..8c7f5b752 100644
--- a/apps/client/src/widgets/type_widgets/canvas_el.ts
+++ b/apps/client/src/widgets/type_widgets/canvas_el.ts
@@ -1,7 +1,23 @@
 import "@excalidraw/excalidraw/index.css";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import { h, render } from "preact";
+import { createElement, createRef, Fragment, render } from "preact/compat";
 
 export default function renderCanvas(targetEl: HTMLElement) {
-    render(h(Excalidraw, null, "Hello world"), targetEl);
+    render(createCanvasElement(), targetEl);
+}
+
+function createCanvasElement() {
+    const excalidrawWrapperRef = createRef<HTMLElement>();
+
+    return createElement(Fragment, null,
+        createElement(
+            "div",
+            {
+                className: "excalidraw-wrapper",
+                ref: excalidrawWrapperRef
+            },
+            createElement(Excalidraw, {
+
+            })
+        ));
 }