@flozy/editor 1.7.6 → 1.7.8

package/dist/Editor/CommonEditor.js

@@ -25,10 +25,10 @@ import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
+import DragHandle from "./common/DnD/DragHandle";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
-import useFormat from "./utils/customHooks/useFormat";
 import useElement from "./utils/customHooks/useElement";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -128,7 +128,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF")
   });
   const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
-  console.log(editor.selection);
   useEffect(() => {
     setValue(draftToSlate({
       data: content

package/dist/Editor/Editor.css

@@ -397,6 +397,7 @@ blockquote {
 
 .empty-carousel-wrapper .carousel-item-inner {
   width: 100%;
+  position: relative;
 }
 
 .editor-chip-text {

package/dist/Editor/Elements/Accordion/AccordionDetails.js

@@ -9,8 +9,7 @@ const AccordionDetails = props => {
     className: `accordion-details-container`,
     ...attributes,
     style: {
-      height: "auto",
-      overflow: "hidden"
+      height: "auto"
     },
     children: children
   });

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

@@ -114,20 +114,20 @@ const EditorButton = props => {
           onClick: onMenuClick("edit"),
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsxs(Tooltip, {
+      }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Open Link",
         arrow: true,
-        children: [/*#__PURE__*/_jsx(IconButton, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onMenuClick("open"),
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Delete",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMenuClick("delete"),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
-          })
-        })]
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("delete"),
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -150,15 +150,14 @@ const EditorButton = props => {
     className: "editor-btn-wrapper",
     ...attributes,
     style: {
-      display: "inline",
       textAlign: textAlign || "left"
     },
+    contentEditable: false,
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
       style: {
         display: "inline"
       },
-      contentEditable: false,
       children: /*#__PURE__*/_jsxs(Box, {
         component: "button",
         sx: {

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

@@ -130,6 +130,7 @@ const Carousel = props => {
         ...settings,
         children: children.map((m, i) => {
           return /*#__PURE__*/_jsx("div", {
+            className: "item-sc",
             children: m
           }, i);
         })

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

@@ -1,16 +1,58 @@
 import React from "react";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { Tooltip, IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const CarouselItem = props => {
   const {
+    element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const onMenuClick = val => () => {
+    switch (val) {
+      case "delete":
+        Transforms.removeNodes(editor, {
+          at: [...path]
+        });
+        return;
+      default:
+        return;
+    }
+  };
+  const Toolbar = () => {
+    return !readOnly ? /*#__PURE__*/_jsx("div", {
+      className: "element-toolbar hr",
+      style: {
+        top: "0px"
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Slide",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("delete"),
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })
+    }) : null;
+  };
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "carousel-item-inner",
-      children: children
+      style: {
+        minHeight: "50px"
+      },
+      children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });
 };

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

@@ -8,12 +8,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
-    a.push(c);
+    if (c.length > 0) {
+      a.push(c);
+    }
     c = [];
   }
   c.push(b);
   return a;
-}, []).sort((a, b) => b.length - a.length);
+}, []);
 const SingleColorButton = ({
   crs,
   index,
@@ -77,6 +79,9 @@ export const AllColors = props => {
         sx: classes.allColorInner,
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
+          style: {
+            padding: "8px"
+          },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {
               id: `pi_${id}`,

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

@@ -17,11 +17,11 @@ const ColorPickerStyles = () => ({
       "&:before": {
         content: '" "',
         position: "absolute",
-        top: "-5px",
-        left: "-5px",
+        top: "-4px",
+        left: "-4px",
         width: "calc(100% + 4px)",
         height: "calc(100% + 4px)",
-        border: "3px solid #2563EB",
+        border: "2px solid #2563EB",
         borderRadius: "50%"
       }
     }

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

@@ -1 +1 @@
-export const colors = ["#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E", "#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)"];
+export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"];

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

@@ -43,7 +43,7 @@ const Link = ({
     setLinkData({
       name: Node.string(element),
       url: element?.href || "",
-      showInNewTab: true
+      showInNewTab: element?.showInNewTab
     });
     setShowInput(true);
   };

package/dist/Editor/Elements/List/CheckListButton.js

@@ -15,9 +15,9 @@ const CheckListButton = props => {
     children: /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Check List",
       icon: /*#__PURE__*/_jsx(Icon, {
-        icon: "checkList"
+        icon: "check-list-item"
       }),
-      onClick: handleClick("checkList")
+      onClick: handleClick("check-list-item")
     })
   });
 };

package/dist/Editor/Elements/SimpleText.js

@@ -18,7 +18,7 @@ const SimpleTextStyle = ({
       zIndex: -1,
       left: "0px",
       paddingLeft: "4px",
-      top: 0,
+      top: "-1px",
       bottom: 0,
       margin: "auto",
       pointerEvents: "none",

package/dist/Editor/Styles/EditorStyles.js

@@ -99,7 +99,7 @@ const editorStyles = ({
             width: "fit-content"
           }
         },
-        "&:before": {
+        "&.hselect:before": {
           display: "block"
         }
       },
@@ -116,7 +116,8 @@ const editorStyles = ({
         height: "calc(100% - 2px)",
         left: 0,
         top: 0,
-        border: "1px solid #2563eb",
+        border: "1px solid transparent",
+        background: "rgba(0,0,0,0.05)",
         pointerEvents: "none",
         display: "none"
       }
@@ -153,6 +154,19 @@ const editorStyles = ({
           height: "20px"
         }
       }
+    },
+    "& .tools-drawer": {
+      zIndex: 1300
+    },
+    "& .section-tw": {
+      "& button": {
+        padding: "2px",
+        borderRadius: "0px",
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        }
+      }
     }
   }
 });

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -75,9 +75,6 @@ const MiniToolbar = props => {
       sx: popupStyles.popupWrapper,
       className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
       fullScreen: fullScreen,
-      style: {
-        zIndex: 1002
-      },
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
         style: {

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,7 +1,7 @@
 const usePopupStyle = () => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
-    zIndex: 1002,
+    zIndex: 1300,
     marginBottom: "12px !important",
     border: "1px solid #E0E0E0",
     borderRadius: "10px",
@@ -195,7 +195,6 @@ const usePopupStyle = () => ({
   allColor: {},
   allColorInner: {
     "& .buttonsWrpr": {
-      paddingLeft: "8px",
       "& button": {
         border: "1px solid #ccc",
         margin: "4px",
@@ -217,8 +216,8 @@ const usePopupStyle = () => ({
     }
   },
   defaultBtn: {
-    color: '#0F172A',
-    textTransform: 'none'
+    color: "#0F172A",
+    textTransform: "none"
   }
 });
 export default usePopupStyle;

package/dist/Editor/common/DnD/DragHandle.js

@@ -7,11 +7,10 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne"];
 const DragHandleStyle = () => ({
   root: {
     position: "relative",
-    paddingLeft: "20px",
     "&:hover": {
       "& > .dh-para:first-child": {
         opacity: 1
@@ -73,9 +72,15 @@ const DragHandle = props => {
   } = element;
   useEffect(() => {
     if (moved) {
-      Transforms.removeNodes(editor, {
-        at: path
-      });
+      const upPath = ReactEditor.findPath(editor, element);
+      try {
+        alert(upPath);
+        Transforms.removeNodes(editor, {
+          at: upPath
+        });
+      } catch (err) {
+        console.log(err, upPath);
+      }
     }
   }, [moved]);
   const handleOnDrag = isDragging => {

package/dist/Editor/common/DnD/index.js

@@ -21,8 +21,8 @@ const DragAndDrop = ({
         active,
         over
       } = e;
-      const fromPath = active.id.split("_")[1].split("|");
-      const toPath = over.id.split("_")[1].split("|");
+      const fromPath = active.id.split("_")[1].split("|").map(m => parseInt(m));
+      const toPath = over.id.split("_")[1].split("|").map(m => parseInt(m));
       const toCloneNode = JSON.stringify(Node.get(editor, fromPath));
       // set moved node delete
       Transforms.setNodes(editor, {

package/dist/Editor/common/Icon.js

@@ -1,14 +1,15 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia } from "react-icons/md";
 import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
+import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
 import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -162,7 +163,7 @@ const iconList = {
   addRow: /*#__PURE__*/_jsx(FcAddRow, {
     size: 20
   }),
-  checkList: /*#__PURE__*/_jsx(CheckboxIcon, {
+  "check-list-item": /*#__PURE__*/_jsx(CheckboxIcon, {
     size: 20
   }),
   embed: /*#__PURE__*/_jsx(LinkIcon, {}),
@@ -187,6 +188,8 @@ const Icon = props => {
   const {
     icon
   } = props;
-  return iconList[icon];
+  return iconList[icon] ? iconList[icon] : /*#__PURE__*/_jsxs("div", {
+    children: ["dummy ", icon]
+  });
 };
 export default Icon;

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -1,7 +1,7 @@
 const usePopupStyles = () => ({
   root: {
     position: "absolute",
-    zIndex: 1000,
+    zIndex: 1300,
     background: "white",
     borderRadius: "10px",
     padding: "0px",

package/dist/Editor/common/MentionsPopup/index.js

@@ -119,6 +119,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     disablePortal: false,
     sx: classes.root,
     placement: "bottom-start",
+    className: "cmd-wrapper",
     children: /*#__PURE__*/_jsx(Paper, {
       sx: classes.papper,
       children: chars.map(renderList)

package/dist/Editor/common/Section/index.js

@@ -47,8 +47,13 @@ const Section = props => {
     setOpenSettings(true);
   };
   const Toolbar = () => {
-    return !readOnly ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar ss hr",
+    return !readOnly ? /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "element-toolbar ss hr section-tw",
+      style: {
+        left: "20px",
+        top: "0px"
+      },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -83,15 +88,15 @@ const Section = props => {
   } : {};
   return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
     component: "section",
-    className: "ed-section-wrapper",
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
     style: {
       position: "relative",
       background: sectionBgColor,
       ...sectionBgImage,
       paddingLeft: `${ssleft}px`,
       paddingRight: `${ssright}px`,
-      paddingTop: `${sstop}px`,
-      paddingBottom: `${ssbottom}px`,
+      paddingTop: `${sstop || 2}px`,
+      paddingBottom: `${ssbottom || 2}px`,
       borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
       flexDirection: flexDirection || "column",
       alignItems: horizantal,

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

@@ -75,7 +75,7 @@ const ELEMENTS_LIST = [{
   desc: "",
   group: "List",
   icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "checkList"
+    icon: "check-list-item"
   }),
   onInsert: editor => toggleBlock(editor, "check-list-item", false)
 }, {

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

@@ -28,7 +28,7 @@ const buttonStyle = [{
     width: 5,
     placeholder: "16px or 1em"
   }, {
-    label: "Text Align",
+    label: "Alignment",
     key: "textAlign",
     type: "textAlign",
     placeholder: "16px or 1em"
@@ -58,14 +58,6 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Alignment",
-    key: "alignment",
-    type: "alignment"
-  }]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",

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

@@ -10,7 +10,8 @@ const TextAlign = props => {
     onChange
   } = props;
   const {
-    key
+    key,
+    label
   } = data;
   const handleChange = e => {
     onChange({
@@ -30,7 +31,7 @@ const TextAlign = props => {
             fontWeight: 500,
             fontSize: "14px"
           },
-          children: "Text Alignment"
+          children: label || "Text Alignment"
         })
       }), /*#__PURE__*/_jsxs(RadioGroup, {
         row: true,

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

@@ -83,6 +83,9 @@ const StyleBuilder = props => {
     className: ` dialogComp tools-drawer`,
     anchor: "right",
     onClose: onClose,
+    style: {
+      zIndex: "1300"
+    },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -287,7 +287,8 @@ export const getBlock = props => {
           background: element?.bgColor || "none",
           padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
-          margin: `${element?.bgColor ? "16px" : "0px"} 0px`
+          margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
+          width: element?.bgColor ? "calc(100% - 16px)" : "100%"
         },
         children: children
       });
@@ -319,7 +320,8 @@ export const getBlock = props => {
           display: "flex",
           alignItems: "flex-end",
           listStylePosition: "inside",
-          flexDirection: "column"
+          flexDirection: "column",
+          textAlign: "right"
         },
         ...attributes,
         ...element.attr,
@@ -478,10 +480,19 @@ export const getBlock = props => {
   }
 };
 export const getQueryStrings = urlString => {
-  const newUrl = new URL(urlString);
-  var youCode = newUrl.searchParams.get("v");
-  if (!youCode) {
-    youCode = newUrl.pathname.replace("/", "");
+  try {
+    if (urlString) {
+      const newUrl = new URL(urlString);
+      var youCode = newUrl.searchParams.get("v");
+      if (!youCode) {
+        youCode = newUrl.pathname.replace("/", "");
+      }
+      return `https://www.youtube.com/embed/${youCode}`;
+    } else {
+      return urlString;
+    }
+  } catch (err) {
+    console.log(err);
+    return urlString;
   }
-  return `https://www.youtube.com/embed/${youCode}`;
 };

package/dist/Editor/utils/button.js

@@ -1,4 +1,5 @@
 import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
 export const insertButton = editor => {
   const button = {
     type: "button",
@@ -26,4 +27,5 @@ export const insertButton = editor => {
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);
+  insertNewLine(editor);
 };

package/dist/Editor/utils/events.js

@@ -110,7 +110,7 @@ export const escapeEvent = props => {
     const {
       editor
     } = props;
-    const list_types = ["orderedList", "unorderedList", "checkList"];
+    const list_types = ["orderedList", "unorderedList", "check-list-item"];
     const parentPath = Path.ancestors(editor.selection.anchor.path);
     const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
     if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {

package/package.json

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