@flozy/editor 3.9.4 → 3.9.5

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor, Transforms } from 'slate';
+import { createEditor, Transforms, Editor } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,7 +31,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
-    data: content
+    data: content && content?.length > 0 ? content : [{
+      type: 'paragraph',
+      children: [{
+        text: ''
+      }]
+    }]
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
@@ -47,10 +52,11 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     emojiClick: emoji => {
       if (editor) {
+        ReactEditor.focus(editor);
         insertEmoji(editor, emoji?.native, editor.selection);
         if (editor.selection) {
-          const path = editor.selection.anchor.path;
-          const offset = editor.selection.anchor.offset + emoji?.native.length;
+          // const path = editor.selection.anchor.path;
+          // const offset = editor.selection.anchor.offset + emoji?.native.length;
           const position = {
             anchor: {
               path: [0],
@@ -67,45 +73,65 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         ReactEditor.focus(editor);
       }
     },
-    setContent: newContent => {
-      setIsExternalUpdate(true);
-      setValue(newContent);
-      ReactEditor.focus(editor);
+    submitChat: () => {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(value);
+      onsubmit(false, {
+        strVal,
+        restVal
+      });
     },
     // Focus enable
-    //     enableFocus: () => {
-    //     if (editor) {
-    //         const position = {
-    //             anchor: { path: [0], offset: 0 },
-    //             focus: { path: [0], offset: 0 },
-    //         };
-    //         Transforms.select(editor, position);
-    //         ReactEditor.focus(editor);
-    //     }
-    // },
-
-    clearAll: () => {
+    enableFocus: () => {
+      if (editor) {
+        const position = {
+          anchor: {
+            path: [0],
+            offset: 0
+          },
+          focus: {
+            path: [0],
+            offset: 0
+          }
+        };
+        Transforms.select(editor, position);
+        ReactEditor.focus(editor);
+      }
+    },
+    clearAll: (content = null, clear = true) => {
       if (!editor) return;
-      while (editor.children.length > 0) {
-        Transforms.removeNodes(editor, {
-          at: [0]
+      try {
+        if (clear) {
+          while (editor.children.length > 0) {
+            Transforms.removeNodes(editor, {
+              at: [0]
+            });
+          }
+        }
+        const newValue = draftToSlate({
+          data: content
         });
+        setValue(newValue);
+        setTimeout(() => {
+          if (editor.children.length === 0) {
+            Transforms.insertNodes(editor, newValue);
+          }
+          Transforms.select(editor, Editor.end(editor, []));
+          ReactEditor.focus(editor);
+        }, 300);
+      } catch {
+        console.log("error:");
       }
-      Transforms.insertNodes(editor, {
-        type: 'paragraph',
-        children: [{
-          text: ''
-        }]
-      });
-      ReactEditor.focus(editor);
     }
   }));
-  useEffect(() => {
-    setIsExternalUpdate(true);
-    setValue(draftToSlate({
-      data: content
-    }));
-  }, [id, content]);
+
+  // useEffect(() => {
+  //     setIsExternalUpdate(true);
+  //     setValue(draftToSlate({ data: content }));
+  // }, [content]);
+
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {
@@ -168,14 +194,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    if (isExternalUpdate) {
-      setIsExternalUpdate(false);
-      return;
-    } else {
-      setValue(newValue);
-      if (!isInteracted) {
-        setIsInteracted(true);
-      }
+    setValue(newValue);
+    if (!isInteracted) {
+      setIsInteracted(true);
     }
   };
   const Element = props => {

package/dist/Editor/CommonEditor.js

@@ -29,7 +29,7 @@ import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -319,7 +319,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor
+        editor,
+        needLayout
       });
     } else if (event.key === "Tab") {
       event.preventDefault();

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/Accordion/Accordion.js

@@ -9,6 +9,55 @@ 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,
@@ -69,16 +118,34 @@ const Accordion = props => {
       at: path
     });
   };
+  const setNodes = (data, path) => {
+    Transforms.setNodes(editor, data, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
+    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);
     onClose();
   };
   const onClose = () => {
@@ -93,7 +160,7 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        backgroundColor: bgColor
+        background: bgColor
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
@@ -123,7 +190,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: element,
+      element: getElementProps(element),
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

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

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
+import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionBtnPopup = props => {
   const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Collapse Button",
+    title: "Accordion Settings",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: accordionTitleBtnStyle,
+    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
     customProps: customProps
   });
 };

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

@@ -1,83 +1,43 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import AccordionTitlePopup from "./AccordionTitlePopup";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import React from "react";
+import { getBorderColor, getTextColor } from "../../helper";
+import { Box } from "@mui/material";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element,
-    customProps
+    element
   } = props;
-  const {
-    readOnly
-  } = customProps;
-  const [openSetttings, setOpenSettings] = useState(false);
-  const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
-  const selected = useSelected();
-  const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius,
+    bannerSpacing
   } = element;
