@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/Elements/Grid/GridButton.js

@@ -1,15 +1,21 @@
 import React, { useState } from "react";
-import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
-import { insertGrid } from "../../utils/grid";
+import { Button, Dialog, DialogContent, DialogTitle, Grid,
+// ImageListItemBar,
+Tooltip, Box } from "@mui/material";
+import { insertGrid, insertPlainGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
-import { ImageList, ImageListItem } from "@mui/material";
+// import { ImageList, ImageListItem } from "@mui/material";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import GridStyles from "./Styles";
 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 GridButton = props => {
+  const classes = GridStyles();
   const {
     editor,
-    customProps
+    customProps,
+    icoBtnType
   } = props;
   const {
     services
@@ -48,17 +54,19 @@ const GridButton = props => {
   const handleClose = () => {
     setOpen(false);
   };
-  const {
-    list
-  } = templates;
+  const handleGridClick = count => () => {
+    insertGrid(editor, insertPlainGrid(count));
+    handleClose();
+  };
+
+  // const { list } = templates;
+
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Grid",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: onButtonClick,
-        children: /*#__PURE__*/_jsx(GridIcon, {})
-      })
+      onClick: onButtonClick,
+      icon: /*#__PURE__*/_jsx(GridIcon, {}),
+      icoBtnType: icoBtnType
     }), /*#__PURE__*/_jsxs(Dialog, {
       open: open,
       onClose: handleClose,
@@ -69,7 +77,7 @@ const GridButton = props => {
           children: [/*#__PURE__*/_jsx(Grid, {
             item: true,
             xs: 6,
-            children: "Templates"
+            children: "Grid"
           }), /*#__PURE__*/_jsx(Grid, {
             item: true,
             xs: 6,
@@ -81,21 +89,36 @@ const GridButton = props => {
           })]
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsx(ImageList, {
-          variant: "quilted",
-          cols: 1,
-          children: list.map(item => {
-            return /*#__PURE__*/_jsxs(ImageListItem, {
-              onClick: handleInsertGrid(item),
-              children: [/*#__PURE__*/_jsx("img", {
-                src: item.thumbnail,
-                alt: item.title,
-                width: "auto",
-                height: "250px"
-              }), /*#__PURE__*/_jsx(ImageListItemBar, {
-                title: item.title
-              })]
-            }, item.thumbnail);
+        children: /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          spacing: 2,
+          style: {
+            display: "flex"
+          },
+          children: Array.from(Array(12).keys()).map(m => {
+            m = m + 1;
+            return /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 2,
+              style: {
+                display: "flex"
+              },
+              children: /*#__PURE__*/_jsx(Box, {
+                component: "div",
+                style: {
+                  display: "flex"
+                },
+                children: /*#__PURE__*/_jsx(Tooltip, {
+                  title: `Insert ${m} Column Grid`,
+                  arrow: true,
+                  children: /*#__PURE__*/_jsx(Button, {
+                    sx: classes.gridButton,
+                    onClick: handleGridClick(m),
+                    children: m
+                  })
+                })
+              })
+            }, `in_grid_co_${m}`);
           })
         })
       })]

package/dist/Editor/Elements/Grid/GridItem.js

@@ -1,9 +1,11 @@
+/* eslint-disable no-unused-vars */
 import React, { useState } from "react";
 import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
-import { IconButton, Tooltip, Box } from "@mui/material";
+import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -51,9 +53,13 @@ const GridItem = props => {
   } = borderRadius || {};
   const editor = useSlateStatic();
   // const selected = useSelected();
-  const [selected, setSelected] = useState(false);
+  // const [selected, setSelected] = useState(false);
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   const GridItemToolbar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
@@ -79,7 +85,6 @@ const GridItem = props => {
     const updateData = {
       ...data
     };
-    console.log(updateData);
     delete updateData.children;
     Transforms.setNodes(editor, {
       ...updateData
@@ -98,18 +103,21 @@ const GridItem = props => {
       });
     }
   };
-  const onMouseOver = e => {
-    if (!readOnly) {
-      e.stopPropagation();
-      setSelected(true);
-    }
-  };
-  const onMouseLeave = e => {
-    if (!readOnly) {
-      e.stopPropagation();
-      setSelected(false);
-    }
-  };
+
+  // const onMouseOver = (e) => {
+  //   if (!readOnly) {
+  //     e.stopPropagation();
+  //     setSelected(true);
+  //   }
+  // };
+
+  // const onMouseLeave = (e) => {
+  //   if (!readOnly) {
+  //     e.stopPropagation();
+  //     setSelected(false);
+  //   }
+  // };
+
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -127,10 +135,13 @@ const GridItem = props => {
       marginBottom: `${margin?.bottom || 0}px`,
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
-      }
+      },
+      height: "100%"
     },
