@flozy/editor 3.1.9 → 3.2.1

package/dist/Editor/Editor.css

@@ -931,6 +931,11 @@ blockquote {
   span {
     text-transform: capitalize;
   }
+  @media only screen and (max-width: 599px) {
+  background-color: unset;
+  display: flex;
+  justify-content: center;
+}
 }
 
 .textFontArrows {

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

@@ -54,8 +54,8 @@ const Image = ({
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
-  const [showTool] = useEditorSelection(editor);
   const [openNav, setOpenNav] = useState(false);
+  const isEmpty = !url && !readOnly;
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -83,6 +83,22 @@ const Image = ({
     selectedPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",") || selectedPath === path?.join(",");
+  const {
+    onClick,
+    onTouchEnd
+  } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
+  const handleImageClick = () => {
+    Transforms.select(editor, {
+      anchor: Editor.start(editor, path),
+      focus: Editor.end(editor, path)
+    });
+    if (onClick) {
+      onClick();
+    }
+    if (onTouchEnd) {
+      onTouchEnd();
+    }
+  };
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -117,7 +133,7 @@ const Image = ({
     onSave(data);
   };
   const ToolBar = () => {
-    return /*#__PURE__*/_jsxs("div", {
+    return !isEmpty ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       style: {
@@ -141,29 +157,16 @@ const Image = ({
           children: /*#__PURE__*/_jsx(LinkIcon, {})
         })
       })]
-    });
+    }) : null;
   };
   const ImageContent = () => {
-    const {
-      onClick,
-      onTouchEnd
-    } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
-    const handleImageClick = () => {
-      Transforms.select(editor, {
-        anchor: Editor.start(editor, path),
-        focus: Editor.end(editor, path)
-      });
-      if (onClick) {
-        onClick();
-      }
-      if (onTouchEnd) {
-        onTouchEnd();
-      }
-    };
     return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
       component: "button",
       className: "element-empty-btn",
       contentEditable: false,
+      onClick: () => {
+        setOpenSettings(true);
+      },
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "image"
       }), "Add Image"]
@@ -180,7 +183,7 @@ const Image = ({
         opacity: frame ? 0 : 1,
         cursor: webAddress ? "pointer" : "",
         border: `1px solid ${borderColor}`,
-        borderWidth: borderWidth?.['borderWidth'] ? borderWidth?.['borderWidth'] : "1px"
+        borderWidth: `${borderWidth}`?.includes('px') ? borderWidth : `${borderWidth}px`
       },
       alt: alt,
       src: url,

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

@@ -51,6 +51,12 @@ const usePopupStyle = theme => ({
       "& button": {
         color: theme?.palette?.editor?.textColor
       }
+    },
+    "@media only screen and (max-width: 599px)": {
+      padding: "10px",
+      background: "unset",
+      boxShadow: "unset",
+      border: "none"
     }
   },
   textFormatWrapper: {
@@ -70,6 +76,9 @@ const usePopupStyle = theme => ({
       "& .ele-item-single": {
         paddingLeft: "4px",
         paddingTop: "4px"
+      },
+      "@media only screen and (max-width: 599px)": {
+        width: '330px'
       }
     },
     "&.templates": {
@@ -78,6 +87,9 @@ const usePopupStyle = theme => ({
       "&.fullscreen": {
         width: "100%",
         maxHeight: "fit-content"
+      },
+      "@media only screen and (max-width: 599px)": {
+        width: '330px'
       }
     },
     "& .headerContainer": {},
@@ -130,6 +142,9 @@ const usePopupStyle = theme => ({
           color: theme?.palette?.editor?.activeColor
         }
       }
+    },
+    "@media only screen and (max-width: 599px)": {
+      width: '330px'
     }
   },
   textFormatLabel: {
@@ -525,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/embedImageStyle.js

@@ -62,20 +62,21 @@ const embedImageStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }, {
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
-  }]
-}, {
-  tab: "Border width",
-  value: "borderWidth",
-  fields: [{
-    label: "Border width",
+  }, {
+    label: "Border Width",
     key: "borderWidth",
-    type: "borderWidth"
+    type: "text",
+    placeholder: "1px"
   }]
 }, {
   tab: "Position",
@@ -102,10 +103,6 @@ const embedImageStyle = [{
     label: "Background Color",
     key: "bgColor",
     type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
   }, {
     label: "Box Shadow",
     key: "boxShadow",

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

@@ -15,12 +15,10 @@ import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
 import FontSize from "./fontSize";
-import borderWidth from "./borderWidth";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
   borderRadius: BorderRadius,
-  borderWidth: borderWidth,
   color: Color,
   alignment: Alignment,
   backgroundImage: BackgroundImage,

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.1.9",
+  "version": "3.2.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"

package/dist/Editor/common/StyleBuilder/fieldTypes/borderWidth.js

@@ -1,75 +0,0 @@
-import React from "react";
-import { Grid, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const borderWidth = props => {
-  const {
-    value,
-    data,
-    onChange
-  } = props;
-  const {
-    key
-  } = data;
-  const widthType = "px";
-  const wkey = "borderWidth";
-  const handleChange = e => {
-    onChange({
-      [key]: {
-        ...(value || {}),
-        [e.target.name]: isNaN(e.target.value) ? "" : parseInt(e.target.value)
-      }
-    });
-  };
-  const onSizeType = cData => () => {
-    onChange({
-      [key]: {
-        ...(value || {}),
-        ...cData
-      }
-    });
-  };
-  return /*#__PURE__*/_jsxs(Grid, {
-    item: true,
-    xs: 12,
-    style: {
-      marginBottom: "12px"
-    },
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "body1",
-      color: "primary",
-      sx: {
-        fontSize: "14px",
-        fontWeight: "500",
-        marginBottom: "5px"
-      },
-      children: "Border Width"
-    }), /*#__PURE__*/_jsx(TextField, {
-      fullWidth: true,
-      name: wkey,
-      size: "small",
-      value: value ? value[wkey] : "1",
-      placeholder: "Border Width",
-      onChange: handleChange,
-      InputProps: {
-        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            className: widthType === "px" ? "active" : "",
-            size: "small",
-            onClick: onSizeType({
-              widthType: "px",
-              widthInPercent: null,
-              width: isNaN(value?.borderWidth) ? 1 : value?.borderWidth || 1
-            }),
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: "PX"
-            })
-          })
-        })
-      }
-    })]
-  });
-};
-export default borderWidth;