@flozy/editor 5.4.1 → 5.4.2

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

@@ -26,8 +26,8 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
+import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
+import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
@@ -72,6 +72,12 @@ const Leaf = ({
     children: children
   });
 };
+const updateTopBanner = (content = [], setTopBanner) => {
+  setTopBanner(() => {
+    const firstNode = content ? content[0] : {};
+    return firstNode?.type === "topbanner" ? firstNode : null;
+  });
+};
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     id,
@@ -103,6 +109,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isTextSelected, setIsTextSelected] = useState(false);
   const [breakpoint, setBreakpoint] = useState("");
+  const [topBanner, setTopBanner] = useState();
   const debouncedValue = useRef(value);
   const [size] = useWindowResize();
   const {
@@ -117,7 +124,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
-    return withCommon(createEditor(), {
+    const editor = createEditor();
+    editor.needLayout = needLayout;
+    return withCommon(editor, {
       needLayout
     });
   }, [collaborativeEditor]);
@@ -130,7 +139,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth
+    maxWidth: pageMaxWidth,
+    lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -149,6 +159,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
+    updateTopBanner(content, setTopBanner);
     if (!isMobile && !ReactEditor.isFocused(editor)) {
       ReactEditor.focus(editor);
     }
@@ -297,10 +308,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-      debounced(newValue);
-      if (!isInteracted) {
-        setIsInteracted(true);
+    if (!readOnly) {
+      if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+        updateTopBanner(newValue, setTopBanner);
+        debounced(newValue);
+        if (!isInteracted) {
+          setIsInteracted(true);
+        }
       }
     }
   };
@@ -319,6 +333,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com"
   };
+  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -410,10 +425,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorWrapper?.current?.classList.remove("hideScroll");
     handleScrollStop();
   };
