@flozy/editor 4.5.8 → 4.6.0

package/dist/Editor/helper/theme.js

@@ -139,10 +139,10 @@ export const groupByBreakpoint = (styleProps, theme) => {
     return a;
   }, {});
   return {
-    [theme.breakpoints.up("lg")]: {
+    [theme?.breakpoints?.up("md")]: {
       ...groupedLG
     },
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       ...groupedXS
     }
   };

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

@@ -98,10 +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, {
   needLayout = false,
   isChatEditor = false

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/Decorators/highlightSelection.js

@@ -0,0 +1,16 @@
+import { Editor, Range, Text } from "slate";
+const highlightSelection = ([node, path], editor = {}) => {
+  if (Text.isText(node) && editor?.selection) {
+    const intersection = Range.intersection(editor.selection, Editor.range(editor, path));
+    if (intersection == null) {
+      return [];
+    }
+    const range = {
+      highlight: true,
+      ...intersection
+    };
+    return [range];
+  }
+  return [];
+};
+export default highlightSelection;

package/dist/Editor/utils/Decorators/index.js

@@ -1,5 +1,6 @@
+import highlightSelection from "./highlightSelection";
 import link from "./link";
-const decorators = d => {
-  return [...link(d)];
+const decorators = (d, editor) => {
+  return [...link(d, editor), ...highlightSelection(d, editor)];
 };
 export default decorators;

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

@@ -1,6 +1,7 @@
 import { Editor, Transforms, Node, Path } from "slate";
 import { isSelectionInNodeType, getCaretPosition, onPasteRnDNode, bringItemToFB } from "../../helper";
 import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
+import { ReactEditor } from "slate-react";
 const RND_ITEM_TYPES = ["freegrid", "freegridItem", "freegridBox"];
 const parsePath = path => path?.split("|").map(m => parseInt(m));
 const selectAll = (event, {
@@ -157,7 +158,7 @@ const onBringBack = (event, {
     console.log(err);
   }
 };
-export const onInsertFragment = async ({
+export const onInsertFragment = ({
   editor,
   slateNodes
 }) => {
@@ -181,6 +182,20 @@ export const onInsertFragment = async ({
           setSelectedElement: window.updateSelectedItem
         });
       }
+    } else {
+      ReactEditor.focus(editor);
+      if (editor.children.length === 0) {
+        Transforms.insertNodes(editor, {
+          text: ""
+        }, {
+          at: [0]
+        });
+      }
+      Transforms.insertNodes(editor, [{
+        ...slateNodes
+      }], {
+        at: [editor.children.length - 1]
+      });
     }
   } catch (err) {
     console.log(err);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -34,7 +34,7 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakPointsValue } from "../helper/theme";
+import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
@@ -216,10 +216,20 @@ export const getMarked = (leaf, children, theme) => {
         className: className,
         component: "span",
         sx: {
-          ...wrapThemeBreakpoints({
-            lg: sizeMap[leaf.fontSize] || leaf.fontSize,
-            ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-          }, "fontSize", theme),
+          ...groupByBreakpoint({
+            fontSize: {
+              lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+              ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
+            }
+          }, theme),
+          // ...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"),
@@ -232,6 +242,15 @@ export const getMarked = (leaf, children, theme) => {
       })
     });
   }
+  if (leaf.highlight) {
+    children = /*#__PURE__*/_jsx("span", {
+      style: {
+        background: "#EAEBFE",
+        color: "inherit"
+      },
+      children: children
+    });
+  }
   if (leaf.decoration === "link") {
     children = /*#__PURE__*/_jsx("a", {
       style: {
@@ -529,6 +548,15 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Code, {
         ...props
       });
+    // RnD Focus Node
+    case "temp":
+      return /*#__PURE__*/_jsx("span", {
+        ...attributes,
+        ...element.attr,
+        className: "temp-focus-node",
+        contentEditable: false,
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/customHooks/useResize.js

@@ -10,7 +10,7 @@ const useResize = ({
   const defaultSize = getBreakPointsValue(allSize);
   const {
     width,
-    height = 370
+    height
   } = parentDOM?.getBoundingClientRect() || {
     ...defaultSize
   };
@@ -50,11 +50,10 @@ const useResize = ({
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
       const cWP = calcWidth / width * 100;
-      const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
       const calc = {
-        width: Math.max(calcWidth, 140),
-        height: Math.max(calcHeight, 50),
-        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, 15)
+        width: calcWidth,
+        height: (parseInt(currentSize.height) || height) + e.movementY,
+        widthInPercent: cWP > 100 ? 100 : cWP
       };
       latest = calc;
       return calc;

package/dist/Editor/utils/events.js

@@ -282,6 +282,77 @@ export const enterEvent = (e, editor, isMobile) => {
         default:
       }
     }
+    // Handle blockquote splitting
+    const [blockquote] = Editor.nodes(editor, {
+      match: n => Element.isElement(n) && n.type === "blockquote"
+    });
+    if (blockquote) {
+      e.preventDefault();
+      const {
+        selection
+      } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const isAtEnd = Editor.isEnd(editor, selection.anchor, blockquote[1]);
+        if (isAtEnd) {
+          Transforms.insertNodes(editor, {
+            type: "paragraph",
+            children: [{
+              text: ""
+            }]
+          });
+          const newLocation = Editor.after(editor, selection);
+          if (newLocation) {
+            Transforms.select(editor, newLocation);
+          }
+        } else {
+          Transforms.splitNodes(editor, {
+            always: true
+          });
+          Transforms.setNodes(editor, {
+            type: "paragraph"
+          }, {
+            at: editor.selection
+          });
+        }
+      }
+      return;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const upDownArrowKeyEvents = (e, editor) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (!selection || Range.isCollapsed(selection)) {
+      return;
+    }
+    const parentPath = selection.anchor.path.slice(0, -1);
+    const nextNodePath = [...parentPath];
+    const index = parentPath[parentPath.length - 1];
+    const parentNode = Editor.parent(editor, parentPath);
+    if (parentNode.children[index + 1]) {
+      nextNodePath[parentPath.length - 1] += 1;
+    } else {
+      return;
+    }
+    Transforms.move(editor, {
+      distance: 0,
+      unit: 'offset',
+      reverse: false
+    });
+    Transforms.select(editor, {
+      anchor: {
+        path: nextNodePath,
+        offset: 0
+      },
+      focus: {
+        path: nextNodePath,
+        offset: 0
+      }
+    });
   } catch (err) {
     console.log(err);
   }

package/dist/Editor/utils/helper.js

@@ -471,6 +471,22 @@ 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;
+  }
+};
 export const getPreviousNode = editor => {
   try {
     const parentPath = Path.parent(editor?.selection?.anchor?.path);

package/package.json

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