@flozy/editor 1.4.5 → 1.4.7

package/dist/Editor/Elements/Form/Form.js

@@ -27,8 +27,30 @@ const Form = props => {
   const {
     buttonProps,
     textColor,
-    formName
+    formName,
+    borderWidth,
+    borderColor,
+    borderStyle,
+    borderRadius,
+    bannerSpacing,
+    bgColor,
+    formTitle,
+    textSize,
+    fontFamily,
+    textAlign
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
   const btnAlign = buttonProps?.alignment || {};
@@ -152,6 +174,10 @@ const Form = props => {
     return /*#__PURE__*/_jsxs("div", {
       className: "",
       contentEditable: false,
+      style: {
+        backgroundColor: "#ccc",
+        width: "fit-content"
+      },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Form Settings",
         arrow: true,
@@ -187,47 +213,71 @@ const Form = props => {
       id: `${formName}`,
       onSubmit: handleSubmit,
       style: {
-        color: textColor || "#FFF"
+        color: textColor || "#FFF",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        background: bgColor || "transparent",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`
       },
       ref: formEle,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        className: "form-grid",
+        item: true,
+        xs: 12,
         spacing: 2,
-        children: [children, /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: buttonProps?.grid || 6,
-          className: "form-btn-wrpr",
-          contentEditable: false,
-          style: {
-            display: "flex",
-            justifyContent: btnAlign?.horizantal || "start",
-            alignItems: btnAlign?.vertical || "start"
-          },
-          children: /*#__PURE__*/_jsx("button", {
-            onClick: onSubmitClick,
-            disabled: loading,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx("legend", {
             style: {
-              background: buttonProps?.bgColor || "rgb(30, 75, 122)",
-              borderWidth: "1px",
-              borderBlockStyle: "solid",
-              ...btnBorderStyle,
-              borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
-              paddingLeft: `${btnSpacing?.left || 8}px`,
-              paddingRight: `${btnSpacing?.right || 8}px`,
-              paddingTop: `${btnSpacing?.top || 8}px`,
-              paddingBottom: `${btnSpacing?.bottom || 8}px`,
-              marginLeft: `${btnM?.left || 0}px`,
-              marginRight: `${btnM?.right || 0}px`,
-              marginTop: `${btnM?.top || 0}px`,
-              marginBottom: `${btnM?.bottom || 0}px`,
-              color: `${buttonProps?.textColor || "#FFFFFF"}`,
-              fontSize: buttonProps?.textSize || "inherit",
-              height: "fit-content",
-              fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
+              fontSize: textSize || "inherit",
+              fontFamily: fontFamily || "PoppinsRegular",
+              textAlign: textAlign || "left",
+              width: "100%"
             },
-            children: buttonProps?.label || "Submit"
-          })
-        })]
+            children: formTitle
+          }), children, /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: buttonProps?.grid || 6,
+            className: "form-btn-wrpr",
+            contentEditable: false,
+            style: {
+              display: "flex",
+              justifyContent: btnAlign?.horizantal || "start",
+              alignItems: btnAlign?.vertical || "start"
+            },
+            children: /*#__PURE__*/_jsx("button", {
+              onClick: onSubmitClick,
+              disabled: loading,
+              style: {
+                background: buttonProps?.bgColor || "rgb(30, 75, 122)",
+                borderWidth: "1px",
+                borderBlockStyle: "solid",
+                ...btnBorderStyle,
+                borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
+                paddingLeft: `${btnSpacing?.left || 8}px`,
+                paddingRight: `${btnSpacing?.right || 8}px`,
+                paddingTop: `${btnSpacing?.top || 8}px`,
+                paddingBottom: `${btnSpacing?.bottom || 8}px`,
+                marginLeft: `${btnM?.left || 0}px`,
+                marginRight: `${btnM?.right || 0}px`,
+                marginTop: `${btnM?.top || 0}px`,
+                marginBottom: `${btnM?.bottom || 0}px`,
+                color: `${buttonProps?.textColor || "#FFFFFF"}`,
+                fontSize: buttonProps?.textSize || "inherit",
+                height: "fit-content",
+                fontFamily: buttonProps?.fontFamily || "PoppinsRegular",
+                width: buttonProps?.fullWidth ? "100%" : "auto"
+              },
+              children: buttonProps?.label || "Submit"
+            })
+          })]
+        })
       }), loading && /*#__PURE__*/_jsx("div", {
         style: {
           position: "absolute",

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -5,10 +5,14 @@ const FormText = props => {
     fieldProps
   } = props;
   const {
-    borderColor,
     bannerSpacing,
+    height,
     borderRadius,
-    height
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor
   } = fieldProps;
   const {
     left,
@@ -37,12 +41,17 @@ const FormText = props => {
       style: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
         paddingBottom: `${bottom || 8}px`,
-        height: height || "auto"
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -5,10 +5,14 @@ const FormTextArea = props => {
     fieldProps
   } = props;
   const {
-    borderColor,
     bannerSpacing,
+    height,
     borderRadius,
-    height
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor
   } = fieldProps;
   const {
     left,
@@ -22,7 +26,6 @@ const FormTextArea = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  console.log(fieldProps);
   const onChange = e => {
     e.preventDefault();
   };
@@ -38,12 +41,17 @@ const FormTextArea = props => {
       style: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
         paddingBottom: `${bottom || 8}px`,
-        height: height || "150px"
+        height: height || "150px",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
       }
     })
   });

package/dist/Editor/Elements/Grid/GridItem.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
-import { IconButton, Tooltip, Box, Grid as GridContainer } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,6 +43,12 @@ const GridItem = props => {
     horizantal,
     flexDirection
   } = alignment || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
@@ -98,7 +104,7 @@ const GridItem = props => {
     sx: {
       display: "flex",
       flexDirection: flexDirection || "column",
-      backgroundColor: bgColor || "transparent",
+      background: bgColor || "transparent",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
@@ -129,7 +135,7 @@ const GridItem = props => {
         height: gridHeight || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: borderRadius || "0px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         "&:hover": {

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -0,0 +1,54 @@
+import React from "react";
+import * as fIcons from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const InlineIcon = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    bgColor,
+    textColor,
+    bannerSpacing,
+    borderRadius,
+    borderColor,
+    icon
+  } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  const BtnIcon = fIcons["Check"];
+  console.log(icon);
+  return /*#__PURE__*/_jsxs("button", {
+    ...attributes,
+    className: "editor-icon-text",
+    contentEditable: false,
+    style: {
+      display: "inline",
+      paddingLeft: `${left}px`,
+      paddingRight: `${right}px`,
+      paddingTop: `${top}px`,
+      paddingBottom: `${bottom}px`,
+      border: borderColor ? `1px solid ${borderColor}` : "none",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      background: bgColor || "#CCC",
+      color: textColor
+    },
+    children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      children: children
+    })]
+  });
+};
+export default InlineIcon;

package/dist/Editor/Elements/InlineIcon/InlineIconButton.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Editor, Transforms } from "slate";
+import { IconButton } from "@mui/material";
+import SmartButtonIcon from "@mui/icons-material/SmartButton";
+import { removeChipText } from "../../utils/insertChipText";
+import { insertIconText } from "../../utils/insertIconText";
+import ChipTextPopup from "./InlineIconPopup";
+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 InlineIconButton = props => {
+  const {
+    editor,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const handleClick = () => {
+    const [parent, parentPath] = Editor.parent(editor, editor.selection.focus.path);
+    if (parent && parent?.type === "chip-text") {
+      setOpenSettings({
+        element: parent,
+        path: parentPath
+      });
+      // removeChipText(editor, parentPath);
+    } else {
+      insertIconText(editor, {
+        url: "",
+        showInNewTab: false
+      });
+    }
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: openSetttings?.path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    removeChipText(editor, openSetttings?.path);
+    onClose();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      title: "Icon",
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsx(SmartButtonIcon, {
+        sx: {
+          fill: "#64748B"
+        }
+      })
+    }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
+      element: openSetttings?.element || {},
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
+  });
+};
+export default InlineIconButton;

package/dist/Editor/Elements/InlineIcon/InlineIconPopup.js

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import chipTextStyle from "../../common/StyleBuilder/chipTextStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const InlineIconPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Chip Text",
+    type: "ChipTextPopup",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    onDelete: onDelete,
+    renderTabs: chipTextStyle,
+    customProps: customProps
+  });
+};
+export default InlineIconPopup;

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

@@ -3,6 +3,9 @@ import { useFocused, useSelected, useSlateStatic } from "slate-react";
 import { removeLink } from "../../utils/link";
 import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
 import "./styles.css";
+import { GrDocumentUpload } from 'react-icons/gr';
+import { insertEmbed } from "../../utils/embed";
+import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = ({
@@ -13,6 +16,24 @@ const Link = ({
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  let refUrl = element.href ? element.href : element.url;
+  refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
+  let embedUrl = refUrl;
+
+  // const urlMatch = embedUrl.match(regex);
+  // embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
+  if (embedUrl.includes('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
+  if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
+  // Others
+  if (embedUrl.includes('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
+  if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
+  if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
+  if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
+  const embedDoc = () => {
+    insertEmbed(editor, {
+      url: embedUrl
+    }, 'embed');
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
     children: [/*#__PURE__*/_jsx("a", {
@@ -28,6 +49,9 @@ const Link = ({
         href: element.href,
         target: element.target,
         children: element.href
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: () => embedDoc(editor),
+        children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
       }), /*#__PURE__*/_jsx("button", {
         onClick: () => removeLink(editor),
         children: /*#__PURE__*/_jsx("img", {

package/dist/Editor/Toolbar/Toolbar.js

@@ -23,6 +23,7 @@ import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import FormButton from "../Elements/Form/FormButton.js";
 import Text from "./FormatTools/Text";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -162,6 +163,11 @@ const Toolbar = props => {
               editor: editor,
               customProps: customProps
             }, element.id);
+          case "icon-text":
+            return /*#__PURE__*/_jsx(InlineIconButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -154,5 +154,11 @@ const toolbarGroups = [[{
 }, {
   id: 38,
   type: "form"
-}]];
+}
+// {
+//   id: 39,
+//   type: "icon-text",
+// },
+]];
+
 export default toolbarGroups;

package/dist/Editor/common/ColorPickerButton.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
-import ColorPicker from "react-best-gradient-color-picker";
+// import ColorPicker from "react-best-gradient-color-picker";
+import ColorPickerTool from "react-gcolor-picker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,6 +36,14 @@ const ColorPickerButton = props => {
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "center",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "center",
+        horizontal: "center"
+      },
       onClose: handleClose,
       sx: {
         "& .MuiPaper-root": {
@@ -47,7 +56,8 @@ const ColorPickerButton = props => {
         children: /*#__PURE__*/_jsxs(Grid, {
           item: true,
           xs: 12,
-          children: [/*#__PURE__*/_jsx(ColorPicker, {
+          children: [/*#__PURE__*/_jsx(ColorPickerTool, {
+            gradient: true,
             value: color,
             onChange: setColor
           }), /*#__PURE__*/_jsxs("div", {

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

@@ -83,12 +83,39 @@ const buttonStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

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

@@ -1,4 +1,28 @@
 const chipTextStyle = [{
+  tab: "Icon",
+  value: "icon",
+  fields: [{
+    label: "Font Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
+  }, {
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
+  }]
+}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const fieldStyle = [{
   tab: "General",
   value: "general",
@@ -30,12 +31,39 @@ const fieldStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -72,7 +72,7 @@ const Color = props => {
           color: "textSecondary",
           sx: {
             fontSize: "14px",
-            marginBottom: '5px'
+            marginBottom: "5px"
           },
           children: label
         }), /*#__PURE__*/_jsx(TextField, {

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

@@ -30,6 +30,11 @@ const formButtonStyle = [{
     key: "textAlign",
     type: "textAlign",
     placeholder: "16px or 1em"
+  }, {
+    label: "Full Width",
+    key: "fullWidth",
+    type: "selectBox",
+    placeholder: "Set Button Width to full"
   }]
 }, {
   tab: "Position",