@the-portland-company/canvas-editor 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 0.5.0 — Email-Engine spec closeout: canvas bug fixes
+
+Verified against `Specs/Email-Engine` and `Reference/VRM-Canvas-Editor` (v1.0).
+Each item below cites its spec goal id.
+
+- `g_3fzwvq` (fixed): the canvas body column painted an opaque white
+  background whenever `EmailSettings.bodyBackground` was unset, instead of
+  showing no chosen surface color. `CanvasArea.tsx`'s body-column fallback is
+  now `transparent`, matching the compiled-HTML editor's already-correct
+  "unset until chosen" semantics.
+- `g_wd6vic` / `g_1wwx0r7` (already correct, verified): container drop-zone
+  chrome (dashed border/padding) only renders when a container is empty or
+  hovered; populated containers get no extra system padding. No change
+  needed in `blocks/padding.ts` or the registry defaults.
+- `g_sscrkb` / `g_utd4ya` (already correct, verified): `DropZone.tsx` places
+  a hover-revealed insert affordance in every gap of every container (root
+  list, Section children, Column cells), in both `center` and `side` modes.
+- `g_1yfbja5` / `g_5jfut` (already correct, verified): `SortableBlock`
+  disables its transition while dragging and `DropZone` collapses to an 8px
+  strip until the pointer is directly over it, avoiding layout jank.
+- `g_ax3c3i` / `g_3y02ud` (fixed): the merged heading+text rich-text
+  component existed (`CanvasRichText`'s `isHeading` prop, the registry's
+  `hiddenFromLibrary` legacy heading block, migration already in place), but
+  the only `CanvasRichText` mount (`CanvasArea.tsx`, inline Text editing)
+  never passed `isHeading`, so the H1–H4 toggle was unreachable. Now passes
+  `isHeading` so headings are made inside Text, as the spec requires.
+- `g_1h8sbt3` / `g_qa3uoe` (already correct, verified): `ColorField`,
+  `CanvasSettingsPanel`, and the Footer/Section/Card renderers already read
+  and apply their respective background/text/link colors; no propagation gap
+  found.
+- `g_1eyavta` (fixed): `MediaLibrary.tsx`'s upload handler discarded the
+  upload response's own `assetId`/`url` and relied on a subsequent list
+  reload to make the asset available, which could race a CDN/read-replica lag
+  and hand back a stale or empty entry — producing broken image links right
+  after upload. `handleUpload` now builds the asset from the upload response
+  directly and auto-inserts a single uploaded image onto the canvas.
+
 ## 0.4.2 — tray fits the canvas column
 
 - The tile strip shrinks and scrolls horizontally so the Side | Center toggle,

package/dist/editor.cjs

@@ -2165,7 +2165,12 @@ function CanvasArea({
           ref: setNodeRef,
           className: "min-h-[24rem]",
           style: {
-            background: settings?.bodyBackground || "#ffffff",
+            // Invisible until the user actually picks a body background (canvas
+            // UX feedback #1/#6): an unset value must NOT paint white, or the
+            // canvas shows a surface the user never chose and "changing the
+            // background color doesn't change anything" reads as a bug when
+            // white was really just the system default fighting the real color.
+            background: settings?.bodyBackground || "transparent",
             // Padding lives on the column that paints bodyBackground so the
             // canvas matches the rendered email, where the same padding is
             // inside the coloured content table.
@@ -2248,6 +2253,7 @@ function SortableBlock({
           {
             html: effectiveProps.html || "",
             onChange: (html) => onInlineChange(block.id, { html }),
+            isHeading: true,
             className: "textarea",
             style: {
               minHeight: "3rem",
@@ -3691,12 +3697,27 @@ function MediaLibrary({
   const handleUpload = async (files) => {
     if (!files || files.length === 0) return;
     setError(null);
+    const uploaded = [];
     for (const file of Array.from(files)) {
       const result = await adapter.media.upload(file);
       if (!result.ok) {
         setError(result.error);
         continue;
       }
+      uploaded.push({
+        id: result.assetId,
+        url: result.url,
+        content_type: result.contentType,
+        filename: result.filename,
+        size_bytes: file.size,
+        alt_text: null
+      });
+    }
+    if (uploaded.length > 0) {
+      setAssets((prev) => [...uploaded, ...(prev ?? []).filter((a) => !uploaded.some((u) => u.id === a.id))]);
+      if (uploaded.length === 1 && uploaded[0].content_type.startsWith("image/")) {
+        onInsert(uploaded[0]);
+      }
     }
     load(search);
   };