feat: implement Editor page with Fabric.js-based ComposeCanvas

2026-05-04 08:56:52 +00:00 · 2026-04-11 13:46:44 +05:30
parent 545b802a8b
commit 54d2021e81
2 changed files with 182 additions and 0 deletions
@@ -0,0 +1,141 @@
+import * as fabric from "fabric";
+import { useEffect, useRef } from "react";
+
+const PAD = 36;
+
+export default function ComposeCanvas() {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fabricRef = useRef<fabric.Canvas | null>(null);
+  const textboxRef = useRef<fabric.Textbox | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+    let canvas: fabric.Canvas | null = null;
+
+    const init = async () => {
+      // lazy populate
+      await document.fonts.ready;
+      const waitForLayout = (): Promise<number> => {
+        return new Promise((resolve) => {
+          const check = () => {
+            const wrapperWidth = wrapperRef.current?.clientWidth || 0;
+            if (wrapperWidth > 0) resolve(wrapperWidth);
+            else requestAnimationFrame(check);
+          };
+          check();
+        });
+      };
+
+      const finalWidth = await waitForLayout();
+      if (!isMounted || !canvasRef.current || !wrapperRef.current) return;
+
+      const initialHeight = Math.max(
+        wrapperRef.current.clientHeight || 900,
+        600,
+      );
+
+      // init canvas
+      canvas = new fabric.Canvas(canvasRef.current, {
+        width: finalWidth,
+        height: initialHeight,
+        selection: false,
+        preserveObjectStacking: true,
+        allowTouchScrolling: true, // for mobile
+      });
+
+      fabricRef.current = canvas;
+
+      // transparent background
+      const wrapperEl = canvas.getElement().parentElement;
+      if (wrapperEl) wrapperEl.style.background = "transparent";
+
+      // the core textbox
+      const textbox = new fabric.Textbox("Take a deep breath...", {
+        originX: "left",
+        originY: "top",
+        left: PAD,
+        top: PAD,
+        width: finalWidth - PAD * 2,
+        fontSize: 16,
+        fontWeight: 500,
+        fontFamily: "Playfair Display Variable",
+        fill: "#000",
+        lineHeight: 1.5,
+        editable: true,
+        hasControls: false,
+        hasBorders: false,
+        objectCaching: false, // for font crispness
+        splitByGrapheme: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockScalingX: true,
+        lockScalingY: true,
+      });
+
+      textboxRef.current = textbox;
+      canvas.add(textbox);
+
+      // automatically adjust height
+      textbox.on("changed", () => {
+        if (!canvas || !wrapperRef.current) return;
+        const neededHeight = textbox.top + textbox.height + PAD;
+        if (neededHeight > canvas.height) {
+          const newH = neededHeight + PAD;
+          canvas.setDimensions({ height: newH });
+          wrapperRef.current.style.height = `${newH}px`;
+        }
+      });
+
+      // auto focus
+      setTimeout(() => {
+        if (!isMounted) return;
+        canvas?.setActiveObject(textbox);
+        textbox.enterEditing();
+        canvas?.renderAll();
+
+        // Accessibility fix for Fabric.js hidden textarea
+        // searching globally in case it is appended to body
+        const hiddenTextareas = document.querySelectorAll(
+          'textarea[data-fabric="textarea"]',
+        );
+        hiddenTextareas.forEach((ta) => {
+          if (!ta.getAttribute("aria-label")) {
+            ta.setAttribute("aria-label", "Canvas text input");
+          }
+        });
+      }, 100);
+
+      canvas.on("mouse:down", (opt) => {
+        if (!opt.target || opt.target === textbox) {
+          canvas?.setActiveObject(textbox);
+          textbox.enterEditing();
+          canvas?.renderAll();
+        }
+      });
+    };
+
+    init();
+
+    return () => {
+      isMounted = false;
+      canvas?.dispose();
+      fabricRef.current = null;
+      textboxRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="relative bg-paper shadow-primary-content rounded-sm w-full outline-none overflow-hidden cursor-text"
+      style={{ minHeight: "900px" }}
+    >
+      <canvas
+        ref={canvasRef}
+        className="absolute top-0 left-0"
+        style={{ background: "transparent" }}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import ComposeCanvas from "../components/ui/ComposeCanvas";
+import DateDisplay from "../components/ui/DateDisplay";
+
+export default function Editor() {
+  const [recipient, setRecipient] = useState("");
+
+  return (
+    <section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300">
+      <div className="max-w-[720px] mx-auto px-1 md:px-0">
+        <div className="flex justify-between items-end mb-16 border-b border-base-content/5 pb-8 px-0">
+          <div className="flex flex-col gap-2 flex-1">
+            <label
+              htmlFor="recipient"
+              className="text-[10px] uppercase tracking-[0.4em] text-secondary-content font-bold"
+            >
+              Recipient
+            </label>
+            <input
+              id="recipient"
+              type="text"
+              placeholder="Someone dear..."
+              value={recipient}
+              onChange={(e) => setRecipient(e.target.value)}
+              className="bg-transparent border-none outline-none text-4xl font-serif text-base-content placeholder:text-base-content/10 w-full"
+            />
+          </div>
+          <DateDisplay />
+        </div>
+
+        <div
+          id="writer-toolbar"
+          className="flex items-center justify-center mb-4 min-h-12 bg-white/5 rounded-sm border border-white/5 font-display text-sm tracking-widest text-secondary-content"
+        >
+          Toolbar Placeholder
+        </div>
+        <ComposeCanvas />
+      </div>
+    </section>
+  );
+}