@flozy/editor 3.7.9 → 3.8.0

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -18,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -28,19 +28,12 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
-import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
+import { getTRBLBreakPoints } from "./helper/theme";
+import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
-import { getTheme } from "./theme";
-import { useTheme } from "@emotion/react";
-import ThemeSettings from "./themeSettings";
-import ThemeSettingsAI from "./themeSettingsAI";
-import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
-import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ThemeContext = /*#__PURE__*/createContext(null);
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -67,8 +60,7 @@ const Leaf = ({
   children,
   leaf
 }) => {
-  const theme = useTheme();
-  children = getMarked(leaf, children, theme);
+  children = getMarked(leaf, children);
   return /*#__PURE__*/_jsx("span", {
     ...attributes,
     children: children
@@ -87,8 +79,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     toolbarOptions,
     otherProps,
     isIframe,
-    theme,
-    showThemeButtons
+    theme
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -132,11 +123,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor = "",
+    pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth,
-    theme: selectedTheme
+    maxWidth: pageMaxWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -147,11 +137,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
+    placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
-  const [openTheme, setOpenTheme] = useState(false);
-  const [openAITheme, setOpenAITheme] = useState(false);
   useEffect(() => {
     setValue(draftToSlate({
       data: content
@@ -251,12 +239,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
-    toggleTheme() {
-      setOpenTheme(!openTheme);
-    },
-    toggleAITheme() {
-      setOpenAITheme(!openAITheme);
-    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -337,8 +319,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor,
-        needLayout
+        editor
       });
     } else if (event.key === "Tab") {
       event.preventDefault();
@@ -404,152 +385,113 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
-  const themeProps = getTheme(selectedTheme);
-  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
-    value: {
-      openTheme,
-      setOpenTheme
-    },
-    children: /*#__PURE__*/_jsx(CssVarsProvider, {
-      theme: extendTheme(selectedTheme?.theme?.cssVars || {}),
-      children: /*#__PURE__*/_jsxs(EditorProvider, {
-        theme: theme,
-        editor: editor,
-        children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "end",
-            alignItems: "center",
-            gap: "8px",
-            width: "70vw",
-            margin: "auto"
-          },
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            onClick: () => setOpenTheme(true),
-            children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
-          }), /*#__PURE__*/_jsx(IconButton, {
-            onClick: () => setOpenAITheme(true),
-            style: {
-              marginTop: "4px"
-            },
-            children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
-          })]
-        }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
-          classes: classes,
-          ...props,
-          fullScreen: fullScreen,
-          footer: footer || "",
-          children: /*#__PURE__*/_jsx(Box, {
-            component: "div",
-            className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
-            sx: classes.root,
-            style: {
-              ...dotBg
-            },
-            children: /*#__PURE__*/_jsxs(Slate, {
-              editor: editor,
-              initialValue: value,
-              onChange: handleEditorChange,
-              children: [/*#__PURE__*/_jsx(DragAndDrop, {
-                children: /*#__PURE__*/_jsxs(Overlay, {
-                  children: [/*#__PURE__*/_jsx(Box, {
-                    className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
-                    sx: classes.slateWrapper,
-                    id: "slate-wrapper-scroll-container"
-                    // style={editorWrapperStyle}
-                    ,
-                    ref: editorWrapper,
-                    onClick: e => {
-                      handleInsertLastElement(e, editor);
-                    },
-                    onScroll: handleScroll,
-                    style: editorWrapperStyle,
+  return /*#__PURE__*/_jsx(EditorProvider, {
+    theme: theme,
+    editor: editor,
+    children: /*#__PURE__*/_jsx(DialogWrapper, {
+      classes: classes,
+      ...props,
+      fullScreen: fullScreen,
+      footer: footer || "",
+      children: /*#__PURE__*/_jsx(Box, {
+        component: "div",
+        className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
+        sx: classes.root,
+        style: {
+          ...dotBg
+        },
+        children: /*#__PURE__*/_jsxs(Slate, {
+          editor: editor,
+          initialValue: value,
+          onChange: handleEditorChange,
+          children: [/*#__PURE__*/_jsx(DragAndDrop, {
+            children: /*#__PURE__*/_jsxs(Overlay, {
+              children: [/*#__PURE__*/_jsx(Box, {
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
+                sx: classes.slateWrapper,
+                id: "slate-wrapper-scroll-container"
+                // style={editorWrapperStyle}
+                ,
+                ref: editorWrapper,
+                onClick: e => {
+                  handleInsertLastElement(e, editor);
+                },
+                onScroll: handleScroll,
+                style: editorWrapperStyle,
+                children: /*#__PURE__*/_jsxs(Box, {
+                  component: "div",
+                  className: "max-content",
+                  "data-info": outsideEditorClickLabel,
+                  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
+                    className: "scroll-area",
+                    "data-info": outsideEditorClickLabel,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
-                      className: "max-content",
-                      sx: themeProps?.sxProps || {},
-                      "data-info": outsideEditorClickLabel,
-                      children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
-                        className: "scroll-area",
-                        "data-info": outsideEditorClickLabel,
-                        children: /*#__PURE__*/_jsxs(Box, {
-                          component: "div",
-                          className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
-                          sx: {
-                            backgroundColor: "transparent",
-                            padding: {
-                              ...getTRBLBreakPoints(bannerSpacing)
-                            },
-                            width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
-                            height: viewport.h ? `${viewport.h}px` : `100%`,
-                            alignSelf: "center",
-                            transformOrigin: "left top",
-                            transition: "all 0.3s",
-                            minHeight: "87%",
-                            maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
-                          },
-                          "data-info": outsideEditorClickLabel,
-                          children: [/*#__PURE__*/_jsx(Editable, {
-                            className: "innert-editor-textbox",
-                            readOnly: isReadOnly,
-                            renderElement: renderElement,
-                            renderLeaf: renderLeaf,
-                            decorate: decorators,
-                            onKeyDown: onKeyDown
-                          }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
-                            ref: mentionsRef,
-                            mentions: mentions,
-                            setMentions: setMentions,
-                            editor: editor,
-                            target: target,
-                            index: index,
-                            chars: chars,
-                            type: type,
-                            theme: theme
-                          }) : null]
-                        })
-                      }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
-                        customProps: customProps,
-                        toolbarOptions: toolbarOptions,
-                        theme: theme
-                      }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
-                        otherProps: otherProps || {}
-                      }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
-                        sx: {
-                          color: "rgb(100, 116, 139)",
-                          fontSize: "13px",
-                          paddingBottom: hideMiniToolBar ? "0px" : "12px",
-                          cursor: "pointer"
+                      className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
+                      sx: {
+                        backgroundColor: "transparent",
+                        padding: {
+                          ...getTRBLBreakPoints(bannerSpacing)
                         },
-                        align: "center",
-                        "data-info": outsideEditorClickLabel,
-                        onClick: handleFooterClick,
-                        children: footer
-                      }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
-                        open: openTheme,
-                        setOpen: setOpenTheme,
+                        width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
+                        height: viewport.h ? `${viewport.h}px` : `100%`,
+                        alignSelf: "center",
+                        transformOrigin: "left top",
+                        transition: "all 0.3s",
+                        minHeight: "87%",
+                        maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
+                      },
+                      "data-info": outsideEditorClickLabel,
+                      children: [/*#__PURE__*/_jsx(Editable, {
+                        className: "innert-editor-textbox",
+                        readOnly: isReadOnly,
+                        renderElement: renderElement,
+                        renderLeaf: renderLeaf,
+                        decorate: decorators,
+                        onKeyDown: onKeyDown
+                      }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
+                        ref: mentionsRef,
+                        mentions: mentions,
+                        setMentions: setMentions,
                         editor: editor,
-                        services: otherProps?.services
-                      }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
-                        openAITheme: openAITheme,
-                        setOpenAITheme: setOpenAITheme,
-                        onSaveTheme: otherProps?.onSaveTheme
-                      })]
+                        target: target,
+                        index: index,
+                        chars: chars,
+                        type: type,
+                        theme: theme
+                      }) : null]
                     })
-                  }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                    onDrawerOpen: onDrawerOpen,
-                    theme: theme,
-                    setIsTextSelected: setIsTextSelected,
-                    customProps: customProps
-                  }) : null]
+                  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
+                    customProps: customProps,
+                    toolbarOptions: toolbarOptions,
+                    theme: theme
+                  }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
+                    otherProps: otherProps || {}
+                  }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      color: "rgb(100, 116, 139)",
+                      fontSize: "13px",
+                      paddingBottom: hideMiniToolBar ? "0px" : "12px",
+                      cursor: "pointer"
+                    },
+                    align: "center",
+                    "data-info": outsideEditorClickLabel,
+                    onClick: handleFooterClick,
+                    children: footer
+                  })]
                 })
-              }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
-                ...htmlAction,
-                handleCodeToText: handleCodeToText
-              })]
-            }, id)
-          })
-        })]
+              }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
+                onDrawerOpen: onDrawerOpen,
+                theme: theme,
+                setIsTextSelected: setIsTextSelected,
+                customProps: customProps
+              }) : null]
+            })
+          }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
+            ...htmlAction,
+            handleCodeToText: handleCodeToText
+          })]
+        }, id)
       })
     })
   });

