@flozy/editor 10.4.8 → 10.5.0

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

@@ -71,9 +71,7 @@ const SelectV1 = props => {
     setResolvedSelectedOptions(resolved);
   }, [selectedOptions, availableOptionsMap]);
   useEffect(() => {
-    // console.log("Options received:", options);
     const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
-    // console.log("Enriched available options:", enrichedAvailable);
     setAvailableOptions(enrichedAvailable);
     const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
       const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
@@ -81,7 +79,6 @@ const SelectV1 = props => {
         id: match.id
       } : sel;
     });
-    // console.log("Enriched selected options:", enrichedSelected);
     setSelectedOptions(enrichedSelected);
   }, []);
   const mode = useMemo(() => ({

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { useDataView } from "../../Providers/DataViewProvider";
-import MultiSelectWithPopover from "./Components/MultiSelect";
 import SelectV1 from "./Components/SelectV1";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MultiSelectType = props => {

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { useDataView } from "../../Providers/DataViewProvider";
-// import Select from "./Components/Select";
 import SelectV1 from "./Components/SelectV1";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectType = props => {

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -519,8 +519,10 @@ const FreeGrid = props => {
       disableDragging: true,
       style: {
         position: "relative",
-        "--height": `${height}px`
+        "--height": `${height}px`,
+        display: 'block' //for test purpose
       },
+
       dataSets: {
         "data-height-xs": height_xs
       },

package/dist/Editor/Elements/Table/AddRowCol.js

@@ -1,6 +1,7 @@
 import { Button } from "@mui/material";
 import { useMemo, useState } from "react";
 import useTable from "../../hooks/useTable";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
 const showAddButton = (addType, tableNode, hoverPath) => {
   const [row, col] = hoverPath && hoverPath?.length ? hoverPath.slice(-2) : [];
@@ -61,7 +62,7 @@ function AddRowCol(props) {
         fontSize: "14px",
         border: "1px dashed #8DA8E3",
         color: "#2563EB !important",
-        padding: "0px 4px",
+        padding: "4px 4px",
         minWidth: "unset",
         lineHeight: "18px",
         fontWeight: "normal !important",
@@ -70,7 +71,12 @@ function AddRowCol(props) {
       },
       disabled: !showBtn,
       onClick: onAdd,
-      children: "+"
+      children: /*#__PURE__*/_jsx(AddRoundedIcon, {
+        sx: {
+          width: 18,
+          height: 18
+        }
+      })
     })
   });
 }

package/dist/Editor/utils/helper.js

@@ -991,11 +991,15 @@ const handleCopiedList = (el, domRange) => {
     el.insertAdjacentText("afterbegin", "- ");
   }
 };
+const cleanCopiedDOM = container => {
+  container.querySelectorAll('[style*="display: none"], [contenteditable="false"]').forEach(el => el.remove());
+  return container;
+};
 const getCopiedTextFormat = domRange => {
   const contents = domRange.cloneContents();
   const div = document.createElement("div");
   div.appendChild(contents);
-
+  cleanCopiedDOM(div);
   // Replace <br> with newlines
   div.querySelectorAll("br").forEach(br => br.replaceWith("\n"));
   const BLOCK_TAGS = ["DIV", "P", "LI", "H1", "H2", "H3", "H4", "H5", "H6"];
@@ -1023,6 +1027,7 @@ const getCopiedHTMLFormat = domRange => {
   const htmlContents = domRange.cloneContents();
   const container = document.createElement("div");
   container.appendChild(htmlContents);
+  cleanCopiedDOM(container);
   const html = container.innerHTML;
   return html;
 };

package/package.json

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

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

@@ -1,482 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import Divider from "@mui/material/Divider";
-import Popover from "@mui/material/Popover";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import { CloseIcon } from "../../../../../common/iconslist";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import SwipeableDrawer from "@mui/material/SwipeableDrawer";
-import Icon from "../../../../../common/Icon";
-import { colors } from "../../../../Color Picker/defaultColors";
-import PropertySettings from "../../Options";
-import SnackbarAlert from "../../../../../common/SnackBar";
-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 hasIds = arr => Array.isArray(arr) && arr.every(item => 'id' in item);
-const generateStableIds = arr => arr.map((item, index) => ({
-  ...item,
-  id: `multi_${item.value}_${index}`
-}));
-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([]);
-  const [availableOptions, setAvailableOptions] = useState([]);
-  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;
-  useEffect(() => {
-    console.log("Options received:", options);
-    const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
-    console.log("Enriched available options:", enrichedAvailable);
-    setAvailableOptions(enrichedAvailable);
-    const enrichedSelected = hasIds(value) ? value : value.map(sel => {
-      const match = enrichedAvailable.find(opt => opt.value === sel.value);
-      return match ? {
-        ...sel,
-        id: match.id
-      } : sel;
-    });
-    console.log("Enriched selected options:", enrichedSelected);
-    setSelectedOptions(enrichedSelected);
-  }, []);
-  const mode = useMemo(() => ({
-    type: "editOptionMulti",
-    edit: {
-      label: "Multi Select",
-      visible: true,
-      key: property,
-      type: "multi-select",
-      options: availableOptions || [],
-      optionIndex: currentIndex,
-      hideBackButton: true
-    }
-  }), [availableOptions, property, currentIndex]);
-  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() && !chipColor) {
-      setChipColor(generateRandomColor());
-    }
-  }, [inputValue, chipColor]);
-  useEffect(() => {
-    if (inputValue?.trim() && !chipColor) {
-      setChipColor(generateRandomColor());
-    }
-  }, [inputValue, chipColor]);
-  useEffect(() => {
-    const enriched = hasIds(options) ? options : generateStableIds(options);
-    const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
-    if (isDifferent) {
-      setAvailableOptions(enriched);
-    }
-  }, [options]);
-  const handleOpenPopover = useCallback(event => {
-    setAnchorEl(event.currentTarget);
-  }, []);
-  const handleClosePopover = useCallback(e => {
-    e?.stopPropagation();
-    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]);
-      onChange([...selectedOptions, newOption]);
-    }
-    setInputValue("");
-    setChipColor("");
-  };
-  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)) {
-      const updatedOptions = [...selectedOptions, option];
-      setSelectedOptions(updatedOptions);
-      onChange(updatedOptions);
-    } else {
-      setShowSnackBar(true);
-    }
-  };
-  const handleClearSelection = () => {
-    setSelectedOptions([]);
-  };
-  const handleDeleteChip = (event, option) => {
-    event.stopPropagation();
-    setSelectedOptions(prev => {
-      const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
-      onChange(updatedOptions);
-      return updatedOptions;
-    });
-  };
-  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 => {
-          handleDeleteChip(event, option);
-        },
-        deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-        variant: "filled",
-        sx: {
-          backgroundColor: option?.color,
-          color: "#0F172A",
-          "& .MuiChip-deleteIcon": {
-            flexShrink: 0,
-            "& path": {
-              stroke: "#0F172A !important"
-            }
-          },
-          "&:hover": {
-            opacity: 0.8
-          }
-        }
-      }, index))
-    }), /*#__PURE__*/_jsx(PopoverComponent, {
-      id: id,
-      open: open,
-      anchorEl: anchorEl,
-      anchor: "bottom",
-      onClose: e => handleClosePopover(e),
-      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"
-        }
-      },
-      disableAutoFocus: true,
-      disableEnforceFocus: true,
-      disableRestoreFocus: true,
-      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",
-              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(Icon, {
-                    icon: "resetIconNew"
-                  })
-                })
-              })
-            },
-            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 => {
-              handleDeleteChip(event, option);
-            },
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-            sx: {
-              backgroundColor: option?.color,
-              color: "#0F172A",
-              "& .MuiChip-deleteIcon": {
-                flexShrink: 0,
-                "& path": {
-                  stroke: "#0F172A !important"
-                }
-              },
-              "&: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, {
-              sx: {
-                padding: 0
-              },
-              disablePadding: true,
-              children: /*#__PURE__*/_jsxs(ListItemButton, {
-                onClick: () => handleSelectOption(option),
-                sx: {
-                  paddingTop: "4px",
-                  paddingBottom: "4px",
-                  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;