added support for rich text editor

src/common/RichEditor.tsx

@@ -2,7 +2,7 @@ import CallIcon from '@mui/icons-material/Call';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Interweave } from 'interweave';
 import { UrlMatcher } from 'interweave-autolink';
-import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
+import { $createParagraphNode, $createTextNode, $getRoot, $getSelection, $isTextNode } from 'lexical';
 
 // Indicates how to replace different parts of the text from WhatsApp to HTML.
 const regexForLink = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/gi;
@@ -162,3 +162,30 @@ export const WhatsAppTemplateButton = (text: string) => {
 
   return result;
 };
+
+export const getFormattedText = (editor: any) => {
+  let extractedText = '';
+
+  editor.update(() => {
+    const rootNode = $getRoot();
+    const selection = $getSelection();
+
+    if (!rootNode) return;
+
+    rootNode.getChildren().forEach((node) => {
+      if ($isTextNode(node)) {
+        let text = node.getTextContent();
+        const format = node.getFormat();
+
+        // Check applied formatting
+        if (format & 1) text = `**${text}**`; // Bold
+        if (format & 2) text = `*${text}*`; // Italic
+        if (format & 16) text = `~~${text}~~`; // Strikethrough
+
+        extractedText += text + ' ';
+      }
+    });
+  });
+
+  return extractedText.trim();
+};

src/components/UI/Form/EmojiInput/Editor.tsx

@@ -26,6 +26,7 @@ import {
 import { handleFormatterEvents, handleFormatting, setDefaultValue } from 'common/RichEditor';
 import { FormatBold, FormatItalic, StrikethroughS } from '@mui/icons-material';
 import { mergeRegister } from '@lexical/utils';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 
 export interface EditorProps {
   field: { name: string; onChange?: any; value: any; onBlur?: any };
@@ -75,32 +76,33 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
           return false;
         },
         COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        FORMAT_TEXT_COMMAND,
-        (event: any) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            const text = handleFormatting(selection?.getTextContent(), event);
-
-            if (!selection?.getTextContent()) {
-              const newNode = $createTextNode(text);
-              selection?.insertNodes([newNode]);
-              const newSelection = $createRangeSelection();
-              newSelection.anchor.set(newNode.getKey(), 1, 'text'); // Set the cursor between the backticks
-              newSelection.focus.set(newNode.getKey(), 1, 'text');
-              $setSelection(newSelection);
-            }
-            if (selection?.getTextContent() && event) {
-              const newNode = $createTextNode(text);
-              selection?.insertNodes([newNode]);
-              editor.focus();
-            }
-          });
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
       )
+      // editor.registerCommand(
+      //   FORMAT_TEXT_COMMAND,
+      //   (event: any) => {
+      //     editor.update(() => {
+      //       const selection = $getSelection();
+      //       const text = handleFormatting(selection?.getTextContent(), event);
+
+      //       if (!selection?.getTextContent()) {
+      //         const newNode = $createTextNode(text);
+      //         selection?.insertNodes([newNode]);
+
+      //         const newSelection = $createRangeSelection();
+      //         newSelection.anchor.set(newNode.getKey(), 1, 'text');
+      //         newSelection.focus.set(newNode.getKey(), 1, 'text');
+      //         $setSelection(newSelection);
+      //       }
+      //       if (selection?.getTextContent() && event) {
+      //         const newNode = $createTextNode(text);
+      //         selection?.insertNodes([newNode]);
+      //         editor.focus();
+      //       }
+      //     });
+      //     return false;
+      //   },
+      //   COMMAND_PRIORITY_LOW
+      // )
     );
   }, [editor]);
 
@@ -119,6 +121,7 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
       }
     });
   };
