@flozy/editor 3.1.0 → 3.1.2

package/dist/Editor/CommonEditor.js

@@ -408,7 +408,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: editorWrapperStyle,

package/dist/Editor/Editor.css

@@ -1109,3 +1109,7 @@ blockquote {
 .doublequote::after {
   content: '\201D';
 }
+
+.scrollSmooth {
+  scroll-behavior: smooth;
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/NavComponents.js

@@ -0,0 +1,219 @@
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OpenInNewTab = props => {
+  const {
+    nav,
+    openInNewTab,
+    onNewTabChange
+  } = props;
+  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(FormControlLabel, {
+    className: "ccheckbox-primary",
+    control: /*#__PURE__*/_jsx(Checkbox, {
+      checked: openInNewTab,
+      onChange: onNewTabChange
+    }),
+    label: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: "Open in new tab"
+    })
+  }) : null;
+};
+export const TextInput = props => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextField, {
+      fullWidth: true,
+      size: "small",
+      ...props,
+      onChange: e => {
+        props.onChange(e.target.value);
+      }
+    }), /*#__PURE__*/_jsx(OpenInNewTab, {
+      ...props
+    })]
+  });
+};
+export const SelectPage = props => {
+  const {
+    value,
+    onChange,
+    services
+  } = props;
+  const [pages, setPages] = useState([]);
+  const getPages = async () => {
+    const result = await services("getPages", {});
+    const refactor = result?.data?.map(r => {
+      const {
+        title,
+        url_name,
+        ...rest
+      } = r;
+      return {
+        label: title,
+        value: url_name,
+        ...rest
+      };
+    });
+    setPages(refactor);
+  };
+  useEffect(() => {
+    getPages();
+  }, []);
+  const [page, section] = useMemo(() => {
+    if (value) {
+      const [page, section] = value.split("#");
+      const selectedPage = pages.find(p => p.value === page) || {
+        label: page,
+        value: page
+      };
+      const selectedSection = pages.find(p => p.value === section) || {
+        label: section,
+        value: section
+      };
+      return [selectedPage, selectedSection];
+    }
+    return [];
+  }, [value, pages]);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: page?.label,
+      setValue: val => onChange(val?.value),
+      placeholder: "Select Page",
+      options: pages
+    }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: section?.label,
+      setValue: val => {
+        let url = page?.value;
+        if (val?.value) {
+          url += `#${val?.value}`;
+        }
+        onChange(url);
+      },
+      placeholder: "Select Section or anchor",
+      options: page?.sections?.map(p => ({
+        label: p,
+        value: p
+      }))
+    }), /*#__PURE__*/_jsx(OpenInNewTab, {
+      ...props
+    })]
+  });
+};
+export const Trigger = props => {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h6",
+    gutterBottom: true,
+    children: "Choosing this will trigger the next step"
+  });
+};
+const scrollToOptions = [{
+  label: "Top",
+  value: "top"
+}, {
+  label: "Bottom",
+  value: "bottom"
+}];
+export const ScrollTopBottom = props => {
+  const {
+    value,
+    onChange
+  } = props;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      children: "Choose Top/Bottom of page"
+    }), /*#__PURE__*/_jsx(Select, {
+      size: "small",
+      fullWidth: true,
+      value: value,
+      onChange: e => onChange(e.target.value),
+      children: scrollToOptions.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: option.label
+          })
+        }, i);
+      })
+    })]
+  });
+};
+const filter = createFilterOptions();
+export function FreeSoloCreateOption({
+  label,
+  setValue,
+  options = [],
+  placeholder = ""
+}) {
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    freeSolo: true,
+    options: options,
+    value: label || "",
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      label: placeholder
+    }),
+    renderOption: (props, option) => /*#__PURE__*/_jsx("li", {
+      ...props,
+      children: option.label
+    }),
+    onChange: (event, newValue) => {
+      if (typeof newValue === 'string') {
+        setValue({
+          value: newValue
+        });
+      } else if (newValue && newValue.inputValue) {
+        const {
+          inputValue
+        } = newValue;
+
+        // Create a new value from the user input
+        setValue({
+          label: inputValue,
+          value: inputValue
+        });
+      } else {
+        setValue(newValue);
+      }
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params);
+      const {
+        inputValue
+      } = params;
+      // Suggest the creation of a new value
+      const isExisting = options.some(option => inputValue === option.label);
+      if (inputValue !== '' && !isExisting) {
+        filtered.push({
+          inputValue,
+          label: `Add "${inputValue}"`
+        });
+      }
+      return filtered;
+    },
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    getOptionLabel: option => {
+      // Value selected with enter, right from the input
+      if (typeof option === 'string') {
+        return option;
+      }
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue;
+      }
+      // Regular option
+      return option.value;
+    },
+    sx: {
+      marginTop: "10px"
+    }
+  });
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/index.js

