@flozy/editor 1.4.0 → 1.4.2

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import { activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectFreeSolo = ({
+  editor,
+  format,
+  options
+}) => {
+  const value = activeMark(editor, format);
+  console.log(options);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    console.log(event.target.value, format);
+    // const value = event.target.value;
+    // addMarkData(editor, { format, value });
+  };
+
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    size: "small",
+    style: {},
+    value: value?.value,
+    className: "editor-dd",
+    onChange: e => changeMarkData(e, format),
+    getOptionLabel: option => option.text,
+    options: options,
+    freeSolo: true,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params
+    })
+  });
+};
+export default SelectFreeSolo;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { sizeMap } from "../../utils/font.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Text = ({
+  editor,
+  format,
+  options,
+  style = {}
+}) => {
+  const value = activeMark(editor, format);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    const value = event.target.value;
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    size: "small",
+    style: style,
+    value: sizeMap[value],
+    className: "editor-text",
+    onChange: e => changeMarkData(e, format)
+  });
+};
+export default Text;

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

@@ -1,4 +1,6 @@
 import BlockButton from "./BlockButton";
 import Dropdown from "./Dropdown";
 import MarkButton from "./MarkButton";
-export { BlockButton, Dropdown, MarkButton };
+import Autocomplete from "./Autocomplete";
+import Text from "./Text";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };

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

@@ -5,7 +5,6 @@ import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
-import useFormat from "../../utils/customHooks/useFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = () => {
@@ -18,9 +17,7 @@ const PopupTool = () => {
   } = editor;
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  console.log(useFormat(editor, null));
   useEffect(() => {
-    console.log(selection, inFocus);
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {

package/dist/Editor/Toolbar/Toolbar.js

@@ -20,8 +20,10 @@ import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
 import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
-import "./styles.css";
 import FormButton from "../Elements/Form/FormButton.js";
+import Text from "./FormatTools/Text";
+import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -65,6 +67,14 @@ const Toolbar = props => {
               ...element,
               editor: editor
             }, element.id);
+          case "text":
+            return /*#__PURE__*/_jsx(Text, {
+              ...element,
+              editor: editor,
+              style: {
+                width: "80px"
+              }
+            }, element.id);
           case "link":
             return /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, "link"),
@@ -128,14 +138,11 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(CarouselButton, {
               editor: editor
             }, element.id);
-          // case "chip-text":
-          //   return (
-          //     <ChipTextButton
-          //       key={element.id}
-          //       editor={editor}
-          //       customProps={customProps}
-          //     />
-          //   );
+          case "chip-text":
+            return /*#__PURE__*/_jsx(ChipTextButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           // case "drawer":
           //   return (
           //     <DrawerMenuButton

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

@@ -8,6 +8,24 @@ const appHeaderStyle = [{
     key: "appTitle",
     type: "text",
     placeholder: "Leave Empty, If only Logo"
+  }, {
+    label: "Title Font Size",
+    key: "logoFontSize",
+    type: "text",
+    placeholder: "16px"
+  }, {
+    label: "Title Font Family",
+    key: "titleFontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
     label: "App Logo URL",
     key: "appLogo",
@@ -80,5 +98,22 @@ const appHeaderStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }];
 export default appHeaderStyle;

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

@@ -39,6 +39,25 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
+}, {
+  tab: "Icon",
+  value: "icon",
+  fields: [{
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
+  }, {
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
+  }]
 }, {
   tab: "Position",
   value: "position",
@@ -88,6 +107,23 @@ const buttonStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

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

@@ -12,6 +12,9 @@ const fieldStyle = [{
     options: [{
       label: "Textbox",
       value: "text"
+    }, {
+      label: "TextArea",
+      value: "textArea"
     }]
   }, {
     label: "Placeholder",
@@ -19,10 +22,10 @@ const fieldStyle = [{
     type: "text"
   }]
 }, {
-  tab: "Banner Spacing",
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
@@ -66,6 +69,11 @@ const fieldStyle = [{
     label: "Grid Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Height",
+    key: "height",
+    type: "text",
+    placeholder: "40px"
   }]
 }];
 export default fieldStyle;

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

@@ -104,7 +104,7 @@ const Alignment = props => {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
           name: "flexDirection",
-          value: value?.flexDirection || "row",
+          value: value?.flexDirection || "column",
           onChange: handleChange,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",

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

@@ -41,15 +41,22 @@ const BannerSpacing = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 4,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       sx: {
         pb: 2,
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center"
       },
-      children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          fontSize: "12px"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsxs("div", {
         style: {
           width: "100px",
           height: "100px",
@@ -148,7 +155,7 @@ const BannerSpacing = props => {
           onClick: onLockSpacing,
           children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
-      })
+      })]
     })
   });
 };

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

