@flozy/editor 9.3.9 → 9.4.0

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

@@ -141,7 +141,10 @@ const MultiSelectWithPopover = props => {
       onClick: handleOpenPopover,
       children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
         label: option?.value,
-        onDelete: () => setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value)),
+        onDelete: event => {
+          event.stopPropagation();
+          setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
+        },
         deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
         variant: "filled",
         sx: {
@@ -162,6 +165,7 @@ const MultiSelectWithPopover = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
+      anchor: "bottom",
       onClose: handleClosePopover,
       anchorOrigin: {
         vertical: "top",
@@ -181,7 +185,7 @@ const MultiSelectWithPopover = props => {
       },
       children: /*#__PURE__*/_jsxs(Box, {
         sx: {
-          width: 300
+          width: isMobile ? "100%" : 300
         },
         children: [/*#__PURE__*/_jsx(Autocomplete, {
           multiple: true,
@@ -195,7 +199,7 @@ const MultiSelectWithPopover = props => {
               overflowX: "hidden",
               pr: '12px',
               pl: '12px',
-              maxWidth: "275px",
+              maxWidth: isMobile ? "100%" : "275px",
               marginTop: '12px',
               ...customScrollStyles
             }
@@ -205,13 +209,10 @@ const MultiSelectWithPopover = props => {
           getOptionLabel: option => options?.value || "",
           value: selectedOptions,
           onChange: (event, newValues) => {
-            // Filter and map the new values properly
             const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
               value,
               color: chipColor
             } : value);
-
-            // Check if any new value already exists in selectedOptions
             const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
             if (!isDuplicate) {
               setSelectedOptions([...selectedOptions, ...addedOptions]);
@@ -282,14 +283,14 @@ const MultiSelectWithPopover = props => {
             ...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',
-              // maxWidth: 200,
-              // overflow: "hidden",
-              // textOverflow: "ellipsis",
-              // whiteSpace: "nowrap",
               "& .MuiChip-deleteIcon": {
                 flexShrink: 0,
                 "& path": {

package/dist/Editor/common/RnD/VirtualElement/ForceAutoAlignment.js

@@ -104,7 +104,8 @@ function ForceAutoAlignment(props) {
     "aria-hidden": "true",
     dangerouslySetInnerHTML: {
       __html: getItems()
-    }
+    },
+    contentEditable: false
   });
 }
 export default ForceAutoAlignment;

package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js

@@ -3,6 +3,7 @@ import { Path, Transforms } from "slate";
 import { getNode } from "../../../utils/helper";
 import { ROW_HEIGHT } from "../Utils/gridDropItem";
 import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
+import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateTextHeight = (editor, path, height) => {
   if (!height) {
@@ -72,15 +73,21 @@ function VirtualTextElement(props) {
     path,
     editor
   } = props;
-  const textRef = useRef(null);
   const currElement = getCurrentEle();
+  const textRef = useRef(null);
+  const prevTextRef = useRef(currElement?.innerText);
   useEffect(() => {
     const observer = new ResizeObserver(([entry]) => {
       if (entry) {
         const {
           height
         } = entry.contentRect;
-        updateTextHeight(editor, path, height);
+        const currentText = currElement?.innerText;
+        const prevText = prevTextRef.current;
+        if (currentText && currentText !== prevText) {
+          updateTextHeight(editor, path, height);
+        }
+        prevTextRef.current = currentText;
       }
     });
     const elementRef = textRef?.current;
@@ -94,19 +101,34 @@ function VirtualTextElement(props) {
       }
       observer.disconnect();
     };
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
+  }, [currElement?.innerText]);
+  return /*#__PURE__*/_jsx(Box, {
     style: {
       position: "fixed",
       width: dataSets["data-width-xs"],
       minHeight: "fit-content",
       visibility: "hidden",
       pointerEvents: "none",
-      right: 0,
-      top: 0
+      right: 100,
+      top: 100
     },
     ref: textRef,
-    children: currElement?.innerText
+    sx: {
+      "& .leaf-item": {
+        fontSize: "var(--fontSize_xs) !important",
+        "& span": {
+          fontSize: "var(--fontSize_xs) !important"
+        }
+      },
+      "& .editor-blocker": {
+        display: "none"
+      }
+    },
+    dangerouslySetInnerHTML: {
+      __html: currElement?.innerHTML
+    },
+    contentEditable: false,
+    id: "virtual-text-element"
   });
 }
 export default VirtualTextElement;

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -228,7 +228,8 @@ const VirtualElement = props => {
       // gridTemplateRows: `repeat(${lastRow - 1}, ${ROW_HEIGHT}px)`,
       ...classes.root
     },
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    contentEditable: false
   });
 };
 export default VirtualElement;

package/dist/Editor/common/RnD/VirtualElement/styles.js

@@ -5,7 +5,7 @@ const useVirtualElementStyles = () => ({
     // backgroundColor: "red",
     // height: "fit-content",
     overflow: "visible",
-    // pointerEvents: "none",
+    pointerEvents: "none",
     opacity: 1,
     right: 0,
     top: 0,
@@ -44,6 +44,7 @@ export const useAutoAlignStyles = () => ({
     top: 0,
     height: "auto !important",
     zIndex: 99999999,
+    pointerEvents: "none",
     "& .freegrid-item": {
       position: "relative !important",
       top: "0 !important",

package/dist/Editor/common/RnD/index.js

@@ -662,7 +662,7 @@ const RnD = props => {
       sectionElement: sectionElement,
       sectionCls: `.freegrid-section_${path.join("_")}`,
       dataSets: dataSets
-    }) : null, childType === "text" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualTextElement, {
+    }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
       editor: editor,
       dataSets: dataSets,
       getCurrentEle: getCurrentEle,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -338,7 +338,7 @@ export const getMarked = (leaf, children, theme) => {
     const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
     children = /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(Box, {
-        className: className,
+        className: `${className} leaf-item`,
         component: "span",
         sx: {
           "& span": {
@@ -365,6 +365,9 @@ export const getMarked = (leaf, children, theme) => {
           fontWeight: leaf.fontWeight,
           WebkitTextFillColor: "unset !important"
         },
+        style: {
+          "--fontSize_xs": leaf?.fontSize?.xs || "auto"
+        },
         children: children
       })
     });

package/package.json

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