@@ -0,0 +1,138 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { FormControl, FormControlLabel, Grid, Radio, RadioGroup } from '@mui/material';
+import { useState } from 'react';
+import ButtonNavSettingsStyles from './style';
+import { getNavOptions } from './navOptions';
+import { ScrollTopBottom, SelectPage, TextInput, Trigger } from './NavComponents';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MAP_COMPONENT = {
+  webAddress: TextInput,
+  email: TextInput,
+  phone: TextInput,
+  actionTrigger: Trigger,
+  scrollTopOrBottom: ScrollTopBottom,
+  page: SelectPage
+};
+export default function ButtonNavSettings(props) {
+  const {
+    open,
+    handleClose,
+    onSave,
+    customProps,
+    element,
+    editor
+  } = props;
+  const navOptions = getNavOptions(customProps.hideTools);
+  const prevNavType = element?.buttonLink?.linkType;
+  const classes = ButtonNavSettingsStyles();
+  const [nav, setNav] = useState(prevNavType ? navOptions.find(n => n.value === prevNavType) : {
+    label: "None",
+    value: ""
+  });
+  const [navValue, setNavValue] = useState(element?.url || "");
+  const [openInNewTab, setOpenInNewTab] = useState(element.openInNewTab || false);
+  const {
+    metadata
+  } = customProps || {
+    metadata: {}
+  };
+  const {
+    buttonLink
+  } = metadata || {
+    actionTrigger: {}
+  };
+  const {
+    actionTrigger
+  } = buttonLink || {};
+  const {
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
+  const NavSettings = MAP_COMPONENT[nav?.value];
+  const onChange = value => {
+    setNavValue(value);
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    onClose: handleClose,
+    open: open,
+    sx: classes.dialogContainer,
+    fullWidth: true,
+    maxWidth: "sm",
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: "What do you want to link to?"
+    }), /*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "close",
+      onClick: handleClose,
+      sx: classes.closeIcon,
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      dividers: true,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 6,
+          sx: classes.gridDivider,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            children: /*#__PURE__*/_jsx(RadioGroup, {
+              value: nav?.value,
+              children: navOptions?.map((navOption, i) => {
+                return /*#__PURE__*/_jsx(FormControlLabel, {
+                  value: navOption.value,
+                  control: /*#__PURE__*/_jsx(Radio, {}),
+                  label: navOption.label,
+                  onChange: () => {
+                    setNav(navOption);
+                    setNavValue("");
+                  }
+                }, i);
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 6,
+          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+            placeholder: nav?.placeholder,
+            nav: nav,
+            onChange: onChange,
+            value: navValue,
+            editor: editor,
+            openInNewTab: openInNewTab,
+            onNewTabChange: () => setOpenInNewTab(prev => !prev),
+            services: customProps.services
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        sx: classes.closeBtn,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: () => {
+          onSave({
+            buttonLink: {
+              linkType: nav?.value,
+              onClick
+            },
+            url: navValue,
+            openInNewTab
+          });
+          handleClose();
+        },
+        sx: classes.saveBtn,
+        children: "Save"
+      })]
+    })]
+  });
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/navOptions.js

@@ -0,0 +1,32 @@
+export const getNavOptions = (hideTools = []) => {
+  let navOptions = [{
+    label: "None",
+    value: ""
+  }, {
+    label: "Trigger",
+    value: "actionTrigger"
+  }, {
+    label: "Web Address",
+    value: "webAddress",
+    placeholder: "https://",
+    showOpenInNewTab: true
+  }, {
+    label: "Select Page and Section",
+    value: "page",
+    placeholder: "Select Page and Section",
+    showOpenInNewTab: true
+  }, {
+    label: "Top/Bottom of page",
+    value: "scrollTopOrBottom"
+  }, {
+    label: "Email",
+    value: "email",
+    placeholder: "email"
+  }, {
+    label: "Phone number",
+    value: "phone",
+    placeholder: "phone"
+  }];
+  navOptions = navOptions.filter(n => !hideTools.includes(n.value));
+  return navOptions;
+};

