@flozy/editor 4.9.3 → 4.9.4

package/dist/Editor/Editor.css

@@ -1214,14 +1214,6 @@ blockquote {
   position: absolute;
 }
 
-.dividerComponent:hover {
-  padding: 10px 0;
-}
-
-.dividerComponent.readonlyDivider:hover {
-  padding: 0;
-}
-
 .dividerComponent:hover .divider-settings {
   display: block;
 }

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
@@ -178,9 +178,9 @@ function PopoverAIInput({
   const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
-  const updateAnchor = () => {
+  const updateAnchor = useCallback(() => {
     updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
-  };
+  }, [setAnchorEl, editor, openAI, selectedEleRef.current]);
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);

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

@@ -52,10 +52,13 @@ const Carousel = props => {
   useEffect(() => {
     setRefresh(new Date().getTime());
   }, []);
+
+  //comment this for carosul selection on insert 
   useEffect(() => {
     if (!edit) {
       ReactEditor.focus(editor);
       Transforms.select(editor, ReactEditor.findPath(editor, element));
+      Transforms.deselect(editor);
     }
   }, [edit]);
   const onAddSlide = () => {

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

@@ -100,11 +100,12 @@ const Divider = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: `dividerComponent ${readOnly ? 'readonlyDivider' : ''}`,
+    className: `dividerComponent`,
     style: {
       userSelect: "none",
       position: 'relative'
     },
+    contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
@@ -124,7 +125,8 @@ const Divider = props => {
         userSelect: "none",
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
-        height: borderColor?.includes("linear") ? borderWidth : undefined
+        height: borderColor?.includes("linear") ? borderWidth : undefined,
+        marginTop: '15px'
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -27,7 +27,7 @@ const SearchAttachment = props => {
       metadata?.actionHandler(type, element);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "attachment-wrpr-ev2",
     ...attributes,
@@ -35,7 +35,7 @@ const SearchAttachment = props => {
     style: {
       display: "block"
     },
-    children: [/*#__PURE__*/_jsxs(Card, {
+    children: /*#__PURE__*/_jsxs(Card, {
       style: {
         display: "flex",
         justifyContent: "flex-start",
@@ -45,7 +45,7 @@ const SearchAttachment = props => {
         padding: "0px 10px",
         boxShadow: "none",
         border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-        borderRadius: "7px",
+        borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         "& *::selection": {
@@ -76,7 +76,7 @@ const SearchAttachment = props => {
             paddingBottom: '3px'
           }
         },
-        children: /*#__PURE__*/_jsx(Typography, {
+        children: /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: "500",
             background: theme?.palette?.text?.slashBrainText,
@@ -95,13 +95,10 @@ const SearchAttachment = props => {
           },
           component: "div",
           variant: "subtitle1",
-          children: label
+          children: [label, children]
         })
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      contentEditable: false,
-      children: children
-    })]
+    })
   });
 };
 export default SearchAttachment;

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"

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

@@ -128,41 +128,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/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/hooks/useEditorScroll.js

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

package/package.json

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