@flozy/editor 4.0.1 → 4.0.2

package/dist/Editor/themeSettingsAI/style.js

@@ -0,0 +1,247 @@
+const style = () => ({
+  ".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: "8px",
+    boxShadow: "0px 4px 10px 0px #00000026",
+    border: "1px solid #2563EB",
+    background: "#EBF1F9",
+    height: "34px",
+    textTransform: "unset"
+  },
+  ".seondaryOutlineBtn": {
+    border: "1px solid #D8DDE1",
+    borderRadius: "8px",
+    // boxShadow: "0px 4px 10px 0px #00000026",
+    height: "34px",
+    textTransform: "unset",
+    background: "#eceef3",
+    color: "#64748B"
+  },
+  ".blueBtn": {
+    boxShadow: "0px 4px 10px 0px #00000026",
+    background: "#2563EB",
+    borderRadius: "8px",
+    textTransform: "unset",
+    height: "34px",
+    color: "#fff",
+    "&.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"
+  }
+});
+export default style;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range } from "slate";
 import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -32,14 +32,14 @@ import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
-import { getTextColor, isEmptyTextNode } from "../helper";
+import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakPointsValue } from "../helper/theme";
+import { getBreakPointsValue, textThemeFields } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
-import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
+import { ReactEditor } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -47,7 +47,17 @@ const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
-const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
+
+// 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);
@@ -80,8 +90,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) {
@@ -90,10 +101,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);
@@ -102,9 +115,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);
   }
@@ -118,6 +136,53 @@ 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) => {
+  try {
+    if (!editor.selection) {
+      return "";
+    }
+    if (Range.isCollapsed(editor.selection)) {
+      return "";
+    }
+    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) {
+      const computedStyle = window.getComputedStyle(selectedElement);
+      return computedStyle.getPropertyValue(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
@@ -160,6 +225,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) => {
   const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.bold) {
@@ -177,6 +267,7 @@ export const getMarked = (leaf, children) => {
       children: children
     });
   }
+  children = getThemeMarkedLeaf(leaf, children);
   if (leaf.strikethrough) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
@@ -203,18 +294,29 @@ export const getMarked = (leaf, children) => {
   // cover under single span
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = fontFamilyMap[leaf?.fontFamily];
-    const textStyles = getTextColor(leaf?.color);
+    const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
+      background: leaf?.color?.concat("text"),
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    } : {
+      color: 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`;
+    });
     children = /*#__PURE__*/_jsx("span", {
-      style: {
-        background: leaf.bgColor
-      },
       children: /*#__PURE__*/_jsx(Box, {
         className: className,
         component: "span",
         sx: {
-          fontSize: {
-            lg: sizeMap[leaf.fontSize] || leaf.fontSize,
-            ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
+          "& span": {
+            fontSize: fontSizesImportant,
+            background: leaf.bgColor
           },
           ...textStyles,
           fontFamily: family,
@@ -244,31 +346,71 @@ export const getBlock = props => {
   } = props;
   const attributes = props.attributes ?? {};
   const isEmpty = isEmptyTextNode(element);
+  const commonHeadingProps = () => ({
+    ...attributes,
+    ...element.attr,
+    className: `content-editable ${isEmpty ? "empty" : ""} theme-element`
+  });
+  const commonParaProps = paraType => ({
+    ...attributes,
+    ...element.attr,
+    className: `content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
+  });
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsx("h1", {
-        ...attributes,
-        ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: "Heading 1",
         children: children
       });
     case "headingTwo":
       return /*#__PURE__*/_jsx("h2", {
-        ...attributes,
-        ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: "Heading 2",
         children: children
       });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
-        ...attributes,
-        ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        ...commonHeadingProps(),
         placeholder: "Heading 3",
         children: children
       });
+    case "headingFour":
+      return /*#__PURE__*/_jsx("h4", {
+        ...commonHeadingProps(),
+        placeholder: "Heading 4",
+        children: children
+      });
+    case "headingFive":
+      return /*#__PURE__*/_jsx("h5", {
+        ...commonHeadingProps(),
+        placeholder: "Heading 5",
+        children: children
+      });
+    case "headingSix":
+      return /*#__PURE__*/_jsx("h6", {
+        ...commonHeadingProps(),
+        placeholder: "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,

package/dist/Editor/utils/button.js

@@ -1,6 +1,5 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
-import { windowVar } from "./helper";
 export const insertButton = editor => {
   const button = {
     type: "button",
@@ -10,22 +9,7 @@ export const insertButton = editor => {
     buttonLink: {
       linkType: "webAddress"
     },
-    iconPosition: "start",
-    bgColor: "#2563EB",
-    textColor: "#FFF",
-    borderRadius: {
-      topLeft: 30,
-      topRight: 30,
-      bottomLeft: 30,
-      bottomRight: 30
-    },
-    bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
-    },
-    ...(windowVar.lastButtonProps || {})
+    iconPosition: "start"
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/dist/Editor/utils/events.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element, Node, Path } from "slate";
+import { Editor, Transforms, Element, Node, Path, Range } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
@@ -179,7 +179,6 @@ const checkListEnterEvent = (editor, type) => {
 export const enterEvent = (e, editor, isMobile) => {
   try {
     const ele = isListItem(editor);
-
     // on shift enter break line in same node
     if (e.shiftKey && !isMobile) {
       e.preventDefault();
@@ -188,6 +187,7 @@ export const enterEvent = (e, editor, isMobile) => {
       const {
         type
       } = ele[0];
+      const path = ele[1];
       const text = Node.string(ele[0]);
       switch (type) {
         case "list-item":
@@ -219,6 +219,58 @@ export const enterEvent = (e, editor, isMobile) => {
             insertAccordion(editor, nextPath);
           }
           break;
+        case "headingOne":
+        case "headingTwo":
+        case "headingThree":
+          const {
+            selection
+          } = editor;
+          if (selection && Range.isCollapsed(selection)) {
+            const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
+            const isAtStart = Editor.isStart(editor, selection.anchor, path);
+            if (isAtEnd) {
+              e.preventDefault();
+              Transforms.insertNodes(editor, {
+                type: 'paragraph',
+                children: [{
+                  text: ''
+                }]
+              });
+              const newLocation = Editor.after(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            } else if (!isAtStart) {
+              e.preventDefault();
+              Transforms.splitNodes(editor);
+              Transforms.setNodes(editor, {
+                type: 'paragraph'
+              }, {
+                at: Editor.after(editor, selection)
+              });
+              const newLocation = Editor.after(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            } else if (isAtStart) {
+              e.preventDefault();
+              Transforms.insertNodes(editor, {
+                type: 'paragraph',
+                children: [{
+                  text: ''
+                }]
+              }, {
+                at: Editor.before(editor, selection)
+              });
+              Transforms.select(editor, Editor.before(editor, selection));
+              const newLocation = Editor.before(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            }
+            return;
+          }
+          break;
         default:
       }
     }