@flozy/editor 10.1.1 → 10.1.3

package/dist/Editor/themeSettingsAI/style.js

@@ -0,0 +1,324 @@
+const style = ({
+  appTheme: theme
+}) => ({
+  ".fs-12": {
+    fontSize: "12px"
+  },
+  ".fs-14": {
+    fontSize: "14px"
+  },
+  ".fw-500": {
+    fontWeight: "500"
+  },
+  ".fw-600": {
+    fontWeight: "600"
+  },
+  ".pointer": {
+    cursor: "pointer"
+  },
+  ".transformNone": {
+    textTransform: "none"
+  },
+  ".settingsContainer": {
+    width: "340px",
+    padding: "16px 16px",
+    background: "#fff",
+    ".header": {
+      borderBottom: `1px solid #DCE4EC`,
+      paddingBottom: "8px"
+      //   marginBottom: "16px",
+    }
+  },
+
+  ".title": {
+    fontWeight: "700",
+    fontSize: "14px"
+  },
+  ".closeBtn": {
+    width: "26px",
+    height: "26px",
+    BorderRadius: "4px",
+    flexShrik: "0",
+    padding: "4px",
+    background: " #F8FAFC",
+    borderRadius: "4px"
+  },
+  ".MuiTabs-scroller": {
+    borderBottom: `1px solid #DCE4EC`
+  },
+  ".themeCardWrapper": {
+    borderRadius: "4px",
+    ".active": {
+      background: "#ECF2FF"
+    }
+  },
+  ".primaryCard, .secondaryCard": {
+    width: "44px",
+    height: "44px",
+    borderRadius: "5px",
+    border: `1px solid #929292`
+  },
+  ".flexAlign": {
+    display: "flex",
+    alignItems: "center"
+  },
+  ".activeColorBox, .xsColorBox": {
+    width: "24px",
+    height: "24px",
+    borderRadius: "5px",
+    border: `1px solid #929292`
+  },
+  ".themeCard": {
+    borderRadius: "7px",
+    padding: "16px",
+    border: "1px solid #F3F3F3",
+    boxShadow: "1px 2px 5px 0px #00000014",
+    position: "relative",
+    flexWrap: "nowrap",
+    ".tickIcon": {
+      visibility: "hidden",
+      opacity: "0",
+      position: "absolute",
+      right: "-8px",
+      top: "-8px"
+    },
+    "&.selected": {
+      ".tickIcon": {
+        visibility: "visible",
+        opacity: "1"
+      }
+    }
+  },
+  ".otherColors": {
+    display: "flex",
+    flexWrap: "wrap",
+    width: "48px",
+    ".smallCard": {
+      width: "20px",
+      height: "20px",
+      borderRadius: "5px",
+      border: `1px solid #929292`
+    }
+  },
+  ".imageUpload": {
+    background: "#F3F3F3",
+    borderRadius: "12px",
+    padding: "10px",
+    height: "208px",
+    position: "relative",
+    "& .resetIcon": {
+      position: "absolute",
+      right: "10px",
+      top: "10px"
+    },
+    ".changeImgText": {
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 1,
+      background: "#0000004D",
+      color: "#fff",
+      padding: "6px",
+      borderRadius: "6px",
+      fontSize: "12px",
+      fontWeight: 600,
+      opacity: "0",
+      visibility: "hidden"
+    },
+    "&:hover": {
+      ".changeImgText": {
+        opacity: "1",
+        visibility: "visible"
+      }
+    }
+  },
+  ".imgUploadInner": {
+    background: "#fff",
+    borderRadius: "10px",
+    border: "0.79px dashed #8360FD",
+    height: "100%"
+  },
+  ".outlineBtn": {
+    color: "#2563EB",
+    borderRadius: "10px",
+    boxShadow: "0px 4px 10px 0px #00000026",
+    border: "1px solid #2563EB",
+    background: "#EBF1F9",
+    height: "34px",
+    textTransform: "unset",
+    fontWeight: "bold",
+    "&:hover": {
+      background: "#EBF1F9"
+    }
+  },
+  ".seondaryOutlineBtn": {
+    border: "1px solid #D8DDE1",
+    borderRadius: "8px",
+    // boxShadow: "0px 4px 10px 0px #00000026",
+    height: "34px",
+    textTransform: "unset",
+    background: "#f5f6f9 !important",
+    color: "#64748B !important",
+    "&:hover": {
+      border: "1px solid #D8DDE1",
+      background: "#f5f6f9 !important"
+    }
+  },
+  ".blueBtn": {
+    boxShadow: "0px 4px 10px 0px #00000026",
+    background: "#2563EB",
+    borderRadius: "8px",
+    textTransform: "unset",
+    height: "34px",
+    color: "#fff",
+    fontWeight: "bold",
+    "&.disabled": {
+      background: "#D9D9DD !important",
+      color: "#fff !important"
+    }
+  },
+  ".generatedItem": {
+    border: "1px solid #E4E6E9",
+    borderRadius: "7px",
+    padding: "14px",
+    display: "flex",
+    gap: "16px",
+    position: "relative",
+    justifyContent: "space-between",
+    marginBottom: "12px",
+    ".tickIcon": {
+      visibility: "hidden",
+      opacity: "0",
+      position: "absolute",
+      right: "-8px",
+      top: "-8px"
+    },
+    "&.selected": {
+      border: "1px solid #2563EB",
+      boxShadow: " 3px 3px 8px 0px #2563EB40",
+      ".tickIcon": {
+        visibility: "visible",
+        opacity: "1"
+      }
+    },
+    ".colorBox": {
+      border: "1px solid #929292",
+      height: "28px",
+      width: "28px",
+      borderRadius: "5px"
+    }
+  },
+  ".textArea": {
+    background: "#F3F3F3",
+    borderRadius: "12px",
+    padding: "10px",
+    height: "208px",
+    "& textarea": {
+      width: "100%",
+      height: "100% !important",
+      border: "0.79px solid #8360FD",
+      background: "#FFFFFF",
+      borderRadius: "8px",
+      padding: "10px"
+    }
+  },
+  ".imageUrl": {
+    height: "auto !important",
+    ".MuiOutlinedInput-root": {
+      border: "0.79px solid #8360FD",
+      background: "#FFFFFF",
+      borderRadius: "8px",
+      ".tickIcon": {
+        width: "18px"
+      }
+    },
+    "&.invalidUrl": {
+      ".MuiInputAdornment-root": {
+        ".tickIcon": {
+          ".fillPath": {
+            fill: "#D9D9DD!important"
+          }
+        }
+      }
+    }
+  },
+  ".saveThemeContainer": {
+    ".MuiOutlinedInput-root": {
+      borderRadius: "8px",
+      boxShadow: "0px 4px 16px 0px #0000000D"
+    }
+  },
+  ".uploadedImage": {
+    width: "126px",
+    height: "126px",
+    borderRadius: "126px"
+  },
+  ".MuiDialog-paper": {
+    borderRadius: "10px",
+    background: theme?.palette?.editor?.miniToolBarBackground
+  },
+  "& .MuiInputBase-root": {
+    borderRadius: "8px",
+    background: theme?.palette?.editor?.inputFieldBgColor,
+    border: `none`,
+    height: "40px",
+    boxShadow: "0px 4px 16px 0px #0000000D",
+    fontFamily: "Inter, sans-serif",
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+    },
+    "& input::placeholder": {
+      color: "#94A3B8 !important",
+      opacity: "unset",
+      fontFamily: "Inter, sans-serif"
+    },
+    "& .colorPickerButton": {
+      border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+    }
+  },
+  "& .MuiInputBase-root:has(.colorPickerButton)": {
+    "& .MuiInputBase-input": {
+      padding: "8.5px 14px 8.5px 0px",
+      fontFamily: "Inter, sans-serif"
+    }
+  },
+  "& .MuiInputBase-input": {
+    color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+    textTransform: "math-auto",
+    fontFamily: "Inter, sans-serif"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+  },
+  "& fieldset": {
+    border: `1px solid transparent`,
+    borderRadius: "8px"
+  },
+  "& .saveThemeActionBtns": {
+    "& button": {
+      fontWeight: 600,
+      fontSize: "14px",
+      opacity: 1,
+      borderRadius: "8px",
+      textTransform: "math-auto",
+      padding: "4px 20px",
+      height: "fit-content",
+      minWidth: "90px",
+      "@media only screen and (max-width: 899px)": {
+        width: "50%"
+      },
+      "&.confirmBtn": {
+        backgroundColor: "#2563EB",
+        color: "#ffffff",
+        border: `1px solid #2563EB`
+      },
+      "&.cancelBtn": {
+        backgroundColor: theme?.palette?.editor?.closeButtonBackground,
+        color: theme?.palette?.editor?.customDialogueCloseBtnColor,
+        border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
+      }
+    }
+  }
+});
+export default style;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
+import { getBreakPointsValue, textThemeFields, getElementProperty } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
-import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor, getSlateDom } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
+import { ReactEditor } from "slate-react";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
 import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
