@flozy/editor 3.9.5 → 3.9.7

package/dist/Editor/ChatEditor.js

@@ -54,22 +54,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       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);
       }
     },
@@ -126,12 +110,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-
-  // 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 {
@@ -194,9 +178,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 => {

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

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

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

@@ -1,7 +1,4 @@
 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 {
@@ -12,31 +9,18 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
-  const textStyles = getTextColor(textColor);
-  const borderStyle = getBorderColor(borderColor);
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
       width: "100%",
       position: "relative",
-      background: bgColor,
-      ...borderStyle
+      backgroundColor: bgColor,
+      border: `1px solid ${borderColor}`,
+      color: textColor
     },
-    sx: {
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      },
-      '& span[data-slate-string="true"]': textStyles
-    },
-    component: "div",
     children: children
   });
 };

package/dist/Editor/Elements/List/CheckList.js

@@ -68,8 +68,7 @@ const CheckList = ({
         style: {
           flex: 1,
           opacity: checked ? 1 : 1,
-          textDecoration: !checked ? "none" : "none",
-          width: '90%'
+          textDecoration: !checked ? "none" : "none"
         },
         className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: nestedCheckList ? "" : "Todo List",

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
 import { headingMap, sizeMap } from "../../utils/font.js";
@@ -18,6 +18,11 @@ const TextSize = ({
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
   const value = getBreakPointsValue(val, size?.device);
+  const [fontSize, setFontSize] = useState();
+  const timerRef = useRef();
+  useEffect(() => {
+    setFontSize(getSizeVal());
+  }, [value]);
   const updateMarkData = newVal => {
     let upData = {
       ...getBreakPointsValue(val),
@@ -39,10 +44,14 @@ const TextSize = ({
       }
     });
   };
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc || 8);
+  const onChangeSize = value => {
+    if (value) {
+      let inc = parseInt(value);
+      inc = inc > 200 ? 200 : inc;
+      updateMarkData(inc);
+    } else {
+      setFontSize(null);
+    }
   };
   const getSizeVal = () => {
     try {
@@ -67,11 +76,19 @@ const TextSize = ({
     const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
     updateMarkData(newVal);
   };
+  const onChange = e => {
+    clearTimeout(timerRef.current);
+    const value = e.target.value;
+    setFontSize(value);
+    timerRef.current = setTimeout(() => {
+      onChangeSize(value);
+    }, 500);
+  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {
       sx: classes?.textSize,
-      value: combinedOldVal,
-      onChange: onChangeSize,
+      value: fontSize,
+      onChange: onChange,
       size: "small",
       inputProps: {
         style: {

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate, useFocused } from "slate-react";
+import { useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -23,7 +23,6 @@ const PopupTool = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
-  const inFocus = useFocused();
   const {
     selection
   } = editor;
@@ -47,7 +46,7 @@ const PopupTool = props => {
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       updateAnchorEl();

package/dist/Editor/common/ColorPickerButton.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,8 +11,7 @@ const ColorPickerButton = props => {
     onSave,
     defaultColors = [],
     classes = {},
-    recentColors = [],
-    hideGradient
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -30,13 +29,6 @@ const ColorPickerButton = props => {
   const handleColorChange = color => {
     setColor(color);
   };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -69,10 +61,10 @@ const ColorPickerButton = props => {
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
+              gradient: true,
               value: color,
               onChange: handleColorChange,
-              defaultColors: initialColors
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -5,8 +5,7 @@ const accordionTitleBtnStyle = [{
     label: "Accordion Color",
     key: "accordionTextColor",
     type: "color",
-    needPreview: true,
-    hideGradient: true
+    needPreview: true
   }, {
     label: "Accordion Background Color",
     key: "accordionBgColor",

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/common/StyleBuilder/fieldTypes/color.js

@@ -12,12 +12,11 @@ const Color = props => {
   } = props;
   const {
     key,
-    label,
-    hideGradient
+    label
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
+    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -40,7 +39,7 @@ const Color = props => {
       [key]: updatedColors
     };
     setRecentColors(updatedColors);
-    localStorage.setItem("recentColors", JSON.stringify(updatedColors));
+    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -69,8 +68,7 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key],
-            hideGradient: hideGradient
+            recentColors: recentColors[key]
           })
         })
       }

package/dist/Editor/helper/index.js

@@ -154,26 +154,4 @@ export const debounce = function (func, wait, immediate) {
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
-};
-export const getTextColor = (color = "") => {
-  return color?.indexOf("gradient") >= 0 ? {
-    background: color?.concat("text"),
-    WebkitBackgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    color: "transparent",
-    caretColor: "black"
-  } : {
-    color
-  };
-};
-export const getBorderColor = (borderColor = "") => {
-  const borderStyle = borderColor ? {
-    border: "1px solid"
-  } : {};
-  if (borderColor?.indexOf("gradient") >= 0) {
-    borderStyle.borderImage = `${borderColor} 1`;
-  } else {
-    borderStyle.borderColor = borderColor;
-  }
-  return borderStyle;
 };

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

@@ -32,7 +32,7 @@ import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
-import { getTextColor, isEmptyTextNode } from "../helper";
+import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -203,7 +203,13 @@ export const getMarked = (leaf, children) => {
   // cover under single span
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = fontFamilyMap[leaf?.fontFamily];
-    const textStyles = getTextColor(leaf?.color);
+    const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
+      background: leaf?.color?.concat("text"),
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    } : {
+      color: leaf.color
+    };
     children = /*#__PURE__*/_jsx("span", {
       style: {
         background: leaf.bgColor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.9.5",
+  "version": "3.9.7",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -64,7 +64,7 @@
     "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [