@flozy/editor 10.6.1 → 10.6.2

package/dist/Editor/CommonEditor.js

@@ -462,10 +462,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 isAccordion = handleAccordionOnBackspace(event, editor);
+      // if (isAccordion) {
+      //   return;
+      // }
+
       const isNodeRestricted = isRestrictedNode(event, editor);
       if (isNodeRestricted) {
         return;

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

@@ -95,14 +95,13 @@ const Accordion = props => {
   } = useEditorContext();
   const classes = useCommonStyle(theme);
   useEffect(() => {
-    if (!editor.selection || !children[1]) return;
+    if (!editor.selection) return;
     try {
-      const accordionDetailsElement = element.children?.[1];
-      const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
+      const detailsPath = [...path, 1];
       const detailsRange = Editor.range(editor, detailsPath);
       const isInside = Range.intersection(detailsRange, editor.selection);
       if (isInside && !toggle) {
-        setToggle(true);
+        setToggle(!toggle);
       }
     } catch (e) {
       console.error(e);

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,6 @@
 import { Editor, Node, Path, Point, Range, Transforms } from "slate";
 import { containsSurrogatePair, getNextNode } from "../utils/helper";
+import { onDeleteBackwardAccordion } from "../utils/accordion";
 const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
@@ -32,7 +33,7 @@ const withCustomDeleteBackward = editor => {
         }
         if (selection && Range.isCollapsed(selection)) {
           const [currentNode, path] = Editor.node(editor, selection);
-          if (currentNode && typeof currentNode.text === 'string') {
+          if (currentNode && typeof currentNode.text === "string") {
             const text = currentNode.text;
             if (containsSurrogatePair(text)) {
               // Check if the cursor is at the end of a surrogate pair
@@ -60,6 +61,10 @@ const withCustomDeleteBackward = editor => {
               }
             }
           }
+          const preventDefaultAccordion = onDeleteBackwardAccordion(editor);
+          if (preventDefaultAccordion) {
+            return;
+          }
         }
 
         // Check if current node is a list item and is the last one, signature node

package/dist/Editor/utils/accordion.js

@@ -1,6 +1,9 @@
-import { Editor, Element, Transforms } from "slate";
+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) => {
   Transforms.select(editor, {
     path: upPath,
@@ -56,4 +59,80 @@ export const insertAccordion = (editor, path) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const onDeleteBackwardAccordion = editor => {
+  try {
+    let preventDefault = false;
+    const {
+      selection
+    } = editor;
+    const {
+      path: currentPath,
+      offset
+    } = selection.anchor || {};
+    const isCursorAtStart = offset === 0;
+    if (isCursorAtStart) {
+      // If the cursor is at the start of the accordion-summary and backspace is pressed,
+      // unwrap the accordion by removing both the summary and details,
+      // and insert their contents as regular nodes without the accordion wrapper.
+      const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
+      const [accordionTitle, accordionTitlePath] = accordionSummary || [];
+      if (accordionTitle) {
+        const accordionPath = Path.parent(accordionTitlePath);
+        removeAccordion(editor, accordionPath);
+        preventDefault = true;
+        return;
+      }
+      const parentPath = Path.parent(currentPath);
+      const parentNode = getNode(editor, parentPath);
+      const isTextNode = ALLOWED_TEXT_NODES.includes(parentNode?.type);
+      if (isTextNode) {
+        const prevEntry = Editor.previous(editor, {
+          at: parentPath,
+          match: n => n.type === "accordion"
+        });
+        if (prevEntry) {
+          const [accordionNode, accordionPath] = prevEntry;
+          const dom = ReactEditor.toDOMNode(editor, accordionNode);
+          const aContent = dom.querySelector(".accordion-content");
+          const isContentVisible = aContent.style.display !== "none";
+          if (!isContentVisible) {
+            // If the accordion content is not visible and backspace is pressed,
+            // the content from the current node should be merged with the accordion title,
+            // and the cursor should move to the title.
+            // Otherwise, Slate will by default merge the current node into the hidden details section,
+            // which makes the content invisible.
+
+            let targetPath = [...accordionPath, 0, 0];
+            const targetNodeEntry = getNode(editor, targetPath);
+            if (targetNodeEntry) {
+              const nodeText = getNodeText(parentNode);
+              const endPath = Editor.end(editor, targetPath);
+
+              // Move current paragraph text into the end of the target block
+              Transforms.select(editor, Editor.start(editor, parentPath));
+              Transforms.delete(editor, {
+                at: parentPath
+              });
+              Transforms.insertText(editor, nodeText, {
+                at: endPath
+              });
+
+              // move the focus and cursor to the inserted node
+              Transforms.select(editor, {
+                anchor: endPath,
+                focus: endPath
+              });
+              ReactEditor.focus(editor);
+              preventDefault = true;
+              return;
+            }
+          }
+        }
+      }
+    }
+    return preventDefault;
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/events.js

@@ -2,10 +2,9 @@ import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
-import { getNodeWithType, isListItem } from "./helper";
+import { getNode, isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
-import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -184,16 +183,16 @@ const checkListEnterEvent = (editor, type) => {
     insertNewLine(editor);
   }
 };
-const removeAccordion = (editor, accordionPath) => {
+export const removeAccordion = (editor, accordionPath) => {
+  const accordion = getNode(editor, accordionPath);
   Transforms.removeNodes(editor, {
     at: accordionPath
   });
-  Transforms.insertNodes(editor, {
-    type: "paragraph",
-    children: [{
-      text: ""
-    }]
-  }, {
+  const insertNodes = [];
+  accordion.children.forEach(a => {
+    a.children.forEach(n => insertNodes.push(n));
+  });
+  Transforms.insertNodes(editor, insertNodes, {
     at: accordionPath,
     select: true
   });
@@ -342,37 +341,48 @@ export const enterEvent = (e, editor, isMobile) => {
     console.log(err);
   }
 };
-export const handleAccordionOnBackspace = (e, editor) => {
-  try {
-    let isAccordion = false;
-    const [accordionDetails] = getNodeWithType(editor, "accordion-details");
-    const [accordionDetailsNode] = accordionDetails || [];
-    if (accordionDetailsNode) {
-      const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
-      if (dom?.parentElement) {
-        dom.parentElement.style.display = "block";
-      }
-    }
-    const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
-    const [accordionTitle, accordionTitlePath] = accordionSummary || [];
-    if (accordionTitle) {
-      // no selection
-      if (Range.isCollapsed(editor.selection)) {
-        const start = Editor.start(editor, accordionTitlePath);
-        const isCursorAtStart = Point.equals(editor.selection.focus, start);
-        if (isCursorAtStart) {
-          e.preventDefault();
-          const parentPath = Path.parent(accordionTitlePath);
-          removeAccordion(editor, parentPath);
-          isAccordion = true;
-        }
-      }
-    }
-    return isAccordion;
-  } catch (err) {
-    console.log(err);
-  }
-};
+
+// not using now
+// export const handleAccordionOnBackspace = (e, editor) => {
+//   try {
+//     let isAccordion = false;
+
+//     const [accordionDetails] = getNodeWithType(editor, "accordion-details");
+//     const [accordionDetailsNode] = accordionDetails || [];
+
+//     if (accordionDetailsNode) {
+//       const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
+
+//       if (dom?.parentElement) {
+//         dom.parentElement.style.display = "block";
+//       }
+//     }
+
+//     const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
+
+//     const [accordionTitle, accordionTitlePath] = accordionSummary || [];
+
+//     if (accordionTitle) {
+//       // no selection
+//       if (Range.isCollapsed(editor.selection)) {
+//         const start = Editor.start(editor, accordionTitlePath);
+//         const isCursorAtStart = Point.equals(editor.selection.focus, start);
+
+//         if (isCursorAtStart) {
+//           e.preventDefault();
+//           const parentPath = Path.parent(accordionTitlePath);
+//           removeAccordion(editor, parentPath);
+//           isAccordion = true;
+//         }
+//       }
+//     }
+
+//     return isAccordion;
+//   } catch (err) {
+//     console.log(err);
+//   }
+// };
+
 export const upDownArrowKeyEvents = (e, editor) => {
   try {
     const {

package/dist/Editor/utils/helper.js

@@ -1053,4 +1053,5 @@ export const handleCopy = (event, editor) => {
   event.clipboardData?.setData("text/html", html);
   event.clipboardData?.setData("text/plain", text);
   event.clipboardData?.setData("application/x-slate-fragment", encodedFragment);
-};
+};
+export const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "blockquote"];

package/package.json

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