@flozy/editor 4.2.1 → 4.2.3

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/Image.js

@@ -47,14 +47,7 @@ const ToolBar = ({
     })]
   }) : null;
 };
-const ImageContent = ({
-  readOnly,
-  setOpenSettings,
-  element,
-  handleImageClick,
-  onTouchEnd,
-  path
-}) => {
+const ImageContent = props => {
   const {
     alt,
     url,
@@ -64,8 +57,13 @@ const ImageContent = ({
     boxShadow,
     frame = null,
     objectFit,
-    webAddress
-  } = element;
+    webAddress,
+    readOnly,
+    setOpenSettings,
+    handleImageClick,
+    onTouchEnd,
+    path
+  } = props;
   const theme = useTheme();
   return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -278,9 +276,9 @@ const Image = ({
         onSettings: onSettings,
         setOpenNav: setOpenNav
       }), /*#__PURE__*/_jsx(ImageContent, {
+        ...element,
         readOnly: readOnly,
         setOpenSettings: setOpenSettings,
-        element: element,
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -10,9 +10,69 @@ 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 VideoContent = props => {
+  const {
+    resizing,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    bgColor,
+    embedURL,
+    alt,
+    videoSX
+  } = props;
+  return resizing ? /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "2px dashed black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "videoPlayer"
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
+    component: "iframe",
+    className: "embedd-iframe",
+    sx: {
+      border: "none",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      left: "0px",
+      ...(gradientBorder(borderColor) || {}),
+      borderWidth: borderWidth || "1px",
+      borderStyle: borderStyle || "solid",
+      background: bgColor || "transparent",
+      ...videoSX
+    },
+    src: embedURL,
+    title: alt
+  });
+};
+const VideoPlaceholder = props => {
+  const {
+    url,
+    readOnly,
+    onSettings
+  } = props;
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    className: "element-empty-btn",
+    onClick: onSettings,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "video"
+    }), "Embed Video or Other"]
+  }) : /*#__PURE__*/_jsx(VideoContent, {
+    ...props
+  });
+};
 const Video = ({
   attributes,
   element,
@@ -21,15 +81,12 @@ const Video = ({
 }) => {
   const theme = useTheme();
   const {
-    alt,
     alignment,
     borderRadius,
-    borderWidth,
-    borderColor,
-    borderStyle,
     url,
     xsHidden,
-    width: oldWidth
+    width: oldWidth,
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -119,7 +176,7 @@ const Video = ({
       at: path
     });
   };
-  const getWidth = () => {
+  const getWidth = useCallback(() => {
     if (resizing) {
       return {
         width: `${size.width}px`,
@@ -137,52 +194,16 @@ const Video = ({
         }, theme)
       };
     }
-  };
+  }, [size]);
   const embedURL = getEmbedURL(element);
-  const VideoContent = () => {
-    return resizing ? /*#__PURE__*/_jsx("div", {
-      style: {
-        width: "100%",
-        height: "100%",
-        border: "2px dashed black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "videoPlayer"
-      })
-    }) : /*#__PURE__*/_jsx(Box, {
-      component: "iframe",
-      className: "embedd-iframe",
-      sx: {
-        border: "none",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        maxWidth: "100%",
-        left: "0px",
-        ...(gradientBorder(borderColor) || {}),
-        borderWidth: borderWidth || "1px",
-        borderRadius: {
-          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-        },
-        borderStyle: borderStyle || "solid"
-      },
-      src: embedURL,
-      title: alt
-    });
-  };
-  const VideoPlaceholder = () => {
-    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
-      component: "button",
-      className: "element-empty-btn",
-      onClick: onSettings,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "video"
-      }), "Embed Video or Other"]
-    }) : /*#__PURE__*/_jsx(VideoContent, {});
-  };
+  const videoSX = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+    },
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "embed has-hover video dpath",
@@ -215,7 +236,12 @@ const Video = ({
         ...getWidth(),
         maxWidth: "100%"
       },
-      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
+        ...element,
+        embedURL: embedURL,
+        onSettings: onSettings,
+        videoSX: videoSX
+      }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"

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/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/Elements/Table/TableRow.js

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      backgroundColor: bgColor,
+      background: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

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/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.1",
+  "version": "4.2.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"