-    onMouseOver: onMouseOver,
-    onMouseLeave: onMouseLeave,
+    "data-path": path.join(",")
+    // onMouseOver={onMouseOver}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
@@ -150,16 +161,16 @@ const GridItem = props => {
     }), /*#__PURE__*/_jsx(Box, {
       className: "gi-inner-cw",
       component: "div",
+      "data-path": path.join(","),
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
         justifyContent: vertical,
-        height: gridHeight || "auto",
+        height: gridHeight || "100%",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
         borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,

package/dist/Editor/Elements/Grid/Styles.js

@@ -0,0 +1,11 @@
+const GridStyles = () => ({
+  gridButton: {
+    background: "#007FFF",
+    color: "#fff",
+    "&:hover": {
+      background: "#0066CC",
+      color: "#FFF"
+    }
+  }
+});
+export default GridStyles;

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -29,7 +29,6 @@ const InlineIcon = props => {
     bottomRight
   } = borderRadius || {};
   const BtnIcon = fIcons["Check"];
-  console.log(icon);
   return /*#__PURE__*/_jsxs("button", {
     ...attributes,
     className: "editor-icon-text",

package/dist/Editor/Elements/List/CheckList.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
+import { Transforms } from "slate";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CheckList = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = useSlateStatic();
+  const readOnly = useReadOnly();
+  const {
+    checked
+  } = element;
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: "checkbox-list",
+    style: {
+      textAlign: element.alignment || "left"
+    },
+    children: [/*#__PURE__*/_jsxs("span", {
+      contentEditable: false,
+      className: "checkbox-edit",
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        className: "styled-checkbox",
+        checked: checked,
+        style: {
+          marginRight: "8px"
+        },
+        onChange: event => {
+          const path = ReactEditor.findPath(editor, element);
+          const newProperties = {
+            checked: event.target.checked
+          };
+          Transforms.setNodes(editor, newProperties, {
+            at: path
+          });
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        className: "checkbox-inner"
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      className: "",
+      style: {
+        flex: 1,
+        opacity: checked ? 1 : 1,
+        textDecoration: !checked ? "none" : "none"
+      },
+      children: children
+    })]
+  });
+};
+export default CheckList;

package/dist/Editor/Elements/List/CheckListButton.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Icon from "../../common/Icon";
+import { toggleBlock } from "../../utils/SlateUtilityFunctions";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const CheckListButton = props => {
+  const {
+    editor
+  } = props;
+  const handleClick = type => () => {
+    toggleBlock(editor, type);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Check List",
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "checkList"
+      }),
+      onClick: handleClick("checkList")
+    })
+  });
+};
+export default CheckListButton;

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -1,10 +1,12 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const NewLineButton = () => {
+const NewLineButton = ({
+  icoBtnType
+}) => {
   const editor = useSlateStatic();
   const onAddNewLine = () => {
     Transforms.insertNodes(editor, [{
@@ -18,19 +20,17 @@ const NewLineButton = () => {
     });
     ReactEditor.focus(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: onAddNewLine,
-      children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
-        sx: {
-          fill: "#64748B",
-          width: "18px",
-          height: "18px"
-        }
-      })
-    })
+    onClick: onAddNewLine,
+    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+      sx: {
+        fill: "#64748B",
+        width: "18px",
+        height: "18px"
+      }
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default NewLineButton;

package/dist/Editor/Elements/PageSettings/PageSettings.js

@@ -2,12 +2,14 @@ import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PageSettings = props => {
   const {
-    attributes
+    attributes,
+    children
   } = props;
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "page-settings",
-    contentEditable: false
+    contentEditable: false,
+    children: children
   });
 };
 export default PageSettings;

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-import { Transforms, Editor, Element } from "slate";
-import { IconButton, Tooltip } from "@mui/material";
-import { useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
 import { PageSettings } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 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 PageSettingsButton = props => {
   const {
-    customProps
+    customProps,
+    icoBtnType
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -17,79 +18,33 @@ const PageSettingsButton = props => {
     const {
       element,
       path
-    } = getPageSettingsPath();
+    } = getPageSettings(editor);
     setOpenSettings({
       element: element?.pageProps || {},
       path
     });
   };
-  const getPageSettingsPath = () => {
+  const onSave = data => {
     try {
-      const [pageSettingsNode] = Editor.nodes(editor, {
-        at: [],
-        match: n => {
-          return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
-        }
-      });
-      if (pageSettingsNode && pageSettingsNode[0]) {
-        const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
-        return {
-          path,
-          element: pageSettingsNode[0]
-        };
-      } else {
-        return {
-          path: null
-        };
-      }
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      updatePageSettings(editor, updateData);
+      onClose();
     } catch (err) {
       console.log(err);
-      return {
-        path: null
-      };
-    }
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    console.log(openSetttings);
-    if (openSetttings?.path) {
-      Transforms.setNodes(editor, {
-        pageProps: {
-          ...updateData
-        }
-      }, {
-        at: openSetttings?.path
-      });
-    } else {
-      console.log(editor.children.length);
-      Transforms.insertNodes(editor, [{
-        type: "page-settings",
-        pageProps: {
-          ...updateData
-        },
-        children: [{
-          text: ""
-        }]
-      }], {
-        at: [editor.children.length]
-      });
     }
-    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(PageSettings, {})
-      })
+      onClick: onSettings,
+      icon: /*#__PURE__*/_jsx(PageSettings, {}),
+      icoBtnType: icoBtnType
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},
       onSave: onSave,

package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js

@@ -10,7 +10,7 @@ const PageSettingsPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Grid",
+    title: "Page Settings",
     type: "pageSettingsStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Signature/Signature.js

@@ -29,22 +29,28 @@ const Signature = props => {
       }],
       ...data
     }], {
-      at: [...path, 0]
+      at: path
     });
   };
   const onClear = () => {
     Transforms.removeNodes(editor, {
-      at: [...path, 0]
+      at: path
     });
   };
   return /*#__PURE__*/_jsxs("div", {
     className: `signature-container`,
     ...attributes,
+    contentEditable: false,
     children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
       customProps: customProps,
       onSave: onSave,
       onClear: onClear
-    }) : null, children]
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
   });
 };
 export default Signature;

package/dist/Editor/Elements/Signature/SignatureButton.js

@@ -1,22 +1,23 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertSignature } from "../../utils/signature";
-import { SignatureIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SignatureButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertSignature = () => {
     insertSignature(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Signature",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertSignature,
-      children: /*#__PURE__*/_jsx(SignatureIcon, {})
-    })
+    onClick: handleInsertSignature,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "signature"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default SignatureButton;