@flozy/editor 4.7.4 → 4.7.5

package/dist/Editor/CommonEditor.js

@@ -534,7 +534,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
@@ -584,8 +584,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText
-          }), /*#__PURE__*/_jsx(FontLoader, {
-            ...props
           })]
         }, id)
       })

package/dist/Editor/Elements/AI/AIInput.js

@@ -90,6 +90,7 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
+      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -104,7 +105,6 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
-        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
-          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -40,9 +40,11 @@ const scrollToAIInput = editor => {
   }, 200);
 };
 const insertText = (editor, text, options) => {
-  const parsed = new DOMParser().parseFromString(text, "text/html");
-  const fragment = deserialize(parsed.body);
-  Transforms.insertFragment(editor, fragment, options);
+  if (text?.length) {
+    const parsed = new DOMParser().parseFromString(text, "text/html");
+    const fragment = deserialize(parsed.body);
+    Transforms.insertFragment(editor, fragment, options);
+  }
 };
 const insertAtNextLine = (editor, text) => {
   const nextLine = getNextLine(editor);
@@ -199,81 +201,95 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
-  const onSend = async (type, option) => {
-    if (type === "close") {
-      onClickOutside();
-      return;
-    }
-    if (type === "done") {
-      // Get the current selection point
-      const {
-        anchor
-      } = editor.selection;
-      const {
-        path
-      } = anchor;
-      const {
-        text: selectText
-      } = Node.get(editor, path);
-      if (selectText?.length) {
-        insertAtNextLine(editor, generatedText);
-      } else {
-        insertText(editor, generatedText);
-      }
-      onClickOutside();
-      return;
-    }
-    if (type === "replace_selection") {
-      // replace generated text
-      insertText(editor, generatedText);
-      onClickOutside();
-      return;
-    }
-    if (type === "speech_to_text") {
-      setGeneratedText(option.text);
-      return;
-    }
-    if (type === "try_again") {
-      // resetting the previous option and try again
-      option = selectedOption;
-      type = selectedOption.value;
-    } else {
-      setSelectedOption(option);
-    }
-    setLoading(true);
-    const payload = {
+  const framePayload = (type, option) => {
+    let payload = {
       mode: option.mode || 0,
       query: option?.inputValue || inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
     }
+    const selectedText = getSelectedText(editor);
+    const textData = generatedText || selectedText;
     if (option.mode) {
-      payload.textData = generatedText || window.getSelection().toString();
+      payload.textData = textData;
+    } else if (selectedText && Number(payload.mode) === 0) {
+      payload.query = `${selectedText} \n ${payload.query}`;
     }
-    const result = await services("infinityAI", payload);
-    setLoading(false);
-    setInputValue("");
-    let {
-      data: text
-    } = result || {};
-    if (!text) {
-      onClickOutside();
-      return;
+    const tryAgain = type === "try_again";
+    if (tryAgain) {
+      // resetting previous payload
+      const prevPayload = selectedOption?.payload || {};
+      payload = prevPayload;
     }
-    if (!option.replace) {
+    return payload;
+  };
+  const onSend = async (type, option) => {
+    try {
+      if (type === "close") {
+        onClickOutside();
+        return;
+      }
+      if (type === "done") {
+        // Get the current selection point
+        const {
+          anchor
+        } = editor.selection;
+        const {
+          path
+        } = anchor;
+        const {
+          text: selectText
+        } = Node.get(editor, path);
+        if (selectText?.length) {
+          insertAtNextLine(editor, generatedText);
+        } else {
+          insertText(editor, generatedText);
+        }
+        onClickOutside();
+        return;
+      }
+      if (type === "replace_selection") {
+        // replace generated text
+        insertText(editor, generatedText);
+        onClickOutside();
+        return;
+      }
+      setLoading(true);
+      const payload = framePayload(type, option);
+      setSelectedOption({
+        ...option,
+        payload
+      });
+      const result = await services("infinityAI", payload);
+      setLoading(false);
+      setInputValue("");
+      let {
+        data: text
+      } = result || {};
+      if (!text) {
+        onClickOutside();
+        return;
+      }
+
+      // if (!option.replace) {
       if (type === "continue_writing") {
         setGeneratedText(generatedText + text);
       } else {
         setGeneratedText(text);
       }
-      return;
-    }
-    insertText(editor, text);
 
-    // scrollToAIInput();
-  };
+      //   return;
+      // }
 
+      // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
+      // insertText(editor, text);
+
+      // scrollToAIInput();
+    } catch (err) {
+      console.error("Error on sending/inserting text", err);
+    }
+  };
   const onInputChange = e => {
     setInputValue(e.target.value);
   };

package/dist/Editor/Elements/AI/Styles.js

@@ -102,6 +102,7 @@ const Styles = theme => ({
   customSelectWrapper: {
     width: "fit-content",
     marginTop: "4px",
+    position: "absolute",
     "@media only screen and (max-width: 600px)": {
       marginBottom: "4px"
     }

package/dist/Editor/Elements/Button/EditorButton.js

@@ -325,7 +325,8 @@ const EditorButton = props => {
       navType: element?.buttonLink?.linkType,
       navValue: element?.url,
       openInNewTab: element?.openInNewTab,
-      customProps: customProps
+      customProps: customProps,
+      allowTrigger: true
     }) : null]
   });
 };

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

@@ -12,13 +12,19 @@ const EmbedPopup = props => {
     format,
     onDelete
   } = props;
+  const videoStyles = embedVideoStyle?.filter(f => {
+    if (f?.value === "AspectRatio" && format !== "video") {
+      return false;
+    }
+    return true;
+  });
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
     type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
+    renderTabs: format === "image" ? embedImageStyle : videoStyles,
     customProps: customProps,
     onDelete: onDelete
   });

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

