@flozy/editor 4.0.6 → 4.0.8

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -32,7 +32,10 @@ const FreeGridBox = props => {
     zIndex,
     sectionBgColor,
     sectionBackgroundImage,
-    sectionBorderRadius
+    sectionBorderRadius,
+    borderWidth,
+    borderColor,
+    borderStyle
   } = element;
   // get values based on breakpoint size
   const {
@@ -197,7 +200,10 @@ const FreeGridBox = props => {
           ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
         },
         background: sectionBgColor,
-        backgroundImage: `url(${sectionBackgroundImage})`
+        backgroundImage: `url(${sectionBackgroundImage})`,
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderStyle: borderStyle || "solid"
       },
       children: children
     })

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -13,6 +13,7 @@ import { bringItemToFB } from "../../helper";
 import itemOptions from "./Options/sectionItemOptions";
 import { formField } from "../../utils/formfield";
 import Workflow from "../Form/Workflow";
+import EmbedScriptPopup from "../EmbedScript/EmbedScriptPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FreeGridItem = props => {
@@ -48,7 +49,7 @@ const FreeGridItem = props => {
     selectedElement
   } = useEditorContext();
   const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
-  const [openWorkflow, setOpenWorkflow] = useState(false);
+  const [popup, setPopup] = useState(null);
   const onChangeSettings = () => {};
   const onChange = data => {
     let updateData = {
@@ -151,8 +152,29 @@ const FreeGridItem = props => {
       console.log(err, "Add Field Error in Form Builder");
     }
   };
-  const closeWorkflow = () => {
-    setOpenWorkflow(false);
+  const onClose = () => {
+    setPopup(null);
+    setSelectedElement({
+      ...selectedElement,
+      enable: 1
+    });
+  };
+  const selectCode = () => {
+    try {
+      const emsTarget = {
+        anchor: {
+          path: [...path, 0, 0],
+          offset: 0
+        },
+        focus: {
+          path: [...path, 0, 0],
+          offset: 0
+        }
+      };
+      Transforms.select(editor, emsTarget);
+    } catch (err) {
+      console.log(err);
+    }
   };
   const onWorkflowSave = data => {
     const updateData = {
@@ -172,11 +194,19 @@ const FreeGridItem = props => {
           ...selectedElement,
           enable: 2
         });
-        setOpenWorkflow(true);
+        setPopup("workflow");
         break;
       case "addFormField":
         onAddFormField();
         break;
+      case "addEmbedScript":
+        setSelectedElement({
+          ...selectedElement,
+          enable: 2
+        });
+        selectCode();
+        setPopup("embedScript");
+        break;
       default:
         break;
     }
@@ -224,11 +254,18 @@ const FreeGridItem = props => {
       ...attributes,
       className: `fgi_type_${childType}`,
       children: [children, /*#__PURE__*/_jsx(Workflow, {
-        openWorkflow: openWorkflow,
+        openWorkflow: popup === "workflow",
         element: element,
         customWorkflowElement: element?.children?.[0] || null,
-        closeWorkflow: closeWorkflow,
+        closeWorkflow: onClose,
         onSave: onWorkflowSave
+      }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
+        open: popup === "embedScript",
+        customProps: customProps,
+        editor: editor,
+        onClose: onClose,
+        updatePath: [...path, 0],
+        parentPath: [...path]
       })]
     })
   });

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -24,7 +24,15 @@ const AddElement = props => {
       }), /*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("addVideo"),
-        children: "Video"
+        children: "Embed or Video"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addTable"),
+        children: "Table"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addCode"),
+        children: "Code"
       }), /*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("addBox"),

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -4,6 +4,8 @@ const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
 const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
 const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
+const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
+const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
 const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
 const itemOptions = {
@@ -14,6 +16,8 @@ const itemOptions = {
   box: boxOptions,
   appHeader: appHeaderOptions,
   form: formOptions,
-  section: sectionOptions
+  section: sectionOptions,
+  table: tableOptions,
+  embedScript: embedScriptOptions
 };
 export default itemOptions;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -150,6 +150,9 @@ const useFreeGridStyles = ({
         },
 
         "& .fgi_type_form": {
+          "& .form-wrapper": {
+            padding: "0px !important"
+          },
           "& legend": {
             paddingLeft: "16px",
             paddingTop: "16px",
@@ -157,6 +160,9 @@ const useFreeGridStyles = ({
           }
         },
         "& .fgi_type_appHeader": {
+          "& .MuiAppBar-root": {
+            zIndex: 100
+          },
           "& .MuiToolbar-root": {
             paddingLeft: "0px !important",
             paddingRight: "0px !important",
@@ -170,6 +176,27 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .fgi_type_table": {
+          "& .tableToolBar": {
+            right: "0px",
+            left: "auto",
+            top: "-34px",
+            display: "flex",
+            flexDirection: "row-reverse",
+            "& .toolbtn.settings": {
+              display: "none"
+            },
+            "& .toolbtn.remove": {
+              display: "none"
+            }
+          }
+        },
+        "& .fgi_type_embedScript": {
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#FFF",
+          overflow: "hidden"
+        },
         /** element toolbar hide */
         "& .element-toolbar": {
           display: "none"

package/dist/Editor/Elements/List/CheckList.js

@@ -68,7 +68,8 @@ const CheckList = ({
         style: {
           flex: 1,
           opacity: checked ? 1 : 1,
-          textDecoration: !checked ? "none" : "none"
+          textDecoration: !checked ? "none" : "none",
+          width: '90%'
         },
         className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: nestedCheckList ? "" : "Todo List",

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, Popper, Typography } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,7 +15,6 @@ import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
-import useClickOutside from "../../hooks/useClickOutside";
 import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -150,7 +149,7 @@ const Table = props => {
           title: text,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: "toolbtn",
+            className: `toolbtn ${action?.type}`,
             onClick: handleAction(action),
             children: /*#__PURE__*/_jsx(Icon, {})
           })
@@ -185,7 +184,7 @@ const Table = props => {
       sx: classes.table,
       style: {
         background: bgColor,
-        border: `1px solid ${borderColor}`,
+        border: borderColor ? `1px solid ${borderColor}` : "",
         width: "auto"
       },
       children: /*#__PURE__*/_jsx(TableBody, {

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

@@ -179,7 +179,7 @@ const TableCell = props => {
     style: {
       position: "relative",
       background: bgColor || entireBgColor,
-      border: `3px solid ${cellBorderColor}`,
+      border: cellBorderColor ? `3px solid ${cellBorderColor}` : "",
       ...(sizeProps || {})
     },
     onContextMenu: onRightClick,

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

@@ -19,11 +19,12 @@ const TableRow = props => {
     match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
   });
   const [tableProps] = tableNode || [{}];
+  const rowBorderColor = borderColor || tableProps?.borderColor;
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
       backgroundColor: bgColor,
-      border: `1px solid ${borderColor || tableProps?.borderColor}`
+      border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children
   });

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FontFamilyAutocomplete = ({
+  editor,
+  format,
+  options,
+  width,
+  onChange = () => {},
+  val = "",
+  webFont = false
+}) => {
+  const markValue = activeMark(editor, format);
+  const value = !webFont ? markValue : val;
+  const changeMarkData = (event, newValue, format) => {
+    if (!webFont) {
+      event.preventDefault();
+      const value = newValue;
+      addMarkData(editor, {
+        format,
+        value
+      });
+    } else {
+      onChange({
+        [format]: newValue
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    size: "small",
+    style: {
+      fontFamily: `${value || ""}`,
+      width: width || "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "14px"
+    },
+    value: value || options?.[0],
+    className: "editor-dd",
+    onChange: (e, newValue) => changeMarkData(e, newValue, format),
+    getOptionLabel: option => {
+      return option;
+    },
+    options: options,
+    defaultValue: options?.[0],
+    renderOption: (props, option) => {
+      return /*#__PURE__*/_jsx("li", {
+        ...props,
+        style: {
+          fontFamily: option
+        },
+        children: option
+      });
+    },
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      sx: {
+        "& .MuiInputBase-root.MuiOutlinedInput-root": {
+          fontFamily: `${value}`
+        }
+      },
+      ...params
+    })
+  });
+};
+export default FontFamilyAutocomplete;

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -222,7 +222,8 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
-    fontWeight: 500
+    fontWeight: 500,
+    color: theme?.palette?.editor?.textColor || "#000"
   },
   typoLabel2: {
     fontSize: "14px",
@@ -510,16 +511,16 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: '5px',
+    padding: "5px",
     position: "relative",
     margin: "8px",
     marginBottom: "0px",
-    '& .img-wrapper': {
+    "& .img-wrapper": {
       "&:hover": {
-        padding: '0px 2px 0px 2px',
-        backgroundColor: '#E9F3FE',
-        border: '1px solid #2563EB40',
-        borderRadius: '5px',
+        padding: "0px 2px 0px 2px",
+        backgroundColor: "#E9F3FE",
+        border: "1px solid #2563EB40",
+        borderRadius: "5px",
         height: "100%",
         margin: "0px"
         // "& .template-card-action": {
@@ -588,10 +589,10 @@ const usePopupStyle = theme => ({
     "& .MuiPopover-paper": {
       // minWidth: "130px",
       border: "1px solid #E4E8EB",
+      maxHeight: "140px",
       background: theme?.palette?.editor?.background,
       overflowY: "hidden",
       padding: "6px 12px 6px 0px",
-      maxHeight: "140px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -12,6 +12,8 @@ import { getBorderColor } from "../../utils/helper";
 import SelectTypography from "./MiniTextFormat/SelectTypography";
 import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
+import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -29,7 +31,9 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const fontFamily = allTools.find(f => f.format === "fontFamily");
+  const {
+    fontFamilies
+  } = useEditorContext();
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -119,10 +123,10 @@ const TextFormat = props => {
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatField1,
-        children: /*#__PURE__*/_jsx(Dropdown, {
+        sx: classes.textFormatField,
+        children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
           classes: classes,
-          ...fontFamily,
+          ...fontFamilies,
           editor: editor
         })
       })]

package/dist/Editor/common/ColorPickerButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,7 +11,8 @@ const ColorPickerButton = props => {
     onSave,
     defaultColors = [],
     classes = {},
-    recentColors = []
+    recentColors = [],
+    hideGradient
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -29,6 +30,13 @@ const ColorPickerButton = props => {
   const handleColorChange = color => {
     setColor(color);
   };
+  const initialColors = useMemo(() => {
+    let colors = [...recentColors, ...defaultColors];
+    if (hideGradient) {
+      colors = colors.filter(c => c && !c.includes("gradient"));
+    }
+    return colors;
+  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -61,10 +69,10 @@ const ColorPickerButton = props => {
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: true,
+              gradient: hideGradient ? false : true,
               value: color,
               onChange: handleColorChange,
-              defaultColors: [...recentColors, ...defaultColors] || []
+              defaultColors: initialColors
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+import WebFont from "webfontloader";
+import { useEditorContext } from "../../hooks/useMouseMove";
+const FontLoader = props => {
+  const {
+    otherProps,
+    readOnly
+  } = props;
+  const {
+    setFontFamilies
+  } = useEditorContext();
+  const loadFontsInBatches = (families, batchSize = 5) => {
+    let currentIndex = 0;
+    function loadNextBatch() {
+      if (currentIndex >= families.length) {
+        console.log('All fonts have been loaded');
+        return;
+      }
+      const batch = families.slice(currentIndex, currentIndex + batchSize);
+      const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
+      WebFont.load({
+        google: {
+          families: [...batchWithWeights]
+        },
+        active: () => {
+          console.log(`Fonts loaded successfully: ${batch}`);
+          currentIndex += batchSize;
+          loadNextBatch();
+        },
+        inactive: () => {
+          console.log(`Font loading failed for: ${batch}`);
+        }
+      });
+    }
+    loadNextBatch();
+  };
+  const sanitizeFontFamily = fontFamily => {
+    return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
+  };
+  useEffect(() => {
+    let families = [];
+    if (!readOnly) {
+      otherProps.services("listGoogleFont", []).then(data => {
+        families = data?.data.map(sanitizeFontFamily);
+        setFontFamilies({
+          id: 1,
+          format: "fontFamily",
+          type: "fontfamilydropdown",
+          options: families || []
+        });
+        loadFontsInBatches(families);
+      }).catch(err => {
+        console.log(err);
+      });
+    } else {
+      const elements = Array.from(document.querySelectorAll("*"));
+      const fontSet = new Set();
+      elements.forEach(element => {
+        const computedStyles = window.getComputedStyle(element);
+        fontSet.add(sanitizeFontFamily(computedStyles.fontFamily));
+      });
+      families = Array.from(fontSet);
+      loadFontsInBatches(families);
+    }
+  }, []);
+  return null;
+};
+export default FontLoader;

package/dist/Editor/common/Icon.js

@@ -218,6 +218,7 @@ const iconList = {
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
   embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
+    className: "fg-op-ico",
     size: 20,
     style: {
       fill: "#64748B"
@@ -267,6 +268,9 @@ const iconList = {
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
   addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
 };
+export const icons = {
+  ...iconList
+};
 const Icon = props => {
   const {
     icon

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -10,6 +10,7 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import SaveIcon from "@mui/icons-material/Save";
 import LinkIcon from "./Icons/LinkIcon";
+import CodeIcon from "@mui/icons-material/Code";
 import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
 const Actions = {
   ai: {
@@ -92,6 +93,12 @@ const Actions = {
     Icon: WorkflowIcon,
     title: "Workflow"
   },
+  embedScript: {
+    type: "addEmbedScript",
+    Button: IconButton,
+    Icon: CodeIcon,
+    title: "Embed Code"
+  },
   saveAsTemplate: {
     type: "saveAsTemplate",
     Button: IconButton,

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -16,7 +16,8 @@ const Settings = props => {
     onClose,
     editor,
     classes,
-    customProps
+    customProps,
+    theme
   } = props;
   const title = settingsLabel[childType] || "Settings";
   const Settings = SettingsComponents[childType];
@@ -49,7 +50,8 @@ const Settings = props => {
           children: Settings ? /*#__PURE__*/_jsx(Settings, {
             editor: editor,
             path: path,
-            customProps: customProps
+            customProps: customProps,
+            theme: theme
           }) : null
         })]
       })

package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import embedScriptStyle from "../../../StyleBuilder/embedScriptStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CodeSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: embedScriptStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: embedScriptStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default CodeSettings;