@@ -47,7 +47,7 @@ import DataView from "../Elements/DataView/DataView";
 import ViewData from "../Elements/DataView/Layouts/ViewData";
 import ColumnView from "../Elements/DataView/Layouts/ColumnView";
 import SearchAttachment from "../Elements/Search/SearchAttachment";
-// import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
+import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
@@ -56,7 +56,17 @@ const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
-const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
+
+// const NEWLINESAFTER = [
+//   "headingOne",
+//   "headingTwo",
+//   "headingThree",
+//   "headingFour",
+//   "headingFive",
+//   "headingSix",
+// ];
+
+const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -89,8 +99,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   if (!selection) {
     Transforms.insertText(editor, "");
   }
+  const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
   Transforms.setNodes(editor, {
-    type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
+    type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
     ...attr
   });
   if (isList && !isActive) {
@@ -99,10 +110,12 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
       children: []
     });
   }
-  if (NEWLINESAFTER.indexOf(format) > -1) {
-    insertNewLine(editor);
-  }
+
+  // if (NEWLINESAFTER.indexOf(format) > -1) {
+  //   insertNewLine(editor);
+  // }
 };
+
 export const addMarkData = (editor, data) => {
   try {
     Editor.addMark(editor, data.format, data.value);
@@ -111,9 +124,14 @@ export const addMarkData = (editor, data) => {
   }
 };
 export const toggleMark = (editor, format) => {
-  const isActive = isMarkActive(editor, format);
+  const isActive = isMarkBtnActive(editor, format);
   if (isActive) {
-    Editor.removeMark(editor, format);
+    const isThemeSupportedMark = textThemeFields.some(f => f === format);
+    if (isThemeSupportedMark) {
+      Editor.addMark(editor, format, false);
+    } else {
+      Editor.removeMark(editor, format);
+    }
   } else {
     Editor.addMark(editor, format, true);
   }
@@ -127,6 +145,58 @@ export const isMarkActive = (editor, format) => {
     return null;
   }
 };
+export const isMarkBtnActive = (editor, format) => {
+  switch (format) {
+    case "bold":
+      {
+        const style = getSelectedElementStyle("font-weight", editor);
+        return style === "700";
+      }
+    case "italic":
+      {
+        const style = getSelectedElementStyle("font-style", editor);
+        return style === format;
+      }
+    // case "underline": {
+    //   const style = getSelectedElementStyle("text-decoration");
+
+    //   return style?.includes(format);
+    // }
+    // case "strikethrough": {
+    //   const style = getSelectedElementStyle("text-decoration");
+
+    //   return style?.includes("line-through");
+    // }
+    default:
+      return isMarkActive(editor, format);
+  }
+};
+export const getSelectedElementStyle = (styleProperty, editor, format) => {
+  try {
+    if (!editor.selection) {
+      return "";
+    }
+    if (Range.isCollapsed(editor.selection)) {
+      return "";
+    }
+    if (format) {
+      const value = activeMark(editor, format, true);
+      if (value) {
+        return value;
+      }
+    }
+    const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+    const selectedDomNode = domRange.commonAncestorContainer;
+
+    // If it's a text node, get its parent element
+    const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
+    if (selectedElement) {
+      return getElementProperty(selectedElement, styleProperty);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -152,7 +222,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
     });
   }
 };
