@flozy/editor 2.1.9 → 3.1.1

package/dist/Editor/CommonEditor.js

@@ -374,6 +374,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const handleFooterClick = () => {
     window.open('https://www.flozy.com', '_blank');
   };
+  const editorWrapperStyle = useMemo(() => {
+    const style = {
+      color: pageTextColor || ""
+    };
+    if (pageBgImage && pageBgImage !== "none") {
+      style.backgroundImage = `url(${pageBgImage})`;
+      style.backgroundSize = `cover`;
+    } else {
+      style.background = pageColor || "";
+    }
+    return style;
+  }, [pageBgImage, pageColor]);
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -396,13 +408,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                style: {
-                  background: pageColor || "",
-                  color: pageTextColor || ""
-                },
+                style: editorWrapperStyle,
                 onClick: e => {
                   handleInsertLastElement(e, editor);
                 },

package/dist/Editor/Editor.css

@@ -1109,3 +1109,7 @@ blockquote {
 .doublequote::after {
   content: '\201D';
 }
+
+.scrollSmooth {
+  scroll-behavior: smooth;
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/NavComponents.js

@@ -0,0 +1,219 @@
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OpenInNewTab = props => {
+  const {
+    nav,
+    openInNewTab,
+    onNewTabChange
+  } = props;
+  return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(FormControlLabel, {
+    className: "ccheckbox-primary",
+    control: /*#__PURE__*/_jsx(Checkbox, {
+      checked: openInNewTab,
+      onChange: onNewTabChange
+    }),
+    label: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: "Open in new tab"
+    })
+  }) : null;
+};
+export const TextInput = props => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextField, {
+      fullWidth: true,
+      size: "small",
+      ...props,
+      onChange: e => {
+        props.onChange(e.target.value);
+      }
+    }), /*#__PURE__*/_jsx(OpenInNewTab, {
+      ...props
+    })]
+  });
+};
+export const SelectPage = props => {
+  const {
+    value,
+    onChange,
+    services
+  } = props;
+  const [pages, setPages] = useState([]);
+  const getPages = async () => {
+    const result = await services("getPages", {});
+    const refactor = result?.data?.map(r => {
+      const {
+        title,
+        url_name,
+        ...rest
+      } = r;
+      return {
+        label: title,
+        value: url_name,
+        ...rest
+      };
+    });
+    setPages(refactor);
+  };
+  useEffect(() => {
+    getPages();
+  }, []);
+  const [page, section] = useMemo(() => {
+    if (value) {
+      const [page, section] = value.split("#");
+      const selectedPage = pages.find(p => p.value === page) || {
+        label: page,
+        value: page
+      };
+      const selectedSection = pages.find(p => p.value === section) || {
+        label: section,
+        value: section
+      };
+      return [selectedPage, selectedSection];
+    }
+    return [];
+  }, [value, pages]);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: page?.label,
+      setValue: val => onChange(val?.value),
+      placeholder: "Select Page",
+      options: pages
+    }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
+      label: section?.label,
+      setValue: val => {
+        let url = page?.value;
+        if (val?.value) {
+          url += `#${val?.value}`;
+        }
+        onChange(url);
+      },
+      placeholder: "Select Section or anchor",
+      options: page?.sections?.map(p => ({
+        label: p,
+        value: p
+      }))
+    }), /*#__PURE__*/_jsx(OpenInNewTab, {
+      ...props
+    })]
+  });
+};
+export const Trigger = props => {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h6",
+    gutterBottom: true,
+    children: "Choosing this will trigger the next step"
+  });
+};
+const scrollToOptions = [{
+  label: "Top",
+  value: "top"
+}, {
+  label: "Bottom",
+  value: "bottom"
+}];
+export const ScrollTopBottom = props => {
+  const {
+    value,
+    onChange
+  } = props;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      children: "Choose Top/Bottom of page"
+    }), /*#__PURE__*/_jsx(Select, {
+      size: "small",
+      fullWidth: true,
+      value: value,
+      onChange: e => onChange(e.target.value),
+      children: scrollToOptions.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: option.label
+          })
+        }, i);
+      })
+    })]
+  });
+};
+const filter = createFilterOptions();
+export function FreeSoloCreateOption({
+  label,
+  setValue,
+  options = [],
+  placeholder = ""
+}) {
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    freeSolo: true,
+    options: options,
+    value: label || "",
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      label: placeholder
+    }),
+    renderOption: (props, option) => /*#__PURE__*/_jsx("li", {
+      ...props,
+      children: option.label
+    }),
+    onChange: (event, newValue) => {
+      if (typeof newValue === 'string') {
+        setValue({
+          value: newValue
+        });
+      } else if (newValue && newValue.inputValue) {
+        const {
+          inputValue
+        } = newValue;
+
+        // Create a new value from the user input
+        setValue({
+          label: inputValue,
+          value: inputValue
+        });
+      } else {
+        setValue(newValue);
+      }
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params);
+      const {
+        inputValue
+      } = params;
+      // Suggest the creation of a new value
+      const isExisting = options.some(option => inputValue === option.label);
+      if (inputValue !== '' && !isExisting) {
+        filtered.push({
+          inputValue,
+          label: `Add "${inputValue}"`
+        });
+      }
+      return filtered;
+    },
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    getOptionLabel: option => {
+      // Value selected with enter, right from the input
+      if (typeof option === 'string') {
+        return option;
+      }
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue;
+      }
+      // Regular option
+      return option.value;
+    },
+    sx: {
+      marginTop: "10px"
+    }
+  });
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/index.js

