@flozy/editor 2.0.4 → 2.0.6

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

@@ -15,9 +15,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import DeleteIcon from "@mui/icons-material/Delete";
-import AppHeaderPopup from "./AppHeaderPopup";
 import { Tooltip } from "@mui/material";
+import AppHeaderPopup from "./AppHeaderPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,6 +32,9 @@ function AppHeader(props) {
     customProps,
     children
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const {
     appTitle,
     appLogo,
@@ -60,37 +62,29 @@ function AppHeader(props) {
     setMobileOpen(prevState => !prevState);
   };
   const onSettings = e => {
-    e.stopPropagation();
-    setOpenSettings(true);
-  };
-  const ToolBar = () => {
-    return customProps?.readOnly !== true ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar",
-      contentEditable: false,
-      style: {
-        top: "0px",
-        right: "0px",
-        zIndex: 1000
-      },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "App Header Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete App Header",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
-    }) : null;
+    if (!readOnly) {
+      e.stopPropagation();
+      e.preventDefault();
+      setOpenSettings(true);
+    }
   };
+
+  // const ToolBar = () => {
+  //   return customProps?.readOnly !== true ? (
+  //     <div
+  //       className="element-toolbar"
+  //       contentEditable={false}
+  //       style={{ top: "0px", right: "0px", zIndex: 1000 }}
+  //     >
+  //       <Tooltip title="App Header Settings" arrow>
+  //         <IconButton size="small" onClick={onSettings}>
+  //           <GridSettingsIcon />
+  //         </IconButton>
+  //       </Tooltip>
+  //     </div>
+  //   ) : null;
+  // };
+
   const onSave = data => {
     const updateData = {
       ...data
@@ -111,7 +105,7 @@ function AppHeader(props) {
     setOpenSettings(false);
   };
   const handleFocus = e => {
-    if (!customProps?.readOnly) {
+    if (!readOnly) {
       e.preventDefault();
       try {
         const [[, gridItemPath]] = Editor.nodes(editor, {
@@ -202,6 +196,7 @@ function AppHeader(props) {
             },
             zIndex: 999
           },
+          onClick: onSettings,
           children: /*#__PURE__*/_jsxs(Toolbar, {
             style: {
               flexDirection: isLogoRight ? "row-reverse" : "row",
@@ -244,7 +239,6 @@ function AppHeader(props) {
                 }
               },
               className: "app-logo",
-              onClick: onSettings,
               children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
                 alt: `${appTitle} Logo`,
                 style: {
@@ -326,7 +320,7 @@ function AppHeader(props) {
             },
             children: drawer
           })
-        }), /*#__PURE__*/_jsx(ToolBar, {})]
+        })]
       }), /*#__PURE__*/_jsx("div", {
         contentEditable: false,
         style: {
@@ -338,6 +332,7 @@ function AppHeader(props) {
       element: element,
       onSave: onSave,
       onClose: onClose,
+      onDelete: onDelete,
       customProps: customProps
     }) : null]
   });

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

@@ -7,6 +7,7 @@ const AppHeaderPopup = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -15,6 +16,7 @@ const AppHeaderPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
+    onDelete: onDelete,
     renderTabs: appHeaderStyle,
     customProps: customProps
   });

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DarkFrame = ({
+  href,
+  id
+}) => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "314",
+    height: "541",
+    viewBox: "0 0 314 541",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("g", {
+      filter: "url(#filter0_d_15055_295724)",
+      children: /*#__PURE__*/_jsx("rect", {
+        x: "7",
+        y: "7",
+        width: "290",
+        height: "517",
+        rx: "20",
+        stroke: "white",
+        strokeWidth: "14",
+        shapeRendering: "crispEdges",
+        fill: `url(#imageSource_${id})`
+      })
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "290",
+        height: "517",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter0_d_15055_295724",
+        x: "0",
+        y: "0",
+        width: "314",
+        height: "541",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB",
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dx: "10",
+          dy: "10"
+        }), /*#__PURE__*/_jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_15055_295724"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_15055_295724",
+          result: "shape"
+        })]
+      })]
+    })]
+  });
+};
+export default DarkFrame;

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

@@ -4,10 +4,12 @@ import DarkFrame from "./DarkFrame";
 import RoundedDark from "./RoundedDark";
 import RoundedLight from "./RoundedLight";
 import RoundedLightB2 from "./RoundedLightB2";
+import LiteFrame from "./LiteFrame";
 const frames = {
   InstaFrame: InstaFrame,
   InstaFrameDark: InstaFrameDark,
   DarkFrame: DarkFrame,
+  LiteFrame: LiteFrame,
   RoundedDark: RoundedDark,
   RoundedLight: RoundedLight,
   RoundedLightB2: RoundedLightB2

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

@@ -272,7 +272,8 @@ const Grid = props => {
       borderRadius: {
         ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
       },
-      borderStyle: borderStyle || "solid"
+      borderStyle: borderStyle || "solid",
+      height: "auto"
     },
     "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {

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

@@ -51,6 +51,7 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
+  console.log(cellGHeight);
   const GridItemToolbar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,

package/dist/Editor/MiniEditor.js

@@ -1,12 +1,14 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, useEffect } from "react";
 import { createEditor } from "slate";
 import { Slate, Editable } from "slate-react";
+import { useDebounce } from "use-debounce";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
 import { commands, mentionsEvent } from "./utils/events";
 import useMentions from "./hooks/useMentions";
 import Shorthands from "./common/Shorthands";
 import BasicToolbar from "./Toolbar/Basic";
 import withCommon from "./hooks/withCommon";
