feat: refactor ComposeCanvas to use reactive style props and use complete declarative approach for editor+toolbar

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;