react-email-studio 3.8.2 → 3.8.3

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.3] - 2026-05-26
+
+### Fixed
+
+- **Context menu Move Up / Move Down** now works for all block types: root `blocks[]` sections (row reorder), stacked blocks in a `rows[]` column (in-column swap), nested layout columns, and single-block layout rows.
+- **Context menu clicks** no longer dismiss the menu before the action runs (`pointerdown` handling on the menu overlay).
+
 ## [3.8.2] - 2026-05-22
 
 ### Added

package/README.md

@@ -7,7 +7,9 @@
 
 ## Release notes
 
-**Latest: 3.8.2** — includes a single-file **`RELEASE.md`** npm tutorial and fixes plain text newline rendering parity between canvas preview and exported HTML.
+**Latest: 3.8.3** — fixes context menu **Move Up / Move Down** for root sections, stacked column blocks, and nested layout blocks.
+
+See **3.8.2** for the **`RELEASE.md`** npm tutorial and plain-text newline rendering fixes.
 
 Version history and migration hints: **[CHANGELOG.md](./CHANGELOG.md)** (also included in the published npm tarball under `node_modules/react-email-studio/CHANGELOG.md`).
 

package/dist/index.cjs

@@ -864,6 +864,65 @@ function countBlocksInDesign(rows) {
   }, 0);
   return rows.reduce((sum, r) => sum + r.cells.reduce((s, c) => s + colBlocks(c), 0), 0);
 }
+function isSingleBlockInRow(row) {
+  if (!row?.cells) return false;
+  let count = 0;
+  for (const col of row.cells) {
+    if (!Array.isArray(col)) continue;
+    count += col.length;
+    if (count > 1) return false;
+  }
+  return count === 1;
+}
+function resolveBlockMovePlan(rows, rowId, cellIdx, blockIndex, inner) {
+  const rowIndex = rows.findIndex((r) => r.id === rowId);
+  const row = rowIndex >= 0 ? rows[rowIndex] : void 0;
+  if (!row) return null;
+  if (inner) {
+    const loc = toColumnLoc(rowId, cellIdx, {
+      parentBlockIdx: inner.parentBlockIdx,
+      innerCellIdx: inner.cellIdx
+    });
+    const col2 = getColumnBlocks(rows, loc);
+    const idx = inner.contentIdx;
+    return {
+      mode: "column",
+      blockIndex: idx,
+      canMoveUp: idx > 0,
+      canMoveDown: idx < col2.length - 1
+    };
+  }
+  const col = row.cells?.[cellIdx];
+  const colLen = Array.isArray(col) ? col.length : 0;
+  if (colLen > 1) {
+    return {
+      mode: "column",
+      blockIndex,
+      canMoveUp: blockIndex > 0,
+      canMoveDown: blockIndex < colLen - 1
+    };
+  }
+  if (colLen === 1 && (isRootContentRow(row) || isSingleBlockInRow(row))) {
+    return {
+      mode: "row",
+      canMoveUp: rowIndex > 0,
+      canMoveDown: rowIndex < rows.length - 1
+    };
+  }
+  if (colLen === 1) {
+    return {
+      mode: "row",
+      canMoveUp: rowIndex > 0,
+      canMoveDown: rowIndex < rows.length - 1
+    };
+  }
+  return {
+    mode: "column",
+    blockIndex,
+    canMoveUp: false,
+    canMoveDown: false
+  };
+}
 
 // src/lib/htmlUtils.ts
 function escHtmlAttr(s) {
@@ -7428,50 +7487,64 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 function ContextMenu({ x, y, items, onClose, C }) {
   const ref = (0, import_react6.useRef)(null);
   (0, import_react6.useEffect)(() => {
-    const h = () => onClose();
-    window.addEventListener("mousedown", h);
-    window.addEventListener("keydown", h);
+    const onPointerDown = (ev) => {
+      if (ref.current?.contains(ev.target)) return;
+      onClose();
+    };
+    const onKeyDown = (ev) => {
+      if (ev.key === "Escape") onClose();
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
     return () => {
-      window.removeEventListener("mousedown", h);
-      window.removeEventListener("keydown", h);
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
     };
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, onMouseDown: (e) => e.stopPropagation(), style: { position: "fixed", left: x, top: y, zIndex: 9999, background: C.sidebar, border: `1px solid ${C.border}`, borderRadius: 7, padding: "4px 0", boxShadow: `0 8px 32px rgba(0,0,0,.4)`, minWidth: 160 }, children: items.map((item, i) => item.sep ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 1, background: C.border, margin: "3px 0" } }, i) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
     {
-      type: "button",
-      disabled: !!item.disabled,
-      onClick: () => {
-        if (item.disabled) return;
-        item.action();
-        onClose();
-      },
-      style: {
-        display: "block",
-        width: "100%",
-        background: "none",
-        border: "none",
-        padding: "7px 14px",
-        textAlign: "left",
-        cursor: item.disabled ? "not-allowed" : "pointer",
-        fontSize: 12,
-        color: item.disabled ? C.muted : item.danger ? C.danger : C.text,
-        fontWeight: item.bold ? 700 : 400,
-        opacity: item.disabled ? 0.45 : 1
-      },
-      onMouseEnter: (e) => {
-        if (!item.disabled) e.currentTarget.style.background = C.surface;
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "none";
-      },
-      children: [
-        item.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: 8 }, children: item.icon }),
-        item.label
-      ]
-    },
-    i
-  )) });
+      ref,
+      onPointerDown: (e) => e.stopPropagation(),
+      style: { position: "fixed", left: x, top: y, zIndex: 9999, background: C.sidebar, border: `1px solid ${C.border}`, borderRadius: 7, padding: "4px 0", boxShadow: `0 8px 32px rgba(0,0,0,.4)`, minWidth: 160 },
+      children: items.map((item, i) => item.sep ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 1, background: C.border, margin: "3px 0" } }, i) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          type: "button",
+          disabled: !!item.disabled,
+          onClick: () => {
+            if (item.disabled) return;
+            item.action();
+            onClose();
+          },
+          style: {
+            display: "block",
+            width: "100%",
+            background: "none",
+            border: "none",
+            padding: "7px 14px",
+            textAlign: "left",
+            cursor: item.disabled ? "not-allowed" : "pointer",
+            fontSize: 12,
+            color: item.disabled ? C.muted : item.danger ? C.danger : C.text,
+            fontWeight: item.bold ? 700 : 400,
+            opacity: item.disabled ? 0.45 : 1
+          },
+          onMouseEnter: (e) => {
+            if (!item.disabled) e.currentTarget.style.background = C.surface;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+          },
+          children: [
+            item.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: 8 }, children: item.icon }),
+            item.label
+          ]
+        },
+        i
+      ))
+    }
+  );
 }
 
 // src/editor/overlays/ConfirmDialog.tsx
