@flozy/editor 4.2.1 → 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/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/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.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"