@flozy/editor 9.6.3 → 9.6.4

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

@@ -2,20 +2,40 @@ const useVirtualElementStyles = () => ({
   root: {
     width: "320px",
     position: "fixed",
-    backgroundColor: "red",
-    height: "auto",
+    // backgroundColor: "red",
+    // height: "fit-content",
     overflow: "visible",
     pointerEvents: "none",
-    opacity: 0,
+    opacity: 1,
     right: 0,
     top: 0,
+    "& .leaf-item": {
+      fontSize: "var(--fontSize_xs) !important",
+      "& span": {
+        fontSize: "var(--fontSize_xs) !important"
+      }
+    },
+    "& .editor-blocker": {
+      display: "none"
+    },
     "& .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_text": {
+        height: "auto !important"
+      },
+      // "&.type_box": {
+      //   // display: "grid !important",
+      //   // gridTemplateRows: "repeat(auto-fill, 50px) !important",
+      //   // height: "min-content !important",
+      // },
+
       "& .debug-info, & .editor-blocker": {
         display: "none"
       },
@@ -25,4 +45,100 @@ 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",
+    pointerEvents: "none",
+    "& .leaf-item": {
+      fontSize: "var(--fontSize_xs) !important",
+      "& span": {
+        fontSize: "var(--fontSize_xs) !important"
+      }
+    },
+    "& .editor-blocker": {
+      display: "none"
+    },
+    "& .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",
+      display: "inherit !important",
+      "&.type_box": {
+        height: "auto !important"
+      },
+      "&.type_image": {
+        width: "var(--width_xs) !important",
+        height: "var(--height_xs) !important"
+      },
+      "&.type_text": {
+        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";
@@ -64,7 +68,12 @@ const RnD = props => {
     editor,
     breakpoint = "",
     handleContextMenuClick = () => {},
-    itemData = {}
+    itemData = {},
+    customProps,
+    sectionElement,
+    dataSets,
+    autoAlign,
+    setAutoAlign
   } = props;
   const {
     isSelectedElement,
@@ -106,6 +115,13 @@ const RnD = props => {
     y: 0
   });
   const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
+  const {
+    translation
+  } = customProps;
+  const {
+    startAutoScroll,
+    stopAutoScroll
+  } = useAutoScroll(10, "slate-wrapper-scroll-container");
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -347,6 +363,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,
@@ -389,6 +415,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;
@@ -449,13 +476,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({
@@ -470,13 +502,6 @@ const RnD = props => {
     }
     e.preventDefault();
     e.stopPropagation();
-    const isMuiBackdrop = e.target.classList.contains("MuiBackdrop-root");
-    if (isMuiBackdrop) {
-      setContextMenu({
-        path: null
-      });
-      return;
-    }
     onClick({
       detail: 1
     });
@@ -530,7 +555,7 @@ const RnD = props => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       component: Rnd,
-      placeholder: ItemTypes[childType] || "Item",
+      placeholder: translation(ItemTypes[childType]) || translation("Item"),
       id: eId || "",
       ref: c => {
         positionRef.current = c;
@@ -564,6 +589,7 @@ const RnD = props => {
         ...DISABLE_RESIZING
       },
       ...getEventProps(),
+      ...(dataSets || {}),
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,
         style: {
@@ -597,7 +623,9 @@ const RnD = props => {
       optionsProps: optionsProps,
       selectedAction: currentAction,
       path: str_path,
-      theme: theme
+      theme: theme,
+      translation: translation,
+      customProps: customProps
     }) : null, /*#__PURE__*/_jsx(ElementSettings, {
       open: Boolean(currentAction),
       currentAction: currentAction,
@@ -631,12 +659,29 @@ const RnD = props => {
       open: openContextMenu,
       contextMenu: contextMenu,
       handleClose: handleClose,
-      theme: theme
+      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 && enable ? /*#__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/Section/index.js

@@ -19,7 +19,8 @@ const Toolbar = ({
   readOnly,
   showTool,
   onSettings,
-  isSectionFullWidth
+  isSectionFullWidth,
+  translation
 }) => {
   return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
     component: "div",
@@ -33,7 +34,7 @@ const Toolbar = ({
       }
     },
     children: /*#__PURE__*/_jsx(Tooltip, {
-      title: "Section Settings",
+      title: translation("Section Settings"),
       children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onSettings,
         children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
@@ -51,7 +52,8 @@ const Section = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    translation
   } = customProps;
   const editor = useSlateStatic();
   // const [isHovering, setIsHovering] = useState(false);
@@ -176,7 +178,8 @@ const Section = props => {
         isSectionFullWidth: isSectionFullWidth,
         readOnly: readOnly,
         showTool: false,
-        onSettings: onSettings
+        onSettings: onSettings,
+        translation: translation
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

package/dist/Editor/common/Shorthands/elements.js

@@ -44,6 +44,60 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
+}, {
+  name: "Heading 4",
+  desc: "",
+  group: "Text",
+  type: "headingFour",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFour"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFour", false)
+}, {
+  name: "Heading 5",
+  desc: "",
+  group: "Text",
+  type: "headingFive",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFive"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFive", false)
+}, {
+  name: "Heading 6",
+  desc: "",
+  group: "Text",
+  type: "headingSix",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingSix"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingSix", false)
+}, {
+  name: "Paragraph 1",
+  desc: "",
+  group: "Text",
+  type: "paragraphOne",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphOne"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
+}, {
+  name: "Paragraph 2",
+  desc: "",
+  group: "Text",
+  type: "paragraphTwo",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphTwo"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
+}, {
+  name: "Paragraph 3",
+  desc: "",
+  group: "Text",
+  type: "paragraphThree",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphThree"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",
@@ -164,7 +218,10 @@ const ELEMENTS_LIST = [{
   type: "emoji",
   renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
     ...rest,
-    icoBtnType: "cmd"
+    icoBtnType: "cmd",
+    customProps: {
+      ...rest
+    }
   })
 }, {
   name: "Brain",
@@ -176,7 +233,10 @@ const ELEMENTS_LIST = [{
     element: {
       name: "Brain"
     },
-    icoBtnType: "cmd"
+    icoBtnType: "cmd",
+    customProps: {
+      ...rest
+    }
   })
 }, {
   name: "Divider",
@@ -299,10 +359,21 @@ const elements = props => {
   const {
     search,
     hideTools,
+    translation,
     editor
   } = props;
   const nodeType = canOpen(editor);
-  const filteredElements = ELEMENTS_LIST.filter(f => (hideTools || []).indexOf(f.type) === -1 && (!f?.hideFor || f?.hideFor?.indexOf(nodeType) === -1));
+  const translatedElements = ELEMENTS_LIST.map(element => ({
+    ...element,
+    name: translation(element.name),
+    renderComponent: element.renderComponent ? rest => {
+      return element.renderComponent({
+        ...rest,
+        translation
+      });
+    } : undefined
+  }));
+  const filteredElements = translatedElements.filter(f => (hideTools || []).indexOf(f.type) === -1 && (!f?.hideFor || f?.hideFor?.indexOf(nodeType) === -1));
   return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
 };
 export default elements;

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/common/StyleBuilder/appHeaderStyle.js

@@ -15,12 +15,12 @@ const appHeaderStyle = [{
     options: fontOptions,
     webFont: true,
     width: 7,
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
         style: {
           fontFamily: option.value
         },
-        children: "LOGO"
+        children: translation("LOGO")
       });
     }
   }, {
@@ -58,12 +58,12 @@ const appHeaderStyle = [{
     webFont: true,
     width: 7,
     options: fontOptions,
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
         style: {
           fontFamily: option.value
         },
-        children: "Home"
+        children: translation("Home")
       });
     }
   }, {

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

@@ -51,9 +51,9 @@ const boxStyle = [{
       text: "Dashed",
       value: "dashed"
     }],
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]

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

@@ -21,7 +21,8 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    }
+    },
+    themeEnabled: true
   }, {
     label: "Font Size",
     key: "textSize",
@@ -45,7 +46,8 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color"
+    type: "color",
+    themeEnabled: true
   }, {
     label: "Border Color",
     key: "borderColor",
@@ -104,9 +106,9 @@ const buttonStyle = [{
       text: "Dashed",
       value: "dashed"
     }],
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]

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

@@ -46,9 +46,9 @@ const dividerStyle = [{
       text: "Outset",
       value: "outset"
     }],
-    renderOption: option => {
+    renderOption: (option, lementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]

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

@@ -16,18 +16,18 @@ const embedVideoStyle = [{
     key: "aspectRatio",
     type: "textOptions",
     options: [{
-      text: "16:9 (Default)",
+      text: "deafultRatio",
       value: "16 / 9"
     }, {
-      text: "9:16",
+      text: "nineSixteen",
       value: "9 / 16"
     }, {
       text: "Custom",
       value: "custom"
     }],
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]
@@ -78,9 +78,9 @@ const embedVideoStyle = [{
       text: "Dashed",
       value: "dashed"
     }],
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]

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

@@ -57,9 +57,9 @@ const fieldStyle = [{
       text: "Dashed",
       value: "dashed"
     }],
-    renderOption: option => {
+    renderOption: (option, elementProps, translation) => {
       return /*#__PURE__*/_jsx("span", {
-        children: option.text
+        children: translation(option.text)
       });
     }
   }]