@flozy/editor 4.0.6 → 4.0.8

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { Node, Transforms } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import tableStyle from "../../../StyleBuilder/tableStyle";
+import { TableUtil } from "../../../../utils/table";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableSettings = 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 getTableProps = () => {
+    try {
+      const firstTCell = [...element_path, 0, 0, 0, 0];
+      const firstTCellTarget = {
+        anchor: {
+          path: [...firstTCell],
+          offset: 0
+        },
+        focus: {
+          path: [...firstTCell],
+          offset: 0
+        }
+      };
+      Transforms.select(editor, firstTCellTarget);
+      const table = new TableUtil(editor);
+      const tableProps = table.getTableProps();
+      return {
+        table,
+        tableProps
+      };
+    } catch (err) {
+      return element;
+    }
+  };
+  const onChange = data => {
+    try {
+      const {
+        table,
+        tableProps
+      } = getTableProps();
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      delete updateData.type;
+      table.updateTableStyle(updateData, {
+        ...tableProps
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: tableStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: tableStyle,
+        value: m.value,
+        element: getTableProps()?.tableProps?.styleProps || {},
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default TableSettings;

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

@@ -5,6 +5,8 @@ import VideoSettings from "./VideoSettings";
 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,
@@ -12,6 +14,8 @@ const SettingsComponents = {
   video: VideoSettings,
   box: BoxSettings,
   appHeader: AppHeaderSettings,
-  form: FormSettings
+  form: FormSettings,
+  table: TableSettings,
+  embedScript: CodeSettings
 };
 export default SettingsComponents;

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

@@ -2,17 +2,21 @@ export const settingsLabel = {
   text: "Text Settings",
   button: "Button Settings",
   image: "Image Settings",
-  video: "Video Settings",
+  video: "Embed or Video Settings",
   box: "Box Settings",
   appHeader: "App Header Settings",
-  form: "Form Settings"
+  form: "Form Settings",
+  table: "Table Settings",
+  embedScript: "Code Settings"
 };
 export const ItemTypes = {
   text: "Text",
   button: "Button",
   image: "Image",
-  video: "Video",
+  video: "Embed or Video",
   box: "Box",
   appHeader: "App Header",
-  form: "Form"
+  form: "Form",
+  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": {

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

@@ -61,7 +61,8 @@ const RnD = props => {
     dragging,
     setDragging,
     contextMenu,
-    setContextMenu
+    setContextMenu,
+    theme
   } = useEditorContext();
   const str_path = path.join("|");
   const selectedElementProps = isSelectedElement(str_path, type);
@@ -245,7 +246,7 @@ const RnD = props => {
           });
           break;
         default:
-          handleActionClick(actionType);
+          handleActionClick(actionType, path);
           return;
       }
     } catch (err) {
@@ -273,7 +274,6 @@ const RnD = props => {
   };
   const onDragStart = e => {
     e.preventDefault();
-    console.log(e?.target?.dataset);
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
       const {
         left,
@@ -521,7 +521,8 @@ const RnD = props => {
       editor: editor,
       path: sp,
       ...settingsProps,
-      elementProps: elementProps
+      elementProps: elementProps,
+      theme: theme
     }), /*#__PURE__*/_jsx(DragInfo, {
       anchorEl: rndRef?.current,
       open: dragInfoOpen,

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

@@ -5,7 +5,8 @@ const accordionTitleBtnStyle = [{
     label: "Accordion Color",
     key: "accordionTextColor",
     type: "color",
-    needPreview: true
+    needPreview: true,
+    hideGradient: true
   }, {
     label: "Accordion Background Color",
     key: "accordionBgColor",

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

@@ -54,6 +54,7 @@ const appHeaderStyle = [{
     label: "Menu Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     width: 7,
     options: fontOptions,
     renderOption: option => {

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const boxStyle = [{
   tab: "Colors",
   value: "sectionColors",
@@ -25,6 +26,36 @@ const boxStyle = [{
     label: "Border",
     key: "sectionBorderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px",
+    width: 6
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    width: 6,
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
   }]
 }];
 export default boxStyle;

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

@@ -11,6 +11,7 @@ const buttonStyle = [{
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     options: fontOptions,
     width: 7,
     renderOption: option => {

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

@@ -0,0 +1,10 @@
+const embedScriptStyle = [{
+  tab: "General",
+  value: "general",
+  fields: [{
+    label: "Embed Code",
+    key: "code",
+    type: "text"
+  }]
+}];
+export default embedScriptStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -89,7 +89,9 @@ const BannerSpacing = props => {
         value: !lockSpacing ? "" : pro_value?.top,
         className: "sliderInput",
         disabled: !lockSpacing,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -131,50 +133,54 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "top",
                 value: pro_value?.top,
                 className: "borderInput",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "right",
                 value: pro_value?.right,
                 className: "borderInput",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "bottom",
                 value: pro_value?.bottom,
                 className: "borderInput",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "left",
                 className: "borderInput",
                 value: pro_value?.left,
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             })]
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,11 +80,13 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : value?.topLeft || 0,
-        className: "sliderInput",
+        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
+        className: "sliderInput removeScroll",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,10 +127,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topLeft",
-            value: value?.topLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -136,10 +138,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topRight",
-            value: value?.topRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -148,10 +150,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomLeft",
-            value: value?.bottomLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -160,10 +162,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomRight",
-            value: value?.bottomRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -12,11 +12,12 @@ const Color = props => {
   } = props;
   const {
     key,
-    label
+    label,
+    hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
+    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -39,7 +40,7 @@ const Color = props => {
       [key]: updatedColors
     };
     setRecentColors(updatedColors);
-    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
+    localStorage.setItem("recentColors", JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -68,7 +69,8 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key]
+            recentColors: recentColors[key],
+            hideGradient: hideGradient
           })
         })
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -2,6 +2,9 @@ import React from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
+import { useSlate } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,12 +25,17 @@ const TextOptions = props => {
     isBreakpoint,
     options,
     renderOption,
-    width
+    width,
+    webFont = false
   } = data;
+  const {
+    fontFamilies
+  } = useEditorContext();
+  const editor = useSlate();
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
+  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({
@@ -69,7 +77,7 @@ const TextOptions = props => {
         },
         fullWidth: true,
         size: "small",
-        children: /*#__PURE__*/_jsx(Select, {
+        children: !webFont ? /*#__PURE__*/_jsx(Select, {
           onChange: handleChange,
           value: value || updatedOption[0]?.value,
           placeholder: data?.label,
@@ -94,6 +102,14 @@ const TextOptions = props => {
               }), renderOption ? renderOption(m, elementProps) : m.label || m.text]
             }, `${key}_${i}`);
           })
+        }) : /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
+          editor: editor,
+          format: key,
+          options: fontFamilies.options,
+          width: '100%',
+          onChange: onChange,
+          val: value,
+          webFont: true
         })
       })]
     })

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