-  const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        top: "-42px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  return /*#__PURE__*/_jsxs("div", {
+  const textStyles = getTextColor(textColor);
+  const borderStyle = getBorderColor(borderColor);
+  return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
       width: "100%",
       position: "relative",
-      backgroundColor: bgColor,
-      border: `1px solid ${borderColor}`,
-      color: textColor
+      background: bgColor,
+      ...borderStyle
+    },
+    sx: {
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      },
+      '& span[data-slate-string="true"]': textStyles
     },
-    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
-    }) : null]
+    component: "div",
+    children: children
   });
 };
 export default AccordionSummary;

package/dist/Editor/Elements/Embed/Image.js

@@ -167,15 +167,19 @@ const Image = ({
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
   const handleImageClick = () => {
-    Transforms.select(editor, {
-      anchor: Editor.start(editor, path),
-      focus: Editor.end(editor, path)
-    });
-    if (onClick) {
-      onClick();
-    }
-    if (onTouchEnd) {
-      onTouchEnd();
+    try {
+      Transforms.select(editor, {
+        anchor: Editor.start(editor, path),
+        focus: Editor.end(editor, path)
+      });
+      if (onClick) {
+        onClick();
+      }
+      if (onTouchEnd) {
+        onTouchEnd();
+      }
+    } catch (err) {
+      console.log(err);
     }
   };
   useEffect(() => {
@@ -189,16 +193,20 @@ const Image = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
+    try {
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: path
+      });
+      onClose();
+    } catch (err) {
+      console.log(err);
+    }
   };
   const onClose = () => {
     setOpenSettings(false);

package/dist/Editor/Elements/Embed/Video.js

@@ -95,16 +95,20 @@ const Video = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
+    try {
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: path
+      });
+      onClose();
+    } catch (err) {
+      console.log(err);
+    }
   };
   const onClose = () => {
     setOpenSettings(false);

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -4,12 +4,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const EmojiPicker = props => {
   const {
-    onEmojiSelect
+    onEmojiSelect,
+    onClose
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
-      onEmojiSelect: onEmojiSelect
+      onEmojiSelect: onEmojiSelect,
+      onClickOutside: onClose
     })
   });
 };

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

@@ -119,7 +119,7 @@ const Form = props => {
         if (fieldData?.element === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required || fieldData?.element === "email") {
+        if (fieldData?.required && fieldData?.element === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],

package/dist/Editor/Elements/List/CheckList.js

@@ -68,7 +68,8 @@ const CheckList = ({
         style: {
           flex: 1,
           opacity: checked ? 1 : 1,
-          textDecoration: !checked ? "none" : "none"
+          textDecoration: !checked ? "none" : "none",
+          width: '90%'
         },
         className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: nestedCheckList ? "" : "Todo List",

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -11,7 +11,9 @@ const PageSettingsButton = props => {
   const {
     customProps,
     icoBtnType,
-    from
+    from,
+    closePopper,
+    setToolTip
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -38,6 +40,8 @@ const PageSettingsButton = props => {
     }
   };
   const onClose = () => {
+    closePopper(true);
+    setToolTip(false);
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {

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

@@ -183,7 +183,7 @@ const Table = props => {
     children: [/*#__PURE__*/_jsx(TableComp, {
       sx: classes.table,
       style: {
-        backgroundColor: bgColor,
+        background: bgColor,
         border: `1px solid ${borderColor}`,
         width: "auto"
       },

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

@@ -117,7 +117,7 @@ const TableCell = props => {
     className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
     style: {
       position: "relative",
-      backgroundColor: bgColor || entireBgColor,
+      background: bgColor || entireBgColor,
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },

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

@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,12 +48,23 @@ const MiniToolbar = props => {
   const {
     popupType
   } = useEditorContext();
+  const [toolTip, setToolTip] = useState(false);
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    if (data) {
+      setToolTip(false);
+      setData(null);
+    }
+  }, [data]);
   useEffect(() => {
     if (popper) {
       setPopper(null);
     }
   }, [editor.selection]);
   const handleClick = type => e => {
+    if (type === "page-settings") {
+      setToolTip(true);
+    }
     setPopper(type);
     setAnchorEl(e.currentTarget);
   };
@@ -66,6 +78,10 @@ const MiniToolbar = props => {
   const onSearch = e => {
     setSearch(e?.target?.value || "");
   };
+  const closePopper = data => {
+    setData(data);
+    setToolTip("false");
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -81,11 +97,19 @@ const MiniToolbar = props => {
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
+          disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
             onClick: handleClick(type),
             disabled: isDisabled,
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
+              from: "miniToolBar",
+              icoBtnType: "mini",
+              customProps: customProps,
+              editor: editor,
+              closePopper: closePopper,
+              setToolTip: setToolTip
+            }) : /*#__PURE__*/_jsx(Icon, {
               from: "miniToolBar",
               icoBtnType: "mini",
               customProps: customProps,