@flozy/editor 4.0.6 → 4.0.8

package/dist/Editor/ChatEditor.js

@@ -14,6 +14,7 @@ import useMentions from "./hooks/useMentions";
 import Shorthands from "./common/Shorthands";
 import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
 import { EditorProvider } from "./hooks/useMouseMove";
+import decorators from "./utils/Decorators";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27,7 +28,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     toolBar = true,
     onSave,
     onsubmit,
-    onBlur = () => {}
+    onBlur = () => {},
+    isMobile = false
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
@@ -42,7 +44,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [value, setValue] = useState(convertedContent);
   const [loadedValue] = useState(value);
   const [deboundedValue] = useDebounce(value, 500);
-  const [isExternalUpdate, setIsExternalUpdate] = useState(false);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
       needLayout
@@ -98,24 +99,24 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
           data: content
         });
         setValue(newValue);
-        setTimeout(() => {
-          if (editor.children.length === 0) {
-            Transforms.insertNodes(editor, newValue);
-          }
-          Transforms.select(editor, Editor.end(editor, []));
-          ReactEditor.focus(editor);
-        }, 300);
+        // setTimeout(() => {
+        if (editor.children.length === 0) {
+          Transforms.insertNodes(editor, newValue);
+        }
+        Transforms.select(editor, Editor.end(editor, []));
+        ReactEditor.focus(editor);
+        //   }, 300);
       } catch {
         console.log("error:");
       }
     }
   }));
-  useEffect(() => {
-    setIsExternalUpdate(true);
-    setValue(draftToSlate({
-      data: content
-    }));
-  }, [content]);
+
+  // useEffect(() => {
+  //     setIsExternalUpdate(true);
+  //     setValue(draftToSlate({ data: content }));
+  // }, [content]);
+
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {
@@ -178,14 +179,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 => {
@@ -222,7 +218,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         event,
         editor
       });
-    } else if (event.key === "Enter") {
+    } 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 === '';
       if (isEmpty) {
         event.preventDefault();
@@ -267,9 +263,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         className: "chatEditorRoot",
         renderElement: renderElement,
         renderLeaf: renderLeaf,
+        decorate: decorators,
         placeholder: "Start typing ...",
         spellCheck: true,
-        autoFocus: true,
         onBlur: handleBlur,
         onKeyDown: onKeyDown
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {

package/dist/Editor/CommonEditor.js

@@ -33,6 +33,7 @@ import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
 import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
+import FontLoader from "./common/FontLoader/FontLoader";
 import "./font.css";
 import "./Editor.css";
 import "animate.css";
@@ -552,6 +553,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText
+          }), /*#__PURE__*/_jsx(FontLoader, {
+            ...props
           })]
         }, id)
       })

package/dist/Editor/Editor.css

@@ -851,6 +851,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;
 }
@@ -900,7 +911,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/PopoverAIInput.js

@@ -22,10 +22,11 @@ const scrollToAIInput = editor => {
         selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
       }
       const wrapperTop = slateWrapper.getBoundingClientRect().top;
-      const cursorViewPortPosition = selectionRect.top - wrapperTop;
+      const cursorViewPortPosition = selectionRect.bottom - wrapperTop; // here the slatewrapper is the viewport, not the whole screen. We are finding the position of the cursor/selection relative to the slate wrapper, that why we are subracting the slate wrapper top with selection bottom
+
       if (cursorViewPortPosition > 80) {
         // scroll to top of the slateWrapper
-        slateWrapper.scrollBy(0, selectionRect.bottom - wrapperTop - 80);
+        slateWrapper.scrollBy(0, cursorViewPortPosition - 80);
       }
     }, 200);
   } catch (err) {

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

@@ -160,7 +160,7 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        backgroundColor: bgColor
+        background: bgColor
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {

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

@@ -1,4 +1,7 @@
 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";
 const AccordionSummary = props => {
   const {
@@ -9,18 +12,31 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius,
+    bannerSpacing
   } = element;
-  return /*#__PURE__*/_jsx("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
+    },
+    component: "div",
     children: children
   });
 };

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -18,7 +18,7 @@ import { Transforms } from "slate";
 //   return doc.body.innerHTML;
 // };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const getCode = (embedData, isEncoded) => {
   if (isEncoded) {
     return decodeString(embedData);
@@ -75,20 +75,22 @@ const Code = props => {
         allowedScriptDomains: allowedDomains // for old code's that are already inserted without sanitization
       });
 
