@flozy/editor 9.4.7 → 9.4.8

package/dist/Editor/Editor.css

@@ -502,7 +502,7 @@ blockquote {
   color: #ffffff !important;
   border: 1px solid #2563eb !important;
   width: auto !important;
-  padding: 2px 0px 0px 0px !important;
+  /* padding: 2px 0px 0px 0px !important; */
   min-width: 89px !important;
   font-family: Inter, sans-serif;
   text-transform: none;
@@ -534,7 +534,7 @@ blockquote {
   margin-right: 15px !important;
   color: #2563eb;
   width: auto !important;
-  padding: 2px 0px 0px 0px !important;
+  /* padding: 2px 0px 0px 0px !important; */
   min-width: 89px !important;
   font-family: Inter, sans-serif;
   text-transform: none;

package/dist/Editor/Elements/DataView/DataView.js

@@ -91,12 +91,19 @@ const DataView = props => {
       console.log(err);
     }
   };
+  const handleClick = () => {
+    // for the bug FS-9557, scenario mentioned in comment
+    if (editor.selection !== null) {
+      Transforms.deselect(editor);
+    }
+  };
   return /*#__PURE__*/_jsx(Box, {
     ...attributes,
     className: "fe-dataview",
     sx: classes.root,
     contentEditable: false,
     "data-title": title,
+    onClick: handleClick,
     children: /*#__PURE__*/_jsxs(DataViewProvider, {
       data: {
         properties,

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

@@ -15,6 +15,11 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const TYPE_LABELS = {
+  calendly: "Embed Calendly or Other",
+  video: "Embed Video or Other",
+  image: "Embed Image or Other"
+};
 const VideoContent = props => {
   const {
     resizing,
@@ -72,7 +77,8 @@ const VideoPlaceholder = props => {
     readOnly,
     onSettings,
     classes,
-    translation
+    translation,
+    type
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -83,7 +89,7 @@ const VideoPlaceholder = props => {
     },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
-    }), translation("Embed Video or Other")]
+    }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
   }) : /*#__PURE__*/_jsxs(Box, {
     sx: {
       color: "#64748B !important",

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -139,6 +139,13 @@ const FreeGrid = props => {
           setAutoAlign(true);
           setSelectedElement({});
           break;
+        case "deleteSection":
+          if (Node.has(editor, cur_root_path)) {
+            Transforms.removeNodes(editor, {
+              at: cur_root_path
+            });
+          }
+          break;
         default:
       }
     } catch (err) {

package/dist/Editor/Elements/FreeGrid/Options/More.js

@@ -23,7 +23,11 @@ const More = props => {
         className: "item-wrapper",
         onClick: handleClick("forceAutoAlignment"),
         children: "Force Auto Alignment"
-      }) : null]
+      }) : null, /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("deleteSection"),
+        children: "Delete Section"
+      })]
     })
   });
 };

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

