@flozy/editor 1.8.8 → 1.9.0

package/dist/Editor/CommonEditor.js

@@ -118,7 +118,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageBgImage,
     pageColor,
     color: pageTextColor,
-    pageWidth
+    pageWidth,
+    maxWidth: pageMaxWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -355,13 +356,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
+                style: {
+                  background: pageColor || "#FFF"
+                },
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
                     style: {
-                      background: pageColor || "#FFF",
+                      // background: pageColor || "#FFF",
                       color: pageTextColor || "#000000"
                     },
                     children: /*#__PURE__*/_jsxs(Box, {
@@ -378,7 +382,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         alignSelf: "center",
                         transformOrigin: "left top",
                         transition: "all 0.3s",
-                        minHeight: "87%"
+                        minHeight: "87%",
+                        maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                         onDrawerOpen: onDrawerOpen

package/dist/Editor/Elements/Colorbox/ColorboxButton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { toggleBlock } from "../../utils/SlateUtilityFunctions";
+import { useSlateStatic } from "slate-react";
+import insertNewLine from "../../utils/insertNewLine";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ColorboxButton = props => {
+  const editor = useSlateStatic();
+  const {
+    icoBtnType
+  } = props;
+  const onClick = () => {
+    toggleBlock(editor, "blockquote", false, {
+      bgColor: "rgb(227, 236, 255)"
+    });
+    insertNewLine(editor);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Colorbox",
+      onClick: onClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "colorbox"
+      }),
+      icoBtnType: icoBtnType
+    })
+  });
+};
+export default ColorboxButton;

package/dist/Editor/Elements/SimpleText.js

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

package/dist/Editor/Elements/Title/title.js

@@ -8,7 +8,8 @@ const Title = props => {
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     style: {
-      fontWeight: "bold"
+      fontWeight: "bold",
+      fontSize: "20px"
     },
     children: children
   });

package/dist/Editor/Styles/EditorStyles.js

