@flozy/editor 5.4.6 → 5.4.8

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, Checkbox, Popper, useTheme } from "@mui/material";
-import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone";
 import DataTypes from "./DataTypes";
 import useColumnStyles from "./colStyles";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ColumnView = props => {
@@ -70,7 +70,12 @@ const ColumnView = props => {
           mr: 0
         },
         checked: selected,
-        checkedIcon: /*#__PURE__*/_jsx(CheckBoxTwoToneIcon, {})
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "uncheckedIcon"
+        }),
+        checkedIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: "checkedIcon"
+        })
       })
     }, popperRefresh) : null]
   });

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -4,6 +4,7 @@ import Autocomplete from "@mui/material/Autocomplete";
 import { Avatar, Box, Chip, useTheme } from "@mui/material";
 import { useEditorContext } from "../../../../../hooks/useMouseMove";
 import useCompStyles from "./styles";
+import { CloseIcon } from "../../../../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AvatarIcon = props => {
   const {
@@ -102,6 +103,14 @@ export default function Select(props) {
     renderTags: (value, getTagProps) => {
       return /*#__PURE__*/_jsx(Box, {
         className: "tv-ms-tag-wrpr",
+        sx: {
+          '& svg': {
+            marginRight: '5px',
+            '& path': {
+              stroke: "#000"
+            }
+          }
+        },
         children: value?.map((option, index) => {
           const {
             key,
@@ -114,13 +123,17 @@ export default function Select(props) {
             label: option?.label || option?.value,
             ...tagProps,
             sx: {
-              background: option?.color || "#CCC",
-              border: "none"
+              background: option?.color || appTheme?.palette?.editor?.tv_border1,
+              border: "none",
+              '& .MuiChip-label': {
+                paddingLeft: '12px !important'
+              }
             },
             avatar: /*#__PURE__*/_jsx(AvatarIcon, {
               option: option,
               avatar: optionAvatar
-            })
+            }),
+            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
           }, key) : null;
         })
       });
@@ -135,12 +148,16 @@ export default function Select(props) {
         children: /*#__PURE__*/_jsx(Chip, {
           label: option.label || option.value || "",
           sx: {
-            background: option.color || "#CCC"
+            background: option.color || appTheme?.palette?.editor?.tv_border1,
+            '& .MuiChip-label': {
+              paddingLeft: '12px !important'
+            }
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
             avatar: optionAvatar
-          })
+          }),
+          deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
         })
       }, key);
     },

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js

