@flozy/editor 3.8.0 → 3.8.2

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

package/dist/Editor/Editor.css

@@ -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/AccordionSummary.js

@@ -5,8 +5,6 @@ import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorSelection } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
-import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -27,9 +25,7 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
   const ToolBar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
@@ -66,23 +62,16 @@ const AccordionSummary = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsxs("div", {
     className: `accordion-summary-container`,
     ...attributes,
-    sx: {
+    style: {
       width: "100%",
       position: "relative",
       backgroundColor: bgColor,
       border: `1px solid ${borderColor}`,
-      color: textColor,
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      }
+      color: textColor
     },
-    component: "div",
     children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
       element: element,
       onSave: onSave,

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

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

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

@@ -39,7 +39,12 @@ const MentionsListCard = props => {
       },
       alt: name,
       children: /*#__PURE__*/_jsx(Avatar, {
-        src: avatar_filename
+        sx: {
+          background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
+        },
+        alt: name,
+        src: avatar_filename,
+        children: !avatar_filename && name && name.charAt(0).toUpperCase()
       })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -78,12 +78,10 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
-        className: "sliderInput removeScroll",
+        value: !lockSpacing ? "" : value?.top || 0,
+        className: "sliderInput",
         disabled: !lockSpacing,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,54 +123,50 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "top",
-                value: getCustomizationValue(value?.top),
-                className: "borderInput removeScroll",
+                value: value?.top,
+                className: "borderInput",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "right",
-                value: getCustomizationValue(value?.right),
-                className: "borderInput removeScroll",
+                value: value?.right,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "bottom",
-                value: getCustomizationValue(value?.bottom),
-                className: "borderInput removeScroll",
+                value: value?.bottom,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "left",
-                className: "borderInput removeScroll",
-                value: getCustomizationValue(value?.left),
+                className: "borderInput",
+                value: value?.left,
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             })]
           })

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,13 +80,11 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
-        className: "sliderInput removeScroll",
+        value: !lockRadius ? "" : value?.topLeft || 0,
+        className: "sliderInput",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -127,10 +125,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topLeft",
-            value: getCustomizationValue(value?.topLeft),
-            className: "borderInput removeScroll",
+            value: value?.topLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -138,10 +136,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topRight",
-            value: getCustomizationValue(value?.topRight),
-            className: "borderInput removeScroll",
+            value: value?.topRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -150,10 +148,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomLeft",
-            value: getCustomizationValue(value?.bottomLeft),
-            className: "borderInput removeScroll",
+            value: value?.bottomLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -162,10 +160,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomRight",
-            value: getCustomizationValue(value?.bottomRight),
-            className: "borderInput removeScroll",
+            value: value?.bottomRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

package/dist/Editor/helper/theme.js

@@ -97,5 +97,4 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
   } catch (err) {
     console.log(err);
   }
-};
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+};

package/dist/Editor/utils/draftToSlate.js

@@ -100,7 +100,7 @@ export const draftToSlate = props => {
       return a;
     }, []);
     return converted;
-  } else if (data?.length) {
+  } else if (data?.length > 0) {
     return data;
   } else {
     return [{

package/dist/Editor/utils/helper.js

@@ -216,6 +216,17 @@ const getScrollElement = () => {
   const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
   return scrollFrom;
 };
+const handleLinkBtnClick = (e, props) => {
+  if (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  if (props.target) {
+    window.open(props.href);
+  } else {
+    window.location.href = props.href;
+  }
+};
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
   const props = {};
   if (!readOnly) {
@@ -306,23 +317,22 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
 
   // for iphone fix
   if (props.component === "a" && props.href) {
-    if (getDevice(window.innerWidth) === "xs") {
+    const isMobile = getDevice(window.innerWidth) === "xs";
+    if (isMobile) {
       props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
     }
 
+    let touchEndClicked = false;
     props.onTouchEnd = e => {
-      if (e) {
-        // onTouchEnd will get triggered on web, only for image element, for that case event is getting undefined.
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      if (props.target) {
-        window.open(props.href);
-      } else {
-        window.location.href = props.href;
-      }
+      touchEndClicked = true;
+      handleLinkBtnClick(e, props);
     };
-    props.onClick = () => {
+    props.onClick = e => {
+      // This condition is used for mobile preview in the page editor.
+      // 'touchEnd' will not work in the mobile page preview.
+      if (!touchEndClicked && isMobile) {
+        handleLinkBtnClick(e, props);
+      }
       return false;
     };
   }

package/package.json

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