@flozy/editor 1.1.4 → 1.1.6

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

@@ -1,30 +1,180 @@
-import React from "react";
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSelected, useSlateStatic } from "slate-react";
+import { IconButton } from "@mui/material";
+import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
+import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
+import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
+import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteCellIcon from "./DeleteCellIcon";
+import DeleteRowIcon from "./DeleteRowIcon";
+import { TableUtil } from "../../utils/table";
+import TablePopup from "./TablePopup";
+import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Table = ({
-  attributes,
-  children,
-  element
-}) => {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TABLE_MENUS = [{
+  Icon: AlignHorizontalRightIcon,
+  text: "Insert Columns to the Right",
+  action: {
+    type: "insertColumn",
+    position: "after"
+  }
+}, {
+  Icon: AlignHorizontalLeftIcon,
+  text: "Insert Columns to the Left",
+  action: {
+    type: "insertColumn",
+    position: "at"
+  }
+}, {
+  Icon: AlignVerticalTopIcon,
+  text: "Insert Row Above",
+  action: {
+    type: "insertRow",
+    positon: "at"
+  }
+}, {
+  Icon: AlignVerticalBottomIcon,
+  text: "Insert Row Below",
+  action: {
+    type: "insertRow",
+    position: "after"
+  }
+}, {
+  Icon: DeleteRowIcon,
+  text: "Delete Row",
+  action: {
+    type: "deleteRow"
+  }
+}, {
+  Icon: DeleteCellIcon,
+  text: "Delete Column",
+  action: {
+    type: "deleteColumn"
+  }
+}, {
+  Icon: SettingsIcon,
+  text: "Settings",
+  action: {
+    type: "settings"
+  }
+}, {
+  Icon: DeleteForeverIcon,
+  text: "Remove Table",
+  action: {
+    type: "remove"
+  }
+}];
+const Table = props => {
+  const {
+    element,
+    attributes,
+    children,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
   const {
     bgColor,
     borderColor
   } = element;
-  return /*#__PURE__*/_jsx("div", {
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const table = new TableUtil(editor);
+  const tableProps = table.getTableProps();
+  const handleAction = ({
+    type,
+    position
+  }) => () => {
+    Transforms.select(editor, editor.selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "deleteRow":
+        table.deleteRow();
+        break;
+      case "deleteColumn":
+        table.deleteColumn();
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      case "settings":
+        if (tableProps) {
+          onSettings(true);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: 0,
+        backgroundColor: "#CCC"
+      },
+      children: TABLE_MENUS.map(({
+        Icon,
+        text,
+        action
+      }) => {
+        return /*#__PURE__*/_jsx(IconButton, {
+          title: text,
+          onClick: handleAction(action),
+          children: /*#__PURE__*/_jsx(Icon, {})
+        }, text);
+      })
+    }) : null;
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    delete updateData.type;
+    table.updateTableStyle(updateData, {
+      ...tableProps
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs("div", {
     style: {
       minWidth: "100%",
       maxWidth: "100%",
       position: "relative"
     },
-    children: /*#__PURE__*/_jsx("table", {
+    children: [/*#__PURE__*/_jsx("table", {
       style: {
         backgroundColor: bgColor,
-        border: `1px solid ${borderColor}`
+        border: `1px solid ${borderColor}`,
+        width: "auto"
       },
       children: /*#__PURE__*/_jsx("tbody", {
         ...attributes,
         children: children
       })
-    })
+    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+      element: tableProps?.styleProps || {},
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Table;

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

@@ -1,89 +1,50 @@
-import React, { useState } from "react";
-import { Transforms, Editor, Element } from "slate";
+import React, { useState, useEffect } from "react";
+import { Editor, Element } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import { IconButton } from "@mui/material";
-import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
-import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
-import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
-import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
-import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import SettingsIcon from "@mui/icons-material/Settings";
-import DeleteCellIcon from "./DeleteCellIcon";
-import DeleteRowIcon from "./DeleteRowIcon";
+import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
-import TablePopup from "./TablePopup";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const TABLE_MENUS = [{
-  Icon: AlignHorizontalRightIcon,
-  text: "Insert Columns to the Right",
-  action: {
-    type: "insertColumn",
-    position: "after"
-  }
-}, {
-  Icon: AlignHorizontalLeftIcon,
-  text: "Insert Columns to the Left",
-  action: {
-    type: "insertColumn",
-    position: "at"
-  }
-}, {
-  Icon: AlignVerticalTopIcon,
-  text: "Insert Row Above",
-  action: {
-    type: "insertRow",
-    positon: "at"
-  }
-}, {
-  Icon: AlignVerticalBottomIcon,
-  text: "Insert Row Below",
-  action: {
-    type: "insertRow",
-    position: "after"
-  }
-}, {
-  Icon: DeleteRowIcon,
-  text: "Delete Row",
-  action: {
-    type: "deleteRow"
-  }
-}, {
-  Icon: DeleteCellIcon,
-  text: "Delete Column",
-  action: {
-    type: "deleteColumn"
-  }
-}, {
-  Icon: SettingsIcon,
-  text: "Settings",
-  action: {
-    type: "settings"
-  }
-}, {
-  Icon: DeleteForeverIcon,
-  text: "Remove Table",
-  action: {
-    type: "remove"
-  }
-}];
+const Resizer = ({
+  onMouseDown
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("button", {
+      contentEditable: false,
+      onPointerDown: onMouseDown,
+      className: "cell-resizer",
+      style: {
+        width: "10px",
+        height: "100%",
+        position: "absolute",
+        right: "0px",
+        top: 0
+      }
+    })
+  });
+};
 const TableCell = props => {
   const {
     element,
     attributes,
-    children,
-    customProps
+    children
   } = props;
-  const [openSetttings, setOpenSettings] = useState(false);
   const {
     bgColor,
     borderColor
   } = element;
+  const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
   const selected = useSelected();
+  const path = ReactEditor.findPath(editor, element);
+  const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
+  const [size, onMouseDown, resizing, onLoad] = useTableResize({
+    parentDOM,
+    size: element?.size
+  });
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
-  const path = ReactEditor.findPath(editor, element);
   const [tableNode] = Editor.nodes(editor, {
     at: path,
     match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -94,87 +55,38 @@ const TableCell = props => {
   });
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
-  const handleInsert = ({
-    type,
-    position
-  }) => () => {
-    Transforms.select(editor, editor.selection);
-    switch (type) {
-      case "insertRow":
-        table.insertRow(position);
-        break;
-      case "insertColumn":
-        table.insertColumn(position);
-        break;
-      case "deleteRow":
-        table.deleteRow();
-        break;
-      case "deleteColumn":
-        table.deleteColumn();
-        break;
-      case "remove":
-        table.removeTable();
-        break;
-      case "settings":
-        if (tableProps) {
-          onSettings(true);
-        }
-        break;
-      default:
-        return;
+  useEffect(() => {
+    if (editor && element) {
+      const dom = ReactEditor.toDOMNode(editor, element);
+      setParentDOM(dom);
+      onLoad(element?.size || {
+        width: 100,
+        height: 100
+      });
     }
-  };
-  const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      style: {
-        position: "absolute",
-        top: "-40px",
-        left: 0,
-        backgroundColor: "#CCC"
-      },
-      children: TABLE_MENUS.map(({
-        Icon,
-        text,
-        action
-      }) => {
-        return /*#__PURE__*/_jsx(IconButton, {
-          title: text,
-          onClick: handleInsert(action),
-          children: /*#__PURE__*/_jsx(Icon, {})
-        }, text);
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    delete updateData.type;
-    table.updateTableStyle(updateData, {
-      ...tableProps
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
+  }, []);
+  useEffect(() => {
+    if (!resizing && tableProps) {
+      table.updateTableStyle({
+        "col.size": size
+      }, tableProps);
+    }
+  }, [resizing]);
+  const sizeProps = isHeader ? {
+    width: size?.width || 100
+  } : {};
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,
+    className: "editor-table-cell",
     style: {
+      position: "relative",
       backgroundColor: bgColor,
-      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`
+      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
+      ...(sizeProps || {})
     },
-    children: [/*#__PURE__*/_jsx(ToolBar, {}), children, openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
-      element: tableProps?.styleProps || {},
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
+    children: [children, selected && isHeader ? /*#__PURE__*/_jsx(Resizer, {
+      onMouseDown: onMouseDown
     }) : null]
   });
 };

package/dist/Editor/Elements/Table/table.css

@@ -0,0 +1,13 @@
+.editor-table-cell {
+  /* min-width: 100px; */
+}
+
+.editor-table-cell .cell-resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: visible;
+  background-color: aqua;
+}

package/dist/Editor/Toolbar/Toolbar.js

@@ -23,6 +23,8 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -186,6 +188,16 @@ 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);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -125,5 +125,11 @@ const toolbarGroups = [[{
 }, {
   id: 34,
   type: "carousel"
+}, {
+  id: 35,
+  type: "chip-text"
+}, {
+  id: 36,
+  type: "drawer"
 }]];
 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/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/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,21 @@ const pageSettingsStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
+    label: "Text",
+    key: "color",
+    type: "color"
+  }, {
     label: "Background",
     key: "pageColor",
     type: "color"
   }]
+}, {
+  tab: "Spacing",
+  value: "spacing",
+  fields: [{
+    label: "bannerSpacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
 }];
 export default pageSettingsStyle;