@flozy/editor 4.4.8 → 4.5.0

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js

@@ -0,0 +1,53 @@
+import SignaturePopup from "../../../../Elements/Signature/SignaturePopup";
+import { Path, Transforms } from "slate";
+import { formatDate } from "../../../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Signature = props => {
+  const {
+    onClose,
+    customProps,
+    editor,
+    path
+  } = props;
+  const pPath = path?.split("|")?.map(m => parseInt(m));
+  const element_path = [...pPath, 0];
+  const onSave = (data = {}) => {
+    onClear();
+    Transforms.insertNodes(editor, [{
+      type: "sign",
+      signature: null,
+      fontFamily: "",
+      signedBy: "",
+      signedOn: formatDate(new Date(), "MM/DD/YYYY"),
+      signedText: "",
+      children: [{
+        text: ""
+      }],
+      ...data
+    }], {
+      at: element_path
+    });
+    const parentPath = Path.parent(element_path);
+    Transforms.setNodes(editor, {
+      childType: "sign"
+    }, {
+      at: parentPath
+    });
+  };
+  const onClear = () => {
+    Transforms.removeNodes(editor, {
+      at: element_path
+    });
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(SignaturePopup, {
+      onSave: onSave,
+      onClear: onClear,
+      handleClose: onClose,
+      customProps: customProps,
+      onlyPopup: true
+    })
+  });
+};
+export default Signature;

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

@@ -1,9 +1,39 @@
 import Settings from "./Settings";
 import Link from "./Link";
 import SavePopup from "./SaveAsTemplate";
+import Signature from "./Signature";
+import { Path, Transforms } from "slate";
 const OtherSettings = {
   link: Link,
   settings: Settings,
-  saveAsTemplate: SavePopup
+  saveAsTemplate: SavePopup,
+  signatureSettings: Signature
 };
-export default OtherSettings;
+export default OtherSettings;
+export const removeSign = (editor, path = []) => {
+  const pPath = path?.split("|")?.map(m => parseInt(m));
+  const element_path = [...pPath, 0];
+  Transforms.removeNodes(editor, {
+    at: element_path
+  }); // remove signature
+
+  Transforms.insertNodes(editor, [{
+    type: "signature",
+    children: [{
+      text: ""
+    }],
+    data: {
+      name: "",
+      email: "",
+      date: ""
+    }
+  }], {
+    at: element_path
+  });
+  const parentPath = Path.parent(element_path);
+  Transforms.setNodes(editor, {
+    childType: "signature"
+  }, {
+    at: parentPath
+  });
+};

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -18,5 +18,6 @@ export const ItemTypes = {
   appHeader: "App Header",
   form: "Form",
   table: "Table",
-  embedScript: "Code"
+  embedScript: "Code",
+  signature: "Signature"
 };

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

@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
       dragOver,
       parentPath,
       path,
-      diffX,
-      x: cx,
+      // diffX,
+      // x: cx,
       breakpoint
       // calX,
     } = props;
@@ -134,7 +134,9 @@ export function onDropItem(props, parentClass) {
     let newPath = [];
     newPath = moveTo;
     const cCalx = isContainerElement(editor, moveTo, props);
-    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
+    // const posX = parseInt(
+    //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
+    // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();

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

@@ -11,12 +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";
@@ -57,7 +59,6 @@ const RnD = props => {
   const {
     isSelectedElement,
     setSelectedElement,
-    dragging,
     updateDragging,
     contextMenu,
     setContextMenu,
@@ -75,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)) {
@@ -225,6 +230,13 @@ const RnD = props => {
             selectedActionPath: path
           });
           break;
+        case "signatureSettings":
+          setSelectedElement({
+            ...selectedElementProps,
+            selectedAction: actionType,
+            selectedActionPath: path
+          });
+          break;
         case "imageFrame":
           setSelectedElement({
             ...selectedElementProps,
@@ -233,6 +245,9 @@ const RnD = props => {
             selectedActionPath: path
           });
           break;
+        case "removeSign":
+          removeSign(editor, sp);
+          break;
         case "saveAsTemplate":
           const curPath = type === "parent" ? Path.parent(path) : path;
           const currentNode = Node.get(editor, curPath);
@@ -270,6 +285,7 @@ const RnD = props => {
         dragOver: null
       }, null);
     }
+    stopDragging();
   };
   const onDragStart = e => {
     e.preventDefault();
@@ -288,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,
@@ -300,20 +319,25 @@ const RnD = props => {
           height
         },
         isDragging: 1,
-        parentPath: getParentSectionPath({
-          ref
-        }, ".freegrid-container-parent")
+        parentPath
       });
       setPosition({
         ...updatedPosition
       });
+      startDragging({
+        active: true,
+        id: str_path,
+        position: {
+          ...updatedPosition
+        },
+        isDragging: 1,
+        parentPath
+      });
     }
   };