@@ -107,7 +107,7 @@ const editorStyles = ({
             width: "fit-content",
             "& button": {
               boxShadow: "none",
-              color: "rgb(85, 85, 85)",
+              color: "#D7D7D6",
               background: "rgb(221, 221, 221, 0.1)",
               "&:hover": {
                 background: "rgb(221, 221, 221, 0.8)"

package/dist/Editor/Toolbar/Toolbar.js

@@ -28,6 +28,7 @@ import EmojiButton from "../Elements/Emoji/EmojiButton.js";
 import "./styles.css";
 import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
+import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -186,6 +187,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "colorbox":
+        return /*#__PURE__*/_jsx(ColorboxButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       case "docsUpload":
         return /*#__PURE__*/_jsx(AttachmentsButton, {
           editor: editor,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -170,6 +170,12 @@ export const toolbarGroups = [[{
   format: "topbanner",
   type: "topbanner",
   group: "elements"
+}, {
+  id: 47,
+  format: "colorbox",
+  type: "colorbox",
+  title: "Colorbox",
+  group: "elements"
 }, {
   id: 42,
   type: "table",

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

@@ -7,13 +7,13 @@ 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", "headingOne", "headinTwo", "headingThree", "grid"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
 const DragHandleStyle = () => ({
   dragHandle: {
     opacity: 0,
     content: '" "',
     position: "absolute",
-    top: "2px",
+    top: "0px",
     left: "-52px",
     borderRadius: "0px",
     padding: "0px",
@@ -24,7 +24,7 @@ const DragHandleStyle = () => ({
     alignItems: "center",
     justifyContent: "center",
     cursor: "grab",
-    color: "rgb(85, 85, 85)",
+    color: "#D7D7D6",
     background: "rgb(221, 221, 221, 0.1)",
     "& svg": {
       width: "20px"
@@ -44,11 +44,17 @@ const DragHandleStyle = () => ({
     top: 0,
     width: "100%",
     height: "100%",
+    pointerEvents: "none",
+    zIndex: -1,
     "&.dragging": {
       backgroundColor: "#def4ff"
     }
   },
   dropAreaOver: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
     height: "4px"
   }
 });
@@ -84,8 +90,9 @@ const DragHandle = props => {
     setDragging(isDragging);
   };
   return canDraggable ? /*#__PURE__*/_jsxs("div", {
+    contentEditable: false,
     children: [/*#__PURE__*/_jsx(Box, {
-      className: dragging ? "dragging" : "",
+      className: `drag-alert ${dragging ? "dragging" : ""}`,
       sx: classes.dropArea
     }), /*#__PURE__*/_jsx(Droppable, {
       id: id,

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

@@ -99,7 +99,7 @@ const Section = props => {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
   return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
-    component: "section",
+    component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
     sx: {
       ...classes.root,
@@ -121,9 +121,9 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [/*#__PURE__*/_jsx(DragHandle, {
+      children: [!readOnly ? /*#__PURE__*/_jsx(DragHandle, {
         ...props
-      }), children, /*#__PURE__*/_jsx(Toolbar, {})]
+      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -32,7 +32,7 @@ const SaveAsTemplate = props => {
     const file = e.target.files[0];
     const strImage = await convertBase64(file);
     setBase64(strImage);
-    doUpload(strImage);
+    doUpload(e.target.files[0]);
   };
   const onChange = e => {
     setTemplate({
@@ -40,11 +40,13 @@ const SaveAsTemplate = props => {
       [e.target.name]: e.target.value
     });
   };
-  const doUpload = async strImage => {
+  const doUpload = async file => {
     setUploading(true);
-    const result = await uploadFile({
-      image: strImage
-    }, customProps);
+    const formData = new FormData();
+    formData.set("file", file);
+    formData.set("resource_type", "pages");
+    formData.set("resource_id", customProps?.page_id);
+    const result = await uploadFile(formData, customProps);
     setUploading(false);
     if (result && result?.imageURL) {
       setTemplate({

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

@@ -26,5 +26,14 @@ const pageSettingsStyle = [{
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
+}, {
+  tab: "Max Width",
+  value: "maxWidth",
+  fields: [{
+    label: "Max Width",
+    key: "maxWidth",
+    type: "text",
+    placeholder: "Maximum width of page in px"
+  }]
 }];
 export default pageSettingsStyle;

package/dist/Editor/common/Uploader.js

@@ -28,7 +28,6 @@ const Uploader = props => {
   const doUpload = async (strImage, file) => {
     setUploading(true);
     const formData = new FormData();
-    // formData.set("image", strImage);
     formData.set("file", file);
     formData.set("resource_type", "pages");
     formData.set("resource_id", customProps?.page_id);

package/dist/Editor/common/iconslist.js

@@ -1586,8 +1586,8 @@ export const CheckListButton = () => /*#__PURE__*/_jsx("svg", {
     width: "23",
     height: "23",
     rx: "11.5",
-    fill: "#F4F6F9",
-    stroke: "#E0E0E0"
+    fill: "none",
+    stroke: "#CCCCCC"
   })
 });
 export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
@@ -1596,13 +1596,24 @@ export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  children: [/*#__PURE__*/_jsx("rect", {
+  children: [/*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsxs("linearGradient", {
+      id: "Gradient1",
+      children: [/*#__PURE__*/_jsx("stop", {
+        offset: "0%",
+        stopColor: "#5351FC"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "50%",
+        stopColor: "#19A9FC"
+      })]
+    })
+  }), /*#__PURE__*/_jsx("rect", {
     x: "0.5",
     y: "0.5",
     width: "23",
     height: "23",
     rx: "11.5",
-    fill: "#2563EB"
+    fill: "url(#Gradient1)"
   }), /*#__PURE__*/_jsx("path", {
     d: "M7.0625 12.0896L10.6849 15.7105L17.9267 8.46875",
     stroke: "white",

package/package.json

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