@flozy/editor 3.7.6 → 3.7.8

package/dist/Editor/ChatEditor.js

@@ -37,6 +37,7 @@ 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
@@ -47,32 +48,60 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     emojiClick: emoji => {
       if (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);
       }
     },
-    // Focus enable
-    enableFocus: () => {
-      if (editor) {
-        ReactEditor.focus(editor);
-      }
+    setContent: newContent => {
+      setIsExternalUpdate(true);
+      setValue(newContent);
+      ReactEditor.focus(editor);
     },
-    clearAll() {
+    // 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: () => {
       if (!editor) return;
-      editor.children = [{
+      while (editor.children.length > 0) {
+        Transforms.removeNodes(editor, {
+          at: [0]
+        });
+      }
+      Transforms.insertNodes(editor, {
         type: 'paragraph',
         children: [{
           text: ''
         }]
-      }];
-      Transforms.select(editor, {
-        path: [0, 0],
-        offset: 0
       });
       ReactEditor.focus(editor);
-      setValue(editor.children);
     }
   }));
   useEffect(() => {
+    setIsExternalUpdate(true);
     setValue(draftToSlate({
       data: content
     }));
@@ -139,9 +168,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    setValue(newValue);
-    if (!isInteracted) {
-      setIsInteracted(true);
+    if (isExternalUpdate) {
+      setIsExternalUpdate(false);
+      return;
+    } else {
+      setValue(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
+      }
     }
   };
   const Element = props => {
@@ -178,15 +212,23 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         event,
         editor
       });
-    } else if (event.key === "Enter" && !event.shiftKey) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(value);
-      onsubmit(false, {
-        strVal,
-        restVal
-      });
+    } else if (event.key === "Enter") {
+      const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
+      if (isEmpty) {
+        event.preventDefault();
+        return;
+      }
+      if (!event.shiftKey) {
+        const {
+          value: strVal,
+          ...restVal
+        } = getOnSaveData(value);
+        onsubmit(false, {
+          strVal,
+          restVal
+        });
+        event.preventDefault();
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const handleClose = () => {};

package/dist/Editor/Elements/Button/EditorButton.js

@@ -220,13 +220,15 @@ const EditorButton = props => {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
-            }
+            },
+            props: customProps
           }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
             iconName: buttonIcon,
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
-            }
+            },
+            props: customProps
           })]
         }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
           className: "workflow-icon-btn",

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -89,7 +89,8 @@ const ChipText = props => {
         display: "inline-block",
         verticalAlign: "middle"
       },
-      onClick: handleStyle
+      onClick: handleStyle,
+      props: customProps
     }), /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       style: {

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -119,6 +119,7 @@ const ImageFrame = props => {
         zIndex: 100
       },
       placement: "top",
+      disablePortal: true,
       children: /*#__PURE__*/_jsxs(Box, {
         sx: classes?.sliderContainer,
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {

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

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-const iconLoader = async iconName => {
+const iconLoader = async (iconName, ...props) => {
   try {
-    const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
+    const [{
+      props: {
+        ICON_API
+      }
+    }] = props;
+    const iconResponse = await fetch(`${ICON_API}/icon/${iconName}`);
     const icon = await iconResponse.text();
     return icon;
   } catch (error) {
@@ -19,7 +24,7 @@ const DynamicIcon = ({
   const [icon, setIcon] = useState("");
   useEffect(() => {
     let mounted = true;
-    iconLoader(iconName).then(iconHTML => {
+    iconLoader(iconName, props).then(iconHTML => {
       if (mounted) {
         setIcon(iconHTML);
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -9,7 +9,8 @@ const Icons = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    customProps
   } = props;
   const {
     key
@@ -74,7 +75,8 @@ const Icons = props => {
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onRemoveIcon,
               children: /*#__PURE__*/_jsx(MUIIcon, {
-                iconName: value
+                iconName: value,
+                props: customProps
               })
             })
           }) : ""
@@ -96,7 +98,8 @@ const Icons = props => {
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
             children: /*#__PURE__*/_jsx(MUIIcon, {
-              iconName: m
+              iconName: m,
+              props: customProps
             })
           })
         }, `mui_ico_${m}`);

package/package.json

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