@flozy/editor 2.1.1 → 2.1.3

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

@@ -0,0 +1,172 @@
+import { useMemo } from "react";
+import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
+import { sizeMap } from "../../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  label,
+  type
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: label
+    }), " ", type]
+  });
+}
+function DisplayHeaderLabel({
+  type
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["H", /*#__PURE__*/_jsx("sub", {
+      children: type
+    })]
+  });
+}
+const typographyOptions = [{
+  id: 11,
+  format: "headingOne",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H1",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 1
+  }),
+  group: "typography",
+  value: "headingOne"
+}, {
+  id: 12,
+  format: "headingTwo",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H2",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 2
+  }),
+  group: "typography",
+  value: "headingTwo"
+}, {
+  id: 13,
+  format: "headingThree",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H3",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 3
+  }),
+  group: "typography",
+  value: "headingThree"
+}, {
+  id: 14,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "L",
+    type: "Large"
+  }),
+  label: "L",
+  group: "typography",
+  value: "huge"
+}, {
+  id: 15,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "M",
+    type: "Medium"
+  }),
+  label: "M",
+  group: "typography",
+  value: "medium"
+}, {
+  id: 16,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "S",
+    type: "Small"
+  }),
+  label: "S",
+  group: "typography",
+  value: "small"
+}];
+function SelectTypography({
+  editor,
+  classes,
+  closeMainPopup
+}) {
+  const [size] = useWindowResize();
+  const updateMarkData = newVal => {
+    const val = activeMark(editor, "fontSize");
+    let upData = {
+      ...getBreakPointsValue(val),
+      [size?.device]: `${newVal}px`
+    };
+
+    // if desktop update to all other devices
+    // to avoid default normal size
+    if (size?.device === "lg") {
+      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
+        a[b] = `${newVal}px`;
+        return a;
+      }, {});
+    }
+    addMarkData(editor, {
+      format: "fontSize",
+      value: {
+        ...upData
+      }
+    });
+    closeMainPopup();
+  };
+  const selectedBlock = useMemo(() => {
+    return typographyOptions.find(t => {
+      if (t.type === "block") {
+        return isBlockActive(editor, t.format);
+      } else if (t.type === "mark") {
+        const val = activeMark(editor, t.format);
+        if (val) {
+          const value = getBreakPointsValue(val, size?.device);
+          let selected;
+          Object.entries(sizeMap).forEach(([key, v]) => {
+            if (v === value) {
+              selected = key;
+            }
+          });
+          return selected === t.value;
+        }
+      }
+    });
+  }, [typographyOptions, activeMark, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    // add/reset block elements
+    toggleBlock(editor, format);
+    if (option.type === "block") {
+      // reset old font size
+      addMarkData(editor, {
+        format: "fontSize",
+        value: {}
+      });
+    } else if (option.type === "mark") {
+      const size = sizeMap[option.value] || "";
+      const [sizeInNumber] = size.split("px");
+      updateMarkData(Number(sizeInNumber));
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: typographyOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedBlock?.value || "headingOne",
+    classes: classes
+  });
+}
+export default SelectTypography;

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