-      const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
-      codeRef.current.innerHTML = ""; // Clear the container
-      codeRef.current.appendChild(slotHtml);
+      if (clean) {
+        const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
+        codeRef.current.innerHTML = ""; // Clear the container
+        codeRef.current.appendChild(slotHtml);
+      }
     }
-  }, []);
-  return /*#__PURE__*/_jsxs("div", {
+  }, [embedData]);
+  return /*#__PURE__*/_createElement("div", {
     className: "embed-code has-hover",
     contentEditable: false,
     ...attributes,
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: codeRef
-    }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
-      onDelete: onDelete
-    })]
-  });
+    key: element?.updatedOn
+  }, /*#__PURE__*/_jsx("div", {
+    ref: codeRef
+  }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
+    onDelete: onDelete
+  }));
 };
 export default Code;

package/dist/Editor/Elements/EmbedScript/EmbedScript.js

@@ -1,70 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
-import { insertEmbedScript } from "../../utils/embedScript";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import EmbedScriptPopup from "./EmbedScriptPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const EmbedScript = props => {
   const {
-    editor,
-    icoBtnType,
-    customProps
+    icoBtnType
   } = props;
   const [open, setOpen] = useState(false);
-  const [code, setCode] = useState("");
-  const [apiStatus, setApiStatus] = useState({
-    loading: false,
-    error: false
-  });
-  const [allowedDomains, setAllowedDomains] = useState([]);
-  const {
-    loading,
-    error
-  } = apiStatus;
-  useEffect(() => {
-    customProps.services("allowedDomains", {}).then(data => {
-      setAllowedDomains(data?.data || []);
-    }).catch(err => {
-      console.log(err);
-    });
-  }, []);
-  const updateApiStatus = update => {
-    setApiStatus(prev => ({
-      ...prev,
-      ...update
-    }));
-  };
-  const handleChange = e => {
-    setCode(e.target.value);
-  };
   const handleClick = () => {
     setOpen(true);
   };
-  const onSubmit = async () => {
-    updateApiStatus({
-      loading: true
-    });
-    const result = await customProps.services("validateCode", {
-      code
-    });
-    const {
-      error,
-      sanitizedCode
-    } = result?.data || {};
-    updateApiStatus({
-      loading: false,
-      error
-    });
-    if (!error) {
-      insertEmbedScript(editor, sanitizedCode || "");
-    }
-  };
-  const onCancel = () => {
-    setOpen(false);
-  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Code",
@@ -73,65 +21,9 @@ const EmbedScript = props => {
         icon: "embedScript"
       }),
       icoBtnType: icoBtnType
-    }), /*#__PURE__*/_jsxs(Dialog, {
-      open: open,
-      fullWidth: true,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: /*#__PURE__*/_jsxs(Box, {
-          component: "div",
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: "6px"
-          },
-          children: ["Embed Code", allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                textTransform: "none"
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                style: {
-                  fontWeight: "bold"
-                },
-                children: "Allowed Domains"
-              }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
-            }),
-            children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
-              color: "gray",
-              fontSize: "14px",
-              style: {
-                fill: "#94A3B8",
-                cursor: "pointer"
-              }
-            })
-          }) : null]
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
-        children: [/*#__PURE__*/_jsx("textarea", {
-          value: code,
-          onChange: handleChange,
-          style: {
-            minHeight: "200px",
-            width: "100%",
-            resize: "none",
-            padding: "4px",
-            boxSizing: "border-box"
-          }
-        }), /*#__PURE__*/_jsx(Box, {
-          component: "div",
-          color: "red",
-          children: error ? "There was some error on this code." : ""
-        })]
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onSubmit,
-          disabled: loading,
-          children: loading ? "Validating" : "Save"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: onCancel,
-          children: "Cancel"
-        })]
-      })]
+    }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
+      ...props,
+      open: open
     })]
   });
 };

