@flozy/editor 3.8.7 → 3.8.9

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

@@ -1,6 +1,4 @@
-import { ReactEditor } from "slate-react";
-import { fontFamilyMap, sizeMap } from "../utils/font";
-import { Editor, Node } from "slate";
+import { sizeMap } from "../utils/font";
 export const breakpoints = {
   small: 0,
   mobile: 600,
@@ -8,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 {
@@ -29,7 +33,7 @@ const overrideValues = (value, ot) => {
   return Object.keys(value).reduce((a, b) => {
     return {
       ...a,
-      [b]: overrides[ot] ? overrides[ot](value[b], value) : value
+      [b]: overrides[ot] ? overrides[ot](value[b]) : value
     };
   }, {});
 };
@@ -44,17 +48,9 @@ const overrides = {
     return `${val?.widthInPercent || 100}%`;
   },
   overrideReSizeH: val => {
-    return `${val?.height}px`;
+    return val ? `${val?.height}px` : "auto";
   },
-  overrideBorderRadius: (val, breakpointValues) => {
-    if (!val?.topLeft) {
-      Object.values(breakpointValues || {}).forEach(v => {
-        if (v) {
-          // Applying the values from breakpoints that exist to those that do not have
-          val = v;
-        }
-      });
-    }
+  overrideBorderRadius: val => {
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
@@ -108,179 +104,46 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
     console.log(err);
   }
 };
-export function getElementStyle(editor, element, stylePropertyName) {
-  try {
-    const path = ReactEditor.findPath(editor, element);
-    if (path?.length) {
-      const currentEle = Node.get(editor, path);
-      const dom = ReactEditor.toDOMNode(editor, currentEle);
-      const editorBtn = dom?.querySelector("button.theme-element");
-      const elementStyle = window.getComputedStyle(editorBtn);
-      const style = elementStyle[stylePropertyName];
-      if (stylePropertyName === "fontFamily") {
-        const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
-        return val;
+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";
       }
-      return style;
-    }
-  } catch (err) {
-    // console.log(err);
-  }
-}
-export function getTextSizeVal(editor) {
-  try {
-    const currentNode = Node.get(editor, editor.selection.anchor.path);
-    const currentElement = ReactEditor.toDOMNode(editor, currentNode);
-    if (currentElement) {
-      const element = document.querySelector('span[data-slate-string="true"]');
-      const computedStyle = window.getComputedStyle(element);
-      return computedStyle.getPropertyValue("font-size") || "";
+    } else {
+      a[b] = styleProps[b];
     }
-  } catch (err) {
-    // console.log(err);
-  }
-}
-export function getVariableValue(val) {
-  const bodyElement = document.body;
-  const computedStyle = getComputedStyle(bodyElement);
-  const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
-  const varValue = computedStyle.getPropertyValue(variableName).trim();
-  return varValue;
-}
-export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
-// "underline",
-// "strikethrough",
-];
-
-const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
-export const isTextCustomized = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children,
-        type
-      } = currentElement;
-      if (!themeElements.includes(type)) {
-        return false;
-      }
-      if (children?.length > 1) {
-        return true;
-      }
-      const customized = textThemeFields.some(field => {
-        const element = children[0] || {};
-        const value = element[field];
-        if (field === "fontSize") {
-          return Object.keys(value || {}).length;
-        } else {
-          return value;
-        }
-      });
-      return customized;
+    return a;
+  }, {});
+  const groupedLG = tProps.reduce((a, b) => {
+    if (isObject(styleProps[b])) {
+      a[b] = styleProps[b]["lg"] || styleProps[b];
     } else {
-      return null;
+      a[b] = styleProps[b];
     }
-  } catch (err) {
-    return null;
-  }
-};
-const addToTheme = (field, value, element) => {
-  switch (field) {
-    case "fontFamily":
-      return {
-        fontFamily: fontFamilyMap[value]
-      };
-    case "fontSize":
-      return {
-        fontSize: value?.lg
-      };
-    case "color":
-      return {
-        color: value
-      };
-    case "bold":
-      return {
-        fontWeight: "bold"
-      };
-    case "italic":
-      return {
-        fontStyle: "italic"
-      };
-    // case "underline":
-    // case "strikethrough":
-    //   let textDecoration = "";
-
-    //   if (element.underline) {
-    //     textDecoration = "underline";
-    //   }
-
-    //   if (element.strikethrough) {
-    //     textDecoration += " strikethrough";
-    //   }
-
-    //   return { textDecoration };
-    default:
-      return {};
-  }
-};
-const MAP_TEXT_THEME_FIELD = {
-  headingOne: "h1",
-  headingTwo: "h2",
-  headingThree: "h3",
-  headingFour: "h4",
-  headingFive: "h5",
-  headingSix: "h6",
-  paragraphOne: "para1",
-  paragraphTwo: "para2",
-  paragraphThree: "para3"
-};
-export const saveToTheme = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children
-      } = currentElement;
-      if (children?.length > 1) {
-        return true;
-      }
-      let theme = {};
-      textThemeFields.forEach(field => {
-        const element = children[0] || {};
-        const value = element[field];
-        let style = {};
-        let isValueExist = false;
-        if (value) {
-          isValueExist = true;
-          if (field === "fontSize") {
-            isValueExist = !!Object.keys(value).length;
-          }
-        }
-        if (isValueExist) {
-          style = addToTheme(field, value, element);
-        }
-        theme = {
-          ...theme,
-          ...style
-        };
-      });
-      textThemeFields.forEach(field => {
-        Editor.removeMark(editor, field);
-      });
-      return {
-        field: MAP_TEXT_THEME_FIELD[currentElement?.type],
-        theme
-      };
+    return a;
+  }, {});
+  return {
+    [theme.breakpoints.up("lg")]: {
+      ...groupedLG
+    },
+    [theme.breakpoints.between("xs", "md")]: {
+      ...groupedXS
     }
-  } catch (err) {
-    return;
-  }
-};
-export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
-export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
+  };
+};

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,17 +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 [selectedTheme, setSelectedTheme] = useState({});
+  const [contextMenu, setContextMenu] = useState({
+    path: null
+  });
+  useEffect(() => {
+    window.updateSelectedItem = d => {
+      setSelectedElement(d);
+    };
+  }, []);
   const onDrop = () => {
     setDrop(drop + 1);
   };