@@ -323,7 +323,7 @@ const useFreeGridStyles = ({
       },
       "&.rnd-dragOver": {
         "&:before": {
-          content: '"Attact to this Section"',
+          content: '"Attach to this Section"',
           position: "absolute",
           top: 0,
           left: 0,

package/dist/Editor/Elements/Link/Link.js

@@ -1,22 +1,43 @@
 import React, { useState } from "react";
 import { Node, Transforms } from "slate";
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
 import { removeLink } from "../../utils/link";
-import LinkPopup from "./LinkPopup";
 import "./styles.css";
-import { absoluteLink } from "../../utils/helper";
+import { getLinkType, handleLinkType } from "../../utils/helper";
+import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const linkStyles = () => ({
+  linkBtn: {
+    border: "none",
+    outline: "none",
+    background: "none",
+    fontSize: "inherit",
+    fontWeight: "inherit",
+    fontFamily: "inherit",
+    color: "rgb(85, 26, 139)",
+    textDecoration: "underline",
+    padding: 0,
+    margin: 0,
+    "&:hover": {
+      color: "rgb(65, 15, 110);"
+    }
+  }
+});
 const Link = props => {
   const {
     attributes,
     element,
-    children
+    children,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
@@ -24,59 +45,60 @@ const Link = props => {
   const [linkData, setLinkData] = useState({
     name: "",
     url: "",
-    showInNewTab: true
+    showInNewTab: true,
+    linkType: ""
   });
   const path = ReactEditor.findPath(editor, element);
   const urlPath = element.url || element.href;
-  const absLink = absoluteLink(urlPath);
-  const updateLink = () => {
-    Transforms.setNodes(editor, {
-      href: linkData?.url,
-      showInNewTab: linkData?.showInNewTab
-    }, {
+  const showInNewTab = element?.showInNewTab || element?.target;
+  const linkType = element?.linkType;
+  const classes = linkStyles();
+  const updateLink = data => {
+    Transforms.setNodes(editor, data, {
       at: path
     });
     setLinkData({
       name: "",
       url: "",
-      showInNewTab: true
+      showInNewTab: true,
+      linkType: ""
     });
     setShowInput(false);
   };
   const onEditLink = () => {
     setLinkData({
       name: Node.string(element),
-      url: urlPath || "",
-      showInNewTab: element?.showInNewTab
+      href: urlPath || "",
+      showInNewTab: showInNewTab,
+      linkType: element?.linkType
     });
     setShowInput(true);
   };
-  const handleInputChange = ({
-    target
-  }) => {
-    let val = target.type === "checkbox" ? target.checked : target.value;
-    setLinkData({
-      ...linkData,
-      [target.name]: val
-    });
-  };
   const handleClose = () => {
     setShowInput(false);
   };
   const Toolbar = () => {
+    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+    const navType = getLinkType(linkType, urlPath);
+    const hideOpenLink = navType === "page" || !navType;
+    console.log("linkType", linkType, navType, hideOpenLink);
     return selected && focused ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
         width: "150px",
         top: "100%",
-        left: "0px"
+        left: "0px",
+        display: "flex"
       },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
         title: "Open",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          href: absLink,
-          target: "_blank",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -94,21 +116,35 @@ const Link = props => {
       })]
     }) : null;
   };
+  const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
+  console.log("buttonProps===>", buttonProps);
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
-    children: [/*#__PURE__*/_jsx("a", {
-      href: absLink,
+    children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
-      target: element.target,
+      sx: classes.linkBtn,
+      ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {}), /*#__PURE__*/_jsx(LinkPopup, {
-      open: showInput,
-      linkData: linkData,
+    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
-      handleInputChange: handleInputChange,
-      handleInsertLink: updateLink
-    })]
+      onSave: ({
+        linkType,
+        navValue,
+        openInNewTab
+      }) => {
+        updateLink({
+          linkType,
+          url: navValue,
+          target: openInNewTab ? "_blank" : "_self"
+        });
+        handleClose();
+      },
+      navType: getLinkType(linkType, urlPath),
+      navValue: urlPath,
+      openInNewTab: linkData.showInNewTab === "_blank",
+      customProps: customProps
+    }) : null]
   });
 };
 export default Link;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -4,34 +4,41 @@ import { IconButton, Tooltip } from "@mui/material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
 import { getBlockActive } from "../../utils/SlateUtilityFunctions";