@@ -0,0 +1,124 @@
+import { Button, Fade, Grid, Paper, Popper } from "@mui/material";
+import SelectTypography from "./SelectTypography";
+import SelectList from "./SelectList";
+import { toolbarGroups } from "../../toolbarGroups";
+import { MarkButton } from "../../FormatTools";
+import { activeMark, isBlockActive } from "../../../utils/SlateUtilityFunctions";
+import LinkButton from "../../../Elements/Link/LinkButton";
+import TextToolIcon from "../../../assets/svg/TextToolIcon";
+import TextFormat from "../TextFormat";
+import { useState } from "react";
+import useWindowResize from "../../../hooks/useWindowResize";
+import PopperHeader from "../PopperHeader";
+import MiniColorPicker from "./MiniColorPicker";
+import SelectAlignment from "./SelectAlignment";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COLOR = {
+  color: "#000000",
+  bgcolor: "#FFFFFF"
+};
+const textColorFormat = "color";
+const textBgFormat = "bgColor";
+const allTools = toolbarGroups.flat();
+const MiniTextFormat = props => {
+  const {
+    classes,
+    editor,
+    closeMainPopup
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const id = open ? "popup-edit-tool" : "";
+  const [size] = useWindowResize();
+  const removeFontStyles = ["superscript", "subscript"];
+  const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
+  const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
+  const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    sx: classes.miniTextFormatWrapper,
+    alignItems: "center",
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "toolWrapper",
+        children: [/*#__PURE__*/_jsx(SelectTypography, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine"
+        }), /*#__PURE__*/_jsx(SelectList, {
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
+        }), /*#__PURE__*/_jsx(SelectAlignment, {
+          fontAlign: fontAlign,
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
+        }), fontStyle?.map((m, i) => {
+          return /*#__PURE__*/_jsx(MarkButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(MiniColorPicker, {
+          format: textColorFormat,
+          classes: classes,
+          activeColor: activeColor,
+          id: "11_cc",
+          editor: editor
+        }), /*#__PURE__*/_jsx(MiniColorPicker, {
+          format: textBgFormat,
+          classes: classes,
+          activeColor: activeBg,
+          id: "12_cc",
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine ml-1 mr-1"
+        }), /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, link.format),
+          editor: editor
+        }, link.id), /*#__PURE__*/_jsx(Button, {
+          onClick: e => setAnchorEl(e.currentTarget),
+          className: "textSettingsIcon",
+          children: /*#__PURE__*/_jsx(TextToolIcon, {})
+        }), /*#__PURE__*/_jsx(Popper, {
+          id: id,
+          open: open,
+          anchorEl: anchorEl,
+          transition: true,
+          placement: "auto-end",
+          sx: classes.popupWrapper,
+          className: `tools-drawer ${size?.device}`,
+          children: ({
+            TransitionProps
+          }) => /*#__PURE__*/_jsx(Fade, {
+            ...TransitionProps,
+            timeout: 350,
+            children: /*#__PURE__*/_jsxs(Paper, {
+              style: {
+                borderRadius: "10px"
+              },
+              children: [/*#__PURE__*/_jsx(PopperHeader, {
+                title: "Text Settings",
+                classes: classes,
+                onClose: () => setAnchorEl(null)
+              }), /*#__PURE__*/_jsx(TextFormat, {
+                editor: editor,
+                classes: classes
+              })]
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+export default MiniTextFormat;

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

@@ -441,6 +441,79 @@ const usePopupStyle = theme => ({
       background: "transparent",
       boxShadow: "none"
     }
+  },
+  miniTextFormatWrapper: {
+    maxWidth: "100%",
+    padding: "4px 8px",
+    overflowX: "auto",
+    "& .customSelectTool": {
+      padding: "8px",
+      color: theme.palette.secondary.main,
+      gap: "4px"
+    },
+    "& .verticalLine": {
+      borderLeft: "1px solid #E0E0E0",
+      minHeight: "35px",
+      height: "100%"
+    },
+    "& .toolWrapper": {
+      display: "flex",
+      alignItems: "center",
+      "& .mr-1": {
+        marginRight: "8px"
+      },
+      "& .ml-1": {
+        marginLeft: "8px"
+      }
+    },
+    "& button": {
+      minWidth: "0px !important",
+      textTransform: "none"
+    },
+    "& .fontColorBtn": {
+      color: theme.palette.secondary.main,
+      borderRadius: "unset",
+      fontSize: "17px",
+      padding: "0px",
+      margin: "0px 8px",
+      paddingBottom: "5px",
+      lineHeight: "16px",
+      position: "relative",
+      "& .selectedColor": {
+        height: "3px",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "100%"
+      }
+    },
+    "& .textSettingsIcon": {
+      minWidth: "auto !important"
+    }
+  },
+  customSelectPopoverWrapper: {
+    "& .customSelectOptionLabel": {
+      color: "black",
+      margin: "0px",
+      width: "100%",
+      justifyContent: "start",
+      paddingRight: "20px",
+      "& :hover": {
+        background: "#F0F5FA !important"
+      },
+      "&.selected": {
+        background: "#F0F5FA !important"
+      }
+    },
+    "& .menuOptions": {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px"
+    },
+    "& button": {
+      minWidth: "0px !important",
+      textTransform: "none"
+    }
   }
 });
 export default usePopupStyle;

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

@@ -8,13 +8,14 @@ import useDrag from "../../hooks/useDrag";
 import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
-import useEvent from "../../hooks/useKeys";
-import MiniTextFormat from "./MiniTextFormat";
+// import MiniTextFormat from "./MiniTextFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
-    theme
+    theme,
+    setIsTextSelected
   } = props;
   const classes = usePopupStyle(theme);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -28,23 +29,19 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
-  const [eventKey] = useEvent();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
         setOpen(true);
+        setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
+      setIsTextSelected(false);
     }
   }, [event, anchorEl]);
-  useEffect(() => {
-    if (eventKey) {
-      setOpen(false);
-    }
-  }, [eventKey]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
@@ -72,31 +69,34 @@ const PopupTool = props => {
     setAnchorEl(null);
     setOpen(false);
   };
-  return open ? /*#__PURE__*/_jsx(Popper, {
-    id: id,
-    open: open,
-    anchorEl: anchorEl,
-    transition: true,
-    placement: "auto-end",
-    sx: classes.popupWrapper,
-    className: `tools-drawer ${size?.device}`,
-    children: ({
-      TransitionProps
-    }) => /*#__PURE__*/_jsx(Fade, {
-      ...TransitionProps,
-      timeout: 350,
-      children: /*#__PURE__*/_jsxs(Paper, {
-        style: {
-          borderRadius: "10px"
-        },
-        children: [/*#__PURE__*/_jsx(PopperHeader, {
-          title: "Text Settings",
-          classes: classes,
-          onClose: handleClose
-        }), /*#__PURE__*/_jsx(MiniTextFormat, {
-          editor: editor,
-          classes: classes
-        })]
+  return open ? /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Popper, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      transition: true,
+      placement: "auto-end",
+      sx: classes.popupWrapper,
+      className: `tools-drawer ${size?.device}`,
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        timeout: 350,
+        children: /*#__PURE__*/_jsxs(Paper, {
+          style: {
+            borderRadius: "10px"
+          },
+          className: size.device === "xs" ? "mobileMiniTextWrapper" : "",
+          children: [/*#__PURE__*/_jsx(PopperHeader, {
+            title: "Text Settings",
+            classes: classes,
+            onClose: handleClose
+          }), /*#__PURE__*/_jsx(TextFormat, {
+            editor: editor,
+            classes: classes
+          })]
+        })
       })
     })
   }) : null;

package/dist/Editor/assets/svg/DownArrowIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DownArrowIcon = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M1 1L3.43323 3.37902L5.86646 1",
+      stroke: "#64748B",
+      strokeLinecap: "round"
+    })
+  });
+};
+export default DownArrowIcon;

