@flozy/editor 1.9.6 → 1.9.8

package/dist/Editor/Editor.css

@@ -477,7 +477,7 @@ blockquote {
 }
 
 @media (max-width: 480px) {
-  body {
+  body.editorbody {
     padding: 0px !important;
   }
 

package/dist/Editor/Elements/Embed/Image.js

@@ -7,7 +7,7 @@ import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -146,7 +146,19 @@ const Image = ({
       draggable: false
     });
   };
-  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
+  const getWidth = () => {
+    if (resizing) {
+      return {
+        width: `${size.width}px`
+      };
+    } else {
+      return {
+        width: url ? {
+          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+        } : "100%"
+      };
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     component: "div",
@@ -173,13 +185,13 @@ const Image = ({
       customProps: customProps,
       format: "image",
       onDelete: onDelete
-    }) : null, /*#__PURE__*/_jsxs("div", {
+    }) : null, /*#__PURE__*/_jsxs(Box, {
+      component: "div",
       contentEditable: false,
       className: "embed-image-wrpr",
-      style: {
+      sx: {
         position: "relative",
-        width: `${width}`
-        // height: `${size.height}px`,
+        ...getWidth()
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

package/dist/Editor/Elements/Embed/Video.js

@@ -10,6 +10,7 @@ import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -108,7 +109,23 @@ const Video = ({
       at: path
     });
   };
-  const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
+  const getWidth = () => {
+    if (resizing) {
+      return {
+        width: `${size.width}px`,
+        height: url ? `${size.height}px` : "auto"
+      };
+    } else {
+      return {
+        width: {
+          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+        },
+        height: url ? {
+          ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
+        } : "auto"
+      };
+    }
+  };
   const embedURL = getEmbedURL(element);
   const VideoContent = () => {
     return resizing ? /*#__PURE__*/_jsx("div", {
@@ -130,6 +147,7 @@ const Video = ({
         position: "absolute",
         width: "100%",
         height: "100%",
+        maxWidth: "100%",
         left: "0px",
         ...(gradientBorder(borderColor) || {}),
         borderWidth: borderWidth || "1px",
@@ -155,7 +173,7 @@ const Video = ({
     className: "embed has-hover video",
     style: {
       display: "flex",
-      flexDirection: "column",
+      flexDirection: "row",
       width: `100%`,
       justifyContent: horizantal,
       alignContent: vertical
@@ -168,12 +186,13 @@ const Video = ({
       customProps: customProps,
       format: "video",
       onDelete: onDelete
-    }) : null, /*#__PURE__*/_jsxs("div", {
+    }) : null, /*#__PURE__*/_jsxs(Box, {
+      component: "div",
       contentEditable: false,
-      style: {
+      sx: {
         position: "relative",
-        width: `${width}`,
-        height: url ? `${size.height}px` : "auto"
+        ...getWidth(),
+        maxWidth: "100%"
       },
       children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

package/dist/Editor/Elements/Form/Form.js

@@ -40,6 +40,7 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
+  const isEmail = element?.children[0].element === "email";
   const {
     topLeft,
     topRight,

package/dist/Editor/Elements/Form/FormElements/index.js

@@ -2,6 +2,7 @@ import FormText from "./FormText";
 import FormTextArea from "./FormTextArea";
 const FormElements = {
   text: FormText,
-  textArea: FormTextArea
+  textArea: FormTextArea,
+  email: FormText
 };
 export default FormElements;

package/dist/Editor/Elements/SimpleText.js

@@ -48,7 +48,7 @@ const SimpleTextStyle = ({
 const SimpleText = props => {
   const {
     theme
-  } = useEditorContext();
+  } = useEditorContext() || {};
   const editor = useSlateStatic();
   const {
     element,
@@ -68,7 +68,7 @@ const SimpleText = props => {
     pageColor
   } = pageSt?.pageProps || {};
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background
+    pageColor: pageColor || theme?.palette?.editor?.background || '#FFFFFF'
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Toolbar/PopupTool/AddTemplates.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
 import TemplateCard from "./TemplateCard";
+import FullViewCard from "./FullViewCard";
+import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Categories = props => {
@@ -100,6 +102,43 @@ const AddTemplates = props => {
       return f.title.toLowerCase().includes(search);
     }
   };
+  const renderTemplate = mapData => {
+    switch (mapData?.category) {
+      case "Starter":
+      case "Proposal":
+      case "Page":
+      case "Contract":
+      case "404 Page":
+        return /*#__PURE__*/_jsx(TemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      case "Buttons":
+        return /*#__PURE__*/_jsx(ButtonTemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      case "Banners":
+      case "Tables":
+        return /*#__PURE__*/_jsx(FullViewCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      default:
+        /*#__PURE__*/_jsx(TemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+    }
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     className: `templates ${fullScreen ? "fullscreen" : ""}`,
@@ -121,12 +160,7 @@ const AddTemplates = props => {
       children: [/*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
       }), filteredTemplates.filter(filterByTitle).map(m => {
-        return /*#__PURE__*/_jsx(TemplateCard, {
-          classes: classes,
-          onSelectTemplate: onSelectTemplate,
-          m: m,
-          fullScreen: fullScreen
-        }, `template_Card_${m.id}_popup`);
+        return renderTemplate(m);
       })]
     })]
   });

package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      padding: 0,
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
+const ButtonTemplateCard = props => {
+  const {
+    classes,
+    m,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 3,
+    children: /*#__PURE__*/_jsx(Card, {
+      sx: classes.paperOverrides,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          className: `template-card-media`,
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.buttonCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
+      })
+    })
+  }, `template_${m.id}`);
+};
+export default ButtonTemplateCard;

package/dist/Editor/Toolbar/PopupTool/FullViewCard.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
+const FullViewCard = props => {
+  const {
+    classes,
+    m,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    children: /*#__PURE__*/_jsx(Card, {
+      sx: classes.paperOverrides,
+      className: "paperOverrides",
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.fullViewCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
+      })
+    })
+  }, `template_${m.id}`);
+};
+export default FullViewCard;

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -373,6 +373,55 @@ const usePopupStyle = theme => ({
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background
     }
+  },
+  fullViewCardMedia: {
+    width: "100%",
+    height: "130px",
+    backgroundPosition: "left top",
+    backgroundSize: "100% auto",
+    zIndex: 1,
+    position: "relative",
+    "&.fullscreen": {
+      height: "130px"
+    }
+  },
+  buttonCardMedia: {
+    width: "100%",
+    height: "48px",
+    backgroundPosition: "left top",
+    backgroundSize: "contain",
+    zIndex: 1,
+    position: "relative",
+    "&.fullscreen": {
+      height: "48px"
+    }
+  },
+  buttonCardMediaWrpr: {
+    position: "relative",
+    margin: "8px",
+    marginBottom: "0px",
+    "&:hover": {
+      "& .template-card-action": {
+        display: "flex"
+      }
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
+    }
+  },
+  paperOverrides: {
+    "&.MuiPaper-root": {
+      background: "transparent",
+      boxShadow: "none"
+    }
   }
 });
 export default usePopupStyle;

package/dist/Editor/common/ColorPickerButton.js

@@ -10,7 +10,7 @@ const ColorPickerButton = props => {
     value,
     onSave,
     defaultColors = [],
-    classes
+    classes = {}
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);

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

@@ -13,6 +13,9 @@ const fieldStyle = [{
     options: [{
       label: "Textbox",
       value: "text"
+    }, {
+      label: "Email",
+      value: "email"
     }, {
       label: "TextArea",
       value: "textArea"

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

@@ -82,7 +82,8 @@ const StyleBuilder = props => {
   const onElementPropsChange = data => {
     setElementProps({
       ...elementProps,
-      ...data
+      ...data,
+      name: data?.element === "email" ? "field_email" : data?.name
     });
   };
   const handleSave = () => {

package/dist/Editor/helper/index.js

@@ -36,14 +36,14 @@ export function invertColor(hex) {
     if (hex?.indexOf("#") === -1) {
       hex = rgbToHex(hex);
     }
-    if (hex.indexOf("#") === 0) {
+    if (hex?.indexOf("#") === 0) {
       hex = hex.slice(1);
     }
     // convert 3-digit hex to 6-digits.
-    if (hex.length === 3) {
+    if (hex?.length === 3) {
       hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
     }
-    if (hex.length !== 6) {
+    if (hex?.length !== 6) {
       // throw new Error("Invalid HEX color.");
     }
     // invert color components

package/dist/Editor/helper/theme.js

@@ -37,6 +37,12 @@ const overrides = {
   },
   overrideGridSize: val => {
     return `${(val || 8) / 12 * 100}%`;
+  },
+  overrideReSize: val => {
+    return `${val?.widthInPercent || 100}%`;
+  },
+  overrideReSizeH: val => {
+    return `${val?.height}px`;
   }
 };
 export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {

package/dist/Editor/utils/customHooks/useResize.js

@@ -1,10 +1,13 @@
 import { useState } from "react";
+import { getBreakPointsValue, getDevice } from "../../helper/theme";
 const useResize = ({
   parentDOM,
-  size: defaultSize,
+  size: allSize,
   isGrid,
   onChange
 }) => {
+  const device = getDevice(window.innerWidth);
+  const defaultSize = getBreakPointsValue(allSize);
   const {
     width,
     height
@@ -36,17 +39,21 @@ const useResize = ({
     document.removeEventListener("pointermove", onMouseMove);
     document.removeEventListener("pointerup", onMouseUp);
     if (onChange) {
-      onChange(latest);
+      onChange({
+        ...getBreakPointsValue(allSize),
+        [device]: latest
+      });
     }
     setResizing(false);
   };
   const onMouseMove = e => {
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
+      const cWP = calcWidth / width * 100;
       const calc = {
         width: calcWidth,
         height: (parseInt(currentSize.height) || height) + e.movementY,
-        widthInPercent: calcWidth / width * 100
+        widthInPercent: cWP > 100 ? 100 : cWP
       };
       latest = calc;
       return calc;

package/package.json

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