@flozy/editor 4.4.9 → 4.5.0

package/dist/Editor/CommonEditor.js

@@ -27,7 +27,7 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
@@ -82,7 +82,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
-    toolbarOptions,
     otherProps,
     isIframe,
     theme,
@@ -288,10 +287,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     index,
     type
   } = mentions;
-  const chars = type ? Shorthands[type]({
+  const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
+  const chars = type && !isFreeGrid(content) ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools || []
+    hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);
@@ -370,7 +370,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (event.key === "ArrowDown" && otherProps?.tagName !== 'Pages') {
       upDownArrowKeyEvents(event, editor);
     }
-  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
+  }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",

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

@@ -499,6 +499,8 @@ const FreeGrid = props => {
         backgroundSize: "cover"
       },
       "data-path": path.join("|"),
+      "data-dragOverId": path.join("|"),
+      "data-dragOverType": "parent",
       style: {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -190,6 +190,8 @@ const FreeGridBox = props => {
       ...attributes,
       className: "fgi_type_box freegrid-container-parent",
       "data-path": path.join("|"),
+      "data-dragOverId": path.join("|"),
+      "data-dragOverType": "parent",
       style: {
         "--height": `${height}px`,
         "--cols": `100%`,

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -20,6 +20,9 @@ const useFreeGridStyles = ({
         marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
         "&.active-drag": {
           pointerEvents: "none",
+          "& *": {
+            pointerEvents: "none"
+          },
           zIndex: "9999 !important"
         },
         "&.inactive-drag": {
@@ -206,9 +209,26 @@ const useFreeGridStyles = ({
           "& .freegrid-item": {
             marginLeft: "0px"
             // pointerEvents: "none",
+          },
+
+          "&.rnd-dragOver": {
+            outline: "2px solid #116dff",
+            "&:before": {
+              content: '"Attach to Box"',
+              position: "absolute",
+              top: "-36px",
+              left: 0,
+              right: 0,
+              margin: "0px auto",
+              width: "fit-content",
+              background: "#116dff",
+              padding: "8px 12px",
+              color: "#FFF",
+              fontSize: "14px",
+              borderRadius: "7px"
+            }
           }
         },
-
         "& .fgi_type_form": {
           "& .form-field": {
             "& input": {
@@ -289,6 +309,22 @@ const useFreeGridStyles = ({
         [theme.breakpoints.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
+      },
+      "&.rnd-dragOver": {
+        "&:before": {
+          content: '"Attact to this Section"',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          margin: "0px auto",
+          width: "fit-content",
+          background: "#116dff",
+          padding: "8px 12px",
+          color: "#FFF",
+          fontSize: "14px",
+          borderRadius: "7px"
+        }
       }
     }
   },

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

@@ -17,7 +17,6 @@ const DragOver = props => {
   const open = Boolean(anchorEl);
   const isSectionHover = status && type === "parent";
   const isContainerHover = hover_on === path && type === "parent-container";
-  console.log(isSectionHover, isContainerHover);
   useEffect(() => {
     if (ref?.current) {
       const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();

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

@@ -11,13 +11,14 @@ import DragInfo from "./DragInfo";
 import GuideLines from "./GuideLines";
 import ShadowElement from "./ShadowElement";
 import BoundaryLine from "./GuideLines/BoundaryLine";
-import DragOver from "./DragOver";
 import ContextMenu from "./ContextMenu";
 import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
 import { focusSelection, clearSelection } from "../../helper";
 import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
+import useDragging from "../../hooks/useDragging";
+import { dragOverOn } from "../../helper/RnD/focusNode";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -58,7 +59,6 @@ const RnD = props => {
   const {
     isSelectedElement,
     setSelectedElement,
-    dragging,
     updateDragging,
     contextMenu,
     setContextMenu,
@@ -76,21 +76,25 @@ const RnD = props => {
   const open = Boolean(enable);
   const currentAction = str_path === sp ? selectedAction : null;
   const positionRef = useRef();
+  const {
+    draggingRef,
+    startDragging,
+    stopDragging,
+    setDragOver
+  } = useDragging();
+  const dragging = draggingRef?.current;
   const {
     active,
     id,
-    parentPath,
-    dragOver
+    parentPath
   } = dragging;
   const dragInfoOpen = id === str_path;
-  const dragOverStatus = dragOver === str_path && parentPath !== str_path;
   const [absPosition, setAbsPosition] = useState({});
   const openContextMenu = contextMenu?.path === str_path;
   const [position, setPosition] = useState({
     x: 0,
     y: 0
   });
-  const pathIsDragging = dragOver === str_path && dragging?.isDragging;
   const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
@@ -156,7 +160,6 @@ const RnD = props => {
       switch (e.detail) {
         case 1:
           if (!enable) {
-            // focusSelection(editor, { path });
             setSelectedElement({
               path: str_path,
               enable: 1,
@@ -164,6 +167,7 @@ const RnD = props => {
               anchorEl: rndRef?.current
             });
           }
+          // ReactEditor.focus(editor);
           break;
         case 2:
           focusSelection(editor, {
@@ -281,9 +285,8 @@ const RnD = props => {
         dragOver: null
       }, null);
     }
-    // focusSelection(editor, { path: updated_at });
+    stopDragging();
   };
-
   const onDragStart = e => {
     e.preventDefault();
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
@@ -301,6 +304,9 @@ const RnD = props => {
         diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
         diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
       };
+      const parentPath = getParentSectionPath({
+        ref
+      }, ".freegrid-container-parent");
       updateDragging({
         ...dragging,
         active: true,
@@ -312,17 +318,24 @@ const RnD = props => {
           width,
           height
         },
-        isDragging: true,
-        parentPath: getParentSectionPath({
-          ref
-        }, ".freegrid-container-parent")
+        isDragging: 1,
+        parentPath
       });
       setPosition({
         ...updatedPosition
       });
+      startDragging({
+        active: true,
+        id: str_path,
+        position: {
+          ...updatedPosition
+        },
+        isDragging: 1,
+        parentPath
+      });
     }
   };
-  const onDrag = (e, d) => {
+  const onDrag = e => {
     e.preventDefault();
     const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
     setAbsPosition({
@@ -330,7 +343,7 @@ const RnD = props => {
       "--zIndex": 2000
     });
     updateDragging({
-      isDragging: true,
+      isDragging: 2,
       position: {
         ...dragging.position,
         x: e.clientX,
@@ -344,16 +357,34 @@ const RnD = props => {
       y: e.clientY,
       lines: lines
     });
+    const isDragOverOnParent = {};
+    let dragOverEle = e?.toElement?.dataset?.dragovertype !== "child" ? e?.toElement : e?.toElement?.closest(".freegrid-container-parent");
+
+    // some cases
+    if (dragOverEle?.dataset?.dragovertype === undefined) {
+      // means check for parent element
+      dragOverEle = e?.toElement?.parentElement;
+    }
+    if (dragOverEle?.dataset?.dragovertype !== "child") {
+      const oldPath = dragging.dragOver;
+      isDragOverOnParent.dragOver = dragOverEle?.dataset?.dragoverid;
+      isDragOverOnParent.dragOverType = dragOverEle?.dataset?.dragovertype;
+      dragOverOn(oldPath, dragOverEle?.dataset?.dragoverid);
+    }
+    startDragging({
+      isDragging: 2,
+      ...isDragOverOnParent
+    });
   };
   const onDragStop = (e, d) => {
     e.preventDefault();
     e.stopPropagation();
-    if (dragging?.isDragging && dragging?.position?.strXY) {
+    if (dragging?.isDragging === 2 && dragging?.position?.strXY && dragging?.dragOver) {
       d.x = e.x;
       d.y = e.y;
       d.offsetX = e.offsetX;
       d.offsetY = e.offsetY;
-      d.dragOver = dragOver;
+      d.dragOver = dragging?.dragOver;
       d.parentPath = parentPath;
       d.diffX = position?.diffX;
       d.diffY = position?.diffY;
@@ -381,6 +412,11 @@ const RnD = props => {
       setAbsPosition({
         ...ud
       });
+      stopDragging();
+    } else {
+      // invalid drags
+      // found in dev mode and in safari browser
+      onAfterDrop(path);
     }
   };
   const onResizeStop = (e, direction, ref, d, position) => {
@@ -431,6 +467,9 @@ const RnD = props => {
       e.stopPropagation();
     }
     if (type !== "child") {
+      setDragOver({
+        dragOver: str_path
+      });
       updateDragging({
         dragOver: str_path
       }, str_path);
@@ -504,14 +543,9 @@ const RnD = props => {
         "data-event": "rnd-click",
         className: "editor-blocker",
         "data-path": path,
-        contentEditable: false
-      }) : null, pathIsDragging ? /*#__PURE__*/_jsx(DragOver, {
-        status: dragOverStatus,
-        hover_on: dragOver,
-        path: str_path,
-        parentPath: parentPath,
-        type: type,
-        childType: childType
+        contentEditable: false,
+        "data-dragOverId": str_path,
+        "data-dragOverType": type
       }) : null]
     }, eId), !active && rndRef?.current && open ? /*#__PURE__*/_jsx(ElementOptions, {
       id: `opt_ref_${str_path}`,

package/dist/Editor/common/Section/styles.js

@@ -55,15 +55,17 @@ const SectionStyle = theme => ({
     },
     "&.is-temp": {
       position: "fixed",
-      background: "red",
+      background: "transparent",
       padding: "12px",
       width: "10px",
       height: "10px",
-      // left: 0,
-      // top: 0,
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
       margin: "auto",
-      left: "var(--left)",
-      top: "var(--top)",
+      // left: "var(--left)",
+      // top: "var(--top)",
       zIndex: 1000,
       pointerEvents: "none"
     }

package/dist/Editor/helper/RnD/focusNode.js

@@ -17,6 +17,7 @@ const ensureTemporaryFocusNode = (editor, selectedDOM) => {
       type: "temp",
       temp: TEMP_NODE_ID,
       children: [{
+        type: "restrictedType",
         text: ""
       }],
       left,
@@ -24,22 +25,9 @@ const ensureTemporaryFocusNode = (editor, selectedDOM) => {
     }, {
       at: [editor.children.length]
     });
-  } else {
-    Transforms.setNodes(editor, {
-      type: "temp",
-      temp: TEMP_NODE_ID,
-      children: [{
-        text: ""
-      }],
-      left,
-      top
-    }, {
-      at: tempNodeEntry[1]
-    });
   }
 };
 export const focusUsingTemporaryNode = (editor, selectedDOM) => {
-  // de-select and select
   Transforms.deselect(editor);
 
   // Ensure the temporary node exists
@@ -52,9 +40,8 @@ export const focusUsingTemporaryNode = (editor, selectedDOM) => {
   });
   if (tempNodeEntry) {
     const [, path] = tempNodeEntry;
-    Transforms.select(editor, path); // Move selection to the temp node
+    Transforms.select(editor, path);
   }
-
   ReactEditor.focus(editor);
 };
 export const cleanupTemporaryFocusNode = editor => {
@@ -67,4 +54,21 @@ export const cleanupTemporaryFocusNode = editor => {
       at: path
     });
   }
+};
+export const dragOverOn = (previousPath, currentPath) => {
+  try {
+    const previousElement = document.querySelector(`[data-dragoverid="${previousPath}"]`);
+    const currentElement = document.querySelector(`[data-dragoverid="${currentPath}"]`);
+    // Remove 'dragOver' class from the current element, if it exists
+    if (previousElement && previousElement.classList.contains("rnd-dragOver")) {
+      previousElement.classList.remove("rnd-dragOver");
+    }
+
+    // Add 'dragOver' class to the new element
+    if (currentElement) {
+      currentElement.classList.add("rnd-dragOver");
+    }
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/hooks/useDragging.js

@@ -0,0 +1,51 @@
+import { useState, useCallback, useRef } from "react";
+const initialState = {
+  id: null,
+  active: false,
+  isDragging: 0,
+  dragOver: false,
+  dragOverType: null
+};
+const useDragging = () => {
+  const [dragging, setDragging] = useState({
+    ...initialState
+  });
+
+  // Ref to keep the latest draggingStatus
+  const draggingRef = useRef(dragging);
+  const updateDragging = newStatus => {
+    setDragging(prevStatus => {
+      const updatedStatus = {
+        ...prevStatus,
+        ...newStatus
+      };
+      draggingRef.current = updatedStatus; // Update the ref to hold latest status
+      return updatedStatus;
+    });
+  };
+  const startDragging = useCallback(data => {
+    // console.log("dragissue", "startDragging");
+    updateDragging({
+      ...data
+    });
+  }, []);
+  const stopDragging = useCallback(() => {
+    // console.log("dragissue", "stopDragging");
+    updateDragging({
+      ...initialState
+    });
+  }, []);
+  const setDragOver = useCallback(isOver => {
+    updateDragging({
+      dragOver: isOver
+    });
+  }, []);
+  return {
+    dragging,
+    draggingRef,
+    startDragging,
+    stopDragging,
+    setDragOver
+  };
+};
+export default useDragging;

package/dist/Editor/hooks/useMouseMove.js

@@ -98,7 +98,11 @@ export const EditorProvider = ({
     updateDragging,
     fontFamilies,
     setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, dragging.active, dragging.isDragging, dragging.dragOver, contextMenu, openAI, popupType, drop, fontFamilies]);
+  }), [path, editor?.selection, selectedPath, selectedElement,
+  // dragging.active,
+  // dragging.isDragging,
+  // dragging.dragOver,
+  contextMenu, openAI, popupType, drop]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/withCommon.js

@@ -9,6 +9,7 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
+import withRestrictedNodes from "./withRestrictedNodes";
 const withCommon = (props, rest = {}) => {
   return rest.needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
 };

package/dist/Editor/hooks/withRestrictedNodes.js

@@ -0,0 +1,48 @@
+import { Editor } from "slate";
+
+// Custom insertText that prevents updates in specific node types
+const withRestrictedNodes = editor => {
+  const {
+    insertText,
+    deleteBackward
+  } = editor;
+
+  // Override insertText
+  editor.insertText = text => {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const [node] = Editor.node(editor, selection);
+      console.log(node);
+
+      // Prevent insertText if node type matches
+      if (node && node.type === "restrictedType") {
+        return; // Skip inserting text
+      }
+    }
+
+    // Call the original insertText if node type does not match
+    insertText(text);
+  };
+
+  // Similarly override deleteBackward if needed
+  editor.deleteBackward = (...args) => {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const [node] = Editor.node(editor, selection);
+
+      // Prevent deletion if node type matches
+      if (node && node.type === "restrictedType") {
+        return; // Skip deleting text
+      }
+    }
+
+    // Call the original deleteBackward if node type does not match
+    deleteBackward(...args);
+  };
+  return editor;
+};
+export default withRestrictedNodes;

package/dist/Editor/utils/RnD/RnDCtrlCmds.js

@@ -157,7 +157,7 @@ const onBringBack = (event, {
     console.log(err);
   }
 };
-export const onInsertFragment = async ({
+export const onInsertFragment = ({
   editor,
   slateNodes
 }) => {
@@ -181,6 +181,18 @@ export const onInsertFragment = async ({
           setSelectedElement: window.updateSelectedItem
         });
       }
+    } else {
+      // if no selection place items at last
+      const np = onPasteRnDNode(editor, {
+        path: [editor.children.length - 1, 0],
+        children: [],
+        slateNodes: slateNodes
+      });
+      if (np && window.updateSelectedItem) {
+        focusOnNewItem(editor, np, {
+          setSelectedElement: window.updateSelectedItem
+        });
+      }
     }
   } catch (err) {
     console.log(err);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -543,8 +543,8 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("span", {
         ...attributes,
         ...element.attr,
-        contentEditable: false,
         className: "temp-focus-node",
+        contentEditable: false,
         children: children
       });
     default:

package/dist/Editor/utils/helper.js

@@ -1,4 +1,4 @@
-import { Editor, Node, Transforms, Element } from "slate";
+import { Editor, Node, Transforms, Element, Path } from "slate";
 import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
@@ -470,4 +470,20 @@ export const editorThemeStyle = {
 };
 export const getEditorTheme = (themeType = "light") => {
   return editorThemeStyle[themeType] || {};
+};
+export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegridBox"]) => {
+  try {
+    for (const node of nodes) {
+      if (types.includes(node.type)) {
+        return true;
+      }
+      if (node.children && isFreeGrid(node.children, types)) {
+        return true;
+      }
+    }
+    return false;
+  } catch (err) {
+    console.log('isFreeGrid error:', err);
+    return false;
+  }
 };

package/package.json

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