@flozy/editor 1.7.4 → 1.7.6

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;

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

@@ -1,14 +1,10 @@
 import { useRef, useState } from "react";
-import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
-// styled,
-} from "@mui/material";
-// import { styled } from "@mui/material/styles";
-import CloseIcon from "@mui/icons-material/Close";
+import { Editor, Transforms } from "slate";
+import { IconButton, Tooltip } from "@mui/material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
-import { isBlockActive } from "../../utils/SlateUtilityFunctions";
-// import styled from "@emotion/styled";
+import { getBlockActive } from "../../utils/SlateUtilityFunctions";
+import LinkPopup from "./LinkPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
@@ -17,31 +13,45 @@ const LinkButton = props => {
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
-  const [url, setUrl] = useState("");
-  const [showInNewTab, setShowInNewTab] = useState(false);
+  const [linkData, setLinkData] = useState({
+    name: "",
+    url: "",
+    showInNewTab: true
+  });
   const [selection, setSelection] = useState();
+  const {
+    isActive,
+    props: blockProps
+  } = getBlockActive(editor, "link");
   const handleInsertLink = () => {
     Transforms.select(editor, selection);
     insertLink(editor, {
-      url,
-      showInNewTab
+      ...linkData
+    });
+    setLinkData({
+      name: "",
+      url: "",
+      showInNewTab: true
     });
-    setUrl("");
     setShowInput(false);
-    setShowInNewTab(false);
   };
   const toggleLink = () => {
     setSelection(editor.selection);
+    setLinkData({
+      name: Editor.string(editor, editor.selection),
+      url: blockProps?.href || "",
+      showInNewTab: true
+    });
     setShowInput(true);
   };
   const handleInputChange = ({
     target
   }) => {
-    if (target.type === "checkbox") {
-      setShowInNewTab(target.checked);
-    } else {
-      setUrl(target.value);
-    }
+    let val = target.type === "checkbox" ? target.checked : target.value;
+    setLinkData({
+      ...linkData,
+      [target.name]: val
+    });
   };
   const handleClose = () => {
     setShowInput(false);
@@ -53,90 +63,20 @@ const LinkButton = props => {
       title: "Link",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: showInput ? "clicked" : "",
-        active: isBlockActive(editor, "link") ? "active" : "",
+        className: `${showInput ? "clicked" : ""} ${isActive ? "btnActive" : ""}`,
         format: "link",
         onClick: toggleLink,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "link"
         })
       })
-    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
-      fullWidth: true,
-      open: true,
-      className: `dialogComp`,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between"
-          },
-          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, {})
-            })
-          })]
-        })
-      }), /*#__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(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, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: handleClose,
-          className: "secondaryBtn",
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleInsertLink,
-          className: "primaryBtn",
-          children: "Add"
-        })]
-      })]
+    }), /*#__PURE__*/_jsx(LinkPopup, {
+      open: showInput,
+      linkData: linkData,
+      handleClose: handleClose,
+      handleInputChange: handleInputChange,
+      handleInsertLink: handleInsertLink
     })]
   });
 };
-export default LinkButton;
-// export default styled(commonStyle)(LinkButton);
+export default LinkButton;