@flozy/editor 1.6.2 → 1.6.4

package/dist/Editor/CommonEditor.js

@@ -90,7 +90,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     footer,
     needLayout = true,
     CHARACTERS = [],
-    editorClass
+    editorClass,
+    fixedWidth = "60%",
+    fullWidth = "80%"
   } = otherProps || {};
   const [drag, setDrag] = useState(null);
   const classes = editorStyles({
@@ -451,14 +453,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   className: "scroll-area",
                   children: /*#__PURE__*/_jsxs("div", {
                     ref: editorWrapper,
-                    className: `editor-wrapper`,
+                    className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
                     style: {
                       backgroundColor: pageColor || "#FFF",
                       paddingLeft: `${bannerSpacing?.left || 12}px`,
                       paddingRight: `${bannerSpacing?.right || 12}px`,
                       paddingTop: `${bannerSpacing?.top}px`,
                       paddingBottom: `${bannerSpacing?.bottom}px`,
-                      width: !pageWidth || pageWidth === "fixed" ? "60%" : "80%",
+                      width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                       // width: viewport.w ? `${viewport.w}px` : "100%",
                       height: viewport.h ? `${viewport.h}px` : `100%`,
                       alignSelf: "center",

package/dist/Editor/Editor.css

@@ -176,35 +176,23 @@ blockquote {
 
 .accordion-title {
   position: relative;
-  background-color: #ccc;
+  background-color: #FFF;
   display: flex;
   align-items: center;
 }
 
 .accordion-content {
-  padding-left: 32px;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  padding-left: 13px;
+  background-color: #FFF;
+  border-left: 1px solid #ccc;
+  margin-left: 14px;
 }
 
 .accordion-summary-container {
   padding: 8px 0px;
   margin: 0px;
   position: relative;
-  padding-left: 16px;
-}
-
-.accordion-summary-collapse-btn {
-  width: 32px;
-  height: 32px;
-  z-index: 1;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 12px;
-  margin-right: 12px;
-  position: relative;
+  padding-left: 8px;
 }
 
 .accordion-details-container {

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

@@ -1,12 +1,11 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -26,7 +25,6 @@ const Accordion = props => {
   const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
-    btnBg,
     bgColor
   } = element;
   const onToggle = () => {
@@ -37,7 +35,7 @@ const Accordion = props => {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
-        top: "-42px",
+        top: "-32px",
         left: "0px",
         display: "flex",
         width: "fit-content"
@@ -95,15 +93,20 @@ const Accordion = props => {
       style: {
         backgroundColor: bgColor
       },
-      children: [/*#__PURE__*/_jsx("button", {
+      children: [/*#__PURE__*/_jsx(IconButton, {
         className: "accordion-summary-collapse-btn",
-        contentEditable: false,
         onClick: onToggle,
-        style: {
-          backgroundColor: btnBg,
-          color: textColor
+        contentEditable: false,
+        sx: {
+          "& svg": {
+            fill: textColor
+          }
         },
-        children: toggle ? /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}) : /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+        children: !toggle ? /*#__PURE__*/_jsx(Icon, {
+          icon: "accordionArrow"
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: "accordionArrowDown"
+        })
       }), children[0]]
     }), /*#__PURE__*/_jsx("div", {
       className: "accordion-content",

package/dist/Editor/Elements/Table/DeleteCellIcon.js

@@ -12,12 +12,12 @@ const DeleteCell = () => {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M20 16V20L4 20V4H20V8H18.5V5.5H15V18.5L18.5 18.5V16H20ZM5.5 16.5V18.5H8.5V16.5L5.5 16.5ZM10 16.5V18.5L13.5 18.5V16.5L10 16.5ZM13.5 8.01957V5.5H10V8.01958L13.5 8.01957ZM8.5 8.01958V5.5H5.5V8.01959L8.5 8.01958ZM8.5 9.51958L5.5 9.51959V11.5L8.5 11.5V9.51958ZM8.5 13L5.5 13V15L8.5 15V13ZM10 13V15L13.5 15V13L10 13ZM10 11.5L13.5 11.5V9.51957L10 9.51958V11.5Z",
-      fill: "#1F2328"
+      fill: "#64748b"
     }), /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M18.7176 13.0606L19.9373 14.2803L20.9979 13.2197L19.7782 12L20.9979 10.7803L19.9372 9.71967L18.7176 10.9393L17.4979 9.71968L16.4373 10.7803L17.6569 12L16.4373 13.2196L17.4979 14.2803L18.7176 13.0606Z",
-      fill: "#1F2328"
+      fill: "#64748b"
     })]
   });
 };

package/dist/Editor/Elements/Table/DeleteRowIcon.js

@@ -12,12 +12,12 @@ const DeleteCell = () => {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M20 4H4V20H8V18.5H5.5V13H18.5V18.5H16V20H20V4ZM5.5 8V5.5H8.5V8H5.5ZM10 8V5.5H14L13.9999 8H10ZM15.4999 8L15.5 5.5H18.5V8H15.4999ZM15.4999 9.5H18.5V11.5H15.4998L15.4999 9.5ZM8.5 11.5H5.5V9.5H8.5V11.5ZM10 11.5V9.5H13.9999L13.9998 11.5H10Z",
-      fill: "#1F2328"
+      fill: "#64748b"
     }), /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M12 18.7804L13.2197 20.0001L14.2803 18.9395L13.0606 17.7197L14.2802 16.5001L13.2196 15.4395L12 16.6591L10.7803 15.4395L9.71968 16.5001L10.9393 17.7197L9.71967 18.9394L10.7803 20.0001L12 18.7804Z",
-      fill: "#1F2328"
+      fill: "#64748b"
     })]
   });
 };

