@flozy/editor 10.6.0 → 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/common/LinkSettings/index.js

@@ -164,7 +164,10 @@ export default function LinkSettings(props) {
                   setNav(navOption);
                   setNavValue("");
                 },
-                translation: translation
+                translation: translation,
+                radioProps: {
+                  disableRipple: true
+                }
               })
             })
           }), /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/common/RnD/Utils/index.js

@@ -124,14 +124,39 @@ const isOverLapLine = ({
 export function getClosestDraggable(x, y, className, activeClassName) {
   const draggables = document.querySelectorAll(className);
   const activeDragEle = document.querySelectorAll(activeClassName)[0];
+  const container = document.querySelector("#slate-wrapper-scroll-container");
+  if (!activeDragEle || !container) return [];
+  const containerRect = container.getBoundingClientRect();
   const {
     left: aLeft,
     top: aTop,
     width: aWidth,
     height: aHeight
   } = activeDragEle?.getBoundingClientRect() || {};
-  let lines = [];
+  const lines = [];
+  const clampLine = ({
+    x,
+    y,
+    width,
+    height
+  }) => {
+    if (width > 1) {
+      if (x < containerRect.left) x = containerRect.left;
+      if (x + width > containerRect.right) width = containerRect.right - x;
+    }
+    if (height > 1) {
+      if (y < containerRect.top) y = containerRect.top;
+      if (y + height > containerRect.bottom) height = containerRect.bottom - y;
+    }
+    return {
+      x,
+      y,
+      width,
+      height
+    };
+  };
   draggables.forEach(draggable => {
+    if (draggable === activeDragEle) return;
     const {
       left,
       top,
@@ -148,42 +173,45 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: top,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // bottom match
     xVal = x < left ? aLeft : left;
     yVal = top + height;
-    if (Math.abs(top + height - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(yVal - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
-    // center match
+    // center match (horizontal)
     xVal = x < left ? aLeft : left;
     yVal = top + height / 2;
-    if (Math.abs(top + height / 2 - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(yVal - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines, "y")) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // right match
@@ -193,12 +221,13 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // left match
@@ -208,27 +237,29 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
 
-    // middle match
+    // middle match (vertical)
     xVal = left + width / 2;
     yVal = top < aTop ? top : aTop;
-    if (Math.abs(aLeft + aWidth / 2 - (left + width / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(aLeft + aWidth / 2 - xVal) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
   });
   return lines;

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

@@ -158,8 +158,11 @@ const RnD = props => {
     const textElement = currElement?.querySelector(".fgi_type_text");
     if (breakpoint && textElement && childType === "text" && !enable) {
       timerId.current = setTimeout(() => {
-        // const { clientHeight } = textElement;
-        const clientHeight = getTextElementHeight(textElement);
+        const {
+          clientHeight
+        } = textElement;
+        // const clientHeight = getTextElementHeight(textElement);
+
         const {
           height
         } = delta || {};

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.0",
+  "version": "10.6.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"