@flozy/editor 1.6.0 → 1.6.2

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

@@ -1,34 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { Editor, Element } from "slate";
-import { IconButton } from "@mui/material";
-import AspectRatioIcon from "@mui/icons-material/AspectRatio";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { Box } from "@mui/material";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
+import TableStyles from "./Styles";
 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 Resizer = ({
-  onMouseDown
+  classes,
+  onMouseDown,
+  height
 }) => {
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(IconButton, {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "cell-resizer",
       contentEditable: false,
       onPointerDown: onMouseDown,
+      sx: classes.cellResizer,
       style: {
-        position: "absolute",
-        right: "-8px",
-        top: 0,
-        background: "none",
-        width: "15px",
-        height: "100%"
-      },
-      children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
+        height: `${height}px`
+      }
     })
   });
 };
 const TableCell = props => {
+  const classes = TableStyles();
   const {
     element,
     attributes,
@@ -40,17 +39,18 @@ const TableCell = props => {
   } = customProps;
   const {
     bgColor,
-    borderColor
+    borderColor,
+    entireBgColor
   } = 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 [tableSize, setTableSize] = useState({});
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
   const [tableNode] = Editor.nodes(editor, {
@@ -63,16 +63,40 @@ const TableCell = props => {
   });
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
+  const tableDOM = table.getDOMNode(path, true);
+  const isCellSelected = table.isCellSelected(editor.selection);
+  const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
   useEffect(() => {
-    if (editor && element) {
+    if (tableDOM) {
+      const {
+        width,
+        height
+      } = tableDOM.getBoundingClientRect();
+      const {
+        width: parentWidth
+      } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
+      const {
+        styleProps
+      } = tableProps || {};
+      const columns = styleProps ? styleProps["table.columns"] : 2;
+      setTableSize({
+        width,
+        height,
+        parentWidth,
+        cellWidth: parentWidth / columns
+      });
+    }
+  }, [tableDOM]);
+  useEffect(() => {
+    if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
       onLoad(element?.size || {
-        width: 100,
+        width: tableSize?.cellWidth,
         height: 100
       });
     }
-  }, []);
+  }, [tableSize]);
   useEffect(() => {
     if (!resizing && tableProps) {
       table.updateTableStyle({
@@ -81,20 +105,26 @@ const TableCell = props => {
     }
   }, [resizing]);
   const sizeProps = isHeader ? {
-    width: size?.width || 100
+    width: size?.width || tableSize?.cellWidth
   } : {};
+  const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,
-    className: "editor-table-cell",
+    className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
     style: {
       position: "relative",
-      backgroundColor: bgColor,
-      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
+      backgroundColor: bgColor || entireBgColor,
+      border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, selected && isHeader && !readOnly ? /*#__PURE__*/_jsx(Resizer, {
-      onMouseDown: onMouseDown
+    children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
+      classes: classes,
+      onMouseDown: onMouseDown,
+      height: tableSize?.height
+    }) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
+      className: "selection-area-tc",
+      contentEditable: false
     }) : null]
   });
 };

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

@@ -1,16 +1,16 @@
 import React, { useRef, useState } from "react";
-import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography, Tooltip } from "@mui/material";
+import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
 import Icon from "../../common/Icon";
 import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
 import "./TableSelector.css";
 import CloseIcon from "@mui/icons-material/Close";
-// import commonStyle from "../../commonStyle";
-// import styled from "@emotion/styled";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
-  editor
+  editor,
+  icoBtnType
 }) => {
   const tableOptionsRef = useRef();
   const [selection, setSelection] = useState();
@@ -41,18 +41,16 @@ const TableSelector = ({
   return /*#__PURE__*/_jsxs("div", {
     ref: tableOptionsRef,
     className: "popup-wrapper1 ",
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Table",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        style: {
-          border: showOptions ? "1px solid lightgray" : "none"
-        },
-        onClick: handleButtonClick,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "table"
-        })
-      })
+      style: {
+        border: showOptions ? "1px solid lightgray" : "none"
+      },
+      onClick: handleButtonClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "table"
+      }),
+      icoBtnType: icoBtnType
     }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,
       className: `dialogComp tablePopup`,

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

@@ -1,13 +1,3 @@
 .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/Elements/TopBanner/Styles.js

