l-min-components 1.0.1052 → 1.0.1059

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1052",
+  "version": "1.0.1059",
   "type": "module",
   "files": [
     "src/assets",
@@ -20,7 +20,10 @@
     "classnames": "^2.3.2",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
-    "emoji-picker-react": "^4.4.10",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
+    "emoji-picker-react": "^4.12.0",
+    "html-to-draftjs": "^1.5.0",
     "i": "^0.3.7",
     "iso-639-1": "^3.1.2",
     "js-cookie": "^3.0.5",
@@ -40,6 +43,7 @@
     "react-datepicker": "^4.10.0",
     "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",
+    "react-draft-wysiwyg": "^1.15.0",
     "react-flags-select": "^2.2.3",
     "react-google-charts": "^4.0.1",
     "react-icons": "^4.8.0",

package/src/components/AppMainLayout/index.jsx

@@ -269,7 +269,7 @@ const AppMainLayout = () => {
                         <SideMenu
                           user={user}
                           routes={sideMenuOptions}
-                          affiliatesActive={affiliatesActive}
+                          affiliatesActive={affiliateAccount}
                           userType={generalData?.selectedAccount?.type?.toLowerCase()}
                           isOpen={isOpen}
                           setIsOpen={setIsOpen}

package/src/components/TextEditor2/colorModal.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CirclePicker } from "react-color";
+import styled from "styled-components";
+
+const ColorModal = ({ onChange, color }) => {
+  const editorColors = [
+    "#000000", // Black
+    "#FFFFFF", // White
+    "#F44336", // Red
+    "#E91E63", // Pink
+    "#9C27B0", // Purple
+    "#3F51B5", // Indigo
+    "#2196F3", // Blue
+    "#03A9F4", // Light Blue
+    "#00BCD4", // Cyan
+    "#009688", // Teal
+    "#4CAF50", // Green
+    "#8BC34A", // Light Green
+    "#CDDC39", // Lime
+    "#FFEB3B", // Yellow
+    "#FFC107", // Amber
+    "#FF9800", // Orange
+    "#FF5722", // Deep Orange
+    "#795548", // Brown
+    "#808080", // Grey
+    "#FFB6C1", // Light Pink
+    "#ADD8E6", // Light Blue
+    "#90EE90", // Light Green
+    "#FFD700", // Gold
+    "#FF4500", // Orange Red
+  ];
+  return (
+    <Container>
+      <CirclePicker colors={editorColors} onChange={onChange} color={color} />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 3;
+  border-radius: 12px;
+  border: 1px solid var(--Neutral-20, #dfe5e5);
+  background: #fff;
+  padding: 16px;
+  width: fit-content;
+  bottom: 40px;
+  left: 0;
+  span {
+    span {
+      div {
+        border: 2px solid var(--Neutral-20, #dfe5e5);
+      }
+    }
+  }
+`;
+
+export default ColorModal;

package/src/components/TextEditor2/emojiModal.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import EmojiPicker from "emoji-picker-react";
+import styled from "styled-components";
+
+const EmojiModal = ({ onChange }) => {
+  return (
+    <Container>
+      <EmojiPicker
+        theme="light"
+        searchDisabled
+        skinTonesDisabled
+        emojiStyle="apple"
+        width={270}
+        height={300}
+        onEmojiClick={onChange}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  background-color: #fff;
+  width: fit-content;
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  bottom: 40px;
+  .epr-main {
+    background-color: #fff;
+  }
+
+  .epr-header,
+  .epr-emoji-category-label {
+    display: none;
+  }
+`;
+
+export default EmojiModal;

package/src/components/TextEditor2/icon/alignCenterIcon.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const AlignCenterIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.5 4.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.75781 9.5H17.2378"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 14.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.75781 19.5H17.2378"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AlignCenterIcon;

package/src/components/TextEditor2/icon/alignLeftIcon.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const AlignLeftIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M3.5 4.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 9.5H12.97"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 14.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 19.5H12.97"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AlignLeftIcon;

package/src/components/TextEditor2/icon/alignRightIcon.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const AlignRightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M3.5 4.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0312 9.5H21.5013"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 14.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0312 19.5H21.5013"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AlignRightIcon;

package/src/components/TextEditor2/icon/arrowDown.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const ArrowDown = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="15"
+      height="14"
+      viewBox="0 0 15 14"
+      fill="none"
+    >
+      <path
+        d="M12.1228 5.22266L8.31948 9.02599C7.87031 9.47516 7.13531 9.47516 6.68615 9.02599L2.88281 5.22266"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDown;

package/src/components/TextEditor2/icon/boldIcon.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const BoldIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <path
+        d="M5.38281 4.5C5.38281 3.4 6.28281 2.5 7.38281 2.5H12.5028C15.1228 2.5 17.2528 4.63 17.2528 7.25C17.2528 9.87 15.1228 12 12.5028 12H5.38281V4.5Z"
+        stroke="#313333"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.38281 12H14.8828C17.5028 12 19.6328 14.13 19.6328 16.75C19.6328 19.37 17.5028 21.5 14.8828 21.5H7.38281C6.28281 21.5 5.38281 20.6 5.38281 19.5V12V12Z"
+        stroke="#313333"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BoldIcon;

package/src/components/TextEditor2/icon/emojiIcon.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const EmojiIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.5668 4.95008C23.5368 8.92008 23.4668 15.4 19.3668 19.29C15.5768 22.88 9.42679 22.88 5.62679 19.29C1.51679 15.4 1.44678 8.92008 5.42678 4.95008C9.32678 1.04008 15.6668 1.04008 19.5668 4.95008Z"
+        stroke="#ADB3B3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.334 16.0703C14.214 18.0703 10.7741 18.0703 8.66406 16.0703"
+        stroke="#ADB3B3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.16638 8.98633H9.17536"
+        stroke="#ADB3B3"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.3383 8.98633H16.3472"
+        stroke="#ADB3B3"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EmojiIcon;

package/src/components/TextEditor2/icon/italicIcon.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const ItalicIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.1172 3H19.3672"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.61719 21H14.8672"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.75 3L10.25 21"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ItalicIcon;

package/src/components/TextEditor2/icon/listIcon.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+const ListIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 19.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5 12.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5 5.5H21.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 5.5L4.5 6.5L7.5 3.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 12.5L4.5 13.5L7.5 10.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 19.5L4.5 20.5L7.5 17.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ListIcon;

package/src/components/TextEditor2/icon/underlineIcon.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const UnderlineIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.5 21H19.5"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.5 3V10C5.5 13.87 8.63 17 12.5 17C16.37 17 19.5 13.87 19.5 10V3"
+        stroke="#949999"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UnderlineIcon;

package/src/components/TextEditor2/index.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { Editor } from "react-draft-wysiwyg";
+import { EditorState, convertToRaw, ContentState } from "draft-js";
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import toalbarOptions from "./toalbarOptions";
+import { Container } from "./styled";
+import draftToHtml from "draftjs-to-html";
+import htmlToDraft from "html-to-draftjs";
+
+function TextEditor({ obChabge, defaultValue }) {
+  const [editorState, setEditorState] = useState(EditorState.createEmpty());
+
+  const onEditorStateChange = (newState) => {
+    setEditorState(newState);
+  };
+
+  useEffect(() => {
+    const htnl = draftToHtml(convertToRaw(editorState?.getCurrentContent()));
+    obChabge && obChabge(htnl);
+  }, [editorState]);
+
+  useEffect(() => {
+    if (defaultValue) {
+      const contentBlock = htmlToDraft(defaultValue);
+      if (contentBlock) {
+        const contentState = ContentState.createFromBlockArray(
+          contentBlock.contentBlocks
+        );
+        const defualtState = EditorState.createWithContent(contentState);
+        onEditorStateChange(defualtState);
+      }
+    } else {
+      onEditorStateChange(EditorState.createEmpty());
+    }
+  }, []);
+
+  return (
+    <Container>
+      <Editor
+        toolbar={toalbarOptions}
+        editorState={editorState}
+        onEditorStateChange={onEditorStateChange}
+      />
+    </Container>
+  );
+}
+
+export default TextEditor;

package/src/components/TextEditor2/styled.jsx

@@ -0,0 +1,121 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  .rdw-colorpicker-wrapper,
+  .rdw-emoji-wrapper,
+  .rdw-fontsize-wrapper {
+    position: relative;
+  }
+  .rdw-fontsize-wrapper {
+    ul {
+      list-style: none;
+    }
+  }
+  .rdw-dropdown-wrapper {
+    display: flex;
+    align-items: center;
+    border: 0;
+    outline: 0;
+    &:hover {
+      border: 0;
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+  .rdw-inline-wrapper,
+  .rdw-colorpicker-wrapper,
+  .rdw-text-align-wrapper,
+  .rdw-emoji-wrapper,
+  .rdw-list-wrapper,
+  .rdw-fontsize-wrapper {
+    .rdw-option-wrapper {
+      border: 0;
+      outline: 0;
+      &:hover {
+        border: 0;
+        outline: 0;
+        box-shadow: none;
+      }
+    }
+    .rdw-option-wrapper[aria-selected="true"] {
+      svg {
+        path {
+          stroke: #00c2c2;
+        }
+      }
+    }
+  }
+
+  .rdw-dropdown {
+    position: absolute;
+    z-index: 3;
+    border-radius: 12px;
+    border: 1px solid var(--Neutral-20, #dfe5e5);
+    background: #fff;
+    padding: 6px 0;
+    width: fit-content;
+    bottom: 40px;
+    left: 0;
+    width: 70px;
+    .rdw-dropdown-optionwrapper {
+      height: 180px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      border: 0;
+      li {
+        background: #fff;
+        cursor: pointer;
+        padding: 6px 16px;
+      }
+    }
+  }
+
+  .rdw-editor-wrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: column-reverse;
+  }
+  .rdw-editor-toolbar {
+    width: fit-content;
+    margin: 0 auto;
+    border-radius: 12px;
+    border-radius: 12px;
+    border: 1px solid #dfe5e5;
+    background: #fff;
+  }
+  .rdw-editor-main {
+    border-radius: 25px;
+    width: 100%;
+    border: 1px solid #dfe5e5;
+    background: #f5f7f7;
+    height: 193px;
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+`;
+
+export const ColorsWrapper = styled.div``;
+
+export const ColorAction = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .label {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    background-color: #000;
+    border-radius: 50%;
+    border: 1px solid #dfe5e5;
+  }
+`;
+
+export const FontAction = styled(ColorAction)`
+  span {
+    color: #000;
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: 700;
+  }
+`;

package/src/components/TextEditor2/toalbarOptions.jsx

@@ -0,0 +1,30 @@
+import { Inline, List, TextAlign, Colors, Emoji, Fontsize } from "./tools";
+
+export const fontSizes = [
+  8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96,
+];
+export default {
+  options: ["emoji", "colorPicker", "fontSize", "inline", "textAlign", "list"],
+  inline: {
+    inDropdown: false,
+    component: Inline,
+  },
+  emoji: {
+    inDropdown: false,
+    component: Emoji,
+  },
+  list: {
+    inDropdown: false,
+    component: List,
+  },
+  textAlign: {
+    inDropdown: false,
+    component: TextAlign,
+  },
+  colorPicker: {
+    component: Colors,
+  },
+  fontSize: {
+    component: Fontsize,
+  },
+};

package/src/components/TextEditor2/tools.jsx

@@ -0,0 +1,175 @@
+import React from "react";
+import BoldIcon from "./icon/boldIcon";
+import ItalicIcon from "./icon/italicIcon";
+import UnderlineIcon from "./icon/underlineIcon";
+import AlignLeftIcon from "./icon/alignLeftIcon";
+import AlignCenterIcon from "./icon/alignCenterIcon";
+import AlignRightIcon from "./icon/alignRightIcon";
+import ListIcon from "./icon/listIcon";
+import { ColorAction, ColorsWrapper, FontAction } from "./styled";
+import ArrowDown from "./icon/arrowDown";
+import ColorModal from "./colorModal";
+import EmojiIcon from "./icon/emojiIcon";
+import EmojiModal from "./emojiModal";
+import { fontSizes } from "./toalbarOptions";
+
+const Inline = ({ currentState, onChange }) => {
+  const options = [
+    { value: "Bold", icon: BoldIcon },
+    { value: "Italic", icon: ItalicIcon },
+    { value: "Underline", icon: UnderlineIcon },
+  ];
+
+  return (
+    <div className="rdw-inline-wrapper" aria-label="rdw-inline-control">
+      {options?.map((opt) => (
+        <div
+          key={opt?.value}
+          className="rdw-option-wrapper"
+          aria-selected={currentState[opt?.value?.toLocaleLowerCase()]}
+          title={opt?.value}
+          onClick={() => {
+            onChange(opt?.value);
+          }}
+        >
+          <opt.icon />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const TextAlign = ({ currentState, onChange }) => {
+  const options = [
+    { value: "left", label: "Left", icon: AlignLeftIcon },
+    { value: "center", label: "Center", icon: AlignCenterIcon },
+    { value: "right", label: "Right", icon: AlignRightIcon },
+  ];
+
+  return (
+    <div className="rdw-text-align-wrapper" aria-label="rdw-textalign-control">
+      {options?.map((opt) => (
+        <div
+          key={opt?.value}
+          className={`rdw-option-wrapper`}
+          aria-selected={currentState?.textAlignment === opt?.value}
+          title={opt?.value}
+          onClick={() => {
+            onChange(opt?.value);
+          }}
+        >
+          <opt.icon />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const List = ({ currentState, onChange }) => {
+  return (
+    <div className="rdw-list-wrapper" aria-label="rdw-list-control">
+      <div
+        className="rdw-option-wrapper"
+        aria-selected={currentState?.listType === "unordered"}
+        title="Unordered"
+        onClick={() => {
+          onChange("unordered");
+        }}
+      >
+        <ListIcon />
+      </div>
+    </div>
+  );
+};
+
+const Colors = ({ onChange, expanded, onExpandEvent, currentState }) => {
+  return (
+    <div
+      className="rdw-colorpicker-wrapper"
+      aria-haspopup="true"
+      aria-label="rdw-color-picker"
+      title="Color Picker"
+      aria-expanded={expanded}
+    >
+      {expanded && (
+        <ColorModal
+          color={currentState?.color || "#000000"}
+          onChange={(v) => {
+            onChange("color", v?.hex);
+          }}
+        />
+      )}
+      <div className="rdw-option-wrapper">
+        <ColorsWrapper onClick={onExpandEvent}>
+          <ColorAction>
+            <div
+              className="label"
+              style={{ background: currentState?.color }}
+            ></div>
+            <ArrowDown />
+          </ColorAction>
+        </ColorsWrapper>
+      </div>
+    </div>
+  );
+};
+
+const Emoji = ({ onExpandEvent, expanded, onChange }) => {
+  return (
+    <div
+      className="rdw-emoji-wrapper"
+      aria-haspopup="true"
+      aria-label="rdw-emoji-control"
+      aria-expanded="false"
+      title="Emoji"
+    >
+      {expanded && (
+        <EmojiModal
+          onChange={(v) => {
+            onChange(v?.emoji);
+          }}
+        />
+      )}
+      <div className="rdw-option-wrapper" onClick={onExpandEvent}>
+        <EmojiIcon />
+      </div>
+    </div>
+  );
+};
+
+const Fontsize = ({ onExpandEvent, expanded, onChange, currentState }) => {
+  return (
+    <div className="rdw-fontsize-wrapper" aria-label="rdw-font-size-control">
+      <div
+        className="rdw-dropdown-wrapper"
+        aria-label="rdw-dropdown"
+        aria-expanded="true"
+        onClick={onExpandEvent}
+      >
+        <FontAction>
+          <span>{currentState?.fontSize || 16}</span>
+          <ArrowDown />
+        </FontAction>
+      </div>
+      {expanded && (
+        <div className="rdw-dropdown">
+          <ul className="rdw-dropdown-optionwrapper">
+            {fontSizes?.map((i) => (
+              <li
+                className="rdw-dropdownoption-default rdw-fontsize-option "
+                key={i}
+                onClick={() => {
+                  onChange(i);
+                }}
+              >
+                {i}{" "}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { Inline, TextAlign, List, Colors, Emoji, Fontsize };

package/src/components/index.js

@@ -30,6 +30,7 @@ export { default as AppMainLayout } from "./AppMainLayout";
 export { OutletContext as OutletContext } from "./AppMainLayout";
 export { default as DatePickerCalender } from "./datePicker";
 export { default as TextEditor } from "./textEditor";
+export { default as TextEditorNew } from "./TextEditor2";
 export { default as MessageAddon } from "./messageAddon/messages";
 export { default as InstructorAccountSwitcher } from "./instructorAccountSwitcher";
 export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
@@ -53,4 +54,3 @@ export { default as MobileLayout } from "./mobileLayout";
 export { default as useTranslation } from "../hooks/useTranslation";
 export { default as ImageComponent } from "./ImageComponent";
 export { default as DeveloperBanner } from "./banner/developerBanner";
-

package/src/components/messageAddon/messages/chatheader/index.jsx

@@ -89,9 +89,9 @@ const ChatHeader = ({
           </div>
         </div>
 
-        <span onClick={() => setChatOptions(!chatOptions)}>
+        {/* <span onClick={() => setChatOptions(!chatOptions)}>
           <MoreSvg style={{ color: "#636666" }} />
-        </span>
+        </span> */}
 
         {/* {chatOptions && (
           <div className="more-options" ref={dropdownContainer}>

package/src/components/messageAddon/messages/index.styled.js

@@ -984,6 +984,7 @@ export const TextMessagePanel = styled.div`
     justify-content: center;
     border: none;
     outline: none;
+    cursor: pointer;
 
     &.disabled {
       background-color: #c6cccc !important;

package/src/components/messageAddon/messages/messages.jsx

@@ -206,11 +206,26 @@ const Messages = ({
     if (receiverID && courseID) {
       getMessages();
     }
-  }, [receiverID, courseID]);
+  }, [receiverID, courseID, roomID]);
 
   useEffect(() => {
     if (createMessageData?.data) {
-      getMessages(accountType, receiverID, courseID, roomID);
+      if (accountType === "enterprise") {
+        handleRoomMessage(accountType, receiverID, courseID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
+      }
+      if (!affiliates && accountType === "instructor") {
+        handleRoomMessage(accountType, receiverID, courseID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
+      }
+      if (affiliates && accountType === "instructor") {
+        handleRoomMessageAffiliate(receiverID, courseID, roomID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
+      }
+      if (accountType === "personal") {
+        handleRetrieveMessage(receiverID, courseID, roomID);
+        handleRoomRecipientDetailsPersonal(receiverID, courseID);
+      }
     }
   }, [createMessageData?.data]);
 
@@ -311,11 +326,17 @@ const Messages = ({
     };
   }, [scrollRef]);
 
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [allMessages]); // Run this effect whenever `allMessages` changes
+
+
   return (
     <>
       <MessagesWrapper>
         <div className="message_by_wrapper">
-          <p className="mbw_name"> Message {user} </p>
+          <p className="mbw_name"> Message {userFullName} </p>
 
           <div className="icon-box">
             <span onClick={() => setIsFullHeight(!isFullHeight)}>
@@ -379,6 +400,8 @@ const Messages = ({
                             lastMessage={lastMessage}
                           />
                         ))}
+                         {/* Add a dummy div to scroll to */}
+                         <div ref={messagesEndRef} />
                       </>
                     ))}
                   </>