@flozy/editor 3.8.8 → 3.8.9

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 => {
+    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);
@@ -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/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,168 @@
+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);
+  }
+};
+const RnDCtrlCmds = {
+  ArrowUp: onBringFront,
+  ArrowDown: onBringBack,
+  a: selectAll,
+  c: onCopy,
+  v: onPaste,
+  x: onCut
+};
+export default RnDCtrlCmds;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -32,7 +32,7 @@ import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
-import { getTextColor, isEmptyTextNode } from "../helper";
+import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -40,6 +40,10 @@ import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
+import FreeGrid from "../Elements/FreeGrid/FreeGrid";
+import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
+import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
+import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -160,7 +164,7 @@ export const activeMark = (editor, format) => {
     return null;
   }
 };
-export const getMarked = (leaf, children) => {
+export const getMarked = (leaf, children, theme) => {
   const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.bold) {
     children = /*#__PURE__*/_jsx("strong", {
@@ -203,7 +207,13 @@ export const getMarked = (leaf, children) => {
   // cover under single span
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = fontFamilyMap[leaf?.fontFamily];
-    const textStyles = getTextColor(leaf?.color);
+    const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
+      background: leaf?.color?.concat("text"),
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    } : {
+      color: leaf.color
+    };
     children = /*#__PURE__*/_jsx("span", {
       style: {
         background: leaf.bgColor
@@ -212,10 +222,14 @@ export const getMarked = (leaf, children) => {
         className: className,
         component: "span",
         sx: {
-          fontSize: {
+          ...wrapThemeBreakpoints({
             lg: sizeMap[leaf.fontSize] || leaf.fontSize,
             ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-          },
+          }, "fontSize", theme),
+          // fontSize: {
+          //   lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+          //   ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
+          // },
           ...textStyles,
           fontFamily: family,
           fontWeight: leaf.fontWeight
@@ -401,6 +415,18 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Grid, {
         ...props
       });
+    case "freegrid":
+      return /*#__PURE__*/_jsx(FreeGrid, {
+        ...props
+      });
+    case "freegridItem":
+      return /*#__PURE__*/_jsx(FreeGridItem, {
+        ...props
+      });
+    case "freegridBox":
+      return /*#__PURE__*/_jsx(FreeGridBox, {
+        ...props
+      });
     case "grid-item":
       return /*#__PURE__*/_jsx(GridItem, {
         ...props,

package/dist/Editor/utils/draftToSlate.js

@@ -100,7 +100,7 @@ export const draftToSlate = props => {
       return a;
     }, []);
     return converted;
-  } else if (data?.length > 0) {
+  } else if (data?.length) {
     return data;
   } else {
     return [{

package/dist/Editor/utils/events.js

@@ -3,6 +3,7 @@ import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
+import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
 const HOTKEYS = {
   b: "bold",
@@ -75,6 +76,10 @@ export const commands = props => {
       } else {
         Editor.addMark(editor, HOTKEYS[event.key], true);
       }
+    } else if (RnDCtrlCmds[event.key]) {
+      RnDCtrlCmds[event.key](event, {
+        editor
+      });
     } else if (EDITORCMDS[event.key]) {
       EDITORCMDS[event.key](event, {
         editor,

package/dist/Editor/utils/freegrid.js

@@ -0,0 +1,49 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+import scrollToNewSection from "../helper/RnD/scrollToNewSection";
+const Default_text_Node = {
+  type: "paragraph",
+  children: [{
+    text: "Effortless Business Growth"
+  }]
+};
+export const insertFreeGridItem = (childType, childTypeNode, extProps = {}, type = "freegridItem") => {
+  return {
+    type: type || "freegridItem",
+    childType: childType || "text",
+    children: [childTypeNode || Default_text_Node],
+    gridArea: "1 / 1 / 2 / 2",
+    height: 300,
+    width: 250,
+    left: 401,
+    top: 0,
+    marginTop: 47,
+    left_xs: 24,
+    top_xs: 24,
+    marginTop_xs: 12,
+    width_xs: 250,
+    height_xs: 300,
+    gridArea_xs: "1 / 1 / 2 / 2",
+    sectionBgColor: "rgb(240, 108, 131)",
+    ...(extProps || {})
+  };
+};
+export const insertFreeGrid = (editor, path, extProps) => {
+  const items = Array.from(Array(1).keys()).map(() => insertFreeGridItem());
+  const freegridData = [{
+    type: "paragraph",
+    children: [{
+      type: "freegrid",
+      height: 500,
+      gridTemplateRows: "var(--rows)",
+      gridTemplateColumns: "var(--cols)",
+      children: [...items]
+    }]
+  }];
+  const newPath = path ? path : editor?.selection?.anchor?.path;
+  Transforms.insertNodes(editor, freegridData, {
+    at: newPath
+  });
+  scrollToNewSection(editor, newPath, extProps);
+  insertNewLine(editor);
+};

package/dist/Editor/utils/helper.js

@@ -398,4 +398,33 @@ export const onDeleteKey = (event, {
   } catch (err) {
     console.log(err);
   }
+};
+export const selectText = (editor, {
+  path,
+  cursorOnly
+}) => {
+  try {
+    ReactEditor.focus(editor);
+    const range = Editor.range(editor, path);
+    const textNode = Node.get(editor, path);
+    if (!cursorOnly) {
+      Transforms.select(editor, range);
+    }
+    if (cursorOnly && textNode) {
+      const textLength = Node.string(textNode).length;
+      editor.selection = {
+        anchor: {
+          path: path,
+          offset: textLength
+        },
+        focus: {
+          path: path,
+          offset: textLength
+        }
+      };
+    }
+    ReactEditor.focus(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.8.8",
+  "version": "3.8.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -36,6 +36,7 @@
     "react-gcolor-picker": "^1.3.1",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
+    "react-rnd": "^10.4.11",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
     "react-slick": "^0.29.0",
@@ -56,6 +57,7 @@
   },
   "scripts": {
     "prepare": "husky install .husky",
+    "analyze": "source-map-explorer build/static/js/*.js",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
@@ -64,7 +66,7 @@
     "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [
@@ -112,6 +114,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^0.6.13",
     "prop-types": "^15.8.1",
+    "source-map-explorer": "^2.5.3",
     "storybook": "^7.4.0",
     "webpack": "^5.88.2"
   },