@flozy/editor 1.5.9 → 1.6.1

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

@@ -1,66 +1,70 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Popper, Fade, Paper, IconButton,
-// Drawer,
-Grid, Typography } from "@mui/material";
-// import { Drawer, Popper } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import React, { useEffect, useState } from "react";
+import { Popper, Fade, Paper } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
 import useDrag from "../../hooks/useDrag";
+import PopperHeader from "./PopperHeader";
+import { TableUtil } from "../../utils/table";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
   const classes = usePopupStyle();
   const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
   const editor = useSlate();
   const inFocus = useFocused();
   const {
     selection
   } = editor;
-  const open = Boolean(anchorEl);
+  const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  const [event] = useDrag();
+  const table = new TableUtil(editor);
+  useEffect(() => {
+    if (event === "end" && anchorEl && !open) {
+      // for table cell selection
+      const isCellsSelected = table.isCellSelected(editor.selection);
+      if (!isCellsSelected) {
+        setOpen(true);
+      }
+    } else if (!anchorEl) {
+      setOpen(false);
+    }
+  }, [event, anchorEl]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
-      const domSelection = window.getSelection();
-      const domRange = domSelection.getRangeAt(0);
-      const {
-        startOffset,
-        endOffset
-      } = domRange || {};
-      if (startOffset !== endOffset) {
-        const rect = domRange.getBoundingClientRect();
-        if (event === "end" && !open && anchorEl === null) {
-          setAnchorEl({
-            clientWidth: rect.width,
-            clientHeight: rect.height,
-            getBoundingClientRect: () => rect
-          });
-        }
-      }
+      updateAnchorEl();
+    }
+  }, [selection]);
+  const updateAnchorEl = () => {
+    const domSelection = window.getSelection();
+    const domRange = domSelection?.getRangeAt(0);
+    const {
+      startOffset,
+      endOffset
+    } = domRange || {};
+    if (startOffset !== endOffset) {
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        clientWidth: rect.width,
+        clientHeight: rect.height,
+        getBoundingClientRect: () => rect
+      });
     }
-  }, [selection, event]);
+  };
   const handleClose = () => {
     setAnchorEl(null);
+    setOpen(false);
   };
-  const toolTextFormat = useMemo(() => {
-    return /*#__PURE__*/_jsx(TextFormat, {
-      editor: editor,
-      classes: classes
-    });
-  }, [open]);
-  return /*#__PURE__*/_jsx(Popper, {
+  return open ? /*#__PURE__*/_jsx(Popper, {
     id: id,
     open: open,
-    disablePortal: false,
     anchorEl: anchorEl,
     transition: true,
     placement: "auto-end",
-    onMouseDown: e => e.preventDefault(),
     sx: classes.popupWrapper,
     className: "tools-drawer",
     children: ({
@@ -69,58 +73,19 @@ const PopupTool = props => {
       ...TransitionProps,
       timeout: 350,
       children: /*#__PURE__*/_jsxs(Paper, {
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 12,
-          style: {
-            display: "flex",
-            padding: "12px"
-          },
-          justifyContent: "space-between",
-          alignItems: "center",
-          className: "textSettingHeader",
-          children: [/*#__PURE__*/_jsx(Typography, {
-            color: "primary",
-            sx: {
-              fontSize: "16px",
-              fontWeight: "700",
-              color: "#000"
-            },
-            children: "TEXT SETTINGS"
-          }), /*#__PURE__*/_jsx(Grid, {
-            sx: classes.textFormatLabel,
-            justifyContent: "end",
-            children: /*#__PURE__*/_jsx(IconButton, {
-              className: "close-popupbtn",
-              onClick: handleClose,
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
-          })]
-        }), toolTextFormat]
+        style: {
+          borderRadius: "10px"
+        },
+        children: [/*#__PURE__*/_jsx(PopperHeader, {
+          title: "Text Settings",
+          classes: classes,
+          onClose: handleClose
+        }), /*#__PURE__*/_jsx(TextFormat, {
+          editor: editor,
+          classes: classes
+        })]
       })
     })
-  });
-
-  //   return (
-  //     <Drawer
-  //       // id={id}
-  //       open={open}
-  //       fullWidth
-  //       // disablePortal={false}
-  //       // anchorEl={anchorEl}
-  //       // transition
-  //       // placement="bottom-start"
-  //       // onMouseDown={(e) => e.preventDefault()}
-  //       // sx={classes.popupWrapper}
-  //       anchor="right"
-  //       hideBackdrop
-  //       // handleClose={handleClose}
-  //       className="tools-drawer"
-  //       // variant="persistent"
-  //     >
-  //       <TextFormat editor={editor} classes={classes} onClose={handleClose} />
-  //     </Drawer>
-  //   );
+  }) : null;
 };
