@flozy/editor 9.1.0 → 9.1.2

package/dist/Editor/CommonEditor.js

@@ -189,6 +189,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       title: serializeToText(title?.children) || "Untitled"
     };
   };
+  const getTitleSaveData = title => {
+    const val = debouncedValue.current;
+    const data = {
+      text: serializeToText(val),
+      title: title
+    };
+    if (customProps.onSaveTitle) {
+      const isTitleChanged = true;
+      customProps.onSaveTitle(JSON.stringify(val), data, isTitleChanged);
+    }
+  };
   const getPreviewImage = async (needBackground = false, options = {}) => {
     ReactEditor.blur(editor);
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
@@ -333,7 +344,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     page_title: page_title,
     isIframe: isIframe,
     onDrawerOpen: onDrawerOpen,
-    ICON_API: "https://assets.agenciflow.com"
+    ICON_API: "https://assets.agenciflow.com",
+    getTitleSaveData
   };
   const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {

package/dist/Editor/Editor.css

@@ -1280,8 +1280,8 @@ blockquote {
 }
 @media (max-width: 899px) {
   /* Qa validation required */
-    /* .MuiPopover-root {
-      z-index: 1302 !important;
+  /* .MuiPopover-root {
+    z-index: 1302 !important;
   } */
 
   canvas {

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,7 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-import { getBreakpointLineSpacing } from "../../helper/theme";
+// import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/Elements/Title/title.js

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Editor } from "slate";
+import { useSlate } from "slate-react";
+import { getNodeText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Title = props => {
   const {
     attributes,
-    children
+    children,
+    element,
+    customProps
   } = props;
+  useDetectExitFromTitle(element, customProps?.getTitleSaveData);
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     style: {
@@ -14,4 +20,28 @@ const Title = props => {
     children: children
   });
 };
-export default Title;
+export default Title;
+const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
+  const editor = useSlate();
+  const [wasInsideTitle, setWasInsideTitle] = useState(false);
+  useEffect(() => {
+    if (!editor.selection) return;
+
+    // Get the current node where the cursor is
+    const [nodeEntry] = Editor.nodes(editor, {
+      at: editor.selection,
+      match: n => n.type === "title"
+    });
+    if (nodeEntry) {
+      setWasInsideTitle(true); // User was inside the title
+    } else if (wasInsideTitle) {
+      // User exited the title node
+      const text = getNodeText(titleNode) || "";
+      if (text?.trim() && text !== "Untitled" && onSaveTitle) {
+        onSaveTitle(text);
+      }
+      setWasInsideTitle(false);
+    }
+  }, [editor.selection]);
+  return null;
+};

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -33,17 +33,14 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
+
+  // const { element: pageSt } = getPageSettings(editor) || {};
   // const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  const {
-    activeBreakPoint
-  } = useEditorContext();
+  // const { activeBreakPoint } = useEditorContext();
   // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
-    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -35,6 +34,9 @@ const PopupTool = props => {
   const [size] = useWindowResize();
   const updateAnchorEl = isScroll => {
     try {
+      const {
+        selection
+      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -74,29 +76,33 @@ const PopupTool = props => {
       if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
-        setIsTextSelected(true);
+        // setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");
-      setIsTextSelected(false);
+      // setIsTextSelected(false);
     }
   }, [event, anchorEl]);
   useEffect(() => {
+    console.log("Editor useEffect", selection);
     if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || selectedElement?.enable === 1) {
       setAnchorEl(null);
     } else {
+      console.log("Editor updateAnchorEl", selection);
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {
+    console.log("Editor closing");
     // setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
+      console.log("ClickAwayListener", e.target, document.body, e.target !== document.body);
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
       if (e.target !== document.body) {
         // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -19,7 +19,7 @@ const Upload = props => {
     xs: 12,
     sx: {
       padding: "10px",
-      height: '100%'
+      height: "100%"
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -5,9 +5,9 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
-    height: '100%',
-    minHeight: '150px',
-    height: 'inherit'
+    height: "100%",
+    minHeight: "150px",
+    height: "inherit"
   },
   uploadField: {
     width: "100%",
@@ -19,21 +19,21 @@ const UploadStyles = theme => ({
     backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
     border: "1px dashed #2563EB",
-    minHeight: '150px'
+    minHeight: "150px"
   },
   uploadIcon: {
     display: "grid !important",
     "& svg": {
-      display: 'flex',
-      width: '100%',
+      display: "flex",
+      width: "100%",
       "& path": {
         stroke: "#2563EB"
       }
     },
-    '& span': {
-      display: 'flex',
-      width: '100%',
-      marginTop: '5px'
+    "& span": {
+      display: "flex",
+      width: "100%",
+      marginTop: "5px"
     }
   }
 });

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

@@ -58,6 +58,7 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
+      paddingLeft: "4px",
       background: theme?.palette?.editor?.background,
       paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {

package/dist/Editor/hooks/useDrag.js

@@ -1,26 +1,20 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
-  useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
-  }, []);
-  const onMouseDown = () => {
+  const onMouseDown = useCallback(() => {
     setEvent("start");
-  };
-  const onMouseUp = () => {
+  }, []);
+  const onMouseUp = useCallback(() => {
     setEvent("end");
-  };
-  const addListener = () => {
+  }, []);
+  useEffect(() => {
     document.addEventListener("pointerdown", onMouseDown);
     document.addEventListener("pointerup", onMouseUp);
-  };
-  const removeListener = () => {
-    document.removeEventListener("pointerdown", onMouseDown);
-    document.removeEventListener("pointerup", onMouseUp);
-  };
+    return () => {
+      document.removeEventListener("pointerdown", onMouseDown);
+      document.removeEventListener("pointerup", onMouseUp);
+    };
+  }, []);
   return [event];
 };
 export default useDrag;

package/dist/Editor/hooks/useEditorScroll.js

@@ -4,6 +4,7 @@ function useEditorScroll(editorWrapper = {
 }, callback) {
   useEffect(() => {
     const handleScroll = () => {
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       if (editorWrapper.current) {
         callback("scroll");
       }

package/dist/Editor/utils/helper.js

@@ -100,6 +100,14 @@ export const getSelectedText = editor => {
     return "";
   }
 };
+export const getNodeText = node => {
+  try {
+    return Node.string(node);
+  } catch (err) {
+    console.log(err);
+    return "";
+  }
+};
 export const isEmptyNode = (editor, children, path) => {
   try {
     const isEmptyText = Node.string(Node.get(editor, path))?.length === 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -61,7 +61,7 @@
   "scripts": {
     "prepare": "husky install .husky",
     "analyze": "source-map-explorer build/static/js/*.js",
-    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
+    "lint": "./node_modules/. bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",