@flozy/editor 10.4.2 → 10.4.3

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
   type: "dropdown",
   options: [{
     text: "Normal",
-    value: "normal",
-    numVal: "400"
+    value: "normal"
   }, {
     text: "Bold",
-    value: "bold",
-    numVal: "700"
+    value: "bold"
   }, {
     text: "Bolder",
-    value: "bolder",
-    numVal: "700"
+    value: "bolder"
   }, {
     text: "Lighter",
-    value: "lighter",
-    numVal: "100"
+    value: "lighter"
   }],
   icon: FormatBoldIcon,
   width: "100px"
@@ -50,8 +46,7 @@ export const toolbarGroups = [[{
   format: "bold",
   type: "mark",
   title: "Bold",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 5,
   format: "underline",
@@ -62,8 +57,7 @@ export const toolbarGroups = [[{
   format: "italic",
   type: "mark",
   title: "Italic",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 6,
   format: "strikethrough",
@@ -107,42 +101,6 @@ export const toolbarGroups = [[{
   type: "block",
   title: "H3",
   group: "typography"
-}, {
-  id: 39,
-  format: "headingFour",
-  type: "block",
-  title: "H4",
-  group: "typography"
-}, {
-  id: 40,
-  format: "headingFive",
-  type: "block",
-  title: "H5",
-  group: "typography"
-}, {
-  id: 41,
-  format: "headingSix",
-  type: "block",
-  title: "H6",
-  group: "typography"
-}, {
-  id: 42,
-  format: "paragraphOne",
-  type: "block",
-  title: "Paragraph 1",
-  group: "typography"
-}, {
-  id: 43,
-  format: "paragraphTwo",
-  type: "block",
-  title: "Paragraph 2",
-  group: "typography"
-}, {
-  id: 44,
-  format: "paragraphThree",
-  type: "block",
-  title: "Paragraph 3",
-  group: "typography"
 }, {
   id: 14,
   format: "doublequote",

package/dist/Editor/common/ColorPickerButton.js

@@ -1,8 +1,8 @@
 import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
 import SwipeableDrawerComponent from "./SwipeableDrawer";
-import CustomColorPicker from "./CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -12,10 +12,7 @@ const ColorPickerToolComponent = ({
   onSave = () => {},
   recentColors = [],
   hideGradient,
-  handleClose,
-  closeDrawer,
-  hideThemeColors,
-  disableEditTheme
+  handleClose
 }) => {
   const [color, setColor] = useState(value);
   const handleSave = () => {
@@ -35,32 +32,26 @@ const ColorPickerToolComponent = ({
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
     xs: 12,
-    style: {
-      position: "relative"
-    },
     children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        minHeight: "460px"
-      },
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: hideGradient ? false : true,
-        color: color,
+        value: color,
         onChange: handleColorChange,
-        recentColors: recentColors,
-        defaultColors: initialColors,
-        closeDrawer: closeDrawer,
-        hideThemeColors: hideThemeColors,
-        disableEditTheme: disableEditTheme
+        defaultColors: initialColors
       })
     }), /*#__PURE__*/_jsxs("div", {
-      className: "colorPickerActionBtns",
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        margin: "8px"
+      },
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleClose,
-        className: "cancelBtn",
+        className: "secondaryBtn",
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: handleSave,
-        className: "confirmBtn",
+        className: "primaryBtn",
         children: "Save"
       })]
     })]
@@ -73,11 +64,7 @@ const ColorPickerButton = props => {
     defaultColors = [],
     classes = {},
     recentColors = [],
-    hideGradient,
-    children,
-    handleClose: closeDrawer,
-    hideThemeColors,
-    disableEditTheme
+    hideGradient
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -89,13 +76,7 @@ const ColorPickerButton = props => {
     setAnchorEl(null);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children ? /*#__PURE__*/_jsx("div", {
-      onClick: handleColorPicker,
-      style: {
-        cursor: "pointer"
-      },
-      children: children
-    }) : /*#__PURE__*/_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
@@ -122,10 +103,7 @@ const ColorPickerButton = props => {
           onSave: onSave,
           recentColors: recentColors,
           hideGradient: hideGradient,
-          handleClose: handleClose,
-          closeDrawer: closeDrawer,
-          hideThemeColors: hideThemeColors,
-          disableEditTheme: disableEditTheme
+          handleClose: handleClose
         })
       })
     }) : /*#__PURE__*/_jsx(Popover, {
@@ -151,10 +129,7 @@ const ColorPickerButton = props => {
           onSave: onSave,
           recentColors: recentColors,
           hideGradient: hideGradient,
-          handleClose: handleClose,
-          closeDrawer: closeDrawer,
-          hideThemeColors: hideThemeColors,
-          disableEditTheme: disableEditTheme
+          handleClose: handleClose
         })
       })
     })]

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
 const DragHandleStyle = fromPopper => {
   const handleDragStyle = fromPopper ? {
     position: "absolute",

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -19,8 +19,6 @@ const FontLoader = props => {
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
-    // let hideLoaderOn = 30;
-
     const loadNextBatch = () => {
       try {
         if (currentIndex >= families?.length) {
@@ -81,7 +79,6 @@ const FontLoader = props => {
         // console.log(err);
         // setLoading(false);
       });
-      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString?.split(",");

package/dist/Editor/common/Icon.js

@@ -48,16 +48,6 @@ import ChervUp from "../assets/svg/ChervUp";
 import ResetIconNew from "../assets/svg/ResetIconNew";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const HeadingIcon = ({
-  variant
-}) => {
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      color: "#64748B"
-    },
-    children: variant
-  });
-};
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -90,24 +80,6 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H4"
-  }),
-  headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H5"
-  }),
-  headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H6"
-  }),
-  paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P1"
-  }),
-  paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P2"
-  }),
-  paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P3"
-  }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
     fill: "#64748B",

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -17,7 +17,7 @@ const IMAGE_SLECTOR_OPTIONS = {
 };
 const TAB_SHOW = {
   Image: ["upload", "choose", "addLink"],
-  Video: ["upload", "addLink"],
+  Video: ["addLink"],
   Embed: ["addLink"],
   Document: ["addLink", "upload"]
 };
