@flozy/editor 10.7.5 → 10.7.7

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

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 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 { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
 import { getBorderColor, getTextColor } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
@@ -75,8 +75,6 @@ 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 {
     textColor,
@@ -120,7 +118,7 @@ const Accordion = props => {
     Transforms.deselect(editor);
   };
   const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
+    return toggle ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { insertAccordion } from "../../utils/accordion";
+import { insertAccordion, toggleAccordion } from "../../utils/accordion";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -7,13 +7,22 @@ const AccordionButton = props => {
   const {
     editor,
     icoBtnType,
-    customProps
+    customProps,
+    commonProps
   } = props;
   const {
     translation
   } = customProps;
+  const {
+    listType
+  } = commonProps || {};
+  const isAccordion = listType === "accordion-summary";
   const handleInsertAccordion = () => {
-    insertAccordion(editor);
+    if (isAccordion) {
+      toggleAccordion(editor);
+    } else {
+      insertAccordion(editor);
+    }
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     icon: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Attachments/AttachmentsButton.js

@@ -18,10 +18,6 @@ const AttachmentsButton = props => {
   const {
     translation
   } = customProps;
-  const [uploadStatus, setUploadStatus] = useState({
-    isUploading: false,
-    uploadPercentage: 0
-  });
   const handleClick = () => {
     SetOpen(true);
   };
@@ -51,8 +47,7 @@ const AttachmentsButton = props => {
       onClose: handleClose,
       customProps: customProps,
       onSelectImage: onSelectImage,
-      title: "Document",
-      setUploadStatus: setUploadStatus
+      title: "Document"
     })]
   });
 };

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -164,8 +164,8 @@ export default function Select(props) {
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
             avatar: optionAvatar
-          }),
-          deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+          // deleteIcon={<CloseIcon />}
         })
       }, key);
     },
@@ -210,14 +210,25 @@ export default function Select(props) {
             maxWidth: '150px',
             border: "none",
             "& .MuiChip-label": {
-              paddingLeft: "12px !important",
-              paddingRight: disabled ? "12px !important" : ""
+              // paddingLeft: "12px !important",
+              // paddingRight: disabled ? "12px !important" : "",
+              maxWidth: '100px'
+            },
+            "& .MuiChip-deleteIcon": {
+              '& path': {
+                stroke: '#0F172A'
+              }
             }
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
             avatar: optionAvatar
           }),
+          onDelete: !disabled ? () => {
+            const newValue = [...value];
+            newValue.splice(index, 1);
+            onChange(newValue);
+          } : undefined,
           deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {
             style: {
               cursor: "pointer",

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

@@ -15,10 +15,6 @@ export const TopBannerToolbar = props => {
     editor
   } = props;
   const [open, setOpen] = useState(false);
-  const [uploadStatus, setUploadStatus] = useState({
-    isUploading: false,
-    uploadPercentage: 0
-  });
   const handleClick = type => () => {
     switch (type) {
       case "change":
@@ -32,8 +28,9 @@ export const TopBannerToolbar = props => {
     }
   };
   const onSelectImage = img => {
+    const embedURL = typeof img === "string" ? img : img?.embedURL ? img?.embedURL : null;
     updateTopBanner(editor, {
-      url: img
+      url: embedURL
     });
     handleClose();
   };
@@ -61,7 +58,7 @@ export const TopBannerToolbar = props => {
       onClose: handleClose,
       customProps: customProps,
       onSelectImage: onSelectImage,
-      setUploadStatus: setUploadStatus
+      disableProgress: true
     })]
   });
 };

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

@@ -16,14 +16,11 @@ const TopBannerButton = props => {
   const {
     translation
   } = customProps;
-  const [uploadStatus, setUploadStatus] = useState({
-    isUploading: false,
-    uploadPercentage: 0
-  });
   const onSelectImage = url => {
-    if (url) {
+    const embedURL = typeof url === "string" ? url : url?.embedURL ? url?.embedURL : null;
+    if (embedURL) {
       insertTopBanner(editor, {
-        url: url?.embedURL
+        url: embedURL
       });
     }
     setOpen(false);
@@ -47,7 +44,6 @@ const TopBannerButton = props => {
       onClose: handleClose,
       customProps: customProps,
       onSelectImage: onSelectImage,
-      setUploadStatus: setUploadStatus,
       disableProgress: true
     })]
   });

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
 import CustomSelectTool from "./CustomSelectTool";
 import Icon from "../../../common/Icon";
