@flozy/editor 4.9.5 → 4.9.6

package/dist/Editor/ChatEditor.js

@@ -1,9 +1,8 @@
 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 { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
-import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
+import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
 import { commands, mentionsEvent } from "./utils/events";
 import { insertEmoji } from "./utils/emoji";
@@ -15,6 +14,7 @@ import Shorthands from "./common/Shorthands";
 import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
 import { EditorProvider } from "./hooks/useMouseMove";
 import decorators from "./utils/Decorators";
+import { useDebouncedCallback } from "use-debounce";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
@@ -42,8 +42,18 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
-  const [loadedValue] = useState(value);
-  const [deboundedValue] = useDebounce(value, 500);
+  const debouncedValue = useRef(value);
+  const debounced = useDebouncedCallback(
+  // function
+  value => {
+    const {
+      value: strVal,
+      ...restVal
+    } = getOnSaveData(value);
+    onSave(strVal, restVal);
+  },
+  // delay in ms
+  500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
       needLayout,
@@ -63,7 +73,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       const {
         value: strVal,
         ...restVal
-      } = getOnSaveData(value);
+      } = getOnSaveData(debouncedValue?.current);
       onsubmit(false, {
         strVal,
         restVal
@@ -99,7 +109,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const newValue = draftToSlate({
           data: content
         });
-        setValue(newValue);
+        debounced(newValue);
+
         // setTimeout(() => {
         if (editor.children.length === 0) {
           Transforms.insertNodes(editor, newValue);
@@ -112,27 +123,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-
-  // useEffect(() => {
-  //     setIsExternalUpdate(true);
-  //     setValue(draftToSlate({ data: content }));
-  // }, [content]);
-
-  useEffect(() => {
-    if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(deboundedValue);
-      onSave(strVal, restVal);
-    }
-  }, [deboundedValue]);
   const getOnSaveData = val => {
     const text = serializeToText(val);
+    const mentions = serializeMentions(val);
     const title = val?.find(f => f.type === "title");
     return {
       value: JSON.stringify(val),
       text: text,
+      mentions: mentions,
       title: serializeToText(title?.children) || "Untitled"
     };
   };
@@ -180,15 +178,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    const value_txt = serializeToText(value);
-    if (!value_txt) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(newValue);
-      onSave(strVal, restVal);
-    }
-    setValue(newValue);
+    debounced(newValue);
+    debouncedValue.current = newValue;
     if (!isInteracted) {
       setIsInteracted(true);
     }
@@ -228,7 +219,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;
@@ -237,7 +228,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const {
           value: strVal,
           ...restVal
-        } = getOnSaveData(value);
+        } = getOnSaveData(debouncedValue?.current);
         onsubmit(false, {
           strVal,
           restVal
@@ -251,7 +242,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     const {
       value: strVal,
       ...restVal
-    } = getOnSaveData(value);
+    } = getOnSaveData(debouncedValue?.current);
     onBlur({
       strVal,
       restVal
@@ -272,7 +263,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editor: editor,
     children: /*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: debouncedValue?.current,
       onChange: handleEditorChange,
       children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
         classes: classes,

package/dist/Editor/Editor.css

@@ -399,7 +399,7 @@ blockquote {
   align-items: center;
   border-width: 0px, 0px, 0px, 0px;
   border-style: solid;
-  border-color: #2563EB;
+  border-color: #2563EB66;
   justify-content: center;
   flex-direction: column;
   width: 100%;
@@ -492,9 +492,9 @@ blockquote {
 
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
-  background: #eee !important;
-  color: #ccc !important;
-  border: 1px solid #ccc !important;
+  background: #eee;
+  color: #ccc;
+  border: 1px solid #ccc;
 }
 
 .MuiButton-root.secondaryBtn {

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

@@ -71,7 +71,6 @@ function AIInput({
   }, [openAI]);
   const isSendBtnDisabled = !inputValue || loading;
   const props = getProps(openAI, generatedText) || {};
-  const fromToolBar = openAI === "fromToolBar";
   const handleSendBtnClick = () => {
     if (isSendBtnDisabled) {
       return;

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -516,7 +516,7 @@ const SignaturePopup = props => {
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,
@@ -29,6 +30,7 @@ const Dropdown = ({
       }
     },
     sx: classes.textFormatSelect,
+    IconComponent: KeyboardArrowDownRoundedIcon,
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
     // style={{ fontFamily: item.text }}
     , {

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -3,6 +3,7 @@ import { Autocomplete, TextField } from "@mui/material";
 import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
 import usePopupStyle from "../PopupTool/PopupToolStyle.js";
 import { useEditorContext } from "../../hooks/useMouseMove.js";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -57,6 +58,7 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
         "& .MuiInputBase-root.MuiOutlinedInput-root": {

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

@@ -96,8 +96,29 @@ const usePopupStyle = theme => ({
         width: "100%",
         maxHeight: "fit-content"
       },
+      "& .MuiTab-root": {
+        textTransform: "capitalize",
+        color: "#64748B",
+        borderBottom: `1.5px solid ${theme?.palette?.editor?.deviderBgColor}`
+      },
+      "& .Mui-selected": {
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        fontWeight: "700 !important"
+      },
+      "& .MuiTabs-indicator": {
+        background: "#2563EB"
+      },
+      "& .MuiTabScrollButton-horizontal": {
+        borderBottom: "unset !important"
+      },
       "@media only screen and (max-width: 599px)": {
         width: "330px"
+      },
+      "& .MuiCardContent-root": {
+        color: theme?.palette?.editor?.textColor,
+        fontFamily: "Inter, sans-serif",
+        fontSize: "12px",
+        fontWeight: "500"
       }
     },
     "& .headerContainer": {},
@@ -122,6 +143,38 @@ const usePopupStyle = theme => ({
           fill: theme?.palette?.type === "dark" ? "none" : ""
         }
       },
+      "& .signatureElementIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .commonSvgStyle": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .commonSvgStyle2": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .colorBoxElementIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          fill: "none"
+        }
+      },
+      "& .gridElementIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .newLineElementIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
       "&:hover": {
         backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
         "& .signatureElementIcon": {
@@ -194,6 +247,11 @@ const usePopupStyle = theme => ({
     },
     "@media only screen and (max-width: 599px)": {
       width: "330px"
+    },
+    "& .textFormatMUIIcon": {
+      "& svg": {
+        color: theme?.palette?.editor?.closeButtonSvgStroke
+      }
     }
   },
   textFormatLabel: {
@@ -290,9 +348,10 @@ const usePopupStyle = theme => ({
   autoCompleteaFontFamily: {
     "& .MuiOutlinedInput-root": {
       borderRadius: "8px",
-      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
       fontSize: "14px",
-      height: "36px"
+      height: "36px",
+      paddingLeft: "15px !important"
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
@@ -470,7 +529,8 @@ const usePopupStyle = theme => ({
     },
     "& .colorPicker": {
       background: theme?.palette?.editor?.inputFieldBgColor,
-      borderRadius: "0px 7px 7px 0px"
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
     },
     "& .vl": {
       background: theme?.palette?.editor?.borderColor,
@@ -511,7 +571,8 @@ const usePopupStyle = theme => ({
     },
     "& .colorPicker": {
       background: theme?.palette?.editor?.inputFieldBgColor,
-      borderRadius: "0px 7px 7px 0px"
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
     },
     "& .vl": {
       background: theme?.palette?.editor?.borderColor,
@@ -696,8 +757,11 @@ const usePopupStyle = theme => ({
       }
     },
     "& .default-color-panel": {
+      gridTemplateColumns: "repeat(auto-fill, 24px)",
       "& .default-color-panel_item": {
-        borderRadius: "50%"
+        borderRadius: "50%",
+        width: "16px",
+        height: "16px"
       }
     }
   },
@@ -818,17 +882,18 @@ const usePopupStyle = theme => ({
     "& .MuiPopover-paper": {
       maxHeight: "140px",
       // minWidth: "130px",
-      border: "1px solid #E4E8EB",
-      background: `${theme?.palette?.editor?.background} !important`,
+      // border: "1px solid #E4E8EB",
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
       overflowY: "scroll",
-      padding: "6px 12px 6px 0px",
+      padding: "3px 12px 8px 2px",
+      borderRadius: "8px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px 6px 0px 6px",
+      margin: "6px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
@@ -841,8 +906,40 @@ const usePopupStyle = theme => ({
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        color: `#2563EB !important`,
-        background: `#E9F3FE !important`
+        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        "& .orderedListIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& text": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .bulletedListTextIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`,
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& circle": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .checkedListTextIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .accordianIconSvgTextFormat": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+          }
+        },
+        "& .textAlignIconSameStyles": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        }
       }
     },
     "& .menuOptions": {

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

@@ -125,6 +125,7 @@ const TextFormat = props => {
         item: true,
         xs: 12,
         sx: classes.textFormatField,
+        className: "textFormatMUIIcon",
         children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
           classes: classes,
           ...fontFamilies,
@@ -147,6 +148,7 @@ const TextFormat = props => {
           item: true,
           xs: 12,
           sx: classes.textFormatField3,
+          className: "textFormatMUIIcon",
           children: /*#__PURE__*/_jsx(Dropdown, {
             classes: classes,
             ...fontWeight,

package/dist/Editor/common/ColorPickerButton.js

@@ -43,9 +43,10 @@ const ColorPickerButton = props => {
         background: value,
         height: "22px",
         minWidth: "22px",
-        borderRadius: "26px",
-        border: "2px solid #E7E7E7"
+        borderRadius: "26px"
+        // border: "2px solid #E7E7E7",
       },
+
       onClick: handleColorPicker
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,

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

@@ -123,13 +123,7 @@ const usePopupStyles = theme => ({
               "& path": {
                 stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
               }
-            },
-            "& .commonSvgStyle2": {
-              background: "red !important"
             }
-          },
-          "& .renderComp": {
-            backgroundColor: "red !important"
           }
         },
         "&:hover": {
@@ -162,7 +156,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: "1px solid #DCE4EC"
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
   },
   listItem: {
     cursor: "pointer",

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

@@ -14,7 +14,7 @@ import BoundaryLine from "./GuideLines/BoundaryLine";
 import ContextMenu from "./ContextMenu";
 import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
-import { focusSelection, clearSelection } from "../../helper";
+import { clearSelection } from "../../helper";
 import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";

package/dist/Editor/commonStyle.js

@@ -134,8 +134,7 @@ const useCommonStyle = theme => ({
           }
         },
         "& .active ": {
-          border: `1px solid #2563EB !important`,
-          background: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBg} !important`
+          border: `1px solid #2563EB !important`
         }
       },
       "& .MuiTab-root": {
@@ -181,6 +180,11 @@ const useCommonStyle = theme => ({
           border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`
         }
       }
+    },
+    "& .disabledSaveBtn": {
+      background: "#2563EB33 !important",
+      color: theme?.palette?.type === "dark" && "#FFFFFF33 !important",
+      border: "1px solid #2563EB33 !important"
     }
   },
   popupTitle2: {

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -15,6 +15,20 @@ const LIST_FORMAT_TYPE = {
   unorderedList: "list-item"
 };
 const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
+export const serializeMentions = node => {
+  try {
+    if (node?.type === 'mention') {
+      return [node.character];
+    }
+    let children = Array.isArray(node) ? node : node?.children;
+    children = children && Array.isArray(children) ? children : [];
+    let mentions = children.map(child => serializeMentions(child)).flat();
+    return mentions.filter(Boolean);
+  } catch (err) {
+    console.log(err);
+    return [];
+  }
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);

package/dist/Editor/utils/events.js

@@ -5,7 +5,6 @@ import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
-import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",

package/dist/Editor/utils/serializeToText.js

@@ -2,6 +2,8 @@ export const serializeToText = node => {
   try {
     if (!node?.type && node?.text) {
       return node?.text;
+    } else if (node?.type === 'mention') {
+      return '@' + node?.character?.name || '';
     }
     let n = Array.isArray(node) ? node : node?.children;
     n = n && Array.isArray(n) ? n : n ? [n] : [];

package/package.json

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