@flozy/editor 3.2.0 → 3.2.2

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

@@ -183,7 +183,7 @@ const Image = ({
         opacity: frame ? 0 : 1,
         cursor: webAddress ? "pointer" : "",
         border: `1px solid ${borderColor}`,
-        borderWidth: borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`
+        borderWidth: `${borderWidth}`?.includes('px') ? borderWidth : `${borderWidth}px`
       },
       alt: alt,
       src: url,

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

@@ -125,7 +125,7 @@ const TableCell = props => {
       classes: classes,
       onMouseDown: onMouseDown,
       height: tableDOM.getBoundingClientRect()?.height
-    }) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
+    }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
       className: "selection-area-tc",
       contentEditable: false
     }) : null]

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js

@@ -77,7 +77,6 @@ function SelectList({
     if (option.type === "block") {
       toggleBlock(editor, format);
     } else if (option.type === "accordion") {
-      toggleBlock(editor, format);
       insertAccordion(editor);
     }
   };

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

@@ -540,7 +540,7 @@ const usePopupStyle = theme => ({
       lineHeight: "1.75 !important",
       fontWeight: 400,
       background: theme?.palette?.editor?.background,
-      "& :hover": {
+      "&:hover": {
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {

package/dist/Editor/common/Shorthands/elements.js

@@ -10,6 +10,7 @@ import { TableUtil } from "../../utils/table";
 import Icon from "../Icon";
 import EmojiButton from "../../Elements/Emoji/EmojiButton";
 import { insertDivider } from "../../utils/divider";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
   name: "Heading 1",
@@ -175,6 +176,7 @@ const ELEMENTS_LIST = [{
     icon: "accordion"
   }),
   onInsert: editor => {
+    Transforms.delete(editor, editor.selection); // remove text '/accordion' typed by user
     insertAccordion(editor);
   }
 }, {

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 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 StyleContent = props => {
   const {
     value,
@@ -61,6 +62,9 @@ const StyleBuilder = props => {
     theme
   } = useEditorContext();
   const classes = useCommonStyle(theme);
+  const {
+    isMobile = false
+  } = customProps;
   const [elementProps, setElementProps] = useState(element);
   const [tab] = useState(renderTabs[0]?.value);
   const tabVal = renderTabs?.find(f => f.value === tab);
@@ -100,16 +104,8 @@ const StyleBuilder = props => {
   const handleClose = () => {
     onClose();
   };
-  return /*#__PURE__*/_jsx(Drawer, {
-    open: true,
-    className: ` dialogComp tools-drawer`,
-    anchor: "right",
-    onClose: onClose,
-    style: {
-      zIndex: "1300"
-    },
-    sx: classes.sideBarDrawer,
-    children: /*#__PURE__*/_jsxs(Grid, {
+  const renderDrawerMenu = () => {
+    return /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       sx: {
@@ -143,7 +139,7 @@ const StyleBuilder = props => {
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
-          maxHeight: `${window.innerHeight - 125}px`,
+          maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
           padding: "8px"
         },
         children: renderTabs.map((m, i) => {
@@ -173,6 +169,29 @@ const StyleBuilder = props => {
           children: "Save"
         })]
       }) : null]
+    });
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: isMobile ? /*#__PURE__*/_jsx(SwipeableDrawer, {
+      open: true,
+      className: ` dialogComp tools-drawer`,
+      anchor: "bottom",
+      onClose: onClose,
+      style: {
+        zIndex: "1300"
+      },
+      sx: classes.bottomBarDrawer,
+      children: renderDrawerMenu()
+    }) : /*#__PURE__*/_jsx(Drawer, {
+      open: true,
+      className: ` dialogComp tools-drawer`,
+      anchor: "right",
+      onClose: onClose,
+      style: {
+        zIndex: "1300"
+      },
+      sx: classes.sideBarDrawer,
+      children: renderDrawerMenu()
     })
   });
 };

package/dist/Editor/hooks/useDragDom.js

@@ -20,7 +20,7 @@ const useDragDom = props => {
         removeListener();
       };
     }
-  }, [refDom]);
+  }, [refDom, event]);
   const onMouseDown = e => {
     ePos.x = e.x;
     ePos.y = e.y;
@@ -39,16 +39,18 @@ const useDragDom = props => {
     }
   };
   const onMouseUp = e => {
-    setEvent("end");
-    ePos.x = 0;
-    ePos.y = 0;
     if (event === "start") {
-      setDelta({
-        x: e.x - ePos.x,
-        y: e.y - ePos.y
-      });
+      setEvent("end");
+      ePos.x = 0;
+      ePos.y = 0;
+
+      // setDelta({
+      //   x: e.x - ePos.x,
+      //   y: e.y - ePos.y,
+      // });
     }
   };
+
   const onClear = () => {
     setDelta({
       x: 0,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -211,20 +211,24 @@ export const getMarked = (leaf, children) => {
     } : {
       color: leaf.color
     };
-    children = /*#__PURE__*/_jsx(Box, {
-      className: className,
-      component: "span",
-      sx: {
-        fontSize: {
-          lg: sizeMap[leaf.fontSize] || leaf.fontSize,
-          ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-        },
-        background: leaf.bgColor,
-        ...textStyles,
-        fontFamily: family,
-        fontWeight: leaf.fontWeight
+    children = /*#__PURE__*/_jsx("span", {
+      style: {
+        background: leaf.bgColor
       },
-      children: children
+      children: /*#__PURE__*/_jsx(Box, {
+        className: className,
+        component: "span",
+        sx: {
+          fontSize: {
+            lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+            ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
+          },
+          ...textStyles,
+          fontFamily: family,
+          fontWeight: leaf.fontWeight
+        },
+        children: children
+      })
     });
   }
   if (leaf.decoration === "link") {

package/dist/Editor/utils/helper.js

@@ -235,7 +235,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       props.component = "a";
       const [page, section] = url.split("#");
       const sec = section ? `#${section}` : "";
-      props.href = page === "home" ? sec : `/${url}`;
+      props.href = page === "home" ? `/${sec}` : `/${url}`;
       if (openInNewTab) {
         props.target = "_blank";
       }

package/package.json

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