@flozy/editor 1.9.9 → 2.0.0

package/dist/Editor/CommonEditor.js

@@ -338,7 +338,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
+    editor: editor,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
+      classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",

package/dist/Editor/DialogWrapper.js

@@ -9,7 +9,8 @@ const DialogWrapper = props => {
   const {
     fullScreen,
     onClose,
-    children
+    children,
+    classes
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
     className: `dialogComp`,
@@ -19,6 +20,7 @@ const DialogWrapper = props => {
     style: {
       zIndex: 1000
     },
+    sx: classes.fullScreenWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       style: {
         padding: "6px 8px"
@@ -31,13 +33,16 @@ const DialogWrapper = props => {
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
+            style: {
+              background: "rgba(255,255,255,0.5)"
+            },
             children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
       style: {
-        padding: "0px"
+        paddingTop: "12px"
       },
       children: children
     })]

package/dist/Editor/Editor.css

@@ -181,7 +181,7 @@ blockquote {
 
 .no-border-button button,
 .no-border-button button:hover {
-  border: none
+  border: none;
 }
 
 .grid-item {

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -21,6 +22,7 @@ const Accordion = props => {
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -31,7 +33,7 @@ const Accordion = props => {
     setToggle(!toggle);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
@@ -94,13 +96,19 @@ const Accordion = props => {
         backgroundColor: bgColor
       },
       onClick: onToggle,
-      children: [/*#__PURE__*/_jsx(IconButton, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        role: "button",
         className: "accordion-summary-collapse-btn",
         contentEditable: false,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
           "& svg": {
             fill: textColor
-          }
+          },
+          cursor: "pointer"
         },
         children: !toggle ? /*#__PURE__*/_jsx(Icon, {
           icon: "accordionArrow"

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -4,6 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -18,6 +19,7 @@ const AccordionSummary = props => {
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -26,7 +28,7 @@ const AccordionSummary = props => {
     borderColor
   } = element;
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {

package/dist/Editor/Elements/Embed/Image.js

@@ -6,7 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,6 +48,7 @@ const Image = ({
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
+  const [showTool] = useEditorSelection(editor);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -111,7 +112,7 @@ const Image = ({
     });
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {

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

@@ -11,7 +11,7 @@ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../com
 import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -62,6 +62,7 @@ const Grid = props => {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -174,7 +175,7 @@ const Grid = props => {
   };
   const PoupComp = GridSettingsPoupComp[openSetttings];
   const NewLineButtons = () => {
-    return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+    return !readOnly && selected && path.length === 2 && !showTool ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: "element-selector-ctrl tc",
         children: /*#__PURE__*/_jsx(Tooltip, {
@@ -199,7 +200,7 @@ const Grid = props => {
     }) : null;
   };
   const GridToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {

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

@@ -5,7 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -53,8 +53,9 @@ const GridItem = props => {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {

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

@@ -13,8 +13,9 @@ import DeleteCellIcon from "./DeleteCellIcon";
 import DeleteRowIcon from "./DeleteRowIcon";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
-import "./table.css";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TABLE_MENUS = [{
@@ -91,6 +92,7 @@ const Table = props => {
   const selected = useSelected();
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
+  const [showTool] = useEditorSelection(editor);
   const handleAction = ({
     type,
     position
@@ -125,7 +127,7 @@ const Table = props => {
     setExpandTools(!exandTools);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs(Box, {
+    return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
       component: "div",
       contentEditable: false,
       className: `tableToolBar ${exandTools ? "active" : ""}`,

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

@@ -5,6 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +46,7 @@ const TableCell = props => {
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const path = ReactEditor.findPath(editor, element);
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
@@ -119,7 +121,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
+    children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
       height: tableSize?.height

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

@@ -73,7 +73,7 @@ const TopBanner = props => {
     ...attributes,
     style: {
       position: "relative",
-      height: "280px",
+      height: "296px",
       textAlign: "center"
     },
     contentEditable: false,
@@ -81,6 +81,7 @@ const TopBanner = props => {
     children: [/*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
+      className: "top-banner-wrpr-ele",
       style: {
         width: "100%",
         height: "280px",

package/dist/Editor/Styles/EditorStyles.js

@@ -28,6 +28,11 @@ const editorStyles = ({
     flexDirection: "column",
     alignItems: "center",
     color: "#0f172a",
+    "& .has-topbanner": {
+      "& .doc-title-ele-wrpr": {
+        marginTop: "12px"
+      }
+    },
     "&.no-color": {
       backgroundColor: theme?.palette?.editor?.background,
       color: theme?.palette?.editor?.textColor,
@@ -206,6 +211,17 @@ const editorStyles = ({
       textAlign: "center",
       border: "1px solid #CFD8F5"
     }
+  },
+  fullScreenWrapper: {
+    "& .MuiPaper-root": {
+      borderRadius: "0px !important",
+      "& .MuiDialogTitle-root": {
+        position: "absolute",
+        top: 0,
+        right: "12px",
+        zIndex: 100
+      }
+    }
   }
 });
 export default editorStyles;

package/dist/Editor/common/Section/index.js

@@ -6,6 +6,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SectionStyle = () => ({
@@ -33,6 +34,7 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -58,7 +60,7 @@ const Section = props => {
     setOpenSettings(true);
   };
   const Toolbar = () => {
-    return !readOnly ? /*#__PURE__*/_jsx(Box, {
+    return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "element-toolbar no-border-button ss hr section-tw",
       style: {
@@ -121,7 +123,7 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly ? /*#__PURE__*/_jsx(DragHandle, {
+      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
         ...props
       }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {

package/dist/Editor/commonStyle.js

@@ -83,6 +83,11 @@ const useCommonStyle = theme => ({
         }
       }
     }
+  },
+  textOptions: {
+    "& .MuiPopover-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/hooks/useMouseMove.js

@@ -1,7 +1,23 @@
 import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { getSelectedText } from "../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
+export const useEditorSelection = editor => {
+  const [textSelected, setTextSelected] = useState(false);
+  useEffect(() => {
+    if (editor?.selection) {
+      const text = getSelectedText(editor);
+      if (text?.length > 0) {
+        setTextSelected(true);
+      } else {
+        setTextSelected(false);
+      }
+    }
+  }, [editor?.selection]);
+  return [textSelected];
+};
 export const EditorProvider = ({
+  editor,
   theme,
   children
 }) => {
@@ -23,7 +39,7 @@ export const EditorProvider = ({
         hoverPath: previous
       };
     }
-  }, [path]);
+  }, [path, editor?.selection]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: {
       ...(value || {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.9.9",
+  "version": "2.0.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"