@@ -42,15 +42,22 @@ const BorderRadius = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 4,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
-        display: "flex"
+        display: "flex",
+        flexDirection: "column"
       },
       justifyContent: "center",
       alignContent: "center",
-      children: /*#__PURE__*/_jsxs("div", {
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          fontSize: "12px"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsxs("div", {
         style: {
           width: "100px",
           height: "100px",
@@ -137,7 +144,7 @@ const BorderRadius = props => {
           onClick: onLockRadius,
           children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
-      })
+      })]
     })
   });
 };

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

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
+import * as fIcons from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
+  if (b.indexOf("Outlined") > -1) {
+    a.outlined.push(b);
+  } else if (b.indexOf("Rounded") > -1) {
+    a.rounded.push(b);
+  } else if (b.indexOf("Sharp") > -1) {
+    a.sharp.push(b);
+  } else if (b.indexOf("TwoTone") > -1) {
+    a.tt.push(b);
+  } else {
+    a.filled.push(b);
+  }
+  return a;
+}, {
+  filled: [],
+  outlined: [],
+  rounded: [],
+  tt: [],
+  sharp: []
+});
+const Icons = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const [val, setVal] = useState("");
+  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
+  const onSelectIcon = ico => () => {
+    onChange({
+      [key]: ico
+    });
+  };
+  const handleChange = e => {
+    const keyVal = e.target.value?.toLowerCase();
+    setVal(keyVal);
+    if (keyVal) {
+      setList(MUIIcons.filled.filter(f => {
+        return f.toLowerCase().indexOf(keyVal) > -1;
+      }).slice(0, 90));
+    } else {
+      setList(MUIIcons.filled.slice(0, 90));
+    }
+  };
+  const SelectedIcon = value ? fIcons[value] : null;
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px"
+        },
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 10,
+          children: /*#__PURE__*/_jsx(TextField, {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search Icons...",
+            value: val,
+            onChange: handleChange
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 2,
+          style: {
+            paddingLeft: "8px"
+          },
+          children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      textAlign: "center",
+      style: {
+        maxHeight: "200px",
+        overflowY: "auto"
+      },
+      children: list.map(m => {
+        const Ico = fIcons[m];
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: m,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onSelectIcon(m),
+            children: /*#__PURE__*/_jsx(Ico, {})
+          })
+        }, `mui_ico_${m}`);
+      })
+    })]
+  });
+};
+export default Icons;

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

@@ -13,6 +13,7 @@ import SaveAsTemplate from "./saveAsTemplate";
 import TextAlign from "./textAlign";
 import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
+import Icons from "./icons";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -28,6 +29,7 @@ const FieldMap = {
   saveAsTemplate: SaveAsTemplate,
   textAlign: TextAlign,
   textOptions: TextOptions,
-  selectBox: SelectBox
+  selectBox: SelectBox,
+  icons: Icons
 };
 export default FieldMap;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Grid, MenuItem, Select } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextOptions = props => {
   const {
     value,
@@ -19,13 +20,19 @@ const TextOptions = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         padding: "10px"
       },
-      children: /*#__PURE__*/_jsx(Select, {
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          marginBottom: "8px",
+          display: "flex"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsx(Select, {
         onChange: handleChange,
         value: value || options[0]?.value,
         placeholder: data?.label,
@@ -37,7 +44,7 @@ const TextOptions = props => {
             children: renderOption ? renderOption(m) : m.label || m.text
           }, `${key}_${m.value}`);
         })
-      })
+      })]
     })
   });
 };

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

@@ -80,6 +80,14 @@ const formButtonStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "grid",
+    type: "gridSize"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

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

@@ -1,18 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const gridItemStyle = [{
-  tab: "Banner Spacing",
+  tab: "Margin",
+  value: "margin",
+  fields: [{
+    label: "Margin",
+    key: "margin",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",
@@ -31,6 +67,23 @@ const gridItemStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }, {
   tab: "Position",
   value: "position",
@@ -46,6 +99,11 @@ const gridItemStyle = [{
     label: "Grid Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Grid Height",
+    key: "gridHeight",
+    type: "text",
+    placeholder: "100px"
   }]
 }];
 export default gridItemStyle;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const gridStyle = [{
   tab: "General",
   value: "general",
@@ -8,20 +9,47 @@ const gridStyle = [{
     placeholder: "Id should be unique for the page..."
   }]
 }, {
-  tab: "Banner Spacing",
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
-    label: "Border Radius",
+    label: "Border",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",