@flozy/editor 1.7.2 → 1.7.4

package/dist/Editor/Editor.css

@@ -136,9 +136,14 @@ blockquote {
   z-index: 1000;
 }
 
+.element-toolbar a {
+  margin-right: 4px;
+}
+
 .grid-container-toolbar button,
 .grid-item-toolbar button,
-.element-toolbar button {
+.element-toolbar button,
+.element-toolbar a {
   border-radius: 10px;
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
@@ -148,6 +153,7 @@ blockquote {
   padding: 6px;
 }
 .element-toolbar button svg,
+.element-toolbar a svg,
 .grid-container-toolbar button svg,
 .grid-item-toolbar button svg {
   width: 16px;
@@ -156,7 +162,8 @@ blockquote {
 
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,
-.element-toolbar button:hover {
+.element-toolbar button:hover,
+.element-toolbar a:hover {
   background-color: #ffffff;
   color: #2684ff;
   border: 1px solid #2684ff;
@@ -418,7 +425,6 @@ blockquote {
   background: #eee !important;
   color: #ccc !important;
   border: 1px solid #ccc !important;
-
 }
 
 .MuiButton-root.secondaryBtn {
@@ -486,7 +492,7 @@ blockquote {
   }
 
   .embed {
-    justify-content: center; 
+    justify-content: center;
   }
 
   .embed img {
@@ -830,8 +836,8 @@ blockquote {
   font-weight: 400;
   width: 200px;
   cursor: pointer;
-  color:#464646;
-  background-color: #FFF;
+  color: #464646;
+  background-color: #fff;
   padding: 4px 6px;
   border-radius: 12px;
   span {
@@ -870,38 +876,110 @@ blockquote {
 
 /* HTML: <div class="loader"></div> */
 .img-loader-wrapper {
-  width:28px;
+  width: 28px;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: #F10C49;
+  background: #f10c49;
   animation: l9 2s infinite;
 }
 @keyframes l9 {
-  0%   {box-shadow: 
-          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  12.5%   {box-shadow: 
-          0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  25%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  37.5% {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
-          0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  50%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  62.5% {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
-  75%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
-  87.5% {box-shadow: 
-          0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
-  100% {box-shadow: 
-          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-}
+  0% {
+    box-shadow:
+      0 -16px #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  12.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      16px 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  25% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      16px 0 #f4dd51,
+      calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  37.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 16px #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  50% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 16px #f4dd51,
+      calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  62.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
+      -16px 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  75% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      -16px 0 #f4dd51,
+      calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
+  }
+  87.5% {
+    box-shadow:
+      0 -16px #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
+  }
+  100% {
+    box-shadow:
+      0 -16px #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+}

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { useFocused, useSelected, useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import LinkOffIcon from "@mui/icons-material/LinkOff";
+import { insertDefaultEmbed } from "../../utils/embed";
+import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 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 = ({
@@ -17,22 +18,45 @@ const Link = ({
   const selected = useSelected();
   const focused = useFocused();
   let refUrl = element.href ? element.href : element.url;
-  refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
+  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/')
+  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/');
+  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');
+    insertDefaultEmbed(editor, "video", element.href);
+  };
+  const Toolbar = () => {
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px"
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          href: element.href,
+          target: element.target,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
@@ -42,24 +66,7 @@ const Link = ({
       ...element.attr,
       target: element.target,
       children: children
-    }), selected && focused && /*#__PURE__*/_jsxs("div", {
-      className: "af-link-popup",
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx("a", {
-        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", {
-          src: unlink,
-          alt: ""
-        })
-      })]
-    })]
+    }), /*#__PURE__*/_jsx(Toolbar, {})]
   });
 };
 export default Link;

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

@@ -61,98 +61,80 @@ const LinkButton = props => {
           icon: "link"
         })
       })
-    }), showInput && /*#__PURE__*/_jsx(Dialog, {
+    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
+      fullWidth: true,
       open: true,
       className: `dialogComp`,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        sx: {
-          p: 3
-        },
-        children: [/*#__PURE__*/_jsx(DialogTitle, {
-          sx: {
-            p: 0,
-            pb: 2
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between"
           },
-          children: /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h6",
+            className: "popupTitle",
+            color: "primary",
+            children: "LINK"
+          }), /*#__PURE__*/_jsx("div", {
             style: {
-              display: "flex",
-              justifyContent: "space-between"
+              display: "flex"
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              className: "popupTitle",
-              color: "primary",
-              children: "LINK"
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                display: "flex"
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: handleClose,
-                className: "close-popupbtn",
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
-              })
-            })]
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleClose,
+              className: "close-popupbtn",
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          style: {
+            paddingTop: "12px"
+          },
+          children: /*#__PURE__*/_jsx(TextField, {
+            size: "small",
+            fullWidth: true,
+            value: url,
+            placeholder: "https://google.com",
+            onChange: handleInputChange
           })
-        }), /*#__PURE__*/_jsx(DialogContent, {
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
           sx: {
-            p: 0
+            ml: 1
           },
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            spacing: 2,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              children: /*#__PURE__*/_jsx(TextField, {
-                size: "small",
-                fullWidth: true,
-                value: url,
-                placeholder: "https://google.com",
+          children: /*#__PURE__*/_jsx(FormControl, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(Checkbox, {
+                checked: showInNewTab,
                 onChange: handleInputChange
+              }),
+              label: /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                color: "primary",
+                sx: {
+                  pl: 1
+                },
+                children: "Open in new tab"
               })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              sx: {
-                ml: 1
-              },
-              children: /*#__PURE__*/_jsx(FormControl, {
-                children: /*#__PURE__*/_jsx(FormControlLabel, {
-                  control: /*#__PURE__*/_jsx(Checkbox, {
-                    checked: showInNewTab,
-                    onChange: handleInputChange
-                  }),
-                  label: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    color: "primary",
-                    sx: {
-                      pl: 1
-                    },
-                    children: "Open in new tab"
-                  })
-                })
-              })
-            })]
+            })
           })
-        }), /*#__PURE__*/_jsxs(DialogActions, {
-          sx: {
-            p: 0,
-            pt: 2
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: handleClose,
-            className: "secondaryBtn",
-            children: "Cancel"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: handleInsertLink,
-            className: "primaryBtn",
-            children: "Add"
-          })]
         })]