-  const hasTopBanner = () => {
-    const tb = editor.children[0];
-    return tb?.type === "topbanner" ? tb : null;
-  };
+  const hasTopBanner = () => topBanner;
   const renderTopBanner = () => {
     const tb = hasTopBanner();
     return tb ? /*#__PURE__*/_jsx(TopBanner, {
@@ -495,12 +507,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         ,
         children: /*#__PURE__*/_jsxs(Slate, {
           editor: editor,
-          initialValue: debouncedValue?.current,
+          initialValue: getInitialValue(debouncedValue?.current, readOnly),
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsxs(Overlay, {
               children: [/*#__PURE__*/_jsx(Box, {
-                className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth`,
+                className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth ${readOnly ? "readOnlyContainer" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,
@@ -524,6 +536,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         padding: {
                           ...getTRBLBreakPoints(bannerSpacing)
                         },
+                        lineHeight: lineH,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",
@@ -581,8 +594,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -31,7 +31,7 @@ blockquote {
   border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
-  padding-left: 10px;
+  /* padding-left: 10px; */
   margin: 0px;
 }
 
@@ -42,7 +42,7 @@ blockquote {
 }
 
 .editor-wrapper table {
-  border-collapse: separate;
+  border-collapse: collapse;
 }
 
 .editor-wrapper .editor-wrapperbutton {
@@ -149,7 +149,7 @@ blockquote {
 .grid-item-toolbar button,
 .element-toolbar button,
 .element-toolbar a {
-  border-radius: 10px;
+  border-radius: 50%;
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
@@ -225,9 +225,13 @@ blockquote {
   background-color: #0052cc;
   padding: 8px 12px;
   color: #ffffff;
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   opacity: 1;
   border-radius: 32px;
+  text-transform: math-auto;
+  height: 36px;
+  padding: 0px 12px;
 }
 
 .signature-btn-container button:hover {
@@ -351,13 +355,17 @@ blockquote {
   height: 100%;
   width: 100%;
   border: 1px solid #2563EB;
-  border-radius: 12px;
+  border-radius: 7px;
 }
 
 .activeBrush svg {
   stroke: #2563eb;
 }
 
+.brushIcon:hover {
+  background: unset;
+}
+
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;
@@ -383,7 +391,7 @@ blockquote {
 
 .dialog-actions-si .MuiButtonBase-root {
   opacity: 1;
-  padding: 6px 5px 0px 3px !important
+  padding: 0px 5px 0px 2px !important
 }
 
 .signature-tab {
@@ -397,9 +405,9 @@ blockquote {
 .signature-tab2 {
   /* display: flex; */
   align-items: center;
-  border-width: 0px, 0px, 0px, 0px;
+  border-width: 1px;
   border-style: solid;
-  border-color: #2563EB;
+  border-color: #2563EB66;
   justify-content: center;
   flex-direction: column;
   width: 100%;
@@ -491,11 +499,19 @@ blockquote {
   text-transform: none;
 }
 
-.MuiButton-root.primaryBtn.disabled,
-.MuiButton-root.secondaryBtn.disabled {
+.MuiButton-root.primaryBtn:disabled {
   background: #eee !important;
+  box-shadow: none !important;
   color: #ccc !important;
   border: 1px solid #ccc !important;
+  cursor: not-allowed;
+}
+
+.MuiButton-root.primaryBtn.disabled,
+.MuiButton-root.secondaryBtn.disabled {
+  background: #eee;
+  color: #ccc;
+  border: 1px solid #ccc;
 }
 
 .MuiButton-root.secondaryBtn {
@@ -516,7 +532,7 @@ blockquote {
 }
 
 .deleteBtn {
-  background: #ffffff;
+  background: #d32f2f ;
   border: 1px solid #d32f2f !important;
   box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
   border-radius: 8px !important;
@@ -526,6 +542,7 @@ blockquote {
   margin-right: 15px !important;
   color: #d32f2f;
   width: auto !important;
+  text-transform: capitalize !important;
 }
 
 @media (max-width: 480px) {
@@ -623,7 +640,7 @@ blockquote {
 }
 
 .MuiIconButton-root.btnActive {
-  background-color: #ccc;
+  color: #2563EB !important;
 }
 
 .embed .element-toolbar {
@@ -663,7 +680,8 @@ blockquote {
 }
 
 .resize-br.img-resizer {
-  bottom: 8px;
+  bottom: 10px;
+  right: 5px;
 }
 
 .visible-on-hover {
@@ -858,7 +876,7 @@ blockquote {
 
 .dialogComp .MuiInputBase-input {
   border-radius: 8px;
-  box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05);
+  /* box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05); */
   font-size: 12px;
   font-weight: 500;
 }
@@ -1023,11 +1041,11 @@ blockquote {
   width: 200px;
   cursor: pointer;
   color: #464646;
-  background-color: #fff;
+  /* background-color: #fff; */
   padding: 4px 6px;
   border-radius: 12px;
   span {
-    text-transform: capitalize;
+    text-transform: math-auto;
   }
   @media only screen and (max-width: 599px) {
   background-color: unset;
@@ -1049,7 +1067,7 @@ blockquote {
 }
 
 .textFontArrows .MuiIconButton-root {
-  padding: 2px;
+  padding: 0px;
 }
 
 .tools-drawer .MuiTypography-root {
@@ -1073,6 +1091,10 @@ blockquote {
   font-size: 14px;
 }
 
+.listItemMargin {
+  margin: 0px;
+}
+
 .content-editable.empty {
   position: relative;
 }
@@ -1226,8 +1248,10 @@ blockquote {
   position: absolute;
 }
 
-.dividerComponent:hover .divider-settings {
+.dividerComponent:hover .divider-settings,
+.dividerComponent:hover .element-selector {
   display: block;
+  pointer-events: auto;
 }
 
 @media (max-width: 899px) {
@@ -1238,3 +1262,61 @@ blockquote {
     max-width: 100% !important;
   }
 }
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
+.hideScroll {
+  overflow-anchor: none;
+}
+
+.hideScroll::-webkit-scrollbar-track {
+  background: none !important;
+}
+
+.hideScroll::-webkit-scrollbar-thumb {
+  background: none !important;
+}
+
+.hideScroll::-webkit-scrollbar-thumb:hover {
+  background: none !important;
+}
+
+.custom-scroll::-webkit-scrollbar {
+  height: .6rem; 
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 5px;
+  cursor: pointer; 
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+
+.custom-scroll:hover::-webkit-scrollbar-thumb {
+  background: #A7AEC1; 
+}
+
+::selection {
+  color: inherit;
+  background: rgba(35, 131, 226, 0.35) !important;
+}
+
+::-moz-selection {
+  background: rgba(35, 131, 226, 0.35) !important;
+  color: inherit;
+}
+
+::-webkit-selection {
+  background: rgba(35, 131, 226, 0.35) !important;
+  color: inherit;
+}
+
+.gradientFillBtn {
+  background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
+  text-transform: math-auto !important;
+}

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/AI/CustomSelect.js

@@ -8,12 +8,15 @@ function CustomSelect({
   classes,
   options,
   onSend,
-  show
+  show,
+  btnProps = {}
 }) {
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   if (show) {
     return /*#__PURE__*/_jsx(Box, {
       component: "div",
-      sx: classes.customSelectContainer,
+      sx: !isMobile && classes.customSelectContainer,
+      className: "customSelectContainer",
       children: options?.map((groupOption, index) => {
         const {
           options,
@@ -28,7 +31,8 @@ function CustomSelect({
             return /*#__PURE__*/_jsx(DisplayOption, {
               option: option,
               classes: classes,
-              onSend: onSend
+              onSend: onSend,
+              btnProps: btnProps
             }, i);
           })]
         }, index);
@@ -42,15 +46,18 @@ export default CustomSelect;
 function DisplayOption({
   option,
   classes,
-  onSend
+  onSend,
+  btnProps = {}
 }) {
   const {
-    Icon
+    Icon,
+    Component
   } = option;
   const [open, setOpen] = useState(false);
   const optionRef = useRef();
+  const showChild = option.options?.length || Component;
   const openOptions = e => {
-    if (option.options?.length && !open) {
+    if (showChild && !open) {
       setOpen(e.currentTarget);
       return;
     }
@@ -66,7 +73,7 @@ function DisplayOption({
         e.stopPropagation();
 
         // is having child options
-        if (option.options?.length) {
+        if (showChild) {
           openOptions(e);
           return;
         }
@@ -75,18 +82,19 @@ function DisplayOption({
       },
       id: "infinity-select-popover",
       className: open ? "active" : "",
+      ...btnProps,
       children: [/*#__PURE__*/_jsxs("div", {
         className: "option-label",
         id: "infinity-select-popover",
         children: [Icon && /*#__PURE__*/_jsx(Icon, {}), option.label]
-      }), option.options?.length && /*#__PURE__*/_jsx(IconButton, {
+      }), showChild ? /*#__PURE__*/_jsx(IconButton, {
         children: /*#__PURE__*/_jsx(FaChevronRight, {
           color: "#94A3B8",
           size: 12
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/_jsx(Popper, {
-      open: open && option.options,
+      open: open && showChild,
       anchorEl: open,
       sx: {
         zIndex: 9001,
@@ -96,7 +104,7 @@ function DisplayOption({
         setOpen(null);
       },
       placement: "right-start",
-      children: /*#__PURE__*/_jsx(Box, {
+      children: Component ? /*#__PURE__*/_jsx(Component, {}) : /*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(CustomSelect, {
           options: option.options,
           onSend: onSend,