@@ -23,6 +23,27 @@ const SimpleSelect = props => {
     IconComponent: KeyboardArrowDownRoundedIcon,
     fullWidth: true,
     size: "small",
+    sx: {
+      color: appTheme?.palette?.editor?.tv_text,
+      fontSize: '14px !important',
+      marginTop: '4px !important',
+      padding: '3px 0px !important',
+      background: 'transparent !important',
+      '& .MuiOutlinedInput-root': {
+        height: '34px !important',
+        background: 'transparent !important'
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
+      },
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
+      }
+    },
     MenuProps: {
       PaperProps: {
         sx: classes.simpleselect,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js

@@ -2,7 +2,8 @@ const useCompStyles = (theme, appTheme) => ({
   simpleselect: {
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     background: appTheme?.palette?.editor?.tv_pop_bg,
-    color: appTheme?.palette?.editor?.tv_text_primary,
+    color: appTheme?.palette?.editor?.tv_text,
+    fontSize: '14px',
     borderRadius: "8px",
     [theme?.breakpoints?.between("xs", "md")]: {},
     "& ul": {

package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js

@@ -55,6 +55,13 @@ const FilterSort = props => {
           className: "tv-act-ico bg br1",
           size: "small",
           onClick: onClose,
+          sx: {
+            '& svg': {
+              '& path': {
+                strokeWidth: 0
+              }
+            }
+          },
           children: /*#__PURE__*/_jsx(CloseIcon, {})
         })]
       }), renderMode()]

package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js

@@ -5,7 +5,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
-      borderRadius: "20px",
+      borderRadius: "20px !important",
       fontFamily: 'Inter !important',
       [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
@@ -87,6 +87,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
           color: appTheme?.palette?.editor?.tv_text_primary,
           // background: appTheme?.palette?.editor?.tv_input_bg,
           borderRadius: "8px",
+          maxHeight: '34px !important',
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text_primary
           }
@@ -98,11 +99,15 @@ const useFilterSortStyles = (theme, appTheme) => ({
     padding: '13px 16px 16px 20px',
     "& .tv-opt-list": {
       minWidth: "230px",
+      '& .bgic': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        padding: '2px',
+        borderRadius: '4px'
+      },
       '& .MuiListItemIcon-root': {
         '& svg': {
-          background: appTheme?.palette?.editor?.tv_ico_bg,
-          padding: '6px',
-          borderRadius: '4px',
+          width: '14px',
+          height: '14px',
           '& path': {
             stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
           }

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import FilterSort from "./FilterSort";
-import DeleteIcon from "@mui/icons-material/Delete";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";

package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js

@@ -4,7 +4,7 @@ import { colors } from "../../../Color Picker/defaultColors";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
+const DEFAULT_COLORS = colors?.filter(f => !(f.includes("linear") || f === "#000000"));
 const AddOptions = props => {
   const {
     edit,
@@ -59,7 +59,7 @@ const AddOptions = props => {
     setError("");
   };
   return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
-    className: "fe-tv-addopt st sb mb-0",
+    className: "fe-tv-addopt sb mb-0",
     children: [/*#__PURE__*/_jsx(List, {
       className: "fe-dv-opt-list pl-0",
       children: /*#__PURE__*/_jsxs(ListItemButton, {

package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js

@@ -21,6 +21,13 @@ const AddProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js

@@ -1,9 +1,7 @@
 import React from "react";
-import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import AddIcon from "@mui/icons-material/Add";
-import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
+import { PROPERTY_TYPES, TYPE_ICONS } from "./Constants";
 import { useDataView } from "../../Providers/DataViewProvider";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,6 +44,13 @@ const AllProperties = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {
@@ -63,6 +68,12 @@ const AllProperties = props => {
             onClick: onEditProperty(m),
             children: [/*#__PURE__*/_jsx(ListItemIcon, {
               className: "needBg",
+              sx: {
+                '& svg': {
+                  width: '14px !important',
+                  height: '14px !important'
+                }
+              },
               children: /*#__PURE__*/_jsx(Icon, {
                 icon: iconType
               })
@@ -72,7 +83,9 @@ const AllProperties = props => {
               sx: {
                 justifyContent: "end"
               },
-              children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: 'rightArrow'
+              })
             })]
           }, i);
         })
@@ -85,23 +98,42 @@ const AllProperties = props => {
           children: hiddenProperties?.map((m, i) => {
             return /*#__PURE__*/_jsxs(ListItemButton, {
               onClick: onEditProperty(m),
-              children: [/*#__PURE__*/_jsx(ListItemText, {
+              children: [/*#__PURE__*/_jsx(ListItemIcon, {
+                className: "needBg",
+                sx: {
+                  alignItems: "center",
+                  '& svg': {
+                    width: '14px !important',
+                    height: '14px !important'
+                  }
+                },
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: TYPE_ICONS[m?.type]
+                })
+              }), /*#__PURE__*/_jsx(ListItemText, {
                 children: m?.label
-              }), /*#__PURE__*/_jsxs(ListItemIcon, {
+              }), /*#__PURE__*/_jsx(ListItemIcon, {
                 sx: {
-                  alignItems: "center"
+                  alignItems: "center",
+                  justifyContent: 'flex-end'
                 },
-                children: [TYPE_LABELS[m?.type], /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: 'rightArrow'
+                })
               })]
             }, i);
           })
         })]
-      }) : null, /*#__PURE__*/_jsx(List, {
+      }) : null, /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
+      }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAdd,
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(AddIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'plusIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Add New Property"
           })]

package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js

@@ -34,6 +34,16 @@ const ChangeProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
           children: /*#__PURE__*/_jsx(Icon, {
             icon: 'leftArrow'
           })
@@ -42,6 +52,13 @@ const ChangeProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js

@@ -24,8 +24,26 @@ const ColumnsList = props => {
           className: selected?.type === m?.type ? "active" : "",
           onClick: onSelect(m),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: iconType
+            sx: {
+              background: 'none'
+            },
+            children: /*#__PURE__*/_jsx(Box, {
+              className: "bgic",
+              sx: {
+                marginRight: '5px',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px',
+                  padding: '0px !important'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: iconType
+              })
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: m?.label

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -108,8 +108,15 @@ const EditOption = props => {
           })
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
-        className: "tv-act-ico bg",
+        className: "tv-act-ico bg br1",
         size: "small",
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         onClick: onClose,
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel, Divider } from "@mui/material";
 import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
 import AddOptions from "./AddOptions";
 import FilterProperty from "./FilterProperty";
 import Icon from "../../../../common/Icon";
+import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditProperty = props => {
@@ -108,12 +107,31 @@ const EditProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Edit Property"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsxs(Box, {
@@ -136,6 +154,9 @@ const EditProperty = props => {
       }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
+          sx: {
+            paddingBottom: '12px'
+          },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
@@ -168,6 +189,8 @@ const EditProperty = props => {
             })]
           })]
         })
