@flozy/editor 1.7.5 → 1.7.6

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

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
+import { IconButton, Tooltip, Box } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
-import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
+import { getEmbedURL } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -18,18 +19,16 @@ const Video = ({
   customProps
 }) => {
   const {
-    url,
     alt,
     alignment,
     bannerSpacing,
     borderRadius,
     borderWidth,
     borderColor,
-    borderStyle
+    borderStyle,
+    url
   } = element;
   const editor = useSlateStatic();
-  const selected = useSelected();
-  const focused = useFocused();
   const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
   const {
@@ -116,13 +115,53 @@ const Video = ({
   };
   const totalMinus = parseInt(left || 0) + parseInt(right || 0);
   const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
+  const embedURL = getEmbedURL(element);
+  const VideoContent = () => {
+    return resizing ? /*#__PURE__*/_jsx("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "2px dashed black",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "videoPlayer"
+      })
+    }) : /*#__PURE__*/_jsx("iframe", {
+      className: "embedd-iframe",
+      style: {
+        border: "none",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        left: "0px",
+        ...(gradientBorder(borderColor) || {}),
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid"
+      },
+      src: embedURL,
+      title: alt
+    });
+  };
+  const VideoPlaceholder = () => {
+    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+      component: "button",
+      className: "element-empty-btn",
+      onClick: onSettings,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "video"
+      }), "Embed Video or Other"]
+    }) : /*#__PURE__*/_jsx(VideoContent, {});
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover video",
     style: {
       display: "flex",
       width: `calc(100% - ${totalMinus}px)`,
-      boxShadow: selected && focused && "0 0 3px 3px lightgray",
       justifyContent: horizantal,
       alignContent: vertical
     },
