@flozy/editor 10.2.4 → 10.2.6

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

@@ -1,8 +1,8 @@
-import { Autocomplete, Checkbox, FormControlLabel, IconButton, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
 import Select from "../Select";
-import { CheckedBoxCheckIcon } from "../iconListV2";
+import Checkbox from "../Checkbox";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,24 +28,10 @@ const OpenInNewTab = props => {
     onNewTabChange,
     translation
   } = props;
-  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(FormControlLabel, {
-    className: "ccheckbox-primary",
-    control: /*#__PURE__*/_jsx(Checkbox, {
-      checked: openInNewTab,
-      onChange: onNewTabChange,
-      className: "checkBox",
-      checkedIcon: /*#__PURE__*/_jsx(IconButton, {
-        className: "checkedIcon",
-        children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
-      }),
-      icon: /*#__PURE__*/_jsx(IconButton, {
-        className: "unCheckedIcon"
-      })
-    }),
-    label: /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      children: "Open in new tab"
-    })
+  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(Checkbox, {
+    checked: openInNewTab,
+    onChange: onNewTabChange,
+    label: translation("Open in new tab")
   }) : null;
 };
 export const TextInput = props => {
@@ -72,8 +58,7 @@ export const SelectPage = props => {
     value,
     onChange,
     services,
-    translation,
-    classes
+    translation
   } = props;
   const [pages, setPages] = useState([]);
   const editor = useSlate();
@@ -126,28 +111,42 @@ export const SelectPage = props => {
   }, [value, pages]);
   const isCurrentPage = page?.value === "_currentPage";
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
-      label: page?.label,
-      setValue: val => onChange(val?.value || ""),
-      placeholder: translation("Select Page"),
+    children: [/*#__PURE__*/_jsx(Select, {
       options: pages,
+      value: page?.value,
+      onChange: e => onChange(e.target.value || ""),
       disabled: isCurrentPage,
-      classes: classes
-    }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
-      label: section?.label,
-      setValue: val => {
-        let url = page?.value;
-        if (val?.value) {
-          url += `#${val?.value}`;
-        }
-        onChange(url);
-      },
-      placeholder: translation("Select Section or anchor"),
+      label: translation("Select Page"),
+      showDefault: true,
+      translation: translation
+    }), /*#__PURE__*/_jsx(Select, {
       options: page?.sections?.map(p => ({
         label: p,
         value: p
       })),
-      classes: classes
+      value: section?.value,
+      onChange: e => {
+        const {
+          value = ""
+        } = e.target;
+        let url = page?.value;
+        if (value) {
+          url += `#${value}`;
+        } else {
+          const [page] = url.split("#");
+          url = page;
+        }
+        onChange(url);
+      },
+      disabled: isCurrentPage,
+      label: translation("Select Section or anchor"),
+      labelProps: {
+        sx: {
+          padding: "10px 0px 4px 0px"
+        }
+      },
+      showDefault: true,
+      translation: translation
     }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
     })]
@@ -176,34 +175,15 @@ export const ScrollTopBottom = props => {
   const {
     value,
     onChange,
-    translation,
-    classes
+    translation
   } = props;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      sx: {
-        paddingBottom: "4px"
-      },
-      children: translation("Choose Top/Bottom of page")
-    }), /*#__PURE__*/_jsx(Select, {
-      size: "small",
-      fullWidth: true,
-      value: value,
-      onChange: e => onChange(e.target.value),
-      MenuProps: {
-        sx: classes.customSelect
-      },
-      children: scrollToOptions.map((option, i) => {
-        return /*#__PURE__*/_jsx(MenuItem, {
-          value: option.value,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            children: translation(option.label)
-          })
-        }, i);
-      })
-    })]
+  return /*#__PURE__*/_jsx(Select, {
+    options: scrollToOptions,
+    value: value,
+    onChange: e => onChange(e.target.value),
+    label: translation("Choose Top/Bottom of page"),
+    showDefault: true,
+    translation: translation
   });
 };
 const filter = createFilterOptions();

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

@@ -5,7 +5,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography, useMediaQuery } from "@mui/material";
+import { Box, FormControl, Grid, Typography, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
@@ -13,6 +13,7 @@ import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Select from "../Select";
+import RadioGroup from "../RadioGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -46,7 +47,7 @@ export default function LinkSettings(props) {
     tagName,
     translation
   } = customProps;
-  const isMobile = useMediaQuery('(max-width: 899px)');
+  const isMobile = useMediaQuery("(max-width: 899px)");
   const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -68,7 +69,7 @@ export default function LinkSettings(props) {
       open: true,
       onClose: handleClose,
       children: /*#__PURE__*/_jsxs(Grid, {
-        sx: classes.drawerContainer,
+        sx: classes.swipeableDrawerContainer,
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "subtitle1",
           gutterBottom: true,
@@ -78,8 +79,7 @@ export default function LinkSettings(props) {
           className: "link-settings-title",
           children: translation("dialogueTitle")
         }), /*#__PURE__*/_jsx(Select, {
-          size: "small",
-          fullWidth: true,
+          options: navOptions,
           value: nav?.value,
           onChange: e => {
             const {
@@ -90,18 +90,10 @@ export default function LinkSettings(props) {
             setNavValue("");
           },
           displayEmpty: true,
+          translation: translation,
           MenuProps: {
             sx: classes.customSelect
-          },
-          children: navOptions.map((navOption, i) => {
-            return /*#__PURE__*/_jsx(MenuItem, {
-              value: navOption.value,
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                children: translation(navOption.label)
-              })
-            }, i);
-          })
+          }
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
             paddingTop: "14px"
@@ -166,18 +158,13 @@ export default function LinkSettings(props) {
             children: /*#__PURE__*/_jsx(FormControl, {
               sx: classes.customRadioBtn,
               children: /*#__PURE__*/_jsx(RadioGroup, {
+                options: navOptions,
                 value: nav?.value,
-                children: navOptions?.map((navOption, i) => {
-                  return /*#__PURE__*/_jsx(FormControlLabel, {
-                    value: navOption.value,
-                    control: /*#__PURE__*/_jsx(Radio, {}),
-                    label: translation(navOption.label),
-                    onChange: () => {
-                      setNav(navOption);
-                      setNavValue("");
-                    }
-                  }, i);
-                })
+                onChange: navOption => {
+                  setNav(navOption);
+                  setNavValue("");
+                },
+                translation: translation
               })
             })
           }), /*#__PURE__*/_jsx(Grid, {

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

@@ -26,11 +26,11 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
   }, {
     label: "Email",
     value: "email",
-    placeholder: "email"
+    placeholder: "mail@example.com"
   }, {
     label: "Phone number",
     value: "phone",
-    placeholder: "phone"
+    placeholder: "+1 (702) 123-4567"
   }];
   navOptions = navOptions.filter(n => !hideTools.includes(n.value));
   if (!allowTrigger) {