@flozy/editor 1.8.0 → 1.8.2

package/dist/Editor/CommonEditor.js

@@ -374,16 +374,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         transition: "all 0.3s",
                         minHeight: "87%"
                       },
-                      children: [/*#__PURE__*/_jsx(PopupTool, {
+                      children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                         onDrawerOpen: onDrawerOpen
-                      }), /*#__PURE__*/_jsx(Editable, {
+                      }) : null, /*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
                         decorate: decorators,
                         onKeyDown: onKeyDown
-                      }), /*#__PURE__*/_jsx(MentionsPopup, {
+                      }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
                         ref: mentionsRef,
                         mentions: mentions,
                         setMentions: setMentions,
@@ -392,7 +392,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         index: index,
                         chars: chars,
                         type: type
-                      })]
+                      }) : null]
                     })
                   }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,

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

@@ -34,6 +34,7 @@ const Carousel = props => {
   const editor = useSlateStatic();
   const [showOptions, setShowOptions] = useState(false);
   const [edit, setEdit] = useState(false);
+  const [refresh, setRefresh] = useState(new Date().getTime());
   const path = ReactEditor.findPath(editor, element);
   const settings = {
     dots: true,
@@ -41,9 +42,16 @@ const Carousel = props => {
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
-    nextArrow: /*#__PURE__*/_jsx(NextArrow, {}),
-    prevArrow: /*#__PURE__*/_jsx(PrevArrow, {})
+    nextArrow: /*#__PURE__*/_jsx(NextArrow, {
+      className: "slide-arrow-ei slider-next-ei"
+    }),
+    prevArrow: /*#__PURE__*/_jsx(PrevArrow, {
+      className: "slide-arrow-ei slider-prev-ei"
+    })
   };
+  useEffect(() => {
+    setRefresh(new Date().getTime());
+  }, []);
   useEffect(() => {
     if (!edit) {
       ReactEditor.focus(editor);
@@ -134,7 +142,7 @@ const Carousel = props => {
           }, i);
         })
       })
-    }, `slider_${children.length}_${new Date().getTime()}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+    }, `carousel_${path.join("|")}_${refresh}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

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

@@ -82,7 +82,7 @@
   margin-bottom: 30px;
 }
 .slick-dots {
-  bottom: -25px;
+  bottom: 0px;
   width: 100%;
   margin: 0;
   list-style: none;

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

@@ -43,6 +43,8 @@
 .slick-track {
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
 }
 .slick-track:after,
 .slick-track:before {

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

@@ -263,7 +263,7 @@ const Form = props => {
           spacing: 2,
           children: [/*#__PURE__*/_jsx("legend", {
             style: {
-              fontSize: textSize || "inherit",
+              fontSize: `${textSize}px` || "inherit",
               fontFamily: fontFamily || "PoppinsRegular",
               textAlign: textAlign || "left",
               width: "100%"

package/dist/Editor/Elements/Form/FormField.js

@@ -53,12 +53,12 @@ const FormField = props => {
   };
   const FieldToolbar = () => {
     return /*#__PURE__*/_jsxs("div", {
-      className: "",
+      className: "element-toolbar hr",
       contentEditable: false,
       style: {
         position: "absolute",
-        right: "0px",
-        top: "16px",
+        right: "12px",
+        top: "24px",
         bottom: 0,
         margin: "auto",
         height: "42px",

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

@@ -54,7 +54,7 @@ const carousel_item = itemNo => ({
       right: "16",
       bottom: "16"
     },
-    bgColor: "rgb(102, 102, 102)"
+    bgColor: "#ECF4FF"
   }]
 });
 export default carousel_item;

package/dist/Editor/Styles/EditorStyles.js

@@ -167,6 +167,15 @@ const editorStyles = ({
           height: "16px"
         }
       }
+    },
+    "& .slick-arrow": {
+      borderRadius: "50%",
+      backgroundColor: "#FFF",
+      textAlign: "center",
+      "& svg": {
+        width: "16px",
+        height: "16px"
+      }
     }
   }
 });

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -117,7 +117,7 @@ export const toolbarGroups = [[{
   id: 16,
   format: "unorderedList",
   type: "block",
-  title: "Un-ordered List",
+  title: "Bulleted List",
   group: "list"
 }, {
   id: 43,

package/dist/Editor/common/Icon.js

@@ -1,6 +1,6 @@
 import React from "react";
 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 { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill } 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";
@@ -183,7 +183,10 @@ const iconList = {
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
-  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {})
+  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
+  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+    size: 20
+  })
 };
 const Icon = props => {
   const {

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

@@ -49,7 +49,7 @@ const ELEMENTS_LIST = [{
   desc: "",
   group: "Text",
   icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "blockquote"
+    icon: "colorbox"
   }),
   onInsert: editor => toggleBlock(editor, "blockquote", false, {
     bgColor: "rgb(227, 236, 255)"
@@ -63,7 +63,7 @@ const ELEMENTS_LIST = [{
   }),
   onInsert: editor => toggleBlock(editor, "orderedList", false)
 }, {
-  name: "Un-Ordered List",
+  name: "Bulleted List",
   desc: "",
   group: "List",
   icon: /*#__PURE__*/_jsx(Icon, {

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

@@ -8,12 +8,6 @@ const appHeaderStyle = [{
     key: "appTitle",
     type: "text",
     placeholder: "Leave Empty, If only Logo"
-  }, {
-    label: "Title Font Size",
-    key: "logoFontSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px"
   }, {
     label: "Title Font Family",
     key: "titleFontFamily",
@@ -28,6 +22,12 @@ const appHeaderStyle = [{
         children: "LOGO"
       });
     }
+  }, {
+    label: "Title Font Size",
+    key: "logoFontSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px"
   }, {
     label: "Logo Image URL",
     key: "appLogo",
@@ -46,12 +46,6 @@ const appHeaderStyle = [{
   tab: "General",
   value: "general",
   fields: [{
-    label: "Menu Font Size",
-    key: "fontSize",
-    type: "fontSize",
-    placeholder: "16px",
-    width: 5
-  }, {
     label: "Menu Font Family",
     key: "fontFamily",
     type: "textOptions",
@@ -65,6 +59,12 @@ const appHeaderStyle = [{
         children: "Home"
       });
     }
+  }, {
+    label: "Menu Font Size",
+    key: "fontSize",
+    type: "fontSize",
+    placeholder: "16px",
+    width: 5
   }]
 }, {
   tab: "Menus",

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

@@ -25,21 +25,23 @@ const formStyle = [{
     label: "Title",
     key: "formTitle",
     type: "text"
-  }, {
-    label: "Font Size",
-    key: "textSize",
-    type: "text",
-    placeholder: "16px or 1em"
   }, {
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
     options: fontOptions,
+    width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
         children: option.text
       });
     }
+  }, {
+    label: "Font Size",
+    key: "textSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px"
   }, {
     label: "Text Align",
     key: "textAlign",

package/dist/Editor/utils/carousel.js

@@ -11,6 +11,8 @@ export const insertCarousel = editor => {
       ...carouselItem(2)
     }]
   };
-  Transforms.insertNodes(editor, grid);
+  Transforms.insertNodes(editor, grid, {
+    select: true
+  });
   insertNewLine(editor);
 };

package/package.json

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