@flozy/editor 4.6.6 → 4.6.8

package/dist/Editor/CommonEditor.js

@@ -93,9 +93,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     data: content
   });
   const [value, setValue] = useState(convertedContent);
-  const [loadedValue] = useState(value);
   const [isInteracted, setIsInteracted] = useState(false);
-  const [deboundedValue] = useDebounce(value, 500);
   const [fullScreen, setFullScreen] = useState(false);
   const [toolbarShow, setToolbarShow] = useState(true);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -105,6 +103,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isTextSelected, setIsTextSelected] = useState(false);
   const [breakpoint, setBreakpoint] = useState("");
+  const debouncedValue = useRef(value);
   const [size] = useWindowResize();
   const {
     needDotsBG,
@@ -145,23 +144,27 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
       data: content
     }));
-    if (!ReactEditor.isFocused(editor)) {
+    if (!isMobile && !ReactEditor.isFocused(editor)) {
       ReactEditor.focus(editor);
     }
   }, [id, content]);
-  useEffect(() => {
-    if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(deboundedValue);
-      onSave(strVal, restVal);
-    }
-  }, [deboundedValue]);
+  const debounced = useDebouncedCallback(
+  // function
+  value => {
+    const {
+      value: strVal,
+      ...restVal
+    } = getOnSaveData(value);
+    debouncedValue.current = value;
+    onSave(strVal, restVal);
+  },
+  // delay in ms
+  500);
   const getOnSaveData = val => {
     const text = serializeToText(val);
     const title = val?.find(f => f.type === "title");
@@ -205,7 +208,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       return editor;
     },
     getContent() {
-      return getOnSaveData(deboundedValue);
+      return getOnSaveData(debouncedValue?.current);
     },
     insertFragments(fragments, clearAll = false, rest = {}) {
       try {
@@ -294,7 +297,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    setValue(newValue);
+    debounced(newValue);
     if (!isInteracted) {
       setIsInteracted(true);
     }

package/dist/Editor/Editor.css

@@ -1206,17 +1206,4 @@ blockquote {
 
 .freegrid-section {
   max-width: 100% !important;
-}
-
-.divider-settings {
-  display: none;
-  position: absolute;
-}
-
-.dividerComponent:hover {
-  padding: 10px 0;
-}
-
-.dividerComponent:hover .divider-settings {
-  display: block;
 }

package/dist/Editor/Elements/Divider/Divider.js

@@ -1,138 +1,30 @@
-import React, { useState } from "react";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import DividerPopup from "./DividerPopup";
-import { Transforms } from "slate";
+import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
   const {
     attributes,
-    children,
-    element,
-    customProps
+    children
   } = props;
-  const {
-    theme
-  } = useEditorContext();
-  const {
-    borderColor = theme?.palette?.primary?.main || '#0F172A',
-    borderWidth = '1px',
-    borderStyle = 'solid'
-  } = element;
-  const {
-    readOnly
-  } = customProps;
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-  const [openSettings, setOpenSettings] = useState(false);
-  const {
-    hoverPath
-  } = useEditorContext();
-  const [showTool] = useEditorSelection(editor);
-  const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const DividerToolbar = ({
-    selected,
-    showTool,
-    onSettings
-  }) => {
-    return /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      className: "divider-settings",
-      style: {
-        top: "-20px",
-        left: 0
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Divider Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          sx: {
-            background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
-            border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
-            boxShadow: '0px 0px 4px 0px #00000040',
-            borderRadius: '50%',
-            '& svg': {
-              stroke: theme?.palette?.text?.secondary3
-            },
-            '&.MuiIconButton-root:hover': {
-              background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
-            }
-          },
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    });
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    if (path) {
-      Transforms.removeNodes(editor, {
-        at: path
-      });
-    }
-  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "dividerComponent",
+    contentEditable: "false",
     style: {
-      userSelect: "none",
-      position: 'relative'
+      userSelect: "none"
     },
-    children: [!readOnly && /*#__PURE__*/_jsx("div", {
-      className: `element-root element-selector`,
-      contentEditable: false,
-      style: {
-        zIndex: 1000
-      },
-      children: /*#__PURE__*/_jsx(DividerToolbar, {
-        selected: selected,
-        showTool: showTool,
-        onSettings: onSettings
-      })
-    }), /*#__PURE__*/_jsx("hr", {
-      contentEditable: false,
+    children: [/*#__PURE__*/_jsx("hr", {
+      contentEditable: "false",
       className: "editorDivider",
       style: {
-        userSelect: "none",
-        borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
-        backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
-        height: borderColor?.includes("linear") ? borderWidth : undefined
+        userSelect: "none"
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {
         display: "none"
       },
       children: children
-    }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      onDelete: onDelete,
-      customProps: customProps
-    }) : null]
+    })]
   });
 };
 export default Divider;

