@kontakto/email-template-editor 2.5.0 → 2.6.0

package/dist/index.js

@@ -8,8 +8,9 @@ import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
 import { I18nProvider, Trans } from '@lingui/react';
 import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, ToggleButtonGroup, ToggleButton, Snackbar, Menu, ListItemIcon, ListItemText, Divider as Divider$1, Dialog, DialogTitle, DialogContent, Button as Button$1, DialogActions, List, ListItemButton, InputBase, AlertTitle, FormControlLabel, Switch, InputLabel, Slider, ButtonBase, Popper, Paper, Fade } from '@mui/material';
 import { i18n } from '@lingui/core';
-import { create } from 'zustand';
-import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, CheckOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
+import { create, useStore } from 'zustand';
+import { temporal } from 'zundo';
+import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, UndoOutlined, RedoOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, CheckOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import hljs from 'highlight.js';
 import jsonHighlighter from 'highlight.js/lib/languages/json';
@@ -2045,20 +2046,48 @@ var EMPTY_DOCUMENT = {
     }
   }
 };
-var editorStateStore = create(() => ({
-  document: EMPTY_DOCUMENT,
-  selectedBlockId: null,
-  selectedSidebarTab: "styles",
-  selectedMainTab: "editor",
-  selectedScreenSize: "desktop",
-  inspectorDrawerOpen: true,
-  samplesDrawerOpen: true,
-  persistenceEnabled: false,
-  lastFocusedEditable: null,
-  hoveredBlockId: null,
-  draggingBlock: null,
-  workspaceBackground: "checkerboard"
-}));
+var COALESCE_MS = 300;
+function leadingThrottle(fn, wait) {
+  let last = Number.NEGATIVE_INFINITY;
+  return (...args) => {
+    const now = Date.now();
+    if (now - last >= wait) {
+      last = now;
+      fn(...args);
+    }
+  };
+}
+var editorStateStore = create()(
+  temporal(
+    () => ({
+      document: EMPTY_DOCUMENT,
+      selectedBlockId: null,
+      selectedSidebarTab: "styles",
+      selectedMainTab: "editor",
+      selectedScreenSize: "desktop",
+      inspectorDrawerOpen: true,
+      samplesDrawerOpen: true,
+      persistenceEnabled: false,
+      lastFocusedEditable: null,
+      hoveredBlockId: null,
+      draggingBlock: null,
+      workspaceBackground: "checkerboard"
+    }),
+    {
+      limit: 100,
+      // Only the document participates in history — selection, drawers, tabs
+      // and other UI state are intentionally excluded.
+      partialize: (state) => ({ document: state.document }),
+      // Skip UI-only state changes: if the document reference is unchanged,
+      // no history entry is recorded.
+      equality: (a, b) => a.document === b.document,
+      handleSet: (handleSet) => leadingThrottle(
+        (pastState, replace, currentState) => handleSet(pastState, replace, currentState),
+        COALESCE_MS
+      )
+    }
+  )
+);
 function useDocument() {
   return editorStateStore((s) => s.document);
 }
@@ -2101,11 +2130,15 @@ function setSidebarTab(selectedSidebarTab) {
   return editorStateStore.setState({ selectedSidebarTab });
 }
 function resetDocument(document2) {
-  return editorStateStore.setState({
+  const temporalApi = editorStateStore.temporal.getState();
+  temporalApi.pause();
+  editorStateStore.setState({
     document: document2,
     selectedSidebarTab: "styles",
     selectedBlockId: null
   });
+  temporalApi.clear();
+  temporalApi.resume();
 }
 function getDocument() {
   return editorStateStore.getState().document;
@@ -2116,6 +2149,9 @@ function setDocument(document2) {
     document: __spreadValues(__spreadValues({}, originalDocument), document2)
   });
 }
+function replaceDocument(document2) {
+  editorStateStore.setState({ document: document2 });
+}
 function toggleInspectorDrawerOpen() {
   const inspectorDrawerOpen = !editorStateStore.getState().inspectorDrawerOpen;
   return editorStateStore.setState({ inspectorDrawerOpen });
@@ -2160,6 +2196,18 @@ function setWorkspaceBackground(workspaceBackground) {
 function setLastFocusedEditable(lastFocusedEditable) {
   return editorStateStore.setState({ lastFocusedEditable });
 }
+function undo() {
+  editorStateStore.temporal.getState().undo();
+}
+function redo() {
+  editorStateStore.temporal.getState().redo();
+}
+function useCanUndo() {
+  return useStore(editorStateStore.temporal, (s) => s.pastStates.length > 0);
+}
+function useCanRedo() {
+  return useStore(editorStateStore.temporal, (s) => s.futureStates.length > 0);
+}
 
 // src/app/save-payload.ts
 var ROOT_BLOCK_ID = "root";
@@ -6852,7 +6900,7 @@ function EmailLayoutEditor(props) {
       }
     }
     delete nDocument[selectedBlockId];
-    resetDocument(nDocument);
+    replaceDocument(nDocument);
   }, [selectedBlockId, document2]);
   const handleCopy = useCallback((e) => {
     if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
@@ -6895,7 +6943,7 @@ function EmailLayoutEditor(props) {
         childrenIds: currentChildrenIds
       })
     };