package/dist/Editor/Elements/Button/ButtonNavSettings/style.js

@@ -0,0 +1,55 @@
+const ButtonNavSettingsStyles = () => ({
+  dialogContainer: {
+    '& .MuiDialogContent-root': {
+      padding: "0px 20px"
+    },
+    '& .MuiDialogActions-root': {
+      padding: "10px"
+    },
+    '& .MuiTypography-h6': {
+      fontWeight: 600,
+      fontSize: "16px",
+      paddingRight: "20px"
+    },
+    "& .MuiGrid-container": {
+      marginTop: '0px'
+    },
+    "& .MuiGrid-item": {
+      padding: "14px"
+    }
+  },
+  saveBtn: {
+    color: '#fff',
+    background: "#2563EB",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 24px",
+    textTransform: "none",
+    "&:hover": {
+      color: '#fff',
+      background: "#2563EB"
+    }
+  },
+  closeBtn: {
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
+    }
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 8,
+    top: 8,
+    color: theme => theme.palette.grey[500]
+  },
+  gridDivider: {
+    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+  }
+});
+export default ButtonNavSettingsStyles;

package/dist/Editor/Elements/Button/EditorButton.js

@@ -5,11 +5,13 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import LinkIcon from "@mui/icons-material/Link";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { windowVar } from "../../utils/helper";
+import ButtonNavSettings from "./ButtonNavSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -26,6 +28,7 @@ const EditorButton = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const [edit, setEdit] = useState(false);
+  const [openNav, setOpenNav] = useState(false);
   const {
     label,
     bgColor,
@@ -45,7 +48,8 @@ const EditorButton = props => {
     borderWidth,
     borderColor,
     alignment,
-    xsHidden
+    xsHidden,
+    openInNewTab
   } = element;
   const {
     linkType,
@@ -54,33 +58,90 @@ const EditorButton = props => {
   const isTrigger = linkType === "actionTrigger";
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   windowVar.lastButtonProps = element;
-  const onClick = async e => {
-    if (readOnly) {
-      if (isTrigger) {
-        if (metadata?.buttonLink?.handler) {
-          metadata.buttonLink.handler("click");
-        } else if (redirectOnURLResult) {
-          // call api and redirect based on api result
-          const apiResult = await actionButtonRedirect({}, {
-            url: buttonLink?.url
-          });
-          window.open(apiResult, "_blank").focus();
+  const handleTrigger = async () => {
+    if (metadata?.buttonLink?.handler) {
+      metadata.buttonLink.handler("click");
+    } else if (redirectOnURLResult) {
+      // call api and redirect based on api result
+      const apiResult = await actionButtonRedirect({}, {
+        url: buttonLink?.url
+      });
+      window.open(apiResult, "_blank").focus();
+    } else {
+      const refUrl = buttonLink?.url ? buttonLink?.url.includes("http") ? buttonLink?.url : `//${buttonLink?.url}` : "Link";
+      window.open(refUrl, "_blank").focus();
+    }
+  };
+  const handleLinkType = (readOnly, openInNewTab) => {
+    const props = {};
+    if (!readOnly) {
+      return {
+        component: "button"
+      };
+    }
+    switch (linkType) {
+      case "webAddress":
+        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+        props.component = "a";
+        if (refUrl !== "Link") {
+          props.href = refUrl;
+        }
+        if (openInNewTab) {
+          props.target = "_blank";
+        }
+        break;
+      case "actionTrigger":
+        if (readOnly) {
+          const {
+            url
+          } = buttonLink || {};
+          const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+          props.component = "a";
+          if (refUrl !== "Link") {
+            props.href = refUrl;
+          }
         } else {
-          const refUrl = buttonLink?.url ? buttonLink?.url.includes("http") ? buttonLink?.url : `//${buttonLink?.url}` : "Link";
-          window.open(refUrl, "_blank").focus();
+          props.component = "button";
+          props.onClick = handleTrigger;
         }
-      } else {
-        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
-        window.open(refUrl, "_blank").focus();
-      }
+        break;
+      case "page":
+        props.component = "a";
+        const [page, section] = url.split("#");
+        props.href = page === "home" ? `#${section}` : `/${url}`;
+        if (openInNewTab) {
+          props.target = "_blank";
+        }
+        break;
+      case "email":
+        props.component = "a";
+        props.href = `mailto:${url}`;
+        break;
+      case "phone":
+        props.component = "a";
+        props.href = `tel:${url}`;
+        break;
+      case "scrollTopOrBottom":
+        props.component = "button";
+        props.onClick = () => {
+          const scrollEle = document.getElementById("slate-wrapper-scroll-container");
+          if (scrollEle) {
+            if (url === "top") {
+              // top of the page
+              scrollEle.scrollTo(0, 0);
+            } else if (url === "bottom") {
+              // bottom of the page
+              scrollEle.scrollTo(0, scrollEle.scrollHeight);
+            }
+          }
+        };
+        break;
     }
+    return props;
   };
+  const buttonProps = handleLinkType(readOnly, openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
-      case "open":
-        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
-        window.open(refUrl, "_blank").focus();
-        return;
       case "edit":
         setEdit(true);
         return;
@@ -89,16 +150,22 @@ const EditorButton = props => {
           at: [...path]
         });
         return;
+      case "nav":
+        setOpenNav(true);
+        return;
       default:
         return;
     }
   };
   const Toolbar = () => {
+    const btnProps = handleLinkType(true, true);
     return !readOnly ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       style: {
         width: "max-content",
-        top: "-38px"
+        top: "-38px",
+        alignItems: "center",
+        cursor: "pointer"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Settings",
@@ -108,10 +175,21 @@ const EditorButton = props => {
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open Link",
+        title: "Nav Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onMenuClick("open"),
+          onClick: onMenuClick("nav"),
+          children: /*#__PURE__*/_jsx(LinkIcon, {})
+        })
+      }), linkType === "page" ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open Link",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       })]
@@ -152,7 +230,7 @@ const EditorButton = props => {
         },
         "&:hover": {
           "& .element-toolbar": {
-            display: "block"
+            display: "flex"
           }
         }
       },
@@ -161,8 +239,8 @@ const EditorButton = props => {
           position: "relative"
         },
         children: [/*#__PURE__*/_jsxs(Box, {
-          component: "button",
           sx: {
+            textDecoration: "none",
             background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
@@ -187,11 +265,11 @@ const EditorButton = props => {
               color: `${textColorHover || textColor || "#FFFFFF"}`,
               background: bgColorHover || bgColor || "rgb(30, 75, 122)",
               "& .element-toolbar": {
-                display: "block"
+                display: "flex"
               }
             }
           },
-          onClick: onClick,
+          ...buttonProps,
           children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
             style: {
               paddingLeft: "4px",
@@ -220,7 +298,14 @@ const EditorButton = props => {
       onClose: onClose,
       onDelete: onMenuClick("delete"),
       customProps: customProps
-    })]
+    }), openNav ? /*#__PURE__*/_jsx(ButtonNavSettings, {
+      open: openNav,
+      handleClose: () => setOpenNav(false),
+      onSave: onSave,
+      customProps: customProps,
+      element: element,
+      editor: editor
+    }) : null]
   });
 };
 export default EditorButton;

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

