+
Data
@@ -37,11 +35,11 @@ function AgreementData() {
- 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 230cfdf1..ec4e0086 100644
--- a/src/editors/editorsContainer/TemplateMarkdown.tsx
+++ b/src/editors/editorsContainer/TemplateMarkdown.tsx
@@ -8,25 +8,23 @@ import { FaUndo, FaRedo } from "react-icons/fa";
function TemplateMarkdown() {
const textColor = useAppStore((state) => state.textColor);
const backgroundColor = useAppStore((state) => state.backgroundColor);
+ const templateMarkdown = useAppStore((state) => state.templateMarkdown);
const setTemplateMarkdown = useAppStore((state) => state.setTemplateMarkdown);
- const { value, setValue, undo, redo } = useUndoRedo(
- useAppStore((state) => state.editorValue),
- setTemplateMarkdown // Ensures preview updates when undo/redo happens
- );
+ const { value, setValue, undo, redo } = useUndoRedo(templateMarkdown, setTemplateMarkdown);
const debouncedSetTemplateMarkdown = useCallback(
debounce((value: string) => {
- void setTemplateMarkdown(value);
+ setTemplateMarkdown(value);
}, 500),
[setTemplateMarkdown]
);
- const handleChange = (value: string | undefined) => {
+ const handleChange = useCallback((value: string | undefined) => {
if (value !== undefined) {
setValue(value);
debouncedSetTemplateMarkdown(value);
}
- };
+ }, [setValue, debouncedSetTemplateMarkdown]);
return (
diff --git a/src/editors/editorsContainer/TemplateModel.tsx b/src/editors/editorsContainer/TemplateModel.tsx
index 8c1808c8..25be1bf2 100644
--- a/src/editors/editorsContainer/TemplateModel.tsx
+++ b/src/editors/editorsContainer/TemplateModel.tsx
@@ -7,15 +7,13 @@ import { FaUndo, FaRedo } from "react-icons/fa";
function TemplateModel() {
const textColor = useAppStore((state) => state.textColor);
+ const modelCto = useAppStore((state) => state.modelCto);
const setModelCto = useAppStore((state) => state.setModelCto);
- const { value, setValue, undo, redo } = useUndoRedo(
- useAppStore((state) => state.editorModelCto),
- setModelCto // Ensures errors and preview update when undo/redo happens
- );
+ const { value, setValue, undo, redo } = useUndoRedo(modelCto, setModelCto);
const debouncedSetModelCto = useCallback(
debounce((value: string) => {
- void setModelCto(value);
+ setModelCto(value);
}, 500),
[setModelCto]
);
@@ -44,4 +42,4 @@ function TemplateModel() {
);
}
-export default TemplateModel;
\ No newline at end of file
+export default TemplateModel;
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 09d32d8a..fce7fd32 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -12,11 +12,8 @@ import { compress, decompress } from "../utils/compression/compression";
interface AppState {
templateMarkdown: string;
- editorValue: string;
modelCto: string;
- editorModelCto: string;
data: string;
- editorAgreementData: string;
agreementHtml: string;
error: string | undefined;
samples: Array
;
@@ -24,11 +21,8 @@ interface AppState {
backgroundColor: string;
textColor: string;
setTemplateMarkdown: (template: string) => Promise;
- setEditorValue: (value: string) => void;
setModelCto: (model: string) => Promise;
- setEditorModelCto: (value: string) => void;
setData: (data: string) => Promise;
- setEditorAgreementData: (value: string) => void;
rebuild: () => Promise;
init: () => Promise;
loadSample: (name: string) => Promise;
@@ -74,22 +68,10 @@ const useAppStore = create()(
devtools((set, get) => ({
backgroundColor: '#ffffff',
textColor: '#121212',
- toggleDarkMode: () => {
- set((state) => {
- const isDark = state.backgroundColor === '#121212';
- return {
- backgroundColor: isDark ? '#ffffff' : '#121212',
- textColor: isDark ? '#121212' : '#ffffff',
- };
- });
- },
sampleName: playground.NAME,
templateMarkdown: playground.TEMPLATE,
- editorValue: playground.TEMPLATE,
modelCto: playground.MODEL,
- editorModelCto: playground.MODEL,
data: JSON.stringify(playground.DATA, null, 2),
- editorAgreementData: JSON.stringify(playground.DATA, null, 2),
agreementHtml: "",
error: undefined,
samples: SAMPLES,
@@ -110,11 +92,8 @@ const useAppStore = create()(
agreementHtml: undefined,
error: undefined,
templateMarkdown: sample.TEMPLATE,
- editorValue: sample.TEMPLATE,
modelCto: sample.MODEL,
- editorModelCto: sample.MODEL,
data: JSON.stringify(sample.DATA, null, 2),
- editorAgreementData: JSON.stringify(sample.DATA, null, 2),
}));
await get().rebuild();
}
@@ -141,9 +120,6 @@ const useAppStore = create()(
set(() => ({ error: formatError(error) }));
}
},
- setEditorValue: (value: string) => {
- set(() => ({ editorValue: value }));
- },
setModelCto: async (model: string) => {
const { templateMarkdown, data } = get();
try {
@@ -157,9 +133,6 @@ const useAppStore = create()(
set(() => ({ error: formatError(error) }));
}
},
- setEditorModelCto: (value: string) => {
- set(() => ({ editorModelCto: value }));
- },
setData: async (data: string) => {
try {
const result = await rebuildDeBounce(
@@ -167,45 +140,51 @@ const useAppStore = create()(
get().modelCto,
data
);
- set(() => ({ agreementHtml: result, error: undefined }));
+ set(() => ({ agreementHtml: result, error: undefined, data }));
} catch (error: any) {
set(() => ({ error: formatError(error) }));
}
- set(() => ({ data }));
- },
- setEditorAgreementData: (value: string) => {
- set(() => ({ editorAgreementData: value }));
},
generateShareableLink: () => {
const state = get();
- const compressedData = compress({
+ const dataToShare = {
templateMarkdown: state.templateMarkdown,
modelCto: state.modelCto,
data: state.data,
agreementHtml: state.agreementHtml,
- });
- return `${window.location.origin}/v1?data=${compressedData}`;
+ };
+ const compressedData = compress(dataToShare);
+ return `${window.location.origin}?data=${compressedData}`;
},
loadFromLink: async (compressedData: string) => {
try {
- const { templateMarkdown, modelCto, data, agreementHtml } =
- decompress(compressedData);
+ const { templateMarkdown, modelCto, data, agreementHtml } = decompress(compressedData);
+ if (!templateMarkdown || !modelCto || !data) {
+ throw new Error("Invalid share link data");
+ }
set(() => ({
templateMarkdown,
- editorValue: templateMarkdown,
modelCto,
- editorModelCto: modelCto,
data,
- editorAgreementData: data,
agreementHtml,
error: undefined,
}));
+ await get().rebuild();
} catch (error) {
set(() => ({
- error: "Failed to load data from the link",
+ error: "Failed to load shared content: " + (error instanceof Error ? error.message : "Unknown error"),
}));
}
},
+ toggleDarkMode: () => {
+ set((state) => {
+ const isDark = state.backgroundColor === '#121212';
+ return {
+ backgroundColor: isDark ? '#ffffff' : '#121212',
+ textColor: isDark ? '#121212' : '#ffffff',
+ };
+ });
+ },
}))
)
);
@@ -214,13 +193,11 @@ export default useAppStore;
function formatError(error: any): string {
console.error(error);
- if (typeof error === "string") {
- return error;
- } else if (Array.isArray(error)) {
- return error.map((e) => formatError(e)).join("\n");
- } else if (error.code) {
+ if (typeof error === "string") return error;
+ if (Array.isArray(error)) return error.map((e) => formatError(e)).join("\n");
+ if (error.code) {
const sub = error.errors ? formatError(error.errors) : "";
- const msg = error.renderedMessage ? error.renderedMessage : "";
+ const msg = error.renderedMessage || "";
return `Error: ${error.code} ${sub} ${msg}`;
}
return error.toString();