@flozy/editor 1.1.2 → 1.1.5

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

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Menu, MenuItem } from "@mui/material";
+import ButtonPopup from "./ButtonPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EditorButton = props => {
+  const {
+    attributes,
+    element,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [edit, setEdit] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    label,
+    bgColor,
+    borderRadius,
+    bannerSpacing,
+    textColor,
+    url,
+    borderColor
+  } = element;
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const onClick = e => {
+    setAnchorEl(e.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const onMenuClick = val => () => {
+    switch (val) {
+      case "open":
+        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+        window.open(refUrl, "_blank").focus();
+        return;
+      case "edit":
+        setEdit(true);
+        return;
+      case "delete":
+        Transforms.removeNodes(editor, {
+          at: [path]
+        });
+        return;
+      default:
+        return;
+    }
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: [path]
+    });
+    setEdit(false);
+  };
+  const onClose = () => {
+    setEdit(false);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "editor-btn-wrapper",
+    ...attributes,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "editor-btn-wrapper-inner",
+      children: /*#__PURE__*/_jsx("button", {
+        contentEditable: false,
+        className: "editor-btn",
+        style: {
+          backgroundColor: bgColor || "rgb(30, 75, 122)",
+          border: borderColor ? `1px solid ${borderColor}` : "none",
+          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`,
+          color: `${textColor || "#FFFFFF"}`
+        },
+        onClick: onClick,
+        children: label || "My Button"
+      })
+    }), /*#__PURE__*/_jsxs(Menu, {
+      className: "editor-btn-options",
+      open: anchorEl !== null,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("edit"),
+        children: "Edit"
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("open"),
+        children: "Open"
+      }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("delete"),
+        children: "Delete"
+      })]
+    }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose
+    })]
+  });
+};
+export default EditorButton;

package/dist/Editor/Elements/Carousel/Arrows.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { IconButton } from "@mui/material";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PrevArrow = props => {
+  const {
+    className,
+    style,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsx(IconButton, {
+    className: className,
+    style: {
+      ...style,
+      position: "absolute"
+    },
+    onClick: onClick,
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+  });
+};
+export const NextArrow = props => {
+  const {
+    className,
+    style,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsx(IconButton, {
+    className: className,
+    style: {
+      ...style,
+      position: "absolute"
+    },
+    onClick: onClick,
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(ArrowForwardIosIcon, {})
+  });
+};

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Transforms, Path } from "slate";
+import { useSelected, useSlateStatic } from "slate-react";
+import Slider from "react-slick";
+import "./slick-theme.min.css";
+import "./slick.min.css";
+import { PrevArrow, NextArrow } from "./Arrows";
+import { carouselItem } from "../../utils/carouselItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Empty = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: "empty-carousel-wrapper",
+    children: children
+  });
+};
+const Carousel = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const [edit, setEdit] = useState(false);
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    nextArrow: /*#__PURE__*/_jsx(NextArrow, {}),
+    prevArrow: /*#__PURE__*/_jsx(PrevArrow, {})
+  };
+  const onAddSlide = () => {
+    const currentPath = editor.selection?.anchor?.path;
+    const ancestorsPath = Path.ancestors(currentPath, {
+      reverse: true
+    });
+    const insertPath = ancestorsPath[1];
+    if (insertPath) {
+      insertPath[insertPath.length - 1] = element.children.length;
+      Transforms.insertNodes(editor, [{
+        ...carouselItem()
+      }], {
+        at: insertPath
+      });
+    }
+  };
+  const onEdit = () => {
+    setEdit(!edit);
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsxs("div", {
+      className: "grid-container-toolbar",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx("button", {
+        onClick: onEdit,
+        children: "Edit"
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: onAddSlide,
+        children: "Add Slide"
+      })]
+    }) : null;
+  };
+  const CarouselWrapper = edit ? Slider : Empty;
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    style: {
+      padding: "32px",
+      backgroundColor: "#CCC",
+      position: "relative"
+    },
+    children: [/*#__PURE__*/_jsx(CarouselWrapper, {
+      ...settings,
+      children: children
+    }), /*#__PURE__*/_jsx(ToolBar, {})]
+  });
+};
+export default Carousel;

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { IconButton } from "@mui/material";
+import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
+import { insertCarousel } from "../../utils/carousel";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselButton = props => {
+  const {
+    editor
+  } = props;
+  const handleClick = () => {
+    insertCarousel(editor);
+  };
+  return /*#__PURE__*/_jsx(IconButton, {
+    title: "Carousel",
+    onClick: handleClick,
+    children: /*#__PURE__*/_jsx(ViewCarouselIcon, {})
+  });
+};
+export default CarouselButton;

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselItem = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ...attributes,
+    children: children
+  });
+};
+export default CarouselItem;

package/dist/Editor/Elements/Carousel/slick-theme.min.css

@@ -0,0 +1,143 @@
+.slick-dots,
+.slick-next,
+.slick-prev {
+  position: absolute;
+  display: block;
+  padding: 0 !important;
+}
+.slick-dots li button:before,
+.slick-next:before,
+.slick-prev:before {
+  font-family: slick;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.slick-loading .slick-list {
+  background: #fff;
+}
+.slick-next,
+.slick-prev {
+  font-size: 0;
+  line-height: 0;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  color: transparent;
+  border: none;
+  outline: 0;
+  margin: auto !important;
+}
+/* .slick-next:focus,
+.slick-next:hover,
+.slick-prev:focus,
+.slick-prev:hover {
+  color: transparent;
+  outline: 0;
+  background: 0 0;
+} */
+/* .slick-next:focus:before,
+.slick-next:hover:before,
+.slick-prev:focus:before,
+.slick-prev:hover:before {
+  opacity: 1;
+} */
+/* .slick-next.slick-disabled:before,
+.slick-prev.slick-disabled:before {
+  opacity: 0.25;
+} */
+/* .slick-next:before,
+.slick-prev:before {
+  font-size: 20px;
+  line-height: 1;
+  opacity: 0.75;
+  color: #fff;
+} */
+.slick-prev {
+  left: -25px;
+}
+[dir="rtl"] .slick-prev {
+  right: -25px;
+  left: auto;
+}
+/* .slick-prev:before {
+  content: "←";
+}
+.slick-next:before,
+[dir="rtl"] .slick-prev:before {
+  content: "→";
+} */
+.slick-next {
+  right: -25px;
+}
+[dir="rtl"] .slick-next {
+  right: auto;
+  left: -25px;
+}
+/* [dir="rtl"] .slick-next:before {
+  content: "←";
+} */
+.slick-dotted.slick-slider {
+  margin-bottom: 30px;
+}
+.slick-dots {
+  bottom: -25px;
+  width: 100%;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+}
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin: 0 5px;
+  padding: 0;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.25);
+  border-radius: 50%;
+}
+.slick-dots li button {
+  font-size: 0;
+  line-height: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+  padding: 5px;
+  cursor: pointer;
+  color: transparent;
+  border: 0;
+  outline: 0;
+  background: 0 0;
+}
+.slick-dots li button:focus,
+.slick-dots li button:hover {
+  outline: 0;
+}
+.slick-dots li button:focus:before,
+.slick-dots li button:hover:before {
+  opacity: 1;
+}
+.slick-dots li button:before {
+  font-size: 6px;
+  line-height: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  content: "•";
+  text-align: center;
+  opacity: 0.25;
+  color: #000;
+}
+.slick-dots li.slick-active button:before {
+  opacity: 0.75;
+  color: #000;
+}
+
+.slick-dots li.slick-active {
+  background-color: rgba(0,0,0,0.75);
+}

package/dist/Editor/Elements/Carousel/slick.min.css

@@ -0,0 +1,83 @@
+.slick-list,
+.slick-slider,
+.slick-track {
+  position: relative;
+  display: block;
+}
+.slick-loading .slick-slide,
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+.slick-slider {
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+.slick-list:focus {
+  outline: 0;
+}
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
+}
+.slick-slider .slick-list,
+.slick-slider .slick-track {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.slick-track {
+  top: 0;
+  left: 0;
+}
+.slick-track:after,
+.slick-track:before {
+  display: table;
+  content: "";
+}
+.slick-track:after {
+  clear: both;
+}
+.slick-slide {
+  display: none;
+  float: left;
+  height: 100%;
+  min-height: 1px;
+}
+[dir="rtl"] .slick-slide {
+  float: right;
+}
+.slick-slide img {
+  display: block;
+}
+.slick-slide.slick-loading img {
+  display: none;
+}
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+.slick-initialized .slick-slide {
+  display: block;
+}
+.slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+  display: none;
+}

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -62,7 +62,7 @@ const ColorPicker = ({
     setHexValue(newHex);
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "color-picker popup-wrapper",
+    className: "color-picker popup-wrapper1",
     ref: colorPickerRef,
     children: [/*#__PURE__*/_jsx("button", {
       style: {

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,14 +1,34 @@
 .embed{
     width: fit-content;
     position: relative;
-    margin-right: 20px;
+    margin: 0px;
 }
 .embed img,.embed iframe{
     width: 100%;
     height:100%;
 }
-.embed button{
+.embed button.resize{
     position: absolute;
     bottom: -6px;
     right: 0;
+}
+
+.image-text-wrapper {
+    padding: 0px;
+    margin: 0px;
+    left: 0px;
+    color: #fff;
+    font-weight: bold;
+    display: flex;
+    bottom: 0;
+    width: 100%;
+    flex-direction: column;
+}
+
+.image-text {
+    padding: 12px;
+    background-color: rgba(0,0,0,0.5);
+    margin: 0px;
+    color: #FFF;
+    font-weight: bold;
 }