@flozy/editor 1.1.5 → 1.1.7

package/dist/Editor/Toolbar/Toolbar.js

@@ -23,6 +23,9 @@ import SignatureButton from "../Elements/Signature/SignatureButton";
 import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
 import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
+import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import DrawerMenuButton from "../Elements/DrawerMenu/DrawerMenuButton";
+import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -186,6 +189,21 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(CarouselButton, {
               editor: editor
             }, element.id);
+          case "chip-text":
+            return /*#__PURE__*/_jsx(ChipTextButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
+          case "drawer":
+            return /*#__PURE__*/_jsx(DrawerMenuButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
+          case "app-header":
+            return /*#__PURE__*/_jsx(AppHeaderButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -125,5 +125,14 @@ const toolbarGroups = [[{
 }, {
   id: 34,
   type: "carousel"
+}, {
+  id: 35,
+  type: "chip-text"
+}, {
+  id: 36,
+  type: "drawer"
+}, {
+  id: 37,
+  type: "app-header"
 }]];
 export default toolbarGroups;

package/dist/Editor/common/ColorPickerButton.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Grid, Button, Popover } from "@mui/material";
+import ColorPicker from "react-best-gradient-color-picker";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPickerButton = props => {
+  const {
+    value,
+    onSave
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [color, setColor] = useState(value);
+  const open = Boolean(anchorEl);
+  const handleColorPicker = e => {
+    setAnchorEl(e.currentTarget);
+  };
+  const handleSave = () => {
+    onSave(color);
+    handleClose();
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      style: {
+        background: value,
+        height: "32px",
+        border: "1px solid #000"
+      },
+      onClick: handleColorPicker
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        padding: 2,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          item: true,
+          xs: 12,
+          children: [/*#__PURE__*/_jsx(ColorPicker, {
+            value: color,
+            onChange: setColor
+          }), /*#__PURE__*/_jsxs("div", {
+            style: {
+              display: "flex",
+              justifyContent: "end",
+              marginTop: "16px"
+            },
+            children: [/*#__PURE__*/_jsx(Button, {
+              onClick: handleClose,
+              children: "Cancel"
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: handleSave,
+              children: "Save"
+            })]
+          })]
+        })
+      })
+    })]
+  });
+};
+export default ColorPickerButton;

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

@@ -0,0 +1,63 @@
+const appHeaderStyle = [{
+  tab: "Logo",
+  value: "appLogo",
+  fields: [{
+    label: "App Logo URL",
+    key: "appLogo",
+    type: "text"
+  }, {
+    label: "App Logo",
+    key: "appLogo",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Title",
+  value: "appTitle",
+  fields: [{
+    label: "App Title",
+    key: "appTitle",
+    type: "text"
+  }]
+}, {
+  tab: "Menus",
+  value: "menus",
+  fields: [{
+    label: "Menus",
+    key: "menus",
+    type: "menusArray"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default appHeaderStyle;

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

@@ -0,0 +1,35 @@
+const chipTextStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default chipTextStyle;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Grid, TextField, InputAdornment } from "@mui/material";
+import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Color = props => {
@@ -19,9 +20,9 @@ const Color = props => {
     bgColor,
     borderColor
   } = elementProps;
-  const handleChange = e => {
+  const onSave = color => {
     onChange({
-      [key]: e.target.value
+      [key]: color
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -35,7 +36,7 @@ const Color = props => {
         style: {
           padding: "8px",
           color: textColor,
-          backgroundColor: bgColor,
+          background: bgColor,
           border: `1px solid ${borderColor}`
         },
         children: "Text Content"
@@ -66,19 +67,12 @@ const Color = props => {
             shrink: true
           },
           InputProps: {
-            endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
               position: "end",
-              children: [/*#__PURE__*/_jsx("input", {
-                type: "color",
+              children: /*#__PURE__*/_jsx(ColorPickerButton, {
                 value: value,
-                name: "textColor",
-                onChange: handleChange
-              }), /*#__PURE__*/_jsx("input", {
-                type: "checkbox",
-                onChange: handleChange,
-                value: "rgba(0,0,0,0)",
-                checked: value === "rgba(0,0,0,0)"
-              })]
+                onSave: onSave
+              })
             })
           }
         })

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

@@ -7,6 +7,7 @@ import BackgroundImage from "./backgroundImage";
 import GridSize from "./gridSize";
 import ElementSize from "./elementSize";
 import ImageTexts from "./imageTexts";
+import MenusArray from "./menusArray";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -16,6 +17,7 @@ const FieldMap = {
   backgroundImage: BackgroundImage,
   gridSize: GridSize,
   elementSize: ElementSize,
-  imageTexts: ImageTexts
+  imageTexts: ImageTexts,
+  menusArray: MenusArray
 };
 export default FieldMap;

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

@@ -0,0 +1,114 @@
+import React from "react";
+import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MenusArray = props => {
+  const {
+    value,
+    data,
+    elementProps,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const {
+    menuStyle
+  } = elementProps || {
+    menuStyle: "stacked"
+  };
+  const handleChange = index => e => {
+    const upValue = [...(value || [])];
+    upValue[index] = {
+      ...(upValue[index] || {}),
+      [e.target.name]: e.target.value
+    };
+    onChange({
+      [key]: upValue
+    });
+  };
+  const onAddMenu = () => {
+    onChange({
+      [key]: [...value, {
+        ...value[0]
+      }]
+    });
+  };
+  const onDelete = index => () => {
+    const upValue = [...(value || [])];
+    upValue.splice(index, 1);
+    onChange({
+      [key]: upValue
+    });
+  };
+  const handleVariant = e => {
+    onChange({
+      [e.target.name]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 1,
+    spacing: 2,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-radio-buttons-group-label",
+          children: "Menu Variant"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          defaultValue: menuStyle,
+          value: menuStyle,
+          name: "menuStyle",
+          onChange: handleVariant,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "stacked",
+            checked: menuStyle === "stacked",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Stacked"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "drawer",
+            checked: menuStyle === "drawer",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Drawer"
+          })]
+        })]
+      })
+    }), (value || []).map((m, i) => {
+      return /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          name: "text",
+          type: "text",
+          value: m.text,
+          onChange: handleChange(i),
+          size: "small",
+          fullWidth: true
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "url",
+          type: "text",
+          value: m.url,
+          onChange: handleChange(i),
+          size: "small",
+          fullWidth: true
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: onDelete(i),
+          color: "error",
+          children: "Delete"
+        })]
+      }, `add-m-${i}`);
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: onAddMenu,
+        children: "+ Add"
+      })
+    })]
+  });
+};
+export default MenusArray;

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

