@flozy/editor 1.8.4 → 1.8.5

package/dist/Editor/CommonEditor.js

@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
-import { getPageSettings } from "./utils/pageSettings";
+import { findPageSettings, getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";

package/dist/Editor/Elements/Carousel/Arrows.js

@@ -17,6 +17,11 @@ export const PrevArrow = props => {
       zIndex: 3
     },
     onClick: onClick,
+    sx: {
+      '&.MuiButtonBase-root': {
+        lineHeight: "0px !important"
+      }
+    },
     contentEditable: false,
     children: /*#__PURE__*/_jsx(Icon, {
       icon: "leftArrow"
@@ -37,6 +42,11 @@ export const NextArrow = props => {
       right: '5px',
       zIndex: 3
     },
+    sx: {
+      '&.MuiButtonBase-root': {
+        lineHeight: "0px !important"
+      }
+    },
     onClick: onClick,
     contentEditable: false,
     children: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Carousel/slick-theme.min.css

@@ -11,6 +11,7 @@
   font-family: slick;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  content: none;
 }
 .slick-loading .slick-list {
   background: #fff;

package/dist/Editor/Elements/Grid/Grid.js

@@ -12,7 +12,7 @@ import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +42,8 @@ const Grid = props => {
     borderWidth,
     borderColor,
     borderStyle,
-    borderRadius
+    borderRadius,
+    flexWrap
   } = element;
   const {
     vertical,
@@ -305,7 +306,10 @@ const Grid = props => {
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
-        width: "100%"
+        width: "100%",
+        flexWrap: {
+          ...getBreakPointsValue(flexWrap || "wrap")
+        }
       },
       "data-path": path.join(","),
       children: children

package/dist/Editor/Elements/Grid/GridItem.js

@@ -33,7 +33,8 @@ const GridItem = props => {
     bgColorHover,
     borderColorHover,
     textColor,
-    animation
+    animation,
+    cellGHeight
   } = element;
   const {
     vertical,
@@ -104,6 +105,9 @@ const GridItem = props => {
       width: {
         ...getBreakPointsValue(grid, null, "overrideGridSize", true)
       },
+      height: {
+        ...getBreakPointsValue(cellGHeight || "auto")
+      },
       display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",

package/dist/Editor/IframeEditor.js

@@ -6,11 +6,6 @@ const IframeEditor = () => {
   const [message, sendMessage] = useWindowMessage({
     type: "editorProps"
   });
-  const device = {
-    label: "Mobile",
-    breakpoint: "sm",
-    width: 425
-  };
   const onSave = (a, b) => {
     sendMessage({
       type: "Editor:onSave",
@@ -24,8 +19,7 @@ const IframeEditor = () => {
     return /*#__PURE__*/_jsx(CommonEditor, {
       ...message,
       isIframe: true,
-      onSave: onSave,
-      device: device
+      onSave: onSave
     });
   } else {
     return /*#__PURE__*/_jsx("div", {

package/dist/Editor/Styles/EditorStyles.js

@@ -41,7 +41,6 @@ const editorStyles = ({
     "& .editor-wrapper": {
       maxWidth: "100%",
       height: "100%",
-      backgroundColor: "#FFF",
       overflow: "visible",
       "& .section-wrapper-fluid": {
         "& .grid-container": {

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

@@ -10,6 +10,9 @@ const usePopupStyle = () => ({
       "& .papper-wrpr": {
         boxShadow: "none"
       }
+    },
+    "&.xs": {
+      transform: "none !important"
     }
   },
   textFormatWrapper: {

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper } from "@mui/material";
+import { Popper, Fade, Paper, Popover } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
@@ -7,6 +7,7 @@ import usePopupStyle from "./PopupToolStyle";
 import useDrag from "../../hooks/useDrag";
 import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
@@ -21,6 +22,7 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
+  const [size] = useWindowResize();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -66,7 +68,7 @@ const PopupTool = props => {
     transition: true,
     placement: "auto-end",
     sx: classes.popupWrapper,
-    className: "tools-drawer",
+    className: `tools-drawer ${size?.device}`,
     children: ({
       TransitionProps
     }) => /*#__PURE__*/_jsx(Fade, {

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/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/hooks/useWindowMessage.js

@@ -27,7 +27,7 @@ const useWindowMessage = props => {
     if (window.parent) {
       window.parent.postMessage({
         ...action
-      }, "http://localhost:3000");
+      }, "*");
     }
   };
   return [message, sendMessage];

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/package.json

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