@flozy/editor 10.6.6 → 10.6.8

package/dist/Editor/Editor.css

@@ -1136,7 +1136,7 @@ blockquote {
   margin-left: -20px;
 }
 
-li:has(.accordion-container) {
+.accordion-summary-container li:first-child {
   list-style: none;
 }
 

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Editor, Range, Transforms } from "slate";
+import React, { useState } from "react";
+import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
@@ -94,21 +94,30 @@ const Accordion = props => {
     theme
   } = useEditorContext();
   const classes = useCommonStyle(theme);
-  useEffect(() => {
-    if (!editor.selection) return;
-    try {
-      const detailsPath = [...path, 1];
-      const detailsRange = Editor.range(editor, detailsPath);
-      const isInside = Range.intersection(detailsRange, editor.selection);
-      if (isInside && !toggle) {
-        setToggle(!toggle);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }, [editor.selection, children]);
+
+  // 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);
+    Transforms.deselect(editor);
   };
   const ToolBar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
@@ -205,7 +214,6 @@ const Accordion = props => {
       className: "accordion-title"
       // style={{ background: bgColor, ...borderStyle }}
       ,
-      onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
         role: "button",
         className: "accordion-summary-collapse-btn",
@@ -220,6 +228,7 @@ const Accordion = props => {
           },
           cursor: "pointer"
         },
+        onClick: onToggle,
         children: !toggle ? /*#__PURE__*/_jsx(Icon, {
           icon: "accordionArrow"
         }) : /*#__PURE__*/_jsx(Icon, {

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

@@ -4,8 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
-    children,
-    element
+    children
   } = props;
   return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,

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

@@ -106,7 +106,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, !readOnly);
+  openInNewTab, handleTrigger, !readOnly, false, metadata);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -293,7 +293,7 @@ const EditorButton = props => {
             "&:hover": {
               color: `${textColorHover || textColor || "#FFFFFF"}`,
               background: bgColorHover || bgColor || "rgb(30, 75, 122)",
-              borderColor: borderColorHover || borderColor || "",
+              borderColor: borderColorHover || borderColor || "transparent",
               "& .element-toolbar": {
                 display: "flex"
               }

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -134,15 +134,15 @@ const EditOption = props => {
           size: "small",
           onClick: onBack,
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'leftArrow'
+            icon: "leftArrow"
           })
         }) : null, translation("Edit Option")]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
         sx: {
-          '& svg': {
-            '& path': {
+          "& svg": {
+            "& path": {
               strokeWidth: 0
             }
           }
@@ -187,7 +187,7 @@ const EditOption = props => {
         onClick: onDeleteOption,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'trashIcon'
+            icon: "trashIcon"
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
           children: translation("Delete Option")

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -35,13 +35,13 @@ const FormTextArea = props => {
       onChange: onChange,
       sx: {
         width: "100%",
+        borderWidth: "1px",
         borderBlockStyle: "solid",
         padding: {
           ...getTRBLBreakPoints(bannerSpacing)
         },
         height: height || "150px",
         borderColor: borderColor && `${borderColor} !important`,
-        borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -3,7 +3,7 @@ const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
 const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
 const imageOptions = ["settings", "link", "imageFrame", "saveAsTemplate", "close"];
 const videoOptions = ["settings", "saveAsTemplate", "close"];
-const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
+const boxOptions = ["settings", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
 const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];

package/dist/Editor/Styles/EditorStyles.js

@@ -133,7 +133,11 @@ const editorStyles = ({
       },
       "& .accordion-summary-collapse-btn": {
         padding: "4px",
-        width: "5px"
+        width: "5px",
+        "& svg:hover": {
+          background: theme?.palette?.editor?.tv_hover_bg,
+          borderRadius: "4px"
+        }
       },
       "& .workflow-icon-btn": {
         pointerEvents: "none",
@@ -292,7 +296,7 @@ const editorStyles = ({
       },
       "& ::selection": {
         // background: 'rgba(35, 131, 226, 0.35)!important',
-        color: 'inherit'
+        color: "inherit"
       },
       "&.readOnlyContainer": {
         "& .max-content": {

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import { isBlockActive, isListActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
 import CustomSelectTool from "./CustomSelectTool";
 import Icon from "../../../common/Icon";
 import { insertAccordion } from "../../../utils/accordion";
@@ -79,7 +79,9 @@ function SelectList({
   } = customProps;
   const listOptions = getListOptions(translation);
   const selectedList = useMemo(() => {
-    return listOptions.find(t => isBlockActive(editor, t.value));
+    const listActive = isListActive(editor);
+    let selected = listOptions.find(t => listActive === t.value);
+    return selected;
   }, [listOptions, isBlockActive, editor]);
   const onChange = (format, option) => {
     if (option.type === "block") {

package/dist/Editor/common/iconListV2.js

@@ -1498,6 +1498,26 @@ export function SectionDragIcon() {
     })]
   });
 }
+export function ResetIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "11.646",
+      cy: "11.6452",
+      r: "11.5",
+      transform: "rotate(-89.2717 11.646 11.6452)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function PenIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "17",
@@ -1523,26 +1543,6 @@ export function PenIcon() {
     })]
   });
 }
-export function ResetIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("circle", {
-      cx: "11.646",
-      cy: "11.6452",
-      r: "11.5",
-      transform: "rotate(-89.2717 11.646 11.6452)",
-      fill: "#2563EB",
-      fillOpacity: "0.16"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
-      fill: "#2563EB"
-    })]
-  });
-}
 export function SaveTemplIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "18",

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range, Path } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -50,7 +50,7 @@ import SearchAttachment from "../Elements/Search/SearchAttachment";
 import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