@@ -8075,10 +8148,27 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
         else dropContent(rowId, cellIdx, { kind: "duplicate", fromIdx: contentIdx });
       }
     };
+    const shiftBlockFromMenu = (rowId, cellIdx, ci, dir, inner = null) => {
+      const blockIndex = inner ? inner.contentIdx : ci;
+      const plan = resolveBlockMovePlan(rowsRef.current, rowId, cellIdx, blockIndex, inner);
+      if (!plan) return;
+      if (dir < 0 && !plan.canMoveUp || dir > 0 && !plan.canMoveDown) return;
+      if (plan.mode === "row") {
+        moveRow(rowId, dir);
+        return;
+      }
+      moveContent(rowId, cellIdx, plan.blockIndex, dir, inner);
+    };
     const handleContextMenu = (e, rowId, cellIdx, ci, inner = null) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const blockIndex = inner ? inner.contentIdx : ci;
+      const plan = resolveBlockMovePlan(rowsRef.current, rowId, cellIdx, blockIndex, inner);
+      const canMoveUp = plan?.canMoveUp ?? false;
+      const canMoveDown = plan?.canMoveDown ?? false;
       setCtxMenu({ x: e.clientX, y: e.clientY, items: [
-        { icon: "\u2191", label: "Move Up", action: () => moveContent(rowId, cellIdx, ci, -1, inner) },
-        { icon: "\u2193", label: "Move Down", action: () => moveContent(rowId, cellIdx, ci, 1, inner) },
+        { icon: "\u2191", label: "Move Up", disabled: !canMoveUp, action: () => shiftBlockFromMenu(rowId, cellIdx, ci, -1, inner) },
+        { icon: "\u2193", label: "Move Down", disabled: !canMoveDown, action: () => shiftBlockFromMenu(rowId, cellIdx, ci, 1, inner) },
         { sep: true },
         { icon: "\u29C9", label: "Duplicate", action: () => dropContent(rowId, cellIdx, inner ? { kind: "duplicate", fromIdx: inner.contentIdx, fromNested: { parentBlockIdx: inner.parentBlockIdx, innerCellIdx: inner.cellIdx } } : { kind: "duplicate", fromIdx: ci }) },
         { sep: true },
@@ -8088,17 +8178,14 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
     const handleLayoutContextMenu = (e, rowId) => {
       e.preventDefault();
       e.stopPropagation();
-      const ri = rows.findIndex((r) => r.id === rowId);
+      const currentRows = rowsRef.current;
+      const ri = currentRows.findIndex((r) => r.id === rowId);
       setSelectedRowId(rowId);
       setSelContentId(null);
       setSelMeta(null);
       setCtxMenu({ x: e.clientX, y: e.clientY, items: [
-        { icon: "\u2191", label: "Move row up", disabled: ri <= 0, action: () => {
-          if (ri > 0) moveRow(rowId, -1);
-        } },
-        { icon: "\u2193", label: "Move row down", disabled: ri < 0 || ri >= rows.length - 1, action: () => {
-          if (ri >= 0 && ri < rows.length - 1) moveRow(rowId, 1);
-        } },
+        { icon: "\u2191", label: "Move row up", disabled: ri <= 0, action: () => moveRow(rowId, -1) },
+        { icon: "\u2193", label: "Move row down", disabled: ri < 0 || ri >= currentRows.length - 1, action: () => moveRow(rowId, 1) },
         { sep: true },
         { icon: "\u29C9", label: "Duplicate row", action: () => dupRow(rowId) },
         { sep: true },