@@ -16,6 +16,7 @@ const formButtonStyle = [{
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     options: fontOptions,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -31,6 +31,7 @@ const formStyle = [{
     key: "fontFamily",
     type: "textOptions",
     options: fontOptions,
+    webFont: true,
     width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -4,7 +4,8 @@ const sectionStyle = [{
   fields: [{
     label: "Section Name",
     key: "sectionName",
-    type: "text"
+    type: "text",
+    placeholder: "Welcome"
   }]
 }, {
   tab: "Colors",

package/dist/Editor/helper/deserialize/index.js

@@ -59,6 +59,9 @@ const ELEMENT_TAGS = {
   P: () => ({
     type: "paragraph"
   }),
+  DIV: () => ({
+    type: "paragraph"
+  }),
   PRE: () => ({
     type: "code"
   }),

package/dist/Editor/helper/index.js

@@ -208,7 +208,8 @@ export const onPasteRnDNode = (editor, {
         left: parsed_node?.left + 20,
         marginTop: parsed_node?.marginTop + 20,
         // to maintain unique drop location in different section also
-        gridArea: "1 / 1 / 2 / 2"
+        gridArea: "1 / 1 / 2 / 2",
+        xs_updatedOn: null
       }], {
         at: new_path
       });
@@ -293,4 +294,26 @@ export const debounce = function (func, wait, immediate) {
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
+};
+export const getTextColor = (color = "") => {
+  return color?.indexOf("gradient") >= 0 ? {
+    background: color?.concat("text"),
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    caretColor: "black"
+  } : {
+    color
+  };
+};
+export const getBorderColor = (borderColor = "") => {
+  const borderStyle = borderColor ? {
+    border: "1px solid"
+  } : {};
+  if (borderColor?.indexOf("gradient") >= 0) {
+    borderStyle.borderImage = `${borderColor} 1`;
+  } else {
+    borderStyle.borderColor = borderColor;
+  }
+  return borderStyle;
 };

package/dist/Editor/helper/theme.js

@@ -146,4 +146,5 @@ export const groupByBreakpoint = (styleProps, theme) => {
       ...groupedXS
     }
   };
-};
+};
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);

package/dist/Editor/hooks/useMouseMove.js

@@ -34,6 +34,7 @@ export const EditorProvider = ({
   const [contextMenu, setContextMenu] = useState({
     path: null
   });
+  const [fontFamilies, setFontFamilies] = useState({});
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -82,7 +83,9 @@ export const EditorProvider = ({
       setContextMenu,
       contextMenu,
       openAI,
-      setOpenAI
+      setOpenAI,
+      fontFamilies,
+      setFontFamilies
     },
     children: children
   });