@flozy/editor 1.5.1 → 1.5.2

package/dist/Editor/CommonEditor.js

@@ -70,6 +70,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [isInteracted, setIsInteracted] = useState(false);
   const [deboundedValue] = useDebounce(value, 500);
   const [fullScreen, setFullScreen] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  console.log(isDrawerOpen);
   const [viewport, setViewport] = useState({
     w: null,
     h: null
@@ -203,11 +205,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       setIsInteracted(true);
     }
   };
+  const onDrawerOpen = status => {
+    setIsDrawerOpen(status);
+  };
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
     readOnly: isReadOnly,
-    page_id: id
+    page_id: id,
+    onDrawerOpen: onDrawerOpen
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
@@ -349,9 +355,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 paddingBottom: `${bannerSpacing?.bottom}px`,
                 width: viewport.w ? `${viewport.w}px` : "100%",
                 height: viewport.h ? `${viewport.h}px` : "auto",
-                alignSelf: "center"
+                alignSelf: "center",
+                // scale: isDrawerOpen ? "0.75" : "1",
+                transformOrigin: "left top",
+                transition: "all 0.3s"
               },
-              children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
+              children: [/*#__PURE__*/_jsx(PopupTool, {
+                onDrawerOpen: onDrawerOpen
+              }), /*#__PURE__*/_jsx(Editable, {
                 className: "innert-editor-textbox",
                 readOnly: isReadOnly,
                 placeholder: "Write something",

package/dist/Editor/Editor.css

@@ -110,11 +110,11 @@ blockquote {
 }
 
 .grid-container-toolbar {
-  right: -32px;
+  right: -40px;
 }
 
 .grid-item-toolbar {
-  left: -32px;
+  left: -40px;
 }
 
 .element-toolbar {
@@ -127,15 +127,17 @@ blockquote {
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
-  background-color: #2684ff;
-  color: #FFFFFF;
-  border: 1px solid transparent;
+  background-color: #fff;
+  border: 1px solid rgb(37, 99, 235, 0.23);
   font-size: 12px;
   border-radius: 0px;
   margin-bottom: 0px;
   width: 24px;
   height: 24px;
-  padding: 12px;
+  padding: 16px;
+  margin-bottom: 4px;
+  color: #64748B;
+  border-radius: 50%;
 }
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,
@@ -212,7 +214,7 @@ blockquote {
 }
 
 .close-popupbtn {
-  background-color: #ededed !important;
+  background-color: #F8FAFC !important;
   border-radius: 4px !important;
   width: 24px;
   height: 24px;
@@ -225,7 +227,7 @@ blockquote {
 
 .popupTitle {
   font-size: 16px !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
   font-family: Inter, sans-serif;
   text-transform: uppercase;
 }
@@ -520,16 +522,45 @@ blockquote {
 
 .element-root .element-selector {
   position: absolute;
-  width: calc(100% + 16px);
-  height: calc(100% + 16px);
-  border: 4px dotted #2684ff;
+  width: calc(100%);
+  height: calc(100%);
+  border: 2px solid #2563EB;
   display: none;
   pointer-events: none;
-  top: -8px;
-  left: -8px;
+  top: 0px;
+  left: 0px;
   z-index: 100;
 }
 
+.element-selector .element-selector-dots {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #2563EB;
+  background-color: #2563EB;
+}
+
+.element-selector-dots.tl {
+  left: -5px;
+  top: -5px;
+  border: 2px solid #2563EB;
+}
+.element-selector-dots.tr {
+  right: -5px;
+  top: -5px;
+  border: 2px solid #2563EB;
+}
+.element-selector-dots.bl {
+  left: -5px;
+  bottom: -5px;
+  border: 2px solid #2563EB;
+}
+.element-selector-dots.br {
+  right: -5px;
+  bottom: -5px;
+  border: 2px solid #2563EB;
+}
+
 .element-selector.selected {
   display: block;
 }
@@ -571,4 +602,103 @@ blockquote {
 
 .dragging.active_drag .grid-c-wrpr {
   opacity: 0.15;
-}
+}
+
+.optionePopupHeader {
+  border-bottom: 1px solid #DCE4EC;
+}
+
+.dialogComp .MuiInputBase-input {
+  border-radius: 8px;
+  box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05);
+  font-size: 12px;
+  font-weight: 500;
+}
+.dialogComp  .MuiOutlinedInput-notchedOutline {
+  border: 1px solid #ECECEC;
+}
+.iconRadioButton .MuiRadio-root {
+  visibility: hidden;
+  width: 0px;
+  padding: 6px;
+}
+.iconRadioButton .MuiTypography-root {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.iconRadioButton .MuiFormControlLabel-root.active .fillPath {
+  fill: #2684ff;
+}
+.iconRadioButton .MuiFormControlLabel-root.active .fillStroke {
+  stroke: #2684ff;
+}
+.iconRadioButton .Mui-checked ~ .MuiTypography-root .fillStroke {
+  stroke: #2684ff;
+}
+.selctedBtnIcon {
+  border: 1px solid #ECECEC;
+  border-radius: 4px;
+  height: 35px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+.borderInput {
+  text-align: center;
+}
+.borderInput:focus-visible {
+  outline: none !important;
+}
+
+.uploadImageSection {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+}
+.uploadImageSection  .removeImageText {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.5s;
+}
+.uploadImageSection:hover  .removeImageText {
+  visibility: visible;
+  opacity: 1;
+}
+.uploadImageText, .removeImageText {
+  border: 2px dashed #fff;
+  border-radius: 8px;
+  color: #fff;
+  padding: 2px 8px;
+  background-color: #00000090;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.textFontArrows {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.textFontArrows svg {
+  width: 12px;
+  height: 12px;
+}
+.textFontArrows .MuiIconButton-root {
+  padding: 2px;
+}
+
+.tools-drawer .MuiTypography-root {
+  color: #000000;
+  font-weight: bold !important;
+}

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -72,7 +72,7 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-24px",
+        top: "-40px",
         right: "50px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -81,6 +81,9 @@ function AppHeader(props) {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          style: {
+            marginRight: "4px"
+          },
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -114,17 +117,19 @@ function AppHeader(props) {
     setOpenSettings(false);
   };
   const handleFocus = e => {
-    e.preventDefault();
-    try {
-      const [[, gridItemPath]] = Editor.nodes(editor, {
-        at: path,
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
-      });
-      if (gridItemPath) {
-        Transforms.select(editor, gridItemPath);
+    if (!customProps?.readOnly) {
+      e.preventDefault();
+      try {
+        const [[, gridItemPath]] = Editor.nodes(editor, {
+          at: path,
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
+        });
+        if (gridItemPath) {
+          Transforms.select(editor, gridItemPath);
+        }
+      } catch (err) {
+        console.log(err);
       }
-    } catch (err) {
-      console.log(err);
     }
   };
 

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

@@ -88,7 +88,6 @@ const EditorButton = props => {
     setAnchorEl(null);
   };
   const onMenuClick = val => () => {
-    console.log(val, url);
     switch (val) {
       case "open":
         const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
@@ -121,12 +120,6 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
-  const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
-    borderImageSource: borderColor,
-    borderImageSlice: 1
-  } : {
-    borderColor: borderColor || "none"
-  };
   return /*#__PURE__*/_jsxs("div", {
     className: "editor-btn-wrapper",
     ...attributes,
@@ -175,6 +168,22 @@ const EditorButton = props => {
             paddingLeft: "4px",
             paddingRight: "4px"
           }
+        }), !readOnly && /*#__PURE__*/_jsxs("div", {
+          className: `element-selector ${anchorEl ? "selected" : ""}`,
+          contentEditable: false,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "element-selector-dots tl",
+            children: " "
+          }), /*#__PURE__*/_jsx("div", {
+            className: "element-selector-dots tr",
+            children: " "
+          }), /*#__PURE__*/_jsx("div", {
+            className: "element-selector-dots bl",
+            children: " "
+          }), /*#__PURE__*/_jsx("div", {
+            className: "element-selector-dots br",
+            children: " "
+          })]
         })]
       })
     }), /*#__PURE__*/_jsx("div", {

package/dist/Editor/Elements/Embed/Embed.js

@@ -128,25 +128,28 @@ const Embed = ({
           },
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
-            children: [/*#__PURE__*/_jsx(Grid, {
+            children: [/*#__PURE__*/_jsx(Uploader, {
+              value: formData,
+              data: {
+                key: "url"
+              },
+              customProps: customProps,
+              onUploaded: onUploaded,
+              disableUpload: format === "video"
+            }), /*#__PURE__*/_jsx(Grid, {
               item: true,
               xs: 12,
+              style: {
+                paddingTop: "12px"
+              },
               children: /*#__PURE__*/_jsx(TextField, {
                 name: "url",
-                placeholder: "Enter URL",
+                placeholder: "Add image url here",
                 size: "small",
                 fullWidth: true,
                 onChange: handleChange,
                 value: imageURL || ""
               })
-            }), /*#__PURE__*/_jsx(Uploader, {
-              value: formData,
-              data: {
-                key: "url"
-              },
-              customProps: customProps,
-              onUploaded: onUploaded,
-              disableUpload: format === "video"
             })]
           })
         }), /*#__PURE__*/_jsxs(DialogActions, {

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

@@ -11,6 +11,7 @@ import CompressIcon from "@mui/icons-material/Compress";
 import { insertGrid } from "../../utils/grid";
 import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
+// import { AddGridItemIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
@@ -244,10 +245,22 @@ const Grid = props => {
         backgroundRepeat: "no-repeat",
         backgroundSize: "cover"
       }
-    }), dndElements, !readOnly && /*#__PURE__*/_jsx("div", {
+    }), dndElements, !readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
-      children: /*#__PURE__*/_jsx(GridToolBar, {})
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tr",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots bl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots br",
+        children: " "
+      }), /*#__PURE__*/_jsx(GridToolBar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Grid/GridItem.js

@@ -116,10 +116,22 @@ const GridItem = props => {
         background: `${bgColorHover || bgColor || "transparent"}`
       }
     },
-    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+    children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
-      children: /*#__PURE__*/_jsx(GridItemToolbar, {})
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tr",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots bl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots br",
+        children: " "
+      }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
     }), /*#__PURE__*/_jsx(Box, {
       className: "gi-inner-cw",
       component: "div",

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

@@ -107,9 +107,10 @@ const TableSelector = ({
                 },
                 children: /*#__PURE__*/_jsx(Typography, {
                   variant: "body1",
-                  color: "textSecondary",
+                  color: "primary",
                   sx: {
-                    fontSize: "14px"
+                    fontSize: "14px",
+                    fontWeight: 500
                   },
                   children: "No.of Rows"
                 })
@@ -133,9 +134,10 @@ const TableSelector = ({
                 },
                 children: /*#__PURE__*/_jsx(Typography, {
                   variant: "body1",
-                  color: "textSecondary",
+                  color: "primary",
                   sx: {
-                    fontSize: "14px"
+                    fontSize: "14px",
+                    fontWeight: 500
                   },
                   children: "No.of Columns"
                 })

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { TextField, IconButton } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { sizeMap } from "../../utils/font.js";
+import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const TextSize = ({
+  editor,
+  format
+}) => {
+  const value = activeMark(editor, format);
+  const onChangeSize = e => {
+    let inc = parseInt(e.target.value) || 8;
+    inc = inc > 200 ? 200 : inc;
+    addMarkData(editor, {
+      format,
+      value: `${inc || 8}px`
+    });
+  };
+  const getSizeVal = () => {
+    try {
+      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      return parseInt(size);
+    } catch (err) {
+      return "";
+    }
+  };
+  const combinedOldVal = getSizeVal();
+  const onIncreaseSize = () => {
+    let inc = combinedOldVal || 0 + 1;
+    inc = inc > 200 ? 200 : inc;
+    addMarkData(editor, {
+      format,
+      value: `${inc}px`
+    });
+  };
+  const onDecreaseSize = () => {
+    addMarkData(editor, {
+      format,
+      value: `${combinedOldVal - 1 || 0}px`
+    });
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(TextField, {
+      value: combinedOldVal,
+      onChange: onChangeSize,
+      size: "small",
+      inputProps: {
+        style: {
+          width: "30px",
+          textAlign: "center"
+        }
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_jsxs("div", {
+          className: "textFontArrows",
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            onClick: onIncreaseSize,
+            size: "small",
+            children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: onDecreaseSize,
+            size: "small",
+            children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+          })]
+        })
+      }
+    })
+  });
+};
+export default TextSize;

