l-min-components 1.0.289 → 1.0.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.289",
+  "version": "1.0.294",
   "type": "module",
   "files": [
     "src/assets",
@@ -17,6 +17,7 @@
     "axios-hooks": "^4.0.0",
     "chart.js": "^4.2.1",
     "classnames": "^2.3.2",
+    "emoji-picker-react": "^4.4.10",
     "js-cookie": "^3.0.5",
     "l-min-components": "^1.0.220",
     "moment": "^2.29.4",
@@ -33,6 +34,9 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
     "react-tooltip": "^5.10.1",
+    "slate": "^0.94.0",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.94.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext, useRef } from "react";
+import React, { useState, useEffect, createContext, useRef, useContext } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -33,7 +33,7 @@ const AppMainLayout = () => {
 
   return (
     <OutletContext.Provider
-      value={{ setRightComponent, setRightLayout, generalData, setGeneralData }}
+      value={{ setRightComponent, setRightLayout, generalData, setGeneralData, coming }}
     >
       <Layout coming={coming}>
         <HeaderComponent />

package/src/components/dropdown component/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, useEffect } from "react";
+import React, { useState, CSSProperties, useEffect, useRef } from "react";
 import {
   ControlInput,
   DropDownContainer,
@@ -35,13 +35,30 @@ const DropDownComponent = (props) => {
   //search params
   const [searchParam, setSearchParam] = useState();
 
+  // dropdown menu ref
+  const dropdownRef = useRef(null);
+
+  // click outside closes the dropdown menu
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setDropdown(false)
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
   // useEffect to return a function value onChange
   useEffect(() => {
     props?.onSelect && props?.onSelect(selected);
   }, [selected]);
 
   return (
-    <DropDownContainer className={props?.className}>
+    <DropDownContainer className={props?.className} ref={dropdownRef}>
       <DropDownHeader>{props?.header}</DropDownHeader>
       <DropDownControls>
         {props?.searchable ? (
@@ -110,8 +127,8 @@ export default DropDownComponent;
 export const DownIcon = ({ width, height, fill, onClick }) => {
   return (
     <svg
-      width={width || "14"}
-      height={height || "8"}
+      width={width || "18"}
+      height={height || "9"}
       viewBox="0 0 14 8"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -119,10 +136,10 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
     >
       <path
         d="M1 1L7 7L13 1"
-        stroke={fill || "#18191B"}
+        stroke={fill || "#7C8080"}
         strokeWidth="2"
         strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeLinejoin="round"     
       />
     </svg>
   );

package/src/components/index.js

@@ -29,3 +29,4 @@ export { default as ErrorPage } from "./errorPage";
 export { default as AppMainLayout } from "./AppMainLayout";
 export { OutletContext as OutletContext } from "./AppMainLayout";
 export { default as DatePickerCalender } from "./datePicker"; 
+export { default as TextEditor } from "./textEditor"

package/src/components/textEditor/assets/binWhite.jsx

@@ -0,0 +1,14 @@
+const BinWhite = () => (
+  <svg
+    width="14"
+    height="18"
+    viewBox="0 0 14 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
+      fill="white"
+    />
+  </svg>
+);
+export default BinWhite;

package/src/components/textEditor/assets/grammerly.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const Grammerly = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19.9232 4.94813C23.8932 8.91813 23.8232 15.3981 19.7232 19.2881C15.9332 22.8781 9.78323 22.8781 5.98323 19.2881C1.87323 15.3981 1.80322 8.91813 5.78322 4.94813C9.68322 1.03813 16.0232 1.03813 19.9232 4.94813Z"
+        stroke="#ADB3B3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6934 16.0664C14.5734 18.0664 11.1334 18.0664 9.02344 16.0664"
+        stroke="#ADB3B3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.51794 8.98828H9.52693"
+        stroke="#ADB3B3"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6888 8.98828H16.6978"
+        stroke="#ADB3B3"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Grammerly;

package/src/components/textEditor/assets/moveUppDownWhite.jsx

@@ -0,0 +1,26 @@
+const MoveUpDownWhite = () => (
+  <svg
+    width="17"
+    height="22"
+    viewBox="0 0 17 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_5000_132541)">
+      <path
+        d="M1 7H8.5H16M1 11H16M1 15H16"
+        stroke="#F5F7F7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M4 18L8.5 22L13 18H4Z" fill="#F5F7F7" />
+      <path d="M4 4L8.5 0L13 4H4Z" fill="#F5F7F7" />
+    </g>
+    <defs>
+      <clipPath id="clip0_5000_132541">
+        <rect width="17" height="22" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default MoveUpDownWhite;

package/src/components/textEditor/index.jsx

@@ -0,0 +1,683 @@
+import { useCallback, useMemo, useEffect, useRef, useState } from "react";
+import BinWhite from "./assets/binWhite";
+import MoveUpDownWhite from "./assets/moveUppDownWhite";
+import "./style.scss";
+import { createEditor, Editor, Transforms } from "slate";
+import { Slate, Editable, withReact } from "slate-react";
+import { DropDownComponent,ButtonComponent, } from "l-min-components/src/components";
+// import { fontList } from "../../pages/createLectures/defaults";
+import EmojiPicker from "emoji-picker-react";
+import Grammerly from "./assets/grammerly";
+
+/**
+ * @param {{
+* valueData: Object,
+* placeHolder: string,
+* }} props - properties of the editor
+*/
+
+const TextEditor = ({
+  valueData,
+  showOptions,
+  announce,
+  click,  
+  placeHolder,
+  
+}) => {
+
+  const [heading, setHeading] = useState("");
+  const [value, setValue] = useState(valueData);
+  const editor = useMemo(() => withReact(createEditor()), []);
+  const [fontColor, setFontColor] = useState("#000");
+  const [active, setActive] = useState(false)
+  const [boldActive, setBoldActive] = useState(false)
+  const [italicActive, setItalicActive] = useState(false)
+  const [underlinective, setUnderlineActive] = useState(false)
+  const [listActive, setListActive] = useState(false)
+  const [leftActive, setLeftActive] = useState(false)
+  const [rightActive, setRightActive] = useState(false)
+  const [centerActive, setCenterActive] = useState(false)
+  const [showEmoji, setShowEmoji] = useState();
+
+  // const [showEmoji, setShowEmoji] = useState();
+  const dropdownRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    event.preventDefault();
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setShowEmoji(false);
+      setActive(false)
+     }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  const toggleMark = (editor, format, value = true) => {
+    const isActive = isMarkActive(editor, format);
+    if (isActive) {
+      editor.removeMark(format);
+      // setActive(true)
+    } else {
+      editor.addMark(format, value);
+      // setActive(false)
+    }
+  };
+  
+  const isMarkActive = (editor, format) => {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+  };
+
+  const colorInput = useRef();
+  const defaultFontSize = useMemo(() => 16);
+
+  const fontSizes = useCallback(() => {
+    const numbers = [];
+    const startNum = 10;
+    const maxNum = 30;
+    for (let x = startNum; x <= maxNum; x++) {
+      numbers.push({ name: x });
+    }
+    return numbers;
+  }, []);
+
+ 
+  const handleEmojiButton = () => {
+    setShowEmoji(!showEmoji);
+  };
+
+  const insertEmoji = useCallback((emoji) => {
+    editor.insertText(emoji)
+  }, []);
+
+  return (
+    <div className="editor" ref={dropdownRef}>
+      <Slate
+        editor={editor}
+        value={value}
+        autoFocus={true}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        >
+        <div className="editor-wrapper">
+           {showEmoji && (
+              <div
+                className="emoji_picker"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}>
+                <EmojiPicker
+                  onEmojiClick={(data) => {
+                    insertEmoji(data.emoji);
+                  }}
+                  autoFocusSearch={false}
+                  suggestedEmojisMode="frequent"
+                  lazyLoadEmojis={true}
+                  previewConfig={{
+                    showPreview: false,
+                  }}
+                />
+              </div>
+            )}
+          <div className="editor_area">
+             {announce && (
+                <input
+                placeholder="Announcement Heading"
+                value={heading}
+                onChange={(e) => setHeading(e.target.value)}
+              />
+              )}
+           
+            <div className="editable">
+              <Editable renderLeaf={(props) => <Leaf {...props} />} placeholder={placeHolder} />
+            </div>
+          </div>
+           
+
+          <div className="bottom">
+            <div
+              className="tool-bar"
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}>
+              {/* <div className="font">
+                <DropDownComponent
+                  className="font-dd"
+                  default={{ name: "Nunito" }}
+                  dropdownData={fontList.map((font) => ({ name: font }))}
+                  onSelect={({ name }) => {
+                    console.log(name);
+                    toggleMark(editor, "fontFamily", name);
+                  }}
+                />
+              </div> */}
+              <div className="font-size">
+                <DropDownComponent
+                  className="sizes"
+                  default={{ name: defaultFontSize }}
+                  dropdownData={fontSizes()}
+                  onSelect={({ name }) => {
+                    toggleMark(editor, "fontSize", name);
+                  }}
+                />
+              </div>
+              <div
+                className="color-box"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  colorInput.current.click();
+                }}>
+                <div className="wrap">
+                  <input
+                    type="color"
+                    name="color"
+                    defaultValue={fontColor}
+                    ref={colorInput}
+                    onChange={(e) => {
+                      setFontColor(e.target.value);
+                      toggleMark(editor, "color", e.target.value);
+                    }}
+                  />
+                  <div
+                    className="indicator"
+                    style={{ backgroundColor: fontColor }}
+                  />
+                  <ArrowDown />
+                </div>
+              </div>
+              <div className="font-style">
+                <div
+                  className={boldActive ? "active" : ""}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "bold");
+                    setBoldActive(!boldActive)
+                  }}>
+                  <BoldIcons />
+                </div>
+                <div
+                  className={italicActive ? "active" : ""}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "italic");
+                    setItalicActive(!italicActive)
+                  }}>
+                  <ItalicIcon />
+                </div>
+                <div
+                  className={underlinective ? "active" : "underline"} 
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "underline");
+                    setUnderlineActive(!underlinective)
+                  }}>
+                  <UnderlineIcon />
+                </div>
+              </div>
+              <div className="alignments">
+                <div
+                  className={leftActive ? "a-left active" : "a-left"}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "textAlign", "left");
+                    setLeftActive(!leftActive)
+                    setCenterActive(false)
+                    setRightActive(false)
+                  }}>
+                  <TextAlignLeftIcon />
+                </div>
+                <div
+                  className={centerActive ? "a-center active" : "a-center"} 
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "textAlign", "center");
+                    setCenterActive(!centerActive)
+                    setLeftActive(false)
+                    setRightActive(false)
+                  }}>
+                  <TextAlignCenterIcon />
+                </div>
+                <div
+                  className={rightActive ? "a-right active" : "a-right"}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    toggleMark(editor, "textAlign", "right");
+                    setRightActive(!rightActive)
+                    setCenterActive(false)
+                    setLeftActive(false)
+                  }}>
+                  <TextAlignRight />
+                </div>
+              </div>
+              <div className="list" >
+                <div
+                  className={listActive ? "list-icon active" : "list-icon"}
+                  onClick={() => {
+                    toggleMark(editor, "list");
+                    setListActive(!listActive)
+                  }}>
+                  <ListIcon />
+                </div>
+                {/* <div className="first-line-icon">
+                  <FirstLineIcon />
+                </div> */}
+              </div>
+              <button className={active ? "emoji_button_active" : "emoji_button" } 
+              // onClick={handleEmojiButton}   
+              onMouseDown={(e) => {
+                e.preventDefault();
+                setShowEmoji((state) => !state);
+                setActive(!active)
+              }}
+              >
+                {" "}
+                  <Grammerly />{" "}
+              </button>
+            </div>
+            {announce && (
+                <ButtonComponent
+                text="Create Announcement"
+                styles={{
+                  fontSize: "18px",
+                  width: "30%",
+                  // textAlign: "center",
+                  padding: "8px 17px",
+                  borderRadius: "12px",
+                  marginTop: "15px",
+                  height: "50px",
+                  // marginLeft: "15px",
+                }}
+                onClick={click}
+            />
+            )}
+          </div>
+        </div>
+      </Slate>
+      {showOptions && (
+        <div className="options">
+          <div className="options">
+            <span>
+              <MoveUpDownWhite />
+            </span>
+            <span onClick={handleDeleteContent.bind(this, temporaryId)}>
+              <BinWhite />
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Leaf = ({ attributes, children, leaf }) => {
+  if (leaf.bold) {
+    children = <strong>{children}</strong>;
+  }
+
+  if (leaf.italic) {
+    children = <em>{children}</em>;
+  }
+
+  if (leaf.underline) {
+    children = (
+      <span {...attributes} style={{ textDecoration: "underline" }}>
+        {children}
+      </span>
+    );
+  }
+  if (leaf.color) {
+    children = (
+      <span {...attributes} style={{ color: leaf.color }}>
+        {children}
+      </span>
+    );
+  }
+  if (leaf.textAlign) {
+    children = (
+      <p style={{ textAlign: leaf.textAlign }}>
+        <span {...attributes}>{children}</span>
+      </p>
+    );
+  }
+
+  if (leaf.fontFamily) {
+    children = (
+      <span {...attributes} style={{ fontFamily: leaf.fontFamily }}>
+        {children}
+      </span>
+    );
+  }
+
+  if (leaf.fontSize) {
+    children = (
+      <span {...attributes} style={{ fontSize: leaf.fontSize }}>
+        {children}
+      </span>
+    );
+  }
+
+  if (leaf.list) {
+    children = (
+      // <ul {...attributes}>
+      <li {...attributes}>{children}</li>
+      // </ul>
+    );
+  }
+
+  return <span {...attributes}>{children}</span>;
+};
+const BoldIcons = (props) => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.80664 5.27344C5.80664 4.17344 6.70664 3.27344 7.80664 3.27344H12.9266C15.5466 3.27344 17.6766 5.40344 17.6766 8.02344C17.6766 10.6434 15.5466 12.7734 12.9266 12.7734H5.80664V5.27344Z"
+      stroke={props.stroke ?? "#313333"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.80664 12.7734H15.3066C17.9266 12.7734 20.0566 14.9034 20.0566 17.5234C20.0566 20.1434 17.9266 22.2734 15.3066 22.2734H7.80664C6.70664 22.2734 5.80664 21.3734 5.80664 20.2734V12.7734V12.7734Z"
+      stroke={props.stroke ?? "#313333"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ItalicIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.5449 3.77344H19.7949"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.04492 21.7734H15.2949"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.1758 3.77344L10.6758 21.7734"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const UnderlineIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.92578 21.7734H19.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.92578 3.77344V10.7734C5.92578 14.6434 9.05578 17.7734 12.9258 17.7734C16.7958 17.7734 19.9258 14.6434 19.9258 10.7734V3.77344"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ArrowDown = () => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.5466 5.99219L8.74331 9.79552C8.29414 10.2447 7.55914 10.2447 7.10997 9.79552L3.30664 5.99219"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const TextAlignLeftIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.92578 5.27344H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 10.2734H13.3958"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 15.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 20.2734H13.3958"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const TextAlignCenterIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.92578 5.27344H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.18555 10.2734H17.6655"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 15.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.18555 20.2734H17.6655"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const TextAlignRight = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.92578 5.27344H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.4551 10.2734H21.9251"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 15.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.4551 20.2734H21.9251"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ListIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M11.9258 20.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.9258 13.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.9258 6.27344H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 6.27344L4.92578 7.27344L7.92578 4.27344"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 13.2734L4.92578 14.2734L7.92578 11.2734"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 20.2734L4.92578 21.2734L7.92578 18.2734"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const FirstLineIcon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14.9258 5.27344H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.9258 10.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 15.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.92578 20.2734H21.9258"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M10.4258 9.20344V6.34344C10.4258 5.22344 9.97578 4.77344 8.84578 4.77344H5.99578C4.87578 4.77344 4.42578 5.22344 4.42578 6.34344V9.19344C4.42578 10.3234 4.87578 10.7734 5.99578 10.7734H8.84578C9.97578 10.7734 10.4258 10.3234 10.4258 9.20344Z"
+      stroke="#949999"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default TextEditor;

package/src/components/textEditor/style.scss

@@ -0,0 +1,256 @@
+@use "../../variables/colors" as c;
+
+@mixin defaultPadding {
+  padding: 14px 19px;
+}
+.editor {
+  display: flex;
+  gap: 13px;
+  
+  .editor-wrapper {
+    width: 100%;
+    position: relative;
+    background: #e5e5e5;
+    border-radius: 15px;
+
+    .emoji_picker{
+      position: absolute;
+      z-index: 1;
+      transform: translate(10px, 10px);
+      margin-left: 50%;
+      margin-top: -15%;
+
+      @media only screen and (max-width: 1700px) {
+        margin-top: -19%;
+      } 
+      @media only screen and (max-width: 1600px) {
+        margin-top: -21%;
+      }  
+      @media only screen and (max-width: 1500px) {
+        margin-top: -24%;
+      }     
+    }
+
+    .editor_area{
+      background: #fff;
+      border-radius: 15px;
+
+      input{
+        border-radius: 12px;
+        background: #fff;
+        outline: none;
+        border: none;
+        width: 100%;
+        height: 30px;
+        font-size: 20px;
+        font-weight: 500;
+        padding-left: 30px;
+        border: "none";
+        margin-top: 20px;
+  
+      }
+      .editable {
+        border-radius: 25px;
+        padding: 20px 30px;
+        background: #fff;
+        // background: #e5e5e5;
+        min-height: 193px;
+      }
+
+    }
+    
+    .bottom{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 80%;
+
+      .emoji_button{
+        background-color: white;
+        border: none;
+        cursor: pointer;
+        padding: 5px;
+        margin-top: 6px;
+        margin-right: 20px;
+        border-radius: 50%;
+        // opacity: 0.6;
+       
+        
+      }
+
+      .emoji_button_active{
+        background-color: #fff;
+        color: #00C2C2;
+        border: none;
+        cursor: pointer;
+        padding: 3px;
+        margin-top: 6px;
+        margin-right: 20px;
+        // border-radius: 50%;
+        svg path{
+          stroke: #00C2C2;
+        }
+        // border-radius: 20px;
+
+       
+
+      }
+
+
+      & > button{
+        @media only screen and (max-width: 1400px) {
+          font-size: 17px !important;
+          font-weight: 700;
+        }   
+        @media only screen and (max-width: 1366px) {
+          font-size: 15px !important;
+          font-weight: 600;
+        }   
+      }
+
+    .tool-bar {
+      display: flex;
+      margin: auto;
+      margin-top: 16px;
+      margin-right: 20px;
+      padding: 16px;
+      background: #fff;
+      border: 0px solid c.$neutral-20;
+      border-radius: 12px;
+      width: 70%;
+      height: 60px;
+      // gap: 5px;
+
+      
+
+      .list {
+        display: grid;
+        // grid-template-columns: 1fr 1fr;
+        gap: 2px;
+        & > div {
+          display: grid;
+          cursor: pointer;
+        }
+        .active{
+          color: #00C2C2;
+          svg path{
+            // stroke: #00C2C2;
+            stroke: #00C2C2;
+          }
+        }
+      }
+
+      .active{
+        opacity: 1;
+      }
+
+      .font {
+        .font-dd {
+          div {
+            border-width: 0px;
+            min-width: 215px;
+          }
+          p {
+            margin-right: 25px;
+            font-weight: 700;
+          }
+        }
+      }
+      .font-size {
+        .sizes {
+          div {
+            border-width: 0px;
+            // z-index: 999;
+            .iVkqGn{
+              padding: 11px 10px;
+            }
+          }
+          p {
+            margin-right: 25px;
+            font-weight: 700;
+          }
+        }
+      }
+      align-items: center;
+      & > div {
+        border-right: 1px solid c.$neutral-10;
+        padding: 0 6px;
+      }
+      .font-style {
+        display: flex;
+        gap: 5px;
+        & > div {
+          display: grid;
+          cursor: pointer;
+          // svg{
+          //   fill: #00C2C2;
+          // }
+        }
+
+        .active{
+          color: #00C2C2;
+          svg path{
+            // fill: #00C2C2;
+            stroke: #00C2C2;
+          }
+        }
+      }
+      .color-box {
+        .wrap {
+          position: relative;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 7px;
+          input {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0;
+          }
+          .indicator {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+          }
+        }
+      }
+      .alignments {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 16px;
+        cursor: pointer;
+        & > div {
+          display: grid;
+        }
+        .active{
+          color: #00C2C2;
+          svg path{
+            // fill: #00C2C2;
+            stroke: #00C2C2;
+          }
+        }
+        
+      }
+    }
+  }
+  .options {
+    min-width: 40px;
+    display: grid;
+    align-content: start;
+    gap: 20px;
+    span {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: grid;
+      align-content: center;
+      justify-items: center;
+      background-color: c.$error;
+      cursor: pointer;
+      &:nth-of-type(1) {
+        background-color: c.$primary-color-main;
+      }
+    }
+  }
+}
+}

package/src/components/textEditor/test.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { createEditor } from 'slate';
+import { Slate, Editable, withReact } from 'slate-react';
+
+import EmojiPicker from 'emoji-picker-react';
+
+const App = () => {
+  const editorRef = useRef();
+  const inputRef = useRef();
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+
+  const editor = useMemo(() => withReact(createEditor()), []);
+
+  const handleEditorChange = (value) => {
+    // Update the editor's value
+    // This function will be called whenever the editor's content changes
+    // You can perform any necessary logic here
+    Editor.isFocused(editor) && Editor.insertText(editor, value);
+  };
+
+  const handleEmojiClick = (emoji) => {
+    // Insert the selected emoji at the current cursor position
+    const { selection } = editor;
+    if (selection) {
+      const emojiText = `:${emoji.name}:`;
+      Editor.insertText(editor, emojiText);
+    }
+    setShowEmojiPicker(false);
+    inputRef.current.focus();
+  };
+
+  const toggleEmojiPicker = () => {
+    setShowEmojiPicker(!showEmojiPicker);
+  };
+
+  return (
+    <div>
+      <button onClick={toggleEmojiPicker}>Toggle Emoji Picker</button>
+      {showEmojiPicker && (
+        <EmojiPicker onEmojiClick={handleEmojiClick} pickerStyle={{ position: 'absolute', bottom: '20px', right: '20px' }} />
+      )}
+      <Slate editor={editor} value={[]} onChange={handleEditorChange}>
+        <Editable
+          ref={editorRef}
+          onKeyDown={(event) => {
+            // Prevent default handling of the "Enter" key
+            if (event.key === 'Enter') {
+              event.preventDefault();
+            }
+          }}
+          renderElement={(props) => <div {...props} />}
+          renderLeaf={(props) => <span {...props} />}
+          autoFocus
+        />
+      </Slate>
+      <input ref={inputRef} />
+    </div>
+  );
+};
+
+export default App;