@flozy/editor 10.5.2 → 10.5.3

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/{SelectV1.js → MultiSelect.js}

@@ -10,10 +10,10 @@ 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 SwipeableDrawer from "@mui/material/SwipeableDrawer";
 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";
@@ -26,73 +26,41 @@ 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 SelectV1 = props => {
+const MultiSelectWithPopover = props => {
   const {
-    value,
     options = [],
-    selectMultiple,
-    property,
-    wrapColumn = false,
+    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 [selectedOptions, setSelectedOptions] = useState(value);
+  const [availableOptions, setAvailableOptions] = useState(options);
   const [showSnackBar, setShowSnackBar] = useState(false);
   const [chipColor, setChipColor] = useState(generateRandomColor());
   const [inputValue, setInputValue] = useState("");
-  const [availableOptionsMap, setAvailableOptionsMap] = useState({});
-  const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
   const {
     theme
   } = useEditorContext();
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
-  useEffect(() => {
-    const obj = {};
-    for (const opt of availableOptions) {
-      if (opt?.id != null) {
-        obj[opt.id] = opt;
-      }
-    }
-    setAvailableOptionsMap(obj);
-  }, [availableOptions]);
-  useEffect(() => {
-    const resolved = selectedOptions?.filter(sel => sel?.id && availableOptionsMap?.[sel.id])?.map(sel => availableOptionsMap[sel?.id]) ?? [];
-    setResolvedSelectedOptions(resolved);
-  }, [selectedOptions, availableOptionsMap]);
-  useEffect(() => {
-    const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
-    setAvailableOptions(enrichedAvailable);
-    const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
-      const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
-      return match ? {
-        id: match.id
-      } : sel;
-    });
-    setSelectedOptions(enrichedSelected);
-  }, []);
   const mode = useMemo(() => ({
     type: "editOptionMulti",
     edit: {
-      label: selectMultiple ? "Multi Select" : "Select",
+      label: "Multi Select",
       visible: true,
       key: property,
-      type: selectMultiple ? "multi-select" : "select",
-      options: availableOptions || [],
+      type: "multi-select",
+      options: options || [],
       optionIndex: currentIndex,
       hideBackButton: true
     }
-  }), [availableOptions, property, currentIndex, selectMultiple]);
+  }), [options, property, currentIndex]);
   const customScrollStyles = {
     scrollbarWidth: "thin",
     scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
@@ -113,12 +81,10 @@ const SelectV1 = props => {
     }
   }, [inputValue, chipColor]);
   useEffect(() => {
-    const enriched = hasIds(options) ? options : generateStableIds(options);
-    const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
-    if (isDifferent) {
-      setAvailableOptions(enriched);
+    if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
+      setAvailableOptions(options);
     }
-  }, [options]);
+  }, [options, availableOptions]);
   const handleOpenPopover = useCallback(event => {
     setAnchorEl(event.currentTarget);
   }, []);
@@ -127,40 +93,17 @@ const SelectV1 = props => {
     setAnchorEl(null);
   }, []);
   const handleAddOption = newValue => {
-    const trimmedValue = newValue?.trim?.();
+    const trimmedValue = newValue?.trim();
     if (!trimmedValue) return;
-    const isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
-    if (isDuplicate) {
-      const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
-      const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
-      if (!alreadySelected) {
-        const updatedSelected = selectMultiple ? [...selectedOptions, {
-          id: existing.id
-        }] : [{
-          id: existing.id
-        }];
-        setSelectedOptions(updatedSelected);
-        onChange?.(updatedSelected);
-      }
-      setInputValue("");
-      setChipColor("");
-      return;
-    }
     const newOption = {
       value: trimmedValue,
-      color: chipColor,
-      id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
+      color: chipColor
     };
-    const updatedAvailableOptions = [...availableOptions, newOption];
-    const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
-      id: newOption.id
-    }] : [{
-      id: newOption.id
-    }];
-    setAvailableOptions(updatedAvailableOptions);
-    setSelectedOptions(updatedSelectedOptions);
-    onUpdate?.(updatedAvailableOptions);
-    onChange?.(updatedSelectedOptions);
+    if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
+      setAvailableOptions(prev => [...prev, newOption]);
+      setSelectedOptions(prev => [...prev, newOption]);
+      onUpdate([newOption, ...availableOptions]);
+    }
     setInputValue("");
     setChipColor("");
   };
