@flozy/editor 3.9.0 → 3.9.3

package/dist/Editor/ChatEditor.js

@@ -54,6 +54,22 @@ 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);
       }
     },

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,5 @@
 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";
@@ -15,21 +16,25 @@ const AccordionSummary = props => {
     borderRadius,
     bannerSpacing
   } = element;
+  const textStyles = getTextColor(textColor);
+  const borderStyle = getBorderColor(borderColor);
   return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
-    sx: {
+    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/List/CheckList.js

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

package/dist/Editor/common/ColorPickerButton.js

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

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

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

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

@@ -12,11 +12,12 @@ const Color = props => {
   } = props;
   const {
     key,
-    label
+    label,
+    hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
+    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -39,7 +40,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,
@@ -68,7 +69,8 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key]
+            recentColors: recentColors[key],
+            hideGradient: hideGradient
           })
         })
       }

package/dist/Editor/helper/index.js

@@ -154,4 +154,26 @@ 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/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 { isEmptyTextNode } from "../helper";
+import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -203,13 +203,7 @@ 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 = leaf?.color?.indexOf("gradient") >= 0 ? {
-      background: leaf?.color?.concat("text"),
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent"
-    } : {
-      color: leaf.color
-    };
+    const textStyles = getTextColor(leaf?.color);
     children = /*#__PURE__*/_jsx("span", {
       style: {
         background: leaf.bgColor

package/package.json

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