@kontakto/email-template-editor 2.5.0 → 2.6.0

package/README.md

@@ -223,6 +223,20 @@ function MyApp() {
 }
 ```
 
+### Keyboard shortcuts
+
+The editor surfaces a few global shortcuts. Inside text fields or rich-text blocks the native browser behavior takes over — global undo/redo only fires when focus is on the canvas (not mid-typing).
+
+| Action | macOS | Windows / Linux |
+|---|---|---|
+| Undo | ⌘ + Z | Ctrl + Z |
+| Redo | ⌘ + Shift + Z | Ctrl + Shift + Z, Ctrl + Y |
+| Bold (inside text) | ⌘ + B | Ctrl + B |
+| Italic (inside text) | ⌘ + I | Ctrl + I |
+| Link (inside text) | ⌘ + K | Ctrl + K |
+
+The undo history tracks document mutations only (block insert/delete/move, content edits, style changes, variable edits). Rapid consecutive edits (dragging a slider, typing a burst) collapse into a single history entry. The ring buffer holds the last 100 entries and resets whenever a new template is loaded.
+
 ### Stand-alone version using Vite
 
 This project includes a standalone version that can be run using Vite:

package/dist/index.cjs

@@ -11,6 +11,7 @@ var react = require('@lingui/react');
 var material = require('@mui/material');
 var core = require('@lingui/core');
 var zustand = require('zustand');
+var zundo = require('zundo');
 var iconsMaterial = require('@mui/icons-material');
 var reactColorful = require('react-colorful');
 var hljs = require('highlight.js');
@@ -2056,20 +2057,48 @@ var EMPTY_DOCUMENT = {
     }
   }
 };
-var editorStateStore = zustand.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 = zustand.create()(
+  zundo.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);
 }
@@ -2112,11 +2141,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;
@@ -2127,6 +2160,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 });
@@ -2171,6 +2207,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 zustand.useStore(editorStateStore.temporal, (s) => s.pastStates.length > 0);
+}
+function useCanRedo() {
+  return zustand.useStore(editorStateStore.temporal, (s) => s.futureStates.length > 0);
+}
 
 // src/app/save-payload.ts
 var ROOT_BLOCK_ID = "root";
@@ -6863,7 +6911,7 @@ function EmailLayoutEditor(props) {
       }
     }
     delete nDocument[selectedBlockId];
-    resetDocument(nDocument);
+    replaceDocument(nDocument);
   }, [selectedBlockId, document2]);
   const handleCopy = React57.useCallback((e) => {
     if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
@@ -6906,7 +6954,7 @@ function EmailLayoutEditor(props) {
         childrenIds: currentChildrenIds
       })
     };
-    resetDocument(doc);
+    replaceDocument(doc);
     setSelectedBlockId(newRootId);
   }), [document2, childrenIds, selectedBlockId, currentBlockId]);
   React57.useEffect(() => {
@@ -6947,7 +6995,6 @@ function EmailLayoutEditor(props) {
       }
     }
   );
-  const WORKSPACE_BG = "#e7e8ec";
   const CARD_MAX_WIDTH = 664;
   const cardStyle = {
     maxWidth: CARD_MAX_WIDTH,
@@ -6963,7 +7010,6 @@ function EmailLayoutEditor(props) {
           setSelectedBlockId(null);
         },
         style: __spreadProps(__spreadValues({}, baseStyle), {
-          backgroundColor: WORKSPACE_BG,
           padding: "32px",
           width: "100%",
           minHeight: "100%"
@@ -6988,7 +7034,6 @@ function EmailLayoutEditor(props) {
         setSelectedBlockId(null);
       },
       style: __spreadProps(__spreadValues({}, baseStyle), {
-        backgroundColor: WORKSPACE_BG,
         padding: "32px 16px",
         width: "100%",
         minHeight: "100%"
@@ -8637,6 +8682,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`;
+  React57.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__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: `${t("undo.tooltip", "Undo")} (${undoHint})` }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
+    material.IconButton,
+    {
+      size: "small",
+      onClick: undo,
+      disabled: !canUndo,
+      "aria-label": t("undo.label", "Undo")
+    },
+    /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.UndoOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: `${t("redo.tooltip", "Redo")} (${redoHint})` }, /* @__PURE__ */ React57__default.default.createElement("span", null, /* @__PURE__ */ React57__default.default.createElement(
+    material.IconButton,
+    {
+      size: "small",
+      onClick: redo,
+      disabled: !canRedo,
+      "aria-label": t("redo.label", "Redo")
+    },
+    /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.RedoOutlined, { fontSize: "small" })
+  ))));
+}
 function SubjectInput() {
   var _a;
   const document2 = useDocument();
@@ -8865,7 +8968,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();
@@ -8935,7 +9038,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       alignItems: "center"
     },
     samplesDrawerEnabled && /* @__PURE__ */ React57__default.default.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React57__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))))),
+    /* @__PURE__ */ React57__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57__default.default.createElement(material.Stack, { direction: "row", spacing: 2, alignItems: "center" }, selectedMainTab === "editor" && /* @__PURE__ */ React57__default.default.createElement(UndoRedoButtons, null), /* @__PURE__ */ React57__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))))),
     /* @__PURE__ */ React57__default.default.createElement(ToggleInspectorPanelButton, null)
   ), selectedMainTab === "editor" && /* @__PURE__ */ React57__default.default.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React57__default.default.createElement(SubjectPreview, null), /* @__PURE__ */ React57__default.default.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React57__default.default.createElement(
     material.Box,