@flozy/editor 9.3.5 → 9.3.6

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

@@ -2,20 +2,28 @@ const useVirtualElementStyles = () => ({
   root: {
     width: "320px",
     position: "fixed",
-    backgroundColor: "red",
-    height: "auto",
+    // backgroundColor: "red",
+    // height: "fit-content",
     overflow: "visible",
-    pointerEvents: "none",
-    opacity: 0,
+    // pointerEvents: "none",
+    opacity: 1,
     right: 0,
     top: 0,
     "& .freegrid-item": {
       position: "relative !important",
-      gridArea: "none !important",
+      top: "0 !important",
+      gridArea: "var(--gridArea_xs) !important",
       width: "calc(100% - 48px) !important",
-      height: "auto !important",
+      height: "var(--height_xs) !important",
       left: "24px !important",
-      marginTop: "24px !important",
+      marginTop: "var(--marginTop_xs) !important",
+      outline: "1px solid gray !important",
+      // "&.type_box": {
+      //   // display: "grid !important",
+      //   // gridTemplateRows: "repeat(auto-fill, 50px) !important",
+      //   // height: "min-content !important",
+      // },
+
       "& .debug-info, & .editor-blocker": {
         display: "none"
       },
@@ -25,4 +33,83 @@ const useVirtualElementStyles = () => ({
     }
   }
 });
-export default useVirtualElementStyles;
+export default useVirtualElementStyles;
+export const useAutoAlignStyles = () => ({
+  root: {
+    width: "320px",
+    position: "fixed",
+    overflow: "visible",
+    opacity: 1,
+    right: 0,
+    top: 0,
+    height: "auto !important",
+    zIndex: 99999999,
+    "& .freegrid-item": {
+      position: "relative !important",
+      top: "0 !important",
+      gridArea: "none !important",
+      width: "calc(100% - 48px) !important",
+      height: "var(--height_xs) !important",
+      left: "24px !important",
+      marginTop: "12px !important",
+      minHeight: "auto",
+      "&.type_box": {
+        height: "auto !important"
+      },
+      // start - default signature classes on free-grid
+      "& .fgi_type_signature": {
+        height: "100%",
+        "& .signature-container": {
+          height: "100%",
+          LineHeight: 1.43,
+          "& .signature-btn-container": {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            "& .sign-placeholder": {
+              display: "flex",
+              // remove hidden sign placeholder
+              width: "100%",
+              flexGrow: 1
+            },
+            "& button": {
+              margin: "6px 0px"
+            }
+          }
+        }
+      },
+      "& .fgi_type_sign": {
+        width: "100%",
+        height: "100%",
+        "& .signature-signed-wrapper": {
+          width: "100%",
+          height: "100%",
+          "& .signature-signed-span": {
+            width: "100%",
+            height: "100%",
+            "& .signed-btn": {
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              "& img": {
+                width: "100% !important",
+                maxWidth: "none !important",
+                height: "70% !important",
+                flexGrow: 1
+              }
+            }
+          }
+        }
+      },
+      // end - default signature classes on free-grid
+
+      "& .debug-info, & .editor-blocker": {
+        display: "none"
+      },
+      "& .embed": {
+        minHeight: "300px"
+      }
+    }
+  }
+});

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

@@ -1,5 +1,5 @@
 import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
+const updateAutoProps = (editor, datas = [], breakpoint = "", updateAll) => {
   try {
     // const { heightData } = groupData;
     for (let i = 0; i < datas.length; i++) {
@@ -14,9 +14,11 @@ const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
         return a;
       }, {});
       const oldProps = Node.get(editor, int_path);
-      if (!oldProps?.xs_updatedOn) {
+      const updateNode = !oldProps?.xs_updatedOn || updateAll;
+      if (updateNode) {
         Transforms.setNodes(editor, {
-          ...updatedProps
+          ...updatedProps,
+          xs_updatedOn: new Date().getTime()
         }, {
           at: int_path
         });

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

@@ -19,6 +19,10 @@ import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
 import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
+import { reRenderChildNodes } from "./Utils/gridDropItem";
+import VirtualTextElement from "./VirtualElement/VirtualTextElement";
+import useAutoScroll from "../../hooks/useAutoScroll";
+import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -65,7 +69,9 @@ const RnD = props => {
     breakpoint = "",
     handleContextMenuClick = () => {},
     itemData = {},
-    customProps
+    customProps,
+    sectionElement,
+    dataSets
   } = props;
   const {
     isSelectedElement,
@@ -73,7 +79,9 @@ const RnD = props => {
     updateDragging,
     contextMenu,
     setContextMenu,
-    theme
+    theme,
+    autoAlign,
+    setAutoAlign
   } = useEditorContext();
   const str_path = path.join("|");
   const selectedElementProps = isSelectedElement(str_path, type);
@@ -110,6 +118,10 @@ const RnD = props => {
   const {
     translation
   } = customProps;
+  const {
+    startAutoScroll,
+    stopAutoScroll
+  } = useAutoScroll(10, "slate-wrapper-scroll-container");
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -345,6 +357,16 @@ const RnD = props => {
   };
   const onDrag = e => {
     e.preventDefault();
+    const {
+      clientY
+    } = e;
+    if (clientY < 50) {
+      startAutoScroll("up");
+    } else if (window.innerHeight - clientY < 50) {
+      startAutoScroll("down");
+    } else {
+      stopAutoScroll();
+    }
     const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
     setAbsPosition({
       ...absPosition,
@@ -387,6 +409,7 @@ const RnD = props => {
   const onDragStop = (e, d) => {
     e.preventDefault();
     e.stopPropagation();
+    stopAutoScroll();
     if (dragging?.isDragging === 2 && dragging?.position?.strXY && dragging?.dragOver) {
       d.x = e.x;
       d.y = e.y;
@@ -447,13 +470,18 @@ const RnD = props => {
     }
     const updatedSize = {
       width: delta?.width + d.width,
-      height: delta?.height + d.height,
+      height: ref.offsetHeight,
       ...updatedPosition
     };
     onChange({
       ...updatedSize
     });
     handleResizeEvent("stop");
+    const parentPath = getParentSectionPath({
+      ref
+    }, ".freegrid-container-parent");
+    const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
+    reRenderChildNodes(editor, formatParentPath);
   };
   const onCloseSettings = () => {
     setSelectedElement({
@@ -555,6 +583,7 @@ const RnD = props => {
         ...DISABLE_RESIZING
       },
       ...getEventProps(),
+      ...(dataSets || {}),
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,
         style: {
@@ -627,10 +656,26 @@ const RnD = props => {
       theme: theme,
       translation: translation
     }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
-      parentEle: positionRef?.current?.resizableElement?.current,
       updated_at: updated_at,
       path: str_path,
-      editor: editor
+      editor: editor,
+      sectionElement: sectionElement,
+      sectionCls: `.freegrid-section_${path.join("_")}`,
+      dataSets: dataSets
+    }) : null, childType === "text" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualTextElement, {
+      editor: editor,
+      dataSets: dataSets,
+      getCurrentEle: getCurrentEle,
+      path: path
+    }) : null, type === "parent" && breakpoint === "xs" && !readOnly && autoAlign ? /*#__PURE__*/_jsx(ForceAutoAlignment, {
+      updated_at: updated_at,
+      path: str_path,
+      editor: editor,
+      sectionElement: sectionElement,
+      sectionCls: `.freegrid-section_${path.join("_")}`,
+      dataSets: dataSets,
+      autoAlign: autoAlign,
+      setAutoAlign: setAutoAlign
     }) : null]
   });
 };

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

@@ -0,0 +1,43 @@
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
+import { useState } from "react";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SnackbarAlert = ({
+  message,
+  setShowSnackBar,
+  severity = "info"
+}) => {
+  const [open, setOpen] = useState(!!message);
+  const {
+    theme
+  } = useEditorContext();
+  return /*#__PURE__*/_jsx(Snackbar, {
+    open: open,
+    autoHideDuration: 3000,
+    onClose: () => {
+      setOpen(false);
+      setShowSnackBar(false);
+    },
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    children: /*#__PURE__*/_jsx(Alert, {
+      severity: severity,
+      onClose: () => {
+        setOpen(false);
+        setShowSnackBar(false);
+      },
+      sx: {
+        background: theme?.palette?.primary?.gradientBtn,
+        color: "#FFFFFF",
+        "& .MuiAlert-icon": {
+          color: "#FFFFFF"
+        }
+      },
+      children: message
+    })
+  });
+};
+export default SnackbarAlert;

package/dist/Editor/hooks/useAutoScroll.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+function useAutoScroll(speed = 10, scrollElementId = "slate-wrapper-scroll-container") {
+  const scrollInterval = useRef(null);
+  function getScrollElement() {
+    return document.getElementById(scrollElementId) || window;
+  }
+  function startAutoScroll(direction) {
+    if (scrollInterval.current) return; // Prevent multiple intervals
+
+    const scrollContainer = getScrollElement();
+    scrollInterval.current = setInterval(() => {
+      scrollContainer.style.scrollBehavior = "auto";
+      if (direction === "up") {
+        scrollContainer.scrollBy(0, -speed);
+      } else if (direction === "down") {
+        scrollContainer.scrollBy(0, speed);
+        scrollContainer.style.scrollBehavior = "smooth";
+      }
+    }, 16); // Approx 60fps
+  }
+
+  function stopAutoScroll() {
+    if (scrollInterval.current) {
+      clearInterval(scrollInterval.current);
+      scrollInterval.current = null;
+      const scrollContainer = getScrollElement();
+      scrollContainer.style.scrollBehavior = "smooth";
+    }
+  }
+  useEffect(() => {
+    return () => stopAutoScroll(); // Cleanup on unmount
+  }, []);
+  return {
+    startAutoScroll,
+    stopAutoScroll
+  };
+}
+export default useAutoScroll;

package/dist/Editor/hooks/useMouseMove.js

@@ -40,6 +40,7 @@ export const EditorProvider = ({
   });
   const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
   const [activeBreakPoint, setActiveBreakPoint] = useState("");
+  const [autoAlign, setAutoAlign] = useState(false);
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -107,8 +108,10 @@ export const EditorProvider = ({
     setOpenTheme,
     activeBreakPoint,
     setActiveBreakPoint,
-    triggerRender
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint]);
+    triggerRender,
+    autoAlign,
+    setAutoAlign
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint, autoAlign]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/useTable.js

@@ -196,7 +196,10 @@ export const TableProvider = ({
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
       children: [/*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: () => setTableSelection(getDefaultTableSelection()),
+        onClickAway: () => {
+          setTableSelection(getDefaultTableSelection());
+          setHoverPath(null);
+        },
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })

package/dist/Editor/utils/divider.js

@@ -1,9 +1,12 @@
-import { Transforms } from "slate";
+import { Editor, Path, Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
-import { getCurrentNodeText } from "./helper";
+import { getCurrentEntry, getCurrentNodeText } from "./helper";
 export const insertDivider = editor => {
   Transforms.delete(editor, editor.selection);
   const blockText = getCurrentNodeText(editor);
+  const {
+    currentPath
+  } = getCurrentEntry(editor) || {};
   const divider = {
     type: "divider",
     children: [{
@@ -15,6 +18,11 @@ export const insertDivider = editor => {
       at: editor?.selection
     });
   }
-  Transforms.insertNodes(editor, divider);
+  const insertPath = blockText ? Path.next(currentPath) : currentPath;
+  Transforms.insertNodes(editor, divider, {
+    at: insertPath
+  });
   insertNewLine(editor);
+  const newLinePath = Path.next(insertPath);
+  Transforms.select(editor, Editor.start(editor, newLinePath));
 };

package/dist/Editor/utils/freegrid.js

@@ -22,8 +22,8 @@ export const insertFreeGridItem = (childType, childTypeNode, extProps = {}, type
     top_xs: 24,
     marginTop_xs: 12,
     width_xs: 250,
-    height_xs: 300,
-    gridArea_xs: "1 / 1 / 2 / 2",
+    // height_xs: 300,
+    // gridArea_xs: "1 / 1 / 2 / 2",
     sectionBgColor: "rgb(240, 108, 131)",
     ...(extProps || {})
   };

package/dist/Editor/utils/helper.js

@@ -624,20 +624,38 @@ export const getNextNode = editor => {
     return;
   }
 };
-export const getPreviousNode = editor => {
+export const getPreviousEntry = editor => {
   try {
-    const parentPath = Path.parent(editor?.selection?.anchor?.path);
-    const previousPath = Path.previous(parentPath);
-    const previousNode = Node.get(editor, previousPath);
+    const prevEntry = Editor.previous(editor, {
+      at: editor.selection,
+      match: n => Element.isElement(n)
+    });
+    if (!prevEntry) return null;
+    const [previousNode, previousPath] = prevEntry;
     return {
       previousNode,
       previousPath
     };
-  } catch (err) {
+  } catch (error) {
     return;
   }
 };
-const isRestricted = node => node?.type === "page-settings" || node?.type === "site-settings" || node?.children?.some(child => child.type === "dataView");
+export const getCurrentEntry = editor => {
+  try {
+    const currentEntry = Editor.node(editor, editor.selection, {
+      depth: 1
+    });
+    if (!currentEntry) return null;
+    const [currentNode, currentPath] = currentEntry;
+    return {
+      currentNode,
+      currentPath
+    };
+  } catch (error) {
+    return;
+  }
+};
+const isRestricted = node => node?.type === "page-settings" || node?.type === "site-settings" || node?.type === "viewData" || node?.children?.some(child => child.type === "dataView");
 export const isRestrictedNode = (event, editor) => {
   let isNodeRestricted = false;
   try {
@@ -651,15 +669,50 @@ export const isRestrictedNode = (event, editor) => {
       const {
         previousNode,
         previousPath
-      } = getPreviousNode(editor) || {};
-      if (isRestricted(previousNode)) {
+      } = getPreviousEntry(editor) || {};
+      const {
+        currentNode
+      } = getCurrentEntry(editor) || {};
+      if (currentNode?.type === "orderedList" || currentNode?.type === "unorderedList") {
+        event.preventDefault();
+        const path = selection?.anchor?.path;
+        if (!path) return;
+
+        // Lift the selected list-item out of the list
+        Transforms.liftNodes(editor, {
+          match: n => n.type === "list-item"
+        });
+
+        // Convert the lifted list-item into a paragraph
+        Transforms.setNodes(editor, {
+          type: "paragraph"
+        }, {
+          match: n => n.type === "list-item"
+        });
+
+        // Move focus to the modified paragraph (same path)
+        Transforms.select(editor, path);
+      } else 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 pathBeforePageSettings = Path.previous([previousPath[0]]);
         const endPath = Editor.end(editor, pathBeforePageSettings);
         Transforms.select(editor, endPath);
         isNodeRestricted = true;
+      } else if (previousNode?.type === "divider") {
+        event.preventDefault();
+        Transforms.removeNodes(editor, {
+          at: previousPath
+        });
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: " "
+          }]
+        }, {
+          at: previousPath
+        });
       }
     }
     return isNodeRestricted;

package/dist/Editor/utils/table.js

@@ -450,51 +450,53 @@ export class TableUtil {
           at: currentTablePath
         });
         Transforms.setNodes(this.editor, {
-          ...rowProps,
-          tableBorder: tableProps?.borderColor
+          ...rowProps
         }, {
           at: currentRowPath
         });
         Transforms.setNodes(this.editor, {
-          ...cellProps,
-          rowBorder: rowProps?.borderColor,
-          tableBorder: tableProps?.borderColor
+          ...cellProps
         }, {
           at: currentCellPath
         });
         applyColumnStyle(this.editor, currentCellPath, currentTablePath, cellProps, tableProps?.rows);
 
         // cell bg entire
-        if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
-          const {
-            rows
-          } = tableProps;
-          for (let r = 0; r < rows; r++) {
-            Transforms.setNodes(this.editor, {
-              entireBgColor: cellProps?.entireBgColor
-            }, {
-              at: [currentCellPath[0], r, currentCellPath[2]]
-            });
-          }
-        }
+        // if (
+        //   cellProps?.entireBgColor ||
+        //   tableProps?.borderColor ||
+        //   rowProps?.borderColor
+        // ) {
+        //   const { rows } = tableProps;
+
+        //   for (let r = 0; r < rows; r++) {
+        //     Transforms.setNodes(
+        //       this.editor,
+        //       {
+        //         entireBgColor: cellProps?.entireBgColor,
+        //       },
+        //       { at: [currentCellPath[0], r, currentCellPath[2]] }
+        //     );
+        //   }
+        // }
 
         // cell border all
-        if (tableProps?.borderColor || rowProps?.borderColor) {
-          const {
-            rows,
-            columns
-          } = tableProps;
-          for (let r = 0; r < rows; r++) {
-            for (let c = 0; c < columns; c++) {
-              Transforms.setNodes(this.editor, {
-                entireBorderColor: tableProps?.borderColor,
-                rowBorder: rowProps?.borderColor
-              }, {
-                at: [currentCellPath[0], r, c]
-              });
-            }
-          }
-        }
+        // if (tableProps?.borderColor || rowProps?.borderColor) {
+        //   const { rows, columns } = tableProps;
+
+        //   for (let r = 0; r < rows; r++) {
+        //     for (let c = 0; c < columns; c++) {
+        //       Transforms.setNodes(
+        //         this.editor,
+        //         {
+        //           entireBorderColor: tableProps?.borderColor,
+        //           rowBorder: rowProps?.borderColor,
+        //         },
+        //         { at: [currentCellPath[0], r, c] }
+        //       );
+        //     }
+        //   }
+        // }
       }
     } catch (err) {
       console.log(err);
@@ -508,19 +510,25 @@ export class TableUtil {
       at: path
     });
   };
-  getTableProps = () => {
+  getTableProps = otherOptions => {
     const {
       selection
     } = this.editor;
+    const options = {
+      ...(otherOptions || {})
+    };
     if (!!selection && Range.isCollapsed(selection)) {
       const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+        ...options
       });
       const [tableCellNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell",
+        ...options
       });
       const [tableRowNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row",
+        ...options
       });
       if (tableNode && tableCellNode && tableRowNode) {
         const [currentTable, currentTablePath] = tableNode;

package/package.json

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