@flozy/editor 10.6.5 → 10.6.7

package/dist/Editor/CommonEditor.js

@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents, handleAccordionOnBackspace } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -174,6 +174,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ReactEditor.focus(editor);
     }
   }, [id, content]);
+  useEffect(() => {
+    if (isReadOnly) {
+      const sectionId = window.location.hash.substring(1);
+      const sectionEle = sectionId ? document.getElementById(decodeURIComponent(sectionId)) : null;
+      if (sectionEle) {
+        sectionEle.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+    }
+  }, []);
   const debounced = useDebouncedCallback(
   // function
   value => {
@@ -428,6 +439,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
       upDownArrowKeyEvents(event, editor);
     } else if (event.key === "Backspace") {
+      // const isAccordion = handleAccordionOnBackspace(event, editor);
+      // if (isAccordion) {
+      //   return;
+      // }
+
       const isNodeRestricted = isRestrictedNode(event, editor);
       if (isNodeRestricted) {
         return;

package/dist/Editor/Editor.css

@@ -426,6 +426,32 @@ blockquote {
 
 .upload-sign-img-wrapper {
   text-align: center;
+  position: relative;
+}
+
+.upload-sign-img {
+  max-width: 100%;
+}
+
+.remove-sign-img-btn {
+  padding: 8px 12px;
+  background-color: #ffffff68;
+  cursor: pointer;
+  width: fit-content;
+  border-radius: 8px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+.remove-sign-img-btn:hover {
+  background-color: #ffffffa0;
+}
+
+.upload-sign-img-wrapper:hover .remove-sign-img-btn {
+  display: block;
 }
 
 .signature-tab img {

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

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
+import React, { useEffect, useState } from "react";
+import { Editor, Range, Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
@@ -8,6 +8,8 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
+import { getBorderColor, getTextColor } from "../../helper";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -78,12 +80,34 @@ const Accordion = props => {
   const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
-    bgColor
+    bgColor,
+    borderColor
   } = element;
+  const accordionSummary = element?.children?.find(c => c.type === "accordion-summary");
+  const {
+    textColor: childTextColor,
+    borderRadius,
+    bannerSpacing
+  } = accordionSummary || {};
+  const borderStyle = getBorderColor(borderColor);
   const {
     theme
   } = useEditorContext();
   const classes = useCommonStyle(theme);
+  useEffect(() => {
+    if (!editor.selection || !children[1]) return;
+    try {
+      const accordionDetailsElement = element.children?.[1];
+      const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
+      const detailsRange = Editor.range(editor, detailsPath);
+      const isInside = Range.intersection(detailsRange, editor.selection);
+      if (isInside && !toggle) {
+        setToggle(true);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [editor.selection, children]);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -159,17 +183,29 @@ const Accordion = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
-  return /*#__PURE__*/_jsxs("div", {
+  const textStyles = getTextColor(childTextColor);
+  const borderRadiusStyles = {
+    ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+  };
+  const padding = getTRBLBreakPoints(bannerSpacing);
+  return /*#__PURE__*/_jsxs(Box, {
     className: `accordion-container`,
     ...attributes,
     style: {
       position: "relative"
     },
+    component: "div",
+    sx: {
+      background: bgColor,
+      ...borderStyle,
+      borderRadius: borderRadiusStyles,
+      padding,
+      '& span[data-slate-string="true"]': textStyles
+    },
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "accordion-title",
-      style: {
-        background: bgColor
-      },
+      className: "accordion-title"
+      // style={{ background: bgColor, ...borderStyle }}
+      ,
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
         role: "button",
@@ -191,7 +227,8 @@ const Accordion = props => {
           icon: "accordionArrowDown"
         })
       }), children[0]]
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "accordion-content",
       style: {
         display: toggle ? "block" : "none"

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

@@ -1,40 +1,17 @@
 import React from "react";
-import { getBorderColor, getTextColor } from "../../helper";
 import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
-    children,
-    element
+    children
   } = props;
-  const {
-    textColor,
-    bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
-  } = element;
-  const textStyles = getTextColor(textColor);
-  const borderStyle = getBorderColor(borderColor);
   return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
       width: "100%",
-      position: "relative",
-      background: bgColor,
-      ...borderStyle
-    },
-    sx: {
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      },
-      '& span[data-slate-string="true"]': textStyles
+      position: "relative"
     },
     component: "div",
     children: children

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -18,7 +18,7 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import AppHeaderPopup from "./AppHeaderPopup";
 import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import { handleLinkType } from "../../utils/helper";
+import { handleLinkType, isHavingColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
@@ -45,6 +45,8 @@ function AppHeader(props) {
     bgColorHover,
     textColor,
     textColorHover,
+    borderColor,
+    borderColorHover,
     menuStyle,
     bannerSpacing,
     fontSize,
@@ -149,7 +151,7 @@ function AppHeader(props) {
       }) : appTitle
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
-        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank", () => {}, !readOnly, true);
         const onButtonClick = e => {
           closeDrawer();
           setTimeout(() => {
@@ -225,6 +227,7 @@ function AppHeader(props) {
           sx: {
             ...elevateStyle,
             background: bgColor,
+            border: isHavingColor(borderColor) ? `1px solid ${borderColor}` : "none",
             boxShadow: "none",
             ...appbarSp,
             zIndex: 999
@@ -322,6 +325,7 @@ function AppHeader(props) {
                     fontSize: fontSize || "16px",
                     color: textColor || "#FFF",
                     background: bgColor || "none",
+                    border: borderColorHover ? `1px solid transparent` : "none",
                     "& .m-settings": {
                       display: "none",
                       position: "absolute",
@@ -337,6 +341,7 @@ function AppHeader(props) {
                     "&:hover": {
                       color: textColorHover || textColor || "#FFF",
                       background: bgColorHover || bgColor || "none",
+                      border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
                       "& .m-settings": {
                         display: "block"
                       }

package/dist/Editor/Elements/Button/EditorButton.js

@@ -97,7 +97,7 @@ const EditorButton = props => {
   };
   const buttonProps = handleLinkType(refURl, linkType, true,
   // button functionalities have to work on both edit mode and normal mode
-  openInNewTab, handleTrigger, metadata);
+  openInNewTab, handleTrigger, !readOnly, false, metadata);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -272,7 +272,7 @@ const EditorButton = props => {
             background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
-            borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
+            borderWidth: borderWidth !== undefined ? borderWidth : borderColor || borderColorHover ? "1px" : "0px",
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -38,7 +38,8 @@ const CarouselItem = props => {
       className: "element-toolbar hr",
       style: {
         top: "0px",
-        left: "0px"
+        left: "0px",
+        width: "fit-content"
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {