fix: editor history (#94)

* feat: set initial data from props * fix: undo lose focus * fix: activate selected element tab
Nexters · Aug 22, 2024 · b3da446 · b3da446
1 parent 2df03a2
commit b3da446
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
@@ -81,6 +81,7 @@ const updateEditorHistory = (
     state: {
       ...editor.state,
       selectedElement: newSelectedElement,
+      currentTabValue: editorTabValue.ELEMENT_SETTINGS,
     },
     data: newData,
     history: {
@@ -368,10 +369,8 @@ const actionHandlers: {
     const isValidSelect = isValidSelectEditorElement(payload.elementDetails);
 
     const newTabValue = isValidSelect
-      ? editorTabValue.ELEMENTS
-      : editor.state.currentTabValue === editorTabValue.ELEMENT_SETTINGS
-        ? editorTabValue.ELEMENT_SETTINGS
-        : editor.state.currentTabValue;
+      ? editorTabValue.ELEMENT_SETTINGS
+      : editor.state.currentTabValue;
 
     return {
       ...editor,
@@ -433,6 +432,10 @@ const actionHandlers: {
           ...editor.history,
           currentIndex: nextIndex,
         },
+        state: {
+          ...editor.state,
+          selectedElement: emptyElement,
+        },
       };
     }
     return editor;
@@ -448,6 +451,10 @@ const actionHandlers: {
           ...editor.history,
           currentIndex: prevIndex,
         },
+        state: {
+          ...editor.state,
+          selectedElement: emptyElement,
+        },
       };
     }
     return editor;

diff --git a/src/components/editor/provider.tsx b/src/components/editor/provider.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { createContext, useContext, useReducer, type Dispatch } from "react";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useReducer,
+  type Dispatch,
+} from "react";
 import { editorReducer, type EditorAction } from "~/components/editor/action";
 import {
   initialEditor,
@@ -36,12 +42,20 @@ export default function EditorProvider({
   editorData,
   editorState,
 }: EditorProviderProps) {
-  const [editor, dispatch] = useReducer(editorReducer, {
-    ...initialEditor,
-    data: {
+  const initialData = useMemo(() => {
+    return {
       ...initialEditor.data,
       ...editorData,
+    };
+  }, [editorData]);
+
+  const [editor, dispatch] = useReducer(editorReducer, {
+    ...initialEditor,
+    history: {
+      ...initialEditor.history,
+      list: [initialData],
     },
+    data: initialData,
     config: {
       ...initialEditorConfig,
       ...editorConfig,