@@ -24,7 +24,8 @@ const Form = props => {
   } = props;
   const {
     readOnly,
-    page_id
+    page_id,
+    onFormSubmit
   } = customProps;
   const {
     buttonProps,
@@ -116,7 +117,10 @@ const Form = props => {
       if (isValidForm) {
         alert(isValidForm[0]);
       } else {
-        await formSubmit(params, customProps);
+        const formRes = await formSubmit(params, customProps);
+        if (formRes) {
+          onFormSubmit(formRes);
+        }
       }
       setLoading(false);
     }

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

@@ -15,7 +15,7 @@ const MENU_OPTIONS = [{
   icon: AddTemplateIcon,
   label: "Add Template"
 }, {
-  type: "pageSettings",
+  type: "page-settings",
   icon: PageSettingsButton,
   label: "Page Settings"
 }];

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

@@ -5,7 +5,6 @@ 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];
@@ -21,7 +20,7 @@ function SelectFontSize({
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
   const value = getBreakPointsValue(val, size?.device);
-  const [deboundedValue] = useDebounce(fontSize, 500);
+  const timerRef = useRef();
   const updateMarkData = newVal => {
     let upData = {
       ...getBreakPointsValue(val),
@@ -52,11 +51,6 @@ function SelectFontSize({
       setFontSize(null);
     }
   };
-  useEffect(() => {
-    if (deboundedValue) {
-      onChangeSize(deboundedValue);
-    }
-  }, [deboundedValue]);
   const getSizeVal = () => {
     try {
       let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
@@ -73,6 +67,14 @@ function SelectFontSize({
   useEffect(() => {
     setFontSize(getSizeVal());
   }, [value]);
+  const onChange = e => {
+    clearTimeout(timerRef.current);
+    const value = e.target.value;
+    setFontSize(value);
+    timerRef.current = setTimeout(() => {
+      onChangeSize(value);
+    }, 500);
+  };
   return /*#__PURE__*/_jsxs("div", {
     ref: containerRef,
     style: {
@@ -82,7 +84,7 @@ function SelectFontSize({
     children: [/*#__PURE__*/_jsx(TextField, {
       sx: classes?.miniFontSizeInput,
       value: fontSize,
-      onChange: e => setFontSize(e.target.value),
+      onChange: onChange,
       size: "small"
     }), /*#__PURE__*/_jsx(IconButton, {
       onClick: e => {

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

@@ -10,6 +10,7 @@ import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
   const {
@@ -77,7 +78,7 @@ const Section = props => {
       at: path
     });
   };
-  const needHover = element?.children?.find(f => f.type === "grid") ? "needHover" : "";
+  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};

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

@@ -50,15 +50,19 @@ const buttonStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Link",
-  value: "link",
-  fields: [{
-    label: "Button Link",
-    key: "buttonLink",
-    type: "buttonLink"
-  }]
-}, {
+},
+// {
+//   tab: "Link",
+//   value: "link",
+//   fields: [
+//     {
+//       label: "Button Link",
+//       key: "buttonLink",
+//       type: "buttonLink",
+//     },
+//   ],
+// },
+{
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

package/dist/Editor/plugins/withHTML.js

@@ -1,5 +1,20 @@
 import { Transforms, Editor, Element, Node } from "slate";
 import deserialize from "../helper/deserialize";
+import { decodeAndParseBase64 } from "../utils/helper";
+const avoidDefaultInsert = ["table", "grid"];
+const loopChildren = (children = [], defaultInsert) => {
+  if (!children?.length) {
+    return defaultInsert;
+  }
+  for (let child of children) {
+    if (avoidDefaultInsert.includes(child?.type)) {
+      defaultInsert = false;
+      break;
+    }
+    defaultInsert = loopChildren(child.children, defaultInsert);
+  }
+  return defaultInsert;
+};
 const getCurrentElement = editor => {
   try {
     if (editor.selection) {
@@ -52,11 +67,17 @@ const withHtml = editor => {
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
-      // do not paste table cell inside table cell
-      // only plain text for internal paste
       if (tableNode && tableNode[0]) {
-        const text = data?.getData("text/plain");
-        Transforms.insertText(editor, text);
+        const decoded = decodeAndParseBase64(slateHTML);
+        const defaultInsert = loopChildren(decoded, true);
+        if (defaultInsert) {
+          insertData(data);
+        } else {
+          // do not paste table, grid inside table cell
+          // only plain text for internal paste
+          const text = data?.getData("text/plain");
+          Transforms.insertText(editor, text);
+        }
       } else {
         insertData(data);
       }

package/dist/Editor/plugins/withTable.js

@@ -1,10 +1,35 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
+import { TableUtil, createTableCell } from "../utils/table";
 const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,
-    deleteForward
+    deleteForward,
+    delete: slateDelete
   } = editor;
+  editor.delete = arg => {
+    if (arg.reverse) {
+      const table = new TableUtil(editor);
+      const cellsSelected = table.isCellSelected(editor.selection);
+      if (cellsSelected) {
+        cellsSelected.forEach(cellPath => {
+          Transforms.removeNodes(editor, {
+            at: cellPath
+          });
+          Transforms.insertNodes(editor, createTableCell(""), {
+            at: cellPath
+          });
+        });
+        Transforms.deselect(editor, {
+          at: editor.selection
+        });
+      } else {
+        slateDelete(arg);
+      }
+    } else {
+      slateDelete(arg);
+    }
+  };
   editor.deleteBackward = unit => {
     const {
       selection

package/dist/Editor/service/formSubmit.js

@@ -9,7 +9,7 @@ export const formSubmit = async (formData, props) => {
       body: JSON.stringify(formData)
     });
     const result = await response.json();
-    return result.data;
+    return result?.data?.data;
   } catch (err) {
     console.log(err);
     return err;

package/dist/Editor/utils/grid.js

@@ -1,7 +1,6 @@
-import { Transforms } from "slate";
 import default_grid from "../Elements/Grid/templates/default_grid";
-import insertNewLine from "./insertNewLine";
 import { gridItem } from "./gridItem";
+import { customInsertNode } from "./helper";
 export const insertPlainGrid = count => {
   const size = 12 / count;
   const items = Array.from(Array(count).keys()).map(() => gridItem({
@@ -38,11 +37,10 @@ export const insertGrid = (editor, item, path) => {
     const {
       selection
     } = editor;
-    Transforms.insertNodes(editor, grid, {
+    customInsertNode(editor, grid, {
       at: path || selection.focus.path,
       select: true
     });
-    insertNewLine(editor);
   } catch (err) {
     console.log(err);
   }

package/dist/Editor/utils/helper.js

@@ -1,5 +1,6 @@
 import { Editor, Node, Transforms, Element } from "slate";
 import { ReactEditor } from "slate-react";
+import insertNewLine from "./insertNewLine";
 export const windowVar = {};
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
@@ -149,4 +150,56 @@ export const isListItem = editor => {
     match: n => !Editor.isEditor(n) && Element.isElement(n) && format.indexOf(n.type) > -1
   });
   return node;
+};
+const getNode = (editor, path) => {
+  try {
+    return Node.get(editor, path);
+  } catch (err) {
+    return;
+  }
+};
+export const customInsertNode = (editor, insertNode, defaultInsertOptions = {}) => {
+  const [parent, parentPath] = Editor.parent(editor, editor.selection.focus.path);
+  const isListItem = parent?.type === "list-item" || parent?.type === "check-list-item";
+  let newParentPath;
+  if (isListItem) {
+    const lastPathIndex = parentPath.length - 1;
+    const otherPaths = parentPath.slice(0, lastPathIndex);
+    const nextChildrenPath = parentPath[lastPathIndex] + 1;
+    newParentPath = [...otherPaths, nextChildrenPath];
+    const haveElem = getNode(editor, newParentPath);
+    if (haveElem) {
+      Transforms.splitNodes(editor, {
+        at: newParentPath
+      });
+    }
+    const {
+      anchor,
+      focus
+    } = editor.selection;
+
+    // if editor has selection, e.g /table, /grid is selected, delete that selection
+    if (focus.offset > anchor.offset) {
+      Transforms.delete(editor, {
+        at: editor.selection
+      });
+    }
+  }
+  const insertOptions = {
+    ...defaultInsertOptions
+  };
+  if (isListItem) {
+    insertOptions.at = editor.selection.focus;
+  }
+  Transforms.insertNodes(editor, insertNode, insertOptions);
+  insertNewLine(editor);
+};
+export const decodeAndParseBase64 = encodedString => {
+  // Decode the Base64-encoded string
+  const decodedString = atob(encodedString);
+
+  // URL-decode the decoded string
+  const decodedURLString = decodeURIComponent(decodedString);
+  const jsonData = JSON.parse(decodedURLString);
+  return jsonData;
 };

package/dist/Editor/utils/table.js

@@ -1,6 +1,6 @@
 import { Transforms, Editor, Range, Element, Path, Node } from "slate";
 import { ReactEditor } from "slate-react";
-import insertNewLine from "./insertNewLine";
+import { customInsertNode } from "./helper";
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];
@@ -36,11 +36,7 @@ export class TableUtil {
       length: columns
     }, () => ""));
     const newTable = createTableNode(cellText, rows, columns);
-    Transforms.insertNodes(this.editor, newTable, {
-      // to insert in current line
-      // at: this.editor.selection.anchor.path,
-    });
-    insertNewLine(this.editor);
+    customInsertNode(this.editor, newTable);
   };
   removeTable = () => {
     Transforms.removeNodes(this.editor, {
@@ -318,7 +314,7 @@ export class TableUtil {
   };
   isCellSelected = selection => {
     try {
-      if (!selection || Range.isCollapsed(selection) || Editor.string(this.editor, selection) === "") {
+      if (!selection) {
         return false;
       }
       const [tableNode] = Editor.nodes(this.editor, {
@@ -332,7 +328,7 @@ export class TableUtil {
         anchor,
         focus
       } = this.editor.selection || {};
-      if (tableNode && tableNode[0] && tableCellPath && tableCellPath[1] && focus?.path) {
+      if (tableNode && tableNode[0] && focus?.path) {
         let startCell = anchor?.path;
         let endCell = focus?.path;
 

package/package.json

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