+import { serializeToText } from "./utils/serializeToText";
 import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +22,8 @@ const MiniEditor = props => {
     readOnly,
     miniEditorPlaceholder,
     className,
-    otherProps
+    otherProps,
+    onSave
   } = props;
   const {
     CHARACTERS = []
@@ -30,6 +33,9 @@ const MiniEditor = props => {
   const [editor] = useState(() => withCommon(createEditor(), {
     needLayout: false
   }));
+  const [isInteracted, setIsInteracted] = useState(false);
+  const [value, setValue] = useState(content);
+  const [deboundedValue] = useDebounce(value, 500);
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
@@ -50,6 +56,24 @@ const MiniEditor = props => {
     ...mentions,
     CHARACTERS
   }) : [];
+  useEffect(() => {
+    if (onSave && isInteracted) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(deboundedValue);
+      onSave(strVal, restVal);
+    }
+  }, [deboundedValue]);
+  const getOnSaveData = val => {
+    const text = serializeToText(val);
+    const title = val?.find(f => f.type === "title");
+    return {
+      value: JSON.stringify(val),
+      text: text,
+      title: serializeToText(title?.children) || "Untitled"
+    };
+  };
   const Leaf = ({
     attributes,
     children,
@@ -97,10 +121,17 @@ const MiniEditor = props => {
       customProps: customProps
     });
   }, []);
+  const onChange = newVal => {
+    if (!isInteracted) {
+      setIsInteracted(true);
+    }
+    handleEditorChange(newVal);
+    setValue(newVal);
+  };
   return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
     initialValue: content,
-    onChange: handleEditorChange,
+    onChange: onChange,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {

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

@@ -13,7 +13,7 @@ const DragHandleStyle = () => ({
     opacity: 0,
     content: '" "',
     position: "absolute",
-    top: "0px",
+    top: "3px",
     left: "-52px",
     borderRadius: "0px",
     padding: "0px",

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -59,13 +59,17 @@ const ImageSelector = props => {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
-        children: [/*#__PURE__*/_jsx(Grid, {
+        children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 4,
+          xs: 12,
+          sx: {
+            display: "flex",
+            justifyContent: "space-evenly"
+          },
           children: /*#__PURE__*/_jsxs(Tabs, {
             sx: classes.tabs,
             onChange: handleTabChange,
-            orientation: "vertical",
+            orientation: "horizontal",
             value: tabValue,
             children: [/*#__PURE__*/_jsx(Tab, {
               className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
@@ -88,6 +92,9 @@ const ImageSelector = props => {
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
+              style: {
+                marginRight: 0
+              },
               icon: /*#__PURE__*/_jsx(Icon, {
                 icon: "link"
               }),
@@ -98,7 +105,7 @@ const ImageSelector = props => {
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 8,
+          xs: 12,
           sx: classes.imsRightWrpr,
           children: /*#__PURE__*/_jsx(Comp, {
             ...props,

package/dist/Editor/common/ImageSelector/Styles.js

@@ -6,8 +6,8 @@ const ImageSelectorStyles = theme => ({
       fontWeight: "500",
       textTransform: "capitalize",
       minHeight: "40px",
-      padding: "10px",
-      marginRight: "24px",
+      padding: "10px 30px",
+      marginRight: "14px",
       borderRadius: "7px",
       marginBottom: "12px",
       color: theme?.palette?.editor?.textColor,
@@ -26,7 +26,12 @@ const ImageSelectorStyles = theme => ({
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor,
-        border: `1px solid ${theme?.palette?.editor?.activeColor}`
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          "& path": {
+            stroke: theme?.palette?.editor?.activeColor
+          }
+        }
       },
       "& svg": {
         marginRight: "8px",

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

@@ -14,12 +14,41 @@ const SectionStyle = () => ({
     "&:hover": {
       "& .dh-para": {
         opacity: 1
+      },
+      "& .sectionIcon": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
       "&:hover": {
         display: "block"
       }
+    },
+    "& .sectionIcon": {
+      opacity: 0,
+      padding: "0px",
+      background: "transparent",
+      border: "none",
+      width: "20px",
+      height: "20px",
+      "& button": {
+        boxShadow: "none",
+        background: "transparent",
+        width: "20px",
+        height: "20px"
+      },
+      "& svg": {
+        fill: "#ccc",
+        width: "20px",
+        marginTop: '-5px'
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "#eee"
+      },
+      "&.active": {
+        opacity: 1
+      }
     }
   }
 });
@@ -56,10 +85,10 @@ const Section = props => {
   const Toolbar = () => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
-      className: "element-toolbar no-border-button ss hr section-tw",
+      className: `element-toolbar no-border-button hr section-tw sectionIcon`,
       style: {
         left: "-28px",
-        top: "0px"
+        top: "3px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",

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

@@ -25,7 +25,10 @@ const embedImageStyle = [{
       label: "Instagram Dark Frame"
     }, {
       value: "DarkFrame",
-      label: "Dark Frame"
+      label: "Portrait Dark Frame"
+    }, {
+      value: "LiteFrame",
+      label: "Portrait Lite Frame"
     }, {
       value: "RoundedDark",
       label: "Rounded Dark Frame"

package/dist/Editor/common/iconslist.js

@@ -1183,6 +1183,7 @@ export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
+    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });
@@ -1194,6 +1195,7 @@ export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
+    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });

package/dist/Editor/utils/embed.js

@@ -25,7 +25,8 @@ export const createEmbedNode = (type, {
   },
   alignment: {
     horizantal: "center"
-  }
+  },
+  objectFit: type === "image" ? true : false
 });
 export const insertEmbed = (editor, embedData, format) => {
   try {

package/package.json

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