-  const onDrag = (e, d) => {
+  const onDrag = e => {
     e.preventDefault();
-    e.stopPropagation();
     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)");
-    console.log(lines);
     setAbsPosition({
       ...absPosition,
       "--zIndex": 2000
@@ -333,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 === 2 && 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;
@@ -370,17 +412,11 @@ const RnD = props => {
       setAbsPosition({
         ...ud
       });
+      stopDragging();
     } else {
       // invalid drags
       // found in dev mode and in safari browser
-      updateDragging({
-        isDragging: 0,
-        position: {},
-        lines: [],
-        active: false,
-        id: null
-      });
-      setPosition({});
+      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/index.js

@@ -104,6 +104,13 @@ const Section = props => {
   };
   const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
   const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
+  let tempProps = {};
+  if (element?.type === "temp") {
+    tempProps = {
+      "--left": `${element?.left}px`,
+      "--top": `${element?.top}px`
+    };
+  }
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
@@ -122,7 +129,10 @@ const Section = props => {
   }, theme);
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
-    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
+    style: {
+      ...tempProps
+    },
     sx: {
       ...classes.root,
       background: sectionBgColor,

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

@@ -52,6 +52,22 @@ const SectionStyle = theme => ({
       [theme.breakpoints.between("xs", "md")]: {
         maxWidth: `320px !important`
       }
+    },
+    "&.is-temp": {
+      position: "fixed",
+      background: "transparent",
+      padding: "12px",
+      width: "10px",
+      height: "10px",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      margin: "auto",
+      // left: "var(--left)",
+      // top: "var(--top)",
+      zIndex: 1000,
+      pointerEvents: "none"
     }
   }
 });

package/dist/Editor/common/Shorthands/mentions.js

@@ -3,6 +3,6 @@ const mentions = props => {
     CHARACTERS,
     search
   } = props;
-  return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
+  return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
 };
 export default mentions;

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

@@ -0,0 +1,74 @@
+import { Editor, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+const TEMP_NODE_ID = "temp-focus-node";
+const ensureTemporaryFocusNode = (editor, selectedDOM) => {
+  // Check if the temporary focus node already exists
+  const {
+    left,
+    top
+  } = selectedDOM?.getBoundingClientRect();
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (!tempNodeEntry) {
+    // If not, insert the temporary focus node at the start of the editor
+    Transforms.insertNodes(editor, {
+      type: "temp",
+      temp: TEMP_NODE_ID,
+      children: [{
+        type: "restrictedType",
+        text: ""
+      }],
+      left,
+      top
+    }, {
+      at: [editor.children.length]
+    });
+  }
+};
+export const focusUsingTemporaryNode = (editor, selectedDOM) => {
+  Transforms.deselect(editor);
+
+  // Ensure the temporary node exists
+  ensureTemporaryFocusNode(editor, selectedDOM);
+
+  // Select the temporary node without causing scroll
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (tempNodeEntry) {
+    const [, path] = tempNodeEntry;
+    Transforms.select(editor, path);
+  }
+  ReactEditor.focus(editor);
+};
+export const cleanupTemporaryFocusNode = editor => {
+  // Remove the temporary focus node if it exists
+  for (const [, path] of Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  })) {
+    Transforms.removeNodes(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/helper/index.js

@@ -4,6 +4,7 @@ import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
+// import { focusUsingTemporaryNode } from "./RnD/focusNode";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
 const RND_ITEMS = ["freegridItem", "freegridBox"];
@@ -254,8 +255,9 @@ export const focusSelection = (editor, {
     const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
     selectedDOM.scrollIntoView({
       behavior: "smooth",
-      block: "center"
+      block: "nearest"
     });
+    // focusUsingTemporaryNode(editor, selectedDOM);
   } catch (err) {
     console.log(err);
   }
@@ -302,7 +304,7 @@ export const getTextColor = (color = "") => {
     WebkitTextFillColor: "transparent !important",
     color: "transparent !important",
     caretColor: "black",
-    '& span': {
+    "& span": {
       color: "transparent !important"
     }
   } : {

package/dist/Editor/hooks/useBreakpoints.js

@@ -1,6 +1,6 @@
 import { useMediaQuery } from "@mui/material";
 export const STIMULATOR_MOCK = {
-  xs: "@media (min-width: 1200px) and (max-width: 7680px)"
+  xs: "@media (min-width: 1200px) and (max-width: 1980px)"
 };
 export const isStimulator = () => {
   try {

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/useMentions.js

@@ -13,7 +13,7 @@ const getStartEnd = ({
     // Get start and end, modify it as we move along.
     let [start, end] = Range.edges(selection);
 
-    // Move backwards to find the start of the word
+    // Move backwards
     while (true) {
       const before = Editor.before(editor, start, {
         unit: "character"
@@ -22,15 +22,16 @@ const getStartEnd = ({
         anchor: before,
         focus: start
       });
-      if (before) {
-        if (wordBefore.trim() === "") {
-          break;
-        } else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
-          start = before;
-        } else {
-          start = before;
+      if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
+        start = before;
+        if (start.offset === 0) {
+          // Means we've wrapped to beginning of another block
           break;
         }
+      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
+        // reached the character end
+        start = before;
+        break;
       } else {
         break;
       }
@@ -40,38 +41,11 @@ const getStartEnd = ({
       focus: end
     };
     const word = Editor.string(editor, wordRange);
-    const firstChar = word[0];
-
-    // Handle the commands
-    if (firstChar === '@') {
-      // Only trigger @ if preceded by a space
-      const isPrecededBySpace = Editor.string(editor, {
-        anchor: {
-          path: start.path,
-          offset: start.offset - 1
-        },
-        focus: start
-      }).trim() === "";
-      if (isPrecededBySpace) {
-        return {
-          word,
-          search: word.substring(1),
-          target: wordRange,
-          type: TYPES[firstChar]
-        };
-      }
-    } else if (firstChar === '/') {
-      return {
-        word,
-        search: word.substring(1),
-        target: wordRange,
-        type: TYPES[firstChar]
-      };
-    }
     return {
-      word: "",
-      wordRange: null,
-      type: null
+      word,
+      search: word?.substring(1, word.length),
+      target: wordRange,
+      type: TYPES[word[0]]
     };
   } catch (err) {
     return {

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,12 +9,8 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-const withCommon = (props, {
-  needLayout = false,
-  isChatEditor = false
-}) => {
-  const editor = needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
-  editor.isChatEditor = isChatEditor;
-  return editor;
+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))))))))));
 };
 export default withCommon;