-import { insertAccordion } from "../../../utils/accordion";
+import { insertAccordion, toggleAccordion } from "../../../utils/accordion";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Label({
@@ -99,7 +99,11 @@ function SelectList({
     if (option.type === "block") {
       toggleBlock(editor, format);
     } else if (option.type === "accordion") {
-      insertAccordion(editor);
+      if (listType === "accordion-summary") {
+        toggleAccordion(editor);
+      } else {
+        insertAccordion(editor);
+      }
     }
     closeMainPopup();
   };

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

@@ -56,13 +56,7 @@ const TextFormat = props => {
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   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 => {
-    let listTool = f.group?.indexOf("list") >= 0;
-    if (listTool) {
-      const hide = f.hideFor?.includes(listType);
-      return !hide;
-    }
-  });
+  const lists = allTools.filter(f => f.group?.includes("list") && !f.hideFor?.includes(listType));
   const {
     isActive: isBlockQuoteActive,
     props: bqProps
@@ -399,7 +393,8 @@ const TextFormat = props => {
           return /*#__PURE__*/_jsx(Comp, {
             editor: editor,
             ...m,
-            customProps: customProps
+            customProps: customProps,
+            commonProps: commonProps
           }, `pptool_block_${i}_${m.id}`);
         })
       })]

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -100,6 +100,7 @@ const FontLoader = props => {
       });
       let families = Array.from(fontSet);
       families = correctFontArray(families.join(", "));