@@ -171,6 +114,11 @@ const SelectV1 = props => {
   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();
@@ -179,20 +127,12 @@ const SelectV1 = props => {
     setAnchorEl(null);
   };
   const handleSelectOption = option => {
-    const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
-    if (isAlreadySelected) {
+    if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
+      const updatedOptions = [...selectedOptions, option];
+      setSelectedOptions(updatedOptions);
+      onChange(updatedOptions);
+    } else {
       setShowSnackBar(true);
-      return;
-    }
-    const updatedOptions = selectMultiple ? [...selectedOptions, {
-      id: option?.id
-    }] : [{
-      id: option?.id
-    }];
-    setSelectedOptions(updatedOptions);
-    onChange(updatedOptions);
-    if (!selectMultiple) {
-      handleClosePopover();
     }
   };
   const handleClearSelection = () => {
@@ -200,9 +140,11 @@ const SelectV1 = props => {
   };
   const handleDeleteChip = (event, option) => {
     event.stopPropagation();
-    const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
-    setSelectedOptions(updatedOptions);
-    onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
+    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());
@@ -220,7 +162,7 @@ const SelectV1 = props => {
         cursor: "pointer"
       },
       onClick: handleOpenPopover,
-      children: resolvedSelectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
+      children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
         label: option?.value,
         onDelete: event => {
           handleDeleteChip(event, option);
@@ -288,12 +230,16 @@ const SelectV1 = props => {
           },
           disableClearable: true,
           options: [],
-          getOptionLabel: () => "",
-          value: resolvedSelectedOptions,
+          getOptionLabel: option => options?.value || "",
+          value: selectedOptions,
           onChange: (event, newValues) => {
-            const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
-            for (const str of stringOptions) {
-              handleAddOption(str);
+            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,
@@ -357,32 +303,30 @@ const SelectV1 = props => {
             },
             placeholder: "Create new one..."
           }),
-          renderTags: (tagValues, getTagProps) => {
-            return 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
+          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));
-          }
+            }
+          }, index))
         }), /*#__PURE__*/_jsx(Divider, {
           sx: {
             mt: '12px',
@@ -507,4 +451,4 @@ const SelectV1 = props => {
     }) : null]
   });
 };
