@flozy/editor 4.0.7 → 4.1.0

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

@@ -29,6 +29,10 @@ const AddElement = props => {
         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

@@ -5,6 +5,7 @@ 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 = {
@@ -16,6 +17,7 @@ const itemOptions = {
   appHeader: appHeaderOptions,
   form: formOptions,
   section: sectionOptions,
-  table: tableOptions
+  table: tableOptions,
+  embedScript: embedScriptOptions
 };
 export default itemOptions;

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

@@ -160,6 +160,9 @@ const useFreeGridStyles = ({
           }
         },
         "& .fgi_type_appHeader": {
+          "& .MuiAppBar-root": {
+            zIndex: 100
+          },
           "& .MuiToolbar-root": {
             paddingLeft: "0px !important",
             paddingRight: "0px !important",
@@ -188,6 +191,12 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .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

@@ -184,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;

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

@@ -7,11 +7,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const TextSettings = props => {
   const {
     editor,
-    path
+    path,
+    theme
   } = props;
   const item_path = path.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
-  const classes = usePopupStyle();
+  const classes = usePopupStyle(theme);
+  console.log(theme);
   useEffect(() => {
     try {
       ReactEditor.focus(editor);

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

@@ -6,6 +6,7 @@ import BoxSettings from "./BoxSettings";
 import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
 import TableSettings from "./TableSettings";
+import CodeSettings from "./CodeSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -14,6 +15,7 @@ const SettingsComponents = {
   box: BoxSettings,
   appHeader: AppHeaderSettings,
   form: FormSettings,
-  table: TableSettings
+  table: TableSettings,
+  embedScript: CodeSettings
 };
 export default SettingsComponents;

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -6,7 +6,8 @@ export const settingsLabel = {
   box: "Box Settings",
   appHeader: "App Header Settings",
   form: "Form Settings",
-  table: "Table Settings"
+  table: "Table Settings",
+  embedScript: "Code Settings"
 };
 export const ItemTypes = {
   text: "Text",
@@ -16,5 +17,6 @@ export const ItemTypes = {
   box: "Box",
   appHeader: "App Header",
   form: "Form",
-  table: "Table"
+  table: "Table",
+  embedScript: "Code"
 };

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -2,17 +2,27 @@ const useOptionsPopupStyle = () => ({
   root: {
     zIndex: 1200,
     background: "#FFF",
-    borderRadius: "5px",
+    borderRadius: "7px",
     overflow: "hidden",
     boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+    marginRight: "4px !important",
     "& .papper-root": {
-      borderTop: "8px solid #1976d2",
       width: "270px",
-      boxShadow: "none"
+      boxShadow: "none",
+      border: "1px solid rgba(228, 232, 235, 1)",
+      borderRadius: "7px"
     },
     "& .item-list-wrpr": {
       paddingTop: "0px",
-      paddingBottom: "0px"
+      paddingBottom: "0px",
+      padding: "12px 12px",
+      "& .MuiListItemButton-root": {
+        borderRadius: "7px",
+        "&:hover": {
+          color: "#000",
+          background: "rgba(233, 243, 254, 1)"
+        }
+      }
     },
     "& .item-wrapper": {
       padding: "12px",
@@ -22,6 +32,15 @@ const useOptionsPopupStyle = () => ({
         fontWeight: "bold",
         justifyContent: "space-between",
         alignItems: "center",
+        position: "relative",
+        "&:after": {
+          position: "absolute",
+          width: "100%",
+          bottom: 0,
+          left: 0,
+          content: '" "',
+          borderBottom: "1px solid #ccc"
+        },
         "& .MuiIconButton-root": {
           padding: "4px",
           "& svg": {