@@ -139,39 +178,9 @@ const Video = ({
       style: {
         position: "relative",
         width: `${width}`,
-        height: `${size.height}px`
+        height: url ? `${size.height}px` : "auto"
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
-      // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
-      // So during resize replace the iframe with a simple div
-      resizing ? /*#__PURE__*/_jsx("div", {
-        style: {
-          width: "100%",
-          height: "100%",
-          border: "2px dashed black",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "videoPlayer"
-        })
-      }) : /*#__PURE__*/_jsx("iframe", {
-        className: "embedd-iframe",
-        style: {
-          border: "none",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          left: "0px",
-          ...(gradientBorder(borderColor) || {}),
-          borderWidth: borderWidth || "1px",
-          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-          borderStyle: borderStyle || "solid"
-        },
-        src: url,
-        title: alt
-      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"

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

@@ -14,7 +14,8 @@ const FormStyles = () => ({
       width: "95%",
       maxWidth: "95%",
       outline: "none",
-      padding: "12px"
+      padding: "12px",
+      resize: "none"
     },
     "& textarea:focus-visible": {
       outline: "none",
@@ -204,7 +205,7 @@ const FormStyles = () => ({
   },
   dialogFooter: {
     "&.MuiDialogActions-root": {
-      padding: "8px 24px"
+      padding: "12px 24px"
     },
     "& .secondaryBtn": {
       marginRight: "0px !important"

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

@@ -1,12 +1,11 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from "react";
-import { Transforms, Path, Node } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import React, { useState } from "react";
+import { Transforms, Path } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
-import TuneIcon from "@mui/icons-material/Tune";
 import { insertGrid } from "../../utils/grid";
 import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
 import GridPopup from "./GridPopup";
@@ -43,10 +42,6 @@ const Grid = props => {
     borderColor,
     borderStyle,
     borderRadius,
-    sectionBgColor,
-    sectionBackgroundImage,
-    sectionBannerSpacing,
-    sectionBorderRadius,
     gridSize
   } = element;
   const {
@@ -55,12 +50,6 @@ const Grid = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const {
-    left: ssleft,
-    top: sstop,
-    right: ssright,
-    bottom: ssbottom
-  } = sectionBannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -72,12 +61,6 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  const {
-    topLeft: ssTopLeft,
-    topRight: ssTopRight,
-    bottomLeft: ssBottomLeft,
-    bottomRight: ssBottomRight
-  } = sectionBorderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -108,9 +91,6 @@ const Grid = props => {
       });
     }
   };
-  const onSectionSettings = () => {
-    setOpenSettings("section");
-  };
   const onSettings = () => {
     setOpenSettings("grid");
   };
@@ -228,13 +208,6 @@ const Grid = props => {
       className: "grid-container-toolbar",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Section Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSectionSettings,
-          children: /*#__PURE__*/_jsx(TuneIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Grid Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -280,95 +253,75 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
-  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
-    backgroundImage: `url(${sectionBackgroundImage})`
-  } : {};
-  return /*#__PURE__*/_jsx("section", {
-    className: "section-wrapper-fluid",
+  return /*#__PURE__*/_jsxs(GridContainer, {
+    container: true,
+    className: `grid-container ${grid} has-hover element-root`,
+    ...attributes,
+    ...sectionId,
     style: {
-      display: "flex",
-      width: "100%",
-      background: sectionBgColor,
-      ...sectionBgImage,
-      backgroundSize: "cover",
-      justifyContent: "center",
-      alignItems: "center",
-      paddingLeft: `${ssleft}px`,
-      paddingRight: `${ssright}px`,
-      paddingTop: `${sstop}px`,
-      paddingBottom: `${ssbottom}px`,
-      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
+      background: bgColor,
+      alignContent: vertical,
+      ...bgImage,
+      borderColor: borderColor || "transparent",
+      borderWidth: borderWidth || "1px",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderStyle: borderStyle || "solid"
     },
-    "data-path": path.join(","),
-    children: /*#__PURE__*/_jsxs(GridContainer, {
-      container: true,
-      className: `grid-container ${grid} has-hover element-root`,
-      ...attributes,
-      ...sectionId,
+    "data-path": path.join(",")
+    // sx={{
+    //   width: `${((gridSize || 12) / 12) * 100}%`,
+    // }}
+    ,
+    children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
-        background: bgColor,
-        alignContent: vertical,
-        ...bgImage,
-        borderColor: borderColor || "transparent",
-        borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-        borderStyle: borderStyle || "solid"
+        position: "absolute",
+        pointerEvents: "none",
+        width: "100%",
+        height: "100%",
+        background: fgColor,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover"
+      }
+    }), !readOnly && /*#__PURE__*/_jsxs("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tr",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots bl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots br",
+        children: " "
+      }), /*#__PURE__*/_jsx(GridToolBar, {})]
+    }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null, /*#__PURE__*/_jsx(GridContainer, {
+      item: true,
+      xs: 12,
+      className: "grid-c-wrpr",
+      style: {
+        display: "flex",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`,
+        alignItems: vertical || "start",
+        justifyContent: horizantal || "start",
+        flexDirection: flexDirection || "row",
+        width: "100%"
       },
       "data-path": path.join(","),
-      sx: {
-        width: `${(gridSize || 8) / 12 * 100}%`
-      },
-      children: [fgColor && /*#__PURE__*/_jsx("div", {
-        style: {
-          position: "absolute",
-          pointerEvents: "none",
-          width: "100%",
-          height: "100%",
-          background: fgColor,
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "cover"
-        }
-      }), !readOnly && /*#__PURE__*/_jsxs("div", {
-        className: `element-selector ${selected ? "selected" : ""}`,
-        contentEditable: false,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots tl",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots tr",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots bl",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots br",
-          children: " "
-        }), /*#__PURE__*/_jsx(GridToolBar, {})]
-      }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
-        element: element,
-        onSave: onSave,
-        onClose: onClose,
-        onDelete: onDelete,
-        customProps: customProps
-      }) : null, /*#__PURE__*/_jsx(GridContainer, {
-        item: true,
-        xs: 12,
-        className: "grid-c-wrpr",
-        style: {
-          display: "flex",
-          paddingLeft: `${left}px`,
-          paddingRight: `${right}px`,
-          paddingTop: `${top}px`,
-          paddingBottom: `${bottom}px`,
-          alignItems: vertical || "start",
-          justifyContent: horizantal || "start",
-          flexDirection: flexDirection || "row",
-          width: "100%"
-        },
-        "data-path": path.join(","),
-        children: children
-      }), /*#__PURE__*/_jsx(NewLineButtons, {})]
-    })
+      children: children
+    }), /*#__PURE__*/_jsx(NewLineButtons, {})]
   });
 };
 export default Grid;

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

@@ -53,8 +53,6 @@ const GridItem = props => {
     bottomRight
   } = borderRadius || {};
   const editor = useSlateStatic();
-  // const selected = useSelected();
-  // const [selected, setSelected] = useState(false);
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -104,24 +102,11 @@ const GridItem = props => {
       });
     }
   };
-
-  // const onMouseOver = (e) => {
-  //   if (!readOnly) {
-  //     e.stopPropagation();
-  //     setSelected(true);
-  //   }
-  // };
-
-  // const onMouseLeave = (e) => {
-  //   if (!readOnly) {
-  //     e.stopPropagation();
-  //     setSelected(false);
-  //   }
-  // };
-
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Item, {
+    item: true,
+    xs: grid,
     component: "div",
-    className: `grid-item xs-${grid} element-root gi-top-wrpr`,
+    className: `grid-item xs-${grid} element-root gi-top-wrpr content-editable`,
     ...attributes,
     sx: {
       display: "flex",
@@ -143,10 +128,11 @@ const GridItem = props => {
       },
       height: "100%"
     },
-    "data-path": path.join(",")
-    // onMouseOver={onMouseOver}
-    // onMouseLeave={onMouseLeave}
-    ,
+    "data-path": path.join(","),
+    style: {
+      textAlign: element.alignment || "left"
+    },
+    placeholder: "Grid Item",
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,

package/dist/Editor/Elements/Grid/templates/default_grid.js

@@ -34,24 +34,6 @@ const default_grid = [{
           fontFamily: "PoppinsRegular",
           text: ""
         }]
-      }, {
-        type: "paragraph",
-        children: [{
-          type: "image",
-          url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-          images: [],
-          children: [{
-            text: " "
-          }],
-          size: {
-            width: 362.59375,
-            height: 207,
-            widthInPercent: 56.780034254954735
-          },
-          alignment: {
-            horizantal: "center"
-          }
-        }]
       }, {
         type: "paragraph",
         children: [{
@@ -85,11 +67,6 @@ const default_grid = [{
     children: [{
       type: "alignLeft",
       children: [{
-        type: "paragraph",
-        children: [{
-          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-        }]
-      }, {
         type: "paragraph",
         children: [{
           text: ""

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

@@ -1,11 +1,12 @@
-import React from "react";
-import { useFocused, useSelected, useSlateStatic } from "slate-react";
+import React, { useState } from "react";
+import { Node, Transforms } from "slate";
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
 import { IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
-import { insertDefaultEmbed } from "../../utils/embed";
-import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 import { removeLink } from "../../utils/link";
+import LinkPopup from "./LinkPopup";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,21 +18,46 @@ 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 = () => {
-    insertDefaultEmbed(editor, "video", element.href);
+  const [showInput, setShowInput] = useState(false);
+  const [linkData, setLinkData] = useState({
+    name: "",
+    url: "",
+    showInNewTab: true
+  });
+  const path = ReactEditor.findPath(editor, element);
+  const updateLink = () => {
+    Transforms.setNodes(editor, {
+      href: linkData?.url,
+      showInNewTab: linkData?.showInNewTab
+    }, {
+      at: path
+    });
+    setLinkData({
+      name: "",
+      url: "",
+      showInNewTab: true
+    });
+    setShowInput(false);
+  };
+  const onEditLink = () => {
+    setLinkData({
+      name: Node.string(element),
+      url: element?.href || "",
+      showInNewTab: true
+    });
+    setShowInput(true);
+  };
+  const handleInputChange = ({
+    target
+  }) => {
+    let val = target.type === "checkbox" ? target.checked : target.value;
+    setLinkData({
+      ...linkData,
+      [target.name]: val
+    });
+  };
+  const handleClose = () => {
+    setShowInput(false);
   };
   const Toolbar = () => {
     return selected && focused ? /*#__PURE__*/_jsxs("div", {
@@ -49,6 +75,12 @@ const Link = ({
           target: element.target,
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Remove",
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -66,7 +98,13 @@ const Link = ({
       ...element.attr,
       target: element.target,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {})]
+    }), /*#__PURE__*/_jsx(Toolbar, {}), /*#__PURE__*/_jsx(LinkPopup, {
+      open: showInput,
+      linkData: linkData,
+      handleClose: handleClose,
+      handleInputChange: handleInputChange,
+      handleInsertLink: updateLink
+    })]
   });
 };
 export default Link;