@@ -0,0 +1,33 @@
+const TopBannerStyles = () => ({
+  root: {
+    "&:hover": {
+      "& .tb-toolbar": {
+        display: "block"
+      }
+    }
+  },
+  toolbar: {
+    position: "absolute",
+    width: "auto",
+    bottom: "8px",
+    left: 0,
+    right: 0,
+    margin: "auto",
+    display: "none",
+    "& button": {
+      background: "#FFF",
+      border: "1px solid #ccc",
+      borderRadius: "6px",
+      color: "#373232",
+      marginRight: "8px",
+      padding: "4px 8px",
+      textTransform: "capitalize",
+      fontSize: "14px",
+      "&:hover": {
+        background: "#ccc",
+        color: "#373232"
+      }
+    }
+  }
+});
+export default TopBannerStyles;

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+import TopBannerStyles 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";
+export const TopBannerToolbar = props => {
+  const {
+    classes,
+    customProps,
+    editor
+  } = props;
+  const [open, setOpen] = useState(false);
+  const handleClick = type => () => {
+    switch (type) {
+      case "change":
+        setOpen(true);
+        break;
+      case "remove":
+        removeTopBanner(editor);
+        break;
+      default:
+        return;
+    }
+  };
+  const onSelectImage = img => {
+    updateTopBanner(editor, {
+      url: img
+    });
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      component: "div",
+      className: "tb-toolbar",
+      sx: classes.toolbar,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClick("change"),
+        children: "Change Image"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleClick("remove"),
+        children: "Remove"
+      })]
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+const TopBanner = props => {
+  const {
+    attributes,
+    element,
+    children,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps;
+  const {
+    url
+  } = element;
+  const classes = TopBannerStyles();
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    ...attributes,
+    style: {
+      position: "relative",
+      height: "320px",
+      textAlign: "center"
+    },
+    contentEditable: false,
+    sx: classes.root,
+    children: [/*#__PURE__*/_jsx("img", {
+      src: url,
+      alt: "Top Banner",
+      style: {
+        width: "90%",
+        height: "320px",
+        objectFit: "cover",
+        borderRadius: "12px",
+        margin: "0px 0px"
+      }
+    }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
+      ...props,
+      classes: classes
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
+  });
+};
+TopBanner.defaultProps = {
+  attributes: {},
+  children: []
+};
+export default TopBanner;

package/dist/Editor/Elements/TopBanner/TopBannerButton.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertTopBanner } from "../../utils/topBanner";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+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 TopBannerButton = props => {
+  const {
+    editor,
+    icoBtnType,
+    customProps
+  } = props;
+  const [open, setOpen] = useState(false);
+  const onSelectImage = url => {
+    console.log(url);
+    if (url) {
+      insertTopBanner(editor, {
+        url
+      });
+    }
+    setOpen(false);
+  };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Top Banner",
+      onClick: handleClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "topbanner"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+export default TopBannerButton;

package/dist/Editor/Styles/EditorStyles.js

@@ -0,0 +1,50 @@
+const editorStyles = ({
+  padHeight
+}) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    padding: "0 8px"
+  },
+  slateWrapper: {
+    height: `${window.innerHeight - padHeight}px`,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#cccccc2b",
+    "& .scroll-area": {
+      display: "flex",
+      justifyContent: "center",
+      // minHeight: "100vh",
+      flex: 1
+    },
+    "& .editor-wrapper": {
+      maxWidth: "90%",
+      height: "100%",
+      backgroundColor: "#FFF",
+      overflow: "visible"
+    },
+    "& .el-toolbar": {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "fit-content",
+      "& button": {
+        border: "1px solid rgba(37, 99, 235, 0.32)",
+        borderRadius: "10px",
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        background: "#fff",
+        width: "36px",
+        height: "36px",
+        "&.mr": {
+          marginRight: "2px"
+        },
+        "& svg": {
+          stroke: "rgb(100, 116, 139);"
+        }
+      }
+    }
+  }
+});
+export default editorStyles;

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   editor,
   format,