package/dist/Editor/Elements/Table/Table.js

@@ -7,7 +7,6 @@ import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
 import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import SettingsIcon from "@mui/icons-material/Settings";
 import DeleteCellIcon from "./DeleteCellIcon";

package/dist/Editor/Styles/EditorStyles.js

@@ -12,7 +12,6 @@ const editorStyles = ({
     overflow: "auto",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "#cccccc2b",
     "& .scroll-area": {
       display: "flex",
       justifyContent: "center",
@@ -44,6 +43,9 @@ const editorStyles = ({
           stroke: "rgb(100, 116, 139);"
         }
       }
+    },
+    "& .accordion-summary-collapse-btn": {
+      padding: "4px"
     }
   }
 });

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

@@ -15,6 +15,9 @@ const AddElements = props => {
     container: true,
     sx: classes.textFormatWrapper,
     spacing: 2,
+    style: {
+      margin: 0
+    },
     children: elements.map(m => {
       return /*#__PURE__*/_jsx(Grid, {
         item: true,

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

@@ -17,6 +17,10 @@ const PopperHeader = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 2,
+    className: "headerContainer",
+    style: {
+      paddingTop: "2px"
+    },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

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

@@ -24,6 +24,7 @@ const usePopupStyle = () => ({
         width: "100%"
       }
     },
+    "& .headerContainer": {},
     "& .textSettingHeader": {
       borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",

package/dist/Editor/common/Icon.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
 import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
-import { FaSuperscript, FaSubscript, FaLink } from "react-icons/fa";
+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 } from "react-icons/io";
+import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
 import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
@@ -135,7 +135,8 @@ const iconList = {
     size: 20
   }),
   emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
-    size: 20
+    size: 20,
+    fill: "#64748B"
   }),
   grid: /*#__PURE__*/_jsx(GridIcon, {}),
   accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
@@ -166,13 +167,20 @@ const iconList = {
   }),
   embed: /*#__PURE__*/_jsx(LinkIcon, {}),
   topbanner: /*#__PURE__*/_jsx(IoIosImage, {
-    size: 20
+    size: 20,
+    fill: "#64748B"
   }),
   fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
     size: 20
   }),
   media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
     size: 20