package/dist/Editor/Elements/Embed/Video.js

@@ -87,8 +87,7 @@ const Video = ({
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing,
-    aspectRatio
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -190,10 +189,9 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url && !aspectRatio ? {
+          height: url ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto",
-          aspectRatio: aspectRatio ? aspectRatio : "auto"
+          } : "auto"
         }, theme)
       };
     }

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -6,6 +6,7 @@ import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import EmojiPicker from "./EmojiPicker";
+import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,6 +20,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [target, setTarget] = useState(selectionTarget);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useImperativeHandle(ref, () => ({
     triggerClick: target => {
       setTarget(target);
@@ -54,7 +56,28 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
         icon: "emoji"
       }),
       icoBtnType: icoBtnType
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      customClass: "emojiDrawer",
+      swipeableDrawer: false,
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          width: '100%'
+        },
+        sx: {
+          '& em-emoji-picker': {
+            width: '100%'
+          }
+        },
+        children: /*#__PURE__*/_jsx(EmojiPicker, {
+          data: data,
+          onEmojiSelect: onEmojiSelect,
+          theme: theme?.palette?.type,
+          dynamicWidth: true
+        })
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       style: {
         zIndex: 10001
       },

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -6,16 +6,14 @@ const EmojiPicker = props => {
   const {
     onEmojiSelect,
     onClose,
-    theme = 'light',
-    ...rest
+    theme = 'light'
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
       onEmojiSelect: onEmojiSelect,
       onClickOutside: onClose,
-      theme: theme,
-      ...rest
+      theme: theme
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -344,26 +344,6 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
-      case "addDivider":
-        Transforms.insertNodes(editor, [{
-          type: "freegridItem",
-          childType: "divider",
-          children: [{
-            type: "divider",
-            children: [{
-              text: ""
-            }]
-          }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 30
-        }], {
-          at: [...insertAt]
-        });
-        break;
       default:
     }
     // focus on newly added element

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -43,10 +43,6 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addSignature",
   label: "Signature",
   icon: "signature"
-}, {
-  actionType: "addDivider",
-  label: "Divider",
-  icon: "divider"
 }];
 const AddElement = props => {
   const {
@@ -55,10 +51,6 @@ const AddElement = props => {
   } = props;
   const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
   return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      maxHeight: "500px",
-      overflowY: 'auto'
-    },
     children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
       children: ADD_ELEMENTS.map(m => {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -11,7 +11,6 @@ const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown",
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
 const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
 const signOptions = ["removeSign", "saveAsTemplate", "close"];
-const dividerOptions = ["settings", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -25,7 +24,6 @@ const itemOptions = {
   embedScript: embedScriptOptions,
   video: videoOptions,
   signature: signatureOptions,
-  sign: signOptions,
-  divider: dividerOptions
+  sign: signOptions
 };
 export default itemOptions;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -91,6 +91,7 @@ const useFreeGridStyles = ({
         },
         "&.enable-1": {
           "&.type_text": {
+            wordBreak: "break-all",
             "*": {
               "::selection": {
                 backgroundColor: "transparent !important",

package/dist/Editor/Elements/Redo/RedoButton.js

@@ -1,7 +1,14 @@
 import React from "react";
+import { useSlateStatic } from "slate-react";
 import RedoIcon from "../../assets/svg/RedoIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RedoButton = () => {
-  return /*#__PURE__*/_jsx(RedoIcon, {});
+  const editor = useSlateStatic();
+  const onRedo = () => {
+    editor?.redo();
+  };
+  return /*#__PURE__*/_jsx(RedoIcon, {
+    onClick: onRedo
+  });
 };
 export default RedoButton;

package/dist/Editor/Elements/SimpleText/index.js

@@ -52,7 +52,6 @@ const SimpleText = props => {
     className: "placeholder-simple-text",
     children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
       children: ["Type ", /*#__PURE__*/_jsx("span", {
-        contentEditable: false,
         style: {
           backgroundColor: '#F2F6FA',
           padding: "0px 2px",

package/dist/Editor/Elements/Undo/UndoButton.js

@@ -1,7 +1,14 @@
 import React from "react";
+import { useSlateStatic } from "slate-react";
 import UndoIcon from "../../assets/svg/UndoIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const UndoButton = () => {
-  return /*#__PURE__*/_jsx(UndoIcon, {});
+  const editor = useSlateStatic();
+  const onUndo = () => {
+    editor?.undo();
+  };
+  return /*#__PURE__*/_jsx(UndoIcon, {
+    onClick: onUndo
+  });
 };
 export default UndoButton;

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

@@ -42,8 +42,6 @@ const MiniToolbar = props => {
   const [popper, setPopper] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [fullScreen, setFullScreen] = useState(false);
-  const [undoCooldown, setUndoCooldown] = useState(false);
-  const [redoCooldown, setRedoCooldown] = useState(false);
   const [search, setSearch] = useState("");
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
@@ -58,9 +56,8 @@ const MiniToolbar = props => {
     selectedElement,
     setSelectedElement
   } = useEditorContext();
-  const cooldownTime = 200;
-  const canUndo = editor.history.undos.length > 0 && !undoCooldown;
-  const canRedo = editor.history.redos.length > 0 && !redoCooldown;
+  const canUndo = editor.history.undos.length > 0;
+  const canRedo = editor.history.redos.length > 0;
   const [toolTip, setToolTip] = useState(false);
   const [data, setData] = useState(null);
   useEffect(() => {
@@ -75,18 +72,6 @@ const MiniToolbar = props => {
     }
   }, [editor.selection]);
   const handleClick = type => e => {
-    if (type === "undo" && canUndo && !undoCooldown) {
-      editor.undo();
-      setUndoCooldown(true);
-      setTimeout(() => setUndoCooldown(false), cooldownTime);
-      return;
-    }
-    if (type === "redo" && canRedo && !redoCooldown) {
-      editor.redo();
-      setRedoCooldown(true);
-      setTimeout(() => setRedoCooldown(false), cooldownTime);
-      return;
-    }
     if (type === "page-settings") {
       setToolTip(true);
     }
@@ -144,7 +129,7 @@ const MiniToolbar = props => {
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
+            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""}`,
             onClick: handleClick(type),
             disabled: isDisabled,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {

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

@@ -42,6 +42,34 @@ const miniToolbarStyles = theme => ({
             stroke: theme?.palette?.editor?.activeColor
           }
         },
+        "&.activeUndo": {
+          "& svg": {
+            "& path": {
+              stroke: theme?.palette?.editor?.miniToolBarSvgStroke
+            }
+          }
+        },
+        "&.activeRedo": {
+          "& svg": {
+            "& path": {
+              stroke: theme?.palette?.editor?.miniToolBarSvgStroke
+            }
+          }
+        },
+        "&.disabledRedo": {
+          "& svg": {
+            "& path": {
+              stroke: theme?.palette?.editor?.miniToolBarSvgStrokeDiabled
+            }
+          }
+        },
+        "&.disabledUndo": {
+          "& svg": {
+            "& path": {
+              stroke: theme?.palette?.editor?.miniToolBarSvgStrokeDiabled
+            }
+          }
+        },
         "&.disabled": {
           "& svg": {
             "& path": {

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

@@ -62,6 +62,7 @@ export default function LinkSettings(props) {
   };
   if (isMobile) {
     return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+      open: true,
       onClose: handleClose,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "subtitle1",

package/dist/Editor/common/RnD/ElementSettings/Settings/index.js

@@ -7,7 +7,6 @@ import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
 import TableSettings from "./TableSettings";
 import CodeSettings from "./CodeSettings";
-import DividerSettings from "./DividerSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -17,7 +16,6 @@ const SettingsComponents = {
   appHeader: AppHeaderSettings,
   form: FormSettings,
   table: TableSettings,
-  embedScript: CodeSettings,
-  divider: DividerSettings
+  embedScript: CodeSettings
 };
 export default SettingsComponents;

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -7,8 +7,7 @@ export const settingsLabel = {
   appHeader: "App Header Settings",
   form: "Form Settings",
   table: "Table Settings",
-  embedScript: "Code Settings",
-  divider: 'Divider Settings'
+  embedScript: "Code Settings"
 };
 export const ItemTypes = {
   text: "Text",
@@ -20,6 +19,5 @@ export const ItemTypes = {
   form: "Form",
   table: "Table",
   embedScript: "Code",
-  signature: "Signature",
-  divider: 'Divider'
+  signature: "Signature"
 };

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

@@ -16,8 +16,10 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
-  const theme = useEditorContext();
-  const classes = SectionStyle(themeReact, theme?.theme);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = SectionStyle(themeReact, theme);
   const {
     children,
     element,
@@ -122,12 +124,12 @@ const Section = props => {
     borderRadius: {
       ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
     }
-  }, theme);
+  }, themeReact);
   const edInnerSp = groupByBreakpoint({
     width: {
       ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
     }
-  }, theme);
+  }, themeReact);
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,

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

@@ -6,25 +6,6 @@ const embedVideoStyle = [{
     label: "URL",
     key: "url",
     type: "text"
-  }, {
-    label: "Aspect Ratio",
-    key: "aspectRatio",
-    type: "textOptions",
-    options: [{
-      text: "Cover (Default)",
-      value: ""
-    }, {
-      text: "16:9",
-      value: "16 / 9"
-    }, {
-      text: "9:16",
-      value: "9 / 16"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        children: option.text
-      });
-    }
   }]
 }, {
   tab: "Position",

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
+import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,30 +46,15 @@ const Color = props => {
     item: true,
     xs: 12,
     className: "btnColorPicker",
-    children: [/*#__PURE__*/_jsxs(Typography, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
         fontSize: "14px",
         fontWeight: 500,
-        marginBottom: "5px",
-        display: 'flex',
-        alignItems: 'center',
-        '& svg': {
-          width: '20px',
-          height: '20px'
-        }
+        marginBottom: "5px"
       },
-      children: [label, data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
-        arrow: true,
-        title: "Note: If color gradient is used, divider styles will not apply",
-        children: /*#__PURE__*/_jsx("span", {
-          style: {
-            display: 'inline-block'
-          },
-          children: data?.infoIcon
-        })
-      }) : null]
+      children: label
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,

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

@@ -1,7 +1,9 @@
-import { Box, SwipeableDrawer } from "@mui/material";
+import { Box, Drawer, SwipeableDrawer } from "@mui/material";
 import DrawerStyles from "./style";
 import { grey } from "@mui/material/colors";
 import { styled } from "@mui/material/styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { Fragment } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Puller = styled("div")(({
@@ -17,18 +19,50 @@ const Puller = styled("div")(({
 function SwipeableDrawerComponent({
   open,
   onClose,
-  children
+  children,
+  customClass,
+  swipeableDrawer,
+  disableSwipeToOpen
 }) {
-  const classes = DrawerStyles();
-  return /*#__PURE__*/_jsxs(SwipeableDrawer, {
-    anchor: "bottom",
-    open: true,
-    onClose: onClose,
-    sx: classes.drawerContainer,
-    children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
-      sx: classes.childContainer,
-      children: children
-    })]
+  const {
+    theme
+  } = useEditorContext();
+  const classes = DrawerStyles(theme);
+  const handleClose = e => {
+    e.stopPropagation();
+    onClose();
+  };
+  return /*#__PURE__*/_jsx(Fragment, {
+    children: swipeableDrawer ? /*#__PURE__*/_jsxs(SwipeableDrawer, {
+      disableSwipeToOpen: disableSwipeToOpen,
+      anchor: "bottom",
+      open: open,
+      onClose: handleClose,
+      sx: classes.drawerContainer,
+      children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
+        className: customClass,
+        sx: classes.childContainer,
+        children: children
+      })]
+    }) : /*#__PURE__*/_jsxs(Drawer, {
+      disableSwipeToOpen: true,
+      anchor: "bottom",
+      open: open,
+      onClose: handleClose,
+      sx: classes.drawerContainer,
+      children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
+        className: customClass,
+        sx: classes.childContainer,
+        children: children
+      })]
+    })
   });
 }
+SwipeableDrawerComponent.defaultProps = {
+  open: false,
+  onClose: () => {},
+  customClass: '',
+  swipeableDrawer: true,
+  disableSwipeToOpen: true
+};
 export default SwipeableDrawerComponent;

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -1,12 +1,20 @@
-const Styles = () => ({
+const Styles = theme => ({
   drawerContainer: {
+    "&.MuiDrawer-root": {
+      zIndex: 1301
+    },
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
-      borderTopRightRadius: 8
+      borderTopRightRadius: 8,
+      backgroundColor: theme.palette.containers.card
     }
   },
   childContainer: {
-    padding: "20px"
+    padding: "20px",
+    '&.emojiDrawer': {
+      padding: 'unset',
+      paddingTop: '10px'
+    }
   }
 });
 export default Styles;

package/dist/Editor/hooks/useMouseMove.js

@@ -98,11 +98,7 @@ export const EditorProvider = ({
     updateDragging,
     fontFamilies,
     setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement,
-  // dragging.active,
-  // dragging.isDragging,
-  // dragging.dragOver,
-  contextMenu, openAI, popupType, drop]);
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/withCommon.js

@@ -9,7 +9,8 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-import withRestrictedNodes from "./withRestrictedNodes";
+// import withRestrictedNodes from "./withRestrictedNodes";
+
 const withCommon = (props, {
   needLayout = false,
   isChatEditor = false

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -43,7 +43,7 @@ import Code from "../Elements/EmbedScript/Code";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
 import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
-import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
+// import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
 const list_types = ["orderedList", "unorderedList"];
@@ -206,7 +206,6 @@ export const getMarked = (leaf, children, theme) => {
   }
   // cover under single span
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
-    console.log("🚀 ~ getMarked ~ leaf:", leaf);
     const family = leaf?.fontFamily;
     const textStyles = getTextColor(leaf?.color);
     children = /*#__PURE__*/_jsx("span", {

package/dist/Editor/utils/helper.js

@@ -483,7 +483,7 @@ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegrid
     }
     return false;
   } catch (err) {
-    console.log("isFreeGrid error:", err);
+    console.log('isFreeGrid error:', err);
     return false;
   }
 };

package/package.json

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

package/dist/Editor/Elements/Divider/DividerPopup.js

@@ -1,24 +0,0 @@
-import React from "react";
-import StyleBuilder from "../../common/StyleBuilder";
-import dividerStyle from "../../common/StyleBuilder/dividerStyles";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DividerPopup = props => {
-  const {
-    element,
-    onSave,
-    onClose,
-    onDelete,
-    customProps
-  } = props;
-  return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Divider",
-    type: "dividerStyle",
-    element: element,
-    onSave: onSave,
-    onClose: onClose,
-    renderTabs: dividerStyle,
-    onDelete: onDelete,
-    customProps: customProps
-  });
-};
-export default DividerPopup;

package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js

@@ -1,49 +0,0 @@
-import React from "react";
-import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
-import { StyleContent } from "../../../StyleBuilder";
-import dividerStyle from "../../../StyleBuilder/dividerStyles";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DividerSettings = props => {
-  const {
-    editor,
-    path,
-    customProps
-  } = props;
-  const item_path = path?.split("|").map(m => parseInt(m));
-  const element_path = [...item_path, 0];
-  const element = Node.get(editor, element_path);
-  const onChange = data => {
-    console.log("🚀 ~ onChange ~ data:", data);
-    console.log("🚀 ~ onChange ~ element:", element);
-    const updated_props = {
-      ...element,
-      ...data,
-      field_type: data?.element
-    };
-    delete updated_props.children;
-    Transforms.setNodes(editor, {
-      ...updated_props
-    }, {
-      at: element_path
-    });
-  };
-  const handleClose = () => {
-    console.log("close");
-  };
-  return /*#__PURE__*/_jsx(Box, {
-    component: "div",
-    className: "item-w",
-    children: dividerStyle?.map((m, i) => {
-      return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: dividerStyle,
-        value: m.value,
-        element: element,
-        onChange: onChange,
-        customProps: customProps,
-        handleClose: handleClose
-      }, `tab_${m.value}_$${i}`);
-    })
-  });
-};
-export default DividerSettings;

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

@@ -1,56 +0,0 @@
-import Icon from "../Icon";
-import { jsx as _jsx } from "react/jsx-runtime";
-const dividerStyle = [{
-  tab: "Border",
-  value: "sectionBorderRadius",
-  fields: [{
-    label: "Divider Color",
-    key: "borderColor",
-    type: "color",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }, {
-    label: "Divider Width",
-    key: "borderWidth",
-    type: "text",
-    placeholder: "1px",
-    width: 6
-  }, {
-    label: "Divider Style",
-    key: "borderStyle",
-    type: "textOptions",
-    width: 6,
-    options: [{
-      text: "Solid",
-      value: "solid"
-    }, {
-      text: "Dotted",
-      value: "dotted"
-    }, {
-      text: "Dashed",
-      value: "dashed"
-    }, {
-      text: "Double",
-      value: "double"
-    }, {
-      text: "Groove",
-      value: "groove"
-    }, {
-      text: "Ridge",
-      value: "ridge"
-    }, {
-      text: "Inset",
-      value: "inset"
-    }, {
-      text: "Outset",
-      value: "outset"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        children: option.text
-      });
-    }
-  }]
-}];
-export default dividerStyle;