@flozy/editor 1.7.4 → 1.7.6

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

@@ -1,15 +1,18 @@
 import React, { useState } from "react";
 import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
+import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
 import WidthFullIcon from "@mui/icons-material/WidthFull";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import FormatClearIcon from "@mui/icons-material/FormatClear";
 import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
 import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
-import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive } from "../../utils/SlateUtilityFunctions";
+import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
 import LinkButton from "../../Elements/Link/LinkButton";
 import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 import { AllColors } from "../../Elements/Color Picker/ColorButtons";
+import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -83,17 +86,46 @@ const TextFormat = props => {
   const onClosePicker = () => {
     setAnchorEl(null);
   };
+  const handleDefault = ({
+    format,
+    val
+  }) => () => {
+    const value = val ? val : "inherit";
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
     children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Font Family"
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Font Family"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Button, {
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
+            onClick: handleDefault({
+              format: "fontFamily",
+              val: Object.values(fontFamilyMap)[0]
+            }),
+            children: "Default"
+          })
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -148,11 +180,29 @@ const TextFormat = props => {
       item: true,
       xs: 12,
       sx: classes.textFormatField,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Text Color"
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Text Color"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Button, {
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+            onClick: handleDefault({
+              format: "color"
+            }),
+            children: "Default"
+          })
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         sx: classes.textFormatColorWrpr,
         children: /*#__PURE__*/_jsx(ColorPicker, {
@@ -160,18 +210,42 @@ const TextFormat = props => {
           activeMark: activeMark,
           editor: editor,
           showHex: false,
-          rounded: true
+          rounded: true,
+          title: "Text Color",
+          id: "11_cc",
+          classes: classes
         }, "11_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       sx: classes.textFormatField,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Text Background Color"
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Text Background Color"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(Button, {
+              sx: classes.defaultBtn,
+              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+              onClick: handleDefault({
+                format: "bgColor"
+              }),
+              children: "Default"
+            })
+          })
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -182,7 +256,9 @@ const TextFormat = props => {
           editor: editor,
           showHex: false,
           rounded: true,
-          classes: classes
+          title: "Text Background Color",
+          classes: classes,
+          id: "12_cc"
         }, "12_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
@@ -332,7 +408,8 @@ const TextFormat = props => {
       anchorEl: anchorEl,
       onClose: onClosePicker,
       classes: classes,
-      onSelect: onSelectColor
+      onSelect: onSelectColor,
+      id: "all_1"
     })]
   });
 };

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -119,7 +119,7 @@ export const toolbarGroups = [[{
   group: "list"
 }, {
   id: 43,
-  format: "checkList",
+  format: "check-list-item",
   type: "block",
   title: "Check List",
   group: "list"

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

@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip } from "@mui/material";
+import TuneIcon from "@mui/icons-material/Tune";
+import SectionPopup from "../../Elements/Grid/SectionPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Section = props => {
+  const {
+    children,
+    element,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const [openSetttings, setOpenSettings] = useState(false);
+  const {
+    sectionBgColor,
+    sectionBackgroundImage,
+    sectionBannerSpacing,
+    sectionBorderRadius,
+    sectionGridSize,
+    sectionAlignment
+  } = element;
+  const {
+    left: ssleft,
+    top: sstop,
+    right: ssright,
+    bottom: ssbottom
+  } = sectionBannerSpacing || {};
+  const {
+    topLeft: ssTopLeft,
+    topRight: ssTopRight,
+    bottomLeft: ssBottomLeft,
+    bottomRight: ssBottomRight
+  } = sectionBorderRadius || {};
+  const {
+    vertical,
+    horizantal,
+    flexDirection
+  } = sectionAlignment || {};
+  const path = ReactEditor.findPath(editor, element);
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const Toolbar = () => {
+    return !readOnly ? /*#__PURE__*/_jsx("div", {
+      className: "element-toolbar ss hr",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Section Settings",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(TuneIcon, {})
+        })
+      })
+    }) : null;
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
+  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
+    backgroundImage: `url(${sectionBackgroundImage})`
+  } : {};
+  return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
+    component: "section",
+    className: "ed-section-wrapper",
+    style: {
+      position: "relative",
+      background: sectionBgColor,
+      ...sectionBgImage,
+      paddingLeft: `${ssleft}px`,
+      paddingRight: `${ssright}px`,
+      paddingTop: `${sstop}px`,
+      paddingBottom: `${ssbottom}px`,
+      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
+      flexDirection: flexDirection || "column",
+      alignItems: horizantal,
+      justifyContent: vertical
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "ed-section-inner",
+      sx: {
+        width: `${(sectionGridSize || 8) / 12 * 100}%`
+      },
+      children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
+    }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
+      element: {
+        ...element,
+        sectionGridSize: sectionGridSize || 8
+      },
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
+  }) : children;
+};
+export default Section;

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