package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
+import { insertEmbedScript, updateEmbedScript } from "../../utils/embedScript";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const EmbedScriptPopup = props => {
+  const {
+    open,
+    editor,
+    customProps,
+    onClose,
+    updatePath,
+    parentPath
+  } = props;
+  const [code, setCode] = useState("");
+  const [apiStatus, setApiStatus] = useState({
+    loading: false,
+    error: false
+  });
+  const [allowedDomains, setAllowedDomains] = useState([]);
+  const {
+    loading,
+    error
+  } = apiStatus;
+  useEffect(() => {
+    customProps.services("allowedDomains", {}).then(data => {
+      setAllowedDomains(data?.data || []);
+    }).catch(err => {
+      console.log(err);
+    });
+  }, []);
+  const updateApiStatus = update => {
+    setApiStatus(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
+  const handleChange = e => {
+    setCode(e.target.value);
+  };
+  const onSubmit = async () => {
+    updateApiStatus({
+      loading: true
+    });
+    const result = await customProps.services("validateCode", {
+      code
+    });
+    const {
+      error,
+      sanitizedCode
+    } = result?.data || {};
+    updateApiStatus({
+      loading: false,
+      error
+    });
+    if (!error) {
+      if (updatePath) {
+        updateEmbedScript(editor, sanitizedCode || "", updatePath, parentPath);
+      } else {
+        insertEmbedScript(editor, sanitizedCode || "");
+      }
+    }
+    onClose();
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: /*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px"
+          },
+          children: ["Embed Code", allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
+            title: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                textTransform: "none"
+              },
+              children: [/*#__PURE__*/_jsx("span", {
+                style: {
+                  fontWeight: "bold"
+                },
+                children: "Allowed Domains"
+              }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
+            }),
+            children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+              color: "gray",
+              fontSize: "14px",
+              style: {
+                fill: "#94A3B8",
+                cursor: "pointer"
+              }
+            })
+          }) : null]
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsx("textarea", {
+          value: code,
+          onChange: handleChange,
+          style: {
+            minHeight: "200px",
+            width: "100%",
+            resize: "none",
+            padding: "4px",
+            boxSizing: "border-box"
+          }
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          color: "red",
+          children: error ? "There was some error on this code." : ""
+        })]
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: onSubmit,
+          disabled: loading,
+          children: loading ? "Validating" : "Save"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: onClose,
+          children: "Cancel"
+        })]
+      })]
+    })
+  });
+};
+export default EmbedScriptPopup;

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

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

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -18,7 +18,9 @@ import { onPasteRnDNode } from "../../helper";
 import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
 import { appHeaderNode } from "../../utils/insertAppHeader";
 import { FORM_NODE } from "../../utils/form";
+import { DEFAULT_TABLE_NODE } from "../../utils/table";
 import itemOptions from "./Options/sectionItemOptions";
+import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_DEVICE_WIDTH = {
@@ -40,7 +42,8 @@ const FreeGrid = props => {
     customProps
   } = props;
   const {
-    sectionName
+    sectionName,
+    sectionBorderRadius
   } = element;
   const {
     readOnly,
@@ -158,7 +161,7 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 80
+          height: 30
         }], {
           at: [...insertAt]
         });
@@ -189,14 +192,16 @@ const FreeGrid = props => {
               top: 12,
               right: 12,
               bottom: 12
-            }
+            },
+            textAlign: "center",
+            label: "Get Started"
           }],
           gridArea: "3 / 1 / 4 / 2",
           left: 50,
           marginTop: 0,
           top: 0,
-          width: 170,
-          height: 80
+          width: 143,
+          height: 50
         }], {
           at: [...insertAt]
         });
@@ -237,6 +242,41 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addTable":
+        Transforms.insertNodes(editor, [{
+          ...insertFreeGridItem("table", {
+            ...DEFAULT_TABLE_NODE()
+          }, {
+            height: 130,
+            width: 400
+          })
+        }], {
+          at: [...insertAt]
+        });
+        break;
+      case "addCode":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "embedScript",
+          children: [{
+            type: "embedScript",
+            embedData: "",
+            children: [{
+              text: " "
+            }],
+            isEncoded: true,
+            isSanitized: true
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 400,
+          height: 300
+        }], {
+          at: [...insertAt]
+        });
+        break;
       case "addBox":
         Transforms.insertNodes(editor, [{
           ...insertFreeGridItem("box", {
@@ -254,7 +294,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("form", {
             ...FORM_NODE()
           }, {
-            height: 100,
+            height: 92,
             width: 400
           })
         }], {
@@ -341,6 +381,11 @@ const FreeGrid = props => {
     }
   };
   const repeatTimes = Math.floor(height / ROW_HEIGHT);
+  const freegridSX = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+    }
+  }, theme);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-section breakpoint-${breakpoint}`,
@@ -417,7 +462,10 @@ const FreeGrid = props => {
       id: sectionName,
       "data-event": "rnd-click",
       className: "freegrid-container freegrid-container-parent",
-      sx: classes.root,
+      sx: {
+        ...classes.root,
+        ...freegridSX
+      },
       "data-path": path.join("|"),
       style: {
         "--cols": `100%`,