-import LinkPopup from "./LinkPopup";
+import { getLinkType } from "../../utils/helper";
+import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
   const {
-    editor
+    editor,
+    customProps
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
     url: "",
-    showInNewTab: true
+    showInNewTab: true,
+    linkType: ""
   });
   const [selection, setSelection] = useState();
   const {
     isActive,
     props: blockProps
   } = getBlockActive(editor, "link");
-  const handleInsertLink = () => {
+  const urlPath = blockProps?.url || blockProps?.href;
+  const showInNewTab = blockProps?.showInNewTab || blockProps?.target;
+  const {
+    linkType
+  } = linkData || {};
+  const handleInsertLink = linkData => {
     Transforms.select(editor, selection);
-    insertLink(editor, {
-      ...linkData
-    });
+    insertLink(editor, linkData);
     setLinkData({
       name: "",
       url: "",
-      showInNewTab: true
+      showInNewTab: true,
+      linkType: ""
     });
     setShowInput(false);
   };
@@ -40,21 +47,13 @@ const LinkButton = props => {
     if (editor.selection) {
       setLinkData({
         name: Editor.string(editor, editor.selection),
-        url: blockProps?.href || "",
-        showInNewTab: true
+        href: urlPath || "",
+        showInNewTab: showInNewTab,
+        linkType: blockProps?.linkType
       });
       setShowInput(true);
     }
   };
-  const handleInputChange = ({
-    target
-  }) => {
-    let val = target.type === "checkbox" ? target.checked : target.value;
-    setLinkData({
-      ...linkData,
-      [target.name]: val
-    });
-  };
   const handleClose = () => {
     setShowInput(false);
   };
@@ -72,13 +71,26 @@ const LinkButton = props => {
           icon: "link"
         })
       })