@@ -168,6 +168,12 @@ const RnD = props => {
     if (readOnly) {
       return;
     }
+
+    // for section click
+    if (e?.target?.dataset?.dragovertype === "parent") {
+      // consider as section click and de-select focused / edited item
+      setSelectedElement({});
+    }
     if (e?.target?.dataset?.event === "rnd-click") {
       // for context menu
       setContextMenu({

package/dist/Editor/themeSettings/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
+import { Box, CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
 
 // Style
 import Style from "./style";
@@ -53,8 +53,7 @@ const ThemeSettings = props => {
   const {
     id,
     name,
-    mood_name,
-    template_tags
+    mood_name
   } = userSelectedTheme || {};
   const onClose = () => setOpen(false);
   const getThemesList = async themeTabType => {
@@ -92,10 +91,10 @@ const ThemeSettings = props => {
     getThemesList(newValue);
   };
   const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
-  const onSaveTheme = async (formData = {}) => {
+  const onSaveTheme = async (formData = {}, addNewTheme) => {
     setSavingTheme(true);
     try {
-      const type = isUpdateTheme ? "update" : "create";
+      let type = isUpdateTheme && !addNewTheme ? "update" : "create";
       const result = await services("saveTheme", {
         type,
         id,
@@ -189,14 +188,15 @@ const ThemeSettings = props => {
       })]
     });
   };
+  const showThemeSettings = id && !themeMoodboard;
   return /*#__PURE__*/_jsx(Grid, {
     className: className,
-    children: /*#__PURE__*/_jsx(Drawer, {
+    children: /*#__PURE__*/_jsxs(Drawer, {
       className: className,
       open: open,
       onClose: onClose,
       anchor: "right",
-      children: /*#__PURE__*/_jsxs(Grid, {
+      children: [/*#__PURE__*/_jsxs(Grid, {
         className: "settingsContainer",
         children: [/*#__PURE__*/_jsxs(Grid, {
           container: true,
@@ -271,7 +271,7 @@ const ThemeSettings = props => {
               }, i);
             })]
           })
-        }), id && !themeMoodboard ? /*#__PURE__*/_jsxs(_Fragment, {
+        }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Grid, {
             sx: {
               px: 1,
@@ -301,27 +301,30 @@ const ThemeSettings = props => {
               appTheme: appTheme,
               customProps: customProps
             })
-          }), /*#__PURE__*/_jsx("div", {
-            style: {
-              width: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              marginTop: "10px"
-            },
-            children: /*#__PURE__*/_jsx(SaveTheme, {
-              saveBtnLabel: isUpdateTheme ? "Update theme" : "Save Theme",
-              loading: savingTheme,
-              onSave: onSaveTheme,
-              defaultFormData: {
-                name,
-                mood_name,
-                template_tags
-              }
-            })
           })]
         }) : null]
-      })
+      }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
+        className: "saveThemeBtnsWrapper",
+        component: "div",
+        children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
+          saveBtnLabel: "Add new theme",
+          loading: savingTheme,
+          onSave: onSaveTheme,
+          defaultFormData: {
+            name,
+            mood_name
+          },
+          addNewTheme: true
+        }) : null, /*#__PURE__*/_jsx(SaveTheme, {
+          saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
+          loading: savingTheme,
+          onSave: onSaveTheme,
+          defaultFormData: {
+            name,
+            mood_name
+          }
+        })]
+      }) : null]
     })
   });
 };

package/dist/Editor/themeSettings/style.js

@@ -32,7 +32,9 @@ const Style = ({
     },
     "& .MuiDrawer-paper": {
       background: background,
-      color: textColor
+      color: textColor,
+      display: "flex",
+      flexDirection: "column"
     },
     "& .textSecondary": {
       color: tv_text
@@ -40,6 +42,9 @@ const Style = ({
     ".settingsContainer": {
       width: "340px",
       padding: "16px 5px",
+      position: "relative",
+      overflowY: "auto",
+      flexGrow: 1,
       ".header": {
         borderBottom: `1px solid ${deviderBgColor}`,
         paddingBottom: "16px",
@@ -182,11 +187,24 @@ const Style = ({
         fontWeight: "600"
       },
       ".MuiAccordionDetails-root ": {
-        padding: "12px 0px"
+        padding: "12px 0px !important"
       }
     },
     ".MuiTab-root": {
       color: textColor
+    },
+    ".saveThemeBtnsWrapper": {
+      position: "sticky",
+      bottom: "0px",
+      right: "0px",
+      boxShadow: "0px -3px 12px 0px #00000017",
+      padding: "10px",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "end",
+      alignItems: "center",
+      gap: "8px",
+      background: background
     }
   };
 };

package/dist/Editor/themeSettingsAI/saveTheme.js

@@ -16,7 +16,8 @@ const SaveTheme = props => {
     saveBtnLabel,
     loading,
     onSave,
-    defaultFormData = {}
+    defaultFormData = {},
+    addNewTheme
   } = props;
 
   // State
@@ -25,8 +26,7 @@ const SaveTheme = props => {
   const [form, setForm] = useState(defaultFormData);
   const {
     name,
-    mood_name,
-    template_tags
+    mood_name
   } = form;
   const updateForm = update => {
     setForm(prev => ({
@@ -60,7 +60,7 @@ const SaveTheme = props => {
       // className={`blueBtn ${enableGenerateTheme ? "eanbled" : "disabled"}`}
       // disabled={!enableGenerateTheme}
       ,
-      className: `blueBtn`,
+      className: addNewTheme ? `outlineBtn` : `blueBtn`,
       onClick: () => setSaveTheme(true),
       children: saveBtnLabel
     }), /*#__PURE__*/_jsx(Dialog, {
@@ -88,7 +88,7 @@ const SaveTheme = props => {
               fontSize: "18px"
             },
             className: "fw-600",
-            children: "Save Your theme"
+            children: saveBtnLabel
           }), /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
             className: "closeBtn",
@@ -136,24 +136,20 @@ const SaveTheme = props => {
           value: mood_name
         }), /*#__PURE__*/_jsx(Error, {
           error: error?.mood_name
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          className: "fw-500",
+        }), loading ? /*#__PURE__*/_jsx(Box, {
           sx: {
-            pt: 2,
-            pb: 1
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 99999,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
           },
-          children: "Template Tags"
-        }), /*#__PURE__*/_jsx(TextField, {
-          variant: "outlined",
-          size: "small",
-          placeholder: "template_tags",
-          fullWidth: true,
-          onChange: e => updateForm({
-            template_tags: e.target.value
-          }),
-          value: template_tags
-        }), /*#__PURE__*/_jsxs(Grid, {
+          children: /*#__PURE__*/_jsx(CircularProgress, {})
+        }) : null, /*#__PURE__*/_jsxs(Grid, {
           container: true,
           justifyContent: "flex-end",
           sx: {
@@ -165,14 +161,13 @@ const SaveTheme = props => {
             color: "secondary",
             onClick: onClose,
             children: "Cancel"
-          }), /*#__PURE__*/_jsxs(Button, {
+          }), /*#__PURE__*/_jsx(Button, {
             variant: "contained",
             color: "primary",
             className: "blueBtn",
             sx: {
               ml: 1
             },
-            disabled: loading,
             onClick: async () => {
               const err = validate();
               setError(err);
@@ -181,15 +176,10 @@ const SaveTheme = props => {
               }
               await onSave({
                 ...form
-              });
+              }, addNewTheme);
               onClose();
             },
-            children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
-              size: 14,
-              style: {
-                marginRight: "10px"
-              }
-            }) : null, saveBtnLabel]
+            children: saveBtnLabel
           })]
         })]
       })

