@flozy/editor 10.1.3 → 10.1.5

package/dist/Editor/CommonEditor.js

@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents, handleAccordionOnBackspace } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -451,6 +451,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
       upDownArrowKeyEvents(event, editor);
     } else if (event.key === "Backspace") {
+      const isAccordion = handleAccordionOnBackspace(event, editor);
+      if (isAccordion) {
+        return;
+      }
       const isNodeRestricted = isRestrictedNode(event, editor);
       if (isNodeRestricted) {
         return;

package/dist/Editor/Editor.css

@@ -426,6 +426,32 @@ blockquote {
 
 .upload-sign-img-wrapper {
   text-align: center;
+  position: relative;
+}
+
+.upload-sign-img {
+  max-width: 100%;
+}
+
+.remove-sign-img-btn {
+  padding: 8px 12px;
+  background-color: #ffffff68;
+  cursor: pointer;
+  width: fit-content;
+  border-radius: 8px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+.remove-sign-img-btn:hover {
+  background-color: #ffffffa0;
+}
+
+.upload-sign-img-wrapper:hover .remove-sign-img-btn {
+  display: block;
 }
 
 .signature-tab img {

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
+import { getBorderColor } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -78,8 +79,10 @@ const Accordion = props => {
   const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
-    bgColor
+    bgColor,
+    borderColor
   } = element;
+  const borderStyle = getBorderColor(borderColor);
   const {
     theme
   } = useEditorContext();
@@ -168,7 +171,8 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        background: bgColor
+        background: bgColor,
+        ...borderStyle
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -38,7 +38,8 @@ const CarouselItem = props => {
       className: "element-toolbar hr",
       style: {
         top: "0px",
-        left: "0px"
+        left: "0px",
+        width: "fit-content"
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {

package/dist/Editor/Elements/Grid/Grid.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Path, Node } from "slate";
+import { Transforms, Path, Node, Editor, Element } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -206,7 +206,19 @@ const Grid = props => {
   };
   const onAddSection = () => () => {
     try {
-      const duplicateGrid = JSON.parse(JSON.stringify(element));
+      let duplicateGrid = JSON.parse(JSON.stringify(element));
+      const carousel = Editor.above(editor, {
+        at: path,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
+      });
+      if (carousel) {
+        const [carouselNode, carouselItemPath] = carousel || [];
+        const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
+        Transforms.insertNodes(editor, duplicatecCarousel, {
+          at: Path.next(carouselItemPath)
+        });
+        return;
+      }
       insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
     } catch (err) {
       console.log(err);

package/dist/Editor/Elements/Signature/Signature.css

@@ -46,11 +46,12 @@
 
   .upload-input-wrapper {
     width: 100%;
+    height: 100%;
     position: relative;
   }
   .upload-input-wrapper input {
     width: 100%;
-    height: 100px;
+    height: 100%;
     opacity: 0;
     z-index: 1;
     position: relative;

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { Grid, useMediaQuery } from "@mui/material";
+import { Grid, IconButton, useMediaQuery } from "@mui/material";
+import { ResetIcon } from "../../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DrawSignature = props => {
@@ -24,6 +25,13 @@ const DrawSignature = props => {
       signature: result?.imageURL || strImage
     });
   };
+  const onClear = () => {
+    canvasRef.clear();
+    setUploading(false);
+    onDataChange({
+      signature: ""
+    });
+  };
   const isMobile = useMediaQuery("(max-width:599px)");
   const signatureCanvasStyle = isMobile ? {
     width: "260px",
@@ -31,14 +39,15 @@ const DrawSignature = props => {
   } : {};
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+    children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         width: "100%",
-        height: "209px"
+        height: "209px",
+        position: "relative"
       },
-      children: /*#__PURE__*/_jsx(SignatureCanvas, {
+      children: [/*#__PURE__*/_jsx(SignatureCanvas, {
         canvasProps: {
           className: "signature-canvas",
           ...signatureCanvasStyle
@@ -47,7 +56,11 @@ const DrawSignature = props => {
         ref: ref => canvasRef = ref,
         maxWidth: brush.size || 2,
         penColor: brush?.color || "#000"
-      })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "clear-canvas",
+        onClick: onClear,
+        children: /*#__PURE__*/_jsx(ResetIcon, {})
+      })]
     })]
   });
 };

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -30,15 +30,28 @@ const UploadSignature = props => {
       signature: result?.imageURL || strImage
     });
   };
+  const onRemove = () => {
+    setBase64(null);
+    setUploading(false);
+    onUploadDone({
+      signature: ""
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "signature-tab2",
-    children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
+    children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsxs("div", {
       className: "upload-sign-img-wrapper",
-      children: /*#__PURE__*/_jsx("img", {
+      children: [/*#__PURE__*/_jsx("img", {
         className: "upload-sign-img",
         src: base64,
         alt: "Signature"
-      })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        gutterBottom: true,
+        className: "remove-sign-img-btn",
+        onClick: onRemove,
+        children: "Remove"
+      })]
     }) : /*#__PURE__*/_jsxs("div", {
       className: "upload-input-wrapper",
       children: [/*#__PURE__*/_jsx("input", {

package/dist/Editor/Elements/Table/DragButton.js

@@ -44,7 +44,6 @@ function DragButton({
   const dragProps = {
     ...dndProps,
     id: dndProps?.id + dragType,
-    disabled: isMobile,
     data: {
       ...dndProps.data,
       dragType

package/dist/Editor/Elements/Table/Draggable.js

@@ -13,9 +13,13 @@ function Draggable(props) {
   } = props?.data || {};
   const style = transform ? {
     transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
-  } : undefined;
+  } : {};
   return /*#__PURE__*/_jsx(Box, {
-    style: style,
+    style: {
+      ...style,
+      touchAction: "none" // Disables scrolling while dragging. Necessary for proper mobile drag functionality.
+    },
+
     ref: setNodeRef,
     ...listeners,
     ...attributes,

package/dist/Editor/Elements/Table/Styles.js

@@ -86,6 +86,13 @@ const TableStyles = theme => {
         background: "#2563EB"
       }
     },
+    mobileCellResizer: {
+      position: "absolute",
+      right: "-10px",
+      top: "-10px",
+      zIndex: 4000,
+      padding: "2px"
+    },
     mobileToolDrawer: {
       "& .customSelectContainer": {
         border: "none !important",

package/dist/Editor/Elements/Table/TableCell.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Editor, Path, Transforms } from "slate";
-import { Box } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
@@ -12,6 +12,7 @@ import TablePopup from "./TablePopup";
 import { Droppable } from "./Droppable";
 import { useDndContext } from "@dnd-kit/core";
 import { getNodeWithType } from "../../utils/helper";
+import { ResizeIcon } from "../../common/iconListV2";
 import { isEmptyTextNode } from "../../helper";
 import SimpleText from "../SimpleText";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,16 +42,32 @@ const Resizer = ({
   onMouseDown,
   height
 }) => {
+  const eventProps = {
+    onPointerDown: onMouseDown
+  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "cell-resizer",
       contentEditable: false,
-      onPointerDown: onMouseDown,
       sx: classes.cellResizer,
       style: {
         height: `${height}px`
-      }
+      },
+      ...eventProps
+    })
+  });
+};
+const MobileResizer = ({
+  classes,
+  onMouseDown
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(IconButton, {
+      contentEditable: false,
+      sx: classes.mobileCellResizer,
+      onTouchStart: onMouseDown,
+      children: /*#__PURE__*/_jsx(ResizeIcon, {})
     })
   });
 };
@@ -115,7 +132,8 @@ const TableCell = props => {
     size: element?.size,
     minMaxProps: {
       minWidth: 30
-    }
+    },
+    isMobile
   });
   const [tableSize, setTableSize] = useState({});
   const [openSettings, setOpenSettings] = useState(false);
@@ -420,6 +438,7 @@ const TableCell = props => {
     resetSelection
   };
   const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
+  const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("td", {
       ...element.attr,
@@ -454,7 +473,7 @@ const TableCell = props => {
           padding: "8px"
         },
         children: children
-      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
+      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(TableResizer, {
         classes: classes,
         onMouseDown: onMouseDown,
         height: tableDOM?.getBoundingClientRect()?.height

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

@@ -322,7 +322,7 @@ function TextSize(props) {
     // to avoid default normal size
     if (size?.device === "lg") {
       upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
-        a[b] = `${newVal}px`;
+        a[b] = upData[b] || `${newVal}px`;
         return a;
       }, {});
     }

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js

@@ -13,7 +13,7 @@ const Signature = props => {
   const pPath = path?.split("|")?.map(m => parseInt(m));
   const element_path = [...pPath, 0];
   const onSave = (data = {}) => {
-    onClear();
+    onClear(element_path);
     Transforms.insertNodes(editor, [{
       type: "sign",
       signature: null,
@@ -35,9 +35,10 @@ const Signature = props => {
       at: parentPath
     });
   };
-  const onClear = () => {
+  const onClear = path => {
+    const parentPath = path || Path.parent(element_path);
     Transforms.removeNodes(editor, {
-      at: element_path
+      at: parentPath
     });
   };
   return /*#__PURE__*/_jsx(_Fragment, {

package/dist/Editor/common/RnD/VirtualElement/helper.js

@@ -295,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
   const itemsData = [];
   const items = dom.querySelectorAll(domClass);
   const nextItemPathLength = curPath?.split("|").length + 2;
-  let sectionHeight = 12;
+  // let sectionHeight = 12;
   for (let i = 0; i < items.length; i++) {
     const itemRect = items[i]?.getBoundingClientRect();
     if (items[i]?.classList.contains("type_box")) {
@@ -315,9 +315,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
           gridArea: calculateGridArea(y)
         }
       });
-      sectionHeight += itemRect?.height;
+      // sectionHeight += itemRect?.height;
     }
   }
+
   if (dom?.classList.contains("type_box") && parentDom) {
     const parentDomRect = parentDom?.getBoundingClientRect();
     const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");

package/dist/Editor/common/iconListV2.js

@@ -962,6 +962,41 @@ export function DragIcon() {
     })]
   });
 }
+export function ResizeIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "16",
+      height: "16",
+      rx: "8",
+      fill: "#F8FAFC"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "0.5",
+      y: "0.5",
+      width: "15",
+      height: "15",
+      rx: "7.5",
+      stroke: "#2563EB",
+      strokeOpacity: "0.32"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.76758 6.44141L3.99981 8.20917L5.76758 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.2324 6.44141L12.0002 8.20917L10.2324 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
 export function LeftAlignTextFormat() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "19",
@@ -1467,6 +1502,26 @@ export function PenIcon() {
     })]
   });
 }
+export function ResetIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "11.646",
+      cy: "11.6452",
+      r: "11.5",
+      transform: "rotate(-89.2717 11.646 11.6452)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function SaveTemplIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "18",

package/dist/Editor/commonStyle.js

@@ -59,10 +59,6 @@ const useCommonStyle = theme => ({
         marginBottom: "7px",
         marginTop: "4px"
       },
-      "& p": {
-        marginBottom: "7px",
-        marginTop: "4px"
-      },
       "& .muiIconsListParent": {
         "& svg": {
           color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
@@ -295,6 +291,12 @@ const useCommonStyle = theme => ({
       "& .signature-canvas": {
         backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
+      "& .clear-canvas": {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        color: theme?.palette?.editor?.closeButtonSvgStroke
+      },
       "& label": {
         color: theme?.palette?.editor?.textColor
       },

package/dist/Editor/helper/index.js

@@ -401,4 +401,8 @@ export const clearSelectionOnly = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const isMobileWindow = () => {
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  return isMobile;
 };

package/dist/Editor/hooks/useTable.js

@@ -190,16 +190,17 @@ export const TableProvider = ({
   //   selectFirstCell(tablePath, editor, updateTableSelection);
   // }, []);
 
+  const onClickAway = () => {
+    setTableSelection(getDefaultTableSelection());
+    setHoverPath(null);
+  };
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsxs(DndContext, {
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
       children: [/*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: () => {
-          setTableSelection(getDefaultTableSelection());
-          setHoverPath(null);
-        },
+        onClickAway: onClickAway,
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })

package/dist/Editor/themeSettings/buttons/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled, useTheme } from "@mui/material";
 
 // Style
 import Style from "./style";
@@ -7,7 +7,7 @@ import { PenIcon } from "../icons";
 import StyleBuilder from "../../common/StyleBuilder";
 import { fontOptions } from "../../utils/font";
 import { useEditorTheme } from "../../hooks/useEditorTheme";
-import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints } from "../../helper/theme";
+import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { KeyboardArrowDownRounded } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -80,18 +80,24 @@ const buttonStyle = [{
     type: "color"
   }]
 }];
-function getBtnSxProps(buttonStyle = {}) {
-  const newStyle = {
+function getBtnSxProps(buttonStyle = {}, theme) {
+  let newStyle = {
     ...buttonStyle
   };
   if (newStyle?.bannerSpacing) {
     newStyle.padding = newStyle?.bannerSpacing;
   }
-  newStyle.borderRadius = {
-    ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
-  };
-  newStyle.padding = {
-    ...getTRBLBreakPoints(newStyle?.bannerSpacing || {})
+  const btnSp = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
+    },
+    padding: {
+      ...getTRBLBreakPoints(newStyle?.bannerSpacing)
+    }
+  }, theme);
+  newStyle = {
+    ...newStyle,
+    ...btnSp
   };
   delete newStyle?.bannerSpacing;
   if (newStyle?.hover) {
@@ -192,6 +198,7 @@ const Buttons = props => {
     type
   } = props;
   const [anchorEl, setAnchorEl] = useState();
+  const theme = useTheme();
   const {
     selectedTheme,
     updateTheme
@@ -199,6 +206,7 @@ const Buttons = props => {
   const {
     button
   } = selectedTheme?.elementProps || {};
+  console.log("getBtnSxProps(button, theme)", getBtnSxProps(button, theme));
   const buttonEl = useRef();
   const elementProps = convertThemeToElementProps(button, buttonEl);
 
@@ -224,19 +232,13 @@ const Buttons = props => {
           onClick: e => setAnchorEl(e.currentTarget),
           children: [/*#__PURE__*/_jsxs(Grid, {
             item: true,
-            style: {
-              maxWidth: "calc(100% - 50px)",
-              overflowX: "auto"
-            },
+            size: 12,
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
               className: "fw-600 fs-14",
-              style: {
-                marginBottom: "10px"
-              },
               children: "Theme Button"
             }), /*#__PURE__*/_jsx(Button, {
-              sx: getBtnSxProps(button),
+              sx: getBtnSxProps(button, theme),
               ref: buttonEl,
               children: "Button"
             })]

package/dist/Editor/utils/accordion.js

@@ -1,6 +1,13 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
 import { getSelectedText } from "./helper";
+import { isMobileWindow } from "../helper";
+const focusAccordion = (editor, upPath) => {
+  Transforms.select(editor, {
+    path: upPath,
+    offset: 0
+  });
+};
 export const insertAccordion = (editor, path) => {
   try {
     const selectedText = getSelectedText(editor);
@@ -36,11 +43,14 @@ export const insertAccordion = (editor, path) => {
     // get title index
     const summaryIndex = upPath.length - 3;
     upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
+
     // select accordion title by default
-    Transforms.select(editor, {
-      path: upPath,
-      offset: 0
-    });
+    if (isMobileWindow()) {
+      // timeout to resolve focus issue in mobile
+      setTimeout(() => focusAccordion(editor, upPath), 0);
+    } else {
+      focusAccordion(editor, upPath);
+    }
     insertNewLine(editor);
   } catch (err) {
     console.log(err);

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 const useTableResize = ({
   parentDOM,
   size: defaultSize,
   onDone,
-  minMaxProps = {}
+  minMaxProps = {},
+  isMobile
 }) => {
   const {
     width
@@ -18,6 +19,10 @@ const useTableResize = ({
   });
   const [resizing, setResizing] = useState(false);
   const [isDone, setIsDone] = useState(0);
+  const lastTouch = useRef({
+    x: 0,
+    y: 0
+  });
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
@@ -25,29 +30,64 @@ const useTableResize = ({
       ...defaultSize
     });
   };
+  const handleEventListeners = type => {
+    const listener = type === "add" ? document.addEventListener : document.removeEventListener;
+    const onMoveListener = isMobile ? "touchmove" : "pointermove";
+    const onEndListener = isMobile ? "touchend" : "pointerup";
+    listener(onMoveListener, onMouseMove);
+    listener(onEndListener, onMouseUp);
+  };
+  const updateLastTouch = ({
+    clientX,
+    clientY
+  }) => {
+    lastTouch.current.x = clientX;
+    lastTouch.current.y = clientY;
+  };
   const onMouseDown = e => {
-    e.preventDefault();
-    document.addEventListener("pointermove", onMouseMove);
-    document.addEventListener("pointerup", onMouseUp);
+    if (isMobile) {
+      updateLastTouch(e.touches[0]);
+    } else {
+      e.preventDefault();
+    }
+    handleEventListeners("add");
     setResizing(true);
     setIsDone(0);
   };
   const onMouseUp = () => {
-    document.removeEventListener("pointermove", onMouseMove);
-    document.removeEventListener("pointerup", onMouseUp);
+    handleEventListeners("remove");
     setResizing(false);
     setIsDone(1);
   };
   const onMouseMove = e => {
+    let {
+      movementX,
+      movementY
+    } = e || {};
+    if (e.type === "touchmove") {
+      // for mobile
+      const {
+        x,
+        y
+      } = lastTouch.current || {};
+      const touches = e.touches[0];
+      const {
+        clientX,
+        clientY
+      } = touches;
+      movementX = clientX - x;
+      movementY = clientY - y;
+      updateLastTouch(touches);
+    }
     const {
       minWidth
     } = minMaxProps || {};
     setSize(currentSize => {
       const width = currentSize?.width || parentDOM?.clientWidth;
-      const calcWidth = width + e.movementX;
+      const calcWidth = width + movementX;
       return {
         width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
-        height: currentSize.height + e.movementY,
+        height: currentSize.height + movementY,
         widthInPercent: calcWidth / width * 100
       };
     });

package/dist/Editor/utils/events.js

@@ -1,10 +1,11 @@
-import { Editor, Transforms, Element, Node, Path, Range } from "slate";
+import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
-import { isListItem } from "./helper";
+import { getNodeWithType, isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
+import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -183,6 +184,20 @@ const checkListEnterEvent = (editor, type) => {
     insertNewLine(editor);
   }
 };
+const removeAccordion = (editor, accordionPath) => {
+  Transforms.removeNodes(editor, {
+    at: accordionPath
+  });
+  Transforms.insertNodes(editor, {
+    type: "paragraph",
+    children: [{
+      text: ""
+    }]
+  }, {
+    at: accordionPath,
+    select: true
+  });
+};
 export const enterEvent = (e, editor, isMobile) => {
   try {
     const ele = isListItem(editor);
@@ -225,9 +240,7 @@ export const enterEvent = (e, editor, isMobile) => {
           e.preventDefault();
           if (!text) {
             const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
-            Transforms.removeNodes(editor, {
-              at: accordionIndex
-            });
+            removeAccordion(editor, accordionIndex);
           } else {
             const nextPath = Path.next(Path.parent(ele[1]));
             insertAccordion(editor, nextPath);
@@ -329,6 +342,37 @@ export const enterEvent = (e, editor, isMobile) => {
     console.log(err);
   }
 };
+export const handleAccordionOnBackspace = (e, editor) => {
+  try {
+    let isAccordion = false;
+    const [accordionDetails] = getNodeWithType(editor, "accordion-details");
+    const [accordionDetailsNode] = accordionDetails || [];
+    if (accordionDetailsNode) {
+      const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
+      if (dom?.parentElement) {
+        dom.parentElement.style.display = "block";
+      }
+    }
+    const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
+    const [accordionTitle, accordionTitlePath] = accordionSummary || [];
+    if (accordionTitle) {
+      // no selection
+      if (Range.isCollapsed(editor.selection)) {
+        const start = Editor.start(editor, accordionTitlePath);
+        const isCursorAtStart = Point.equals(editor.selection.focus, start);
+        if (isCursorAtStart) {
+          e.preventDefault();
+          const parentPath = Path.parent(accordionTitlePath);
+          removeAccordion(editor, parentPath);
+          isAccordion = true;
+        }
+      }
+    }
+    return isAccordion;
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const upDownArrowKeyEvents = (e, editor) => {
   try {
     const {
@@ -348,7 +392,7 @@ export const upDownArrowKeyEvents = (e, editor) => {
     }
     Transforms.move(editor, {
       distance: 0,
-      unit: 'offset',
+      unit: "offset",
       reverse: false
     });
     Transforms.select(editor, {

package/dist/Editor/utils/helper.js

@@ -3,6 +3,7 @@ import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
 import { activeMark, getSelectedElementStyle } from "./SlateUtilityFunctions";
+import { getCurrentElementText } from "../plugins/withHTML";
 export const windowVar = {};
 let ST_TIMEOUT = null;
 const BLOCKS = ["grid", "dataView"];
@@ -858,6 +859,24 @@ export const hideSlateSelection = () => {
   const root = document.documentElement;
   root.style.setProperty("--slate-highlight-bg", "none");
 };
+export const insertSlashNode = (editor, insertNode) => {
+  try {
+    // Delete the currently selected text
+    editor.deleteFragment();
+    const currentText = getCurrentElementText(editor);
+    const currentPath = editor?.selection?.anchor?.path;
+    let insertAt = currentPath;
+    if (currentText?.trim()) {
+      const parentPath = Path.parent(currentPath);
+      insertAt = Path.next(parentPath);
+    }
+    Transforms.insertNodes(editor, insertNode, {
+      at: insertAt
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const isEverythingSelected = editor => {
   const {
     selection

package/dist/Editor/utils/signature.js

@@ -1,9 +1,5 @@
-import { Path, Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
-import { getCurrentElementText } from "../plugins/withHTML";
+import { insertSlashNode } from "./helper";
 export const insertSignature = editor => {
-  const hasText = getCurrentElementText(editor);
-  const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor.selection.anchor.path;
   const signature = {
     type: "signature",
     alignment: "center",
@@ -17,8 +13,5 @@ export const insertSignature = editor => {
       text: " "
     }]
   };
-  Transforms.insertNodes(editor, signature, {
-    at: insertPath
-  });
-  insertNewLine(editor);
+  insertSlashNode(editor, signature);
 };

package/package.json

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