feat: add custom font styling to canvas text

frontend/src/components/editor/ComposeCanvas.tsx

@@ -1,15 +1,13 @@
+import type { FabricText } from "fabric";
 import * as fabric from "fabric";
-import {
+import type * as React from "react";
-  forwardRef,
+import { useCallback, useEffect, useImperativeHandle, useRef } from "react";
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from "react";
 
 const PAD = 36;
 const BASE_WIDTH = 680;
 const DEFAULT_LOGICAL_HEIGHT = 900;
+const DEFAULT_FONT_FAMILY = "Playfair Display Variable";
+const DEFAULT_FONT_COLOR = "#000";
 
 export interface FabricObjectJSON {
   type: string;
@@ -18,6 +16,7 @@ export interface FabricObjectJSON {
   left: number;
   width: number;
   height: number;
+
   [key: string]: unknown;
 }
 
@@ -33,121 +32,27 @@ export interface CanvasJSON {
   canvasHeight?: number;
 }
 
+export interface CanvasStyle {
+  fontFamily: string;
+  fontColor: string;
+}
+
 export type CanvasTools = {
   addImage: (url: string, file: File) => void;
   getData: () => CanvasJSON;
-  getJsonData: () => string;
   getImages: () => { src: string; file: File }[];
   loadData: (data: CanvasJSON) => Promise<void>;
+  setStyle: (style: CanvasStyle) => void;
+  getStyle: () => CanvasStyle;
 };
 
 export interface FabricImageWithFile extends fabric.FabricImage {
   _customRawFile: File;
 }
 
-const waitForLayout = (wrapper: HTMLDivElement): Promise<number> => {
+// NOTE: We use the same canvasData to render on both mobile and desktop viewports.
-  return new Promise((resolve) => {
+// Instead of calculating the entire objects pad again, we apply a zoom multiplier (scale down or up)
-    const check = () => {
+// over the last saved canvas size.
-      const width = wrapper.clientWidth || 0;
-      if (width > 0) resolve(width);
-      else requestAnimationFrame(check);
-    };
-    check();
-  });
-};
-
-const createMainTextbox = (
-  text: string,
-  isReadOnly = false,
-): fabric.Textbox => {
-  return new fabric.Textbox(text, {
-    name: "main-textbox",
-    originX: "left",
-    originY: "top",
-    left: PAD,
-    top: PAD,
-    width: BASE_WIDTH - PAD * 2,
-    fontSize: 18,
-    fontWeight: 500,
-    fontFamily: "Playfair Display Variable",
-    fill: "#000",
-    lineHeight: 1.5,
-    editable: !isReadOnly,
-    selectable: false,
-    evented: !isReadOnly,
-    hasControls: false,
-    hasBorders: false,
-    objectCaching: false,
-    splitByGrapheme: false,
-    lockMovementX: true,
-    lockMovementY: true,
-    lockScalingX: true,
-    lockScalingY: true,
-    lockRotation: true,
-  });
-};
-
-const fixFabricA11y = () => {
-  const textAreas = document.querySelectorAll(
-    'textarea[data-fabric="textarea"]',
-  );
-  for (const area of textAreas) {
-    if (!area.getAttribute("aria-label")) {
-      area.setAttribute("aria-label", "Canvas text input");
-    }
-  }
-};
-
-const initializeCanvas = (
-  el: HTMLCanvasElement,
-  width: number,
-  height: number,
-  readOnly: boolean,
-) => {
-  const canvas = new fabric.Canvas(el, {
-    width,
-    height,
-    selection: !readOnly,
-    preserveObjectStacking: true,
-    allowTouchScrolling: true,
-    enableRetinaScaling: true,
-    objectCaching: false,
-  });
-
-  const wrapperEl = canvas.getElement().parentElement;
-  if (wrapperEl) wrapperEl.style.background = "transparent";
-
-  return canvas;
-};
-
-const getLogicalSize = (data: CanvasJSON | null) => {
-  return {
-    width: data?.canvasWidth ?? BASE_WIDTH,
-    height: data?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT,
-  };
-};
-
-const getObjectBottom = (obj: fabric.FabricObject) => {
-  const top = obj.top ?? 0;
-  const height =
-    typeof obj.getScaledHeight === "function"
-      ? obj.getScaledHeight()
-      : (obj.height ?? 0) * (obj.scaleY ?? 1);
-
-  return top + height;
-};
-
-const measureLogicalContentHeight = (
-  canvas: fabric.Canvas,
-  minimumHeight = DEFAULT_LOGICAL_HEIGHT,
-) => {
-  const maxBottom = canvas
-    .getObjects()
-    .reduce((max, obj) => Math.max(max, getObjectBottom(obj)), 0);
-
-  return Math.max(minimumHeight, maxBottom + PAD);
-};
-
 const applyResponsiveViewport = (
   canvas: fabric.Canvas,
   wrapper: HTMLDivElement,
@@ -155,8 +60,8 @@ const applyResponsiveViewport = (
   logicalHeight: number,
 ) => {
   const physicalWidth = wrapper.clientWidth || logicalWidth;
-  const zoom = physicalWidth / logicalWidth;
+  const zoomMultiplier = physicalWidth / logicalWidth;
-  const physicalHeight = Math.max(1, logicalHeight * zoom);
+  const physicalHeight = Math.max(1, logicalHeight * zoomMultiplier);
 
   canvas.setDimensions({
     width: physicalWidth,
@@ -164,41 +69,43 @@ const applyResponsiveViewport = (
   });
 
   wrapper.style.height = `${physicalHeight}px`;
-  canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
+  canvas.setViewportTransform([zoomMultiplier, 0, 0, zoomMultiplier, 0, 0]);
   canvas.requestRenderAll();
 };
 
-const focusTextbox = (
+// to find the maximum height of the content to dynamically resize the canvas
-  fCanvas: fabric.Canvas,
+// would've been wayyy easier only if canvas supported fit-content like CSS property :)
-  textbox: fabric.Textbox,
+const measureLogicalContentHeight = (
-  readOnly: boolean,
+  canvas: fabric.Canvas,
+  minimumHeight = DEFAULT_LOGICAL_HEIGHT,
 ) => {
-  if (readOnly) return;
+  const maxBottom = canvas.getObjects().reduce((maxHeight, currObj) => {
+    const top = currObj.top;
+    const height = currObj.getScaledHeight();
+    return Math.max(maxHeight, top + height);
+  }, 0);
 
-  fCanvas.setActiveObject(textbox);
+  return Math.max(minimumHeight, maxBottom + PAD);
-  textbox.enterEditing();
-
-  const end = textbox.text?.length ?? 0;
-  textbox.selectionStart = end;
-  textbox.selectionEnd = end;
-
-  fCanvas.requestRenderAll();
-  fixFabricA11y();
 };
 
-const findMainTextbox = (canvas: fabric.Canvas): fabric.Textbox | null => {
+const DEFAULT_INIT_TEXT = "Take a deep breath...";
-  const textbox = canvas.getObjects("Textbox")[0];
 
-  return (textbox as fabric.Textbox) ?? null;
+interface ComposeCanvasProps {
-};
+  readOnly?: boolean;
+  initialData?: CanvasJSON | null;
+  ref?: React.Ref<CanvasTools>;
+}
 
-export const ComposeCanvas = forwardRef<
+export function ComposeCanvas({
-  CanvasTools,
+  readOnly = false,
-  { readOnly?: boolean; initialData?: CanvasJSON | null }
+  initialData = null,
->(({ readOnly = false, initialData = null }, ref) => {
+  ref,
+}: ComposeCanvasProps) {
+  // wrapper is the parent div box
   const wrapperRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const fabricRef = useRef<fabric.Canvas | null>(null);
+
   const textboxRef = useRef<fabric.Textbox | null>(null);
   const deferredDataRef = useRef<CanvasJSON | null>(null);
   const logicalSizeRef = useRef({
@@ -206,186 +113,189 @@ export const ComposeCanvas = forwardRef<
     height: DEFAULT_LOGICAL_HEIGHT,
   });
 
+  // re-calculates height based on content and applies the zoom transform
   const syncViewport = useCallback(() => {
     if (!(fabricRef.current && wrapperRef.current)) return;
 
+    const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT;
+    logicalSizeRef.current.height = measureLogicalContentHeight(
+      fabricRef.current,
+      minHeight,
+    );
+
     applyResponsiveViewport(
       fabricRef.current,
       wrapperRef.current,
       logicalSizeRef.current.width,
       logicalSizeRef.current.height,
     );
-  }, []);
+  }, [initialData]);
 
-  const updateLogicalHeightFromContent = useCallback(() => {
+  // auto focus the cursor into the main textbox no matter the latest element added
-    if (!fabricRef.current) return;
+  const focusTextbox = useCallback(
+    (textbox: fabric.Textbox) => {
+      if (readOnly || !fabricRef.current) return;
 
-    logicalSizeRef.current.height = measureLogicalContentHeight(
+      fabricRef.current.setActiveObject(textbox);
-      fabricRef.current,
+      textbox.enterEditing();
-      logicalSizeRef.current.height,
-    );
 
-    syncViewport();
+      // move the cursor to the end of the text
-  }, [syncViewport]);
+      const textLength = textbox.text?.length ?? 0;
+      textbox.selectionStart = textLength;
+      textbox.selectionEnd = textLength;
 
-  const setupTextboxInteractions = useCallback(
+      fabricRef.current.requestRenderAll();
-    (fCanvas: fabric.Canvas, textbox: fabric.Textbox) => {
-      textbox.on("changed", () => {
-        updateLogicalHeightFromContent();
-      });
-
-      fCanvas.on("mouse:down", (opt) => {
-        if (!opt.target || opt.target === textbox) {
-          focusTextbox(fCanvas, textbox, readOnly);
-        }
-      });
-
-      if (!readOnly) {
-        setTimeout(() => {
-          focusTextbox(fCanvas, textbox, readOnly);
-        }, 200);
-      }
-    },
-    [readOnly, updateLogicalHeightFromContent],
-  );
-
-  const loadContent = useCallback(
-    async (
-      canvas: fabric.Canvas,
-      data: CanvasJSON | null,
-      wrapper: HTMLDivElement,
-    ): Promise<fabric.Textbox | null> => {
-      const logicalSize = getLogicalSize(data);
-      logicalSizeRef.current = logicalSize;
-
-      canvas.clear();
-
-      let textbox: fabric.Textbox | null = null;
-
-      if (data?.objects?.length) {
-        await canvas.loadFromJSON(data);
-        textbox = findMainTextbox(canvas);
-      } else {
-        textbox = createMainTextbox("Take a deep breath...", readOnly);
-        canvas.add(textbox);
-      }
-
-      if (!textbox) return null;
-
-      textbox.selectable = !readOnly;
-      textbox.evented = !readOnly;
-      textbox.editable = !readOnly;
-      textbox.hasBorders = false;
-      textbox.lockMovementX = true;
-      textbox.lockMovementY = true;
-      textbox.lockScalingX = true;
-      textbox.lockScalingY = true;
-      textbox.lockRotation = true;
-      textbox.objectCaching = false;
-
-      logicalSizeRef.current.height = measureLogicalContentHeight(
-        canvas,
-        logicalSize.height,
-      );
-
-      applyResponsiveViewport(
-        canvas,
-        wrapper,
-        logicalSizeRef.current.width,
-        logicalSizeRef.current.height,
-      );
-
-      if (!(readOnly || data)) {
-        focusTextbox(canvas, textbox, readOnly);
-      }
-
-      return textbox;
     },
     [readOnly],
   );
 
+  const loadContent = useCallback(
+    async (data: CanvasJSON | null) => {
+      const canvas = fabricRef.current;
+      const wrapper = wrapperRef.current;
+      if (!(canvas && wrapper)) return;
+
+      // clean the canvas everytime and set fresh
+      canvas.clear();
+      let textbox: fabric.Textbox | null = null;
+
+      // restore logical size from prev saved data if available (in case of existing letter)
+      logicalSizeRef.current = {
+        width: data?.canvasWidth ?? BASE_WIDTH,
+        height: data?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT,
+      };
+
+      if (data?.objects?.length) {
+        await canvas.loadFromJSON(data);
+        textbox = canvas.getObjects("Textbox")[0] as fabric.Textbox;
+      } else {
+        // Create a fresh letter if no data exists
+        textbox = new fabric.Textbox(DEFAULT_INIT_TEXT, {
+          name: "main-textbox",
+          originX: "left",
+          originY: "top",
+          left: PAD,
+          top: PAD,
+          width: BASE_WIDTH - PAD * 2,
+          fontSize: 18,
+          fontWeight: 500,
+          fontFamily: DEFAULT_FONT_FAMILY,
+          fill: DEFAULT_FONT_COLOR,
+          lineHeight: 1.5,
+          // NOTE: splitByGrapheme is required for word wrap and re-low
+          // but fabric asks to disable this for clear font??
+          splitByGrapheme: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          lockRotation: true,
+          hasControls: false,
+          hasBorders: false,
+          objectCaching: false,
+        });
+        canvas.add(textbox);
+      }
+
+      if (!textbox) return;
+
+      // readonly contraints applicable for post seal view
+      textbox.selectable = !readOnly;
+      textbox.evented = !readOnly;
+      textbox.editable = !readOnly;
+
+      textboxRef.current = textbox;
+
+      // observe and auto-resize the canvas height whenever typed
+      textbox.on("changed", syncViewport);
+
+      // trapping the focus into the textbox wherever clicked on canvas (except images)
+      canvas.on("mouse:down", (e) => {
+        if (!e.target || e.target === textbox) {
+          focusTextbox(textbox);
+        }
+      });
+
+      syncViewport();
+
+      // Hack: Fabric needs a small initial delay to mount before it will accept focus.
+      // otherwise it goes to the front
+      if (!(readOnly || data)) {
+        setTimeout(() => focusTextbox(textbox), 200);
+      }
+    },
+    [readOnly, syncViewport, focusTextbox],
+  );
+
   useEffect(() => {
     let isMounted = true;
-    let canvas: fabric.Canvas | null = null;
     let resizeObserver: ResizeObserver | null = null;
     let lastWidth = 0;
 
-    const init = async () => {
+    const initCanvas = async () => {
+      // HACK: actual font may change the text-width - small ux improvement
       await document.fonts.ready;
+
       if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
 
-      const finalWidth = await waitForLayout(wrapperRef.current);
+      let width = wrapperRef.current.clientWidth;
-      if (!(isMounted && canvasRef.current && wrapperRef.current)) return;
+      if (width === 0) {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
+      }
 
-      canvas = initializeCanvas(
+      // init the fabric instance
-        canvasRef.current,
+      const canvas = new fabric.Canvas(canvasRef.current, {
-        finalWidth,
+        width,
-        DEFAULT_LOGICAL_HEIGHT,
+        height: DEFAULT_LOGICAL_HEIGHT,
-        readOnly,
+        selection: !readOnly,
-      );
+        preserveObjectStacking: true,
+        allowTouchScrolling: true,
+        enableRetinaScaling: true,
+        objectCaching: false,
+      });
+
+      // remove default fabric background to let our CSS show through
+      // TODO: provision custom bg (color in scope, but how does img fit?)
+      const wrapperEl = canvas.getElement().parentElement;
+      if (wrapperEl) wrapperEl.style.background = "transparent";
 
       fabricRef.current = canvas;
 
-      const textbox = await loadContent(
+      await loadContent(initialData);
-        canvas,
-        initialData,
-        wrapperRef.current,
-      );
 
-      if (textbox) {
+      // sometimes loadData() may be called before the canvas finished the init render
-        textboxRef.current = textbox;
+      // so we retry that stashed render right after the init
-        setupTextboxInteractions(canvas, textbox);
+      if (deferredDataRef.current) {
+        await loadContent(deferredDataRef.current);
+        deferredDataRef.current = null;
       }
 
-      canvas.requestRenderAll();
+      // auto window resizing based width
-      fixFabricA11y();
-
       lastWidth = wrapperRef.current.clientWidth;
-
       resizeObserver = new ResizeObserver(() => {
-        if (!(fabricRef.current && wrapperRef.current)) return;
+        const nextWidth = wrapperRef.current?.clientWidth;
-
-        const nextWidth = wrapperRef.current.clientWidth;
         if (!nextWidth || nextWidth === lastWidth) return;
-
         lastWidth = nextWidth;
         syncViewport();
       });
-
+      resizeObserver.observe(wrapperRef.current!);
-      resizeObserver.observe(wrapperRef.current);
-
-      if (deferredDataRef.current) {
-        const data = deferredDataRef.current;
-        deferredDataRef.current = null;
-
-        const textbox = await loadContent(canvas, data, wrapperRef.current);
-        if (textbox) {
-          textboxRef.current = textbox;
-          setupTextboxInteractions(canvas, textbox);
-        }
-
-        canvas.requestRenderAll();
-        fixFabricA11y();
-      }
     };
 
-    init();
+    initCanvas().then();
 
     return () => {
       isMounted = false;
       resizeObserver?.disconnect();
-      canvas?.dispose();
+      fabricRef.current?.dispose();
       fabricRef.current = null;
       textboxRef.current = null;
     };
-  }, [
+  }, [initialData, loadContent, readOnly, syncViewport]);
-    initialData,
-    loadContent,
-    readOnly,
-    setupTextboxInteractions,
-    syncViewport,
-  ]);
 
+  // WHY?: fabric doesn't work like react with state and props based optimized re-renders.
+  // everytime we there's a change in the data, we should force the render,
+  // so we let the parent Editor component take control of this.
   useImperativeHandle(ref, () => ({
     addImage: (url: string, file: File) => {
       if (!fabricRef.current) return;
@@ -395,69 +305,38 @@ export const ComposeCanvas = forwardRef<
         img.set({
           originX: "left",
           originY: "top",
-          _customRawFile: file,
           left: PAD,
           top: PAD,
           objectCaching: false,
+          // WHY?: after image object clean-up, its src becomes local blob://
+          // but browser won't let us parse this blob:// into file afterwards. so we hold a local copy
+          _customRawFile: file,
         } as Partial<FabricImageWithFile>);
 
         fabricRef.current?.add(img);
         fabricRef.current?.setActiveObject(img);
 
-        if (!fabricRef.current) return;
+        syncViewport();
-
+        // clean up memory
-        logicalSizeRef.current.height = measureLogicalContentHeight(
-          fabricRef.current,
-          logicalSizeRef.current.height,
-        );
-
-        if (wrapperRef.current) {
-          applyResponsiveViewport(
-            fabricRef.current,
-            wrapperRef.current,
-            logicalSizeRef.current.width,
-            logicalSizeRef.current.height,
-          );
-        } else {
-          fabricRef.current?.requestRenderAll();
-        }
-
         URL.revokeObjectURL(url);
       });
     },
 
     getData: () => {
       if (!fabricRef.current) return { objects: [] };
-
+      syncViewport();
-      logicalSizeRef.current.height = measureLogicalContentHeight(
-        fabricRef.current,
-        logicalSizeRef.current.height,
-      );
 
       const json = fabricRef.current.toJSON() as CanvasJSON;
       json.canvasWidth = logicalSizeRef.current.width;
       json.canvasHeight = logicalSizeRef.current.height;
-
       return json;
     },
 
-    getJsonData: () => {
-      if (!fabricRef.current) return "";
-
-      const json = fabricRef.current.toJSON() as CanvasJSON;
-      json.canvasWidth = logicalSizeRef.current.width;
-      json.canvasHeight = logicalSizeRef.current.height;
-
-      return JSON.stringify(json);
-    },
-
     getImages: () => {
       if (!fabricRef.current) return [];
-
       const images = fabricRef.current.getObjects(
         "Image",
       ) as FabricImageWithFile[];
-
       return images.map((img) => ({
         src: img.getSrc(),
         file: img._customRawFile,
@@ -465,24 +344,38 @@ export const ComposeCanvas = forwardRef<
     },
 
     loadData: async (data: CanvasJSON) => {
-      if (!(fabricRef.current && wrapperRef.current)) {
+      // if canvas isn't ready yet, stash the data and let the useEffect pick it up
+      if (!fabricRef.current) {
         deferredDataRef.current = data;
         return;
       }
+      await loadContent(data);
+    },
 
-      const textbox = await loadContent(
+    setStyle: (style: CanvasStyle) => {
-        fabricRef.current,
+      if (!fabricRef.current) return;
-        data,
+      const textBoxes = fabricRef.current.getObjects("Textbox") as FabricText[];
-        wrapperRef.current,
-      );
 
-      if (textbox) {
+      for (const textBox of textBoxes) {
-        textboxRef.current = textbox;
+        textBox.fontFamily = style.fontFamily || textBox.fontFamily;
-        setupTextboxInteractions(fabricRef.current, textbox);
+        textBox.fill = style.fontColor || textBox.fill;
       }
 
-      fabricRef.current.requestRenderAll();
+      syncViewport();
-      fixFabricA11y();
+    },
+
+    getStyle: () => {
+      if (!fabricRef.current)
+        return {
+          fontColor: DEFAULT_FONT_COLOR,
+          fontFamily: DEFAULT_FONT_FAMILY,
+        };
+      const textBox = fabricRef.current.getObjects("Textbox")[0] as FabricText;
+
+      return {
+        fontFamily: textBox?.fontFamily || DEFAULT_FONT_FAMILY,
+        fontColor: (textBox?.fill as string) || DEFAULT_FONT_COLOR,
+      };
     },
   }));
 
@@ -498,6 +391,6 @@ export const ComposeCanvas = forwardRef<
       />
     </div>
   );
-});
+}
 
 ComposeCanvas.displayName = "ComposeCanvas";

frontend/src/components/editor/ToolBar.tsx

@@ -1,12 +1,16 @@
 import {
+  CircleHalfTiltIcon,
   ImageIcon,
   LockIcon,
+  PaintBucketIcon,
   QuestionIcon,
   StampIcon,
+  TextAUnderlineIcon,
   TrayIcon,
   VaultIcon,
 } from "@phosphor-icons/react";
 import { Modal } from "../ui/Modal";
+import type { CanvasStyle } from "./ComposeCanvas.tsx";
 
 interface ToolBarProps {
   fileInputRef: React.RefObject<HTMLInputElement | null>;
@@ -14,21 +18,39 @@ interface ToolBarProps {
   setSealBtnClicked: (v: boolean) => void;
   onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
   setConfirmModal: (v: "VAULT" | "SEAL" | null) => void;
+  onFontChange: (style: CanvasStyle) => void;
+  latestFontStyle: CanvasStyle;
 }
 
+const FONT_FAMILIES: Map<string, string> = new Map([
+  ["Serif", "Playfair Display Variable"],
+  ["Sans", "Jost Variable"],
+  ["Cursive", "Playwrite HR Lijeva Variable"],
+]);
+const FONT_COLORS: Map<string, string> = new Map([
+  ["Black", "#000"],
+  ["Gold", "#866a0e"],
+  ["Purple", "#711caf"],
+  ["Green", "#1f5b1f"],
+  ["Blue", "#111e67"],
+]);
+
 export function ToolBar({
   fileInputRef,
   sealBtnClicked,
   setSealBtnClicked,
   onSave,
   setConfirmModal,
+  onFontChange,
+  latestFontStyle,
 }: ToolBarProps) {
   return (
     <div
       id="writer-toolbar"
-      className="flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
+      className="relative z-10 flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
     >
       <div className="flex gap-4">
+        {/* Image upload */}
         <button
           type="button"
           className="btn btn-ghost btn-sm group"
@@ -39,8 +61,76 @@ export function ToolBar({
             Add Image
           </span>
         </button>
+        <div className="w-px h-4 bg-base-content/10 mx-2 my-auto hidden md:inline" />
+
+        {/* Font Family */}
+        <div className={"flex items-center gap-2 group"}>
+          <TextAUnderlineIcon
+            size={24}
+            weight="bold"
+            className={"hidden md:inline"}
+          />
+          <select
+            className="select select-sm"
+            onChange={(e) => {
+              onFontChange({ ...latestFontStyle, fontFamily: e.target.value });
+            }}
+            value={latestFontStyle.fontFamily}
+          >
+            {Array.from(FONT_FAMILIES.entries()).map(
+              ([fontFamily, fontName]) => {
+                return (
+                  <option key={fontName} value={fontName}>
+                    {fontFamily}
+                  </option>
+                );
+              },
+            )}
+          </select>
+        </div>
+        <div className="w-px h-4 bg-base-content/10 mx-2 my-auto hidden md:inline" />
+
+        {/* Font Color */}
+        <div className="dropdown dropdown-bottom flex items-center gap-2 group">
+          <PaintBucketIcon
+            size={16}
+            weight="bold"
+            className={"hidden md:flex"}
+          />
+          <button
+            className="btn btn-ghost btn-sm px-2 gap-2 flex items-center"
+            type={"button"}
+          >
+            <CircleHalfTiltIcon
+              size={18}
+              style={{ color: latestFontStyle.fontColor }}
+              weight="duotone"
+            />
+          </button>
+          <ul className="dropdown-content z-50 menu p-2 shadow bg-base-200/95 rounded-full md:ml-4">
+            {Array.from(FONT_COLORS.entries()).map(([_, colorCode]) => (
+              <li key={colorCode}>
+                <button
+                  type="button"
+                  className={`${latestFontStyle.fontColor === colorCode ? "active" : ""}`}
+                  onClick={() => {
+                    onFontChange({ ...latestFontStyle, fontColor: colorCode });
+                    (document.activeElement as HTMLButtonElement)?.blur();
+                  }}
+                >
+                  <CircleHalfTiltIcon
+                    size={18}
+                    style={{ color: colorCode }}
+                    weight="fill"
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
 
+      {/* Draft */}
       <div className="flex items-center gap-2">
         <button
           type="button"
@@ -54,8 +144,9 @@ export function ToolBar({
           </span>
         </button>
 
-        <div className="w-px h-4 bg-base-content/10 mx-2" />
+        <div className="w-px h-4 bg-base-content/10 mx-2 hidden md:inline" />
 
+        {/*Seal */}
         <button
           type="button"
           className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
@@ -101,6 +192,7 @@ export function ToolBar({
           <span className="transition-all duration-1000">Vault</span>
         </button>
       </div>
+
       <button
         type="button"
         aria-label="Help"

frontend/src/pages/Editor.tsx

@@ -12,6 +12,7 @@ import {
 } from "react-router-dom";
 import { api } from "../api/apiClient";
 import {
+  type CanvasStyle,
   type CanvasTools,
   ComposeCanvas,
 } from "../components/editor/ComposeCanvas";
@@ -88,6 +89,10 @@ export default function Editor() {
   const [recipient, setRecipient] = useState("");
   const [unlockDate, setUnlockDate] = useState<Date | null>(null);
   const [placeholderIndex, setPlaceholderIndex] = useState(0);
+  const [canvasFontStyle, setCanvasFontStyle] = useState<CanvasStyle>({
+    fontColor: "",
+    fontFamily: "",
+  });
 
   const { masterKey } = useKeyStore();
 
@@ -181,7 +186,11 @@ export default function Editor() {
         setIsInitialLoading(false);
       }
     };
-    loadExistingLetter();
+    loadExistingLetter().then((_) => {
+      if (canvasRef.current) {
+        setCanvasFontStyle(canvasRef.current.getStyle());
+      }
+    });
   }, [public_id, masterKey]);
 
   // to trigger short pulse animation for Last Saved AT element
@@ -466,6 +475,18 @@ export default function Editor() {
               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,
+                  });
+              }}
+              latestFontStyle={canvasFontStyle}
             />
           ) : (
             <LetterHead />