-export default SelectV1;
+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 SelectV1 from "./Components/SelectV1";
+import MultiSelectWithPopover from "./Components/MultiSelect";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MultiSelectType = props => {
   const {
@@ -24,30 +24,30 @@ const MultiSelectType = props => {
   const coloredValues = [...(value || [])]?.map(m => {
     return {
       ...m,
-      color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
+      color: options?.find(f => f.value === m.value)?.color || "#FFF"
     };
   });
   const handleChange = data => {
     onChange(rowIndex, {
-      [property]: data?.filter(f => f?.id)
+      [property]: data?.filter(f => f?.value)
     });
   };
   const handleUpdate = data => {
     const updateData = {
-      label: "Multi Select",
-      visible: true,
-      key: property,
-      type: "multi-select",
-      options: data
+      "label": "Multi Select",
+      "visible": true,
+      "key": property,
+      "type": "multi-select",
+      "options": data
     };
     onUpdateProperty(updateData);
   };
-  return /*#__PURE__*/_jsx(SelectV1, {
+  return /*#__PURE__*/_jsx(MultiSelectWithPopover, {
     value: coloredValues,
     onChange: handleChange,
     onUpdate: handleUpdate,
     options: options,
-    selectMultiple: true,
+    multiple: true,
     limitTags: 2,
     placeholder: label,
     disabled: readOnly,

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDataView } from "../../Providers/DataViewProvider";
-import SelectV1 from "./Components/SelectV1";
+import Select from "./Components/Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectType = props => {
   const {
@@ -8,47 +8,28 @@ const SelectType = props => {
     property,
     value,
     options,
-    readOnly,
-    translation
+    readOnly
   } = props;
   const {
-    onChange,
-    onUpdateProperty
+    onChange
   } = useDataView();
-  const label = "";
   const coloredValues = [...(value || [])]?.map(m => {
     return {
       ...m,
-      color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
+      color: options?.find(f => f.value === m.value)?.color
     };
   });
   const handleChange = data => {
     onChange(rowIndex, {
-      [property]: data?.filter(f => f?.id)
+      [property]: data?.filter(f => f?.value)
     });
   };
-  const handleUpdate = data => {
-    const updateData = {
-      "label": "Select",
-      "visible": true,
-      "key": property,
-      "type": "select",
-      "options": data
-    };
-    onUpdateProperty(updateData);
-  };
-  return /*#__PURE__*/_jsx(SelectV1, {
+  return /*#__PURE__*/_jsx(Select, {
     value: coloredValues,
-    options: options,
-    selectMultiple: false,
-    disabled: readOnly,
-    limitTags: 2,
-    placeholder: label,
-    property: property,
-    wrapColumn: false,
     onChange: handleChange,
-    onUpdate: handleUpdate,
-    translation: translation
+    options: options,
+    multiple: false,
+    disabled: readOnly
   });
 };
 export default SelectType;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
 import { colors } from "../../../Color Picker/defaultColors";
 import Icon from "../../../../common/Icon";
@@ -20,14 +20,8 @@ const AddOptions = props => {
   const [value, setValue] = useState("");
   const [error, setError] = useState("");
   const {
-    options = []
+    options
   } = edit;
-  const inputRef = useRef();
-  useEffect(() => {
-    if (inputRef?.current) {
-      inputRef.current.focus();
-    }
-  }, [addBox, options]);
   const onAddBox = () => {
     setAddBox(!addBox);
   };
@@ -46,8 +40,7 @@ const AddOptions = props => {
         ...edit,
         options: [{
           value: value,
-          color: getRandomColor(),
-          id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
+          color: getRandomColor()
         }, ...(options || [])]
       });
       setValue("");
@@ -67,6 +60,7 @@ const AddOptions = props => {
   };
   const onBlur = () => {
     setValue("");
+    setAddBox(false);
     setError("");
   };
   return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
@@ -85,7 +79,6 @@ const AddOptions = props => {
       })
     }), addBox ? /*#__PURE__*/_jsx(Box, {
       children: /*#__PURE__*/_jsx(TextField, {
-        inputRef: inputRef,
         className: "mt",
         size: "small",
         fullWidth: true,
@@ -94,7 +87,7 @@ const AddOptions = props => {
         onChange: handleChange,
         onBlur: onBlur,
         helperText: error
-      }, `input_${options?.length}`)
+      })
     }) : null, /*#__PURE__*/_jsx(List, {
       children: options?.map((m, i) => {
         return /*#__PURE__*/_jsxs(ListItemButton, {

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

@@ -19,7 +19,6 @@ const EditOption = props => {
   const [edit, setEdit] = useState({
     ...(mode?.edit || {})
   });
-  const [errorMessage, setErrorMessage] = useState("");
   const editData = useRef({
     ...edit
   });
@@ -32,13 +31,10 @@ const EditOption = props => {
   const selectedOption = edit?.options[optionIndex] || {};
   const pickerStyles = ColorPickerStyles(theme);
   const hideBackButton = edit?.hideBackButton || false;
-  const errorMessageRef = useRef(errorMessage);
-  useEffect(() => {
-    errorMessageRef.current = errorMessage;
-  }, [errorMessage]);
   useEffect(() => {
     return () => {
-      if (editData?.current && !errorMessageRef.current) {
+      // on un-mount update the option change
+      if (editData?.current) {
         delete editData?.current?.edited;
         onEvent("updateProperty", {
           ...editData?.current
@@ -47,24 +43,18 @@ const EditOption = props => {
     };
   }, []);
   const onChange = e => {
-    const {
-      name,
-      value,
-      delete: isDelete
-    } = e?.target || {};
-    const targetValue = value?.toLowerCase();
-    const updatedOptions = edit?.options?.map((m, i) => {
+    const updatedOptions = edit?.options.map((m, i) => {
       if (i === edit?.optionIndex) {
         return {
           ...m,
-          [name]: value
+          [e.target.name]: e?.target?.value
         };
       }
       return m;
     });
 
-    // If deleting the option
-    if (edit?.optionIndex > -1 && isDelete) {
+    // for delete
+    if (edit?.optionIndex > -1 && e?.target?.delete) {
       updatedOptions.splice(edit?.optionIndex, 1);
     }
     const latest = {
@@ -78,28 +68,14 @@ const EditOption = props => {
       ...latest,
       edited: true
     };
-    if (name === "value" && !value?.trim()) {
-      setErrorMessage("Option name must not be empty");
-      return;
-    }
-    const isDuplicate = name === "value" && targetValue && edit?.options?.some((op, i) => i !== edit?.optionIndex && op?.value?.toLowerCase?.() === targetValue);
-    if (isDuplicate) {
-      setErrorMessage("Option name must be unique");
-      return;
-    }
-    setErrorMessage(""); // Clear error on valid input
 
-    // If delete go back
-    if (isDelete) {
-      if (hideBackButton) {
-        onClose();
-      } else {
-        onEvent("editProperty", {
-          edit: {
-            ...latest
-          }
-        });
-      }
+    // if delete go back
+    if (e?.target?.delete) {
+      onEvent("editProperty", {
+        edit: {
+          ...latest
+        }
+      });
     }
   };
   const onBack = () => {
@@ -161,9 +137,7 @@ const EditOption = props => {
           value: selectedOption?.value,
           onChange: onChange,
           fullWidth: true,
-          placeholder: translation("Option Name"),
-          helperText: errorMessage,
-          error: !!errorMessage
+          placeholder: translation("Option Name")
         }),
         labelPlacement: "top"
       })

package/dist/Editor/Elements/Divider/Divider.js

@@ -61,7 +61,7 @@ const Divider = props => {
       className: "element-toolbar dividerIcon",
       style: {
         top: "3px",
-        right: "8px"
+        left: 0
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: translation("Divider Settings"),

package/dist/Editor/Elements/Embed/Video.js

@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
     },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
-    }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
+    }), TYPE_LABELS[type] || translation("Embed Video or Other")]
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",

package/dist/Editor/Elements/Form/Form.js

@@ -4,6 +4,7 @@ import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
+import BackupIcon from "@mui/icons-material/Backup";
 import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
@@ -159,8 +160,7 @@ const Form = props => {
           [pair[0]]: pair[1],
           placeholder: placeholder,
           form_name: formName,
-          tagName: tagName,
-          uid: fieldData?.uid
+          tagName: tagName
         });
       }
       let params = {
@@ -207,7 +207,7 @@ const Form = props => {
     }, {
       at: path
     });
-    // adding form field style to the current form node
+    // adding form field style to the current form node 
     const currentNode = Node.get(editor, path);
     if (currentNode) {
       currentNode.children.forEach((item, index) => {

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -35,6 +35,7 @@ const FormTextArea = props => {
       onChange: onChange,
       sx: {
         width: "100%",
+        borderWidth: "1px",
         borderBlockStyle: "solid",
         padding: {
           ...getTRBLBreakPoints(bannerSpacing)

package/dist/Editor/Elements/Form/FormField.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Transforms } from "slate";
+import { Transforms, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
 import FormElements from "./FormElements";
@@ -9,7 +9,6 @@ import { DeleteIcon } from "../../assets/svg/AIIcons";
 import { SettingsIcon } from "../../assets/svg/TableIcons";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
-import { getNode } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormField = props => {
@@ -36,7 +35,7 @@ const FormField = props => {
   const formPath = path.slice(0, path.length - 1);
   const {
     metadatamapping
-  } = getNode(editor, formPath) || {};
+  } = Node?.get(editor, formPath) || {};
   const updatedElement = {
     ...element,
     metadatamapping