@flozy/editor 1.8.3 → 1.8.5

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

@@ -1,12 +1,14 @@
 import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
+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";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     elementProps
@@ -19,6 +21,8 @@ const BannerSpacing = props => {
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -28,9 +32,12 @@ const BannerSpacing = props => {
     }
     onChange({
       [key]: {
-        ...value,
-        [e.target.name]: e.target.value,
-        ...changeAll
+        ...getBreakPointsValue(val),
+        [size?.device]: {
+          ...value,
+          ...changeAll,
+          [e.target.name]: e.target.value
+        }
       }
     });
   };
@@ -64,8 +71,10 @@ const BannerSpacing = props => {
         "aria-label": "Default",
         valueLabelDisplay: "auto",
         max: 100,
+        name: "top",
         onChange: handleChange
       }), /*#__PURE__*/_jsx("input", {
+        name: "top",
         value: !lockSpacing ? "" : value?.top || 0,
         className: "sliderInput",
         disabled: !lockSpacing,

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

@@ -1,19 +1,26 @@
 import React from "react";
 import { Grid, Slider, Typography } from "@mui/material";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridSize = props => {
   const {
-    value,
+    value: val,
     data,
     onChange
   } = props;
   const {
     key
   } = data;
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     onChange({
-      [key]: e.target.value
+      [key]: {
+        ...getBreakPointsValue(val),
+        [size?.device]: e.target.value
+      }
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -27,7 +34,7 @@ const GridSize = props => {
         fontWeight: 500,
         marginBottom: "5px"
       },
-      children: ["Grid Size: ", value || 12]
+      children: [data?.label || "Grid Size", ": ", value || 12]
     }), /*#__PURE__*/_jsx("div", {
       className: "sld-wrpr",
       children: /*#__PURE__*/_jsx(Slider, {

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

@@ -1,25 +1,39 @@
 import React from "react";
 import { Grid, MenuItem, Select, Typography } from "@mui/material";
+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";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const TextOptions = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     elementProps
   } = props;
   const {
     key,
+    isBreakpoint,
     options,
     renderOption,
     width
   } = data;
+  const [size] = useWindowResize();
+  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const handleChange = e => {
-    onChange({
-      [key]: e.target.value
-    });
+    if (isBreakpoint) {
+      onChange({
+        [key]: {
+          ...getBreakPointsValue(val),
+          [size?.device]: e.target.value
+        }
+      });
+    } else {
+      onChange({
+        [key]: e.target.value
+      });
+    }
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Grid, {

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

@@ -33,6 +33,9 @@ const formStyle = [{
     width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
         children: option.text
       });
     }

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

@@ -71,9 +71,26 @@ const gridItemStyle = [{
   tab: "Size",
   value: "gridSize",
   fields: [{
-    label: "Grid Size",
+    label: "Width Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Height",
+    key: "cellGHeight",
+    type: "textOptions",
+    isBreakpoint: true,
+    options: [{
+      text: "Auto",
+      value: "auto"
+    }, {
+      text: "Full",
+      value: "100%"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Animation",

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

@@ -90,9 +90,27 @@ const gridStyle = [{
   tab: "Size",
   value: "gridSize",
   fields: [{
-    label: "Grid Size",
+    label: "Width Size",
     key: "gridSize",
     type: "gridSize"
+  }, {
+    label: "Wrap",
+    key: "flexWrap",
+    type: "textOptions",
+    width: 12,
+    isBreakpoint: true,
+    options: [{
+      text: "Wrap",
+      value: "wrap"
+    }, {
+      text: "No Wrap",
+      value: "nowrap"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Save As Template",

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

@@ -46,7 +46,7 @@ const gridStyle = [{
   tab: "Size",
   value: "gridSize",
   fields: [{
-    label: "Grid Size",
+    label: "Width Size",
     key: "sectionGridSize",
     type: "gridSize"
   }]

package/dist/Editor/helper/theme.js

@@ -0,0 +1,83 @@
+import { sizeMap } from "../utils/font";
+export const breakpoints = {
+  small: 0,
+  mobile: 600,
+  tablet: 900
+};
+export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
+export const getDevice = width => {
+  if (width > 0 && width < breakpoints.mobile) {
+    return "xs";
+  } else {
+    return "lg";
+  }
+};
+const copyAllLg = (value, ot) => {
+  return BREAKPOINTS_DEVICES.reduce((a, b) => {
+    return {
+      ...a,
+      [b]: overrides[ot] ? overrides[ot](value) : value
+    };
+  }, {});
+};
+const overrideValues = (value, ot) => {
+  return Object.keys(value).reduce((a, b) => {
+    return {
+      ...a,
+      [b]: overrides[ot] ? overrides[ot](value[b]) : value
+    };
+  }, {});
+};
+const overrides = {
+  overrideText: val => {
+    return sizeMap[val] || val;
+  },
+  overrideGridSize: val => {
+    return `${(val || 8) / 12 * 100}%`;
+  }
+};
+export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
+  try {
+    if (breakpoint) {
+      if (typeof value !== "object") {
+        return value;
+      }
+      return value ? value[breakpoint] || value["lg"] : value;
+    } else if (typeof value === "object") {
+      return !breakpoint && value["lg"] ? !ov ? value : overrideValues(value, ot) : value[breakpoint] || copyAllLg(value, ot);
+    } else {
+      // consider without breakpoints
+      return copyAllLg(value, ot);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const getTRBLBreakPoints = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const {
+          top,
+          right,
+          bottom,
+          left
+        } = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: `${top || 0}px ${right || 0}px ${bottom || 0}px ${left || 0}px`
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/hooks/useWindowMessage.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+const useWindowMessage = props => {
+  const {
+    type
+  } = props;
+  const [message, setMessage] = useState(null);
+  useEffect(() => {
+    if (window.addEventListener) {
+      window.addEventListener("message", onMessage, false);
+    } else {
+      window.attachEvent("onmessage", onMessage);
+    }
+    return () => {
+      if (window.addEventListener) {
+        window.removeEventListener("message", onMessage, false);
+      } else {
+        window.detachEvent("onmessage", onMessage);
+      }
+    };
+  }, []);
+  const onMessage = e => {
+    if (e?.data && e?.data[type]) {
+      setMessage(e?.data[type]);
+    }
+  };
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "*");
+    }
+  };
+  return [message, sendMessage];
+};
+export default useWindowMessage;

package/dist/Editor/hooks/useWindowResize.js

@@ -1,13 +1,16 @@
 import { useEffect, useState } from "react";
+import { getDevice } from "../helper/theme";
 const useWindowResize = () => {
   const [size, setSize] = useState({
     width: window.innerWidth,
-    height: window.innerHeight
+    height: window.innerHeight,
+    device: getDevice(window.innerWidth)
   });
   const onResize = () => {
     setSize({
       width: window.innerWidth,
-      height: window.innerHeight
+      height: window.innerHeight,
+      device: getDevice(window.innerWidth)
     });
   };
   useEffect(() => {

package/dist/Editor/plugins/withLayout.js

@@ -1,4 +1,30 @@
-import { Transforms, Node, Element as SlateElement, Editor } from "slate";
+import { Transforms, Node, Editor } from "slate";
+const ORDERS_LAYOUT = ["topbanner", "title", "paragraph"];
+const ORDERS_LAYOUT_VALIDATIONS = {
+  topbanner: val => {
+    if (val.type !== ORDERS_LAYOUT[0]) {
+      return "title";
+    } else {
+      return val.type;
+    }
+  },
+  title: (val, prev) => {
+    if (prev?.type === "topbanner") {
+      return "title";
+    } else if (prev?.type === "title" && val?.type !== "title") {
+      return val.type;
+    } else {
+      return "paragraph";
+    }
+  },
+  paragraph: val => {
+    if (val.type === "title") {
+      return "paragraph";
+    } else {
+      return val.type;
+    }
+  }
+};
 const withLayout = editor => {
   const {
     normalizeNode
@@ -17,7 +43,7 @@ const withLayout = editor => {
           select: true
         });
       }
-      if (editor.children.length < 2) {
+      if (editor.children.length === 0) {
         const paragraph = {
           type: "paragraph",
           children: [{
@@ -28,34 +54,23 @@ const withLayout = editor => {
           at: path.concat(1)
         });
       }
-      let prevType = "";
-      for (const [child, childPath] of Node.children(editor, path)) {
-        let type = "";
-        const slateIndex = childPath[0];
-        const enforceType = type => {
-          if (SlateElement.isElement(child) && child.type !== type) {
-            const newProperties = {
-              type
-            };
-            Transforms.setNodes(editor, newProperties, {
-              at: childPath
+      ORDERS_LAYOUT.forEach((enforce, index) => {
+        if (index < editor.children.length) {
+          const existsNode = Node.get(editor, [index]);
+          let prevNode = null;
+          if (index > 0) {
+            prevNode = Node.get(editor, [index - 1]);
+          }
+          const newType = ORDERS_LAYOUT_VALIDATIONS[enforce](existsNode, prevNode);
+          if (existsNode?.type !== newType) {
+            Transforms.setNodes(editor, {
+              type: newType
+            }, {
+              at: [index]
             });
           }
-        };
-        switch (slateIndex) {
-          case 0:
-            type = child.type === "topbanner" ? "topbanner" : "title";
-            prevType = type;
-            enforceType(type);
-            break;
-          case 1:
-            type = prevType === "topbanner" ? "title" : "paragraph";
-            enforceType(type);
-            break;
-          default:
-            break;
         }
-      }
+      });
     }
     return normalizeNode([node, path]);
   };

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,5 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
+import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
 import Image from "../Elements/Embed/Image";
@@ -34,6 +35,7 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
+import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
@@ -86,7 +88,11 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   }
 };
 export const addMarkData = (editor, data) => {
-  Editor.addMark(editor, data.format, data.value);
+  try {
+    Editor.addMark(editor, data.format, data.value);
+  } catch (err) {
+    console.log(err);
+  }
 };
 export const toggleMark = (editor, format) => {
   const isActive = isMarkActive(editor, format);
@@ -210,10 +216,13 @@ export const getMarked = (leaf, children) => {
     });
   }
   if (leaf.fontSize) {
-    const size = sizeMap[leaf.fontSize] || leaf.fontSize;
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        fontSize: size
+    children = /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        fontSize: {
+          lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+          ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
+        }
       },
       children: children
     });
@@ -484,6 +493,14 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Variables, {
         ...props
       });
+    case "topbanner":
+      return /*#__PURE__*/_jsx("span", {
+        ...props,
+        style: {
+          display: "none"
+        },
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/pageSettings.js

@@ -1,4 +1,21 @@
 import { Editor, Transforms, Element } from "slate";
+export const findPageSettings = editor => {
+  try {
+    console.log(editor?.children);
+    return {
+      element: editor?.children?.find(f => f.type === "page-settings")
+    };
+  } catch (err) {
+    return {
+      path: null,
+      element: {
+        pageProps: {
+          pageWidth: "fixed"
+        }
+      }
+    };
+  }
+};
 export const getPageSettings = editor => {
   try {
     const [pageSettingsNode] = Editor.nodes(editor, {

package/dist/index.js

@@ -1,6 +1,8 @@
 import Collaborative from "./Editor/CollaborativeEditor";
 import CommonEditor from "./Editor/CommonEditor";
 import Mini from "./Editor/MiniEditor";
+import EditorInFrame from "./Editor/IframeEditor";
 export const Editor = CommonEditor;
 export const MiniEditor = Mini;
-export const CollaborativeEditor = Collaborative;
+export const CollaborativeEditor = Collaborative;
+export const IframeEditor = EditorInFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"

package/dist/Editor/Elements/Color Picker/LogoIcon.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const logo = {
-  color: color => /*#__PURE__*/_jsx("svg", {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 11 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M5.16796 0C5.16796 0 0 5.92326 0 8.8319C0 12.0176 2.65524 14 5.16796 14C7.83258 14 10.3359 11.9129 10.3359 8.8319C10.3359 5.92326 5.16796 0 5.16796 0ZM8.7402 9.70788C8.45278 11.3396 7.03388 12.0548 5.89918 12.0548C5.80706 12.0543 9.14466 10.6134 7.85834 6.30322C8.53622 7.06776 8.96266 8.4448 8.7402 9.70788Z",
-      fill: "#778599"
-    })
-  }),
-  bgColor: color => /*#__PURE__*/_jsx("svg", {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76687 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
-      fill: "#64748B"
-    })
-  })
-};