@flozy/editor 1.6.0 → 1.6.2

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

@@ -1,20 +1,88 @@
-import React from "react";
-import { Grid, Typography } from "@mui/material";
-import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
+import React, { useState } from "react";
+import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
+import WidthFullIcon from "@mui/icons-material/WidthFull";
+import WidthNormalIcon from "@mui/icons-material/WidthNormal";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
 import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
-import { activeMark } from "../../utils/SlateUtilityFunctions";
+import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive } from "../../utils/SlateUtilityFunctions";
+import LinkButton from "../../Elements/Link/LinkButton";
+import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
+import { AllColors } from "../../Elements/Color Picker/ColorButtons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
+const ButtonComp = {
+  AccordionButton: AccordionButton
+};
 const TextFormat = props => {
   const {
     classes,
     editor
   } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [type, setType] = useState(null);
+  const open = Boolean(anchorEl);
   const fontFamily = allTools.find(f => f.format === "fontFamily");
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
+  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
+  const {
+    pageProps
+  } = getPageSettings(editor)?.element || {};
+  const {
+    pageWidth
+  } = pageProps;
+  const {
+    isActive: isBlockQuoteActive,
+    props: bqProps
+  } = getBlockActive(editor, "blockquote");
+  const {
+    color: bqColor,
+    bgColor: bqBgColor
+  } = bqProps || {
+    color: "",
+    bgColor: ""
+  };
+  const handlePageWidth = width => () => {
+    updatePageSettings(editor, {
+      ...pageProps,
+      pageWidth: width
+    });
+  };
+  const handleColorPicker = type => e => {
+    setType(type);
+    setAnchorEl(e.currentTarget);
+  };
+  const updateBlockQuote = attr => {
+    const upAttr = {
+      ...(bqProps || {}),
+      ...attr
+    };
+    delete upAttr.children;
+    delete upAttr.type;
+    if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
+      upateBlockActive(editor, "blockquote", upAttr);
+    } else {
+      toggleBlock(editor, "blockquote", editor.selection, upAttr);
+    }
+  };
+  const onSelectColor = color => () => {
+    const attr = {
+      [type]: color
+    };
+    updateBlockQuote(attr);
+  };
+  const handleQuote = attr => () => {
+    updateBlockQuote(attr);
+  };
+  const onClosePicker = () => {
+    setAnchorEl(null);
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -24,11 +92,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
+        sx: classes.typoLabel,
         children: "Font Family"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -39,67 +103,96 @@ const TextFormat = props => {
           editor: editor
         })
       })]
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 2,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Weight"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatField,
+          children: /*#__PURE__*/_jsx(Dropdown, {
+            ...fontWeight,
+            editor: editor,
+            width: "100%"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Size"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatCG,
+          children: /*#__PURE__*/_jsx(TextSize, {
+            format: "fontSize",
+            activeMark: activeMark,
+            editor: editor,
+            fullWidth: true
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: {
-        paddingTop: "12px"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Font Style"
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatCG,
-      children: fontStyle?.map((m, i) => {
-        return /*#__PURE__*/_jsx(MarkButton, {
+        sx: classes.typoLabel,
+        children: "Text Color"
+      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "color",
+          activeMark: activeMark,
           editor: editor,
-          ...m
-        }, `pptool_mark_${i}_${m.id}`);
-      })
+          showHex: false,
+          rounded: true
+        }, "11_cc")
+      })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 4,
+      xs: 12,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Font Size"
+        sx: classes.typoLabel,
+        children: "Text Background Color"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
-        xs: 10,
-        sx: classes.textFormatCG,
-        children: /*#__PURE__*/_jsx(TextSize, {
-          format: "fontSize",
+        xs: 12,
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "bgColor",
           activeMark: activeMark,
-          editor: editor
-        })
+          editor: editor,
+          showHex: false,
+          rounded: true,
+          classes: classes
+        }, "12_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 7,
+      xs: 6,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
+        sx: classes.typoLabel,
         children: "Text Alignment"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -114,52 +207,142 @@ const TextFormat = props => {
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 12,
+      xs: 6,
       sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Text Color"
+        sx: classes.typoLabel,
+        children: "Lists"
       }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatFieldBorder,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "color",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: true,
-          rounded: true
-        }, "11_cc")
+        item: true,
+        xs: 12,
+        sx: classes.textFormatCG,
+        children: lists?.map((m, i) => {
+          const Comp = ButtonComp[m?.component] || BlockButton;
+          return /*#__PURE__*/_jsx(Comp, {
+            editor: editor,
+            ...m
+          }, `pptool_block_${i}_${m.id}`);
+        })
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        style: {
-          fontSize: "14px",
-          fontWeight: 500,
-          marginBottom: 5
-        },
-        children: "Background Color"
-      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.typoLabel,
+        children: "Typography"
+      }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatFieldBorder,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "bgColor",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: true,
-          rounded: true
-        }, "12_cc")
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: [typo?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), fontStyle?.map((m, i) => {
+          return /*#__PURE__*/_jsx(MarkButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, link.format),
+          editor: editor
+        }, link.id)]
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Decorations"
+      })
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      className: "text-decorations-wrpr",
+      children: [/*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqBgColor ? "active" : ""}`,
+          onClick: handleQuote({
+            bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
+          }),
+          style: {
+            background: bqBgColor
+          },
+          children: "Colorbox"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("bgColor"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqColor ? "active" : ""}`,
+          onClick: handleQuote({
+            color: !bqColor ? "rgb(47, 94, 188)" : null
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            style: {
+              borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
+              paddingLeft: "12px"
+            },
+            children: "Quote"
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("color"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handlePageWidth("fixed"),
+        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
+        style: {
+          width: "45%"
+        },
+        children: "Centered"
+      }), /*#__PURE__*/_jsx(Button, {
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "full" ? "active" : "",
+        onClick: handlePageWidth("full"),
+        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
+        style: {
+          width: "45%"
+        },
+        children: "Full width"
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      onClose: onClosePicker,
+      children: /*#__PURE__*/_jsx(AllColors, {
+        classes: classes,
+        onSelect: onSelectColor
+      })
     })]
   });
 };

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper, IconButton, Grid, Typography } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+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 => {
@@ -19,9 +20,14 @@ const PopupTool = props => {
   } = editor;
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
+  const table = new TableUtil(editor);
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
-      setOpen(true);
+      // for table cell selection
+      const isCellsSelected = table.isCellSelected(editor.selection);
+      if (!isCellsSelected) {
+        setOpen(true);
+      }
     } else if (!anchorEl) {
       setOpen(false);
     }
@@ -30,22 +36,25 @@ const PopupTool = props => {
     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();
-        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
+      });
+    }
+  };
   const handleClose = () => {
     setAnchorEl(null);
     setOpen(false);
@@ -64,33 +73,13 @@ 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, {})
-            })
-          })]
+        style: {
+          borderRadius: "10px"
+        },
+        children: [/*#__PURE__*/_jsx(PopperHeader, {
+          title: "Text Settings",
+          classes: classes,
+          onClose: handleClose
         }), /*#__PURE__*/_jsx(TextFormat, {
           editor: editor,
           classes: classes