@@ -35,7 +35,7 @@ const ImageSelector = props => {
     customProps
   } = props;
   const translation = customProps?.translation;
-  const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "Video" ? "upload" : "addLink");
+  const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
   const [image, setImage] = useState(value || "");
   const handleTabChange = (e, newValue) => {
     setImage("");

package/dist/Editor/common/ImageSelector/Styles.js

@@ -76,7 +76,7 @@ const ImageSelectorStyles = theme => ({
       background: theme?.palette?.editor?.deviderBgColor,
       "@media only screen and (min-width: 899px)": {
         margin: "0px 24px",
-        width: "calc(100% - 48px)"
+        width: 'calc(100% - 48px)'
       }
     },
     "& .primaryBtn": {
@@ -104,6 +104,12 @@ const ImageSelectorStyles = theme => ({
       marginRight: "8px !important"
     },
     "& .MuiGrid-root": {
+      "&::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
       "&::-webkit-scrollbar-thumb": {
         background: `${theme?.palette?.editor?.brainPopupScroll} !important`
       },
@@ -112,10 +118,10 @@ const ImageSelectorStyles = theme => ({
       }
     },
     "& .MuiImageList-root": {
-      margin: "0px"
+      margin: '0px'
     },
     "& .MuiDialogContent-root": {
-      padding: "20px 24px 5px 24px"
+      padding: '20px 24px 5px 24px'
     }
   },
   titleTypo: {

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -1,8 +1,8 @@
-import { Autocomplete, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, IconButton, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
 import Select from "../Select";
-import Checkbox from "../Checkbox";
+import { CheckedBoxCheckIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,10 +28,24 @@ const OpenInNewTab = props => {
     onNewTabChange,
     translation
   } = props;
-  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(Checkbox, {
-    checked: openInNewTab,
-    onChange: onNewTabChange,
-    label: translation("Open in new tab")
+  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(FormControlLabel, {
+    className: "ccheckbox-primary",
+    control: /*#__PURE__*/_jsx(Checkbox, {
+      checked: openInNewTab,
+      onChange: onNewTabChange,
+      className: "checkBox",
+      checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+        className: "checkedIcon",
+        children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+      }),
+      icon: /*#__PURE__*/_jsx(IconButton, {
+        className: "unCheckedIcon"
+      })
+    }),
+    label: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: "Open in new tab"
+    })
   }) : null;
 };
 export const TextInput = props => {
@@ -58,7 +72,8 @@ export const SelectPage = props => {
     value,
     onChange,
     services,
-    translation
+    translation,
+    classes
   } = props;
   const [pages, setPages] = useState([]);
   const editor = useSlate();
@@ -111,42 +126,28 @@ export const SelectPage = props => {
   }, [value, pages]);
   const isCurrentPage = page?.value === "_currentPage";
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(Select, {
+    children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: page?.label,
+      setValue: val => onChange(val?.value || ""),
+      placeholder: translation("Select Page"),
       options: pages,
-      value: page?.value,
-      onChange: e => onChange(e.target.value || ""),
       disabled: isCurrentPage,
-      label: translation("Select Page"),
-      showDefault: true,
-      translation: translation
-    }), /*#__PURE__*/_jsx(Select, {
-      options: page?.sections?.map(p => ({
-        label: p,
-        value: p
-      })),
-      value: section?.value,
-      onChange: e => {
-        const {
-          value = ""
-        } = e.target;
+      classes: classes
+    }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: section?.label,
+      setValue: val => {
         let url = page?.value;
-        if (value) {
-          url += `#${value}`;
-        } else {
-          const [page] = url.split("#");
-          url = page;
+        if (val?.value) {
+          url += `#${val?.value}`;
         }
         onChange(url);
       },
-      disabled: isCurrentPage,
-      label: translation("Select Section or anchor"),
-      labelProps: {
-        sx: {
-          padding: "10px 0px 4px 0px"
-        }
-      },
-      showDefault: true,
-      translation: translation
+      placeholder: translation("Select Section or anchor"),
+      options: page?.sections?.map(p => ({
+        label: p,
+        value: p
+      })),
+      classes: classes
     }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
     })]
@@ -175,15 +176,35 @@ export const ScrollTopBottom = props => {
   const {
     value,
     onChange,
-    translation
+    translation,
+    classes
   } = props;
-  return /*#__PURE__*/_jsx(Select, {
-    options: scrollToOptions,
-    value: value,
-    onChange: e => onChange(e.target.value),
-    label: translation("Choose Top/Bottom of page"),
-    showDefault: true,
-    translation: translation
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      children: translation("Choose Top/Bottom of page")
+    }), /*#__PURE__*/_jsx(Select, {
+      size: "small",
+      fullWidth: true,
+      value: value,
+      onChange: e => onChange(e.target.value),
+      MenuProps: {
+        sx: classes.customSelect,
+        disablePortal: true
+      },
+      children: scrollToOptions.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: translation(option.label)
+          })
+        }, i);
+      })
+    })]
   });
 };
 const filter = createFilterOptions();

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

