@flozy/editor 3.8.8 → 3.8.9

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +23,11 @@ const BannerSpacing = props => {
     lockSpacing = true;
   }
   const [size] = useWindowResize();
-  const value = getBreakPointsValue(val, size?.device);
+  const pro_value = getBreakPointsValue(val, size?.device);
+  const [value, setValue] = useState(pro_value);
+  useState(() => {
+    setValue(pro_value);
+  }, [pro_value]);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -31,13 +35,16 @@ const BannerSpacing = props => {
         changeAll[m] = e.target.value;
       });
     }
+    const up_value = {
+      ...value,
+      ...changeAll,
+      [e.target.name]: e.target.value
+    };
     onChange({
       [key]: {
         ...getBreakPointsValue(val, null),
         [size?.device]: {
-          ...value,
-          ...changeAll,
-          [e.target.name]: e.target.value
+          ...up_value
         }
       }
     });
@@ -78,12 +85,10 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
-        className: "sliderInput removeScroll",
+        value: !lockSpacing ? "" : pro_value?.top,
+        className: "sliderInput",
         disabled: !lockSpacing,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,54 +130,50 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "top",
-                value: getCustomizationValue(value?.top),
-                className: "borderInput removeScroll",
+                value: value?.top,
+                className: "borderInput",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "right",
-                value: getCustomizationValue(value?.right),
-                className: "borderInput removeScroll",
+                value: value?.right,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "bottom",
-                value: getCustomizationValue(value?.bottom),
-                className: "borderInput removeScroll",
+                value: value?.bottom,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "left",
-                className: "borderInput removeScroll",
-                value: getCustomizationValue(value?.left),
+                className: "borderInput",
+                value: value?.left,
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             })]
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,13 +80,11 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
-        className: "sliderInput removeScroll",
+        value: !lockRadius ? "" : value?.topLeft || 0,
+        className: "sliderInput",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -127,10 +125,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topLeft",
-            value: getCustomizationValue(value?.topLeft),
-            className: "borderInput removeScroll",
+            value: value?.topLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -138,10 +136,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topRight",
-            value: getCustomizationValue(value?.topRight),
-            className: "borderInput removeScroll",
+            value: value?.topRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -150,10 +148,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomLeft",
-            value: getCustomizationValue(value?.bottomLeft),
-            className: "borderInput removeScroll",
+            value: value?.bottomLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -162,10 +160,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomRight",
-            value: getCustomizationValue(value?.bottomRight),
-            className: "borderInput removeScroll",
+            value: value?.bottomRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,23 +6,12 @@ const SelectBox = props => {
   const {
     value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
     placeholder
   } = data;
-  const [checkedValue, setCheckedValue] = useState(false);
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
-      setCheckedValue(true);
-      isFirstRender.current = false;
-    } else {
-      setCheckedValue(value);
-    }
-  }, [elementProps.element, value]);
   const handleChange = e => {
     onChange({
       [key]: e.target.checked
@@ -37,7 +26,7 @@ const SelectBox = props => {
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
-        checked: checkedValue,
+        checked: value,
         onChange: handleChange
       }),
       label: placeholder

package/dist/Editor/common/StyleBuilder/fieldTypes/text.js

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { Grid, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Text = props => {
   const {
-    value,
+    value: pro_value,
     data,
     onChange
   } = props;
@@ -13,7 +13,9 @@ const Text = props => {
     placeholder,
     width
   } = data;
+  const [value, setValue] = useState(pro_value);
   const handleChange = e => {
+    setValue(e.target.value);
     onChange({
       [key]: e.target.value
     });

package/dist/Editor/common/StyleBuilder/index.js

@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const StyleContent = props => {
+export const StyleContent = props => {
   const {
     value,
     renderTabs,
@@ -87,7 +87,7 @@ const StyleBuilder = props => {
       ...data,
       field_type: data?.element
     });
-    if (data?.hasOwnProperty('name')) {
+    if (data?.hasOwnProperty("name")) {
       setElementProps({
         ...elementProps,
         ...data,

package/dist/Editor/common/StyleBuilder/sectionStyle.js

@@ -1,4 +1,12 @@
-const gridStyle = [{
+const sectionStyle = [{
+  tab: "General",
+  value: "sectionName",
+  fields: [{
+    label: "Section Name",
+    key: "sectionName",
+    type: "text"
+  }]
+}, {
   tab: "Colors",
   value: "sectionColors",
   fields: [{
@@ -21,6 +29,7 @@ const gridStyle = [{
 }, {
   tab: "Padding",
   value: "sectionBannerSpacing",
+  hideOnFGS: true,
   fields: [{
     label: "Padding",
     key: "sectionBannerSpacing",
@@ -37,6 +46,7 @@ const gridStyle = [{
 }, {
   tab: "Position",
   value: "position",
+  hideOnFGS: true,
   fields: [{
     label: "Set Postion (Vertical & Horizantal)",
     key: "sectionAlignment",
@@ -45,10 +55,11 @@ const gridStyle = [{
 }, {
   tab: "Size",
   value: "gridSize",
+  hideOnFGS: true,
   fields: [{
     label: "Width Size",
     key: "sectionGridSize",
     type: "gridSize"
   }]
 }];
-export default gridStyle;
+export default sectionStyle;

package/dist/Editor/helper/RnD/focusOnNewItem.js

@@ -0,0 +1,39 @@
+import { Node } from "slate";
+import { ReactEditor } from "slate-react";
+function safeToDOMNode(editor, node, np, extProps) {
+  try {
+    if (Node.has(editor, node)) {
+      const domNode = ReactEditor.toDOMNode(editor, node);
+      return domNode;
+    }
+  } catch (error) {
+    console.error("Focusing Again");
+    focusOnNewItem(editor, np, extProps);
+  }
+  return null;
+}
+function focusOnNewItem(editor, newPath, extProps) {
+  try {
+    const sectionNode = Node.get(editor, newPath);
+    requestAnimationFrame(() => {
+      const domNode = safeToDOMNode(editor, sectionNode, newPath, extProps);
+      if (domNode) {
+        const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
+        if (sectionDom) {
+          sectionDom.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+          extProps?.setSelectedElement({
+            enable: 1,
+            path: [...newPath].join("|"),
+            cursor: "move"
+          });
+        }
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
+}
+export default focusOnNewItem;

package/dist/Editor/helper/RnD/scrollToNewSection.js

@@ -0,0 +1,24 @@
+import { Node } from "slate";
+import { ReactEditor } from "slate-react";
+function scrollToNewSection(editor, newPath, extProps) {
+  try {
+    const sectionNode = Node.get(editor, newPath);
+    requestAnimationFrame(() => {
+      const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
+      if (sectionDom) {
+        sectionDom.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        extProps?.setSelectedElement({
+          enable: 1,
+          path: [...newPath, 0].join("|"),
+          cursor: "move"
+        });
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
+}
+export default scrollToNewSection;

package/dist/Editor/helper/breakpoint.js

@@ -0,0 +1,5 @@
+export function CssVar(device = "lg", key, props) {
+  const keyTo = `${key}_${device}`;
+  const value = props[keyTo] === undefined ? props[key] : props[keyTo];
+  return value;
+}

package/dist/Editor/helper/index.js

@@ -1,9 +1,12 @@
+import { Editor, Transforms, Path } from "slate";
+import { ReactEditor } from "slate-react";
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
+const RND_ITEMS = ["freegridItem", "freegridBox"];
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
     const canvas = await html2canvas(dom, {
@@ -140,6 +143,142 @@ export const isEmptyTextNode = element => {
     return false;
   }
 };
+export const clearSelection = editor => {
+  try {
+    ReactEditor.focus(editor);
+    Transforms.collapse(editor, {
+      edge: "start"
+    });
+    Transforms.deselect(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const isSelectionInNodeType = (editor, type) => {
+  const {
+    selection
+  } = editor;
+  if (selection) {
+    const [match] = Editor.nodes(editor, {
+      match: n => n.type === type,
+      mode: "lowest" // This ensures that we check the lowest node that matches the type
+    });
+
+    return {
+      selected: !!match,
+      match
+    };
+  }
+  return {
+    selected: false
+  };
+};
+export const getCaretPosition = editor => {
+  const {
+    selection
+  } = editor;
+  if (selection) {
+    const {
+      anchor
+    } = selection;
+    const {
+      path,
+      offset
+    } = anchor;
+    return path && offset ? {
+      path,
+      offset
+    } : null;
+  }
+  return null;
+};
+export const onPasteRnDNode = (editor, {
+  path,
+  children,
+  slateNodes
+}) => {
+  try {
+    const cur_root_path = Path.parent(path);
+    const parsed_node = slateNodes || JSON.parse(window.copiedNode);
+    let new_path = [...path, children.length];
+    if (RND_ITEMS.indexOf(parsed_node?.type) > -1) {
+      Transforms.insertNodes(editor, [{
+        ...parsed_node,
+        // for differentiate the items
+        left: parsed_node?.left + 20,
+        marginTop: parsed_node?.marginTop + 20,
+        // to maintain unique drop location in different section also
+        gridArea: "1 / 1 / 2 / 2"
+      }], {
+        at: new_path
+      });
+    } else {
+      // for pasting whole section
+      new_path = Path.next(cur_root_path);
+      Transforms.insertNodes(editor, [{
+        ...parsed_node
+      }], {
+        at: new_path
+      });
+    }
+    return new_path;
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const setSelection = (editor, {
+  path
+}) => {
+  try {
+    ReactEditor.focus(editor);
+    const point = {
+      path,
+      offset: 0
+    };
+    Transforms.select(editor, {
+      anchor: point,
+      focus: point
+    });
+    ReactEditor.focus(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const focusSelection = (editor, {
+  path
+}) => {
+  try {
+    ReactEditor.focus(editor);
+    const selectedNode = Node.get(editor, path);
+    const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
+    selectedDOM.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const bringItemToFB = (editor, {
+  path,
+  moveFront
+}) => {
+  try {
+    const itemNode = Node.get(editor, path);
+    const {
+      zIndex
+    } = itemNode;
+    let arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
+    arrangeIndex = moveFront ? arrangeIndex + 1 : arrangeIndex - 1;
+    Transforms.setNodes(editor, {
+      zIndex: Math.min(arrangeIndex, editor.children.length)
+    }, {
+      at: path
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const debounce = function (func, wait, immediate) {
   let timeout;
   return function () {
@@ -154,26 +293,4 @@ export const debounce = function (func, wait, immediate) {
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
-};
-export const getTextColor = (color = "") => {
-  return color?.indexOf("gradient") >= 0 ? {
-    background: color?.concat("text"),
-    WebkitBackgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    color: "transparent",
-    caretColor: "black"
-  } : {
-    color
-  };
-};
-export const getBorderColor = (borderColor = "") => {
-  const borderStyle = borderColor ? {
-    border: "1px solid"
-  } : {};
-  if (borderColor?.indexOf("gradient") >= 0) {
-    borderStyle.borderImage = `${borderColor} 1`;
-  } else {
-    borderStyle.borderColor = borderColor;
-  }
-  return borderStyle;
 };

package/dist/Editor/helper/theme.js

@@ -6,6 +6,12 @@ export const breakpoints = {
 };
 export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
 export const getDevice = width => {
+  // stimulated environment
+  const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+  const etDataset = breakpoint?.dataset;
+  if (etDataset?.breakpoint) {
+    return etDataset?.breakpoint;
+  }
   if (width > 0 && width < breakpoints.mobile) {
     return "xs";
   } else {
@@ -42,7 +48,7 @@ const overrides = {
     return `${val?.widthInPercent || 100}%`;
   },
   overrideReSizeH: val => {
-    return `${val?.height}px`;
+    return val ? `${val?.height}px` : "auto";
   },
   overrideBorderRadius: val => {
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
@@ -98,4 +104,46 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
     console.log(err);
   }
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBRValue = (props, rbr = "lg") => {
+  const {
+    value,
+    breakpoint,
+    ot,
+    ov
+  } = props;
+  const val = getBreakPointsValue(value, breakpoint, ot, ov);
+  return val[rbr] || val["lg"];
+};
+const isObject = value => {
+  return Object.prototype.toString.call(value) === "[object Object]";
+};
+export const groupByBreakpoint = (styleProps, theme) => {
+  const tProps = Object.keys(styleProps);
+  const groupedXS = tProps.reduce((a, b) => {
+    if (isObject(styleProps[b])) {
+      a[b] = styleProps[b]["xs"];
+      if (b === "height" && !a[b]) {
+        a[b] = "auto";
+      }
+    } else {
+      a[b] = styleProps[b];
+    }
+    return a;
+  }, {});
+  const groupedLG = tProps.reduce((a, b) => {
+    if (isObject(styleProps[b])) {
+      a[b] = styleProps[b]["lg"] || styleProps[b];
+    } else {
+      a[b] = styleProps[b];
+    }
+    return a;
+  }, {});
+  return {
+    [theme.breakpoints.up("lg")]: {
+      ...groupedLG
+    },
+    [theme.breakpoints.between("xs", "md")]: {
+      ...groupedXS
+    }
+  };
+};

package/dist/Editor/hooks/useBreakpoints.js

@@ -0,0 +1,34 @@
+import { useMediaQuery } from "@mui/material";
+export const STIMULATOR_MOCK = {
+  xs: "@media (min-width: 1200px) and (max-width: 1980px)"
+};
+export const isStimulator = () => {
+  try {
+    const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+    const etDataset = breakpoint?.dataset;
+    if (etDataset?.breakpoint) {
+      return etDataset?.breakpoint;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const useBreakpoints = theme => {
+  const lg = useMediaQuery(theme.breakpoints.up("md"));
+  const xs = useMediaQuery(theme.breakpoints.between("xs", "md"));
+
+  // if stimulated environment
+  const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+  const etDataset = breakpoint?.dataset;
+  if (etDataset?.breakpoint) {
+    return etDataset?.breakpoint;
+  }
+  if (lg) {
+    return "lg";
+  } else if (xs) {
+    return "xs";
+  } else {
+    return "lg";
+  }
+};
+export default useBreakpoints;