@flozy/editor 9.6.7 → 9.6.9

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import ColorPickerTool from "react-gcolor-picker";
-import { IconButton, Tooltip, Box, Popover } from "@mui/material";
+import { IconButton, Tooltip, Box, Popover, useTheme } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import CustomColorPicker from "../../common/CustomColorPicker";
+import { getSelectedElementColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,7 +26,8 @@ const ColorPicker = props => {
     classes,
     forMiniTool,
     openColorTool,
-    closeColorTool
+    closeColorTool,
+    type
   } = props;
   const {
     theme
@@ -34,6 +36,7 @@ const ColorPicker = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const pickerStyles = ColorPickerStyles(theme);
+  const muiTheme = useTheme();
   const onOpen = e => {
     e.preventDefault();
     setAnchorEl(e.currentTarget);
@@ -58,7 +61,7 @@ const ColorPicker = props => {
     setAnchorEl(null);
     setSelection(null);
   };
-  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
+  const activeColor = type === "textColor" ? getSelectedElementColor(editor, format, muiTheme) : activeMark(editor, format) || DEFAULT_COLOR[format];
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
       title: title,
@@ -96,10 +99,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+      children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: true,
-        value: activeColor,
-        onChange: handleFormSubmit
+        onChange: handleFormSubmit,
+        color: activeColor
       })
     })]
   });

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -20,24 +20,26 @@ const ColorPickerStyles = theme => ({
       background: `${theme?.palette?.editor?.miniToolBarBackground}`,
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       borderRadius: "7px !important",
-      padding: "0px 5px",
-      '@media only screen and (max-width: 600px)': {
+      padding: "0px 10px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     }
   },
   colorButtonSingle: {
+    border: "1.5px solid #DCE4EC !important",
     "&.active": {
-      "&:before": {
-        content: '" "',
-        position: "absolute",
-        top: "-4px",
-        left: "-4px",
-        width: "calc(100% + 8px)",
-        height: "calc(100% + 8px)",
-        border: "2px solid #2563EB",
-        borderRadius: "50%"
-      }
+      // "&:before": {
+      //   content: '" "',
+      //   position: "absolute",
+      //   top: "-4px",
+      //   left: "-4px",
+      //   width: "calc(100% + 8px)",
+      //   height: "calc(100% + 8px)",
+      //   border: "2px solid #2563EB",
+      //   borderRadius: "50%",
+      // },
+      outline: "2px solid #2563EB"
     }
   },
   colorButtonsInner: {
@@ -59,7 +61,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "unset"
+      border: "1.5px solid #DCE4EC"
     }
   },
   colorPickerIcon: {

package/dist/Editor/Elements/Colorbox/ColorboxButton.js

@@ -9,8 +9,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const ColorboxButton = props => {
   const editor = useSlateStatic();
   const {
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const onClick = () => {
     toggleBlock(editor, "blockquote", false, {
       bgColor: "rgb(227, 236, 255)"
@@ -19,7 +23,7 @@ const ColorboxButton = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ToolbarIcon, {
-      title: "Colorbox",
+      title: translation("Colorbox"),
       onClick: onClick,
       icon: /*#__PURE__*/_jsx(Icon, {
         icon: "colorbox"

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

@@ -24,7 +24,8 @@ const DataView = props => {
   } = props;
   const {
     CHARACTERS,
-    readOnly
+    readOnly,
+    translation
   } = customProps || {};
   const {
     properties,
@@ -121,9 +122,11 @@ const DataView = props => {
         readOnly: readOnly,
         title: title,
         onTitleChange: onTitleChange,
-        path: path
+        path: path,
+        translation: translation
       }), /*#__PURE__*/_jsx(LayoutView, {
         readOnly: readOnly,
+        translation: translation,
         children: children
       })]
     })

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

@@ -6,13 +6,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const DataViewButton = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const onClick = () => {
     insertDataView(editor);
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "Dynamic Table",
+    title: translation("Dynamic Table"),
     onClick: onClick,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "dataTable"

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

@@ -14,7 +14,8 @@ const ColumnView = props => {
     property,
     onSelect,
     selected,
-    readOnly
+    readOnly,
+    translation
   } = props;
   const {
     type
@@ -60,7 +61,8 @@ const ColumnView = props => {
       readOnly: readOnly,
       settings: {
         wrapColumn: property?.wrapColumn
-      }
+      },
+      translation: translation
     }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
       sx: classes.root,
       open: open,

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

@@ -0,0 +1,425 @@
+import React, { useEffect, useState } from "react";
+import { Autocomplete, Box, Chip, Divider, Popover, TextField, Typography, List, ListItem, ListItemButton, IconButton, SwipeableDrawer, Tooltip } from "@mui/material";
+import { CloseIcon } from "../../../../../common/iconslist";
+import { useEditorContext } from "../../../../../hooks/useMouseMove";
+import Icon from "../../../../../common/Icon";
+import { colors } from "../../../../Color Picker/defaultColors";
+import PropertySettings from "../../Options";
+import SnackbarAlert from "../../../../../common/SnackBar";
+import ClearAllRounded from "../../../../../assets/svg/ClearAllRounded";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
+const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
+const generateRandomColor = () => {
+  const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
+  return DEFAULT_COLORS[randomIndex];
+};
+const MultiSelectWithPopover = props => {
+  const {
+    options = [],
+    value,
+    onChange,
+    onUpdate,
+    property,
+    wrapColumn = false,
+    translation
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorElOption, setAnchorElOption] = useState(null);
+  const [currentIndex, setCurrentIndex] = useState(null);
+  const [selectedOptions, setSelectedOptions] = useState(value);
+  const [availableOptions, setAvailableOptions] = useState(options);
+  const [showSnackBar, setShowSnackBar] = useState(false);
+  const [chipColor, setChipColor] = useState(generateRandomColor());
+  const [inputValue, setInputValue] = useState("");
+  const {
+    theme
+  } = useEditorContext();
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
+  const mode = {
+    type: "editOptionMulti",
+    edit: {
+      label: "Multi Select",
+      visible: true,
+      key: property,
+      type: "multi-select",
+      options: options || [],
+      optionIndex: currentIndex,
+      hideBackButton: true
+    }
+  };
+  const customScrollStyles = {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
+    "&::-webkit-scrollbar": {
+      width: "6px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: theme?.palette?.editor?.brainPopupScroll,
+      borderRadius: "3px"
+    },
+    "&::-webkit-scrollbar-track": {
+      display: "none"
+    }
+  };
+  useEffect(() => {
+    if (inputValue?.trim()) {
+      setChipColor(prevColor => prevColor || generateRandomColor());
+    } else {
+      setChipColor(generateRandomColor());
+    }
+  }, [inputValue]);
+  useEffect(() => {
+    setAvailableOptions(options);
+  }, [options]);
+  const handleOpenPopover = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClosePopover = () => {
+    setAnchorEl(null);
+  };
+  const handleAddOption = newValue => {
+    const trimmedValue = newValue?.trim();
+    if (!trimmedValue) return;
+    const newOption = {
+      value: trimmedValue,
+      color: chipColor
+    };
+    if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
+      setAvailableOptions(prev => [...prev, newOption]);
+      setSelectedOptions(prev => [...prev, newOption]);
+      onUpdate([newOption, ...availableOptions]);
+    }
+    setInputValue("");
+  };
+  const onClose = () => {
+    setAnchorEl(anchorElOption);
+    setAnchorElOption(null);
+  };
+  const onEditOption = (type, data) => {
+    const updateData = data?.edit ? data?.edit?.options : data?.options;
+    onUpdate(updateData);
+    if (data?.edit?.options) {
+      const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
+      setSelectedOptions(updatedSelectedOptions);
+      onClose();
+    }
+  };
+  const handleEditOption = (e, index) => {
+    e.stopPropagation();
+    setCurrentIndex(index);
+    setAnchorElOption(anchorEl);
+    setAnchorEl(null);
+  };
+  const handleSelectOption = option => {
+    if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
+      setSelectedOptions(prev => [...prev, option]);
+      onChange(selectedOptions);
+    } else {
+      setShowSnackBar(true);
+    }
+  };
+  const handleClearSelection = () => {
+    setSelectedOptions([]);
+  };
+  const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
+  const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
+  const open = Boolean(anchorEl);
+  const openEditOption = Boolean(anchorElOption);
+  const id = open ? "autocomplete-popover" : undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        flexWrap: wrapColumn ? "wrap" : "nowrap",
+        overflowX: wrapColumn ? "hidden" : "auto",
+        gap: 0.5,
+        padding: "8px",
+        cursor: "pointer"
+      },
+      onClick: handleOpenPopover,
+      children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
+        label: option?.value,
+        onDelete: event => {
+          event.stopPropagation();
+          setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
+        },
+        deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
+        variant: "filled",
+        sx: {
+          backgroundColor: option?.color,
+          color: '#0F172A',
+          "& .MuiChip-deleteIcon": {
+            flexShrink: 0,
+            "& path": {
+              stroke: '#0F172A'
+            }
+          },
+          "&:hover": {
+            opacity: 0.8
+          }
+        }
+      }, index))
+    }), /*#__PURE__*/_jsx(PopoverComponent, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      anchor: "bottom",
+      onClose: handleClosePopover,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: "20px",
+          background: theme?.palette?.editor?.textFormatBgColor,
+          border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+          boxShadow: "0px 4px 10px 0px #00000029"
+        }
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          width: isMobile ? "100%" : 300
+        },
+        children: [/*#__PURE__*/_jsx(Autocomplete, {
+          multiple: true,
+          freeSolo: true,
+          disablePortal: true,
+          PopperComponent: () => null,
+          sx: {
+            "& .MuiFormControl-root": {
+              maxHeight: "250px",
+              overflowY: "auto",
+              overflowX: "hidden",
+              pr: '12px',
+              pl: '12px',
+              maxWidth: isMobile ? "100%" : "275px",
+              marginTop: '12px',
+              ...customScrollStyles
+            }
+          },
+          disableClearable: true,
+          options: [],
+          getOptionLabel: option => options?.value || "",
+          value: selectedOptions,
+          onChange: (event, newValues) => {
+            const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
+              value,
+              color: chipColor
+            } : value);
+            const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
+            if (!isDuplicate) {
+              setSelectedOptions([...selectedOptions, ...addedOptions]);
+            }
+          },
+          inputValue: inputValue,
+          onInputChange: (event, newInputValue) => setInputValue(newInputValue),
+          onKeyDown: event => {
+            if (event.key === "Enter" && inputValue.trim()) {
+              event.preventDefault();
+              handleAddOption(inputValue);
+            }
+          },
+          filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
+          renderInput: params => /*#__PURE__*/_jsx(TextField, {
+            ...params,
+            variant: "standard",
+            InputProps: {
+              ...params.InputProps,
+              disableUnderline: true,
+              sx: {
+                display: "flex",
+                flexWrap: "wrap",
+                fontFamily: "Inter",
+                fontWeight: 400,
+                fontSize: "12px",
+                color: theme?.palette?.editor?.secondaryTextColor,
+                "&::placeholder": {
+                  color: theme?.palette?.editor?.secondaryTextColor
+                },
+                "& .MuiAutocomplete-input": {
+                  minWidth: "100px !important"
+                }
+              },
+              endAdornment: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Clear Selected",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: handleClearSelection,
+                  sx: {
+                    padding: 0,
+                    minWidth: "unset",
+                    "& .MuiSvgIcon-root": {
+                      fontSize: 20
+                    },
+                    '& rect': {
+                      fill: theme?.palette?.editor?.closeButtonSvgStroke
+                    },
+                    '&:hover': {
+                      backgroundColor: 'transparent'
+                    }
+                  },
+                  children: /*#__PURE__*/_jsx(ClearAllRounded, {})
+                })
+              })
+            },
+            sx: {
+              backgroundColor: "transparent",
+              fontFamily: 'Inter',
+              fontWeight: 400,
+              fontSize: '12px'
+            },
+            placeholder: "Create new one..."
+          }),
+          renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
+            variant: "filled",
+            label: option?.value,
+            ...getTagProps({
+              index
+            }),
+            onDelete: event => {
+              event.stopPropagation();
+              setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
+            },
+            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
+            sx: {
+              backgroundColor: option?.color,
+              color: '#0F172A',
+              "& .MuiChip-deleteIcon": {
+                flexShrink: 0,
+                "& path": {
+                  stroke: '#0F172A'
+                }
+              },
+              "&:hover": {
+                opacity: 0.8
+              }
+            }
+          }, index))
+        }), /*#__PURE__*/_jsx(Divider, {
+          sx: {
+            mt: '12px',
+            borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+            boxShadow: theme?.palette?.editor?.dividerDropShadow
+          }
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            pl: '4px'
+          },
+          children: /*#__PURE__*/_jsxs(List, {
+            sx: {
+              maxHeight: "250px",
+              overflowY: "auto",
+              ...customScrollStyles
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: {
+                mb: 1,
+                pl: '8px',
+                color: theme?.palette?.editor?.secondaryTextColor,
+                fontFamily: 'Inter',
+                fontWeight: 400,
+                fontSize: '12px'
+              },
+              children: "Choose an option or create one"
+            }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
+              disablePadding: true,
+              children: /*#__PURE__*/_jsxs(ListItemButton, {
+                onClick: () => handleSelectOption(option),
+                sx: {
+                  justifyContent: 'space-between',
+                  '&:hover': {
+                    '& path': {
+                      stroke: theme?.palette?.editor?.activeColor
+                    },
+                    borderRadius: '12px'
+                  }
+                },
+                children: [/*#__PURE__*/_jsx(Chip, {
+                  label: option?.value,
+                  sx: {
+                    backgroundColor: option?.color,
+                    color: '#0F172A',
+                    fontWeight: 500,
+                    fontSize: "12px",
+                    fontFamily: "Inter",
+                    padding: "4px 12px",
+                    borderRadius: "16px",
+                    maxWidth: "180px",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  }
+                }), /*#__PURE__*/_jsx(IconButton, {
+                  size: "small",
+                  sx: {
+                    '& path': {
+                      stroke: theme?.palette?.editor?.closeButtonSvgStroke
+                    },
+                    '&:hover': {
+                      backgroundColor: 'transparent'
+                    }
+                  },
+                  onClick: e => handleEditOption(e, index),
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "rightArrow"
+                  })
+                })]
+              })
+            }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
+              disablePadding: true,
+              children: /*#__PURE__*/_jsxs(ListItemButton, {
+                onClick: () => handleAddOption(inputValue),
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  sx: {
+                    color: theme?.palette?.editor?.secondaryTextColor,
+                    marginRight: "6px",
+                    fontSize: "14px",
+                    fontFamily: "Inter"
+                  },
+                  children: "Create"
+                }), /*#__PURE__*/_jsx(Chip, {
+                  label: `${inputValue}`,
+                  sx: {
+                    backgroundColor: chipColor,
+                    color: '#0F172A',
+                    fontWeight: 500,
+                    fontSize: "12px",
+                    fontFamily: "Inter",
+                    borderRadius: "16px",
+                    maxWidth: "180px",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  }
+                })]
+              })
+            })]
+          })
+        })]
+      })
+    }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
+      open: openEditOption,
+      anchorEl: anchorElOption,
+      mode: mode,
+      onClose: onClose,
+      onEvent: onEditOption,
+      translation: translation
+    }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
+      message: "Option already selected!",
+      setShowSnackBar: setShowSnackBar
+    }) : null]
+  });
+};
+export default MultiSelectWithPopover;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDataView } from "../../Providers/DataViewProvider";
-import Select from "./Components/Select";
+import MultiSelectWithPopover from "./Components/MultiSelect";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MultiSelectType = props => {
   const {
@@ -10,13 +10,15 @@ const MultiSelectType = props => {
     options,
     label = "",
     readOnly,
-    settings
+    settings,
+    translation
   } = props;
   const {
     wrapColumn
   } = settings;
   const {
-    onChange
+    onChange,
+    onUpdateProperty
   } = useDataView();
   const value = Array.isArray(pValue) ? pValue : [];
   const coloredValues = [...(value || [])]?.map(m => {
@@ -30,15 +32,28 @@ const MultiSelectType = props => {
       [property]: data?.filter(f => f?.value)
     });
   };
-  return /*#__PURE__*/_jsx(Select, {
-    className: `wrap-${wrapColumn}`,
+  const handleUpdate = data => {
+    const updateData = {
+      "label": "Multi Select",
+      "visible": true,
+      "key": property,
+      "type": "multi-select",
+      "options": data
+    };
+    onUpdateProperty(updateData);
+  };
+  return /*#__PURE__*/_jsx(MultiSelectWithPopover, {
     value: coloredValues,
     onChange: handleChange,
+    onUpdate: handleUpdate,
     options: options,
     multiple: true,
     limitTags: 2,
     placeholder: label,
-    disabled: readOnly
+    disabled: readOnly,
+    property: property,
+    wrapColumn: wrapColumn,
+    translation: translation
   });
 };
 export default MultiSelectType;