-    }), /*#__PURE__*/_jsx(LinkPopup, {
-      open: showInput,
-      linkData: linkData,
+    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
-      handleInputChange: handleInputChange,
-      handleInsertLink: handleInsertLink
-    })]
+      onSave: ({
+        linkType,
+        navValue,
+        openInNewTab
+      }) => {
+        handleInsertLink({
+          name: linkData?.name,
+          linkType,
+          url: navValue,
+          showInNewTab: openInNewTab ? "_blank" : "_self"
+        });
+        handleClose();
+      },
+      navType: getLinkType(linkType, urlPath),
+      navValue: urlPath,
+      openInNewTab: linkData.showInNewTab === "_blank",
+      customProps: customProps
+    }) : null]
   });
 };
 export default LinkButton;

package/dist/Editor/MiniEditor.js

@@ -10,6 +10,7 @@ import BasicToolbar from "./Toolbar/Basic";
 import withCommon from "./hooks/withCommon";
 import { serializeToText } from "./utils/serializeToText";
 import "./Editor.css";
+import { EditorProvider } from "./hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MiniEditor = props => {
@@ -23,7 +24,8 @@ const MiniEditor = props => {
     miniEditorPlaceholder,
     className,
     otherProps,
-    onSave
+    onSave,
+    theme
   } = props;
   const {
     CHARACTERS = []
@@ -128,18 +130,23 @@ const MiniEditor = props => {
     handleEditorChange(newVal);
     setValue(newVal);
   };
-  return /*#__PURE__*/_jsxs(Slate, {
+  return /*#__PURE__*/_jsx(EditorProvider, {
     editor: editor,
-    initialValue: content,
-    onChange: onChange,
-    children: [/*#__PURE__*/_jsx(BasicToolbar, {
-      ...props
-    }), /*#__PURE__*/_jsx(Editable, {
-      className: className || "mini-editor-cls",
-      renderElement: renderElement,
-      renderLeaf: renderLeaf,
-      onKeyDown: onKeyDown
-    })]
+    theme: theme,
+    children: /*#__PURE__*/_jsxs(Slate, {
+      editor: editor,
+      initialValue: content,
+      onChange: onChange,
+      children: [/*#__PURE__*/_jsx(BasicToolbar, {
+        ...props,
+        customProps: customProps
+      }), /*#__PURE__*/_jsx(Editable, {
+        className: className || "mini-editor-cls",
+        renderElement: renderElement,
+        renderLeaf: renderLeaf,
+        onKeyDown: onKeyDown
+      })]
+    })
   });
 };
 MiniEditor.displayName = "MiniEditor";

package/dist/Editor/Styles/EditorStyles.js

@@ -286,7 +286,7 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "black",
+      color: "inherit",
       background: "#EAEBFE"
     }
   },

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

@@ -25,7 +25,8 @@ const BasicToolbar = props => {
       hideTextColor = false,
       hideResetIcon = true,
       onResetClick = () => {}
-    }
+    },
+    customProps
   } = props;
   // state
   const [activeColor, setActiveColor] = useState("#000000");