@@ -66,6 +66,7 @@ const StyleBuilder = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   const [elementProps, setElementProps] = useState(element);
@@ -86,8 +87,8 @@ const StyleBuilder = props => {
   return /*#__PURE__*/_jsxs(Dialog, {
     open: true,
     fullWidth: true,
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: title
+    children: [/*#__PURE__*/_jsxs(DialogTitle, {
+      children: [title, " "]
     }), /*#__PURE__*/_jsxs(DialogContent, {
       children: [/*#__PURE__*/_jsx(StyleTabs, {
         renderTabs: renderTabs,
@@ -101,7 +102,11 @@ const StyleBuilder = props => {
         customProps: customProps
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [onDelete ? /*#__PURE__*/_jsx(Button, {
+        onClick: onDelete,
+        color: "error",
+        children: "Delete"
+      }) : null, /*#__PURE__*/_jsx(Button, {
         onClick: onClose,
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {

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

@@ -2,9 +2,29 @@ const pageSettingsStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
+    label: "Text",
+    key: "color",
+    type: "color"
+  }, {
+    label: "Background URL",
+    key: "pageColor",
+    type: "text"
+  }, {
+    label: "Background Image",
+    key: "pageColor",
+    type: "backgroundImage"
+  }, {
     label: "Background",
     key: "pageColor",
     type: "color"
   }]
+}, {
+  tab: "Spacing",
+  value: "spacing",
+  fields: [{
+    label: "bannerSpacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
 }];
 export default pageSettingsStyle;

package/dist/Editor/plugins/withLinks.js

@@ -1,8 +1,46 @@
+import { Transforms, Element, Node } from "slate";
+const INLINE_ELLEMENTS = ["link", "chip-text", "drawer"];
 const withLinks = editor => {
   const {
-    isInline
+    isInline,
+    deleteBackward,
+    normalizeNode
   } = editor;
-  editor.isInline = element => element.type === 'link' ? true : isInline(element);
+  editor.isInline = element => INLINE_ELLEMENTS.indexOf(element.type) > -1 ? true : isInline(element);
+
+  // remove empty inline
+  editor.normalizeNode = entry => {
+    const [node, path] = entry;
+    if (Element.isElement(node) && node.type === "paragraph") {
+      const children = Array.from(Node.children(editor, path));
+      for (const [child, childPath] of children) {
+        // remove link nodes whose text value is empty string.
+        // empty text links happen when you move from link to next line or delete link line.
+        if (Element.isElement(child) && INLINE_ELLEMENTS.indexOf(child.type) > -1 && child.children[0].text === "") {
+          if (children.length === 1) {
+            Transforms.removeNodes(editor, {
+              at: path
+            });
+            Transforms.insertNodes(editor, {
+              type: "paragraph",
+              children: [{
+                text: ""
+              }]
+            });
+          } else {
+            Transforms.removeNodes(editor, {
+              at: childPath
+            });
+          }
+          return;
+        }
+      }
+    }
+    normalizeNode(entry);
+  };
+  editor.deleteBackward = unit => {
+    deleteBackward(unit);
+  };
   return editor;
 };
 export default withLinks;

package/dist/Editor/plugins/withTable.js

@@ -1,10 +1,19 @@
-import { Editor, Range, Point, Element } from "slate";
+import { Editor, Range, Point, Element, Transforms } from "slate";
 const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,
     deleteForward
   } = editor;
+  editor.insertData = data => {
+    try {
+      const text = data.getData("text/plain");
+      Transforms.insertText(editor, text);
+      return;
+    } catch (err) {
+      console.log(err);
+    }
+  };
   editor.deleteBackward = unit => {
     const {
       selection

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -21,6 +21,9 @@ import Carousel from "../Elements/Carousel/Carousel";
 import CarouselItem from "../Elements/Carousel/CarouselItem";
 import ImageTextWrapper from "../Elements/ImageText/ImageTextWrapper";
 import ImageText from "../Elements/ImageText/ImageText";
+import ChipText from "../Elements/ChipText/ChipText";
+import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
+import AppHeader from "../Elements/AppHeader/AppHeader";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -343,6 +346,18 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(CarouselItem, {
         ...props
       });
+    case "chip-text":
+      return /*#__PURE__*/_jsx(ChipText, {
+        ...props
+      });
+    case "drawer":
+      return /*#__PURE__*/_jsx(DrawerMenu, {
+        ...props
+      });
+    case "app-header":
+      return /*#__PURE__*/_jsx(AppHeader, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -0,0 +1,46 @@
+import { useState } from "react";
+const useTableResize = ({
+  parentDOM,
+  size: defaultSize
+}) => {
+  const {
+    width
+  } = parentDOM?.getBoundingClientRect() || {
+    ...defaultSize
+  };
+  const [size, setSize] = useState({
+    height: 300,
+    widthInPercent: 100,
+    ...defaultSize
+  });
+  const [resizing, setResizing] = useState(false);
+  const onLoad = defaultSize => {
+    setSize({
+      widthInPercent: 100,
+      height: 300,
+      ...defaultSize
+    });
+  };
+  const onMouseDown = () => {
+    document.addEventListener("pointermove", onMouseMove);
+    document.addEventListener("pointerup", onMouseUp);
+    setResizing(true);
+  };
+  const onMouseUp = () => {
+    document.removeEventListener("pointermove", onMouseMove);
+    document.removeEventListener("pointerup", onMouseUp);
+    setResizing(false);
+  };
+  const onMouseMove = e => {
+    setSize(currentSize => {
+      const calcWidth = currentSize?.width + e.movementX;
+      return {
+        width: calcWidth,
+        height: currentSize.height + e.movementY,
+        widthInPercent: calcWidth / width * 100
+      };
+    });
+  };
+  return [size, onMouseDown, resizing, onLoad];
+};
+export default useTableResize;

package/dist/Editor/utils/insertAppHeader.js

@@ -0,0 +1,55 @@
+import { Editor, Transforms, Path, Range, Element } from "slate";
+export const createAppHeaderNode = ({
+  menus
+}) => ({
+  type: "app-header",
+  appTitle: "Title",
+  appLogo: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png",
+  menus: !menus ? [{
+    type: "menu",
+    url: "https://www.google.com",
+    target: "_blank",
+    text: "Google"
+  }] : menus,
+  menuStyle: "drawer",
+  children: [{
+    text: ""
+  }]
+});
+export const insertAppHeader = (editor, props) => {
+  const {
+    selection
+  } = editor;
+  const appHeader = createAppHeaderNode(props || {});
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [appHeader]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, appHeader, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, appHeader, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [appHeader]
+    });
+  }
+};
+export const removeAppHeader = (editor, path) => {
+  Transforms.unwrapNodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "app-header"
+  });
+};