From 90b04f239738a891b6b5608d2ea4363fba758632 Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Fri, 1 May 2026 11:32:23 +0530
Subject: [PATCH] feat: refactor ComposeCanvas to use reactive style props and
 use complete declarative approach for editor+toolbar

---
 .../src/components/editor/ComposeCanvas.tsx   | 22 +++++++++----------
 frontend/src/components/editor/ToolBar.tsx    |  6 ++---
 frontend/src/pages/Editor.tsx                 | 20 ++++++-----------
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/editor/ComposeCanvas.tsx b/frontend/src/components/editor/ComposeCanvas.tsx
index de88944..5a4a0b3 100644
--- a/frontend/src/components/editor/ComposeCanvas.tsx
+++ b/frontend/src/components/editor/ComposeCanvas.tsx
@@ -41,7 +41,6 @@ export type CanvasTools = {
   getData: () => CanvasJSON;
   getImages: () => { src: string; file: File }[];
   loadData: (data: CanvasJSON) => Promise<void>;
-  setStyle: (style: CanvasStyle) => void;
   getStyle: () => CanvasStyle;
 };
 
@@ -92,12 +91,14 @@ const DEFAULT_INIT_TEXT = "Take a deep breath...";
 interface ComposeCanvasProps {
   readOnly?: boolean;
   initialData?: CanvasJSON | null;
+  style?: CanvasStyle;
   ref?: React.Ref<CanvasTools>;
 }
 
 export function ComposeCanvas({
   readOnly = false,
   initialData = null,
+  style,
   ref,
 }: ComposeCanvasProps) {
   // wrapper is the parent div box
@@ -230,6 +231,15 @@ export function ComposeCanvas({
     [readOnly, syncViewport, focusTextbox],
   );
 
+  useEffect(() => {
+    if (style && textboxRef.current) {
+      const textBox = textboxRef.current;
+      textBox.fontFamily = style.fontFamily || textBox.fontFamily;
+      textBox.fill = style.fontColor || textBox.fill;
+      syncViewport();
+    }
+  }, [style, syncViewport]);
+
   useEffect(() => {
     let isMounted = true;
     let resizeObserver: ResizeObserver | null = null;
@@ -356,16 +366,6 @@ export function ComposeCanvas({
       await loadContent(data);
     },
 
-    setStyle: (style: CanvasStyle) => {
-      const textBox = textboxRef.current;
-      if (!textBox) return;
-
-      textBox.fontFamily = style.fontFamily || textBox.fontFamily;
-      textBox.fill = style.fontColor || textBox.fill;
-
-      syncViewport();
-    },
-
     getStyle: () => {
       const textBox = textboxRef.current;
 
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx
index 9fc5b75..bde7597 100644
--- a/frontend/src/components/editor/ToolBar.tsx
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -14,7 +14,7 @@ import { Modal } from "../ui/Modal";
 import type { CanvasStyle } from "./ComposeCanvas.tsx";
 
 interface ToolBarProps {
-  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  onAddImage: () => void;
   sealBtnClicked: boolean;
   setSealBtnClicked: (v: boolean) => void;
   onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
@@ -42,7 +42,7 @@ const FONT_COLORS: Map<string, string> = new Map([
 ]);
 
 export function ToolBar({
-  fileInputRef,
+  onAddImage,
   sealBtnClicked,
   setSealBtnClicked,
   onSave,
@@ -60,7 +60,7 @@ export function ToolBar({
         <button
           type="button"
           className="btn btn-ghost btn-sm group"
-          onClick={() => fileInputRef.current?.click()}
+          onClick={onAddImage}
         >
           <ImageIcon size={18} weight="bold" />
           <span className="hidden md:inline group-hover:inline transition-all duration-1000">
diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx
index 548cd98..57a29b8 100644
--- a/frontend/src/pages/Editor.tsx
+++ b/frontend/src/pages/Editor.tsx
@@ -476,22 +476,12 @@ export default function Editor() {
 
           {status === "DRAFT" ? (
             <ToolBar
-              fileInputRef={fileInputRef}
+              onAddImage={() => fileInputRef.current?.click()}
               sealBtnClicked={sealBtnClicked}
               setSealBtnClicked={setSealBtnClicked}
               onSave={handleSave}
               setConfirmModal={setConfirmModal}
-              onFontChange={(style) => {
-                setCanvasFontStyle({
-                  fontFamily: style.fontFamily,
-                  fontColor: style.fontColor,
-                });
-                if (canvasRef?.current?.setStyle)
-                  canvasRef.current.setStyle({
-                    fontFamily: style.fontFamily,
-                    fontColor: style.fontColor,
-                  });
-              }}
+              onFontChange={setCanvasFontStyle}
               latestFontStyle={canvasFontStyle}
             />
           ) : (
@@ -506,7 +496,11 @@ export default function Editor() {
             className="hidden"
           />
 
-          <ComposeCanvas ref={canvasRef} readOnly={status !== "DRAFT"} />
+          <ComposeCanvas
+            ref={canvasRef}
+            readOnly={status !== "DRAFT"}
+            style={canvasFontStyle}
+          />
         </div>
       </section>
       <LogModal