@flozy/editor 3.9.6 → 3.9.8

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, Editor } from 'slate';
+import { createEditor, Transforms } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,12 +31,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
-    data: content && content?.length > 0 ? content : [{
-      type: 'paragraph',
-      children: [{
-        text: ''
-      }]
-    }]
+    data: content
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
@@ -52,62 +47,57 @@ 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 position = {
+            anchor: {
+              path: [0],
+              offset: 0
+            },
+            focus: {
+              path: [0],
+              offset: 0
+            }
+          };
+          // Create a new selection
+          Transforms.select(editor, position);
+        }
         ReactEditor.focus(editor);
       }
     },
-    submitChat: () => {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(value);
-      onsubmit(false, {
-        strVal,
-        restVal
-      });
+    setContent: newContent => {
+      setIsExternalUpdate(true);
+      setValue(newContent);
+      ReactEditor.focus(editor);
     },
     // 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: (content = null, clear = true) => {
+    //     enableFocus: () => {
+    //     if (editor) {
+    //         const position = {
+    //             anchor: { path: [0], offset: 0 },
+    //             focus: { path: [0], offset: 0 },
+    //         };
+    //         Transforms.select(editor, position);
+    //         ReactEditor.focus(editor);
+    //     }
+    // },
+
+    clearAll: () => {
       if (!editor) return;
-      try {
-        if (clear) {
-          while (editor.children.length > 0) {
-            Transforms.removeNodes(editor, {
-              at: [0]
-            });
-          }
-        }
-        const newValue = draftToSlate({
-          data: content
+      while (editor.children.length > 0) {
+        Transforms.removeNodes(editor, {
+          at: [0]
         });
-        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(() => {
@@ -115,7 +105,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
-  }, [content]);
+  }, [id, content]);
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {

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, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -319,8 +319,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor,
-        needLayout
+        editor
       });
     } else if (event.key === "Tab") {
       event.preventDefault();

package/dist/Editor/Editor.css

@@ -106,7 +106,7 @@ blockquote {
 }
 
 .grid-container {
-  display: flex;
+  /* display: flex;
   border-radius: 0px;
   background-color: transparent;
   border: 0px solid #e5eaf2;
@@ -114,7 +114,7 @@ blockquote {
   position: relative;
   flex-wrap: wrap;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; */
 }
 
 .grid-container-toolbar,
@@ -830,17 +830,6 @@ 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;
 }
@@ -890,7 +879,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 30px;
+  width: 66px;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;

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

@@ -7,58 +7,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 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,
@@ -119,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 = () => {
@@ -161,7 +93,7 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        background: bgColor
+        backgroundColor: bgColor
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
@@ -191,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

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

@@ -1,7 +1,6 @@
 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 {
@@ -11,12 +10,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Settings",
+    title: "Accordion Collapse Button",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
+    renderTabs: accordionTitleBtnStyle,
     customProps: customProps
   });
 };

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

@@ -1,43 +1,83 @@
-import React from "react";
-import { getBorderColor, getTextColor } from "../../helper";
-import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = 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,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
-  const textStyles = getTextColor(textColor);
-  const borderStyle = getBorderColor(borderColor);
-  return /*#__PURE__*/_jsx(Box, {
+  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", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
       width: "100%",
       position: "relative",
-      background: bgColor,
-      ...borderStyle
-    },
-    sx: {
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      },
-      '& span[data-slate-string="true"]': textStyles
+      backgroundColor: bgColor,
+      border: `1px solid ${borderColor}`,
+      color: textColor
     },
-    component: "div",
-    children: children
+    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
   });
 };
 export default AccordionSummary;

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

@@ -167,19 +167,15 @@ const Image = ({
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
   const handleImageClick = () => {
-    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);
+    Transforms.select(editor, {
+      anchor: Editor.start(editor, path),
+      focus: Editor.end(editor, path)
+    });
+    if (onClick) {
+      onClick();
+    }
+    if (onTouchEnd) {
+      onTouchEnd();
     }
   };
   useEffect(() => {
@@ -193,20 +189,16 @@ const Image = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    try {
-      const updateData = {
-        ...data
-      };
-      delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
-        at: path
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-    }
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
@@ -245,7 +237,7 @@ const Image = ({
         lg: "flex",
         xs: xsHidden ? "none" : "flex"
       },
-      width: `100%`,
+      width: `100% !important`,
       maxWidth: "100%",
       padding: {
         ...getTRBLBreakPoints(bannerSpacing)
@@ -296,7 +288,7 @@ const Image = ({
           readOnly: readOnly,
           handleImageClick: handleImageClick
         })
-      }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      }) : null, url && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,

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

@@ -95,20 +95,16 @@ const Video = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    try {
-      const updateData = {
-        ...data
-      };
-      delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
-        at: path
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-    }
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
@@ -191,7 +187,7 @@ const Video = ({
       flexDirection: "row",
       flexWrap: "wrap",
       // to support oldWidth with link
-      width: `100%`,
+      width: `100% !important`,
       justifyContent: horizantal,
       alignContent: vertical
     },

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

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

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

@@ -270,10 +270,10 @@ const Grid = props => {
     backgroundImage: `url(${backgroundImage})`
   } : {};
   const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
+    topLeft = 0,
+    topRight = 0,
+    bottomLeft = 0,
+    bottomRight = 0
   } = getBreakPointsValue(borderRadius, size?.device) || {};
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
@@ -285,15 +285,22 @@ const Grid = props => {
         lg: "flex",
         xs: xsHidden ? "none" : "flex"
       },
-      background: bgColor,
+      background: bgColor || "transparent",
       alignContent: vertical,
       ...bgImage,
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
       borderStyle: borderStyle || "solid",
-      height: "auto"
+      height: "auto",
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      position: 'relative',
+      flexWrap: 'wrap',
+      padding: '0px'
+      // border: 0px solid #e5eaf2;
     },
+
     "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {

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

@@ -11,9 +11,7 @@ const PageSettingsButton = props => {
   const {
     customProps,
     icoBtnType,
-    from,
-    closePopper,
-    setToolTip
+    from
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -40,8 +38,6 @@ 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: {
-        background: bgColor,
+        backgroundColor: 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",
-      background: bgColor || entireBgColor,
+      backgroundColor: bgColor || entireBgColor,
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },