Add undo/redo

packages/editor-sample/src/App/TemplatePanel/Redo/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+
+import { RedoOutlined as RedoIcon } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { redo, useCanRedo } from '../../../documents/editor/EditorContext';
+
+export default function Redo() {
+  const canRedo = useCanRedo();
+  useEffect(() => {
+    function handle(event: KeyboardEvent) {
+      if (event.ctrlKey && event.key.toLowerCase() === 'y') {
+        event.preventDefault();
+        redo();
+      }
+    }
+
+    document.addEventListener('keydown', handle);
+    return () => document.removeEventListener('keydown', handle);
+  }, []);
+
+  return (
+    <>
+      <Tooltip title="Redo (Ctrl + Y)">
+        <span>
+          <IconButton onClick={redo} disabled={canRedo === false}>
+            <RedoIcon fontSize="small" />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </>
+  );
+}

packages/editor-sample/src/App/TemplatePanel/Undo/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+
+import { UndoOutlined as UndoIcon } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { undo, useCanUndo } from '../../../documents/editor/EditorContext';
+
+export default function Undo() {
+  const canUndo = useCanUndo();
+  useEffect(() => {
+    function handle(event: KeyboardEvent) {
+      if (event.ctrlKey && event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        undo();
+      }
+    }
+
+    document.addEventListener('keydown', handle);
+    return () => document.removeEventListener('keydown', handle);
+  }, []);
+
+  return (
+    <>
+      <Tooltip title="Undo (Ctrl + Z)">
+        <span>
+          <IconButton onClick={undo} disabled={canUndo === false}>
+            <UndoIcon fontSize="small" />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </>
+  );
+}

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 
 import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
 import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
@@ -20,6 +20,8 @@
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
+import Undo from './Undo';
+import Redo from './Redo';
 
 export default function TemplatePanel() {
   const document = useDocument();
@@ -97,6 +99,8 @@
           <Stack direction="row" spacing={2}>
             <DownloadJson />
             <ImportJson />
+            <Undo />
+            <Redo />
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">
                 <Tooltip title="Desktop view">

packages/editor-sample/src/documents/editor/EditorContext.tsx

@@ -1,12 +1,15 @@
 import { create } from 'zustand';
-
+import debounce from '@mui/material/utils/debounce';
 import getConfiguration from '../../getConfiguration';
 
 import { TEditorConfiguration } from './core';
 
 type TValue = {
   document: TEditorConfiguration;
 
+  documentHistory: Array<TEditorConfiguration>,
+  documentHistoryIndex: number,
+
   selectedBlockId: string | null;
   selectedSidebarTab: 'block-configuration' | 'styles';
   selectedMainTab: 'editor' | 'preview' | 'json' | 'html';
@@ -18,6 +21,8 @@
 
 const editorStateStore = create<TValue>(() => ({
   document: getConfiguration(window.location.hash),
+  documentHistory: [],
+  documentHistoryIndex: 0,
   selectedBlockId: null,
   selectedSidebarTab: 'styles',
   selectedMainTab: 'editor',
@@ -76,7 +81,25 @@
   return editorStateStore.setState({ selectedSidebarTab });
 }
 
+const addDocumentToHistory = debounce(function (document: TValue['document']) {
+  let documentHistory = editorStateStore.getState().documentHistory;
+  const currentIndex = editorStateStore.getState().documentHistoryIndex;
+  if (currentIndex < documentHistory.length - 1) {
+    documentHistory = documentHistory.slice(0, currentIndex + 1);
+  }
+  documentHistory.push(document);
+  if (documentHistory.length > 254) {
+    documentHistory = documentHistory.slice(1);
+  }
+
+  editorStateStore.setState({
+    documentHistory,
+    documentHistoryIndex: documentHistory.length - 1,
+  });
+}, 500);
+
 export function resetDocument(document: TValue['document']) {
+  addDocumentToHistory(document);
   return editorStateStore.setState({
     document,
     selectedSidebarTab: 'styles',
@@ -86,11 +109,47 @@
 
 export function setDocument(document: TValue['document']) {
   const originalDocument = editorStateStore.getState().document;
+  const mergedDocument = {
+    ...originalDocument,
+    ...document,
+  };
+  addDocumentToHistory(mergedDocument);
   return editorStateStore.setState({
-    document: {
-      ...originalDocument,
-      ...document,
-    },
+    document: mergedDocument,
+  });
+}
+
+export function useCanUndo() {
+  return editorStateStore(s => s.documentHistory.length > 0 && s.documentHistoryIndex > 0);
+}
+
+export function useCanRedo() {
+  return editorStateStore(s => s.documentHistory.length > 0 && s.documentHistoryIndex < s.documentHistory.length - 1);
+}
+
+export function undo() {
+  const documentHistory = editorStateStore.getState().documentHistory;
+  const currentIndex = editorStateStore.getState().documentHistoryIndex;
+  if (documentHistory.length <= 0 || currentIndex <= 0) {
+    return;
+  }
+  const changeToIndex = currentIndex - 1;
+  editorStateStore.setState({
+    document: documentHistory[changeToIndex],
+    documentHistoryIndex: changeToIndex,
+  });
+}
+
+export function redo() {
+  const documentHistory = editorStateStore.getState().documentHistory;
+  const currentIndex = editorStateStore.getState().documentHistoryIndex;
+  if (documentHistory.length <= 0 || currentIndex >= documentHistory.length - 1) {
+    return;
+  }
+  const changeToIndex = currentIndex + 1;
+  editorStateStore.setState({
+    document: documentHistory[changeToIndex],
+    documentHistoryIndex: changeToIndex,
   });
 }