@flozy/editor 3.1.5 → 3.1.7

package/dist/Editor/Elements/Button/EditorButton.js

@@ -83,10 +83,6 @@ const EditorButton = props => {
       case "webAddress":
         const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
         props.component = "a";
-        props.tabIndex = 1;
-        props.onClick = () => {
-          return false;
-        };
         if (refUrl !== "Link") {
           props.href = refUrl;
         }
@@ -105,10 +101,6 @@ const EditorButton = props => {
         break;
       case "page":
         props.component = "a";
-        props.tabIndex = 1;
-        props.onClick = () => {
-          return false;
-        };
         const [page, section] = url.split("#");
         props.href = page === "home" ? `#${section}` : `/${url}`;
         if (openInNewTab) {
@@ -117,18 +109,10 @@ const EditorButton = props => {
         break;
       case "email":
         props.component = "a";
-        props.tabIndex = 1;
-        props.onClick = () => {
-          return false;
-        };
         props.href = `mailto:${url}`;
         break;
       case "phone":
         props.component = "a";
-        props.tabIndex = 1;
-        props.onClick = () => {
-          return false;
-        };
         props.href = `tel:${url}`;
         break;
       case "scrollTopOrBottom":
@@ -149,6 +133,18 @@ const EditorButton = props => {
       default:
         return {};
     }
+
+    // for iphone fix
+    if (props.component === "a") {
+      props.onTouchEnd = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(props.href, props.target);
+      };
+      props.onClick = () => {
+        return false;
+      };
+    }
     return props;
   };
   const buttonProps = handleLinkType(readOnly, openInNewTab);
@@ -175,7 +171,7 @@ const EditorButton = props => {
       className: "element-toolbar hr",
       style: {
         width: "max-content",
-        top: "-38px",
+        top: "-12px",
         alignItems: "center",
         cursor: "pointer"
       },
@@ -234,7 +230,7 @@ const EditorButton = props => {
       className: "editor-btn-wrapper-inner",
       sx: {
         display: {
-          lg: "inline",
+          lg: "inline-block",
           xs: xsHidden ? "none" : "inline-block"
         },
         "& .element-toolbar": {

package/dist/Editor/Elements/Embed/EmbedPopup.js

@@ -13,7 +13,7 @@ const EmbedPopup = props => {
     onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: format === "image" ? "Image" : "Embed",
+    title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
     type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Embed/Image.js

@@ -27,6 +27,7 @@ const Image = ({
     bgColor,
     borderColor,
     borderRadius,
+    borderWidth,
     boxShadow,
     width: oldWidth,
     xsHidden,
@@ -165,7 +166,9 @@ const Image = ({
         boxShadow: boxShadow || "none",
         height: objectFit ? "100%" : "auto",
         opacity: frame ? 0 : 1,
-        cursor: webAddress ? "pointer" : ""
+        cursor: webAddress ? "pointer" : "",
+        border: `1px solid ${borderColor}`,
+        borderWidth: borderWidth['borderWidth']
       },
       alt: alt,
       src: url,
@@ -207,8 +210,7 @@ const Image = ({
       },
       backgroundColor: bgColor,
       justifyContent: horizantal,
-      alignContent: vertical,
-      border: `1px solid ${borderColor}`
+      alignContent: vertical
     },
     ...element.attr,
     "data-path": path.join(","),

package/dist/Editor/Elements/Embed/Video.js

@@ -197,7 +197,7 @@ const Video = ({
       onSave: onSave,
       onClose: onClose,
       customProps: customProps,
-      format: "video",
+      format: element?.type ? element?.type : "video",
       onDelete: onDelete
     }) : null, /*#__PURE__*/_jsxs(Box, {
       component: "div",

package/dist/Editor/common/Shorthands/elements.js

@@ -114,6 +114,15 @@ const ELEMENTS_LIST = [{
     icon: "embed"
   }),
   onInsert: editor => insertDefaultEmbed(editor, "video", "")
+}, {
+  name: "Calendly",
+  desc: "",
+  group: "Media",
+  type: "embed",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "embed"
+  }),
+  onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
 }, {
   name: "Emoji",
   group: "Elements",

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

@@ -66,6 +66,14 @@ const embedImageStyle = [{
     key: "borderRadius",
     type: "borderRadius"
   }]
+}, {
+  tab: "Border width",
+  value: "borderWidth",
+  fields: [{
+    label: "Border width",
+    key: "borderWidth",
+    type: "borderWidth"
+  }]
 }, {
   tab: "Position",
   value: "position",

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { Grid, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const borderWidth = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const widthType = "px";
+  const wkey = "borderWidth";
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...(value || {}),
+        [e.target.name]: isNaN(e.target.value) ? "" : parseInt(e.target.value)
+      }
+    });
+  };
+  const onSizeType = cData => () => {
+    onChange({
+      [key]: {
+        ...(value || {}),
+        ...cData
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    style: {
+      marginBottom: "12px"
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "5px"
+      },
+      children: "Border Width"
+    }), /*#__PURE__*/_jsx(TextField, {
+      fullWidth: true,
+      name: wkey,
+      size: "small",
+      value: value ? value[wkey] : "1",
+      placeholder: "Border Width",
+      onChange: handleChange,
+      InputProps: {
+        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+          position: "end",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: widthType === "px" ? "active" : "",
+            size: "small",
+            onClick: onSizeType({
+              widthType: "px",
+              widthInPercent: null,
+              width: isNaN(value?.borderWidth) ? 1 : value?.borderWidth || 1
+            }),
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              children: "PX"
+            })
+          })
+        })
+      }
+    })]
+  });
+};
+export default borderWidth;

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

@@ -15,10 +15,12 @@ import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
 import FontSize from "./fontSize";
+import borderWidth from "./borderWidth";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
   borderRadius: BorderRadius,
+  borderWidth: borderWidth,
   color: Color,
   alignment: Alignment,
   backgroundImage: BackgroundImage,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -386,6 +386,10 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Video, {
         ...props
       });
+    case "calendly":
+      return /*#__PURE__*/_jsx(Video, {
+        ...props
+      });
     case "equation":
       return /*#__PURE__*/_jsx(Equation, {
         ...props

package/package.json

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