From 6f2b89960bb71b13cd97b23b76740dd9aba5f314 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 01/10] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 1d568d6cf615b0ddee1544be3e77f21b450d0921 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Fri, 14 Mar 2025 04:08:35 +0530 Subject: [PATCH 02/10] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 122432be95477fe9f80f52b46ec9260a25d923f2 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 03/10] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 57261e533cc83255c8af57c69f519b5afb451bd3 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sun, 16 Mar 2025 18:08:53 +0530 Subject: [PATCH 04/10] update is checked Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From bd00e3f83e1673cd7cf93eb354543639a1ac1f1b Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Tue, 11 Mar 2025 02:48:51 +0530 Subject: [PATCH 05/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/components/useUndoRedo.ts | 35 +++++++++++++++++++ .../editorsContainer/AgreementData.tsx | 32 +++++++++-------- .../editorsContainer/TemplateMarkdown.tsx | 30 +++++++++------- .../editorsContainer/TemplateModel.tsx | 25 +++++++------ 4 files changed, 85 insertions(+), 37 deletions(-) create mode 100644 src/components/useUndoRedo.ts diff --git a/src/components/useUndoRedo.ts b/src/components/useUndoRedo.ts new file mode 100644 index 00000000..b2844041 --- /dev/null +++ b/src/components/useUndoRedo.ts @@ -0,0 +1,35 @@ +import { useState } from "react"; + + +function useUndoRedo(initialValue: T) { + const [past, setPast] = useState([]); + const [present, setPresent] = useState(initialValue); + const [future, setFuture] = useState([]); + + // 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; \ No newline at end of file diff --git a/src/editors/editorsContainer/AgreementData.tsx b/src/editors/editorsContainer/AgreementData.tsx index b278ff2a..e6ee9b0d 100644 --- a/src/editors/editorsContainer/AgreementData.tsx +++ b/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 ( -
-
+
+

Data

- - JSON data (an instance of the Concerto model) used to preview output - from the template. - +
+ + +
- +

+ JSON data (an instance of the Concerto model) used to preview output from the template. +

+
); } -export default AgreementData; \ No newline at end of file +export default AgreementData; \ No newline at end of file diff --git a/src/editors/editorsContainer/TemplateMarkdown.tsx b/src/editors/editorsContainer/TemplateMarkdown.tsx index 830bfdf6..1660b1ff 100644 --- a/src/editors/editorsContainer/TemplateMarkdown.tsx +++ b/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 ( -
-

TemplateMark

+
+
+

TemplateMark

+
+ + +
+

- A natural language template with embedded variables, conditional - sections, and TypeScript code. + A natural language template with embedded variables, conditional sections, and TypeScript code.

- +
); } -export default TemplateMarkdown; +export default TemplateMarkdown; \ No newline at end of file diff --git a/src/editors/editorsContainer/TemplateModel.tsx b/src/editors/editorsContainer/TemplateModel.tsx index f4a83dff..45186a2c 100644 --- a/src/editors/editorsContainer/TemplateModel.tsx +++ b/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 (
-
+

Concerto Model

- - Defines the data model for the template and its logic. - +
+ + +
- + + Defines the data model for the template and its logic. + +
); } -export default TemplateModel; \ No newline at end of file +export default TemplateModel; \ No newline at end of file From 289429e8e55ef1ac0fcdf3adc9463eca837a0552 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Thu, 13 Mar 2025 17:02:32 +0530 Subject: [PATCH 06/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/editors/editorsContainer/AgreementData.tsx | 4 ++-- src/editors/editorsContainer/TemplateMarkdown.tsx | 4 ++-- src/editors/editorsContainer/TemplateModel.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/editors/editorsContainer/AgreementData.tsx b/src/editors/editorsContainer/AgreementData.tsx index e6ee9b0d..c6f79fa4 100644 --- a/src/editors/editorsContainer/AgreementData.tsx +++ b/src/editors/editorsContainer/AgreementData.tsx @@ -29,8 +29,8 @@ function AgreementData() {

Data

- - + +

diff --git a/src/editors/editorsContainer/TemplateMarkdown.tsx b/src/editors/editorsContainer/TemplateMarkdown.tsx index 1660b1ff..0316e09e 100644 --- a/src/editors/editorsContainer/TemplateMarkdown.tsx +++ b/src/editors/editorsContainer/TemplateMarkdown.tsx @@ -30,8 +30,8 @@ function TemplateMarkdown() {

TemplateMark

- - + +

diff --git a/src/editors/editorsContainer/TemplateModel.tsx b/src/editors/editorsContainer/TemplateModel.tsx index 45186a2c..81985481 100644 --- a/src/editors/editorsContainer/TemplateModel.tsx +++ b/src/editors/editorsContainer/TemplateModel.tsx @@ -29,8 +29,8 @@ function TemplateModel() {

Concerto Model

- - + +
From f3a4bec7fad156a8aa2f92b8e3436a6e124dcb5a Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sat, 15 Mar 2025 18:54:55 +0530 Subject: [PATCH 07/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/AgreementHtml.tsx | 46 ++++--------------- src/components/useUndoRedo.ts | 18 ++++---- .../editorsContainer/AgreementData.tsx | 7 ++- .../editorsContainer/TemplateMarkdown.tsx | 9 ++-- .../editorsContainer/TemplateModel.tsx | 9 ++-- 5 files changed, 34 insertions(+), 55 deletions(-) diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx index f52a5e80..8bd2dae5 100644 --- a/src/AgreementHtml.tsx +++ b/src/AgreementHtml.tsx @@ -1,19 +1,15 @@ + import { LoadingOutlined } from "@ant-design/icons"; import { Spin } from "antd"; import useAppStore from "./store/store"; import FullScreenModal from "./components/FullScreenModal"; -function AgreementHtml({ - loading, - isModal, -}: { - loading: boolean; - isModal?: boolean; -}) { +function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean }) { const agreementHtml = useAppStore((state) => state.agreementHtml); const backgroundColor = useAppStore((state) => state.backgroundColor); const textColor = useAppStore((state) => state.textColor); + return (
-

+

Preview Output

{!isModal && }

- The result of merging the JSON data with the template. This is - AgreementMark converted to HTML. + The result of merging the JSON data with the template.

{loading ? ( -
- - } - /> +
+ } />
) : (
)}
diff --git a/src/components/useUndoRedo.ts b/src/components/useUndoRedo.ts index b2844041..e8a77f14 100644 --- a/src/components/useUndoRedo.ts +++ b/src/components/useUndoRedo.ts @@ -1,16 +1,14 @@ -import { useState } from "react"; - - -function useUndoRedo(initialValue: T) { +import { useState } from 'react'; +function useUndoRedo(initialValue: T, onChange?: (value: T) => void) { const [past, setPast] = useState([]); const [present, setPresent] = useState(initialValue); const [future, setFuture] = useState([]); - // Function to update the present state and track past states - const set = (newValue: T) => { + const setValue = (newValue: T) => { setPast((prevPast) => [...prevPast, present]); setPresent(newValue); - setFuture([]); // Clear future when new change is made + setFuture([]); + if (onChange) onChange(newValue); // Ensure preview updates }; const undo = () => { @@ -19,6 +17,7 @@ function useUndoRedo(initialValue: T) { setPast((prevPast) => prevPast.slice(0, -1)); setFuture((prevFuture) => [present, ...prevFuture]); setPresent(previous); + if (onChange) onChange(previous); }; const redo = () => { @@ -27,9 +26,10 @@ function useUndoRedo(initialValue: T) { setFuture((prevFuture) => prevFuture.slice(1)); setPast((prevPast) => [...prevPast, present]); setPresent(next); + if (onChange) onChange(next); }; - return { value: present, set, undo, redo }; + return { value: present, setValue, undo, redo }; } -export default useUndoRedo; \ No newline at end of file +export default useUndoRedo; diff --git a/src/editors/editorsContainer/AgreementData.tsx b/src/editors/editorsContainer/AgreementData.tsx index c6f79fa4..27af6ef5 100644 --- a/src/editors/editorsContainer/AgreementData.tsx +++ b/src/editors/editorsContainer/AgreementData.tsx @@ -8,7 +8,10 @@ import { FaUndo, FaRedo } from "react-icons/fa"; function AgreementData() { const textColor = useAppStore((state) => state.textColor); const setData = useAppStore((state) => state.setData); - const { value, set, undo, redo } = useUndoRedo(useAppStore((state) => state.editorAgreementData)); + const { value, setValue, undo, redo } = useUndoRedo( + useAppStore((state) => state.editorAgreementData), + setData // Pass setData to update the preview when undo/redo happens + ); const debouncedSetData = useCallback( debounce((value: string) => { @@ -19,7 +22,7 @@ function AgreementData() { const handleChange = (value: string | undefined) => { if (value !== undefined) { - set(value); + setValue(value); debouncedSetData(value); } }; diff --git a/src/editors/editorsContainer/TemplateMarkdown.tsx b/src/editors/editorsContainer/TemplateMarkdown.tsx index 0316e09e..230cfdf1 100644 --- a/src/editors/editorsContainer/TemplateMarkdown.tsx +++ b/src/editors/editorsContainer/TemplateMarkdown.tsx @@ -9,8 +9,11 @@ function TemplateMarkdown() { 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 { value, setValue, undo, redo } = useUndoRedo( + useAppStore((state) => state.editorValue), + setTemplateMarkdown // Ensures preview updates when undo/redo happens + ); + const debouncedSetTemplateMarkdown = useCallback( debounce((value: string) => { void setTemplateMarkdown(value); @@ -20,7 +23,7 @@ function TemplateMarkdown() { const handleChange = (value: string | undefined) => { if (value !== undefined) { - set(value); + setValue(value); debouncedSetTemplateMarkdown(value); } }; diff --git a/src/editors/editorsContainer/TemplateModel.tsx b/src/editors/editorsContainer/TemplateModel.tsx index 81985481..8c1808c8 100644 --- a/src/editors/editorsContainer/TemplateModel.tsx +++ b/src/editors/editorsContainer/TemplateModel.tsx @@ -8,8 +8,11 @@ import { FaUndo, FaRedo } from "react-icons/fa"; function TemplateModel() { const textColor = useAppStore((state) => state.textColor); const setModelCto = useAppStore((state) => state.setModelCto); - const { value, set, undo, redo } = useUndoRedo(useAppStore((state) => state.editorModelCto)); - + const { value, setValue, undo, redo } = useUndoRedo( + useAppStore((state) => state.editorModelCto), + setModelCto // Ensures errors and preview update when undo/redo happens + ); + const debouncedSetModelCto = useCallback( debounce((value: string) => { void setModelCto(value); @@ -19,7 +22,7 @@ function TemplateModel() { const handleChange = (value: string | undefined) => { if (value !== undefined) { - set(value); + setValue(value); debouncedSetModelCto(value); } }; From e26ba4878d35bbd43d5172de827202d36a72aa16 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sat, 15 Mar 2025 20:40:27 +0530 Subject: [PATCH 08/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/AgreementHtml.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx index 8bd2dae5..833a79a5 100644 --- a/src/AgreementHtml.tsx +++ b/src/AgreementHtml.tsx @@ -37,7 +37,8 @@ function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean } {!isModal && }

- The result of merging the JSON data with the template. + The result of merging the JSON data with the template. This is + AgreementMark converted to HTML.

{loading ? (
From 2fafb57fef7a20f65b16a3e0f11c84e78c80f467 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sat, 15 Mar 2025 18:54:55 +0530 Subject: [PATCH 09/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/AgreementHtml.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx index 833a79a5..8bd2dae5 100644 --- a/src/AgreementHtml.tsx +++ b/src/AgreementHtml.tsx @@ -37,8 +37,7 @@ function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean } {!isModal && }

- The result of merging the JSON data with the template. This is - AgreementMark converted to HTML. + The result of merging the JSON data with the template.

{loading ? (
From 592605374524a9855410a11958723b2b8fc96457 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Tue, 18 Mar 2025 14:18:05 +0530 Subject: [PATCH 10/10] feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja --- src/AgreementHtml.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx index 8bd2dae5..4e9d2c05 100644 --- a/src/AgreementHtml.tsx +++ b/src/AgreementHtml.tsx @@ -9,7 +9,6 @@ function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean } const backgroundColor = useAppStore((state) => state.backgroundColor); const textColor = useAppStore((state) => state.textColor); - return (