@flozy/editor 5.7.1 → 5.7.2

package/dist/Editor/CommonEditor.js

@@ -27,7 +27,7 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
+import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
@@ -388,8 +388,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
       upDownArrowKeyEvents(event, editor);
     } else if (event.key === "Backspace") {
-      const isPageSettingsNode = isPageSettings(event, editor);
-      if (isPageSettingsNode) {
+      const isNodeRestricted = isRestrictedNode(event, editor);
+      if (isNodeRestricted) {
         return;
       }
       const {
@@ -539,7 +539,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         transition: "all 0.3s",
                         minHeight: "87%",
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto",
-                        paddingTop: hasTopBanner() ? '20px !important' : isMobile ? '10px !important' : ''
+                        paddingTop: hasTopBanner() ? "20px !important" : isMobile ? "10px !important" : ""
                       },
                       "data-info": outsideEditorClickLabel,
                       children: [/*#__PURE__*/_jsx(Editable, {

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -20,7 +20,7 @@ const useTableStyles = (theme, appTheme) => ({
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
         },
-        '& path': {
+        "& path": {
           stroke: appTheme?.palette?.editor?.tv_text
         }
       }
@@ -30,7 +30,10 @@ const useTableStyles = (theme, appTheme) => ({
       "& input": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         background: "transparent",
-        fontSize: '14px'
+        fontSize: "14px"
+      },
+      "& .Mui-disabled": {
+        "-webkit-text-fill-color": `${appTheme?.palette?.editor?.tv_text_primary} !important`
       }
     },
     "& th, tr, td": {
@@ -39,19 +42,19 @@ const useTableStyles = (theme, appTheme) => ({
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
-      '& .MuiButton-startIcon': {
+      "& .MuiButton-startIcon": {
         background: appTheme?.palette?.editor?.tv_ico_bg,
-        borderRadius: '4px',
-        padding: '4px',
+        borderRadius: "4px",
+        padding: "4px",
         "& svg": {
-          width: '14px',
-          height: '14px'
+          width: "14px",
+          height: "14px"
         }
       },
       "&.ico": {
         "& svg": {
           color: appTheme?.palette?.editor?.tv_text,
-          '& path': {
+          "& path": {
             stroke: appTheme?.palette?.editor?.tv_text
           }
         }
@@ -60,7 +63,7 @@ const useTableStyles = (theme, appTheme) => ({
         color: appTheme?.palette?.editor?.tv_hover_text,
         "& svg": {
           color: appTheme?.palette?.editor?.tv_hover_text,
-          '& path': {
+          "& path": {
             stroke: appTheme?.palette?.editor?.tv_hover_text
           }
         }

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

@@ -37,8 +37,9 @@ function DragButton({
   };
   const onDragClose = () => {
     setShowTool(false);
-    setTimeout(() => resetSelection(), 200);
+    // setTimeout(() => resetSelection(), 200);
   };
+
   const dragProps = {
     ...dndProps,
     id: dndProps?.id + dragType,

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

@@ -288,6 +288,8 @@ const TableCell = props => {
     Transforms.select(editor, selection);
   };
   const onRowDrag = () => {
+    selectCurrentCell();
+    const [rowNode] = getNodeWithType(editor, "table-row", path);
     const {
       children
     } = rowNode[0] || {};
@@ -299,9 +301,10 @@ const TableCell = props => {
       endCellPath: rowEndCell,
       isDragging: false
     });
-    selectCurrentCell();
   };
   const onColDrag = () => {
+    selectCurrentCell();
+    const [tableNode] = getNodeWithType(editor, "table", path);
     const [tableData, tablePath] = tableNode;
     const {
       rows
@@ -313,7 +316,6 @@ const TableCell = props => {
       endCellPath: endColCell,
       isDragging: false
     });
-    selectCurrentCell();
   };
   const handleToolAction = (value, option, dragType) => {
     const isRowDrag = dragType === "row";

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -1,5 +1,6 @@
 import { Transforms, Node, Path } from "slate";
 import { ReactEditor } from "slate-react";
+import { handleNegativeInteger } from "../../../utils/helper";
 export const ROW_HEIGHT = 50;
 const MARGIN_OF = {
   xs: 160,
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props) {
+function isContainerElement(editor, moveTopath, props, appenBp) {
   try {
     const {
       path,
@@ -91,21 +92,32 @@ function isContainerElement(editor, moveTopath, props) {
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
     const moveToNode = Node.get(editor, moveTopath);
+    const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
         // same box
         if (parentPath === dragOver) {
           return props.calX;
         } else {
+          const moveToDom = ReactEditor.toDOMNode(editor, moveToNode);
+          const {
+            left
+          } = moveToDom?.getBoundingClientRect() || {};
+          const borderLeftWidth = getBorderWidth(moveToDom, "borderLeftWidth");
+
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
+          return parseInt(props.x - props.diffX - left - borderLeftWidth);
         }
       } else {
-        return props.calX - moveToNode?.left;
+        return props.calX - leftOfMoveToNode;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
-        return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
+        const boundaryLineEle = document.querySelector(".rnd-guideline-lv");
+        const {
+          left
+        } = boundaryLineEle?.getBoundingClientRect() || {};
+        return parseInt(props.x - props.diffX - left);
       } else {
         return props.calX;
       }
@@ -133,14 +145,16 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const cCalx = isContainerElement(editor, moveTo, props);
+    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
+    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
+    const borderTopWidth = getBorderWidth(addToSectionDOM, "borderTopWidth");
     const rect = addToSectionDOM.getBoundingClientRect();
-    const y = endPosition.y - startPosition.diffY - rect.top;
+    const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top - borderTopWidth);
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -150,7 +164,6 @@ export function onDropItem(props, parentClass) {
 
     // Update grid area
     const gridArea = `${row} / 1 / ${row + 1} / 2`;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     Transforms.setNodes(editor, {
       [`gridArea${appenBp}`]: gridArea,
       [`left${appenBp}`]: cCalx,
@@ -188,4 +201,9 @@ export function onDropItem(props, parentClass) {
 export function calculateGridArea(y) {
   const row = Math.floor(y / ROW_HEIGHT) + 1;
   return `${row} / 1 / ${row + 1} / 2`;
+}
+export function getBorderWidth(dom, property) {
+  const styles = getComputedStyle(dom);
+  const borderWidth = parseFloat(styles[property]);
+  return borderWidth;
 }

package/dist/Editor/utils/helper.js

@@ -593,8 +593,9 @@ export const getPreviousNode = editor => {
     return;
   }
 };
-export const isPageSettings = (event, editor) => {
-  let isPageSettingsNode = false;
+const isRestricted = node => node?.type === "page-settings" || node?.type === "site-settings" || node?.children?.some(child => child.type === "dataView");
+export const isRestrictedNode = (event, editor) => {
+  let isNodeRestricted = false;
   try {
     const {
       selection
@@ -607,21 +608,21 @@ export const isPageSettings = (event, editor) => {
         previousNode,
         previousPath
       } = getPreviousNode(editor) || {};
-      if (previousNode?.type === "page-settings") {
+      if (isRestricted(previousNode)) {
         event.preventDefault(); // stops deleting backward
 
         // move the cursor to node which is before page-settings node
         const pathBeforePageSettings = Path.previous(previousPath);
         const endPath = Editor.end(editor, pathBeforePageSettings);
         Transforms.select(editor, endPath);
-        isPageSettingsNode = true;
+        isNodeRestricted = true;
       }
     }
-    return isPageSettingsNode;
+    return isNodeRestricted;
   } catch (err) {
     // if there is no previous node error throws, user reached the starting node and startting position
-    isPageSettingsNode = true;
-    return isPageSettingsNode;
+    isNodeRestricted = true;
+    return isNodeRestricted;
   }
 };
 export const insertLineBreakAtEndOfPath = (editor, path) => {
@@ -711,4 +712,7 @@ export const getSlateDom = (editor, range) => {
   } catch (err) {
     console.log(err);
   }
-};
+};
+export function handleNegativeInteger(val) {
+  return val < 0 ? 0 : val;
+}

package/package.json

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