@flozy/editor 5.3.0 → 5.3.2

package/dist/Editor/common/iconListV2.js

@@ -940,59 +940,6 @@ export function CalendlyIcon() {
     })]
   });
 }
-export function DragIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "16",
-    height: "12",
-    viewBox: "0 0 10 6",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "dragIcon",
-    children: [/*#__PURE__*/_jsx("ellipse", {
-      cx: "1.49462",
-      cy: "4.42384",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 1.49462 4.42384)",
-      fill: "#94A3B8"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "4.99999",
-      cy: "4.42384",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 4.99999 4.42384)",
-      fill: "#94A3B8"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "8.50732",
-      cy: "4.42384",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 8.50732 4.42384)",
-      fill: "#94A3B8"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "1.49462",
-      cy: "0.91993",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 1.49462 0.91993)",
-      fill: "#94A3B8"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "4.99999",
-      cy: "0.91993",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 4.99999 0.91993)",
-      fill: "#94A3B8"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "8.50732",
-      cy: "0.91993",
-      rx: "0.779289",
-      ry: "0.779289",
-      transform: "rotate(-90 8.50732 0.91993)",
-      fill: "#94A3B8"
-    })]
-  });
-}
 export function LeftAlignTextFormat() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "19",
@@ -1245,4 +1192,57 @@ export function CodeElementIcon() {
       strokeLinejoin: "round"
     })]
   });
+}
+export function DragIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "12",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "dragIcon",
+    children: [/*#__PURE__*/_jsx("ellipse", {
+      cx: "1.49462",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 1.49462 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "4.99999",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 4.99999 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.50732",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 8.50732 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "1.49462",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 1.49462 0.91993)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "4.99999",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 4.99999 0.91993)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.50732",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 8.50732 0.91993)",
+      fill: "#94A3B8"
+    })]
+  });
 }

package/dist/Editor/common/iconslist.js

@@ -1346,19 +1346,22 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M10.1733 6.125V14.875",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.79834 10.5H14.5483",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   })]
 });
 export const FormIcon = () => {

package/dist/Editor/commonStyle.js

@@ -252,6 +252,15 @@ const useCommonStyle = theme => ({
         border: `1px solid transparent !important`
       }
     }
+  },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/helper/enforceDateFormat.js

@@ -0,0 +1,41 @@
+function enforceDateFormat(inputElement) {
+  inputElement.addEventListener("input", event => {
+    const input = event.target;
+    let value = input.value;
+
+    // Allow only numbers and forward slashes
+    value = value.replace(/[^\d/]/g, "");
+
+    // Enforce MM/DD/YYYY structure
+    if (value.length > 10) {
+      value = value.slice(0, 10);
+    }
+    const parts = value.split("/");
+    if (parts.length > 1) {
+      parts[0] = parts[0].slice(0, 2); // Limit MM to 2 digits
+      if (parts[0] > 12) parts[0] = "12"; // Max month value
+    }
+
+    if (parts.length > 2) {
+      parts[1] = parts[1].slice(0, 2); // Limit DD to 2 digits
+      if (parts[1] > 31) parts[1] = "31"; // Max day value
+    }
+
+    if (parts.length > 3) {
+      parts[2] = parts[2].slice(0, 4); // Limit YYYY to 4 digits
+    }
+
+    input.value = parts.join("/");
+
+    // Optionally, validate the full date
+    if (input.value.length === 10) {
+      const [month, day, year] = input.value.split("/").map(Number);
+      const isValidDate = !isNaN(Date.parse(`${year}-${month}-${day}`));
+      if (!isValidDate) {
+        input.value = ""; // Clear input if invalid
+        alert("Invalid date format. Please enter a valid MM/DD/YYYY date.");
+      }
+    }
+  });
+}
+export default enforceDateFormat;

package/dist/Editor/helper/index.js