package/dist/Editor/Editor.css

@@ -830,6 +830,17 @@ blockquote {
   text-align: center;
 }
 
+.removeScroll::-webkit-outer-spin-button,
+.removeScroll::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* For Firefox */
+.removeScroll {
+    -moz-appearance: textfield;
+}
+
 .borderInput:focus-visible {
   outline: none !important;
 }
@@ -879,7 +890,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 66px;
+  width: 30px;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;

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

@@ -11,8 +11,6 @@ import CustomSelect from "./CustomSelect";
 import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
 import useClickOutside from "../../hooks/useClickOutside";
 import { useEditorContext } from "../../hooks/useMouseMove";
-// import { VoiceToText } from "./VoiceToText";
-import { ChatMicIcon } from "../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -38,13 +36,12 @@ function getProps(openAI, generatedText) {
 }
 function AIInput({
   onSend,
+  loading,
   generatedText,
   openAI,
   inputValue,
   onInputChange,
-  onClickOutside,
-  startRecording,
-  ...rest
+  onClickOutside
 }, ref) {
   const {
     theme
@@ -70,7 +67,6 @@ function AIInput({
       clearTimeout(timeoutId);
     };
   }, [openAI]);
-  const loading = rest?.loading || rest?.isAILoading;
   const isSendBtnDisabled = !inputValue || loading;
   const props = getProps(openAI, generatedText) || {};
   const fromToolBar = openAI === "fromToolBar";
@@ -136,25 +132,18 @@ function AIInput({
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [/*#__PURE__*/_jsx(IconButton
-          // sx={
-          //   isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn
-          // }
-          , {
-            onClick: () => startRecording(),
-            children: /*#__PURE__*/_jsx(ChatMicIcon, {})
-          }), /*#__PURE__*/_jsx(IconButton, {
+          children: /*#__PURE__*/_jsx(IconButton, {
             sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
             onClick: () => handleSendBtnClick(),
             children: /*#__PURE__*/_jsx(IoSend, {
               color: "#fff",
               size: 14
             })
-          })]
+          })
         })]
       })]
     }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {

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

@@ -8,7 +8,6 @@ import { Editor, Node, Path, Transforms } from "slate";
 import useWindowResize from "../../hooks/useWindowResize";
 import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
-import { VoiceToText } from "./VoiceToText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const scrollToAIInput = () => {
@@ -179,11 +178,6 @@ function PopoverAIInput({
       onClickOutside();
       return;
     }
-    if (type === "speech_to_text") {
-      Transforms.insertText(editor, option.text);
-      onClickOutside();
-      return;
-    }
     if (type === "try_again") {
       // resetting the previous option and try again
       option = selectedOption;
@@ -194,7 +188,7 @@ function PopoverAIInput({
     setLoading(true);
     const payload = {
       mode: option.mode || 0,
-      query: option?.inputValue || inputValue
+      query: inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
@@ -273,19 +267,15 @@ function PopoverAIInput({
       component: "div",
       sx: classes.mobileAIInputWrapper,
       ref: targetRef,
-      children: /*#__PURE__*/_jsx(VoiceToText, {
-        otherProps: otherProps,
+      children: /*#__PURE__*/_jsx(AIInput, {
+        loading: loading,
         onSend: onSend,
-        children: /*#__PURE__*/_jsx(AIInput, {
-          loading: loading,
-          onSend: onSend,
-          generatedText: generatedText,
-          anchorEl: anchorEl,
-          openAI: openAI,
-          inputValue: inputValue,
-          onInputChange: onInputChange,
-          onClickOutside: onClickOutside
-        })
+        generatedText: generatedText,
+        anchorEl: anchorEl,
+        openAI: openAI,
+        inputValue: inputValue,
+        onInputChange: onInputChange,
+        onClickOutside: onClickOutside
       })
     }) : /*#__PURE__*/_jsx(Popper, {
       open: Boolean(openAI),
@@ -306,19 +296,15 @@ function PopoverAIInput({
           sx: getSelectedText(editor) ? {
             marginTop: "6px"
           } : {},
-          children: /*#__PURE__*/_jsx(VoiceToText, {
-            otherProps: otherProps,
+          children: /*#__PURE__*/_jsx(AIInput, {
+            loading: loading,
             onSend: onSend,
-            children: /*#__PURE__*/_jsx(AIInput, {
-              loading: loading,
-              onSend: onSend,
-              generatedText: generatedText,
-              anchorEl: anchorEl,
-              openAI: openAI,
-              inputValue: inputValue,
-              onInputChange: onInputChange,
-              onClickOutside: onClickOutside
-            })
+            generatedText: generatedText,
+            anchorEl: anchorEl,
+            openAI: openAI,
+            inputValue: inputValue,
+            onInputChange: onInputChange,
+            onClickOutside: onClickOutside
           })
         })
       })

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

@@ -167,8 +167,7 @@ const Styles = theme => ({
   sendIconContainer: {
     alignSelf: "flex-end",
     display: "flex",
-    alignItems: "center",
-    gap: "6px"
+    alignItems: "center"
   }
 });
 export default Styles;

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

@@ -9,55 +9,6 @@ import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const accordionBtnStyleKeys = {
-  accordionTextColor: "textColor",
-  accordionBgColor: "bgColor",
-  accordionBorderColor: "borderColor"
-};
-const getAccordionData = updateData => {
-  const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
-  const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
-
-  Object.entries(updateData).forEach(([key, value]) => {
-    const accordionBtnStyleKey = accordionBtnStyleKeys[key];
-    if (accordionBtnStyleKey) {
-      // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
-      accordionBtnStyle[accordionBtnStyleKey] = value;
-      return;
-    }
-    accordionTitleStyle[key] = value;
-  });
-  return {
-    accordionBtnStyle,
-    accordionTitleStyle
-  };
-};
-const convertAccordionBtnStyleKeys = (data = {}) => {
-  const style = {
-    ...data
-  };
-  Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
-    const val = data[value];
-    if (val) {
-      // deleting the existing style key in node e.g: textColor
-      delete style[value];
-
-      // convertint into new key in element props e.g: accordionTextColor
-      style[key] = val;
-    }
-  });
-  return style;
-};
-const getElementProps = element => {
-  const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
-
-  // joining accordion title and button styles
-  const elementProps = {
-    ...accordionSummary,
-    ...convertAccordionBtnStyleKeys(element)
-  };
-  return elementProps;
-};
 const Accordion = props => {
   const {
     attributes,
@@ -118,34 +69,16 @@ const Accordion = props => {
       at: path
     });
   };
-  const setNodes = (data, path) => {
-    Transforms.setNodes(editor, data, {
-      at: path
-    });
-  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    const {
-      accordionBtnStyle,
-      accordionTitleStyle
-    } = getAccordionData(updateData);
-
-    // applying accordion title style
-    const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
-    const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
-    setNodes({
-      ...accordionTitleStyle,
-      type: "accordion-summary",
-      children: accordionSummary.children
-    }, accordionSummaryPath);
-
-    // applying accordion button style
-    delete accordionBtnStyle.children;
-    setNodes({
-      ...accordionBtnStyle
-    }, path);
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
     onClose();
   };
   const onClose = () => {
@@ -190,7 +123,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: getElementProps(element),
+      element: element,
       onSave: onSave,
       onClose: onClose,
       customProps: customProps