@flozy/editor 10.6.7 → 10.6.8

package/dist/Editor/themeSettingsAI/style.js

@@ -0,0 +1,332 @@
+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",
+    flexWrap: "wrap"
+  },
+  ".flexItem": {
+    maxWidth: "50%",
+    flex: "1 1 50%" /* allow shrink and grow but cap at 50% */,
+    minWidth: 0 /* important for flex children */
+  },
+
+  ".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",
+      lineHeight: "1.75 !important",
+      "@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

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range, Path } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -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 { getBreakpointLineSpacing, getBreakPointsValue, getDevice, groupByBreakpoint } from "../helper/theme";
+import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, getElementProperty, textThemeFields } 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,17 +47,70 @@ 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";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
-const list_types = ["orderedList", "unorderedList"];
+const list_types = ["orderedList", "unorderedList", "accordion-details"];
 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"];
+const convertAccordionToListItem = (editor, format) => {
+  const accordionLists = Array.from(Editor.nodes(editor, {
+    match: n => {
+      let accordionList = false;
+      if (n.type === "accordion") {
+        const [summary] = n.children;
+        accordionList = [format, "paragraph"].includes(summary.children?.[0]?.type);
+      }
+      return accordionList;
+    }
+  }));
+  accordionLists?.forEach(accordionList => {
+    const [node, path] = accordionList;
+    const [summary, details] = node.children;
+    const listItem = {
+      ...(summary.children[0] || {})
+    };
+    const isPara = listItem.type === "paragraph";
+    if (isPara) {
+      listItem.type = "list-item";
+    }
+
+    // Replace the accordion with the format
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    Transforms.insertNodes(editor, listItem, {
+      at: path
+    });
+    if (isPara) {
+      Transforms.wrapNodes(editor, {
+        type: format,
+        children: []
+      }, {
+        at: path
+      });
+    }
+    const nextPath = Path.next(path);
+    Transforms.insertNodes(editor, details.children, {
+      at: nextPath
+    });
+  });
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
-  const isActive = isBlockActive(editor, format);
+  let isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
   const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
@@ -79,17 +132,33 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
     });
     return;
   }
-  Transforms.unwrapNodes(editor, {
-    match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
-    split: true
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
+    mode: "lowest" // To ensure it's the closest parent
   });
 
+  if (match) {
+    const [matchNode, matchPath] = match;
+    if (matchNode.type !== "accordion-details") {
+      Transforms.unwrapNodes(editor, {
+        match: (n, n2) => {
+          const isList = !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type);
+          return isList && n2.toString() === matchPath.toString();
+        },
+        split: true
+      });
+    } else {
+      isActive = false;
+    }
+  }
+
   // inserting blocks from "/"" commands remove searched word
   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) {
@@ -98,9 +167,12 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
       children: []
     });
   }
-  if (NEWLINESAFTER.indexOf(format) > -1) {
-    insertNewLine(editor);
-  }
+
+  // if (NEWLINESAFTER.indexOf(format) > -1) {
+  //   insertNewLine(editor);
+  // }
+
+  convertAccordionToListItem(editor, format);
 };
 export const addMarkData = (editor, data) => {
   try {
@@ -110,9 +182,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);
   }
@@ -126,12 +203,76 @@ 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
   });
   return !!match;
 };
+export const isListActive = editor => {
+  const list_types = ["orderedList", "unorderedList", "check-list-item", "accordion"];
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
+    mode: "lowest" // To ensure it's the closest parent
+  });
+
+  if (match) {
+    const [matchNode] = match;
+    return matchNode.type;
+  }
+};
 export const getBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -151,7 +292,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
     });
   }
 };
-export const activeMark = (editor, format) => {
+export const activeMark = (editor, format, noDefaultValue) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
@@ -161,7 +302,7 @@ export const activeMark = (editor, format) => {
   };
   try {
     const marks = Editor.marks(editor);
-    let defaultValue = defaultMarkData[format];
+    let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
     const {
       selection
     } = editor || {};
@@ -178,6 +319,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" : "";
   const lineH = leaf?.lineHeight;
@@ -207,6 +373,7 @@ export const getMarked = (leaf, children, theme) => {
       children: children
     });
   }
+  children = getThemeMarkedLeaf(leaf, children);
   if (leaf.strikethrough) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
@@ -234,6 +401,15 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || 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
@@ -242,12 +418,13 @@ export const getMarked = (leaf, children, theme) => {
         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,
@@ -299,6 +476,16 @@ export const getBlock = props => {
   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}`
+  });
   const breakpoint = getDevice(window.innerWidth);
   const lineH = element?.children[0]?.lineHeight;
   const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
@@ -351,6 +538,24 @@ export const getBlock = props => {
         placeholder: translation("Heading 6"),
         children: children
       });
+    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,