@@ -308,7 +308,13 @@ export const getTextColor = (color = "") => {
     color: "transparent !important",
     caretColor: "black",
     "& span": {
-      color: "transparent !important"
+      color: "transparent !important",
+      "& ::selection": {
+        color: "#000 !important"
+      }
+    },
+    "& ::selection": {
+      color: "#000 !important"
     }
   } : {
     color
@@ -331,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);
@@ -360,4 +366,11 @@ export const clearBrainText = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const clearSelectionOnly = editor => {
+  try {
+    Transforms.deselect(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/helper/theme.js

@@ -147,4 +147,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBreakpointLineSpacing = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const value = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: value
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal["lg"];
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -35,6 +35,7 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState({});
+  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
+    setFontFamilies,
+    activeBreakPoint,
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/plugins/withEmbeds.js

@@ -40,32 +40,36 @@ const withEmbeds = editor => {
     }
   };
   editor.insertBreak = (...args) => {
-    const parentPath = Path.parent(editor.selection.focus.path);
-    const parentNode = Node.get(editor, parentPath);
-    if (editor.isVoid(parentNode)) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else {
-      insertBreak(...args);
+    try {
+      const parentPath = Path.parent(editor.selection.focus.path);
+      const parentNode = Node.get(editor, parentPath);
+      if (editor.isVoid(parentNode)) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else {
+        insertBreak(...args);
+      }
+    } catch (err) {
+      console.log(err);
     }
   };
   return editor;

package/dist/Editor/plugins/withHTML.js

@@ -2,6 +2,8 @@ import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
+const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
+const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -61,13 +63,18 @@ const insertAtNextNode = (editor, formattedFragment) => {
     console.log(err);
   }
 };
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
-};
+
+// const handleInsert = (editor, defaultInsert, fragment = []) => {
+//   if (
+//     getCurrentElementText(editor) &&
+//     fragment.some((f) => f.type === "table")
+//   ) {
+//     insertAtNextNode(editor, fragment);
+//   } else {
+//     defaultInsert();
+//   }
+// };
+
 const getTableCellChild = (fragment = []) => {
   const table = fragment.find(node => node.type === "table");
   const row = table?.children?.find(node => node.type === "table-row");
@@ -120,7 +127,10 @@ const withHtml = editor => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
-    let eltype = currentEl?.type;
+    const eltype = currentEl?.type;
+    const firstNode = editor?.children?.[0];
+    const titlePath = firstNode?.type === "topbanner" ? 1 : 0;
+    const isTitlePath = editor.needLayout && editor?.selection?.anchor?.path[0] === titlePath;
     if (slateHTML && !formatFragment[eltype]) {
       const [tableCellNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
@@ -170,22 +180,38 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        const isTextNode = ALLOWED_TEXT_NODES.includes(decoded?.[0]?.type);
+        if (isTitlePath && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        const currentText = getCurrentElementText(editor);
+        if (currentText && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const rootElement = parsed.body || parsed.documentElement;
+      const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
         if (editor.isChatEditor) {
           return;
         }
-        const table = parsed.body.querySelector("table");
+        const table = rootElement.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
           colGrp.remove();
         }
         const fragment = deserialize(table);
-        Transforms.insertFragment(editor, [fragment]);
+        if (isTitlePath) {
+          insertAtNextNode(editor, [fragment]);
+        } else {
+          Transforms.insertFragment(editor, [fragment]);
+        }
         return;
       }
       const fragment = deserialize(parsed.body);
@@ -199,7 +225,16 @@ const withHtml = editor => {
       if (editor.isChatEditor && is_img_table) {
         return;
       }
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      if (isTitlePath && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      const currentText = getCurrentElementText(editor);
+      if (currentText && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -58,7 +58,49 @@ const withLayout = editor => {
         Transforms.insertNodes(editor, paragraph, {
           at: path.concat(1)
         });
+        return;
       }
+
+      // Transforms.insertNodes(editor, paragraph, { at: [0] });
+      // const extractFirstText = (node) => {
+      //   if (node.text) {
+      //     return node.text;
+      //   }
+      //   if (node.children) {
+      //     for (const child of node.children) {
+      //       const text = extractFirstText(child);
+      //       if (text) {
+      //         return text;
+      //       }
+      //     }
+      //   }
+      //   return "";
+      // };
+
+      // const extractRemainingNodes = (node) => {
+      //   if (!node.children) {
+      //     return [];
+      //   }
+      //   const [, ...remainingChildren] = node.children;
+      //   return remainingChildren.map((child) => ({ ...child }));
+      // };
+
+      // const firstNode = editor.children[0];
+      // const firstContent = extractFirstText(firstNode);
+
+      // if (firstNode.type !== "title") {
+      //   const titleNode = {
+      //     type: "title",
+      //     children: [{ text: firstContent }],
+      //   };
+      //   Transforms.removeNodes(editor, { at: [0] });
+      //   Transforms.insertNodes(editor, titleNode, { at: [0], select: true });
+      //   const remainingNodes = extractRemainingNodes(firstNode);
+      //   if (remainingNodes.length > 0) {
+      //     Transforms.insertNodes(editor, remainingNodes, { at: [1] });
+      //   }
+      // }
+
       ORDERS_LAYOUT.forEach((enforce, index) => {
         if (index < editor.children.length) {
           const existsNode = Node.get(editor, [index]);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -43,6 +43,9 @@ import Code from "../Elements/EmbedScript/Code";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
 import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
+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 { jsx as _jsx } from "react/jsx-runtime";
@@ -152,7 +155,7 @@ export const activeMark = (editor, format) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
-    fontSize: "normal",
+    fontSize: "14px",
     fontFamily: "PoppinsRegular",
     fontWeight: "normal"
   };
@@ -237,7 +240,8 @@ export const getMarked = (leaf, children, theme) => {
           // },
           ...textStyles,
           fontFamily: family,
-          fontWeight: leaf.fontWeight
+          fontWeight: leaf.fontWeight,
+          WebkitTextFillColor: 'unset !important'
         },
         children: children
       })
@@ -246,7 +250,6 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        background: "#EAEBFE",
         color: "inherit"
       },
       children: children
@@ -309,7 +312,8 @@ export const getBlock = props => {
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
-          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
+          lineHeight: 1.43
         },
         children: children
       });
@@ -369,6 +373,9 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -376,6 +383,9 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         ...attributes,
         children: children
@@ -564,6 +574,19 @@ export const getBlock = props => {
         contentEditable: false,
         children: children
       });
+    // Data View
+    case "dataView":
+      return /*#__PURE__*/_jsx(DataView, {
+        ...props
+      });
+    case "viewData":
+      return /*#__PURE__*/_jsx(ViewData, {
+        ...props
+      });
+    case "columnView":
+      return /*#__PURE__*/_jsx(ColumnView, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
+      left: 24,
+      top: 10,
+      right: 24,
+      bottom: 10
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "../font";
 import Mentions from "../../Elements/Mentions/Mentions";
 import CheckList from "../../Elements/List/CheckList";
+import SimpleText from "../../Elements/SimpleText";
 import { isEmptyTextNode } from "../../helper";
 import { getBreakPointsValue } from "../../helper/theme";
 import insertNewLine from "../insertNewLine";
@@ -15,6 +16,20 @@ const LIST_FORMAT_TYPE = {
   unorderedList: "list-item"
 };
 const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
+export const serializeMentions = node => {
+  try {
+    if (node?.type === 'mention') {
+      return [node.character];
+    }
+    let children = Array.isArray(node) ? node : node?.children;
+    children = children && Array.isArray(children) ? children : [];
+    let mentions = children.map(child => serializeMentions(child)).flat();
+    return mentions.filter(Boolean);
+  } catch (err) {
+    console.log(err);
+    return [];
+  }
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -245,6 +260,13 @@ export const getBlock = props => {
         ,
         children: children
       });
+    case "title":
+      return /*#__PURE__*/_jsx("h3", {
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        children: children
+      });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
         ...attributes,
@@ -342,6 +364,9 @@ export const getBlock = props => {
         ...props
       });
     default:
-      return null;
+      return /*#__PURE__*/_jsx(SimpleText, {
+        ...props,
+        isEmpty: isEmpty
+      });
   }
 };