@flozy/editor 4.0.3 → 4.0.5

package/dist/Editor/commonStyle.js

@@ -99,6 +99,12 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  popupTitle2: {
+    fontWeight: "600 !important",
+    fontSize: "20px",
+    display: "flex",
+    alignItems: "center"
+  },
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background

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

@@ -0,0 +1,39 @@
+import { Node } from "slate";
+import { ReactEditor } from "slate-react";
+function safeToDOMNode(editor, node, np, extProps) {
+  try {
+    if (Node.has(editor, node)) {
+      const domNode = ReactEditor.toDOMNode(editor, node);
+      return domNode;
+    }
+  } catch (error) {
+    console.error("Focusing Again");
+    focusOnNewItem(editor, np, extProps);
+  }
+  return null;
+}
+function focusOnNewItem(editor, newPath, extProps) {
+  try {
+    const sectionNode = Node.get(editor, newPath);
+    requestAnimationFrame(() => {
+      const domNode = safeToDOMNode(editor, sectionNode, newPath, extProps);
+      if (domNode) {
+        const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
+        if (sectionDom) {
+          sectionDom.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+          extProps?.setSelectedElement({
+            enable: 1,
+            path: [...newPath].join("|"),
+            cursor: "move"
+          });
+        }
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
+}
+export default focusOnNewItem;

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

@@ -0,0 +1,24 @@
+import { Node } from "slate";
+import { ReactEditor } from "slate-react";
+function scrollToNewSection(editor, newPath, extProps) {
+  try {
+    const sectionNode = Node.get(editor, newPath);
+    requestAnimationFrame(() => {
+      const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
+      if (sectionDom) {
+        sectionDom.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        extProps?.setSelectedElement({
+          enable: 1,
+          path: [...newPath, 0].join("|"),
+          cursor: "move"
+        });
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
+}
+export default scrollToNewSection;

package/dist/Editor/helper/breakpoint.js

@@ -0,0 +1,5 @@
+export function CssVar(device = "lg", key, props) {
+  const keyTo = `${key}_${device}`;
+  const value = props[keyTo] === undefined ? props[key] : props[keyTo];
+  return value;
+}

package/dist/Editor/helper/index.js

@@ -1,9 +1,12 @@
+import { Editor, Transforms, Path } from "slate";
+import { ReactEditor } from "slate-react";
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
 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"];
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
     const canvas = await html2canvas(dom, {
@@ -140,6 +143,142 @@ export const isEmptyTextNode = element => {
     return false;
   }
 };
+export const clearSelection = editor => {
+  try {
+    ReactEditor.focus(editor);
+    Transforms.collapse(editor, {
+      edge: "start"
+    });
+    Transforms.deselect(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const isSelectionInNodeType = (editor, type) => {
+  const {
+    selection
+  } = editor;
+  if (selection) {
+    const [match] = Editor.nodes(editor, {
+      match: n => n.type === type,
+      mode: "lowest" // This ensures that we check the lowest node that matches the type
+    });
+
+    return {
+      selected: !!match,
+      match
+    };
+  }
+  return {
+    selected: false
+  };
+};
+export const getCaretPosition = editor => {
+  const {
+    selection
+  } = editor;
+  if (selection) {
+    const {
+      anchor
+    } = selection;
+    const {
+      path,
+      offset
+    } = anchor;
+    return path && offset ? {
+      path,
+      offset
+    } : null;
+  }
+  return null;
+};
+export const onPasteRnDNode = (editor, {
+  path,
+  children,
+  slateNodes
+}) => {
+  try {
+    const cur_root_path = Path.parent(path);
+    const parsed_node = slateNodes || JSON.parse(window.copiedNode);
+    let new_path = [...path, children.length];
+    if (RND_ITEMS.indexOf(parsed_node?.type) > -1) {
+      Transforms.insertNodes(editor, [{
+        ...parsed_node,
+        // for differentiate the items
+        left: parsed_node?.left + 20,
+        marginTop: parsed_node?.marginTop + 20,
+        // to maintain unique drop location in different section also
+        gridArea: "1 / 1 / 2 / 2"
+      }], {
+        at: new_path
+      });
+    } else {
+      // for pasting whole section
+      new_path = Path.next(cur_root_path);
+      Transforms.insertNodes(editor, [{
+        ...parsed_node
+      }], {
+        at: new_path
+      });
+    }
+    return new_path;
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const setSelection = (editor, {
+  path
+}) => {
+  try {
+    ReactEditor.focus(editor);
+    const point = {
+      path,
+      offset: 0
+    };
+    Transforms.select(editor, {
+      anchor: point,
+      focus: point
+    });
+    ReactEditor.focus(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const focusSelection = (editor, {
+  path
+}) => {
+  try {
+    ReactEditor.focus(editor);
+    const selectedNode = Node.get(editor, path);
+    const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
+    selectedDOM.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const bringItemToFB = (editor, {
+  path,
+  moveFront
+}) => {
+  try {
+    const itemNode = Node.get(editor, path);
+    const {
+      zIndex
+    } = itemNode;
+    let arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
+    arrangeIndex = moveFront ? arrangeIndex + 1 : arrangeIndex - 1;
+    Transforms.setNodes(editor, {
+      zIndex: Math.min(arrangeIndex, editor.children.length)
+    }, {
+      at: path
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const debounce = function (func, wait, immediate) {
   let timeout;
   return function () {

package/dist/Editor/helper/theme.js

@@ -6,6 +6,12 @@ export const breakpoints = {
 };
 export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
 export const getDevice = width => {
+  // stimulated environment
+  const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+  const etDataset = breakpoint?.dataset;
+  if (etDataset?.breakpoint) {
+    return etDataset?.breakpoint;
+  }
   if (width > 0 && width < breakpoints.mobile) {
     return "xs";
   } else {
@@ -42,7 +48,7 @@ const overrides = {
     return `${val?.widthInPercent || 100}%`;
   },
   overrideReSizeH: val => {
-    return `${val?.height}px`;
+    return val ? `${val?.height}px` : "auto";
   },
   overrideBorderRadius: val => {
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
@@ -97,4 +103,47 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const getBRValue = (props, rbr = "lg") => {
+  const {
+    value,
+    breakpoint,
+    ot,
+    ov
+  } = props;
+  const val = getBreakPointsValue(value, breakpoint, ot, ov);
+  return val[rbr] || val["lg"];
+};
+const isObject = value => {
+  return Object.prototype.toString.call(value) === "[object Object]";
+};
+export const groupByBreakpoint = (styleProps, theme) => {
+  const tProps = Object.keys(styleProps);
+  const groupedXS = tProps.reduce((a, b) => {
+    if (isObject(styleProps[b])) {
+      a[b] = styleProps[b]["xs"];
+      if (b === "height" && !a[b]) {
+        a[b] = "auto";
+      }
+    } else {
+      a[b] = styleProps[b];
+    }
+    return a;
+  }, {});
+  const groupedLG = tProps.reduce((a, b) => {
+    if (isObject(styleProps[b])) {
+      a[b] = styleProps[b]["lg"] || styleProps[b];
+    } else {
+      a[b] = styleProps[b];
+    }
+    return a;
+  }, {});
+  return {
+    [theme.breakpoints.up("lg")]: {
+      ...groupedLG
+    },
+    [theme.breakpoints.between("xs", "md")]: {
+      ...groupedXS
+    }
+  };
 };

package/dist/Editor/hooks/useBreakpoints.js

@@ -0,0 +1,34 @@
+import { useMediaQuery } from "@mui/material";
+export const STIMULATOR_MOCK = {
+  xs: "@media (min-width: 1200px) and (max-width: 1980px)"
+};
+export const isStimulator = () => {
+  try {
+    const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+    const etDataset = breakpoint?.dataset;
+    if (etDataset?.breakpoint) {
+      return etDataset?.breakpoint;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const useBreakpoints = theme => {
+  const lg = useMediaQuery(theme.breakpoints.up("md"));
+  const xs = useMediaQuery(theme.breakpoints.between("xs", "md"));
+
+  // if stimulated environment
+  const breakpoint = document.getElementsByClassName("et-wrpr")[0];
+  const etDataset = breakpoint?.dataset;
+  if (etDataset?.breakpoint) {
+    return etDataset?.breakpoint;
+  }
+  if (lg) {
+    return "lg";
+  } else if (xs) {
+    return "xs";
+  } else {
+    return "lg";
+  }
+};
+export default useBreakpoints;

package/dist/Editor/hooks/useMouseMove.js

@@ -22,16 +22,36 @@ export const EditorProvider = ({
   theme,
   children
 }) => {
-  const [event] = useMouseMove();
   const [previous, setPrevious] = useState("");
   const [drop, setDrop] = useState(0);
   const [selectedPath, setSelectedPath] = useState(null);
+  const [selectedElement, setSelectedElement] = useState({});
+  const [dragging, setDragging] = useState({});
+  const [event] = useMouseMove(dragging);
   const path = event?.target?.getAttribute("data-path");
   const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
   const [openAI, setOpenAI] = useState("");
+  const [contextMenu, setContextMenu] = useState({
+    path: null
+  });
+  useEffect(() => {
+    window.updateSelectedItem = d => {
+      setSelectedElement(d);
+    };
+  }, []);
   const onDrop = () => {
     setDrop(drop + 1);
   };
+  const isSelectedElement = (path, type) => {
+    const cu_path = path.split("|");
+    const se_path = selectedElement?.path?.split("|");
+    const isParentSelected = se_path?.slice(0, cu_path.length).join("|") === path && type === "parent";
+    // check if child or parent is selected
+    if (selectedElement?.path === path || isParentSelected) {
+      return selectedElement;
+    }
+    return {};
+  };
   const value = useMemo(() => {
     if (path) {
       setPrevious(path);
@@ -52,8 +72,15 @@ export const EditorProvider = ({
       theme: theme,
       selectedPath: selectedPath,
       setSelectedPath: setSelectedPath,
+      selectedElement: selectedElement,
+      setSelectedElement: setSelectedElement,
+      isSelectedElement: isSelectedElement,
+      setDragging: setDragging,
+      dragging: dragging,
       popupType,
       setPopupType,
+      setContextMenu,
+      contextMenu,
       openAI,
       setOpenAI
     },
@@ -63,7 +90,7 @@ export const EditorProvider = ({
 export const useEditorContext = () => {
   return useContext(EditorContext);
 };
-const useMouseMove = () => {
+const useMouseMove = dragging => {
   const [event, setEvent] = useState({
     target: null
   });
@@ -74,12 +101,13 @@ const useMouseMove = () => {
     };
   }, []);
   const onMouseMove = e => {
-    const dpath = e?.target?.closest(".dpath");
-    if (dpath) {
-      console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
-      setEvent({
-        target: dpath
-      });
+    if (!dragging?.id) {
+      const dpath = e?.target?.closest(".dpath");
+      if (dpath) {
+        setEvent({
+          target: dpath
+        });
+      }
     }
   };
   const debounceMouseMove = debounce(onMouseMove, 100);

package/dist/Editor/hooks/useWindowMessage.js

@@ -4,9 +4,19 @@ const useWindowMessage = props => {
     type
   } = props;
   const [message, setMessage] = useState(null);
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "*");
+    }
+  };
   useEffect(() => {
     if (window.addEventListener) {
       window.addEventListener("message", onMessage, false);
+      sendMessage({
+        isLoaded: true
+      });
     } else {
       window.attachEvent("onmessage", onMessage);
     }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
       setMessage(e?.data[type]);
     }
   };
-  const sendMessage = action => {
-    if (window.parent) {
-      window.parent.postMessage({
-        ...action
-      }, "*");
-    }
-  };
   return [message, sendMessage];
 };
 export default useWindowMessage;

package/dist/Editor/hooks/withCommon.js

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

package/dist/Editor/hooks/withErrorHandling.js

@@ -0,0 +1,14 @@
+const withErrorHandling = editor => {
+  const {
+    apply
+  } = editor;
+  editor.apply = operation => {
+    try {
+      apply(operation);
+    } catch (error) {
+      console.error("Error applying Slate operation:", error);
+    }
+  };
+  return editor;
+};
+export default withErrorHandling;

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

@@ -0,0 +1,197 @@
+import { Editor, Transforms, Node, Path } from "slate";
+import { isSelectionInNodeType, getCaretPosition, onPasteRnDNode, bringItemToFB } from "../../helper";
+import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
+const RND_ITEM_TYPES = ["freegrid", "freegridItem", "freegridBox"];
+const parsePath = path => path?.split("|").map(m => parseInt(m));
+const selectAll = (event, {
+  editor
+}) => {
+  try {
+    const {
+      selected,
+      match
+    } = isSelectionInNodeType(editor, "freegridItem");
+    const sel = getCaretPosition(editor);
+
+    // if not selection prevent the events
+    if (!sel) {
+      event.preventDefault();
+      return;
+    }
+
+    // only prevent default for freegrid item
+    if (selected) {
+      event.preventDefault();
+      const [item, path] = match;
+      switch (item?.childType) {
+        case "text":
+          const range = Editor.range(editor, path);
+          Transforms.select(editor, range);
+          break;
+        default:
+          return null;
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const onCopy = async (event, {
+  editor
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    // only copy RnD items in Srag enable mode not in edit mode
+    if (path && enable === 1) {
+      let pPath = parsePath(path);
+      let node = Node.get(editor, pPath);
+      const isRnD = RND_ITEM_TYPES.indexOf(node?.type) > -1;
+      if (isRnD) {
+        event.preventDefault();
+        if (node?.type === "freegrid") {
+          node = Node.get(editor, Path.parent(pPath));
+        }
+        const jsonFragment = JSON.stringify(node);
+        window.copiedNode = jsonFragment;
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const onCut = (event, {
+  editor
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    onCopy(event, {
+      editor
+    });
+    // remove the node
+    if (path && enable === 1) {
+      const pPath = parsePath(path);
+      Transforms.removeNodes(editor, {
+        at: pPath
+      });
+      // change / remove the focus to parent
+      const currentSelectedNode = Node.get(editor, pPath);
+      const sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
+      focusOnNewItem(editor, sPath, {
+        setSelectedElement: window.updateSelectedItem
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const onPaste = async (event, {
+  editor
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    if (path && enable === 1) {
+      event.preventDefault();
+      const pPath = parsePath(path);
+      const currentSelectedNode = Node.get(editor, pPath);
+      let sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
+      const sectionNode = Node.get(editor, sPath);
+      const np = onPasteRnDNode(editor, {
+        path: sPath,
+        children: sectionNode?.children,
+        slateNodes: null
+      });
+      if (np && window.updateSelectedItem) {
+        focusOnNewItem(editor, np, {
+          setSelectedElement: window.updateSelectedItem
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const onBringFront = (event, {
+  editor
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    if (path && enable === 1) {
+      event.preventDefault();
+      bringItemToFB(editor, {
+        path: parsePath(path),
+        moveFront: true
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const onBringBack = (event, {
+  editor
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    if (path && enable === 1) {
+      event.preventDefault();
+      bringItemToFB(editor, {
+        path: parsePath(path),
+        moveFront: false
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const onInsertFragment = async ({
+  editor,
+  slateNodes
+}) => {
+  try {
+    const {
+      path,
+      enable
+    } = window?.selectedRnDElement || {};
+    if (path && enable === 1) {
+      const pPath = parsePath(path);
+      const currentSelectedNode = Node.get(editor, pPath);
+      let sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
+      const sectionNode = Node.get(editor, sPath);
+      const np = onPasteRnDNode(editor, {
+        path: sPath,
+        children: sectionNode?.children,
+        slateNodes: slateNodes
+      });
+      if (np && window.updateSelectedItem) {
+        focusOnNewItem(editor, np, {
+          setSelectedElement: window.updateSelectedItem
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const RnDCtrlCmds = {
+  ArrowUp: onBringFront,
+  ArrowDown: onBringBack,
+  a: selectAll,
+  c: onCopy,
+  v: onPaste,
+  x: onCut
+};
+export default RnDCtrlCmds;