-export const activeMark = (editor, format) => {
+export const activeMark = (editor, format, noDefaultValue) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
@@ -162,7 +232,7 @@ export const activeMark = (editor, format) => {
   };
   try {
     const marks = Editor.marks(editor);
-    let defaultValue = defaultMarkData[format];
+    let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
     const {
       selection
     } = editor || {};
@@ -179,6 +249,31 @@ export const activeMark = (editor, format) => {
     return null;
   }
 };
+
+// to avoid the styles, that automatically assign from themes
+const getThemeMarkedLeaf = (leaf, children) => {
+  const {
+    italic,
+    bold
+  } = leaf || {};
+  const style = {};
+  if (italic === false) {
+    style.fontStyle = "normal";
+  }
+  if (bold === false) {
+    style.fontWeight = "normal";
+  }
+  if (Object.keys(style).length) {
+    children = /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        "& span": style
+      },
+      children: children
+    });
+  }
+  return children;
+};
 export const getMarked = (leaf, children, theme) => {
   const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.highlight) {
@@ -205,6 +300,7 @@ export const getMarked = (leaf, children, theme) => {
       children: children
     });
   }
+  children = getThemeMarkedLeaf(leaf, children);
   if (leaf.strikethrough) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
@@ -232,20 +328,27 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = leaf?.fontFamily;
     const textStyles = getTextColor(leaf?.color);
