add support for undo

sytabaresa · Nov 8, 2023 · 2c3bdd9 · 2c3bdd9
1 parent fc03f88
commit 2c3bdd9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/src/common/components/organisms/editorMobile.tsx b/src/common/components/organisms/editorMobile.tsx
@@ -23,8 +23,6 @@ const EditorMobile = (props: EditorPopupProps) => {
     const send = useSetAtom(editorServiceAtom)
     const select = useAtomValue(selectionAtom)
 
-    const parseExecute = useCallback(() => send('PARSE'), [])
-
     useEffect(() => {
         setTimeout(() => {
             // console.log('focus')
@@ -43,7 +41,7 @@ const EditorMobile = (props: EditorPopupProps) => {
                     <EditorError />
                 </div>
                 <div className="flex items-center">
-                    <button onClick={parseExecute} className="btn btn-outline flex-1 mr-2">
+                    <button onClick={() => send('PARSE')} className="btn btn-outline flex-1 mr-2">
                         {t.canvas.run()}
                     </button>
                     <button
@@ -60,14 +58,14 @@ const EditorMobile = (props: EditorPopupProps) => {
                         aria-label={t.canvas.undo()}
                         tabIndex={0}
                         className='btn btn-outline btn-primary btn-circle mr-2'
-                        onClick={() => editor.undo()}>
+                        onClick={() => send("UNDO")}>
                         <ReplyIcon className="w-5" />
                     </button>
                     <button
                         className="btn btn-outline btn-circle"
                         tabIndex={0}
                         onClick={() => setOpen(!isOpen)}
-                        aria-label={t.canvas.undo()}
+                        aria-label={t.canvas.close()}
                     >
                         <ChevronDownIcon className="w-6" />
                     </button>

diff --git a/src/common/components/organisms/primitivesMenu.tsx b/src/common/components/organisms/primitivesMenu.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 import { HandIcon, ReplyIcon, TemplateIcon } from "@heroicons/react/outline"
 import TrashIcon from "@heroicons/react/outline/TrashIcon"
 import { useTranslation } from "@modules/i18n"
-import { useAtom } from "jotai";
-import { drawServiceAtom } from "@core/atoms/smith";
+import { useAtom, useSetAtom } from "jotai";
+import { drawServiceAtom, editorServiceAtom } from "@core/atoms/smith";
 import { cn } from "@utils/styles";
 import { usePlateEditorRef } from "@udecode/plate-common";
 
@@ -35,6 +35,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
   const { className, ...rest } = props
   const { t } = useTranslation()
   const [current, send] = useAtom(drawServiceAtom)
+  const sendEditor = useSetAtom(editorServiceAtom)
   const editor = usePlateEditorRef()
   const [offset, setOffset] = useState(0)
 
@@ -82,12 +83,8 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
             aria-label={t.canvas.undo()}
             tabIndex={0}
             className='btn btn-outline btn-primary bg-base-100 btn-square'
-            onClick={() => {
-              send('UNDO')
-              editor.undo()
-            }}>
+            onClick={() => sendEditor('UNDO')}>
             <ReplyIcon className="w-6" />
-
           </button>
         </div>
         <div className="">

diff --git a/src/modules/core/fsm/editorFSM.ts b/src/modules/core/fsm/editorFSM.ts
@@ -6,7 +6,7 @@ import { Board } from 'jsxgraph';
 import { PlateEditor } from '@udecode/plate-common';
 import { MyValue } from '@editor/types';
 import { Transforms } from 'slate';
-import { deserializeCode } from '@editor/serializers/serializers';
+import { deserializeCode, serializeCode } from '@editor/serializers/serializers';
 
 export interface EditorContextType extends JotaiContext<any, any, any> {
     errorMsg?: string;
@@ -39,18 +39,21 @@ const parseExecute = async (ctx: EditorContextType, ev) => {
 export default createMachine('idle', {
     idle: state(
         transition('PARSE', 'parsing', reduce(clearErrorMsg)),
-        transition("CODE", 'idle', action(setCode)),
+        transition("CODE", 'idle', action(setCodeRaw)),
+        transition("UNDO", 'parsing', reduce(clearErrorMsg), action(undo))
     ),
     parsing: invoke(parseExecute,
         transition('done', 'idle', reduce(addCounter)),
         transition('error', 'error', reduce(setError))
     ),
     error: state(
         transition('PARSE', 'parsing', reduce(clearErrorMsg)),
-        transition("CODE", 'clearError', action(setCode)),
+        transition("CODE", 'clearError', action(setCodeRaw)),
+        transition("UNDO", 'parsing', reduce(clearErrorMsg), action(undo))
     ),
     clearError: invoke(() => wait(200),
-        transition("CODE", 'clearError', action(setCode)),
+        transition("CODE", 'clearError', action(setCodeRaw)),
+        transition("UNDO", 'parsing', action(undo)),
         transition('done', 'idle', reduce(clearErrorMsg))
     )
 }, (ctx: EditorContextType) => ({
@@ -62,7 +65,7 @@ export default createMachine('idle', {
 function clearErrorMsg(ctx: EditorContextType, ev: any) { return { ...ctx, errorMsg: '' } }
 function setError(ctx: EditorContextType, ev: any) { return { ...ctx, errorMsg: ev.error } }
 function addCounter(ctx: EditorContextType, ev: any) { return { ...ctx, counter: ctx.counter + 1 } }
-function setCode(ctx: EditorContextType, ev: { value: string, append: boolean }) {
+function setCodeRaw(ctx: EditorContextType, ev: { value: string, append: boolean }) {
     const code = ctx.getter(_codeAtom)
     const setCode = ctx.setter(_codeAtom)
     const editorRef: React.MutableRefObject<PlateEditor<MyValue>> = ctx.getter(editorAtom)
@@ -75,4 +78,14 @@ function setCode(ctx: EditorContextType, ev: { value: string, append: boolean })
     } else {
         setCode(ev.value)
     }
-}
+}
+function undo(ctx: EditorContextType, ev: {}) {
+    const setCode = ctx.setter(_codeAtom)
+    const editorRef: React.MutableRefObject<PlateEditor<MyValue>> = ctx.getter(editorAtom)
+
+    editorRef.current.undo()
+    const code = serializeCode(editorRef.current.children)
+    // console.log("code")
+    setCode(code)
+}
+