@flozy/editor 5.1.8 → 5.1.9

package/dist/Editor/Elements/Divider/Divider.js

@@ -111,7 +111,7 @@ const Divider = props => {
       contentEditable: false,
       style: {
         zIndex: 1000,
-        left: "50%"
+        left: "0%"
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,

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

@@ -4,7 +4,7 @@ import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box, useTheme, Popper } from "@mui/material";
 import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
@@ -19,15 +19,15 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
-  setOpenNav
+  setOpenNav,
+  topM
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "0px",
-      right: "0px",
-      left: "auto",
+      top: "-5px",
+      left: topM ? "35px" : "0px",
       margin: "0px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -155,7 +155,10 @@ const Image = props => {
       }, {
         at: path
       });
-    }
+    },
+    MW: 32,
+    MH: 32,
+    MP: 2
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
@@ -277,7 +280,8 @@ const Image = props => {
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
         isEmpty: isEmpty,
         onSettings: onSettings,
-        setOpenNav: setOpenNav
+        setOpenNav: setOpenNav,
+        topM: size.width < 100
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,

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

@@ -52,6 +52,7 @@ const GridItemToolbar = props => {
     sx: classes.popTools,
     className: "gi-tool-pp",
     disablePortal: true,
+    contentEditable: false,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
@@ -354,12 +355,14 @@ const GridItem = props => {
       onMouseDown: onMouseDown,
       height: "auto"
     }) : null, /*#__PURE__*/_jsxs(Dialog, {
+      sx: classes.dialog,
       open: Boolean(alert),
       onClose: handleClose,
       children: [/*#__PURE__*/_jsx(DialogContent, {
         children: alert
       }), /*#__PURE__*/_jsx(DialogActions, {
         children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
           onClick: handleClose,
           children: "Close"
         })

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

@@ -106,6 +106,12 @@ const GridStyles = (theme, appTheme) => ({
         }
       }
     }
+  },
+  dialog: {
+    "& .MuiPaper-root": {
+      background: appTheme?.palette?.editor?.background,
+      color: appTheme?.palette?.editor?.textColor
+    }
   }
 });
 export default GridStyles;

package/dist/Editor/plugins/withHTML.js

@@ -2,6 +2,7 @@ import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
+const LIST_TAGS = ["ol", "ul", "img", "table"];
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -120,12 +121,21 @@ const withHtml = editor => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
-    let eltype = currentEl?.type;
+    const eltype = currentEl?.type;
+    const isTitlePath = editor?.selection?.anchor?.path[0] === 0;
     if (slateHTML && !formatFragment[eltype]) {
       const [tableCellNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
       });
       const decoded = decodeAndParseBase64(slateHTML);
+      if (decoded && decoded[0] && decoded[0]?.type !== "paragraph" && isTitlePath) {
+        decoded.unshift({
+          type: "title",
+          children: [{
+            text: ""
+          }]
+        });
+      }
       if (tableCellNode) {
         const tableCellChild = getTableCellChild(decoded);
         if (tableCellChild?.length) {
@@ -170,10 +180,40 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        handleInsert(editor, () => {
+          if (isTitlePath) {
+            Transforms.insertNodes(editor, [{
+              type: "title",
+              children: [{
+                text: ""
+              }]
+            }], {
+              at: [0]
+            });
+            insertData(data);
+          }
+        }, decoded);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const rootElement = parsed.body || parsed.documentElement;
+      const isList = LIST_TAGS.includes(rootElement.firstChild.tagName.toLowerCase());
+
+      // if selection is in title add the empty paragraph
+      if (isTitlePath && isList) {
+        // Check if the first child exists and is not a paragraph
+        if (!rootElement.firstChild || rootElement.firstChild.tagName.toLowerCase() !== "p") {
+          // Create a new empty paragraph element
+          const emptyParagraph = parsed.createElement("p");
+
+          // Insert the empty paragraph at the beginning
+          if (rootElement.firstChild) {
+            rootElement.insertBefore(emptyParagraph, rootElement.firstChild);
+          } else {
+            rootElement.appendChild(emptyParagraph);
+          }
+        }
+      }
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
         if (editor.isChatEditor) {

package/dist/Editor/utils/customHooks/useResize.js

@@ -4,7 +4,10 @@ const useResize = ({
   parentDOM,
   size: allSize,
   isGrid,
-  onChange
+  onChange,
+  MH,
+  MW,
+  MP
 }) => {
   const device = getDevice(window.innerWidth);
   const defaultSize = getBreakPointsValue(allSize);
@@ -52,9 +55,9 @@ const useResize = ({
       const cWP = calcWidth / width * 100;
       const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
       const calc = {
-        width: Math.max(calcWidth, 140),
-        height: Math.max(calcHeight, 50),
-        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, 15)
+        width: Math.max(calcWidth, MW || 140),
+        height: Math.max(calcHeight, MH || 50),
+        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, MP || 15)
       };
       latest = calc;
       return calc;

package/package.json

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