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; }