@@ -5,7 +5,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import { Box, FormControl, Grid, Typography, useMediaQuery } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
@@ -13,7 +13,6 @@ import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Select from "../Select";
-import RadioGroup from "../RadioGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,7 +46,7 @@ export default function LinkSettings(props) {
     tagName,
     translation
   } = customProps;
-  const isMobile = useMediaQuery("(max-width: 899px)");
+  const isMobile = useMediaQuery('(max-width: 899px)');
   const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -69,7 +68,7 @@ export default function LinkSettings(props) {
       open: true,
       onClose: handleClose,
       children: /*#__PURE__*/_jsxs(Grid, {
-        sx: classes.swipeableDrawerContainer,
+        sx: classes.drawerContainer,
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "subtitle1",
           gutterBottom: true,
@@ -79,7 +78,8 @@ export default function LinkSettings(props) {
           className: "link-settings-title",
           children: translation("dialogueTitle")
         }), /*#__PURE__*/_jsx(Select, {
-          options: navOptions,
+          size: "small",
+          fullWidth: true,
           value: nav?.value,
           onChange: e => {
             const {
@@ -90,10 +90,19 @@ export default function LinkSettings(props) {
             setNavValue("");
           },
           displayEmpty: true,
-          translation: translation,
           MenuProps: {
-            sx: classes.customSelect
-          }
+            sx: classes.customSelect,
+            disablePortal: true
+          },
+          children: navOptions.map((navOption, i) => {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: navOption.value,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: translation(navOption.label)
+              })
+            }, i);
+          })
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
             paddingTop: "14px"
@@ -128,6 +137,7 @@ export default function LinkSettings(props) {
       sx: classes.dialogContainer,
       fullWidth: true,
       maxWidth: "sm",
+      disablePortal: true,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         direction: "row",
@@ -158,13 +168,18 @@ export default function LinkSettings(props) {
             children: /*#__PURE__*/_jsx(FormControl, {
               sx: classes.customRadioBtn,
               children: /*#__PURE__*/_jsx(RadioGroup, {
-                options: navOptions,
                 value: nav?.value,
-                onChange: navOption => {
-                  setNav(navOption);
-                  setNavValue("");
-                },
-                translation: translation
+                children: navOptions?.map((navOption, i) => {
+                  return /*#__PURE__*/_jsx(FormControlLabel, {
+                    value: navOption.value,
+                    control: /*#__PURE__*/_jsx(Radio, {}),
+                    label: translation(navOption.label),
+                    onChange: () => {
+                      setNav(navOption);
+                      setNavValue("");
+                    }
+                  }, i);
+                })
               })
             })
           }), /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -26,11 +26,11 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
   }, {
     label: "Email",
     value: "email",
-    placeholder: "mail@example.com"
+    placeholder: "email"
   }, {
     label: "Phone number",
     value: "phone",
-    placeholder: "+1 (702) 123-4567"
+    placeholder: "phone"
   }];
   navOptions = navOptions.filter(n => !hideTools.includes(n.value));
   if (!allowTrigger) {