package/dist/Editor/assets/svg/PaintIcon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function PaintIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76688 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
+      fill: "#64748B"
+    })
+  });
+}
+export default PaintIcon;

package/dist/Editor/assets/svg/TextToolIcon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TextToolIcon(props = {}) {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M1.55762 4.18323V3.12156C1.55762 2.45073 2.10012 1.91406 2.76512 1.91406H11.2351C11.906 1.91406 12.4426 2.45656 12.4426 3.12156V4.18323",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 12.0876V2.39844",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.70166 12.0859H9.29833",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export default TextToolIcon;

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

@@ -39,6 +39,16 @@ const embedImageStyle = [{
       value: "RoundedLightB2",
       label: "Rounded Light B2 Frame"
     }]
+  }, {
+    label: "Add web address here",
+    key: "webAddress",
+    type: "text",
+    placeholder: "https://"
+  }, {
+    label: "Open in new tab",
+    key: "isNewTab",
+    type: "selectBox",
+    placeholder: "Open in new tab"
   }]
 }, {
   tab: "Banner Spacing",

package/dist/Editor/plugins/withHTML.js

@@ -47,7 +47,8 @@ const withHtml = editor => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
-    if (slateHTML) {
+    const eltype = currentEl?.type;
+    if (slateHTML && !formatFragment[eltype]) {
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
@@ -62,7 +63,6 @@ const withHtml = editor => {
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
       const fragment = deserialize(parsed.body);
-      const eltype = currentEl?.type;
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
       Transforms.insertFragment(editor, formattedFragment);
       return;

package/dist/Editor/service/formSubmit.js

@@ -1,6 +1,7 @@
 export const formSubmit = async (formData, props) => {
   try {
-    const response = await fetch(`${props.PAGES_API_HOST}/form/submit`, {
+    const pageApiHost = props.PAGES_API_HOST || "api/v1";
+    const response = await fetch(`${pageApiHost}/form/submit`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"

package/package.json

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