refactor: extract custom utility classes for text and bg css properties

frontend/src/components/editor/ComposeCanvas.tsx

@@ -128,6 +128,8 @@ export function ComposeCanvas({
       logicalSizeRef.current.width,
       logicalSizeRef.current.height,
     );
+
+    fabricRef.current.requestRenderAll();
   }, [initialData]);
 
   // auto focus the cursor into the main textbox no matter the latest element added
@@ -182,8 +184,8 @@ export function ComposeCanvas({
           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,
+          // but fabric asks to disable this for clear font?? So we disable it for read view
+          splitByGrapheme: !readOnly,
           lockMovementX: true,
           lockMovementY: true,
           lockScalingX: true,
@@ -192,6 +194,7 @@ export function ComposeCanvas({
           hasControls: false,
           hasBorders: false,
           objectCaching: false,
+          noScaleCache: false,
         });
         canvas.add(textbox);
       }
@@ -202,6 +205,7 @@ export function ComposeCanvas({
       textbox.selectable = !readOnly;
       textbox.evented = !readOnly;
       textbox.editable = !readOnly;
+      textbox.hasBorders = false;
 
       textboxRef.current = textbox;
 
@@ -306,6 +310,7 @@ export function ComposeCanvas({
           originY: "top",
           left: PAD,
           top: PAD,
+          noScaleCache: false,
           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

frontend/src/components/editor/ToolBar.tsx

@@ -134,7 +134,7 @@ export function ToolBar({
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="btn btn-ghost btn-sm text-[10px] group tracking-[0.2em] uppercase font-bold text-base-content/60 hover:text-base-content"
+          className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
           title="Store in your private drawer"
           onClick={() => onSave("DRAFT")}
         >
@@ -223,7 +223,7 @@ export function LetterHead() {
     <div className="flex items-center justify-center mb-8 h-14">
       <div className="badge badge-outline border-primary/20 bg-primary/5 text-primary gap-2 p-4 rounded-full">
         <LockIcon size={14} weight="fill" />
-        <span className="text-[10px] uppercase tracking-widest font-bold">
+        <span className="text-xxs uppercase tracking-widest font-bold">
           Sealed & View Only
         </span>
       </div>