-    resetDocument(doc);
+    replaceDocument(doc);
     setSelectedBlockId(newRootId);
   }), [document2, childrenIds, selectedBlockId, currentBlockId]);
   useEffect(() => {
@@ -6936,7 +6984,6 @@ function EmailLayoutEditor(props) {
       }
     }
   );
-  const WORKSPACE_BG = "#e7e8ec";
   const CARD_MAX_WIDTH = 664;
   const cardStyle = {
     maxWidth: CARD_MAX_WIDTH,
@@ -6952,7 +6999,6 @@ function EmailLayoutEditor(props) {
           setSelectedBlockId(null);
         },
         style: __spreadProps(__spreadValues({}, baseStyle), {
-          backgroundColor: WORKSPACE_BG,
           padding: "32px",
           width: "100%",
           minHeight: "100%"
@@ -6977,7 +7023,6 @@ function EmailLayoutEditor(props) {
         setSelectedBlockId(null);
       },
       style: __spreadProps(__spreadValues({}, baseStyle), {
-        backgroundColor: WORKSPACE_BG,
         padding: "32px 16px",
         width: "100%",
         minHeight: "100%"
@@ -8626,6 +8671,64 @@ function SaveBar({ loadTemplates, saveAs }) {
     }
   ));
 }
+function isMac() {
+  if (typeof navigator === "undefined") return false;
+  const platform = (navigator.platform || "").toLowerCase();
+  if (platform.includes("mac")) return true;
+  const ua = (navigator.userAgent || "").toLowerCase();
+  return ua.includes("mac") && !ua.includes("windows");
+}
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function UndoRedoButtons() {
+  const canUndo = useCanUndo();
+  const canRedo = useCanRedo();
+  const mac = isMac();
+  const modKey = mac ? "\u2318" : "Ctrl";
+  const undoHint = `${modKey}+Z`;
+  const redoHint = mac ? `${modKey}+\u21E7+Z` : `${modKey}+Shift+Z / ${modKey}+Y`;
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      const mod = mac ? e.metaKey : e.ctrlKey;
+      if (!mod) return;
+      if (isEditableTarget(e.target)) return;
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if (key === "z" && e.shiftKey || key === "y" && !mac) {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [mac]);
+  return /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: `${t("undo.tooltip", "Undo")} (${undoHint})` }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
+    IconButton,
+    {
+      size: "small",
+      onClick: undo,
+      disabled: !canUndo,
+      "aria-label": t("undo.label", "Undo")
+    },
+    /* @__PURE__ */ React57.createElement(UndoOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React57.createElement(Tooltip, { title: `${t("redo.tooltip", "Redo")} (${redoHint})` }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
+    IconButton,
+    {
+      size: "small",
+      onClick: redo,
+      disabled: !canRedo,
+      "aria-label": t("redo.label", "Redo")
+    },
+    /* @__PURE__ */ React57.createElement(RedoOutlined, { fontSize: "small" })
+  ))));
+}
 function SubjectInput() {
   var _a;
   const document2 = useDocument();
@@ -8854,7 +8957,7 @@ function ImageDropPasteHandler({ enabled, children }) {
 
 // src/app/email-canvas/index.tsx
 var WORKSPACE_SOLID = "#e7e8ec";
-var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 24px 24px";
+var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 12px 12px";
 function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
   const document2 = useDocument();
   const selectedMainTab = useSelectedMainTab();
@@ -8924,7 +9027,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       alignItems: "center"
     },
     samplesDrawerEnabled && /* @__PURE__ */ React57.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React57.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
+    /* @__PURE__ */ React57.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2, alignItems: "center" }, selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(UndoRedoButtons, null), /* @__PURE__ */ React57.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
     /* @__PURE__ */ React57.createElement(ToggleInspectorPanelButton, null)
   ), selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React57.createElement(SubjectPreview, null), /* @__PURE__ */ React57.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React57.createElement(
     Box,