+      }), /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
       }), /*#__PURE__*/_jsx(AddOptions, {
         edit: edit,
         onUpdate: onUpdate,

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -3,7 +3,7 @@ const useOptionsStyles = (theme, appTheme) => ({
     "& .MuiPaper-root": {
       boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-      borderRadius: "20px",
+      borderRadius: "20px !important",
       background: appTheme?.palette?.editor?.tv_pop_bg,
       fontFamily: 'Inter !important',
       color: appTheme?.palette?.editor?.tv_text_primary,
@@ -68,7 +68,7 @@ const useOptionsStyles = (theme, appTheme) => ({
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
-              width: "16px",
+              // width: "16px",
               '& path': {
                 stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
               }
@@ -154,6 +154,9 @@ const useOptionsStyles = (theme, appTheme) => ({
   addProperty: {
     padding: "12px",
     width: "253px",
+    "& .divider_sty": {
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
     "& .fe-dv-ap-title": {
       display: "flex",
       fontWeight: "600",

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -57,11 +57,11 @@ const useTableStyles = (theme, appTheme) => ({
         }
       },
       "&:hover": {
-        color: "rgba(37, 99, 235, 1)",
+        color: appTheme?.palette?.editor?.tv_hover_text,
         "& svg": {
-          color: "rgba(37, 99, 235, 1)",
+          color: appTheme?.palette?.editor?.tv_hover_text,
           '& path': {
-            stroke: "rgba(37, 99, 235, 1)"
+            stroke: appTheme?.palette?.editor?.tv_hover_text
           }
         }
       }

package/dist/Editor/Elements/DataView/Layouts/TableView.js

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
 import { PROPERTY_TYPES } from "./Options/Constants";
@@ -16,14 +14,28 @@ const SortIcon = props => {
   const {
     sortBy
   } = props;
-  return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(KeyboardArrowUpIcon, {
+  return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(Box, {
     sx: {
-      color: "rgba(37, 99, 235, 1)"
-    }
-  }) : /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervUp'
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
     sx: {
-      color: "rgba(37, 99, 235, 1)"
-    }
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervDown'
+    })
   }) : null;
 };
 const TableView = props => {

package/dist/Editor/Elements/DataView/styles.js

@@ -47,11 +47,19 @@ const useDataViewStyles = (theme, appTheme) => ({
         },
         "& .tv-ck-box": {
           "& svg": {
-            color: appTheme?.palette?.editor?.tv_border
+            color: appTheme?.palette?.editor?.tv_border,
+            '& rect': {
+              fill: appTheme?.palette?.editor?.tv_chk_box_fill,
+              stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
+            }
           },
           "&.Mui-checked": {
             "& svg": {
-              color: "rgba(37, 99, 235, 1)"
+              color: "rgba(37, 99, 235, 1)",
+              '& rect': {
+                fill: appTheme?.palette?.editor?.activeColor,
+                stroke: 'none'
+              }
             }
           }
         }

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

@@ -939,7 +939,7 @@ const usePopupStyle = theme => ({
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
       borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"

package/dist/Editor/assets/svg/ChervDown.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChervDown = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 9 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M1 1.2002L4.5 4.49731L8 1.2002",
+      stroke: "#2563EB",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+export default ChervDown;

package/dist/Editor/assets/svg/ChervUp.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChervUp = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 9 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M8 4.80371L4.5 1.50659L1 4.80371",
+      stroke: "#94A3B8",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+export default ChervUp;

package/dist/Editor/assets/svg/PlusIcon.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PlusIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "18",
-    height: "18",
+    width: "22",
+    height: "22",
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",

package/dist/Editor/common/Icon.js

@@ -40,6 +40,8 @@ import DuplicateIcon from "../assets/svg/DuplicateIcon";
 import EyeIcon from "../assets/svg/EyeIcon";
 import TrashIcon from "../assets/svg/TrashCanIcon";
 import DataTableIcon from "../assets/svg/DataTableIcon";
+import ChervDown from "../assets/svg/ChervDown";
+import ChervUp from "../assets/svg/ChervUp";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -308,7 +310,9 @@ const iconList = {
   arrowDown: /*#__PURE__*/_jsx(ArrowDownIcon, {}),
   duplicateIcon: /*#__PURE__*/_jsx(DuplicateIcon, {}),
   trashIcon: /*#__PURE__*/_jsx(TrashIcon, {}),
-  dataTable: /*#__PURE__*/_jsx(DataTableIcon, {})
+  dataTable: /*#__PURE__*/_jsx(DataTableIcon, {}),
+  chervUp: /*#__PURE__*/_jsx(ChervUp, {}),
+  chervDown: /*#__PURE__*/_jsx(ChervDown, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/iconslist.js

@@ -1581,10 +1581,10 @@ export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
       id: "Gradient1",
       children: [/*#__PURE__*/_jsx("stop", {
         offset: "0%",
-        stopColor: "#5351FC"
+        stopColor: "#8361FD"
       }), /*#__PURE__*/_jsx("stop", {
         offset: "50%",
-        stopColor: "#19A9FC"
+        stopColor: "#2F63ED"
       })]
     })
   }), /*#__PURE__*/_jsx("rect", {

package/dist/Editor/helper/deserialize/index.js

@@ -160,10 +160,11 @@ const TEXT_TAGS = {
 
 const deserialize = el => {
   if (el.nodeType === 3) {
+    // if there is any line-breaks
     const match = /\r|\n/.exec(el.textContent);
     const text = el.textContent.replace(/\r|\n/g, "").trim();
     return match && !text ? null : {
-      text: el.textContent,
+      text,
       ...getInlineTextStyles(el.parentNode)
     };
   } else if (el.nodeType !== 1) {

package/dist/Editor/plugins/withHTML.js

@@ -4,6 +4,43 @@ import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
 const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
 const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
+const parseCopiedHTML = html => {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+
+  // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
+    // Find the parent li
+    const parentLi = list.parentElement;
+
+    // Move the list after the parent li
+    parentLi.after(list);
+  });
+
+  // to handle google docs list
+  parsed.querySelectorAll("li p, li div").forEach(element => {
+    const parent = element.parentNode;
+    // Move all child nodes of <p> or <div> to its parent <li>
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+    // Remove the <p> or <div> element
+    parent.removeChild(element);
+  });
+
+  // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
+  parsed.querySelectorAll("li").forEach(li => {
+    // Check if the parent of <li> is not a <ul> or <ol>
+    if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
+      // Create a <ul> element
+      const ul = document.createElement("ul");
+      // Append the <li> to the <ul>
+      ul.appendChild(li.cloneNode(true)); // Clone the <li>
+      // Replace the original <li> in the DOM with the <ul>
+      li.replaceWith(ul);
+    }
+  });
+  return parsed;
+};
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -193,18 +230,8 @@ const withHtml = editor => {
         insertData(data);
       }
     } else if (html) {
-      const parsed = new DOMParser().parseFromString(html, "text/html");
-
-      // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
-      parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
-        // Find the parent li
-        const parentLi = list.parentElement;
-
-        // Move the list after the parent li
-        parentLi.after(list);
-      });
+      const parsed = parseCopiedHTML(html);
       const rootElement = parsed.body;
-      console.log("rootElement", rootElement);
       const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {

package/package.json

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