@flozy/editor 4.7.7 → 4.7.8

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/FreeGrid/styles.js

@@ -324,7 +324,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/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

@@ -26,7 +26,8 @@ const MiniTextFormat = props => {
   const {
     classes,
     editor,
-    closeMainPopup
+    closeMainPopup,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -91,7 +92,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 +121,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/utils/helper.js

@@ -221,7 +221,7 @@ const getScrollElement = () => {
   const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
   return scrollFrom;
 };
-const handleLinkBtnClick = (e, props) => {
+const handleLinkBtnClick = (e, props, isMobilePreview) => {
   if (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -230,6 +230,19 @@ const handleLinkBtnClick = (e, props) => {
     window.open(props.href);
   } else {
     window.location.href = props.href;
+    if (isMobilePreview) {
+      // on iframe - mobile preview, window.location.href is not scrolling to the element correctly
+      const [, elementId] = props.href?.split("#");
+      if (elementId) {
+        const element = document.getElementById(elementId);
+        if (element) {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+        }
+      }
+    }
   }
 };
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
@@ -337,7 +350,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       // This condition is used for mobile preview in the page editor.
       // 'touchEnd' will not work in the mobile page preview.
       if (!touchEndClicked && isMobile) {
-        handleLinkBtnClick(e, props);
+        handleLinkBtnClick(e, props, true);
       }
       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.7",
+  "version": "4.7.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"