@flozy/editor 5.4.6 → 5.4.7

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 || "#F6F6F6",
+              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,20 @@ const SimpleSelect = props => {
     IconComponent: KeyboardArrowDownRoundedIcon,
     fullWidth: true,
     size: "small",
+    sx: {
+      color: appTheme?.palette?.editor?.tv_text,
+      fontSize: '14px',
+      marginTop: '4px',
+      padding: '3px 0px',
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
+        boxShadow: '0px 4px 18px 0px #0000000D'
+      },
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
+        boxShadow: '0px 4px 18px 0px #0000000D'
+      }
+    },
     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/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",

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

@@ -63,6 +63,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
               })

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,

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/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/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.7",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"