@flozy/editor 1.3.5 → 1.4.0

package/dist/Editor/CommonEditor.js

@@ -12,10 +12,11 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
 import { mentionsEvent, commands } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
-import "./Editor.css";
 import { serialize } from "./utils/serializer";
 import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
+import "./font.css";
+import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -184,7 +185,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
-    readOnly: isReadOnly
+    readOnly: isReadOnly,
+    page_id: id
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {

package/dist/Editor/Editor.css

@@ -1,5 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
+.editor-t-wrapper {
+  font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
+}
+.editor-t-wrapper strong,
+.editor-t-wrapper strong * {
+  font-family: "PoppinsBold", "Helvetica", "Arial", sans-serif;
+}
 .ml-1 {
   margin-left: 10px;
 }
@@ -33,8 +38,9 @@ blockquote {
 .editor-wrapper .btnActive {
   opacity: 1;
 }
+
 .editor-wrapper {
-  font-family: "Helvetica", "Arial", sans-serif;
+
   background: #ffffff;
   min-height: 400px;
   height: fit-content;
@@ -102,11 +108,11 @@ blockquote {
 }
 
 .grid-container-toolbar {
-  right: -52px;
+  right: -32px;
 }
 
 .grid-item-toolbar {
-  left: -52px;
+  left: -32px;
 }
 
 .element-toolbar {
@@ -119,16 +125,22 @@ blockquote {
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
-  /* margin-right: 8px;
-    background-color: rgba(0, 0, 0, 0.8);
-    color: #FFF; */
-  /* margin-left: 8px; */
-  background-color: rgb(255 255 255);
-  color: #64748b;
+  background-color: #2684ff;
+  color: #FFFFFF;
+  border: 1px solid transparent;
   font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid #64748b;
-  margin-bottom: 6px;
+  border-radius: 0px;
+  margin-bottom: 0px;
+  width: 24px;
+  height: 24px;
+  padding: 12px;
+}
+.grid-container-toolbar button:hover,
+.grid-item-toolbar button:hover,
+.element-toolbar button:hover {
+  background-color: #FFFFFF;
+  color: #2684ff;
+  border: 1px solid #2684ff;
 }
 
 .grid-item {
@@ -396,6 +408,15 @@ blockquote {
   width: auto !important;
 }
 @media (max-width: 480px) {
+  body {
+    padding: 0px !important;
+  }
+  .app-logo {
+    justify-content: end;
+  }
+  .editor-t-wrapper {
+    padding: 0px 0px !important;
+  }
   .toolbar {
     display: flex;
     flex-wrap: nowrap;
@@ -405,9 +426,32 @@ blockquote {
   .toolbar-grp1 > div {
     display: flex;
   }
+  .grid-container > div {
+    flex-direction: column !important;
+  }
   .grid-item {
     width: 100% !important;
   }
+  .grid-item > div {
+    text-align: center;
+  }
+  .page-builder .editor-wrapper {
+    max-width: 100% !important;
+    margin-top: 0px !important;
+    padding: 0px !important;
+  }
+  .embed {
+    justify-content: center;
+  }
+  .embed img {
+    object-fit: contain;
+  }
+  form .form-field {
+    width: 100% !important;
+  }
+  .form-btn-wrpr {
+    justify-content: center !important;
+  }
 }
 
 .editorTabs {
@@ -449,7 +493,7 @@ blockquote {
   left: 0;
   right: 0;
   bottom: 0;
-  top: auto;
+  top: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
@@ -476,11 +520,11 @@ blockquote {
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 16px);
-  border: 4px solid #2684ff;
+  border: 4px dotted #2684ff;
   display: none;
   pointer-events: none;
-  top: -12px;
-  left: -12px;
+  top: -8px;
+  left: -8px;
   z-index: 100;
 }
 
@@ -489,7 +533,7 @@ blockquote {
 }
 
 .element-toolbar button {
-  margin-right: 6px;
+  margin-right: 0px;
 }
 
 .empty-carousel-wrapper .element-selector {
@@ -502,4 +546,4 @@ blockquote {
 
 .empty-carousel-wrapper .grid-item-toolbar {
   left: 0px;
-}
+}

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

@@ -18,6 +18,7 @@ import Button from "@mui/material/Button";
 import SettingsIcon from "@mui/icons-material/Settings";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AppHeaderPopup from "./AppHeaderPopup";
+import { Tooltip } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const drawerWidth = 240;
@@ -33,8 +34,17 @@ function AppHeader(props) {
     appLogo,
     menus,
     bgColor,
-    menuStyle
+    menuStyle,
+    bannerSpacing,
+    fontSize,
+    fontFamily
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
   const {
     window
   } = props;
@@ -53,16 +63,24 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-38px"
+        top: "-24px"
       },
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      }), /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onDelete,
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "App Header Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete App Header",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -107,6 +125,8 @@ function AppHeader(props) {
       children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
         disablePadding: true,
         children: /*#__PURE__*/_jsx(ListItemButton, {
+          component: "a",
+          href: item.url,
           sx: {
             textAlign: "center"
           },
@@ -130,7 +150,11 @@ function AppHeader(props) {
       style: {
         position: "relative",
         background: bgColor,
-        boxShadow: "none"
+        boxShadow: "none",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`
       },
       children: /*#__PURE__*/_jsxs(Toolbar, {
         children: [/*#__PURE__*/_jsx(IconButton, {
@@ -160,6 +184,7 @@ function AppHeader(props) {
               sm: "block"
             }
           },
+          className: "app-logo",
           children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
             alt: `${appTitle} Logo`,
             style: {
@@ -183,9 +208,12 @@ function AppHeader(props) {
             children: /*#__PURE__*/_jsx(MenuIcon, {})
           }) : null, !isDrawer ? menus.map(item => /*#__PURE__*/_jsx(Button, {
             component: "a",
-            href: item.href,
+            href: item.url,
             sx: {
-              color: "#fff"
+              color: "#fff",
+              fontFamily: fontFamily,
+              textTransform: "none",
+              fontSize: fontSize || "16px"
             },
             children: item.text
           }, item)) : null]

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

@@ -7,15 +7,17 @@ const ButtonPopup = props => {
     element,
     onSave,
     customProps,
-    onClose
+    onClose,
+    style,
+    styleName
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Button",
-    type: "buttonStyle",
+    type: styleName ? "" : "buttonStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: buttonStyle,
+    renderTabs: style ? style : buttonStyle,
     customProps: customProps
   });
 };

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

@@ -1,7 +1,10 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Menu, MenuItem } from "@mui/material";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,7 +33,8 @@ const EditorButton = props => {
     borderColor,
     buttonLink,
     textSize,
-    textAlign
+    textAlign,
+    fontFamily
   } = element;
   const {
     linkType,
@@ -136,7 +140,8 @@ const EditorButton = props => {
           paddingTop: `${top || 8}px`,
           paddingBottom: `${bottom || 8}px`,
           color: `${textColor || "#FFFFFF"}`,
-          fontSize: textSize || "inherit"
+          fontSize: textSize || "inherit",
+          fontFamily: fontFamily || "PoppinsRegular"
         },
         onClick: onClick,
         children: label || "My Button"
@@ -148,13 +153,31 @@ const EditorButton = props => {
       onClose: handleClose,
       children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
         onClick: onMenuClick("edit"),
-        children: "Edit"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          })
+        })
       }), /*#__PURE__*/_jsx(MenuItem, {
+        title: "Open Link",
+        arrow: true,
         onClick: onMenuClick("open"),
-        children: "Open"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+          })
+        })
       }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
+        title: "Delete",
+        arrow: true,
         onClick: onMenuClick("delete"),
-        children: "Delete"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          })
+        })
       })]
     }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
       element: element,

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

@@ -6,9 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import { insertImageText } from "../../utils/imageText";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -112,31 +110,17 @@ const Image = ({
     insertImageText(editor, [...path, 1]);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Text",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddText,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Image Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
+      })
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
@@ -177,7 +161,7 @@ const Image = ({
         alt: alt,
         src: url,
         onClick: handleImageClick
-      }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      }), selected && !readOnly && size.width > 300 && size.height > 300 && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,

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

@@ -54,14 +54,14 @@ const Video = ({
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
+        title: "Video Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
+        title: "Delete Video",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,

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

@@ -0,0 +1,20 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import fieldStyle from "../../common/StyleBuilder/fieldStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FieldPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Form Field",
+    type: "fieldStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: fieldStyle
+  });
+};
+export default FieldPopup;