package/dist/Editor/themeSettingsAI/style.js

@@ -144,7 +144,11 @@ const style = () => ({
     border: "1px solid #2563EB",
     background: "#EBF1F9",
     height: "34px",
-    textTransform: "unset"
+    textTransform: "unset",
+    fontWeight: "bold",
+    "&:hover": {
+      background: "#EBF1F9"
+    }
   },
   ".seondaryOutlineBtn": {
     border: "1px solid #D8DDE1",
@@ -152,8 +156,12 @@ const style = () => ({
     // boxShadow: "0px 4px 10px 0px #00000026",
     height: "34px",
     textTransform: "unset",
-    background: "#eceef3",
-    color: "#64748B"
+    background: "#f5f6f9 !important",
+    color: "#64748B !important",
+    "&:hover": {
+      border: "1px solid #D8DDE1",
+      background: "#f5f6f9 !important"
+    }
   },
   ".blueBtn": {
     boxShadow: "0px 4px 10px 0px #00000026",
@@ -162,6 +170,7 @@ const style = () => ({
     textTransform: "unset",
     height: "34px",
     color: "#fff",
+    fontWeight: "bold",
     "&.disabled": {
       background: "#D9D9DD !important",
       color: "#fff !important"

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range, Text, Element } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -55,22 +55,14 @@ const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
-
-// const NEWLINESAFTER = [
-//   "headingOne",
-//   "headingTwo",
-//   "headingThree",
-//   "headingFour",
-//   "headingFive",
-//   "headingSix",
-// ];
-
+const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
 const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
   const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
+  console.log(isAligned, isIndent);
 
   /*If the node is already aligned and change in indent is called we should unwrap it first and split the node to prevent
     messy, nested DOM structure and bugs due to that.*/
@@ -83,10 +75,29 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
 
   /* Wraping the nodes for alignment, to allow it to co-exist with other block level operations*/
   if (isIndent) {
-    Transforms.wrapNodes(editor, {
-      type: format,
-      children: []
+    const [nodeEntry] = Editor.nodes(editor, {
+      at: editor.selection,
+      match: n => Element.isElement(n) && NEWLINESAFTER.indexOf(n.type) > -1
     });
+    // for heading background preserve while alignment change
+    if (nodeEntry) {
+      // for headings alone
+      Transforms.wrapNodes(editor, {
+        type: format,
+        children: []
+      }, {
+        at: editor.selection,
+        match: n => {
+          return Text.isText(n);
+        }
+      });
+    } else {
+      // follow old logic
+      Transforms.wrapNodes(editor, {
+        type: format,
+        children: []
+      });
+    }
     return;
   }
   Transforms.unwrapNodes(editor, {

package/package.json

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