-  options
+  options,
+  width
 }) => {
   const value = activeMark(editor, format);
   const changeMarkData = (event, format) => {
@@ -23,10 +24,11 @@ const Dropdown = ({
     onChange: e => changeMarkData(e, format),
     style: {
       fontFamily: fontFamilyMap[value],
-      width: "100%",
+      width: width || "100%",
       height: "36px",
       overflow: "hidden",
-      borderRadius: "10px"
+      borderRadius: "10px",
+      fontSize: "14px"
     },
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
       style: {
@@ -37,4 +39,7 @@ const Dropdown = ({
     }, index))
   });
 };
+Dropdown.defaultProps = {
+  icon: null
+};
 export default Dropdown;

package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js

@@ -4,6 +4,7 @@ import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
 import Icon from "../../common/Icon";
 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 FontFamilyDropdown = ({
   editor,
@@ -18,26 +19,25 @@ const FontFamilyDropdown = ({
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /*#__PURE__*/_jsxs(Tooltip, {
-    title: format,
-    arrow: true,
-    style: {
-      textTransform: 'capitalize'
-    },
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      "aria-label": "more",
-      id: "long-button",
-      "aria-controls": open ? 'long-menu' : undefined,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      onClick: handleClick,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: format
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Font Family",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "more",
+        id: "long-button",
+        "aria-controls": open ? "long-menu" : undefined,
+        "aria-expanded": open ? "true" : undefined,
+        "aria-haspopup": "true",
+        onClick: handleClick,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: format
+        })
       })
     }), /*#__PURE__*/_jsx(Menu, {
       id: "long-menu",
       MenuListProps: {
-        'aria-labelledby': 'long-button'
+        "aria-labelledby": "long-button"
       },
       anchorEl: anchorEl,
       open: open,

package/dist/Editor/Toolbar/FormatTools/FontSize.js

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
-import Button from '../../common/Button';
-import Icon from '../../common/Icon';
-import { activeMark, addMarkData, isBlockActive } from '../../utils/SlateUtilityFunctions';
-import usePopup from '../../utils/customHooks/usePopup';
-import { sizeMap } from '../../utils/font';
+import React, { useEffect, useRef, useState } from "react";
+import Button from "../../common/Button";
+import Icon from "../../common/Icon";
+import { activeMark, addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
+import usePopup from "../../utils/customHooks/usePopup";
+import { sizeMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FontSize = ({
@@ -16,7 +16,7 @@ const FontSize = ({
   const [fontSize, setFontSize] = useState(16);
   const [showInput, setShowInput] = usePopup(urlInputRef);
   useEffect(() => {
-    setFontSize(activeValue === 'normal' ? 16 : getSizeVal(activeValue));
+    setFontSize(activeValue === "normal" ? 16 : getSizeVal(activeValue));
   }, [activeValue]);
   const getSizeVal = value => {
     try {
@@ -61,8 +61,8 @@ const FontSize = ({
       className: `${isBlockActive(editor, format) && "btnActive"}`,
       active: isBlockActive(editor, format),
       style: {
-        border: showInput ? '1px solid lightgray' : '',
-        borderBottom: 'none'
+        border: showInput ? "1px solid lightgray" : "",
+        borderBottom: "none"
       },
       format: format,
       onClick: handleButtonClick,
@@ -73,9 +73,9 @@ const FontSize = ({
     }), showInput && /*#__PURE__*/_jsxs("div", {
       className: "fontSizeWrapper popup imagePopup",
       style: {
-        display: 'flex',
-        justifyContent: 'center',
-        maxWidth: '120px'
+        display: "flex",
+        justifyContent: "center",
+        maxWidth: "120px"
       },
       children: [/*#__PURE__*/_jsx("span", {
         className: "controls",
@@ -89,11 +89,11 @@ const FontSize = ({
         value: fontSize,
         type: "text",
         style: {
-          border: 'unset',
-          outline: 'unset',
-          marginBottom: 'unset',
-          maxWidth: '36px',
-          overflow: 'hidden'
+          border: "unset",
+          outline: "unset",
+          marginBottom: "unset",
+          maxWidth: "36px",
+          overflow: "hidden"
         },
         onChange: onInputChange,
         disabled: !activeValue && activeValue !== 0

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -8,7 +8,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const TextSize = ({
   editor,
-  format
+  format,
+  fullWidth
 }) => {
   const value = activeMark(editor, format);
   const onChangeSize = e => {
@@ -49,11 +50,17 @@ const TextSize = ({
       size: "small",
       inputProps: {
         style: {
-          width: "30px",
-          textAlign: "center"
+          width: fullWidth ? "100%" : "30px",
+          textAlign: "center",
+          height: "19px",
+          fontSize: "14px"
         }
       },
+      fullWidth: fullWidth,
       InputProps: {
+        style: {
+          borderRadius: "8px"
+        },
         endAdornment: /*#__PURE__*/_jsxs("div", {
           className: "textFontArrows",
           children: [/*#__PURE__*/_jsx(IconButton, {
@@ -70,4 +77,7 @@ const TextSize = ({
     })
   });
 };
+TextSize.defaultProps = {
+  fullWidth: false
+};
 export default TextSize;

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

@@ -5,5 +5,6 @@ import Autocomplete from "./Autocomplete";
 import Text from "./Text";
 import TextSize from "./TextSize";
 import FontFamilyDropdown from "./FontFamilyDropdown";
-import FontSize from './FontSize';
-export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize };
+import FontSize from "./FontSize";
+import AccordionButton from "../../Elements/Accordion/AccordionButton";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize, AccordionButton };