+      // eslint-disable-next-line no-useless-escape
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", ""));
       families = families?.filter(font => googleFontList?.includes(font));

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -32,7 +32,7 @@ const ImageSelector = props => {
     open,
     onSelectImage,
     customProps,
-    setUploadStatus,
+    setUploadStatus = () => {},
     disableProgress
   } = props;
   const {

package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js

@@ -3,6 +3,7 @@ import { Editor, Transforms } from "slate";
 import TextFormat from "../../../../Toolbar/PopupTool/TextFormat";
 import usePopupStyle from "../../../../Toolbar/PopupTool/PopupToolStyle";
 import { ReactEditor } from "slate-react";
+import { getListType } from "../../../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextSettings = props => {
   const {
@@ -15,6 +16,10 @@ const TextSettings = props => {
   const item_path = path.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
   const classes = usePopupStyle(theme);
+  const listType = getListType(editor);
+  const commonProps = {
+    listType
+  };
   useEffect(() => {
     try {
       ReactEditor.focus(editor);
@@ -29,7 +34,8 @@ const TextSettings = props => {
     classes: classes,
     editor: editor,
     customProps: customProps,
-    closeMainPopup: onClose
+    closeMainPopup: onClose,
+    commonProps: commonProps
   });
 };
 export default TextSettings;

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -28,10 +28,6 @@ const BackgroundImage = props => {
   } = useEditorContext();
   const classes = UploadStyles(theme);
   const disableProgress = title === "Page Settings" || elementProps?.type === "freegridBox" || elementProps?.type === "freegrid";
-  const [uploadStatus, setUploadStatus] = useState({
-    isUploading: false,
-    uploadPercentage: 0
-  });
   const onRemoveBG = () => {
     setBase64(null);
     onChange({
@@ -117,8 +113,7 @@ const BackgroundImage = props => {
       customProps: customProps,
       onSelectImage: onSelectImage,
       title: getTitle(),
-      disableProgress: disableProgress,
-      setUploadStatus: setUploadStatus
+      disableProgress: disableProgress
     })]
   });
 };

package/dist/Editor/plugins/withEmbeds.js

@@ -1,4 +1,6 @@
 import { Transforms, Path, Node } from "slate";
+import { isListItem } from "../utils/helper";
+import { customizeEnterEvent } from "../utils/events";
 const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
 const BlockTypes = ["grid"];
 const withEmbeds = editor => {
@@ -53,6 +55,15 @@ const withEmbeds = editor => {
   };
   editor.insertBreak = (...args) => {
     try {
+      const ele = isListItem(editor);
+      if (ele && ele[0]) {
+        const {
+          breakNext
+        } = customizeEnterEvent(editor, ele);
+        if (breakNext) {
+          return;
+        }
+      }
       const parentPath = Path.parent(editor.selection.focus.path);
       const parentNode = Node.get(editor, parentPath);
       if (editor.isVoid(parentNode)) {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -221,8 +221,9 @@ export const getListType = editor => {
   if (accordionSummary) {
     return "accordion-summary";
   }
+  const listItems = ["list-item", "check-list-item"];
   const [listItem] = Editor.nodes(editor, {
-    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === "list-item"
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && listItems.includes(n.type)
   });
   if (listItem) {
     return "list-item";

package/dist/Editor/utils/accordion.js

@@ -1,7 +1,5 @@
 import { Editor, Element, Path, Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
 import { ALLOWED_TEXT_NODES, getNode, getNodeText, getNodeWithType } from "./helper";
-import { isMobileWindow } from "../helper";
 import { removeAccordion } from "./events";
 import { ReactEditor } from "slate-react";
 const focusAccordion = (editor, upPath) => {
@@ -9,6 +7,7 @@ const focusAccordion = (editor, upPath) => {
     path: upPath,
     offset: 0
   });
+  ReactEditor.focus(editor);
 };
 const getAccordionNode = summaryNode => {
   return {
@@ -75,13 +74,7 @@ export const insertAccordion = (editor, path) => {
       accordionPath = lastNodePath;
     }
     const focusPath = [...accordionPath, 0, 0, 0];
-    if (isMobileWindow()) {
-      // timeout to resolve focus issue in mobile
-      setTimeout(() => focusAccordion(editor, focusPath), 0);
-    } else {
-      focusAccordion(editor, focusPath);
-    }
-    insertNewLine(editor);
+    focusAccordion(editor, focusPath);
   } catch (err) {
     console.log(err);
   }
@@ -161,4 +154,11 @@ export const onDeleteBackwardAccordion = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const toggleAccordion = editor => {
+  const parentAccordion = Editor.above(editor, {
+    match: node => Element.isElement(node) && node.type === "accordion"
+  });
+  const [, accordionPath] = parentAccordion;
+  removeAccordion(editor, accordionPath);
 };

package/dist/Editor/utils/events.js

@@ -197,9 +197,102 @@ export const removeAccordion = (editor, accordionPath) => {
     select: true
   });
 };
+export const customizeEnterEvent = (editor, ele, e) => {
+  const {
+    type
+  } = ele[0];
+  const path = ele[1];
+  const text = Node.string(ele[0]);
+  let breakNext = false;
+  switch (type) {
+    case "list-item":
+      if (!text) {
+        e?.preventDefault();
+        escapeEvent({
+          editor
+        });
+      }
+      break;
+    case "check-list-item":
+      const selectionPath = editor?.selection?.anchor?.path;
+      const currEle = Node.parent(editor, selectionPath);
+      const currEleText = Node.string(currEle);
+      if (!currEleText) {
+        e?.preventDefault();
+        checkListEnterEvent(editor, type);
+      }
+      break;
+    case "accordion-summary":
+      e?.preventDefault();
+      breakNext = true;
+      if (!text) {
+        const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
+        removeAccordion(editor, accordionIndex);
+      } else {
+        const nextPath = Path.next(Path.parent(ele[1]));
+        insertAccordion(editor, nextPath);
+      }
+      break;
+    case "headingOne":
+    case "headingTwo":
+    case "headingThree":
+      const {
+        selection
+      } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
+        const isAtStart = Editor.isStart(editor, selection.anchor, path);
+        if (isAtEnd) {
+          e?.preventDefault();
+          Transforms.insertNodes(editor, {
+            type: "paragraph",
+            children: [{
+              text: ""
+            }]
+          });
+          const newLocation = Editor.after(editor, selection);
+          if (newLocation) {
+            Transforms.select(editor, newLocation);
+          }
+        } else if (!isAtStart) {
+          e?.preventDefault();
+          Transforms.splitNodes(editor);
+          Transforms.setNodes(editor, {
+            type: "paragraph"
+          }, {
+            at: Editor.after(editor, selection)
+          });
+          const newLocation = Editor.after(editor, selection);
+          if (newLocation) {
+            Transforms.select(editor, newLocation);
+          }
+        } else if (isAtStart) {
+          e?.preventDefault();
+          Transforms.insertNodes(editor, {
+            type: "paragraph",
+            children: [{
+              text: ""
+            }]
+          }, {
+            at: Editor.before(editor, selection)
+          });
+          Transforms.select(editor, Editor.before(editor, selection));
+          const newLocation = Editor.before(editor, selection);
+          if (newLocation) {
+            Transforms.select(editor, newLocation);
+          }
+        }
+        return;
+      }
+      break;
+    default:
+  }
+  return {
+    breakNext
+  };
+};
 export const enterEvent = (e, editor, isMobile) => {
   try {
-    const ele = isListItem(editor);
     // on shift enter break line in same node
     if (e.shiftKey && !isMobile) {
       e.preventDefault();
@@ -211,94 +304,6 @@ export const enterEvent = (e, editor, isMobile) => {
       } else {
         Transforms.insertText(editor, "\n");
       }
-    } else if (ele && ele[0]) {
-      const {
-        type
-      } = ele[0];
-      const path = ele[1];
-      const text = Node.string(ele[0]);
-      switch (type) {
-        case "list-item":
-          if (!text) {
-            e.preventDefault();
-            escapeEvent({
-              editor
-            });
-          }
-          break;
-        case "check-list-item":
-          const selectionPath = editor?.selection?.anchor?.path;
-          const currEle = Node.parent(editor, selectionPath);
-          const currEleText = Node.string(currEle);
-          if (!currEleText) {
-            e.preventDefault();
-            checkListEnterEvent(editor, type);
-          }
-          break;
-        case "accordion-summary":
-          e.preventDefault();
-          if (!text) {
-            const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
-            removeAccordion(editor, accordionIndex);
-          } else {
-            const nextPath = Path.next(Path.parent(ele[1]));
-            insertAccordion(editor, nextPath);
-          }
-          break;
-        case "headingOne":
-        case "headingTwo":
-        case "headingThree":
-          const {
-            selection
-          } = editor;
-          if (selection && Range.isCollapsed(selection)) {
-            const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
-            const isAtStart = Editor.isStart(editor, selection.anchor, path);
-            if (isAtEnd) {
-              e.preventDefault();
-              Transforms.insertNodes(editor, {
-                type: "paragraph",
-                children: [{
-                  text: ""
-                }]
-              });
-              const newLocation = Editor.after(editor, selection);
-              if (newLocation) {
-                Transforms.select(editor, newLocation);
-              }
-            } else if (!isAtStart) {
-              e.preventDefault();
-              Transforms.splitNodes(editor);
-              Transforms.setNodes(editor, {
-                type: "paragraph"
-              }, {
-                at: Editor.after(editor, selection)
-              });
-              const newLocation = Editor.after(editor, selection);
-              if (newLocation) {
-                Transforms.select(editor, newLocation);
-              }
-            } else if (isAtStart) {
-              e.preventDefault();
-              Transforms.insertNodes(editor, {
-                type: "paragraph",
-                children: [{
-                  text: ""
-                }]
-              }, {
-                at: Editor.before(editor, selection)
-              });
-              Transforms.select(editor, Editor.before(editor, selection));
-              const newLocation = Editor.before(editor, selection);
-              if (newLocation) {
-                Transforms.select(editor, newLocation);
-              }
-            }
-            return;
-          }
-          break;
-        default:
-      }
     }
     // Handle blockquote splitting
     if (!e.shiftKey) {

package/package.json

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