+  // console.log(editor.ge);
 
   const [activeFormats, setActiveFormats] = useState<{ bold: boolean; italic: boolean; strikethrough: boolean }>({
     bold: false,
@@ -217,7 +220,7 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
           </span>
         </div>
         <div className={disabled ? styles?.disabled : styles.Editor} data-testid="resizer">
-          <PlainTextPlugin
+          <RichTextPlugin
             placeholder={<Placeholder />}
             contentEditable={
               <div className={styles.editorScroller}>

src/components/UI/Form/EmojiInput/EmojiInput.tsx

@@ -5,7 +5,8 @@ import { EmojiPicker } from 'components/UI/EmojiPicker/EmojiPicker';
 import { Editor } from './Editor';
 import Styles from './EmojiInput.module.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $createTextNode, $getSelection, $isRangeSelection } from 'lexical';
+import { $createTextNode, $getRoot, $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode } from 'lexical';
+import { getFormattedText } from 'common/RichEditor';
 
 export interface EmojiInputProps {
   field: { name: string; onChange?: any; value: any; onBlur?: any };
@@ -24,6 +25,7 @@ interface EmojiPickerProps {
   handleClickAway: any;
   showEmojiPicker: any;
   setShowEmojiPicker: any;
+  editor?: any;
 }
 
 export const EmojiInput = ({
@@ -35,6 +37,7 @@ export const EmojiInput = ({
   ...props
 }: EmojiInputProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [editor] = useLexicalComposerContext();
 
   const handleClickAway = () => {
     setShowEmojiPicker(false);
@@ -45,11 +48,49 @@ export const EmojiInput = ({
       handleClickAway={handleClickAway}
       setShowEmojiPicker={setShowEmojiPicker}
       showEmojiPicker={showEmojiPicker}
+      editor={editor}
     />
   );
 
   const input = (
-    <Editor field={{ name, value, onBlur }} picker={picker} onChange={handleChange} form={form} {...props} />
+    <Editor
+      field={{ name, value, onBlur }}
+      picker={picker}
+      onChange={(value: any) => {
+        let formattedText = '';
+
+        editor.update(() => {
+          const rootNode = $getRoot();
+          if (!rootNode) return;
+
+          rootNode.getChildren().forEach((node) => {
+            if ($isParagraphNode(node)) {
+              let paragraphText = '';
+
+              node.getChildren().forEach((textNode) => {
+                if ($isTextNode(textNode)) {
+                  let text = textNode.getTextContent();
+                  const format = textNode.getFormat();
+                  console.log(format);
+
+                  // ✅ Apply formatting styles
+                  if (format & 1) text = `**${text}**`; // Bold
+                  if (format & 2) text = `*${text}*`; // Italic
+                  if (format & 16) text = `~~${text}~~`; // Strikethrough
+
+                  paragraphText += text;
+                }
+              });
+
+              formattedText += paragraphText + '\n'; // Preserve paragraph breaks
+            }
+          });
+        });
+        handleChange(value);
+      }}
+      form={form}
+      {...props}
+    />
   );
 
   return (
@@ -60,9 +101,7 @@ export const EmojiInput = ({
   );
 };
 
-const EmojiPickerComponent = ({ showEmojiPicker, setShowEmojiPicker, handleClickAway }: EmojiPickerProps) => {
-  const [editor] = useLexicalComposerContext();
-
+const EmojiPickerComponent = ({ showEmojiPicker, setShowEmojiPicker, handleClickAway, editor }: EmojiPickerProps) => {
   const emojiStyles = {
     position: 'absolute',
     bottom: '60px',

src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx

@@ -56,7 +56,7 @@ export const WhatsAppEditor = ({ setEditorState, sendMessage, readOnly = false }
         editor.update(() => {
           const selection = $getSelection();
           if (selection?.getTextContent() && formatter) {
-            const text = handleFormatting(formatter, selection?.getTextContent());
+            const text = handleFormatting(selection?.getTextContent(), formatter);
             const newNode = $createTextNode(text);
             selection?.insertNodes([newNode]);
           }

src/containers/HSM/HSM.tsx

@@ -506,6 +506,7 @@ export const HSM = () => {
       helperText:
         'You can provide variable values in your HSM templates to personalize the message. To add: click on the variable button and provide an example value for the variable in the field provided below',
       handleChange: (value: any) => {
+        // console.log('value', value);
         setBody(value);
       },
       defaultValue: isEditing && editorState,