diff --git a/src/common/RichEditor.tsx b/src/common/RichEditor.tsx
index 14256dc15..dfd7c1ed0 100644
--- a/src/common/RichEditor.tsx
+++ b/src/common/RichEditor.tsx
@@ -33,7 +33,7 @@ export const handleFormatting = (text: string, formatter: string) => {
}
};
-export const setInitialState = (editor: any, initialValue: any) => {
+export const setDefaultValue = (editor: any, initialValue: any) => {
editor.update(() => {
const root = $getRoot();
root.clear();
diff --git a/src/components/UI/Form/EmojiInput/Editor.test.tsx b/src/components/UI/Form/EmojiInput/Editor.test.tsx
index 3f2f58504..727f0befa 100644
--- a/src/components/UI/Form/EmojiInput/Editor.test.tsx
+++ b/src/components/UI/Form/EmojiInput/Editor.test.tsx
@@ -10,17 +10,16 @@ const mockIntersectionObserver = class {
disconnect() {}
};
-const lexicalChange = vi.fn;
+const handleChange = vi.fn;
(window as any).IntersectionObserver = mockIntersectionObserver;
const wrapper = (
{} }}
placeholder={''}
- onChange={lexicalChange}
+ onChange={handleChange}
/>
);
diff --git a/src/components/UI/Form/EmojiInput/Editor.tsx b/src/components/UI/Form/EmojiInput/Editor.tsx
index a2f20dbcd..e2f53f543 100644
--- a/src/components/UI/Form/EmojiInput/Editor.tsx
+++ b/src/components/UI/Form/EmojiInput/Editor.tsx
@@ -19,28 +19,22 @@ import {
BeautifulMentionsMenuProps,
BeautifulMentionsMenuItemProps,
} from 'lexical-beautiful-mentions';
-import { handleFormatterEvents, handleFormatting, setInitialState } from 'common/RichEditor';
+import { handleFormatterEvents, handleFormatting, setDefaultValue } from 'common/RichEditor';
export interface EditorProps {
- field: { name: string; onChange?: any; value: any; onBlur: any };
+ field: { name: string; onChange?: any; value: any; onBlur?: any };
disabled?: any;
- form?: { touched: any; errors: any };
+ form?: { touched: any; errors: any; setFieldValue: any; values: any };
placeholder: string;
helperText?: string;
picker?: any;
inputProp?: any;
onChange?: any;
- isEditing: boolean;
- editorState?: any;
+ defaultValue?: any;
}
-export const Editor = ({
- disabled = false,
- isEditing = false,
- editorState,
- ...props
-}: EditorProps) => {
- const { field, form, picker, placeholder, onChange } = props;
+export const Editor = ({ disabled = false, ...props }: EditorProps) => {
+ const { field, form, picker, placeholder, onChange, defaultValue } = props;
const mentions = props.inputProp?.suggestions || [];
const suggestions = {
'@': mentions.map((mention: string) => mention?.split('@')[1]),
@@ -48,10 +42,10 @@ export const Editor = ({
const [editor] = useLexicalComposerContext();
useEffect(() => {
- if ((field.value || field.value === '') && !editorState && isEditing) {
- setInitialState(editor, field.value);
+ if (defaultValue) {
+ setDefaultValue(editor, defaultValue);
}
- }, [field.value]);
+ }, [defaultValue]);
const Placeholder = () => {
return
{placeholder}
;
@@ -88,6 +82,7 @@ export const Editor = ({
const root = $getRoot();
if (!disabled) {
onChange(root.getTextContent());
+ form?.setFieldValue(field?.name, root.getTextContent());
}
});
};
diff --git a/src/components/UI/Form/EmojiInput/EmojiInput.tsx b/src/components/UI/Form/EmojiInput/EmojiInput.tsx
index a2ce660f6..e749dd541 100644
--- a/src/components/UI/Form/EmojiInput/EmojiInput.tsx
+++ b/src/components/UI/Form/EmojiInput/EmojiInput.tsx
@@ -17,9 +17,7 @@ export interface EmojiInputProps {
rows: number;
handleChange?: any;
handleBlur?: any;
- getEditorValue?: any;
inputProp?: any;
- isEditing?: boolean;
translation?: string;
editorState?: any;
}
@@ -33,26 +31,13 @@ interface EmojiPickerProps {
export const EmojiInput = ({
field: { value, name, onBlur },
handleChange,
- getEditorValue,
handleBlur,
- isEditing = false,
translation,
editorState,
...props
}: EmojiInputProps) => {
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
- const lexicalChange = (editorState: any) => {
- if (handleChange) {
- handleChange(editorState);
- }
- if (getEditorValue) {
- getEditorValue(editorState);
- }
-
- props.form.setFieldValue(name, editorState);
- };
-
const handleClickAway = () => {
setShowEmojiPicker(false);
};
@@ -67,14 +52,7 @@ export const EmojiInput = ({
const input = (
-
+
);
diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx
index 81b66c183..35c6b845c 100644
--- a/src/containers/InteractiveMessage/InteractiveMessage.tsx
+++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx
@@ -175,7 +175,7 @@ export const InteractiveMessage = () => {
setTitle(data.title);
setFooter(data.footer || '');
setBody(data.body || '');
- setEditorState(null);
+ setEditorState(data.body || '');
setTemplateType(typeValue);
setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue));
setTimeout(() => setTemplateButtons(data.templateButtons), 100);
@@ -245,7 +245,7 @@ export const InteractiveMessage = () => {
setTitle(titleText);
setFooter(data.footer || '');
setBody(data.body || '');
- setEditorState(null);
+ setEditorState(data.body || '');
setTemplateType(typeValue);
setTemplateTypeField(templateTypeOptions.find((option) => option.id === typeValue));
setTimeout(() => setTemplateButtons(data.templateButtons), 100);
@@ -546,15 +546,13 @@ export const InteractiveMessage = () => {
convertToWhatsApp: true,
textArea: true,
helperText: t('You can also use variables in message enter @ to see the available list'),
- getEditorValue: (value: any) => {
+ handleChange: (value: any) => {
setBody(value);
- setEditorState(value);
},
inputProp: {
suggestions: contactVariables,
},
- isEditing: isEditing,
- editorState: editorState,
+ defaultValue: isEditing && editorState,
},
{
skip: templateType !== QUICK_REPLY,
diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx
index 710bfe157..82cdffa90 100644
--- a/src/containers/Template/Form/HSM/HSM.tsx
+++ b/src/containers/Template/Form/HSM/HSM.tsx
@@ -91,9 +91,9 @@ export const HSM = () => {
};
const isCopyState = location.state === 'copy';
- let disabled = false;
+ let isEditing = false;
if (params.id && !isCopyState) {
- disabled = true;
+ isEditing = true;
}
const formFields = [
@@ -104,16 +104,14 @@ export const HSM = () => {
rows: 5,
convertToWhatsApp: true,
textArea: true,
- disabled,
+ disabled: isEditing,
helperText:
'Replace variables eg. {{1}} with actual values enclosed in [ ] eg. [12345] to show a complete message with meaningful word/statement/numbers/ special characters.',
- handleChange: getSimulatorMessage,
- getEditorValue: (value: any) => {
+ handleChange: (value: any) => {
setExample(value);
- setEditorState(value);
+ getSimulatorMessage(value);
},
- isEditing: disabled,
- editorState: editorState,
+ defaultValue: isEditing && editorState,
},
{
component: AutoComplete,
@@ -123,7 +121,7 @@ export const HSM = () => {
multiple: false,
label: `${t('Category')}*`,
placeholder: `${t('Category')}*`,
- disabled,
+ disabled: isEditing,
helperText: t('Select the most relevant category'),
onChange: (event: any) => {
setCategory(event);
@@ -134,7 +132,7 @@ export const HSM = () => {
name: 'shortcode',
placeholder: `${t('Element name')}*`,
label: `${t('Element name')}*`,
- disabled,
+ disabled: isEditing,
inputProp: {
onBlur: (event: any) => setShortcode(event.target.value),
},
@@ -155,6 +153,7 @@ export const HSM = () => {
setCategory={setCategory}
category={category}
onExampleChange={addButtonsToSampleMessage}
+ setExampleState={setEditorState}
/>
diff --git a/src/containers/Template/Form/Template.test.tsx b/src/containers/Template/Form/Template.test.tsx
index a7d511674..4379f49e1 100644
--- a/src/containers/Template/Form/Template.test.tsx
+++ b/src/containers/Template/Form/Template.test.tsx
@@ -74,6 +74,7 @@ const hsmProps = {
languageStyle: 'dropdown',
formField: templateFormHSMFormFields,
setCategory: vi.fn(),
+ setExampleState: vi.fn(),
};
const hsmTemplateEdit = (templateId: string) => (
diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
index 5a0e33e83..5ab701ac4 100644
--- a/src/containers/Template/Form/Template.tsx
+++ b/src/containers/Template/Form/Template.tsx
@@ -116,6 +116,7 @@ export interface TemplateProps {
category?: any;
onExampleChange?: any;
languageStyle?: string;
+ setExampleState?: any;
}
interface CallToActionTemplate {
@@ -142,6 +143,7 @@ const Template = ({
category,
onExampleChange = () => {},
languageStyle = 'dropdown',
+ setExampleState,
}: TemplateProps) => {
// "Audio" option is removed in case of HSM Template
const mediaTypes =
@@ -187,7 +189,7 @@ const Template = ({
}
// disable fields in edit mode for hsm template
- if (params.id && !isCopyState && defaultAttribute.isHsm) {
+ if (params.id && !isCopyState) {
isEditing = true;
}
@@ -259,7 +261,7 @@ const Template = ({
if (typeof bodyValue === 'string') {
setBody(bodyValue || '');
- setEditorState(null);
+ setEditorState(bodyValue || '');
}
if (exampleValue) {
@@ -277,10 +279,12 @@ const Template = ({
exampleBody = exampleValue;
}
+ if (setExampleState) {
+ setExampleState(exampleValue);
+ }
setExample(exampleValue);
onExampleChange(exampleBody);
}
-
if (hasButtons) {
setIsAddButtonChecked(hasButtons);
}
@@ -300,7 +304,7 @@ const Template = ({
const content = translationsCopy[currentLanguage];
setLabel(content.label);
setBody(content.body || '');
- setEditorState(null);
+ setEditorState(bodyValue || '');
}
setTranslations(translationsValue);
}
@@ -312,7 +316,7 @@ const Template = ({
if (shortcodeValue) {
setTimeout(() => setShortcode(shortcodeValue), 0);
}
- if (categoryValue) {
+ if (categoryValue && setCategory) {
setCategory({ label: categoryValue, id: categoryValue });
}
if (tagIdValue) {
@@ -335,7 +339,7 @@ const Template = ({
if (typeof bodyValue === 'string') {
setBody(bodyValue || '');
- setEditorState(null);
+ setEditorState(bodyValue || '');
}
if (typeValue && typeValue !== 'TEXT') {
@@ -594,7 +598,7 @@ const Template = ({
optionLabel: 'label',
multiple: false,
label: t('Attachment Type'),
- disabled: isEditing,
+ disabled: defaultAttribute.isHsm && isEditing,
helperText: warning,
onChange: (event: any) => {
const val = event;
@@ -610,7 +614,7 @@ const Template = ({
type: 'text',
label: t('Attachment URL'),
validate: () => isUrlValid,
- disabled: isEditing,
+ disabled: defaultAttribute.isHsm && isEditing,
helperText: t(
'Please provide a sample attachment for approval purpose. You may send a similar but different attachment when sending the HSM to users.'
),
@@ -663,7 +667,7 @@ const Template = ({
component: Input,
name: 'label',
label: t('Title'),
- disabled: isEditing,
+ disabled: defaultAttribute.isHsm && isEditing,
helperText: defaultAttribute.isHsm
? t('Define what use case does this template serve eg. OTP, optin, activity preference')
: null,
@@ -679,16 +683,14 @@ const Template = ({
rows: 5,
convertToWhatsApp: true,
textArea: true,
- disabled: isEditing,
+ disabled: defaultAttribute.isHsm && isEditing,
helperText: defaultAttribute.isHsm
? 'You can also use variable and interactive actions. Variable format: {{1}}, Button format: [Button text,Value] Value can be a URL or a phone number.'
: null,
- getEditorValue: (value: any) => {
+ handleChange: (value: any) => {
setBody(value);
- setEditorState(value);
},
- isEditing: isEditing,
- editorState: editorState,
+ defaultValue: isEditing && editorState,
},
];
@@ -870,7 +872,6 @@ const Template = ({
}
} else {
delete payloadCopy.example;
- delete payloadCopy.isActive;
delete payloadCopy.shortcode;
delete payloadCopy.category;
}