@flozy/editor 4.6.8 → 4.7.0

package/dist/Editor/CommonEditor.js

@@ -3,7 +3,7 @@ import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, u
 import PropTypes from "prop-types";
 import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
-import { useDebounce, useDebouncedCallback } from "use-debounce";
+import { useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
@@ -491,7 +491,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         ,
         children: /*#__PURE__*/_jsxs(Slate, {
           editor: editor,
-          initialValue: value,
+          initialValue: debouncedValue?.current,
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsxs(Overlay, {

package/dist/Editor/Editor.css

@@ -1206,4 +1206,17 @@ blockquote {
 
 .freegrid-section {
   max-width: 100% !important;
+}
+
+.divider-settings {
+  display: none;
+  position: absolute;
+}
+
+.dividerComponent:hover {
+  padding: 10px 0;
+}
+
+.dividerComponent:hover .divider-settings {
+  display: block;
 }

package/dist/Editor/Elements/Divider/Divider.js

@@ -1,30 +1,138 @@
-import React from "react";
+import React, { useState } from "react";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import { GridSettingsIcon } from "../../common/iconslist";
+import DividerPopup from "./DividerPopup";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
   const {
     attributes,
-    children
+    children,
+    element,
+    customProps
   } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    borderColor = theme?.palette?.primary?.main || '#0F172A',
+    borderWidth = '1px',
+    borderStyle = 'solid'
+  } = element;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [openSettings, setOpenSettings] = useState(false);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const [showTool] = useEditorSelection(editor);
+  const selected = hoverPath === path.join(",");
+  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const DividerToolbar = ({
+    selected,
+    showTool,
+    onSettings
+  }) => {
+    return /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      className: "divider-settings",
+      style: {
+        top: "-20px",
+        left: 0
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Divider Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          sx: {
+            background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
+            border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
+            boxShadow: '0px 0px 4px 0px #00000040',
+            borderRadius: '50%',
+            '& svg': {
+              stroke: theme?.palette?.text?.secondary3
+            },
+            '&.MuiIconButton-root:hover': {
+              background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
+            }
+          },
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        })
+      })
+    });
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "dividerComponent",
-    contentEditable: "false",
     style: {
-      userSelect: "none"
+      userSelect: "none",
+      position: 'relative'
     },
-    children: [/*#__PURE__*/_jsx("hr", {
-      contentEditable: "false",
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-root element-selector`,
+      contentEditable: false,
+      style: {
+        zIndex: 1000
+      },
+      children: /*#__PURE__*/_jsx(DividerToolbar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings
+      })
+    }), /*#__PURE__*/_jsx("hr", {
+      contentEditable: false,
       className: "editorDivider",
       style: {
-        userSelect: "none"
+        userSelect: "none",
+        borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
+        backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
+        height: borderColor?.includes("linear") ? borderWidth : undefined
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {
         display: "none"
       },
       children: children
-    })]
+    }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Divider;

package/dist/Editor/Elements/Divider/DividerPopup.js

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import dividerStyle from "../../common/StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Divider",
+    type: "dividerStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: dividerStyle,
+    onDelete: onDelete,
+    customProps: customProps
+  });
+};
+export default DividerPopup;

package/dist/Editor/Elements/Embed/Video.js

@@ -87,7 +87,8 @@ const Video = ({
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing
+    bannerSpacing,
+    aspectRatio
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -189,9 +190,10 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url ? {
+          height: url && !aspectRatio ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto"
+          } : "auto",
+          aspectRatio: aspectRatio ? aspectRatio : "auto"
         }, theme)
       };
     }

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -344,6 +344,26 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addDivider":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "divider",
+          children: [{
+            type: "divider",
+            children: [{
+              text: ""
+            }]
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 170,
+          height: 30
+        }], {
+          at: [...insertAt]
+        });
+        break;
       default:
     }
     // focus on newly added element

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -43,6 +43,10 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addSignature",
   label: "Signature",
   icon: "signature"
+}, {
+  actionType: "addDivider",
+  label: "Divider",
+  icon: "divider"
 }];
 const AddElement = props => {
   const {
@@ -51,6 +55,10 @@ const AddElement = props => {
   } = props;
   const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
   return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      maxHeight: "500px",
+      overflowY: 'auto'
+    },
     children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
       children: ADD_ELEMENTS.map(m => {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -11,6 +11,7 @@ const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown",
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
 const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
 const signOptions = ["removeSign", "saveAsTemplate", "close"];
+const dividerOptions = ["settings", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -24,6 +25,7 @@ const itemOptions = {
   embedScript: embedScriptOptions,
   video: videoOptions,
   signature: signatureOptions,
-  sign: signOptions
+  sign: signOptions,
+  divider: dividerOptions
 };
 export default itemOptions;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -44,9 +44,12 @@ const useFreeGridStyles = ({
             zIndex: 100
           }
         },
+        "&.type_text": {
+          minHeight: "fit-content !important",
+          wordBreak: "break-all"
+        },
         "&.enable-1, &.enable-2": {
           "&.type_text": {
-            minHeight: "fit-content !important",
             // for dark theme
             // pages needs no color
             "&.no-color": {
@@ -91,7 +94,6 @@ const useFreeGridStyles = ({
         },
         "&.enable-1": {
           "&.type_text": {
-            wordBreak: "break-all",
             "*": {
               "::selection": {
                 backgroundColor: "transparent !important",

package/dist/Editor/Elements/Redo/RedoButton.js

@@ -1,14 +1,7 @@
 import React from "react";
-import { useSlateStatic } from "slate-react";
 import RedoIcon from "../../assets/svg/RedoIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RedoButton = () => {
-  const editor = useSlateStatic();
-  const onRedo = () => {
-    editor?.redo();
-  };
-  return /*#__PURE__*/_jsx(RedoIcon, {
-    onClick: onRedo
-  });
+  return /*#__PURE__*/_jsx(RedoIcon, {});
 };
 export default RedoButton;

package/dist/Editor/Elements/Undo/UndoButton.js

@@ -1,14 +1,7 @@
 import React from "react";
-import { useSlateStatic } from "slate-react";
 import UndoIcon from "../../assets/svg/UndoIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const UndoButton = () => {
-  const editor = useSlateStatic();
-  const onUndo = () => {
-    editor?.undo();
-  };
-  return /*#__PURE__*/_jsx(UndoIcon, {
-    onClick: onUndo
-  });
+  return /*#__PURE__*/_jsx(UndoIcon, {});
 };
 export default UndoButton;

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -42,6 +42,8 @@ const MiniToolbar = props => {
   const [popper, setPopper] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [fullScreen, setFullScreen] = useState(false);
+  const [undoCooldown, setUndoCooldown] = useState(false);
+  const [redoCooldown, setRedoCooldown] = useState(false);
   const [search, setSearch] = useState("");
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
@@ -56,8 +58,9 @@ const MiniToolbar = props => {
     selectedElement,
     setSelectedElement
   } = useEditorContext();
-  const canUndo = editor.history.undos.length > 0;
-  const canRedo = editor.history.redos.length > 0;
+  const cooldownTime = 200;
+  const canUndo = editor.history.undos.length > 0 && !undoCooldown;
+  const canRedo = editor.history.redos.length > 0 && !redoCooldown;
   const [toolTip, setToolTip] = useState(false);
   const [data, setData] = useState(null);
   useEffect(() => {
@@ -72,6 +75,18 @@ const MiniToolbar = props => {
     }
   }, [editor.selection]);
   const handleClick = type => e => {
+    if (type === "undo" && canUndo && !undoCooldown) {
+      editor.undo();
+      setUndoCooldown(true);
+      setTimeout(() => setUndoCooldown(false), cooldownTime);
+      return;
+    }
+    if (type === "redo" && canRedo && !redoCooldown) {
+      editor.redo();
+      setRedoCooldown(true);
+      setTimeout(() => setRedoCooldown(false), cooldownTime);
+      return;
+    }
     if (type === "page-settings") {
       setToolTip(true);
     }

package/dist/Editor/common/MentionsPopup/index.js

@@ -1,12 +1,13 @@
 import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
 import { Transforms } from "slate";
-import { ReactEditor, useSlateStatic } from "slate-react";
+import { ReactEditor, useSlate } from "slate-react";
 import { insertMention } from "../../utils/mentions";
 import ElementListCard from "./ElementsListCard";
 import MentionsListCard from "./MentionsListCard";
 import { Typography, Popper, Box, Paper } from "@mui/material";
 import usePopupStyle from "./Styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { checkTypings } from "../../hooks/useMentions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const POPUP_LIST_TYPES = {
@@ -26,7 +27,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
   const classes = usePopupStyle(theme);
   const papperRef = useRef(null);
   const buttonRef = useRef(null);
-  const editor = useSlateStatic();
+  const editor = useSlate();
   const ListElement = POPUP_LIST_TYPES[type] || null;
   const [anchorEl, setAnchorEl] = useState(null);
   let open = Boolean(anchorEl);
@@ -34,6 +35,19 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     setOpenAI
   } = useEditorContext();
+  useEffect(() => {
+    const s = checkTypings(editor);
+    if (s?.type !== mentions.type) {
+      setMentions({
+        ...s
+      });
+    } else if (s?.type) {
+      // here we need to increase performance for search list update
+      setMentions({
+        ...s
+      });
+    }
+  }, [editor?.selection]);
   useEffect(() => {
     try {
       if (target && chars.length > 0) {

package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import dividerStyle from "../../../StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    console.log("🚀 ~ onChange ~ data:", data);
+    console.log("🚀 ~ onChange ~ element:", element);
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: dividerStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: dividerStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default DividerSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js

@@ -13,6 +13,7 @@ const VideoSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
   const element = Node.get(editor, element_path);
+  const styleMaps = embedVideoStyle?.filter(f => !f?.hideOnFGS);
   const onChange = data => {
     const updated_props = {
       ...element,
@@ -32,9 +33,9 @@ const VideoSettings = props => {
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
-    children: embedVideoStyle?.map((m, i) => {
+    children: styleMaps?.map((m, i) => {
       return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: embedVideoStyle,
+        renderTabs: styleMaps,
         value: m.value,
         element: element,
         onChange: onChange,

package/dist/Editor/common/RnD/ElementSettings/Settings/index.js

@@ -7,6 +7,7 @@ import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
 import TableSettings from "./TableSettings";
 import CodeSettings from "./CodeSettings";
+import DividerSettings from "./DividerSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -16,6 +17,7 @@ const SettingsComponents = {
   appHeader: AppHeaderSettings,
   form: FormSettings,
   table: TableSettings,
-  embedScript: CodeSettings
+  embedScript: CodeSettings,
+  divider: DividerSettings
 };
 export default SettingsComponents;

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

@@ -7,7 +7,8 @@ export const settingsLabel = {
   appHeader: "App Header Settings",
   form: "Form Settings",
   table: "Table Settings",
-  embedScript: "Code Settings"
+  embedScript: "Code Settings",
+  divider: 'Divider Settings'
 };
 export const ItemTypes = {
   text: "Text",
@@ -19,5 +20,6 @@ export const ItemTypes = {
   form: "Form",
   table: "Table",
   embedScript: "Code",
-  signature: "Signature"
+  signature: "Signature",
+  divider: 'Divider'
 };

package/dist/Editor/common/RnD/index.js

@@ -24,6 +24,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const ITEM_TYPES = ["child", "parent-container"];
 const EDIT_MODES = ["text", "form", "table"];
+const DISABLE_RESIZING = {
+  bottom: false,
+  top: false,
+  left: false,
+  right: false,
+  topLeft: false,
+  topRight: false,
+  bottomLeft: false,
+  bottomRight: false
+};
 const RnD = props => {
   const rndRef = useRef(null);
   const {
@@ -519,7 +529,9 @@ const RnD = props => {
       }) : {},
       disableDragging: readOnly || disableDragging || enable !== 1,
       suppressContentEditableWarning: true,
-      enableResizing: readOnly ? false : enable && !active ? enableResizing : {},
+      enableResizing: readOnly ? false : enable && !active ? enableResizing : {
+        ...DISABLE_RESIZING
+      },
       ...getEventProps(),
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,

package/dist/Editor/common/StyleBuilder/dividerStyles.js

@@ -0,0 +1,56 @@
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const dividerStyle = [{
+  tab: "Border",
+  value: "sectionBorderRadius",
+  fields: [{
+    label: "Divider Color",
+    key: "borderColor",
+    type: "color",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
+  }, {
+    label: "Divider Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px",
+    width: 6
+  }, {
+    label: "Divider Style",
+    key: "borderStyle",
+    type: "textOptions",
+    width: 6,
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }, {
+      text: "Double",
+      value: "double"
+    }, {
+      text: "Groove",
+      value: "groove"
+    }, {
+      text: "Ridge",
+      value: "ridge"
+    }, {
+      text: "Inset",
+      value: "inset"
+    }, {
+      text: "Outset",
+      value: "outset"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
+  }]
+}];
+export default dividerStyle;

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -7,6 +7,30 @@ const embedVideoStyle = [{
     key: "url",
     type: "text"
   }]
+}, {
+  tab: "Aspect Ratio",
+  value: "Aspect Ratio",
+  hideOnFGS: true,
+  fields: [{
+    label: "Aspect Ratio",
+    key: "aspectRatio",
+    type: "textOptions",
+    options: [{
+      text: "Cover (Default)",
+      value: ""
+    }, {
+      text: "16:9",
+      value: "16 / 9"
+    }, {
+      text: "9:16",
+      value: "9 / 16"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
+  }]
 }, {
   tab: "Position",
   value: "position",

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
+import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,15 +46,30 @@ const Color = props => {
     item: true,
     xs: 12,
     className: "btnColorPicker",
-    children: [/*#__PURE__*/_jsx(Typography, {
+    children: [/*#__PURE__*/_jsxs(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
         fontSize: "14px",
         fontWeight: 500,
-        marginBottom: "5px"
+        marginBottom: "5px",
+        display: 'flex',
+        alignItems: 'center',
+        '& svg': {
+          width: '20px',
+          height: '20px'
+        }
       },
-      children: label
+      children: [label, data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
+        arrow: true,
+        title: "Note: If color gradient is used, divider styles will not apply",
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            display: 'inline-block'
+          },
+          children: data?.infoIcon
+        })
+      }) : null]
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,

package/dist/Editor/hooks/useMentions.js

@@ -43,7 +43,7 @@ const getStartEnd = ({
     const firstChar = word[0];
 
     // Handle the commands
-    if (firstChar === '@') {
+    if (firstChar === "@") {
       // Only trigger @ if preceded by a space
       const isPrecededBySpace = Editor.string(editor, {
         anchor: {
@@ -60,7 +60,7 @@ const getStartEnd = ({
           type: TYPES[firstChar]
         };
       }
-    } else if (firstChar === '/') {
+    } else if (firstChar === "/") {
       return {
         word,
         search: word.substring(1),
@@ -81,6 +81,41 @@ const getStartEnd = ({
     };
   }
 };
+export const checkTypings = editor => {
+  console.log(editor?.selection);
+  if (editor?.selection) {
+    const {
+      target,
+      search,
+      type
+    } = getStartEnd({
+      selection: editor?.selection,
+      editor
+    });
+    if (target && type) {
+      return {
+        target,
+        search,
+        index: 0,
+        type: type
+      };
+    } else {
+      return {
+        target: null,
+        search: null,
+        index: null,
+        type: null
+      };
+    }
+  } else {
+    return {
+      target: null,
+      search: null,
+      index: null,
+      type: null
+    };
+  }
+};
 const useMentions = props => {
   const {
     editor,
@@ -92,7 +127,7 @@ const useMentions = props => {
     search: null,
     type: null
   });
-  useEffect(() => {
+  const checkTypings = () => {
     if (selection && Range.isCollapsed(selection)) {
       const {
         target,
@@ -125,6 +160,9 @@ const useMentions = props => {
         type: null
       });
     }
+  };
+  useEffect(() => {
+    checkTypings();
   }, [selection, editor]);
   return [mentions, setMentions];
 };

package/package.json

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