@flozy/editor 4.2.0 → 4.2.2

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
-import { createEditor, Transforms } from "slate";
+import { createEditor, Transforms, Range } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -365,6 +365,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
+    } else if (event.key === 'Backspace') {
+      const {
+        selection
+      } = editor;
+      event.preventDefault();
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: 'character'
+          });
+        }
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -425,18 +439,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const handleCursorScroll = container => {
     try {
-      const selection = window?.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-        const containerBottom = container?.getBoundingClientRect()?.bottom;
-        if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
-          container?.scrollBy({
-            top: 200,
-            behavior: "smooth"
-          });
+      if (!customProps?.isMobile) {
+        const selection = window?.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
+          const containerBottom = container?.getBoundingClientRect()?.bottom;
+          if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
+            container?.scrollBy({
+              top: 200,
+              behavior: "smooth"
+            });
+          }
+        } else {
+          console.warn('No valid selection range found');
         }
-      } else {
-        console.warn('No valid selection range found');
       }
     } catch (err) {
       console.log('handleCursorScroll', err);

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

@@ -10,7 +10,7 @@ import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
-import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -29,7 +29,9 @@ const Video = ({
     borderStyle,
     url,
     xsHidden,
-    width: oldWidth
+    width: oldWidth,
+    bannerSpacing,
+    bgColor
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -139,6 +141,14 @@ const Video = ({
     }
   };
   const embedURL = getEmbedURL(element);
+  const videoSX = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+    },
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
   const VideoContent = () => {
     return resizing ? /*#__PURE__*/_jsx("div", {
       style: {
@@ -164,10 +174,9 @@ const Video = ({
         left: "0px",
         ...(gradientBorder(borderColor) || {}),
         borderWidth: borderWidth || "1px",
-        borderRadius: {
-          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-        },
-        borderStyle: borderStyle || "solid"
+        borderStyle: borderStyle || "solid",
+        background: bgColor || "transparent",
+        ...videoSX
       },
       src: embedURL,
       title: alt

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

@@ -262,6 +262,7 @@ const Form = props => {
   };
   const handleCloseMessage = () => {
     setSubmittedSuccessfully(false);
+    formEle.current.reset();
   };
   const onMouseLeave = () => {
     setShowOptions(false);

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

@@ -449,7 +449,8 @@ const FreeGrid = props => {
         props: {
           editor,
           path,
-          classes
+          classes,
+          customProps
         }
       }
     },
@@ -471,7 +472,7 @@ const FreeGrid = props => {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
         background: sectionBgColor,
-        backgroundImage: `url('${sectionBackgroundImage}')`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         backgroundSize: "cover"
       },
       children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {

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

@@ -200,10 +200,11 @@ const FreeGridBox = props => {
           ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
         },
         background: sectionBgColor,
-        backgroundImage: `url(${sectionBackgroundImage})`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderStyle: borderStyle || "solid"
+        borderStyle: borderStyle || "solid",
+        backgroundSize: "cover"
       },
       children: children
     })

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

@@ -1,51 +1,65 @@
 import React from "react";
-import { Box, List, ListItemButton } from "@mui/material";
+import { Box, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const FREE_GRID_ELEMENTS = [{
+  actionType: "addText",
+  label: "Text",
+  icon: "text"
+}, {
+  actionType: "addButton",
+  label: "Button",
+  icon: "button"
+}, {
+  actionType: "addImage",
+  label: "Image",
+  icon: "image"
+}, {
+  actionType: "addVideo",
+  label: "Embed or Video",
+  icon: "embed"
+}, {
+  actionType: "addBox",
+  label: "Box",
+  icon: "colorbox"
+}, {
+  actionType: "addTable",
+  label: "Table",
+  icon: "table"
+}, {
+  actionType: "addCode",
+  label: "Code",
+  icon: "embedScript"
+}, {
+  actionType: "addForm",
+  label: "Form",
+  icon: "form"
+}, {
+  actionType: "addAppHeader",
+  label: "App Header",
+  icon: "appHeader"
+}];
 const AddElement = props => {
   const {
     handleClick
   } = props;
   return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsxs(List, {
+    children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
-      children: [/*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addText"),
-        children: "Text"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addButton"),
-        children: "Button"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addImage"),
-        children: "Image"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addVideo"),
-        children: "Embed or Video"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addTable"),
-        children: "Table"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addCode"),
-        children: "Code"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addBox"),
-        children: "Box"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addForm"),
-        children: "Form"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addAppHeader"),
-        children: "App Header"
-      })]
+      children: FREE_GRID_ELEMENTS.map(m => {
+        return /*#__PURE__*/_jsxs(ListItemButton, {
+          className: "item-wrapper",
+          onClick: handleClick(m.actionType),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: m.icon
+            })
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: m.label
+          })]
+        }, m.actionType);
+      })
     })
   });
 };

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