-
 export default PopupTool;

package/dist/Editor/Toolbar/Toolbar.js

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
 import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
 import useFormat from "../utils/customHooks/useFormat.js";
-import defaultToolbarGroups from "./toolbarGroups.js";
-import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
+import { toolbarGroups as defaultToolbarGroups } from "./toolbarGroups.js";
+import { BlockButton, MarkButton, Dropdown, TextSize, FontFamilyDropdown, FontSize } from "./FormatTools";
 import ColorPicker from "../Elements/Color Picker/ColorPicker";
 import LinkButton from "../Elements/Link/LinkButton";
 import Embed from "../Elements/Embed/Embed";
@@ -24,13 +24,185 @@ import FormButton from "../Elements/Form/FormButton.js";
 import Text from "./FormatTools/Text";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
 import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
+import EmojiButton from "../Elements/Emoji/EmojiButton.js";
 import "./styles.css";
+import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const RenderToolbarIcon = props => {
+  const {
+    element,
+    editor,
+    customProps,
+    gi,
+    handleCodeToText,
+    icoBtnType
+  } = props;
+  const renderIcon = () => {
+    switch (element.type) {
+      case "block":
+        return /*#__PURE__*/_jsx(BlockButton, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "mark":
+        return /*#__PURE__*/_jsx(MarkButton, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "dropdown":
+        return /*#__PURE__*/_jsx(Dropdown, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "fontfamilydropdown":
+        return /*#__PURE__*/_jsx(FontFamilyDropdown, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "numberInput":
+        return /*#__PURE__*/_jsx(FontSize, {
+          editor: editor,
+          ...element
+        }, element.id);
+      case "fontSize":
+        return /*#__PURE__*/_jsx(TextSize, {
+          ...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"),
+          editor: editor
+        }, element.id);
+      case "embed":
+        return /*#__PURE__*/_jsx(Embed, {
+          format: element.format,
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType,
+          lbT: element.lbT
+        }, element.id);
+      case "color-picker":
+        return /*#__PURE__*/_jsx(ColorPicker, {
+          activeMark: activeMark,
+          format: element.format,
+          editor: editor,
+          title: element.title
+        }, element.id);
+      case "table":
+        return /*#__PURE__*/_jsx(TableSelector, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "id":
+        return /*#__PURE__*/_jsx(Id, {
+          editor: editor
+        }, `gi_id_${gi}`);
+      case "equation":
+        return /*#__PURE__*/_jsx(EquationButton, {
+          editor: editor
+        }, `gi_equation_${gi}`);
+      case "codeToText":
+        return /*#__PURE__*/_jsx(CodeToTextButton, {
+          handleButtonClick: handleCodeToText
+        }, `gi_codeToText_${gi}`);
+      case "grid":
+        return /*#__PURE__*/_jsx(GridButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "newLine":
+        return /*#__PURE__*/_jsx(NewLineButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "accordion":
+        return /*#__PURE__*/_jsx(AccordionButton, {
+          editor: editor
+        }, element.id);
+      case "signature":
+        return /*#__PURE__*/_jsx(SignatureButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "button":
+        return /*#__PURE__*/_jsx(ButtonToolIcon, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "page-settings":
+        return /*#__PURE__*/_jsx(PageSettingsButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "carousel":
+        return /*#__PURE__*/_jsx(CarouselButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "chip-text":
+        return /*#__PURE__*/_jsx(ChipTextButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      // case "drawer":
+      //   return (
+      //     <DrawerMenuButton
+      //       key={element.id}
+      //       editor={editor}
+      //       customProps={customProps}
+      //     />
+      //   );
+      case "app-header":
+        return /*#__PURE__*/_jsx(AppHeaderButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      case "form":
+        return /*#__PURE__*/_jsx(FormButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "icon-text":
+        return /*#__PURE__*/_jsx(InlineIconButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      case "emoji":
+        return /*#__PURE__*/_jsx(EmojiButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "topbanner":
+        return /*#__PURE__*/_jsx(TopBannerButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      default:
+        return null;
+    }
+  };
+  return renderIcon();
+};
 const Toolbar = props => {
   const {
     handleCodeToText,
-    customProps
+    customProps,
+    toolbarOptions
   } = props;
   const editor = useSlate();
   const isTable = useFormat(editor, "table");
@@ -47,135 +219,23 @@ const Toolbar = props => {
     setToolbarGroups(filteredGroups);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isTable]);
+  useEffect(() => {
+    if (toolbarOptions?.removeOptions) {
+      setToolbarGroups(defaultToolbarGroups.map(elem => elem?.filter(item => !toolbarOptions?.removeOptions?.includes(item?.format))));
+    }
+  }, [toolbarOptions]);
   return /*#__PURE__*/_jsxs("div", {
-    className: "toolbar",
+    className: `toolbar ${toolbarOptions?.toolbarPosition}`,
     children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
-      className: "toolbar-grp1",
+      className: `toolbar-grp1 ${toolbarOptions?.toolbarPosition}`,
       children: group.map((element, gi) => {
-        switch (element.type) {
-          case "block":
-            return /*#__PURE__*/_jsx(BlockButton, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "mark":
-            return /*#__PURE__*/_jsx(MarkButton, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "dropdown":
-            return /*#__PURE__*/_jsx(Dropdown, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "fontSize":
-            return /*#__PURE__*/_jsx(TextSize, {
-              ...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"),
-              editor: editor
-            }, element.id);
-          case "embed":
-            return /*#__PURE__*/_jsx(Embed, {
-              format: element.format,
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "color-picker":
-            return /*#__PURE__*/_jsx(ColorPicker, {
-              activeMark: activeMark,
-              format: element.format,
-              editor: editor,
-              title: element.title
-            }, element.id);
-          case "table":
-            return /*#__PURE__*/_jsx(TableSelector, {
-              editor: editor
-            }, element.id);
-          case "id":
-            return /*#__PURE__*/_jsx(Id, {
-              editor: editor
-            }, `gi_id_${gi}`);
-          case "equation":
-            return /*#__PURE__*/_jsx(EquationButton, {
-              editor: editor
-            }, `gi_equation_${gi}`);
-          case "codeToText":
-            return /*#__PURE__*/_jsx(CodeToTextButton, {
-              handleButtonClick: handleCodeToText
-            }, `gi_codeToText_${gi}`);
-          case "grid":
-            return /*#__PURE__*/_jsx(GridButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "newLine":
-            return /*#__PURE__*/_jsx(NewLineButton, {
-              editor: editor
-            }, element.id);
-          case "accordion":
-            return /*#__PURE__*/_jsx(AccordionButton, {
-              editor: editor
-            }, element.id);
-          case "signature":
-            return /*#__PURE__*/_jsx(SignatureButton, {
-              editor: editor
-            }, element.id);
-          case "button":
-            return /*#__PURE__*/_jsx(ButtonToolIcon, {
-              editor: editor
-            }, element.id);
-          case "page-settings":
-            return /*#__PURE__*/_jsx(PageSettingsButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "carousel":
-            return /*#__PURE__*/_jsx(CarouselButton, {
-              editor: editor
-            }, element.id);
-          case "chip-text":
-            return /*#__PURE__*/_jsx(ChipTextButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          // case "drawer":
-          //   return (
-          //     <DrawerMenuButton
-          //       key={element.id}
-          //       editor={editor}
-          //       customProps={customProps}
-          //     />
-          //   );
-          case "app-header":
-            return /*#__PURE__*/_jsx(AppHeaderButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "form":
-            return /*#__PURE__*/_jsx(FormButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "icon-text":
-            return /*#__PURE__*/_jsx(InlineIconButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          default:
-            return null;
-        }
+        return /*#__PURE__*/_jsx(RenderToolbarIcon, {
+          editor: editor,
+          element: element,
+          gi: gi,
+          handleCodeToText: handleCodeToText,
+          customProps: customProps
+        }, `ri_${element.id}`);
       })
     }, index)), /*#__PURE__*/_jsx(HtmlContextMenu, {
       editor: editor,

package/dist/Editor/Toolbar/styles.css

@@ -1,43 +1,161 @@
-.toolbar {
-    background: #ffffff;
-    margin:4px 0;
-    display:flex;
-    flex-wrap:wrap;
-    align-items:center;
-    padding: 12px 0px;
-    row-gap: 15px;
-    position: -webkit-sticky;
-    position: sticky;
+.toolbar-wrapper {
+    position: absolute;
     top: 0;
+    /* background-color: #ffffff; */
+    overflow: auto;
+    display: flex;
     z-index: 2;
-    margin-bottom: 12px;
-    border-bottom: 2px solid #CCC;
+    width: 100%;
+    padding: 12px 6px;
+}
+
+.editor-wrapper-toolbar-closed .toolbar-wrapper {
+    background-color: unset;
+    width: unset;
+    right: unset;
+}
+
+.toolbar-toggle {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    background-color: #ffffff;
+    border-radius: 6px;
+}
+
+.editor-wrapper-toolbar-closed .toolbar-toggle {
+    border-radius: 8px;
+}
+
+.toolbar-toggle .MuiTypography-body1 {
+    font-size: 0.63rem;
+}
+
+.toolbar-wrapper.top-right,
+.bottom-right {
+    flex-direction: row-reverse;
+    right: 0;
+    left: 0
+}
+
+.top-left,
+.bottom-left {
+    flex-direction: row;
+}
+
+.left-top {
+    flex-direction: column;
+}
+
+.left-bottom {
+    flex-direction: column-reverse;
+}
+
+.top-left-toolbar-wrapper,
+.bottom-left-toolbar-wrapper {
+    left: 0;
+    right: 0;
+}
+
+.left-top-toolbar-wrapper,
+.left-bottom-toolbar-wrapper {
+    left: 0;
+    height: 100%;
+    width: fit-content;
+}
+
+.right-top {
+    flex-direction: column;
 }
-.toolbar-grp1>*{
+
+.right-bottom {
+    flex-direction: column-reverse;
+}
+
+.right-top-toolbar-wrapper,
+.right-bottom-toolbar-wrapper {
+    right: 0;
+    height: 100%;
+    width: fit-content;
+    transition: all 0.5s;
+}
+
+.left-top-toolbar-wrapper,
+.left-bottom-toolbar-wrapper {
+    left: 0;
+    height: 100%;
+    width: fit-content;
+    transition: all 0.5s;
+}
+
+.bottom-left-toolbar-wrapper,
+.bottom-right-toolbar-wrapper {
+    top: unset;
+    bottom: 0;
+}
+.toolbar-wrapper.bottom-right-toolbar-wrapper {
+    right: 0 !important;
+}
+
+.toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.toolbar-grp1>* {
     /* margin-right: 10px; */
     cursor: pointer;
 }
-.toolbar-grp1{
-    margin:0 2px;
+
+.toolbar-grp1 {
+    margin: 0 2px;
     display: flex;
     align-items: center;
+    row-gap: 12px;
 }
+
 .toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
     margin-right: 10px;
 }
+
 .color-picker.popup-wrapper1 button {
     padding: 8px;
 }
-select{
+
+select {
     height: 30px;
     border: none;
     width: 6.9rem;
 }
 
 .toolbar .editor-dd {
-    width: 200px !important;
+    width: 200px;
 }
 
-.toolbar .MuiIconButton-root {
+.toolbar .MuiIconButton-root {}
 
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    /* background: #E6E9F4; */
+    background: #e6e9f48a;
 }
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    /* background: #bdc0d2; */
+    background: #bdc0d240;
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    /* background: #a1a5bd; */
+    background: #bdc0d240;
+}