@flozy/editor 1.5.1 → 1.5.2

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

@@ -1,80 +1,190 @@
 import React from "react";
-import { Grid } from "@mui/material";
+import { Grid, IconButton, Typography } from "@mui/material";
 import toolbarGroups from "../toolbarGroups";
-import { Dropdown, MarkButton } from "../FormatTools";
+import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
 import { activeMark } from "../../utils/SlateUtilityFunctions";
+import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
 const TextFormat = props => {
   const {
     classes,
-    editor
+    editor,
+    onClose
   } = props;
   const fontFamily = allTools.find(f => f.format === "fontFamily");
   const fontStyle = allTools.filter(f => f.type === "mark");
+  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
-    children: [/*#__PURE__*/_jsx(Grid, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatLabel,
-      children: "TEXT COLOR"
-    }), /*#__PURE__*/_jsx(Grid, {
+      style: {
+        display: "flex"
+      },
+      justifyContent: "space-between",
+      alignItems: "center",
+      className: "textSettingHeader",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        color: "primary",
+        sx: {
+          fontSize: "16px",
+          fontWeight: "700"
+        },
+        children: "TEXT SETTINGS"
+      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.textFormatLabel,
+        justifyContent: "end",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          className: "close-popupbtn",
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatFieldBorder,
-      children: /*#__PURE__*/_jsx(ColorPicker, {
-        format: "color",
-        activeMark: activeMark,
-        editor: editor,
-        showHex: true
-      })
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Font Family"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatField,
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          ...fontFamily,
+          editor: editor
+        })
+      })]
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatLabel,
-      children: "BACKGROUND COLOR"
+      sx: {
+        paddingTop: "12px"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Font Style"
+      })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatFieldBorder,
-      children: /*#__PURE__*/_jsx(ColorPicker, {
-        format: "bgColor",
-        activeMark: activeMark,
-        editor: editor,
-        showHex: true
+      sx: classes.textFormatCG,
+      children: fontStyle?.map((m, i) => {
+        return /*#__PURE__*/_jsx(MarkButton, {
+          editor: editor,
+          ...m
+        }, `pptool_mark_${i}_${m.id}`);
       })
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 12,
-      sx: classes.textFormatLabel,
-      children: "FONT FAMILY"
-    }), /*#__PURE__*/_jsx(Grid, {
+      xs: 4,
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Font Size"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 10,
+        sx: classes.textFormatCG,
+        children: /*#__PURE__*/_jsx(TextSize, {
+          format: "fontSize",
+          activeMark: activeMark,
+          editor: editor
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 12,
+      xs: 7,
       sx: classes.textFormatField,
-      children: /*#__PURE__*/_jsx(Dropdown, {
-        ...fontFamily,
-        editor: editor
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Text Alignment"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatCG,
+        children: fontAlign?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_block_${i}_${m.id}`);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatLabel,
-      children: "FONT STYLE"
-    }), /*#__PURE__*/_jsx(Grid, {
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Text Color"
+      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.textFormatFieldBorder,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "color",
+          activeMark: activeMark,
+          editor: editor,
+          showHex: true
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatCG,
-      children: fontStyle?.map((m, i) => {
-        return /*#__PURE__*/_jsx(MarkButton, {
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        style: {
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: 5
+        },
+        children: "Background Color"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatFieldBorder,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "bgColor",
+          activeMark: activeMark,
           editor: editor,
-          ...m
-        }, `pptool_mark_${i}_${m.id}`);
-      })
+          showHex: true
+        })
+      })]
     })]
   });
 };

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

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+// import { Popper, Fade, Paper, IconButton, Drawer } from "@mui/material";
+import { Drawer } from "@mui/material";
+// import CloseIcon from "@mui/icons-material/Close";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const PopupTool = () => {
+const PopupTool = props => {
+  const {
+    onDrawerOpen
+  } = props;
   const classes = usePopupStyle();
   const [anchorEl, setAnchorEl] = useState(null);
   const editor = useSlate();
@@ -16,10 +19,16 @@ const PopupTool = () => {
     selection
   } = editor;
   const open = Boolean(anchorEl);
-  const id = open ? "popup-edit-tool" : "";
+  // const id = open ? "popup-edit-tool" : "";
+
+  useEffect(() => {
+    if (onDrawerOpen) {
+      onDrawerOpen(open);
+    }
+  }, [open]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
-      setAnchorEl(null);
+      // setAnchorEl(null);
     } else {
       const domSelection = window.getSelection();
       const domRange = domSelection.getRangeAt(0);
@@ -34,35 +43,27 @@ const PopupTool = () => {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /*#__PURE__*/_jsx(Popper, {
-    id: id,
+  return /*#__PURE__*/_jsx(Drawer
+  // id={id}
+  , {
     open: open,
-    disablePortal: false,
-    anchorEl: anchorEl,
-    transition: true,
-    placement: "bottom-start",
-    onMouseDown: e => e.preventDefault(),
-    sx: classes.popupWrapper,
-    children: ({
-      TransitionProps
-    }) => /*#__PURE__*/_jsx(Fade, {
-      ...TransitionProps,
-      timeout: 350,
-      children: /*#__PURE__*/_jsxs(Paper, {
-        children: [/*#__PURE__*/_jsx("div", {
-          style: {
-            display: "flex",
-            justifyContent: "end"
-          },
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: handleClose,
-            children: /*#__PURE__*/_jsx(CloseIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(TextFormat, {
-          editor: editor,
-          classes: classes
-        })]
-      })
+    fullWidth: true
+    // disablePortal={false}
+    // anchorEl={anchorEl}
+    // transition
+    // placement="bottom-start"
+    // onMouseDown={(e) => e.preventDefault()}
+    // sx={classes.popupWrapper}
+    ,
+    anchor: "right",
+    hideBackdrop: true
+    // handleClose={handleClose}
+    ,
+    className: "tools-drawer",
+    children: /*#__PURE__*/_jsx(TextFormat, {
+      editor: editor,
+      classes: classes,
+      onClose: handleClose
     })
   });
 };

package/dist/Editor/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@ import { useSlate } from "slate-react";
 import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
 import useFormat from "../utils/customHooks/useFormat.js";
 import defaultToolbarGroups from "./toolbarGroups.js";
-import { BlockButton, MarkButton, Dropdown } from "./FormatTools";
+import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
 import ColorPicker from "../Elements/Color Picker/ColorPicker";
 import LinkButton from "../Elements/Link/LinkButton";
 import Embed from "../Elements/Embed/Embed";
@@ -68,6 +68,11 @@ const Toolbar = props => {
               ...element,
               editor: editor
             }, element.id);
+          case "fontSize":
+            return /*#__PURE__*/_jsx(TextSize, {
+              ...element,
+              editor: editor
+            }, element.id);
           case "text":
             return /*#__PURE__*/_jsx(Text, {
               ...element,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -7,19 +7,19 @@ const toolbarGroups = [[{
 }, {
   id: 2,
   format: "fontSize",
-  type: "dropdown",
+  type: "fontSize",
   options: [{
-    text: "Small",
-    value: "small"
+    text: "12px",
+    value: "12px"
   }, {
-    text: "Normal",
-    value: "normal"
+    text: "16px",
+    value: "16px"
   }, {
-    text: "Medium",
-    value: "medium"
+    text: "28px",
+    value: "28px"
   }, {
-    text: "Huge",
-    value: "huge"
+    text: "48px",
+    value: "48px"
   }]
 }], [{
   id: 3,

package/dist/Editor/assets/svg/addGridItem.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddGridItem = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V6.75C16.5 3 15 1.5 11.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.5 9H16.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M6.1875 9V16.125",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11.8125 16.5V9",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M6.1875 9V1.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11.8125 9.00027V1.90527",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default AddGridItem;

package/dist/Editor/common/ColorPickerButton.js

@@ -27,10 +27,10 @@ const ColorPickerButton = props => {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
-        height: "26px",
-        minWidth: "26px",
+        height: "22px",
+        minWidth: "22px",
         borderRadius: "26px",
-        border: "1px solid #64748B"
+        border: "2px solid #E7E7E7"
       },
       onClick: handleColorPicker
     }), /*#__PURE__*/_jsx(Popover, {

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

@@ -2,13 +2,13 @@ const embedImageStyle = [{
   tab: "URL",
   value: "url",
   fields: [{
-    label: "URL",
-    key: "url",
-    type: "text"
-  }, {
     label: "File",
     key: "url",
     type: "backgroundImage"
+  }, {
+    label: "",
+    key: "url",
+    type: "text"
   }]
 }, {
   tab: "Banner Spacing",

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { JustifyStartIcon, JustifyCenterIcon, JustifyEndIcon, AlignEndIcon, AlignCenterIcon, AlignStartIcon, DirectionRowIcon, DirectionColumIcon, DirectionReverseIcon } from "../../iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Alignment = props => {
@@ -20,6 +21,7 @@ const Alignment = props => {
     });
   };
   const flexDirection = value?.flexDirection || "row";
+  console.log(flexDirection);
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     style: {
@@ -31,30 +33,35 @@ const Alignment = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
-          id: "demo-row-radio-buttons-group-label",
+          id: "pos-align-tems",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
+            style: {
+              fontSize: "14px",
+              fontWeight: 500
+            },
             children: "Align Items"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
-          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          "aria-labelledby": "pos-align-tems",
           name: "horizantal",
           value: value?.horizantal || "start",
           onChange: handleChange,
+          className: "iconRadioButton",
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "start",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Start"
+            label: /*#__PURE__*/_jsx(AlignStartIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "center",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Center"
+            label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "end",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "End"
+            label: /*#__PURE__*/_jsx(AlignEndIcon, {})
           })]
         })]
       })
@@ -63,30 +70,35 @@ const Alignment = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
-          id: "demo-row-radio-buttons-group-label",
+          id: "pos-jc",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
+            style: {
+              fontSize: "14px",
+              fontWeight: 500
+            },
             children: "Justify Content"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
-          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          "aria-labelledby": "pos-jc",
           name: "vertical",
           value: value?.vertical || "start",
           onChange: handleChange,
+          className: "iconRadioButton",
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "start",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Start"
+            label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "center",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Middle"
+            label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "end",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "End"
+            label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
           })]
         })]
       })
@@ -95,30 +107,35 @@ const Alignment = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
-          id: "demo-row-radio-buttons-group-label",
+          id: "pos-fd",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
+            style: {
+              fontSize: "14px",
+              fontWeight: 500
+            },
             children: "Flex Direction"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
-          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          "aria-labelledby": "pos-fd",
           name: "flexDirection",
           value: flexDirection,
           onChange: handleChange,
+          className: "iconRadioButton",
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Row"
+            label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "column",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Column"
+            label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "row-reverse",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Row reverse"
+            label: /*#__PURE__*/_jsx(DirectionReverseIcon, {})
           })]
         })]
       })