l-min-components 1.0.1098 → 1.0.1106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1098",
+  "version": "1.0.1106",
   "type": "module",
   "files": [
     "src/assets",
@@ -20,6 +20,7 @@
     "classnames": "^2.3.2",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
+    "draft-convert": "^2.1.13",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "emoji-picker-react": "^4.12.0",

package/src/components/TextEditor2/colorModal.jsx

@@ -1,34 +1,9 @@
 import React from "react";
 import { CirclePicker } from "react-color";
 import styled from "styled-components";
+import { editorColors } from "./toalbarOptions";
 
 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} />

package/src/components/TextEditor2/index.jsx

@@ -1,50 +1,33 @@
 import React, { useEffect, useState } from "react";
 import { Editor } from "react-draft-wysiwyg";
-import {
-  EditorState,
-  convertToRaw,
-  ContentState,
-  convertFromHTML,
-} from "draft-js";
+import { EditorState, convertToRaw } from "draft-js";
 import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
-import toalbarOptions from "./toalbarOptions";
+import toalbarOptions, {
+  editorStateToHtml,
+  htmlToEditorState,
+} from "./toalbarOptions";
 import { Container } from "./styled";
-import draftToHtml from "draftjs-to-html";
-// import htmlToDraft from "html-to-draftjs";
 
 function TextEditor({ onChange, defaultValue }) {
-  let defaultState;
-
-  if (defaultValue) {
-    const contentBlock = convertFromHTML(defaultValue);
-    if (contentBlock) {
-      const contentState = ContentState?.createFromBlockArray(
-        contentBlock?.contentBlocks,
-        contentBlock?.entityMap
-      );
-      defaultState = EditorState?.createWithContent(contentState);
-    }
-  }
-
   const [editorState, setEditorState] = useState(
-    defaultState || EditorState.createEmpty()
+    defaultValue ? htmlToEditorState(defaultValue) : EditorState.createEmpty()
   );
 
-  const onEditorStateChange = (newState) => {
-    setEditorState(newState);
-  };
+  // draft data (has blocks)
+  const rawState = convertToRaw(editorState.getCurrentContent());
 
   useEffect(() => {
-    const html = draftToHtml(convertToRaw(editorState?.getCurrentContent()));
-    onChange && onChange(html);
-  }, [editorState]);
+    onChange(editorStateToHtml(editorState));
+  }, [rawState]);
 
   return (
     <Container>
       <Editor
-        toolbar={toalbarOptions}
         editorState={editorState}
-        onEditorStateChange={onEditorStateChange}
+        toolbar={toalbarOptions}
+        // onContentStateChange={onContentStateChange}
+        onEditorStateChange={setEditorState}
+        // customStyleMap={styleMap}
       />
     </Container>
   );

package/src/components/TextEditor2/toalbarOptions.jsx

@@ -1,8 +1,128 @@
 import { Inline, List, TextAlign, Colors, Emoji, Fontsize } from "./tools";
+import { convertFromHTML, convertToHTML } from "draft-convert";
+import { EditorState } from "draft-js";
 
 export const fontSizes = [
   8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96,
 ];
