@flozy/editor 4.9.3 → 4.9.5

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

@@ -19,8 +19,7 @@ const usePopupStyle = theme => ({
     },
     "& .MuiPaper-root": {
       backgroundColor: `${theme?.palette?.editor?.textFormatBgColor} !important`,
-      borderRadius: "19px !important",
-      paddingBottom: "10px !important"
+      borderRadius: "19px !important"
     },
     "& .MuiDialog-paperFullScreen": {
       borderRadius: "0px !important"
@@ -127,34 +126,34 @@ const usePopupStyle = theme => ({
         backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
         "& .signatureElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
           }
         },
         "& .commonSvgStyle": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
           }
         },
         "& .commonSvgStyle2": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
           }
         },
         "& .colorBoxElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
             fill: "none"
           }
         },
         "& .gridElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
-            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
           }
         },
         "& .newLineElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
           }
         }
       },
@@ -245,46 +244,46 @@ const usePopupStyle = theme => ({
   textAlignButtons: {
     "& .justifyIcon": {
       "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     },
     "& .textAlignIconSameStyles": {
       "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     },
     "& .orderedListIcon": {
       "& path": {
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       },
       "& text": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     },
     "& .bulletedListTextIcon": {
       "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       },
       "& circle": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     },
     "& .checkedListTextIcon": {
       "& path": {
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     },
     "& .accordianListTextIcon": {
       // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
       "& svg": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       },
       "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
       }
     }
   },
@@ -297,6 +296,11 @@ const usePopupStyle = theme => ({
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
     }
   },
   textFormatSelect: {

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate } from "slate-react";
+import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
@@ -33,16 +33,18 @@ const PopupTool = props => {
   const {
     selectedElement
   } = useEditorContext();
-  const updateAnchorEl = () => {
+  const updateAnchorEl = useCallback(() => {
     try {
-      const domSelection = window.getSelection();
-      const domRange = domSelection?.getRangeAt(0);
-      const {
-        startOffset,
-        endOffset
-      } = domRange || {};
-      if (startOffset !== endOffset) {
+      const isHavingSelection = selection && !Range.isCollapsed(selection);
+      if (isHavingSelection) {
+        const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+        const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
+        const isOutside = rect.bottom < editorContainer.top || rect.top > editorContainer.bottom;
+        if (isOutside) {
+          rect.y = -500; // hide the popper
+        }
+
         setAnchorEl({
           clientWidth: rect.width,
           clientHeight: rect.height,
@@ -52,7 +54,7 @@ const PopupTool = props => {
     } catch (err) {
       console.log(err);
     }
-  };
+  }, [selection]);
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool

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

@@ -12,7 +12,7 @@ const usePopupStyles = theme => ({
       background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
       "& .MuiBox-root": {
         "& .renderComp": {
-          padding: "2px 0px",
+          padding: "2px 0px 2px 1px",
           background: "transparent !important"
         },
         "& button": {

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

@@ -62,6 +62,7 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {
@@ -128,41 +129,15 @@ const FormSettings = props => {
           }, `accordion_${i}`)
         }, i);
       } else {
-        return /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: muiTheme,
-          children: /*#__PURE__*/_jsxs(Accordion, {
-            defaultExpanded: true,
-            children: [/*#__PURE__*/_jsx(AccordionSummary, {
-              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-              sx: {
-                padding: "5px"
-              },
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                className: "settingsHeader",
-                color: "primary",
-                style: {
-                  fontSize: "14px !important",
-                  fontWeight: "400"
-                },
-                children: m?.tab
-              })
-            }), /*#__PURE__*/_jsx(AccordionDetails, {
-              sx: {
-                padding: "0px"
-              },
-              children: /*#__PURE__*/_jsx(StyleContent, {
-                renderTabs: styleMaps,
-                value: m.value,
-                element: element,
-                customElement: element?.children?.[0] || null,
-                onChange: onChange,
-                customProps: customProps,
-                handleClose: handleClose
-              }, `tab_${m.value}_$${i}`)
-            })]
-          }, `accordion_${i}`)
-        }, i);
+        return /*#__PURE__*/_jsx(StyleContent, {
+          renderTabs: styleMaps,
+          value: m.value,
+          element: element,
+          customElement: element?.children?.[0] || null,
+          onChange: onChange,
+          customProps: customProps,
+          handleClose: handleClose
+        }, `tab_${m.value}_$${i}`);
       }
     })
   });

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

@@ -72,6 +72,11 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              padding: 0,
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

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

@@ -1,6 +1,7 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,7 +16,10 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px"
+      padding: "10px",
+      '& .MuiCheckbox-root svg': {
+        fill: 'unset !important'
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        background: theme?.palette?.editor?.miniToolBarBackground,
+        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -174,82 +174,114 @@ export const formStyle = [{
 }, {
   tab: "Field Settings",
   value: "FieldSetting",
-  hasChildrenTabs: false,
+  hasChildrenTabs: true,
   fields: [{
-    label: "Font Family",
-    key: "fieldFontFamily",
-    type: "textOptions",
-    hideMetaDataOptions: true,
-    options: fontOptions,
-    webFont: true,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
+    tab: "Font Family",
+    value: "FontFamily",
+    fields: [{
+      label: "Font Family",
+      key: "fieldFontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Font Weight",
-    key: "fieldFontWeight",
-    type: "textOptions",
-    width: 5,
-    options: fontWeightOptions,
-    hideMetaDataOptions: true,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontWeight: option.value
-        },
-        children: option.text
-      });
-    }
+    tab: "Font Weight",
+    value: "FontWeight",
+    fields: [{
+      label: "Font Weight",
+      key: "fieldFontWeight",
+      type: "textOptions",
+      width: 5,
+      options: fontWeightOptions,
+      hideMetaDataOptions: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontWeight: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Font Size",
-    key: "fieldTextSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px"
+    tab: "Font Size",
+    value: "FontSize",
+    fields: [{
+      label: "Font Size",
+      key: "fieldTextSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }]
   }, {
-    label: "Text Color",
-    key: "fieldTextColor",
-    type: "color",
-    needPreview: true
+    tab: "Text Color",
+    value: "TextColor",
+    fields: [{
+      label: "Text Color",
+      key: "fieldTextColor",
+      type: "color",
+      needPreview: true
+    }]
   }, {
-    label: "Background Color",
-    key: "fieldBgColor",
-    type: "color"
+    tab: "Background Color",
+    value: "BackgroundColor",
+    fields: [{
+      label: "Background Color",
+      key: "fieldBgColor",
+      type: "color"
+    }]
   }, {
-    label: "Border Color",
-    key: "fieldBorderColor",
-    type: "color"
+    tab: "Border Color",
+    value: "BorderColor",
+    fields: [{
+      label: "Border Color",
+      key: "fieldBorderColor",
+      type: "color"
+    }]
   }, {
-    label: "Border Width",
-    key: "fieldBorderWidth",
-    type: "text",
-    width: 5,
-    placeholder: "1px"
+    tab: "Border Width",
+    value: "BorderWidth",
+    fields: [{
+      label: "Border Width",
+      key: "fieldBorderWidth",
+      type: "text",
+      width: 5,
+      placeholder: "1px"
+    }]
   }, {
-    label: "Border Style",
-    key: "fieldBorderStyle",
-    type: "textOptions",
-    hideMetaDataOptions: true,
-    width: 5,
-    options: [{
-      text: "Solid",
-      value: "solid"
-    }, {
-      text: "Dotted",
-      value: "dotted"
-    }, {
-      text: "Dashed",
-      value: "dashed"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        children: option.text
-      });
-    }
+    tab: "Border Style",
+    value: "BorderStyle",
+    fields: [{
+      label: "Border Style",
+      key: "fieldBorderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      width: 5,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
   }]
 }];

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

@@ -214,40 +214,14 @@ const StyleBuilder = props => {
               }, `accordion_${i}`)
             }, i);
           } else {
-            return /*#__PURE__*/_jsx(ThemeProvider, {
-              theme: muiTheme,
-              children: /*#__PURE__*/_jsxs(Accordion, {
-                defaultExpanded: true,
-                children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                  sx: {
-                    padding: "0px"
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    className: "settingsHeader",
-                    color: "primary",
-                    style: {
-                      fontSize: "14px !important",
-                      fontWeight: "400"
-                    },
-                    children: m?.tab
-                  })
-                }), /*#__PURE__*/_jsx(AccordionDetails, {
-                  sx: {
-                    padding: "5px"
-                  },
-                  children: /*#__PURE__*/_jsx(StyleContent, {
-                    renderTabs: renderTabs,
-                    value: m.value,
-                    element: elementProps,
-                    onChange: onElementPropsChange,
-                    customProps: customProps,
-                    handleClose: handleClose
-                  }, `tab_${m.value}_$${i}`)
-                })]
-              }, `accordion_${i}`)
-            }, i);
+            return /*#__PURE__*/_jsx(StyleContent, {
+              renderTabs: renderTabs,
+              value: m.value,
+              element: elementProps,
+              onChange: onElementPropsChange,
+              customProps: customProps,
+              handleClose: handleClose
+            }, `tab_${m.value}_$${i}`);
           }
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {

package/dist/Editor/common/Uploader.js

@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
+import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,9 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -98,6 +102,10 @@ const Uploader = props => {
         className: "uploadImageSection",
         children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageText",
+          sx: {
+            background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+            border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+          },
           children: /*#__PURE__*/_jsxs(Button, {
             component: "label",
             variant: "text",

package/dist/Editor/common/iconListV2.js

@@ -628,6 +628,7 @@ export const BoldTextFormatIcon = props => /*#__PURE__*/_jsx("svg", {
   viewBox: "0 0 12 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  className: "fill-path",
   children: /*#__PURE__*/_jsx("path", {
     d: "M0.598011 15.3564V0.81099H5.92472C6.95691 0.81099 7.81155 0.981445 8.48864 1.32235C9.16572 1.65853 9.67235 2.11544 10.0085 2.69309C10.3447 3.26601 10.5128 3.91232 10.5128 4.63201C10.5128 5.23807 10.4015 5.74944 10.179 6.1661C9.95644 6.57804 9.65814 6.90948 9.28409 7.16042C8.91477 7.40663 8.50758 7.58656 8.0625 7.7002V7.84224C8.54545 7.86591 9.01657 8.02216 9.47585 8.31099C9.93987 8.59508 10.3234 8.99991 10.6264 9.52548C10.9295 10.051 11.081 10.6903 11.081 11.4431C11.081 12.1865 10.9058 12.8541 10.5554 13.4459C10.2098 14.0331 9.67472 14.4994 8.95028 14.8451C8.22585 15.186 7.30019 15.3564 6.1733 15.3564H0.598011ZM2.79261 13.4743H5.96023C7.01136 13.4743 7.7642 13.2707 8.21875 12.8635C8.6733 12.4564 8.90057 11.9474 8.90057 11.3366C8.90057 10.8773 8.78456 10.4559 8.55256 10.0724C8.32055 9.68883 7.98911 9.38343 7.55824 9.15616C7.1321 8.92889 6.62547 8.81525 6.03835 8.81525H2.79261V13.4743ZM2.79261 7.1036H5.73295C6.22538 7.1036 6.66809 7.00891 7.06108 6.81951C7.45881 6.63012 7.77367 6.36497 8.00568 6.02406C8.24242 5.67841 8.3608 5.27122 8.3608 4.80247C8.3608 4.20114 8.15009 3.69688 7.72869 3.28968C7.30729 2.88249 6.66099 2.67889 5.78977 2.67889H2.79261V7.1036Z",
     fill: "#64748B"
@@ -1200,6 +1201,7 @@ export function DragIcon() {
     viewBox: "0 0 10 6",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    className: "dragIcon",
     children: [/*#__PURE__*/_jsx("ellipse", {
       cx: "1.49462",
       cy: "4.42384",

package/dist/Editor/common/iconslist.js

@@ -135,6 +135,7 @@ export const StrikethroughIcon = props => /*#__PURE__*/_jsx("svg", {
   height: "15",
   viewBox: "0 0 15 15",
   fill: "none",
+  className: "fill-path",
   children: /*#__PURE__*/_jsx("path", {
     className: "strokeFillPath",
     d: "M2.7607 11.125C2.7607 13.0718 4.33885 14.65 6.28568 14.65H8.21432C10.1611 14.65 11.7393 13.0718 11.7393 11.125V10.6429C11.7393 9.78254 11.4309 8.99403 10.9189 8.38214H13.5179C13.867 8.38214 14.15 8.0991 14.15 7.75C14.15 7.4009 13.867 7.11786 13.5179 7.11786H8.21597H8.21435H6.28579C5.03727 7.11786 4.02509 6.10568 4.02509 4.85714V4.375C4.02509 3.12647 5.03727 2.11429 6.28579 2.11429H8.21435C9.46288 2.11429 10.4751 3.12647 10.4751 4.375V4.84874C10.4751 5.19784 10.7581 5.48088 11.1072 5.48088C11.4563 5.48088 11.7393 5.19784 11.7393 4.84874V4.375C11.7393 2.42817 10.1612 0.85 8.21435 0.85H6.28579C4.33897 0.85 2.76081 2.42817 2.76081 4.375V4.85714C2.76081 5.71746 3.06916 6.50597 3.58108 7.11786H0.982141C0.633044 7.11786 0.35 7.4009 0.35 7.75C0.35 8.0991 0.633044 8.38214 0.982141 8.38214H8.21424L8.21556 8.38214C8.21559 8.38214 8.21562 8.38214 8.21564 8.38214C9.46353 8.38289 10.4749 9.39474 10.4749 10.6429V11.125C10.4749 12.3735 9.46276 13.3857 8.21424 13.3857H6.28568C5.03715 13.3857 4.02498 12.3735 4.02498 11.125V10.6429C4.02498 10.2938 3.74193 10.0107 3.39284 10.0107C3.04374 10.0107 2.7607 10.2938 2.7607 10.6429V11.125Z",

package/dist/Editor/helper/deserialize/index.js

@@ -76,13 +76,11 @@ const ELEMENT_TAGS = {
   }),
   TABLE: (el, children = []) => {
     try {
-      const tableBody = (children || [])?.find(f => f?.type === "table-body");
-      const bodyChild = tableBody?.children || [];
-      const firstRowChildren = tableBody[0]?.children || [];
+      const bodyChild = children || [];
+      const firstRowChildren = bodyChild[0]?.children || [];
       return {
         type: "table",
-        overwriteChild: bodyChild,
-        // we are not having table-body in our json format, just we are wrapping table-row's inside the table
+        children: bodyChild,
         rows: bodyChild?.length,
         columns: firstRowChildren?.length
       };
@@ -90,12 +88,8 @@ const ELEMENT_TAGS = {
       console.log(err);
     }
   },
-  THEAD: () => ({
-    type: "table-head"
-  }),
-  TBODY: () => ({
-    type: "table-body"
-  }),
+  // THEAD: () => ({ type: "table-head" }),
+  // TBODY: () => ({ type: "table-body" }),
   TH: handleTableCell,
   TR: () => ({
     type: "table-row"

package/dist/Editor/hooks/useEditorScroll.js

@@ -19,6 +19,6 @@ function useEditorScroll(editorWrapper = {
         currentEditorWrapper.removeEventListener("scroll", handleScroll);
       }
     };
-  }, [editorWrapper.current]);
+  }, [editorWrapper.current, callback]);
 }
 export default useEditorScroll;