@@ -77,7 +77,7 @@ const ELEMENTS_LIST = [{
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "checkList"
   }),
-  onInsert: editor => toggleBlock(editor, "checkList", false)
+  onInsert: editor => toggleBlock(editor, "check-list-item", false)
 }, {
   name: "Image",
   desc: "",

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

@@ -12,12 +12,14 @@ const appHeaderStyle = [{
     label: "Title Font Size",
     key: "logoFontSize",
     type: "fontSize",
+    width: 5,
     placeholder: "16px"
   }, {
     label: "Title Font Family",
     key: "titleFontFamily",
     type: "textOptions",
     options: fontOptions,
+    width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
         style: {
@@ -47,11 +49,13 @@ const appHeaderStyle = [{
     label: "Menu Font Size",
     key: "fontSize",
     type: "fontSize",
-    placeholder: "16px"
+    placeholder: "16px",
+    width: 5
   }, {
     label: "Menu Font Family",
     key: "fontFamily",
     type: "textOptions",
+    width: 7,
     options: fontOptions,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -7,16 +7,12 @@ const buttonStyle = [{
     label: "Button Text",
     key: "label",
     type: "text"
-  }, {
-    label: "Font Size",
-    key: "textSize",
-    type: "fontSize",
-    placeholder: "16px or 1em"
   }, {
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
     options: fontOptions,
+    width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
         style: {
@@ -25,12 +21,35 @@ const buttonStyle = [{
         children: option.text
       });
     }
+  }, {
+    label: "Font Size",
+    key: "textSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px or 1em"
   }, {
     label: "Text Align",
     key: "textAlign",
     type: "textAlign",
     placeholder: "16px or 1em"
   }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text Color",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Button Color",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }]
 }, {
   tab: "Link",
   value: "link",
@@ -39,41 +58,14 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
-}, {
-  tab: "Icon",
-  value: "icon",
-  fields: [{
-    label: "Icon Position",
-    key: "iconPosition",
-    type: "textOptions",
-    options: [{
-      value: "start",
-      label: "Start"
-    }, {
-      value: "end",
-      label: "End"
-    }]
-  }, {
-    label: "Button Icons",
-    key: "buttonIcon",
-    type: "icons"
-  }]
 }, {
   tab: "Position",
   value: "position",
   fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
+    label: "Alignment",
     key: "alignment",
     type: "alignment"
   }]
-}, {
-  tab: "Margin Spacing",
-  value: "marginSpacing",
-  fields: [{
-    label: "Margin Spacing",
-    key: "marginSpacing",
-    type: "bannerSpacing"
-  }]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
@@ -93,11 +85,13 @@ const buttonStyle = [{
     label: "Border Width",
     key: "borderWidth",
     type: "text",
-    placeholder: "1px"
+    placeholder: "1px",
+    width: 6
   }, {
     label: "Border Style",
     key: "borderStyle",
     type: "textOptions",
+    width: 6,
     options: [{
       text: "Solid",
       value: "solid"
@@ -110,29 +104,28 @@ const buttonStyle = [{
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
         children: option.text
       });
     }
   }]
 }, {
-  tab: "Colors",
-  value: "colors",
+  tab: "Icon",
+  value: "icon",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: true
-  }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
   }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
   }]
 }, {
   tab: "Hover Colors",
@@ -143,7 +136,7 @@ const buttonStyle = [{
     type: "color",
     needPreview: true
   }, {
-    label: "Hover Background Color",
+    label: "Hover Button Color",
     key: "bgColorHover",
     type: "color"
   }, {

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

@@ -2,7 +2,7 @@ const embedImageStyle = [{
   tab: "URL",
   value: "url",
   fields: [{
-    label: "",
+    label: "Image URL",
     key: "url",
     type: "text",
     placeholder: "Add Image URL here"
@@ -11,24 +11,7 @@ const embedImageStyle = [{
     key: "url",
     type: "backgroundImage"
   }]
-},
-// {
-//   tab: "Image List Settings",
-//   value: "imageListSettings",
-//   fields: [
-//     {
-//       label: "Image List Columns",
-//       key: "cols",
-//       type: "text",
-//     },
-//     {
-//       label: "Row Height",
-//       key: "rowHeight",
-//       type: "text",
-//     },
-//   ],
-// },
-{
+}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
@@ -56,11 +39,6 @@ const embedImageStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: true
-  }, {
     label: "Background Color",
     key: "bgColor",
     type: "color"

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

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

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

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