@@ -34,25 +35,25 @@ const BasicToolbar = props => {
   const handleTextColor = color => {
     setActiveColor(color);
     addMarkData(editor, {
-      format: 'color',
+      format: "color",
       value: color
     });
   };
   return /*#__PURE__*/_jsxs(Box, {
-    component: 'div',
+    component: "div",
     className: "basic-toolbar",
     children: [/*#__PURE__*/_jsxs(Grid, {
       container: true,
       sx: {
-        padding: '10px'
+        padding: "10px"
       },
-      alignItems: 'center',
-      justifyContent: 'space-between',
+      alignItems: "center",
+      justifyContent: "space-between",
       children: [/*#__PURE__*/_jsx(Grid, {
         item: true,
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
-          alignItems: 'center',
+          alignItems: "center",
           children: [/*#__PURE__*/_jsx(Grid, {
             item: true,
             children: fontStyle?.map((m, i) => {
@@ -65,7 +66,8 @@ const BasicToolbar = props => {
             item: true,
             children: /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, link.format),
-              editor: editor
+              editor: editor,
+              customProps: customProps
             }, link.id)
           }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
             item: true,

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

@@ -13,6 +13,7 @@ import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
+import InfinityAITool from "./InfinityAITool";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -26,7 +27,8 @@ const MiniTextFormat = props => {
   const {
     classes,
     editor,
-    closeMainPopup
+    closeMainPopup,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -48,7 +50,7 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [/*#__PURE__*/_jsx(SelectTypography, {
+        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup
@@ -91,7 +93,8 @@ const MiniTextFormat = props => {
           className: "verticalLine ml-1 mr-1"
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(Button, {
           onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
           className: "textSettingsIcon",
@@ -119,7 +122,8 @@ const MiniTextFormat = props => {
               }), /*#__PURE__*/_jsx(TextFormat, {
                 editor: editor,
                 classes: classes,
-                closeMainPopup: closeMainPopup
+                closeMainPopup: closeMainPopup,
+                customProps: customProps
               })]
             })
           })

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

@@ -25,7 +25,8 @@ const TextFormat = props => {
     classes,
     editor,
     onClose,
-    closeMainPopup
+    closeMainPopup,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
@@ -344,7 +345,8 @@ const TextFormat = props => {
           closeMainPopup: closeMainPopup || onClose
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }, link.id)]
       })]
     }), /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/Toolbar/Toolbar.js

@@ -86,7 +86,8 @@ export const RenderToolbarIcon = props => {
       case "link":
         return /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, "link"),
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }, element.id);
       case "embed":
         return /*#__PURE__*/_jsx(Embed, {

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

@@ -38,13 +38,14 @@ export default function LinkSettings(props) {
     handleClose,
     onSave,
     customProps,
-    navType
+    navType,
+    allowTrigger
   } = props;
   const {
     isMobile,
     tagName
   } = customProps;
-  const navOptions = getNavOptions(customProps.hideTools, tagName);
+  const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -1,4 +1,4 @@
-export const getNavOptions = (hideTools = [], tagName = "") => {
+export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
   let navOptions = [{
     label: "None",
     value: ""
@@ -33,6 +33,10 @@ export const getNavOptions = (hideTools = [], tagName = "") => {
     placeholder: "phone"
   }];
   navOptions = navOptions.filter(n => !hideTools.includes(n.value));
+  if (!allowTrigger) {
+    const triggerValues = ["nextTrigger", "prevTrigger"];
+    navOptions = navOptions.filter(n => !triggerValues.includes(n.value));
+  }
   if (tagName !== "Pages") {
     navOptions = navOptions.filter(n => n.value !== "page");
   }

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js

@@ -4,6 +4,7 @@ import { ReactEditor } from "slate-react";
 import LinkSettings from "../../../LinkSettings";
 import { insertLink, removeLink } from "../../../../utils/link";
 import { getBlockActive, isBlockActive, upateBlockActive } from "../../../../utils/SlateUtilityFunctions";
+import { getLinkType } from "../../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Link = props => {
@@ -32,11 +33,13 @@ const Link = props => {
     if (childType === "text") {
       selectTextNode();
       const p = getBlockActive(editor, "link")?.props || {};
+      const url = p?.href || p?.url;
+      const showInNewTab = p?.target || p?.showInNewTab;
       const bp = {
         name: Editor.string(editor, editor.selection),
-        navType: "webAddress",
-        navValue: p?.href,
-        openInNewTab: p?.target === "_blank"
+        navType: getLinkType(p.linkType, url) || "webAddress",
+        navValue: url,
+        openInNewTab: showInNewTab === "_blank"
       };
       setIsActiveTextLink(isBlockActive(editor, "link"));
       setBlockProps(bp);
@@ -78,7 +81,8 @@ const Link = props => {
         return {
           name: Editor.string(editor, editor.selection),
           url: d?.navValue,
-          showInNewTab: d?.openInNewTab
+          showInNewTab: d?.openInNewTab,
+          linkType: d?.linkType
         };
       case "image":
         return {
@@ -108,7 +112,8 @@ const Link = props => {
     const upData = isActiveTextLink ? {
       href: data?.url,
       target: data?.showInNewTab ? "_blank" : "_self",
-      name: data?.name
+      name: data?.name,
+      linkType: data?.linkType
     } : data;
     if (isActiveTextLink) {
       // update text link
@@ -151,7 +156,8 @@ const Link = props => {
       },
       ...(blockProps || {}),
       customProps: customProps,
-      theme: theme
+      theme: theme,
+      allowTrigger: childType === "button"
     }) : null
   });
 };

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Node } from "slate";
 import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import SaveAsTemplate from "../../../StyleBuilder/fieldTypes/saveAsTemplate";
 import { CloseIcon } from "../../../iconslist";

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

@@ -12,7 +12,7 @@ const Settings = props => {
     childType,
     open,
     anchorEl,
-    placement,
+    // placement,
     onClose,
     editor,
     classes,

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
       dragOver,
       parentPath,
       path,
-      diffX,
-      x: cx,
+      // diffX,
+      // x: cx,
       breakpoint
       // calX,
     } = props;
@@ -134,7 +134,9 @@ export function onDropItem(props, parentClass) {
     let newPath = [];
     newPath = moveTo;
     const cCalx = isContainerElement(editor, moveTo, props);
-    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
+    // const posX = parseInt(
+    //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
+    // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();

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

@@ -9,7 +9,7 @@ const embedVideoStyle = [{
   }]
 }, {
   tab: "Aspect Ratio",
-  value: "Aspect Ratio",
+  value: "AspectRatio",
   hideOnFGS: true,
   fields: [{
     label: "Aspect Ratio",

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -14,6 +14,19 @@ const withCustomDeleteBackward = editor => {
       selection
     } = editor;
     if (selection) {
+      // get the current node
+      const [freeGridItemNode] = Editor.nodes(editor, {
+        match: n => n.type === "freegridItem" // Adjust based on your list item type
+      });
+
+      // if it is freegrid
+      if (freeGridItemNode && freeGridItemNode[0]) {
+        const hasText = Node.string(freeGridItemNode[0]);
+        if (!hasText) {
+          return;
+        }
+      }
+
       // Check if current node is a list item and is the last one
       const [node] = Editor.nodes(editor, {
         match: n => n.type === "list-item" // Adjust based on your list item type

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

@@ -0,0 +1,22 @@
+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) {
+      return [];
+    }
+
+    // Avoid applying highlight if the range only includes line breaks
+    const rangeText = Editor.string(editor, intersection);
+    if (!rangeText.trim()) {
+      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/SlateUtilityFunctions.js

@@ -242,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: {

package/dist/Editor/utils/helper.js

@@ -483,7 +483,7 @@ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegrid
     }
     return false;
   } catch (err) {
-    console.log('isFreeGrid error:', err);
+    console.log("isFreeGrid error:", err);
     return false;
   }
 };

package/dist/Editor/utils/link.js

@@ -1,8 +1,10 @@
 import { Editor, Transforms, Path, Range, Element } from "slate";
-export const createLinkNode = (href, showInNewTab, text) => ({
+import { isBlockActive } from "./SlateUtilityFunctions";
+export const createLinkNode = (href, showInNewTab, text, linkType) => ({
   type: "link",
   href,
   target: showInNewTab ? "_blank" : "_self",
+  linkType,
   children: [{
     text
   }]
@@ -10,16 +12,19 @@ export const createLinkNode = (href, showInNewTab, text) => ({
 export const insertLink = (editor, {
   url,
   showInNewTab,
-  name
+  name,
+  linkType
 }) => {
   if (!url) return;
   const {
     selection
   } = editor;
-  const link = createLinkNode(url, showInNewTab, name || "Link");
+  const link = createLinkNode(url, showInNewTab, name || "Link", linkType);
   if (!!selection) {
     const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
-    if (parent.type === "link") {
+    const isActive = isBlockActive(editor, "link"); // on reverse selecting the full text from offset 0 to some point (Note: only on focus-offset is 0), Transforms.wrapNodes is removing that reversely selected full text
+
+    if (parent.type === "link" || isActive) {
       removeLink(editor);
     }
     if (editor.isVoid(parent)) {

package/package.json

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