package/dist/Editor/Toolbar/FormatTools/index.js

@@ -3,4 +3,5 @@ import Dropdown from "./Dropdown";
 import MarkButton from "./MarkButton";
 import Autocomplete from "./Autocomplete";
 import Text from "./Text";
-export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };
+import TextSize from "./TextSize";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize };

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

@@ -4,29 +4,43 @@ const usePopupStyle = () => ({
     zIndex: 999
   },
   textFormatWrapper: {
-    padding: "0px 24px 24px 24px",
-    width: "350px"
+    padding: "0px 16px 16px 16px",
+    width: "350px",
+    maxheight: "300px",
+    overflow: "auto",
+    marginBottom: "12px",
+    "& .textSettingHeader": {
+      borderBottom: "1px solid #DCE4EC",
+      padding: "8px 0px 5px",
+      marginBottom: "20px"
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "1px solid #ECECEC"
+    },
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
+    }
   },
   textFormatLabel: {
     display: "flex",
     alignItems: "center",
     fontWeight: 600,
-    fontSize: "14px",
+    fontSize: "16px",
     lineHeight: "25px",
-    marginTop: "8px",
-    marginBottom: "8px",
-    color: "rgba(169, 169, 169, 1)"
+    marginTop: "12px",
+    marginBottom: "8px"
   },
   textFormatField: {
-    marginBottom: "8px"
+    marginBottom: "16px"
   },
   textFormatFieldBorder: {
     display: "flex",
     alignItems: "center",
     marginBottom: "8px",
-    border: "1px solid rgba(169, 169, 169, 1)",
+    border: "1px solid #ECECEC",
     padding: "0px 8px",
-    borderRadius: "10px"
+    borderRadius: "8px",
+    boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   textFormatCG: {
     marginBottom: "8px"