+  }),
+  accordionArrow: /*#__PURE__*/_jsx(IoMdArrowDroprightCircle, {
+    size: 20
+  }),
+  accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
+    size: 20
   })
 };
 const Icon = props => {

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle } from "@mui/material";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
@@ -39,8 +39,16 @@ const ImageSelector = props => {
     open: open,
     onClose: onClose,
     fullWidth: true,
-    children: [/*#__PURE__*/_jsxs(DialogTitle, {
-      children: ["Add ", title]
+    sx: classes.dialogWrapper,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body1",
+        sx: {
+          fontSize: "16px",
+          fontWeight: 600
+        },
+        children: ["Add ", title]
+      })
     }), /*#__PURE__*/_jsx(DialogContent, {
       style: {
         background: "#F0F5FA",
@@ -101,11 +109,23 @@ const ImageSelector = props => {
         })]
       })
     }), /*#__PURE__*/_jsxs(DialogActions, {
+      sx: {
+        p: 2
+      },
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: onClose,
+        variant: "outlined",
+        color: "secondary",
+        className: "secondaryBtn",
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: onSave,
+        variant: "contained",
+        color: "primary",
+        className: " primaryBtn",
+        sx: {
+          ml: 0
+        },
         children: "Save"
       })]
     })]

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

@@ -36,6 +36,32 @@ const ImageSelectorStyles = () => ({
     "& .MuiFormHelperText-root": {
       marginLeft: "0px"
     }
+  },
+  dialogWrapper: {
+    "& .primaryBtn": {
+      background: "#2563eb !important",
+      boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
+      borderRadius: "8px !important",
+      height: "28px !important",
+      fontWeight: "600 !important",
+      fontSize: "12px !important",
+      color: "#ffffff !important",
+      border: "1px solid #2563eb !important",
+      width: "auto !important",
+      marginLeft: "0px !important"
+    },
+    "& .secondaryBtn": {
+      background: "#ffffff !important",
+      boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
+      borderRadius: "8px !important",
+      height: "28px !important",
+      fontWeight: "600 !important",
+      fontSize: "12px !important",
+      color: "#2563eb !important",
+      border: "1px solid #2563eb !important",
+      width: "auto !important",
+      marginRight: "8px !important"
+    }
   }
 });
 export default ImageSelectorStyles;

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

@@ -21,7 +21,8 @@ const ElementListCard = props => {
     children: /*#__PURE__*/_jsxs(Card, {
       sx: {
         display: "flex",
-        width: "324px",
+        width: "100%",
+        maxWidth: "324px",
         justifyContent: "start",
         alignItems: "center",
         background: "transparent",

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

@@ -18,7 +18,8 @@ const MentionsListCard = props => {
   return /*#__PURE__*/_jsxs(Card, {
     sx: {
       display: "flex",
-      width: "324px",
+      width: "100%",
+      maxWidth: "324px",
       justifyContent: "start",
       alignItems: "center",
       background: "transparent",

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

@@ -6,10 +6,6 @@ const accordionTitleBtnStyle = [{
     key: "textColor",
     type: "color",
     needPreview: true
-  }, {
-    label: "Button",
-    key: "btnBg",
-    type: "color"
   }, {
     label: "Background Color",
     key: "bgColor",

package/dist/Editor/plugins/withLayout.js

@@ -28,6 +28,7 @@ const withLayout = editor => {
           at: path.concat(1)
         });
       }
+      let prevType = "";
       for (const [child, childPath] of Node.children(editor, path)) {
         let type = "";
         const slateIndex = childPath[0];
@@ -43,11 +44,12 @@ const withLayout = editor => {
         };
         switch (slateIndex) {
           case 0:
-            type = "title";
+            type = child.type === "topbanner" ? "topbanner" : "title";
+            prevType = type;
             enforceType(type);
             break;
           case 1:
-            type = "paragraph";
+            type = prevType === "topbanner" ? "title" : "paragraph";
             enforceType(type);
             break;
           default:

package/dist/Editor/utils/accordion.js

@@ -1,4 +1,5 @@
 import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
 export const insertAccordion = editor => {
   const accordion = {
     type: "accordion",
@@ -7,7 +8,7 @@ export const insertAccordion = editor => {
       children: [{
         type: "paragraph",
         children: [{
-          text: "Accordion Header"
+          text: ""
         }]
       }]
     }, {
@@ -15,11 +16,12 @@ export const insertAccordion = editor => {
       children: [{
         type: "paragraph",
         children: [{
-          text: "Accordion Content"
+          text: ""
         }]
       }]
     }]
   };
   Transforms.insertNodes(editor, accordion);
   Transforms.move(editor);
+  insertNewLine(editor);
 };

package/package.json

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