-const list_types = ["orderedList", "unorderedList"];
+const list_types = ["orderedList", "unorderedList", "accordion-details"];
 const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
@@ -66,8 +66,51 @@ const LIST_FORMAT_TYPE = {
 // ];
 
 const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
+const convertAccordionToListItem = (editor, format) => {
+  const accordionLists = Array.from(Editor.nodes(editor, {
+    match: n => {
+      let accordionList = false;
+      if (n.type === "accordion") {
+        const [summary] = n.children;
+        accordionList = [format, "paragraph"].includes(summary.children?.[0]?.type);
+      }
+      return accordionList;
+    }
+  }));
+  accordionLists?.forEach(accordionList => {
+    const [node, path] = accordionList;
+    const [summary, details] = node.children;
+    const listItem = {
+      ...(summary.children[0] || {})
+    };
+    const isPara = listItem.type === "paragraph";
+    if (isPara) {
+      listItem.type = "list-item";
+    }
+
+    // Replace the accordion with the format
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    Transforms.insertNodes(editor, listItem, {
+      at: path
+    });
+    if (isPara) {
+      Transforms.wrapNodes(editor, {
+        type: format,
+        children: []
+      }, {
+        at: path
+      });
+    }
+    const nextPath = Path.next(path);
+    Transforms.insertNodes(editor, details.children, {
+      at: nextPath
+    });
+  });
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
-  const isActive = isBlockActive(editor, format);
+  let isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
   const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
@@ -89,11 +132,26 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
     });
     return;
   }
-  Transforms.unwrapNodes(editor, {
-    match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
-    split: true
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
+    mode: "lowest" // To ensure it's the closest parent
   });
 
+  if (match) {
+    const [matchNode, matchPath] = match;
+    if (matchNode.type !== "accordion-details") {
+      Transforms.unwrapNodes(editor, {
+        match: (n, n2) => {
+          const isList = !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type);
+          return isList && n2.toString() === matchPath.toString();
+        },
+        split: true
+      });
+    } else {
+      isActive = false;
+    }
+  }
+
   // inserting blocks from "/"" commands remove searched word
   if (!selection) {
     Transforms.insertText(editor, "");
@@ -113,8 +171,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   // if (NEWLINESAFTER.indexOf(format) > -1) {
   //   insertNewLine(editor);
   // }
-};
 
+  convertAccordionToListItem(editor, format);
+};
 export const addMarkData = (editor, data) => {
   try {
     Editor.addMark(editor, data.format, data.value);
@@ -202,6 +261,18 @@ export const isBlockActive = (editor, format) => {
   });
   return !!match;
 };
+export const isListActive = editor => {
+  const list_types = ["orderedList", "unorderedList", "check-list-item", "accordion"];
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
+    mode: "lowest" // To ensure it's the closest parent
+  });
+
+  if (match) {
+    const [matchNode] = match;
+    return matchNode.type;
+  }
+};
 export const getBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format

package/dist/Editor/utils/accordion.js

@@ -62,18 +62,13 @@ export const insertAccordion = (editor, path) => {
           };
         }
         let accordion = getAccordionNode([currNode]);
-        if (isListItem) {
-          accordion = {
-            type: "list-item",
-            children: [accordion]
-          };
-        }
         Transforms.removeNodes(editor, {
           at: path
         });
         Transforms.insertNodes(editor, accordion, {
           at: path
         });
+        accordionPath = path;
       }
       const lastNode = selectedNodes[selectedNodes.length - 1];
       const lastNodePath = lastNode[1];

package/dist/Editor/utils/events.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
+import { Editor, Transforms, Element, Node, Path, Range } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";

package/dist/Editor/utils/helper.js

@@ -339,8 +339,9 @@ const handleLinkBtnClick = (e, props, isMobilePreview, metadata) => {
     }
   }
 };
-export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}, metadata = {}, isEditMode, isCustomMobile // for drawer in App Header
-) => {
+export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}, isEditMode, isCustomMobile,
+// for drawer in App Header
+metadata = {}) => {
   const props = {};
   if (!readOnly) {
     return {

package/package.json

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