@@ -8,7 +8,8 @@ const SectionSettings = props => {
   const {
     editor,
     path,
-    classes
+    classes,
+    customProps
   } = props;
   const element = Node.get(editor, path);
   const styleMaps = sectionStyle?.filter(f => !f?.hideOnFGS);
@@ -38,7 +39,7 @@ const SectionSettings = props => {
         value: m.value,
         element: element,
         onChange: onChange,
-        customProps: {},
+        customProps: customProps,
         handleClose: handleClose
       }, `tab_${m.value}_$${i}`);
     })

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

@@ -194,6 +194,13 @@ const useFreeGridStyles = ({
           }
         },
         "& .fgi_type_table": {
+          overflowX: "auto",
+          "& table": {
+            "&.readOnly": {
+              tableLayout: "fixed",
+              width: "100% !important"
+            }
+          },
           "& .tableToolBar": {
             right: "0px",
             left: "auto",

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -16,6 +16,7 @@ import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
+import { groupByBreakpoint } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TABLE_MENUS = [{
@@ -72,6 +73,7 @@ const TABLE_MENUS = [{
   }
 }];
 const Table = props => {
+  const theme = useTheme();
   const {
     element,
     attributes,
@@ -86,7 +88,8 @@ const Table = props => {
   const [exandTools, setExpandTools] = useState(false);
   const {
     bgColor,
-    borderColor
+    borderColor,
+    xsHidden
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -174,6 +177,12 @@ const Table = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const tableSX = groupByBreakpoint({
+    display: {
+      xs: xsHidden ? "none" : "inline-block",
+      lg: "inline-block"
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs("div", {
     style: {
       minWidth: "100%",
@@ -181,7 +190,11 @@ const Table = props => {
       position: "relative"
     },
     children: [/*#__PURE__*/_jsx(TableComp, {
-      sx: classes.table,
+      className: readOnly ? "readOnly" : "",
+      sx: {
+        ...classes.table,
+        ...tableSX
+      },
       style: {
         background: bgColor,
         border: borderColor ? `1px solid ${borderColor}` : "",

package/dist/Editor/Styles/EditorStyles.js

@@ -289,6 +289,7 @@ const editorStyles = ({
   fullScreenWrapper: {
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
+      paddingTop: '20px',
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -25,6 +25,7 @@ const FontLoader = props => {
           families: [...batchWithWeights]
         },
         classes: false,
+        timeout: 2000,
         active: () => {
           console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;
@@ -78,7 +79,7 @@ const FontLoader = props => {
       families = Array.from(fontSet);
       loadFontsInBatches(families);
     }
-  }, [readOnly, otherProps, setFontFamilies]);
+  }, []);
   return null;
 };
 export default FontLoader;

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

@@ -42,7 +42,7 @@ const DragOver = props => {
         horizontal: "center"
       },
       transformOrigin: {
-        vertical: "top",
+        vertical: "bottom",
         horizontal: "center"
       },
       children: /*#__PURE__*/_jsx(Paper, {

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -25,8 +25,11 @@ const useOptionsPopupStyle = () => ({
       }
     },
     "& .item-wrapper": {
-      padding: "12px",
+      padding: "8px",
       fontFamily: "sans-serif",
+      "& .MuiListItemIcon-root": {
+        minWidth: "30px"
+      },
       "&.title": {
         display: "flex",
         fontWeight: "bold",

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

@@ -5,6 +5,64 @@ import updateAutoProps from "./updateAutoProps";
 import { calculateGridArea } from "../Utils/gridDropItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
+
+// Function to group items by path and calculate heights
+function groupByPathAndCalculateHeight(data) {
+  const root = {};
+  const heightData = {};
+
+  // Step 1: Group items based on their path
+  data.forEach(item => {
+    const segments = item.path.split("|");
+    let current = root;
+    segments.forEach((segment, index) => {
+      if (!current[segment]) {
+        current[segment] = {
+          children: {},
+          props: {
+            height: 0
+          }
+        };
+      }
+      if (index === segments.length - 1) {
+        // Assign the properties of the item including height
+        current[segment] = {
+          ...item,
+          children: current[segment].children
+        };
+      }
+      current = current[segment].children;
+    });
+  });
+
+  // Step 2: Recursively calculate the height of each parent based on children
+  const calculateHeight = node => {
+    if (!node.children || Object.keys(node.children).length === 0) {
+      // Base case: If there are no children, return the node's height
+      return node.props.height;
+    }
+
+    // Calculate the height by summing the heights of all children
+    let totalHeight = 0;
+    Object.values(node.children).forEach(child => {
+      totalHeight += calculateHeight(child);
+    });
+
+    // Update the parent's height to be the total height of its children
+    node.props.height = totalHeight;
+    if (node?.path) {
+      heightData[node.path] = totalHeight;
+    }
+    return totalHeight;
+  };
+
+  // Start calculation from the root
+  Object.values(root).forEach(node => calculateHeight(node));
+  return {
+    root,
+    heightData
+  };
+}
 const VirtualElement = props => {
   const classes = useVirtualElementStyles();
   const {
@@ -19,9 +77,10 @@ const VirtualElement = props => {
     if (virtualRef?.current) {
       setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+        const groupData = groupByPathAndCalculateHeight(allData);
         // it should trigger by auto alignment or on clicking mobile view change
-        updateAutoProps(editor, allData, "xs");
-      }, 0);
+        updateAutoProps(editor, allData, "xs", groupData);
+      }, 100);
     }
   }, [updated_at, virtualRef?.current]);
   const calculateProps = (curPath, dom, domClass, allData) => {
@@ -35,11 +94,12 @@ const VirtualElement = props => {
     };
     const itemsData = [];
     const items = dom.querySelectorAll(domClass);
-    let sectionHeight = 0;
+    const nextItemPathLength = curPath?.split("|").length + 2;
+    let sectionHeight = 12;
     for (let i = 0; i < items.length; i++) {
       const itemRect = items[i]?.getBoundingClientRect();
       if (items[i]?.classList.contains("type_box")) {
-        allData = calculateProps(items[i]?.dataset.path, items[i], ".freegrid-item", allData);
+        allData = calculateProps(items[i]?.dataset.path, items[i], `.freegrid-item.path-${nextItemPathLength}`, allData);
       } else {
         const y = Math.abs(rect.top - itemRect?.top);
         itemsData.push({

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

@@ -10,6 +10,7 @@ const useVirtualElementStyles = () => ({
     right: 0,
     top: 0,
     "& .freegrid-item": {
+      position: "relative !important",
       gridArea: "none !important",
       width: "calc(100% - 48px) !important",
       height: "auto !important",

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

@@ -1,6 +1,7 @@
 import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "") => {
+const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
   try {
+    // const { heightData } = groupData;
     for (let i = 0; i < datas.length; i++) {
       const {
         path,

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

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const ITEM_TYPES = ["child", "parent-container"];
-const EDIT_MODES = ["text", "form"];
+const EDIT_MODES = ["text", "form", "table"];
 let hover_on = new Set();
 const RnD = props => {
   const rndRef = useRef(null);

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -24,6 +24,10 @@ const embedVideoStyle = [{
   tab: "Border",
   value: "border",
   fields: [{
+    label: "Background Color",
+    key: "bgColor",
+    type: "color"
+  }, {
     label: "Border Color",
     key: "borderColor",
     type: "color"
@@ -56,5 +60,13 @@ const embedVideoStyle = [{
       });
     }
   }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
 }];
 export default embedVideoStyle;

package/dist/Editor/common/StyleBuilder/tableStyle.js

@@ -38,5 +38,14 @@ const tableStyle = [{
     key: "col.borderColor",
     type: "color"
   }]
+}, {
+  tab: "Visibility",
+  value: "visibility",
+  fields: [{
+    label: "Hide on Mobile",
+    key: "table.xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }]
 }];
 export default tableStyle;

package/package.json

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