+  const isSelectedElement = path => {
+    const cu_path = path.split("|");
+    const se_path = selectedElement?.path?.split("|");
+    const isParentSelected = se_path?.slice(0, cu_path.length).join("|") === path;
+    // check if child or parent is selected
+    if (selectedElement?.path === path || isParentSelected) {
+      return selectedElement;
+    }
+    return {};
+  };
   const value = useMemo(() => {
     if (path) {
       setPrevious(path);
@@ -53,12 +72,17 @@ 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,
-      selectedTheme,
-      setSelectedTheme
+      setOpenAI
     },
     children: children
   });
@@ -66,7 +90,7 @@ export const EditorProvider = ({
 export const useEditorContext = () => {
   return useContext(EditorContext);
 };
-const useMouseMove = () => {
+const useMouseMove = dragging => {
   const [event, setEvent] = useState({
     target: null
   });
@@ -77,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,19 +4,9 @@ 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);
     }
@@ -33,6 +23,13 @@ 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/plugins/withEmbeds.js

@@ -1,5 +1,5 @@
 import { Transforms, Path, Node } from "slate";
-const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
+const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
 const withEmbeds = editor => {
   const {
     isVoid,

package/dist/Editor/plugins/withHTML.js

@@ -15,7 +15,7 @@ const loopChildren = (children = [], defaultInsert) => {
   }
   return defaultInsert;
 };
-export const getCurrentElement = editor => {
+const getCurrentElement = editor => {
   try {
     if (editor.selection) {
       return Node.parent(editor, editor?.selection?.anchor?.path);

package/dist/Editor/plugins/withTable.js

@@ -1,6 +1,6 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 import { TableUtil, createTableCell } from "../utils/table";
-const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,