diff --git a/src/components/UI/Form/EmojiInput/EmojiInput.tsx b/src/components/UI/Form/EmojiInput/EmojiInput.tsx index 372c3a03d..55466c701 100644 --- a/src/components/UI/Form/EmojiInput/EmojiInput.tsx +++ b/src/components/UI/Form/EmojiInput/EmojiInput.tsx @@ -18,6 +18,7 @@ export interface EmojiInputProps { placeholder: string; rows: number; handleChange?: any; + handleBlur?: any; inputProp?: any; } @@ -77,6 +78,7 @@ const DraftField = (inputProps: any) => { export const EmojiInput: React.FC = ({ field: { onChange, ...rest }, handleChange, + handleBlur, ...props }: EmojiInputProps) => { const [showEmojiPicker, setShowEmojiPicker] = useState(false); @@ -114,16 +116,6 @@ export const EmojiInput: React.FC = ({ props.form.setFieldValue(rest.name, editorState); }; - const handleBlur = (event: any) => { - props.form.handleBlur(event); - /** - * To get callback on parent since we don't have callback on form - */ - if (props.inputProp?.onBlur) { - props.inputProp.onBlur(props.form.values[rest.name]); - } - }; - const mentions = props.inputProp?.suggestions || []; const [open, setOpen] = useState(false); diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index f959f5bf9..ae3dc2c34 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -470,10 +470,11 @@ export const InteractiveMessage: React.SFC = ({ match }) => { convertToWhatsApp: true, textArea: true, helperText: 'You can also use variables in message enter @ to see the available list', + handleBlur: (event: any) => { + const { textContent } = event.target; + setBody(EditorState.createWithContent(WhatsAppToDraftEditor(textContent))); + }, inputProp: { - onBlur: (editorState: any) => { - setBody(editorState); - }, suggestions: contactVariables, }, }, diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/src/containers/Template/Form/HSM/HSM.tsx index ddf13e62f..04f51ad63 100644 --- a/src/containers/Template/Form/HSM/HSM.tsx +++ b/src/containers/Template/Form/HSM/HSM.tsx @@ -9,6 +9,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { Input } from 'components/UI/Form/Input/Input'; import { EmojiInput } from 'components/UI/Form/EmojiInput/EmojiInput'; import { Simulator } from 'components/simulator/Simulator'; +import { WhatsAppToDraftEditor } from 'common/RichEditor'; import Template from '../Template'; import styles from './HSM.module.css'; @@ -126,10 +127,9 @@ export const HSM: React.SFC = ({ match }) => { 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, - inputProp: { - onBlur: (editorState: any) => { - setExample(editorState); - }, + handleBlur: (event: any) => { + const { textContent } = event.target; + setExample(EditorState.createWithContent(WhatsAppToDraftEditor(textContent))); }, }, { diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 77aedb710..8624d8c6c 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -521,10 +521,9 @@ const Template: React.SFC = (props) => { 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, - inputProp: { - onBlur: (editorState: any) => { - setBody(editorState); - }, + handleBlur: (event: any) => { + const { textContent } = event.target; + setBody(EditorState.createWithContent(WhatsAppToDraftEditor(textContent))); }, }, ];