@flozy/editor 1.8.4 → 1.8.6

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";
@@ -100,7 +100,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     CHARACTERS = [],
     editorClass,
     fixedWidth = "60%",
-    fullWidth = "80%"
+    fullWidth = "80%",
+    hideTools
   } = otherProps || {};
   const [drag, setDrag] = useState(null);
   const editor = useMemo(() => {
@@ -243,7 +244,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = mentions;
   const chars = type ? Shorthands[type]({
     ...mentions,
-    CHARACTERS
+    CHARACTERS,
+    hideTools: hideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);

package/dist/Editor/Editor.css

@@ -330,6 +330,10 @@ blockquote {
   border-radius: 12px;
 }
 
+.activeBrush svg {
+  stroke: #2563eb;
+}
+
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;

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/Embed/Video.js

@@ -58,7 +58,7 @@ const Video = ({
     bottomRight
   } = borderRadius || {};
   useEffect(() => {
-    if (editor && ele[1] !== undefined) {
+    if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
       onLoad(element?.size || {});

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/Elements/Signature/SignaturePopup.js

@@ -333,7 +333,7 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: brush.size === m ? "active" : "",
+                      className: brush.size === m ? "activeBrush" : "",
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
                           width: 20 + m,

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/Mini/MiniToolbar.js

@@ -37,6 +37,10 @@ const MiniToolbar = props => {
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
   const DialogComp = !fullScreen ? Popper : Dialog;
+  const {
+    hideTools
+  } = customProps;
+  const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
   useEffect(() => {
     if (popper) {
       setPopper(null);
@@ -58,7 +62,7 @@ const MiniToolbar = props => {
       component: "div",
       className: "mini-tool-wrpr-ei",
       sx: classes.root,
-      children: MENU_OPTIONS.map(({
+      children: UPDATED_MENU_OPTIONS.map(({
         type,
         label,
         icon: Icon

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

@@ -11,6 +11,10 @@ const AddElements = props => {
     editor,
     customProps
   } = props;
+  const {
+    hideTools
+  } = customProps;
+  const filteredElements = elements.filter(f => hideTools.indexOf(f.type) === -1);
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -18,7 +22,7 @@ const AddElements = props => {
     style: {
       margin: 0
     },
-    children: elements.map(m => {
+    children: filteredElements.map(m => {
       return /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 6,

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/Toolbar/Toolbar.js

@@ -157,14 +157,6 @@ export const RenderToolbarIcon = props => {
           editor: editor,
           customProps: customProps
         }, element.id);
-      // case "drawer":
-      //   return (
-      //     <DrawerMenuButton
-      //       key={element.id}
-      //       editor={editor}
-      //       customProps={customProps}
-      //     />
-      //   );
       case "app-header":
         return /*#__PURE__*/_jsx(AppHeaderButton, {
           editor: editor,

package/dist/Editor/common/Shorthands/elements.js

@@ -14,6 +14,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 1",
   desc: "",
   group: "Text",
+  type: "headingOne",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingOne"
   }),
@@ -22,6 +23,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 2",
   desc: "",
   group: "Text",
+  type: "headingTwo",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingTwo"
   }),
@@ -30,6 +32,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 3",
   desc: "",
   group: "Text",
+  type: "headingThree",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingThree"
   }),
@@ -38,6 +41,7 @@ const ELEMENTS_LIST = [{
   name: "Quote",
   desc: "",
   group: "Text",
+  type: "blockquote",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "blockquote"
   }),
@@ -48,6 +52,7 @@ const ELEMENTS_LIST = [{
   name: "Colorbox",
   desc: "",
   group: "Text",
+  type: "colorbox",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "colorbox"
   }),
@@ -58,6 +63,7 @@ const ELEMENTS_LIST = [{
   name: "Ordered List",
   desc: "",
   group: "List",
+  type: "orderedList",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "orderedList"
   }),
@@ -66,6 +72,7 @@ const ELEMENTS_LIST = [{
   name: "Bulleted List",
   desc: "",
   group: "List",
+  type: "unorderedList",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "unorderedList"
   }),
@@ -74,6 +81,7 @@ const ELEMENTS_LIST = [{
   name: "Check List",
   desc: "",
   group: "List",
+  type: "check-list-item",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "check-list-item"
   }),
@@ -82,6 +90,7 @@ const ELEMENTS_LIST = [{
   name: "Image",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "image"
   }),
@@ -90,6 +99,7 @@ const ELEMENTS_LIST = [{
   name: "Video",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "video"
   }),
@@ -98,6 +108,7 @@ const ELEMENTS_LIST = [{
   name: "Embed",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "embed"
   }),
@@ -106,6 +117,7 @@ const ELEMENTS_LIST = [{
   name: "Emoji",
   group: "Elements",
   desc: "",
+  type: "emoji",
   renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
     ...rest,
     icoBtnType: "cmd"
@@ -114,6 +126,7 @@ const ELEMENTS_LIST = [{
   name: "Table",
   group: "Elements",
   desc: "",
+  type: "table",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "table"
   }),
@@ -125,6 +138,7 @@ const ELEMENTS_LIST = [{
   name: "Grid",
   group: "Elements",
   desc: "",
+  type: "grid",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "grid"
   }),
@@ -135,6 +149,7 @@ const ELEMENTS_LIST = [{
   name: "Accordion",
   group: "Elements",
   desc: "",
+  type: "accordion",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "accordion"
   }),
@@ -145,6 +160,7 @@ const ELEMENTS_LIST = [{
   name: "Button",
   group: "Elements",
   desc: "",
+  type: "button",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "button"
   }),
@@ -155,6 +171,7 @@ const ELEMENTS_LIST = [{
   name: "Signature",
   group: "Elements",
   desc: "",
+  type: "signature",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "signature"
   }),
@@ -165,6 +182,7 @@ const ELEMENTS_LIST = [{
   name: "Carousel",
   group: "Elements",
   desc: "",
+  type: "carousel",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "carousel"
   }),
@@ -175,6 +193,7 @@ const ELEMENTS_LIST = [{
   name: "Form",
   group: "Elements",
   desc: "",
+  type: "form",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "form"
   }),
@@ -184,8 +203,10 @@ const ELEMENTS_LIST = [{
 }];
 const elements = props => {
   const {
-    search
+    search,
+    hideTools
   } = props;
-  return ELEMENTS_LIST.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
+  const filteredElements = ELEMENTS_LIST.filter(f => hideTools.indexOf(f.type) === -1);
+  return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
 };
 export default elements;

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/common/StyleBuilder/index.js

@@ -15,17 +15,21 @@ const StyleContent = props => {
     customProps,
     handleClose
   } = props;
+  const {
+    hideTools
+  } = customProps;
   const tabContent = renderTabs.find(f => f.value === value);
   const {
     fields
   } = tabContent || {
     fields: []
   };
+  const filteredFields = hideTools?.length > 0 ? fields.filter(f => hideTools.indexOf(f.key) === -1) : fields;
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     spacing: 2,
     className: "sidebar-wrpr-eds",
-    children: [...fields].map((m, i) => {
+    children: [...filteredFields].map((m, i) => {
       const FieldComponent = FieldMap[m.type];
       return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
         data: m,

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.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"