react-email-studio 3.8.1 → 3.8.3

package/dist/index.js

@@ -827,6 +827,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) {
@@ -835,6 +894,11 @@ function escHtmlAttr(s) {
 function escHtml(s) {
   return String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function textBlockContentToHtml(content) {
+  const raw = typeof content === "string" ? content : "";
+  if (/^\s*<[^>]+>/.test(raw)) return raw;
+  return escHtml(raw).replace(/\r?\n/g, "<br/>");
+}
 function utf8ToBase64(raw) {
   const bytes = new TextEncoder().encode(raw);
   let bin = "";
@@ -1175,8 +1239,7 @@ function blockToHtml(cb) {
     case "text": {
       const shell = emailSurfaceBgCss(p);
       const inner = `font-size:${lenPx(p.fontSize)};color:${p.color};text-align:${p.align};font-weight:${p.fontWeight || 400};font-style:${p.italic ? "italic" : "normal"};text-decoration:${p.underline ? "underline" : "none"};line-height:${lh(p.lineHeight)};letter-spacing:${lenPx(p.letterSpacing)};font-family:${p.fontFamily || "Georgia,serif"}`;
-      const content = typeof p.content === "string" ? p.content : "";
-      const body = /^\s*<[^>]+>/.test(content) ? content : escHtml(content).replace(/\r?\n/g, "<br/>");
+      const body = textBlockContentToHtml(p.content);
       return `<div style="${pd(p.padding)};${marginCss()}${shell}"><div style="${inner}">${body}</div></div>`;
     }
     case "html": {
@@ -3021,7 +3084,7 @@ function ContentBlock({ block, selected, onClick, preview, C }) {
       "div",
       {
         style: { fontSize: p.fontSize, color: p.color, textAlign: p.align, fontWeight: p.fontWeight || (p.bold ? 700 : 400), fontStyle: p.italic ? "italic" : "normal", textDecoration: p.underline ? "underline" : "none", lineHeight: p.lineHeight || 1.65, letterSpacing: `${p.letterSpacing || 0}px`, fontFamily: p.fontFamily || "Georgia,serif" },
-        dangerouslySetInnerHTML: { __html: p.content }
+        dangerouslySetInnerHTML: { __html: textBlockContentToHtml(p.content) }
       }
     )
   );
@@ -7440,50 +7503,64 @@ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function ContextMenu({ x, y, items, onClose, C }) {
   const ref = useRef4(null);
   useEffect5(() => {
-    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__ */ jsx8("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__ */ jsx8("div", { style: { height: 1, background: C.border, margin: "3px 0" } }, i) : /* @__PURE__ */ jsxs6(
-    "button",
+  return /* @__PURE__ */ jsx8(
+    "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__ */ jsx8("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__ */ jsx8("div", { style: { height: 1, background: C.border, margin: "3px 0" } }, i) : /* @__PURE__ */ jsxs6(
+        "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__ */ jsx8("span", { style: { marginRight: 8 }, children: item.icon }),
+            item.label
+          ]
+        },
+        i
+      ))
+    }
+  );
 }
 
 // src/editor/overlays/ConfirmDialog.tsx
@@ -8087,10 +8164,27 @@ var ReactEmailEditorComponent = 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 },
@@ -8100,17 +8194,14 @@ var ReactEmailEditorComponent = 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 },