+
+export 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
+];
+
+const alignments = ["LEFT", "CENTER", "RIGHT"]; // Supported alignments
+
+// Dynamically generate alignment styles
+const generateAlignmentStyles = () => {
+  return alignments.reduce((acc, align) => {
+    acc[`TEXTALIGN-${align}`] = { textAlign: align.toLowerCase() };
+    return acc;
+  }, {});
+};
+
+const generateFontSizeStyles = () => {
+  return fontSizes.reduce((acc, size) => {
+    acc[`FONTSIZE-${size}`] = { fontSize: `${size}px` };
+    return acc;
+  }, {});
+};
+
+const generateColorStyles = () => {
+  return editorColors.reduce((acc, color) => {
+    acc[`COLOR-${color}`] = { color };
+    return acc;
+  }, {});
+};
+
+export const styleMap = {
+  ...generateFontSizeStyles(),
+  // ...generateColorStyles(),
+  ...generateAlignmentStyles(),
+};
+
+export const htmlToEditorState = (html) => {
+  const customHTML = convertFromHTML({
+    htmlToStyle: (nodeName, node, currentStyle) => {
+      if (nodeName === "span" && node.style.fontSize) {
+        const fontSize = parseInt(node.style.fontSize, 10);
+        return currentStyle.add(`fontsize-${fontSize}`);
+      }
+
+      return currentStyle;
+    },
+
+    htmlToBlock: (nodeName, node) => {
+      const align = node.style.textAlign;
+
+      if ((nodeName === "p" || nodeName === "li") && align) {
+        return {
+          type: nodeName === "p" ? "PARAGRAPH" : "unordered-list-item",
+          data: { "text-align": align },
+        };
+      }
+      return null; // Default behavior for other blocks
+    },
+
+    htmlToEntity: (nodeName, node, createEntity) => null,
+  });
+
+  const contentState = customHTML(html);
+  return EditorState.createWithContent(contentState);
+};
+
+export const editorStateToHtml = (editorState) => {
+  return convertToHTML({
+    styleToHTML: (style) => {
+      if (style.includes("fontsize")) {
+        const size = style.split("-")[1] + "px";
+        return <span style={{ fontSize: size }} />;
+      }
+    },
+    blockToHTML: (block) => {
+      const textAlign = block.data["text-align"];
+
+      if (block.type === "PARAGRAPH") {
+        if (textAlign) {
+          return <p style={{ textAlign: textAlign }} />;
+        }
+        return <p />;
+      }
+      if (block.type === "unstyled") {
+        if (block.data["text-align"]) {
+          return <p style={{ textAlign: textAlign }} />;
+        }
+      }
+      if (block.type === "unordered-list-item") {
+        if (block.data["text-align"]) {
+          return <li style={{ textAlign: textAlign }} />;
+        }
+      }
+    },
+  })(editorState.getCurrentContent());
+};
 export default {
   options: ["emoji", "colorPicker", "fontSize", "inline", "textAlign", "list"],
   inline: {

package/src/components/mobileLayout/index.jsx

@@ -2,11 +2,10 @@ import React, { useState, useEffect, useRef } from "react";
 import { MobileLayoutContainer } from "./index.styled";
 // import BackArrow from "./assets/svg/backArrow";
 import img from "./assets/images/bg_img.png";
-import play from "./assets/svg/playstore.svg";
-import apple from "./assets/svg/apple.svg";
+// import play from "./assets/svg/playstore.svg";
+// import apple from "./assets/svg/apple.svg";
 
 const MobileLayout = (props) => {
-
   return (
     <MobileLayoutContainer>
       <div className="mlc_header">
@@ -20,20 +19,25 @@ const MobileLayout = (props) => {
 
       <div className="mlc_note_container">
         <p className="mlc_note_title">
-          {props?.findText("Sorry, you can’t access your account on a mobile browser.")}
+          {props?.findText(
+            "Sorry, you can’t access your account on a mobile browser."
+          )}
         </p>
         <p className="mlc_note_subtitle">
-          {props?.findText("We know it's inconvenient. For better user accessibility, login with a desktop device or via our mobile app.")}
+          {props?.findText(
+            "We know it's inconvenient. For better user accessibility, login with a desktop device."
+          )}
+          {/* or via our mobile app */}
         </p>
 
-        <div className="mlc_link_section">
+        {/* <div className="mlc_link_section">
           <a href="#">
             <img src={play} alt="play store" /> {props?.findText("Download on google play")}
           </a>
           <a href="#">
             <img src={apple} alt="apple store" /> {props?.findText("Download on apple store")}
           </a>
-        </div>
+        </div> */}
       </div>
     </MobileLayoutContainer>
   );