feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

Author: teja-pola

src/components/useUndoRedo.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+
+function useUndoRedo<T>(initialValue: T) {
+  const [past, setPast] = useState<T[]>([]);
+  const [present, setPresent] = useState<T>(initialValue);
+  const [future, setFuture] = useState<T[]>([]);
+
+  // Function to update the present state and track past states
+  const set = (newValue: T) => {
+    setPast((prevPast) => [...prevPast, present]);
+    setPresent(newValue);
+    setFuture([]); // Clear future when new change is made
+  };
+
+  const undo = () => {
+    if (past.length === 0) return;
+    const previous = past[past.length - 1];
+    setPast((prevPast) => prevPast.slice(0, -1));
+    setFuture((prevFuture) => [present, ...prevFuture]);
+    setPresent(previous);
+  };
+
+  const redo = () => {
+    if (future.length === 0) return;
+    const next = future[0];
+    setFuture((prevFuture) => prevFuture.slice(1));
+    setPast((prevPast) => [...prevPast, present]);
+    setPresent(next);
+  };
+
+  return { value: present, set, undo, redo };
+}
+
+export default useUndoRedo;

src/editors/editorsContainer/AgreementData.tsx

@@ -1,15 +1,14 @@
 import JSONEditor from "../JSONEditor";
 import useAppStore from "../../store/store";
+import useUndoRedo from "../../components/useUndoRedo";
 import { useCallback } from "react";
 import { debounce } from "ts-debounce";
+import { FaUndo, FaRedo } from "react-icons/fa";
 
 function AgreementData() {
-  const editorAgreementData = useAppStore((state) => state.editorAgreementData);
-  const setEditorAgreementData = useAppStore(
-    (state) => state.setEditorAgreementData
-  );
-  const setData = useAppStore((state) => state.setData);
   const textColor = useAppStore((state) => state.textColor);
+  const setData = useAppStore((state) => state.setData);
+  const { value, set, undo, redo } = useUndoRedo(useAppStore((state) => state.editorAgreementData));
 
   const debouncedSetData = useCallback(
     debounce((value: string) => {
@@ -20,23 +19,26 @@ function AgreementData() {
 
   const handleChange = (value: string | undefined) => {
     if (value !== undefined) {
-      setEditorAgreementData(value); // Immediate state update
-      debouncedSetData(value); // Debounced state update
+      set(value);
+      debouncedSetData(value);
     }
   };
 
   return (
-    <div className="column">
-      <div className="tooltip">
+    <div className="column" >
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
         <h3 style={{ color: textColor }}>Data</h3>
-        <span style={{ color: textColor }} className="tooltiptext">
-          JSON data (an instance of the Concerto model) used to preview output
-          from the template.
-        </span>
+        <div>
+          <FaUndo onClick={undo} style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
+          <FaRedo onClick={redo} style={{ cursor: "pointer", color: textColor }} />
+        </div>
       </div>
-      <JSONEditor value={editorAgreementData} onChange={handleChange} />
+      <p style={{ color: textColor }}>
+      JSON data (an instance of the Concerto model) used to preview output from the template.
+      </p>
+      <JSONEditor value={value} onChange={handleChange} />
     </div>
   );
 }
 
-export default AgreementData;
+export default AgreementData;

src/editors/editorsContainer/TemplateMarkdown.tsx

@@ -1,39 +1,45 @@
 import MarkdownEditor from "../MarkdownEditor";
 import useAppStore from "../../store/store";
+import useUndoRedo from "../../components/useUndoRedo";
 import { useCallback } from "react";
 import { debounce } from "ts-debounce";
+import { FaUndo, FaRedo } from "react-icons/fa";
 
 function TemplateMarkdown() {
-  const editorValue = useAppStore((state) => state.editorValue);
-  const setEditorValue = useAppStore((state) => state.setEditorValue);
-  const setTemplateMarkdown = useAppStore((state) => state.setTemplateMarkdown);
-  const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
+  const backgroundColor = useAppStore((state) => state.backgroundColor);
+  const setTemplateMarkdown = useAppStore((state) => state.setTemplateMarkdown);
+  const { value, set, undo, redo } = useUndoRedo(useAppStore((state) => state.editorValue));
 
   const debouncedSetTemplateMarkdown = useCallback(
     debounce((value: string) => {
       void setTemplateMarkdown(value);
     }, 500),
-    []
+    [setTemplateMarkdown]
   );
 
   const handleChange = (value: string | undefined) => {
     if (value !== undefined) {
-      setEditorValue(value);
+      set(value);
       debouncedSetTemplateMarkdown(value);
     }
   };
 
   return (
-    <div className="column" style={{ backgroundColor: backgroundColor }}>
-      <h2 style={{ color: textColor }}>TemplateMark</h2>
+    <div className="column" style={{ backgroundColor }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <h3 style={{ color: textColor }}>TemplateMark</h3>
+        <div>
+          <FaUndo onClick={undo} style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
+          <FaRedo onClick={redo} style={{ cursor: "pointer", color: textColor }} />
+        </div>
+      </div>
       <p style={{ color: textColor }}>
-        A natural language template with embedded variables, conditional
-        sections, and TypeScript code.
+        A natural language template with embedded variables, conditional sections, and TypeScript code.
       </p>
-      <MarkdownEditor value={editorValue} onChange={handleChange} />
+      <MarkdownEditor value={value} onChange={handleChange} />
     </div>
   );
 }
 
-export default TemplateMarkdown;
+export default TemplateMarkdown;

src/editors/editorsContainer/TemplateModel.tsx

@@ -1,13 +1,14 @@
 import ConcertoEditor from "../ConcertoEditor";
 import useAppStore from "../../store/store";
+import useUndoRedo from "../../components/useUndoRedo";
 import { useCallback } from "react";
 import { debounce } from "ts-debounce";
+import { FaUndo, FaRedo } from "react-icons/fa";
 
 function TemplateModel() {
-  const editorModelCto = useAppStore((state) => state.editorModelCto);
-  const setEditorModelCto = useAppStore((state) => state.setEditorModelCto);
-  const setModelCto = useAppStore((state) => state.setModelCto);
   const textColor = useAppStore((state) => state.textColor);
+  const setModelCto = useAppStore((state) => state.setModelCto);
+  const { value, set, undo, redo } = useUndoRedo(useAppStore((state) => state.editorModelCto));
 
   const debouncedSetModelCto = useCallback(
     debounce((value: string) => {
@@ -18,22 +19,26 @@ function TemplateModel() {
 
   const handleChange = (value: string | undefined) => {
     if (value !== undefined) {
-      setEditorModelCto(value);
+      set(value);
       debouncedSetModelCto(value);
     }
   };
 
   return (
     <div className="column">
-      <div className="tooltip">
+      <div className="tooltip" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
         <h3 style={{ color: textColor }}>Concerto Model</h3>
-        <span style={{ color: textColor }} className="tooltiptext">
-          Defines the data model for the template and its logic.
-        </span>
+        <div>
+          <FaUndo onClick={undo} style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
+          <FaRedo onClick={redo} style={{ cursor: "pointer", color: textColor }} />
+        </div>
       </div>
-      <ConcertoEditor value={editorModelCto} onChange={handleChange} />
+      <span style={{ color: textColor }} className="tooltiptext">
+        Defines the data model for the template and its logic.
+      </span>
+      <ConcertoEditor value={value} onChange={handleChange} />
     </div>
   );
 }
 
-export default TemplateModel;
+export default TemplateModel;