+    const fontSize = {
+      lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+      ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
+    };
+    const fontSizesImportant = {};
+    Object.entries(fontSize).forEach(([key, value]) => {
+      fontSizesImportant[key] = `${value} !important`;
+    });
+    const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
     children = /*#__PURE__*/_jsx("span", {
-      style: {
-        background: leaf.bgColor
-      },
       children: /*#__PURE__*/_jsx(Box, {
         className: `${className} leaf-item`,
         component: "span",
         sx: {
-          ...groupByBreakpoint({
-            fontSize: {
-              lg: sizeMap[leaf.fontSize] || leaf.fontSize,
-              ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-            }
-          }, theme),
+          "& span": {
+            // fontSize: fontSizesImportant,
+            // ...groupByBreakpoint(fontSizesImportant, theme),
+            background: leaf.bgColor,
+            ...fontSizeWithBreakpoints
+          },
+          ...fontSizeWithBreakpoints,
           // ...wrapThemeBreakpoints(
           //   {
           //     lg: sizeMap[leaf.fontSize] || leaf.fontSize,
@@ -292,17 +395,28 @@ export const getBlock = props => {
     children,
     customProps
   } = props;
+  const {
+    customLineHeight
+  } = customProps || {};
   const attributes = props.attributes ?? {};
   const isEmpty = isEmptyTextNode(element);
   const {
     translation
   } = customProps;
+  const commonHeadingProps = () => ({
+    ...attributes,
+    ...element.attr,
+    className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
+  });
+  const commonParaProps = paraType => ({
+    ...attributes,
+    ...element.attr,
+    className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
+  });
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsxs("h1", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 1"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
@@ -310,9 +424,7 @@ export const getBlock = props => {
       });
     case "headingTwo":
       return /*#__PURE__*/_jsxs("h2", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 2"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
@@ -320,9 +432,7 @@ export const getBlock = props => {
       });
     case "headingThree":
       return /*#__PURE__*/_jsxs("h3", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 3"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
@@ -330,9 +440,7 @@ export const getBlock = props => {
       });
     case "headingFour":
       return /*#__PURE__*/_jsxs("h4", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 4"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
@@ -340,9 +448,7 @@ export const getBlock = props => {
       });
     case "headingFive":
       return /*#__PURE__*/_jsxs("h5", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 5"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
@@ -350,14 +456,30 @@ export const getBlock = props => {
       });
     case "headingSix":
       return /*#__PURE__*/_jsxs("h6", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 6"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
       });
+    case "paragraphOne":
+      return /*#__PURE__*/_jsx("p", {
+        ...commonParaProps("para1"),
+        placeholder: "Paragraph 1",
+        children: children
+      });
+    case "paragraphTwo":
+      return /*#__PURE__*/_jsx("p", {
+        ...commonParaProps("para2"),
+        placeholder: "Paragraph 2",
+        children: children
+      });
+    case "paragraphThree":
+      return /*#__PURE__*/_jsx("p", {
+        ...commonParaProps("para3"),
+        placeholder: "Paragraph 3",
+        children: children
+      });
     case "blockquote":
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,
@@ -371,7 +493,7 @@ export const getBlock = props => {
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
           borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
-          lineHeight: 1.43
+          lineHeight: `${customLineHeight} !important`
         },
         children: children
       });
@@ -425,14 +547,15 @@ export const getBlock = props => {
         className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: translation("List"),
         style: {
-          color: firstChildren?.color
+          color: firstChildren?.color,
+          lineHeight: `${customLineHeight} !important`
         },
         children: children
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
         style: {
-          lineHeight: 1.43
+          lineHeight: `${customLineHeight} !important`
         },
         className: "listItemMargin",
         type: "1",
@@ -442,7 +565,7 @@ export const getBlock = props => {
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
         style: {
-          lineHeight: 1.43
+          lineHeight: `${customLineHeight} !important`
         },
         className: "listItemMargin",
         ...attributes,