@flozy/editor 2.1.8 → 2.1.9

package/dist/Editor/CommonEditor.js

@@ -371,6 +371,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       return true;
     }
   }, [readOnly, isTextSelected]);
+  const handleFooterClick = () => {
+    window.open('https://www.flozy.com', '_blank');
+  };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -460,10 +463,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     sx: {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
-                      paddingBottom: hideMiniToolBar ? "0px" : "12px"
+                      paddingBottom: hideMiniToolBar ? "0px" : "12px",
+                      cursor: 'pointer'
                     },
                     align: "center",
                     "data-info": outsideEditorClickLabel,
+                    onClick: handleFooterClick,
                     children: footer
                   })]
                 })

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -299,6 +299,7 @@ function AppHeader(props) {
           })
         }), /*#__PURE__*/_jsx("nav", {
           children: /*#__PURE__*/_jsx(Drawer, {
+            anchor: isLogoRight ? "right" : "left",
             container: container,
             variant: "temporary",
             open: mobileOpen,

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -6,6 +6,7 @@ import ContinuousSlider from "./Slider";
 import frames from ".";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import { CloseIcon } from "../../../common/iconslist";
+import FramesStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -49,6 +50,10 @@ const ImageFrame = props => {
     setSelectedPath
   } = useEditorContext();
   const open = selectedPath === id && Boolean(anchorEl);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FramesStyles(theme);
   useEffect(() => {
     if (imageRef?.current && !readOnly) {
       setDOM(dom);
@@ -112,18 +117,9 @@ const ImageFrame = props => {
       },
       placement: "top",
       children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          width: 200,
-          padding: "0px 16px",
-          boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
-          border: "1px solid rgba(0,0,0,0.07)",
-          borderRadius: "12px",
-          backgroundColor: "#FFF",
-          marginBottom: "8px",
-          position: "relative",
-          paddingRight: "48px"
-        },
+        sx: classes?.sliderContainer,
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {
+          classes: classes,
           val: scale,
           onChange: onScaleChange,
           min: 50,

package/dist/Editor/Elements/Embed/Frames/Slider.js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ContinuousSlider = props => {
   const {
+    classes,
     val,
     min,
     max,
@@ -20,22 +21,45 @@ const ContinuousSlider = props => {
     spacing: 2,
     direction: "row",
     sx: {
-      mb: 0
+      mb: 0,
+      ml: '8px'
     },
     alignItems: "center",
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "div",
-      children: "-"
-    }), /*#__PURE__*/_jsx(Slider, {
+    children: [/*#__PURE__*/_jsx(Slider, {
       "aria-label": "Volume",
       value: value,
       onChange: handleChange,
       min: min,
       step: 1,
-      max: max
-    }), /*#__PURE__*/_jsx(Typography, {
+      max: max,
+      sx: {
+        height: 6,
+        '& .MuiSlider-thumb': {
+          width: 16,
+          height: 16,
+          background: 'linear-gradient(180deg, #4D61FF 0%, #2C92FF 100%)'
+        },
+        '& .MuiSlider-thumb::after': {
+          position: 'absolute',
+          content: '""',
+          borderRadius: '50%',
+          width: 18,
+          height: 18,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          border: '2px solid #fff',
+          boxShadow: '0px 4px 4px 0px #0000001A'
+        },
+        '& .MuiSlider-track': {
+          border: '1px solid #2563EB',
+          background: '#2563EB'
+        }
+      }
+    }), /*#__PURE__*/_jsxs(Typography, {
+      sx: classes?.sliderText,
       variant: "div",
-      children: "+"
+      children: [value, "%"]
     })]
   });
 };

package/dist/Editor/Elements/Embed/Frames/Styles.js

@@ -0,0 +1,26 @@
+const FramesStyles = theme => ({
+  sliderContainer: {
+    width: 200,
+    padding: "0px 16px",
+    boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
+    border: "1px solid rgba(0,0,0,0.07)",
+    borderRadius: "23px",
+    backgroundColor: theme?.palette?.editor?.background,
+    marginBottom: "8px",
+    position: "relative",
+    paddingRight: "30px"
+  },
+  sliderText: {
+    fontSize: "12px",
+    fontWeight: 600,
+    padding: "0px 4px",
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "22px",
+    minWidth: "50px",
+    display: "block",
+    textAlign: "center",
+    border: `1px solid ${theme?.palette?.primary?.border13}`,
+    boxShadow: '0px 4px 16px 0px #0000000D'
+  }
+});
+export default FramesStyles;

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from "react";
+
+// const sanitize = (input) => {
+//   const doc = new DOMParser().parseFromString(input, "text/html");
+//   for (const elm of doc.querySelectorAll("*")) {
+//     for (const attrib of elm.attributes) {
+//       if (attrib.name.startsWith("on")) {
+//         elm.removeAttribute(attrib.name);
+//       }
+//     }
+//   }
+//   return doc.body.innerHTML;
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const sanitize = input => {
-  const doc = new DOMParser().parseFromString(input, "text/html");
-  for (const elm of doc.querySelectorAll("*")) {
-    for (const attrib of elm.attributes) {
-      if (attrib.name.startsWith("on")) {
-        elm.removeAttribute(attrib.name);
-      }
-    }
-  }
-  return doc.body.innerHTML;
-};
 const Code = props => {
   const codeRef = useRef();
   const {

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

@@ -1,7 +1,6 @@
-import { bool } from "prop-types";
 export const validationMethods = {
   isEmail: value => {
-    const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //eslint-disable-line 
     const result = regex.test(String(value).toLowerCase());
     if (result) {
       let domain = String(value).toLowerCase().split('@')[1];

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -10,7 +10,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PageSettingsButton = props => {
   const {
     customProps,
-    icoBtnType
+    icoBtnType,
+    from
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -40,7 +41,10 @@ const PageSettingsButton = props => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
+      onClick: onSettings,
+      className: "removeDefaultSvgCls"
+    }) : /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
       onClick: onSettings,
       icon: /*#__PURE__*/_jsx(PageSettings, {}),

package/dist/Editor/Styles/EditorStyles.js

@@ -206,8 +206,9 @@ const editorStyles = ({
         padding: "2px",
         borderRadius: "0px",
         "& svg": {
-          width: "16px",
-          height: "16px"
+          width: "17px",
+          height: "18px",
+          marginTop: '-1px'
         }
       }
     },

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { TextField, IconButton } from "@mui/material";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import { sizeMap } from "../../utils/font.js";
+import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import { headingMap, sizeMap } from "../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
 import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
@@ -46,7 +46,12 @@ const TextSize = ({
   };
   const getSizeVal = () => {
     try {
-      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      Object.entries(headingMap).forEach(([format, value]) => {
+        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
+          size = value;
+        }
+      });
       return parseInt(size);
     } catch (err) {
       return "";

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
 import { getSelectedText } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -44,6 +45,9 @@ const MiniToolbar = props => {
     hideTools
   } = customProps;
   const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
+  const {
+    popupType
+  } = useEditorContext();
   useEffect(() => {
     if (popper) {
       setPopper(null);
@@ -73,13 +77,18 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
+        const isDisabled = popupType === type; // for textFormat type
+
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
             onClick: handleClick(type),
-            children: /*#__PURE__*/_jsx(Icon, {})
+            disabled: isDisabled,
+            children: /*#__PURE__*/_jsx(Icon, {
+              from: "miniToolBar"
+            })
           })
         }, `mini_tool_btn_${type}`);
       })

package/dist/Editor/Toolbar/Mini/Options/Options.js

@@ -1,6 +1,7 @@
 import TextIcon from "../../../assets/svg/TextIcon";
 import AddElementIcon from "../../../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
+import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
 const MENU_OPTIONS = [{
   type: "textFormat",
   icon: TextIcon,
@@ -13,5 +14,9 @@ const MENU_OPTIONS = [{
   type: "addTemplate",
   icon: AddTemplateIcon,
   label: "Add Template"
+}, {
+  type: "pageSettings",
+  icon: PageSettingsButton,
+  label: "Page Settings"
 }];
 export default MENU_OPTIONS;

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -34,6 +34,9 @@ const miniToolbarStyles = theme => ({
         "& svg": {
           stroke: theme?.palette?.editor?.svgStroke
         },
+        "& .removeDefaultSvgCls": {
+          stroke: "none !important"
+        },
         "&.active": {
           "& svg": {
             stroke: theme?.palette?.editor?.activeColor

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
+import { Button, IconButton, Popover, TextField } from "@mui/material";
+import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
+import { headingMap, sizeMap } from "../../../utils/font";
+import { useDebounce } from "use-debounce";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const fontSizeOptions = [16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
+function SelectFontSize({
+  editor,
+  classes
+}) {
+  const format = "fontSize";
+  const [fontSize, setFontSize] = useState();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const containerRef = useRef();
+  const [size] = useWindowResize();
+  const val = activeMark(editor, format);
+  const value = getBreakPointsValue(val, size?.device);
+  const [deboundedValue] = useDebounce(fontSize, 500);
+  const updateMarkData = newVal => {
+    let upData = {
+      ...getBreakPointsValue(val),
+      [size?.device]: `${newVal}px`
+    };
+
+    // if desktop update to all other devices
+    // to avoid default normal size
+    if (size?.device === "lg") {
+      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
+        a[b] = `${newVal}px`;
+        return a;
+      }, {});
+    }
+    addMarkData(editor, {
+      format,
+      value: {
+        ...upData
+      }
+    });
+  };
+  const onChangeSize = value => {
+    if (value) {
+      let inc = parseInt(value);
+      inc = inc > 200 ? 200 : inc;
+      updateMarkData(inc);
+    } else {
+      setFontSize(null);
+    }
+  };
+  useEffect(() => {
+    if (deboundedValue) {
+      onChangeSize(deboundedValue);
+    }
+  }, [deboundedValue]);
+  const getSizeVal = () => {
+    try {
+      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      Object.entries(headingMap).forEach(([format, value]) => {
+        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
+          size = value;
+        }
+      });
+      return parseInt(size);
+    } catch (err) {
+      return "";
+    }
+  };
+  useEffect(() => {
+    setFontSize(getSizeVal());
+  }, [value]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    style: {
+      display: "flex",
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/_jsx(TextField, {
+      sx: classes?.miniFontSizeInput,
+      value: fontSize,
+      onChange: e => setFontSize(e.target.value),
+      size: "small"
+    }), /*#__PURE__*/_jsx(IconButton, {
+      onClick: e => {
+        e.preventDefault();
+        setAnchorEl(containerRef.current);
+      },
+      children: /*#__PURE__*/_jsx(DownArrowIcon, {})
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      sx: classes.customSelectPopoverWrapper,
+      children: fontSizeOptions.map((s, i) => {
+        return /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            className: `customSelectOptionLabel ${fontSize === s ? "selected" : ""}`,
+            onClick: () => {
+              setFontSize(s);
+            },
+            children: s
+          })
+        }, i);
+      })
+    })]
+  });
+}
+export default SelectFontSize;

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

@@ -12,6 +12,7 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
+import SelectFontSize from "./SelectFontSize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -64,6 +65,11 @@ const MiniTextFormat = props => {
           editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
+        }), /*#__PURE__*/_jsx(SelectFontSize, {
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
@@ -102,7 +108,6 @@ const MiniTextFormat = props => {
             TransitionProps
           }) => /*#__PURE__*/_jsx(Fade, {
             ...TransitionProps,
-            timeout: 350,
             children: /*#__PURE__*/_jsxs(Paper, {
               style: {
                 borderRadius: "10px"

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

@@ -499,6 +499,9 @@ const usePopupStyle = theme => ({
     }
   },
   customSelectPopoverWrapper: {
+    "& .MuiPopover-paper": {
+      maxHeight: '140px'
+    },
     "& .customSelectOptionLabel": {
       color: "black",
       margin: "0px",
@@ -529,6 +532,16 @@ const usePopupStyle = theme => ({
     bottom: "env(safe-area-inset-bottom)",
     left: 0,
     width: "100%"
+  },
+  miniFontSizeInput: {
+    "& input": {
+      fontSize: "14px",
+      width: "16px",
+      padding: "8px 4px"
+    },
+    "& fieldset": {
+      border: "none !important"
+    }
   }
 });
 export default usePopupStyle;

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

@@ -7,6 +7,7 @@ import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
@@ -15,6 +16,9 @@ const PopupTool = props => {
     setIsTextSelected
   } = props;
   const classes = usePopupStyle(theme);
+  const {
+    setPopupType
+  } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
@@ -32,10 +36,12 @@ const PopupTool = props => {
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
         setOpen(true);
+        setPopupType("textFormat");
         setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
+      setPopupType("");
       setIsTextSelected(false);
     }
   }, [event, anchorEl]);
@@ -65,6 +71,7 @@ const PopupTool = props => {
   const handleClose = () => {
     setAnchorEl(null);
     setOpen(false);
+    setPopupType("");
   };
   return open ? /*#__PURE__*/_jsx(_Fragment, {
     children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
@@ -86,7 +93,6 @@ const PopupTool = props => {
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
         ...TransitionProps,
-        timeout: 350,
         children: /*#__PURE__*/_jsx(Paper, {
           style: {
             borderRadius: "10px"

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

@@ -30,7 +30,7 @@ const tableStyle = [{
     key: "col.entireBgColor",
     type: "color"
   }, {
-    label: "Selected Column Background",
+    label: "Selected Cell Background",
     key: "col.bgColor",
     type: "color"
   }, {

package/dist/Editor/common/iconslist.js

@@ -855,12 +855,13 @@ export const Carousal = props => /*#__PURE__*/_jsxs("svg", {
     fill: "#64748B"
   })]
 });
-export const PageSettings = props => /*#__PURE__*/_jsxs("svg", {
+export const PageSettings = (props = {}) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "17",
   height: "17",
   viewBox: "0 0 17 17",
   fill: "none",
+  ...props,
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.4648 3.24464C11.7617 3.24464 12.0024 2.9352 12.0024 2.55347C12.0024 2.17175 11.7617 1.8623 11.4648 1.8623C11.1679 1.8623 10.9272 2.17175 10.9272 2.55347C10.9272 2.9352 11.1679 3.24464 11.4648 3.24464Z",
     fill: "#64748B"

package/dist/Editor/hooks/useMouseMove.js

@@ -26,6 +26,8 @@ export const EditorProvider = ({
   const [drop, setDrop] = useState(0);
   const [selectedPath, setSelectedPath] = useState(null);
   const path = event?.target?.getAttribute("data-path");
+  const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
+
   const onDrop = () => {
     setDrop(drop + 1);
   };
@@ -48,7 +50,9 @@ export const EditorProvider = ({
       drop,
       theme: theme,
       selectedPath: selectedPath,
-      setSelectedPath: setSelectedPath
+      setSelectedPath: setSelectedPath,
+      popupType,
+      setPopupType
     },
     children: children
   });

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -319,11 +319,15 @@ export const getBlock = props => {
         children: children
       });
     case "list-item":
+      const firstChildren = element.children[0] || {};
       return /*#__PURE__*/_jsx("li", {
         ...attributes,
         ...element.attr,
         className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "List",
+        style: {
+          color: firstChildren?.color
+        },
         children: children
       });
     case "orderedList":

package/dist/Editor/utils/font.js

@@ -58,4 +58,9 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
     text: fontFamilyMap[m],
     value: m
   };
-});
+});
+export const headingMap = {
+  "headingOne": "32px",
+  "headingTwo": "24px",
+  "headingThree": "19px"
+};

package/package.json

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