@@ -0,0 +1,138 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { FormControl, FormControlLabel, Grid, Radio, RadioGroup } from '@mui/material';
+import { useState } from 'react';
+import ButtonNavSettingsStyles from './style';
+import { getNavOptions } from './navOptions';
+import { ScrollTopBottom, SelectPage, TextInput, Trigger } from './NavComponents';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MAP_COMPONENT = {
+  webAddress: TextInput,
+  email: TextInput,
+  phone: TextInput,
+  actionTrigger: Trigger,
+  scrollTopOrBottom: ScrollTopBottom,
+  page: SelectPage
+};
+export default function ButtonNavSettings(props) {
+  const {
+    open,
+    handleClose,
+    onSave,
+    customProps,
+    element,
+    editor
+  } = props;
+  const navOptions = getNavOptions(customProps.hideTools);
+  const prevNavType = element?.buttonLink?.linkType;
+  const classes = ButtonNavSettingsStyles();
+  const [nav, setNav] = useState(prevNavType ? navOptions.find(n => n.value === prevNavType) : {
+    label: "None",
+    value: ""
+  });
+  const [navValue, setNavValue] = useState(element?.url || "");
+  const [openInNewTab, setOpenInNewTab] = useState(element.openInNewTab || false);
+  const {
+    metadata
+  } = customProps || {
+    metadata: {}
+  };
+  const {
+    buttonLink
+  } = metadata || {
+    actionTrigger: {}
+  };
+  const {
+    actionTrigger
+  } = buttonLink || {};
+  const {
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
+  const NavSettings = MAP_COMPONENT[nav?.value];
+  const onChange = value => {
+    setNavValue(value);
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    onClose: handleClose,
+    open: open,
+    sx: classes.dialogContainer,
+    fullWidth: true,
+    maxWidth: "sm",
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: "What do you want to link to?"
+    }), /*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "close",
+      onClick: handleClose,
+      sx: classes.closeIcon,
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      dividers: true,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 6,
+          sx: classes.gridDivider,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            children: /*#__PURE__*/_jsx(RadioGroup, {
+              value: nav?.value,
+              children: navOptions?.map((navOption, i) => {
+                return /*#__PURE__*/_jsx(FormControlLabel, {
+                  value: navOption.value,
+                  control: /*#__PURE__*/_jsx(Radio, {}),
+                  label: navOption.label,
+                  onChange: () => {
+                    setNav(navOption);
+                    setNavValue("");
+                  }
+                }, i);
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 6,
+          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+            placeholder: nav?.placeholder,
+            nav: nav,
+            onChange: onChange,
+            value: navValue,
+            editor: editor,
+            openInNewTab: openInNewTab,
+            onNewTabChange: () => setOpenInNewTab(prev => !prev),
+            services: customProps.services
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        sx: classes.closeBtn,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: () => {
+          onSave({
+            buttonLink: {
+              linkType: nav?.value,
+              onClick
+            },
+            url: navValue,
+            openInNewTab
+          });
+          handleClose();
+        },
+        sx: classes.saveBtn,
+        children: "Save"
+      })]
+    })]
+  });
+}

package/dist/Editor/Elements/Button/ButtonNavSettings/navOptions.js

@@ -0,0 +1,32 @@
+export const getNavOptions = (hideTools = []) => {
+  let navOptions = [{
+    label: "None",
+    value: ""
+  }, {
+    label: "Trigger",
+    value: "actionTrigger"
+  }, {
+    label: "Web Address",
+    value: "webAddress",
+    placeholder: "https://",
+    showOpenInNewTab: true
+  }, {
+    label: "Select Page and Section",
+    value: "page",
+    placeholder: "Select Page and Section",
+    showOpenInNewTab: true
+  }, {
+    label: "Top/Bottom of page",
+    value: "scrollTopOrBottom"
+  }, {
+    label: "Email",
+    value: "email",
+    placeholder: "email"
+  }, {
+    label: "Phone number",
+    value: "phone",
+    placeholder: "phone"
+  }];
+  navOptions = navOptions.filter(n => !hideTools.includes(n.value));
+  return navOptions;
+};

package/dist/Editor/Elements/Button/ButtonNavSettings/style.js

@@ -0,0 +1,55 @@
+const ButtonNavSettingsStyles = () => ({
+  dialogContainer: {
+    '& .MuiDialogContent-root': {
+      padding: "0px 20px"
+    },
+    '& .MuiDialogActions-root': {
+      padding: "10px"
+    },
+    '& .MuiTypography-h6': {
+      fontWeight: 600,
+      fontSize: "16px",
+      paddingRight: "20px"
+    },
+    "& .MuiGrid-container": {
+      marginTop: '0px'
+    },
+    "& .MuiGrid-item": {
+      padding: "14px"
+    }
+  },
+  saveBtn: {
+    color: '#fff',
+    background: "#2563EB",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 24px",
+    textTransform: "none",
+    "&:hover": {
+      color: '#fff',
+      background: "#2563EB"
+    }
+  },
+  closeBtn: {
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
+    }
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 8,
+    top: 8,
+    color: theme => theme.palette.grey[500]
+  },
+  gridDivider: {
+    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+  }
+});
+export default ButtonNavSettingsStyles;