-      })
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          className: "secondaryBtn",
+          children: "Cancel"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleInsertLink,
+          className: "primaryBtn",
+          children: "Add"
+        })]
+      })]
     })]
   });
 };

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -105,12 +105,12 @@ const ImageSelector = props => {
       },
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: onClose,
-        variant: "outlined",
+        className: "secondaryBtn",
         sx: classes.closeBtn,
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: onSave,
-        variant: "contained",
+        className: "primaryBtn",
         sx: classes.saveBtn,
         children: "Save"
       })]

package/dist/Editor/common/ImageSelector/Options/AddLink.js

@@ -19,6 +19,9 @@ const AddLink = props => {
     item: true,
     xs: 12,
     className: "ims-right",
+    style: {
+      paddingTop: "8px"
+    },
     children: /*#__PURE__*/_jsx(TextField, {
       placeholder: `Add ${title} URL`,
       fullWidth: true,

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

@@ -13,9 +13,12 @@ const BannerSpacing = props => {
     onChange,
     elementProps
   } = props;
-  const {
+  let {
     lockSpacing
   } = elementProps || {};
+  if (lockSpacing === undefined) {
+    lockSpacing = true;
+  }
   const {
     key
   } = data;

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

@@ -13,10 +13,13 @@ const BorderRadius = props => {
     onChange,
     elementProps
   } = props;
-  const {
+  let {
     lockRadius,
     borderColor
   } = elementProps;
+  if (lockRadius === undefined) {
+    lockRadius = true;
+  }
   const {
     key
   } = data;

package/dist/Editor/utils/embed.js

@@ -35,6 +35,7 @@ export const insertEmbed = (editor, embedData, format) => {
     } = embedData;
     if (!url && images.length === 0) return;
     const embed = createEmbedNode(format, embedData);
+    console.log(embed);
     Transforms.insertNodes(editor, embed, {
       at: editor.selection.anchor.path
     });

package/package.json

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