@flozy/editor 1.8.7 → 1.8.9

package/dist/Editor/Elements/Attachments/Attachments.js

@@ -18,7 +18,7 @@ const Attachments = props => {
     date
   } = element;
   const getLastName = url?.split("/").pop();
-  const fileName = `${decodeURI(getLastName)}`;
+  const fileName = `${decodeURIComponent(getLastName)}`;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: "attachment-wrpr-ev2",

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/Styles/EditorStyles.js

@@ -97,6 +97,7 @@ const editorStyles = ({
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
+      padding: "0px 12px",
       "&:hover": {
         "& .ed-section-inner": {
           "& .element-toolbar.ss": {
@@ -106,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/PopupTool/AddElements.js

@@ -14,7 +14,7 @@ const AddElements = props => {
   const {
     hideTools
   } = customProps;
-  const filteredElements = elements.filter(f => hideTools.indexOf(f.type) === -1);
+  const filteredElements = elements.filter(f => (hideTools || []).indexOf(f.type) === -1);
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     sx: classes.textFormatWrapper,

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

@@ -14,6 +14,11 @@ const SectionStyle = () => ({
       "& .dh-para": {
         opacity: 1
       }
+    },
+    "& .element-toolbar": {
+      "&:hover": {
+        display: "block"
+      }
     }
   }
 });
@@ -58,7 +63,7 @@ const Section = props => {
       className: "element-toolbar no-border-button ss hr section-tw",
       style: {
         left: "-28px",
-        top: "2px"
+        top: "0px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
@@ -94,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,
@@ -116,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/Shorthands/elements.js

@@ -206,7 +206,7 @@ const elements = props => {
     search,
     hideTools
   } = props;
-  const filteredElements = ELEMENTS_LIST.filter(f => hideTools.indexOf(f.type) === -1);
+  const filteredElements = ELEMENTS_LIST.filter(f => (hideTools || []).indexOf(f.type) === -1);
   return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
 };
 export default elements;

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/index.js

@@ -17,14 +17,14 @@ const StyleContent = props => {
   } = props;
   const {
     hideTools
-  } = customProps;
+  } = customProps || {};
   const tabContent = renderTabs.find(f => f.value === value);
   const {
     fields
   } = tabContent || {
     fields: []
   };
-  const filteredFields = hideTools?.length > 0 ? fields.filter(f => hideTools.indexOf(f.key) === -1) : fields;
+  const filteredFields = (hideTools || [])?.length > 0 ? fields.filter(f => (hideTools || []).indexOf(f.key) === -1) : fields;
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     spacing: 2,

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.7",
+  "version": "1.8.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"