@flozy/editor 1.5.9 → 1.6.1

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

@@ -18,7 +18,9 @@ const Video = ({
 }) => {
   const {
     url,
-    alt
+    alt,
+    alignment,
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -28,6 +30,14 @@ const Video = ({
   const {
     readOnly
   } = customProps;
+  const {
+    vertical,
+    horizantal
+  } = alignment || {};
+  const {
+    left,
+    right
+  } = bannerSpacing || {};
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
@@ -93,14 +103,17 @@ const Video = ({
       at: path
     });
   };
+  const totalMinus = parseInt(left || 0) + parseInt(right || 0);
+  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover",
     style: {
       display: "flex",
-      width: "100%",
-      maxWidth: "100%",
-      boxShadow: selected && focused && "0 0 3px 3px lightgray"
+      width: `calc(100% - ${totalMinus}px)`,
+      boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      justifyContent: horizantal,
+      alignContent: vertical
     },
     ...element.attr,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
@@ -114,7 +127,7 @@ const Video = ({
       contentEditable: false,
       style: {
         position: "relative",
-        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
+        width: `${width}`,
         height: `${size.height}px`
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
@@ -136,8 +149,10 @@ const Video = ({
         className: "embedd-iframe",
         style: {
           border: "none",
+          position: "absolute",
           width: "100%",
-          height: "100%"
+          height: "100%",
+          left: "0px"
         },
         src: url,
         title: alt

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -0,0 +1,73 @@
+import React, { useState, forwardRef, useImperativeHandle } from "react";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { Paper, Popover } from "@mui/material";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { insertEmoji } from "../../utils/emoji";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    icoBtnType,
+    selectionTarget
+  } = props;
+  const editor = useSlateStatic();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [target, setTarget] = useState(selectionTarget);
+  const open = Boolean(anchorEl);
+  useImperativeHandle(ref, () => ({
+    triggerClick: target => {
+      setTarget(target);
+      onClick();
+    }
+  }));
+  const onClick = () => {
+    if (editor.selection) {
+      const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect: () => rect,
+        nodeType: 1
+      });
+    }
+  };
+  const onEmojiSelect = emoji => {
+    insertEmoji(editor, emoji?.native, target || editor.selection);
+    setAnchorEl(null);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Emoji",
+      onClick: onClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "emoji"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(Popover, {
+      style: {
+        zIndex: 10001
+      },
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      onClose: handleClose,
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: /*#__PURE__*/_jsx(Picker, {
+          data: data,
+          onEmojiSelect: onEmojiSelect
+        })
+      })
+    })]
+  });
+});
+EmojiButton.displayName = "EmojiButton";
+export default EmojiButton;

package/dist/Editor/Elements/Form/Form.js

@@ -3,9 +3,8 @@ import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 import BackupIcon from "@mui/icons-material/Backup";
+import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
 import { formField } from "../../utils/formfield";
@@ -61,6 +60,7 @@ const Form = props => {
   const [editButton, setEditButton] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const [loading, setLoading] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
     borderImageSource: buttonProps?.borderColor,
@@ -170,33 +170,42 @@ const Form = props => {
       setAnchorEl(e.currentTarget);
     }
   };
+  const onMouseOver = () => {
+    setShowOptions(true);
+  };
+  const onMouseLeave = () => {
+    setShowOptions(false);
+  };
   const FormToolbar = () => {
     return /*#__PURE__*/_jsxs("div", {
-      className: "",
+      className: "element-toolbar hr",
       contentEditable: false,
       style: {
-        backgroundColor: "#ccc",
-        width: "fit-content"
+        top: "-42px",
+        left: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Form Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          className: "mr",
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Form Field",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddFormField,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          className: "mr",
+          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete Form",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,
+          className: "mr",
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]
@@ -206,10 +215,12 @@ const Form = props => {
     ...attributes,
     className: "form-wrapper element-root",
     style: {
-      border: !readOnly ? "1px dotted red" : "none",
+      border: !readOnly ? "none" : "none",
       padding: "10px"
     },
-    children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    children: [/*#__PURE__*/_jsxs("form", {
       id: `${formName}`,
       onSubmit: handleSubmit,
       style: {
@@ -222,14 +233,14 @@ const Form = props => {
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`
+        paddingBottom: `${bottom}px`,
+        position: "relative"
       },
       ref: formEle,
       children: [/*#__PURE__*/_jsx(Grid, {
         className: "form-grid",
         item: true,
         xs: 12,
-        spacing: 2,
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
@@ -278,7 +289,7 @@ const Form = props => {
             })
           })]
         })
-      }), loading && /*#__PURE__*/_jsx("div", {
+      }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
         style: {
           position: "absolute",
           top: 0,
@@ -314,7 +325,7 @@ const Form = props => {
           title: "Button Settings",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
-            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+            children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
           })
         })
       }), /*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Elements/Form/FormButton.js

@@ -1,21 +1,23 @@
 import React from "react";
 import { useSlateStatic } from "slate-react";
-import { IconButton, Tooltip } from "@mui/material";
-import { FormIcon } from "../../common/iconslist";
 import { insertForm } from "../../utils/form";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FormButton = props => {
+const FormButton = ({
+  icoBtnType
+}) => {
   const editor = useSlateStatic();
   const onClick = () => {
     insertForm(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Form",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: onClick,
-      children: /*#__PURE__*/_jsx(FormIcon, {})
-    })
+    onClick: onClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "form"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default FormButton;

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -12,7 +12,9 @@ const FormText = props => {
     borderWidth,
     borderColor,
     textColor,
-    bgColor
+    bgColor,
+    lockSpacing,
+    ...rest
   } = fieldProps;
   const {
     left,
@@ -36,7 +38,7 @@ const FormText = props => {
     },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("input", {
-      ...fieldProps,
+      ...rest,
       onChange: onChange,
       style: {
         width: "100%",

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -12,7 +12,8 @@ const FormTextArea = props => {
     borderWidth,
     borderColor,
     textColor,
-    bgColor
+    bgColor,
+    ...rest
   } = fieldProps;
   const {
     left,
@@ -36,7 +37,7 @@ const FormTextArea = props => {
     },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("textarea", {
-      ...fieldProps,
+      ...rest,
       onChange: onChange,
       style: {
         width: "100%",

package/dist/Editor/Elements/Form/FormField.js

@@ -12,6 +12,7 @@ const FormField = props => {
   const {
     attributes,
     element,
+    children: rootChildren,
     customProps
   } = props;
   const {
@@ -94,7 +95,12 @@ const FormField = props => {
       element: element,
       onSave: onSave,
       onClose: onClose
-    }) : null]
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: rootChildren
+    })]
   });
 };
 export default FormField;

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

@@ -1,15 +1,20 @@
+/* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from "react";
 import { Transforms, Path, Node } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
-import { IconButton, Tooltip } from "@mui/material";
-// import CompressIcon from "@mui/icons-material/Compress";
+import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
-import useDragAndDrop from "../../common/useDragAndDrop";
+// import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
 import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
   const {
@@ -29,7 +34,7 @@ const Grid = props => {
     bgColor,
     alignment,
     backgroundImage,
-    size: elSize,
+    // size: elSize,
     fgColor,
     borderWidth,
     borderColor,
@@ -53,23 +58,24 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  const {
-    height: elHeight
-  } = elSize || {};
+  // const { height: elHeight } = elSize || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
   // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [parentDOM, setParentDOM] = useState(null);
-
   // resize
-  const [size, onMouseDown, resizing, onLoad] = useResize({
+  const [size,, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size,
     isGrid: true
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -154,49 +160,115 @@ const Grid = props => {
       console.log(err);
     }
   };
-  const onDrop = dropElement => {
+  const onMoveSection = direction => e => {
     try {
-      Transforms.insertNodes(editor, JSON.parse(dropElement), {
-        at: path,
-        select: true
-      });
+      e.preventDefault();
+      e.stopPropagation();
+      if (direction) {
+        let moveTo = direction === "up" ? path[0] - 1 : path[0] + 1;
+        if (moveTo < 0) {
+          moveTo = 0;
+        } else if (moveTo > editor.children.length - 1) {
+          moveTo = editor.children.length - 1;
+        }
+        Transforms.moveNodes(editor, {
+          at: [path[0]],
+          to: [moveTo]
+        });
+      }
     } catch (err) {
       console.log(err);
     }
   };
-  const onDragEnd = () => {
+  const onNewLine = direction => () => {
     try {
-      const currentDelpath = ReactEditor.findPath(editor, element);
-      if (currentDelpath) {
-        Transforms.removeNodes(editor, {
-          at: currentDelpath
+      if (direction) {
+        let moveTo = direction === "up" ? path[0] - 1 : path[0] + 1;
+        let lastLine = false;
+        if (moveTo < 0) {
+          moveTo = 0;
+        } else if (moveTo > editor.children.length - 1) {
+          moveTo = editor.children.length;
+          lastLine = true;
+        }
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: [moveTo]
         });
+        if (lastLine) {
+          Transforms.move(editor, {
+            at: [moveTo]
+          });
+        }
       }
     } catch (err) {
       console.log(err);
     }
   };
-  const grid_drag_id = `grid_drag_${path.join("_")}`;
-  const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
-    editor,
-    id: grid_drag_id,
-    selected,
-    path,
-    element,
-    onDragEnd,
-    onDrop
-  });
 
-  // const onMouseOver = (e) => {
-  //   e.stopPropagation();
-  //   setSelected(true);
+  // const onDrop = (dropElement) => {
+  //   try {
+  //     Transforms.insertNodes(editor, JSON.parse(dropElement), {
+  //       at: path,
+  //       select: true,
+  //     });
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
   // };
 
-  // const onMouseLeave = (e) => {
-  //   e.stopPropagation();
-  //   setSelected(false);
+  // const onDragEnd = () => {
+  //   try {
+  //     const currentDelpath = ReactEditor.findPath(editor, element);
+  //     if (currentDelpath) {
+  //       Transforms.removeNodes(editor, { at: currentDelpath });
+  //     }
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
   // };
 
+  // const grid_drag_id = `grid_drag_${path.join("_")}`;
+
+  // const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
+  //   editor,
+  //   id: grid_drag_id,
+  //   selected,
+  //   path,
+  //   element,
+  //   onDragEnd,
+  //   onDrop,
+  // });
+
+  const NewLineButtons = () => {
+    return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-ctrl tc",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Add Space above",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onNewLine("up"),
+            children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-ctrl bc",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Add Space below",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onNewLine("down"),
+            children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
+          })
+        })
+      })]
+    }) : null;
+  };
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -222,7 +294,23 @@ const Grid = props => {
           onClick: onAddSection(null, true),
           children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
-      })]
+      }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          title: "Move Up",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMoveSection("up"),
+            children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Move Down",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMoveSection("down"),
+            children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
+          })
+        })]
+      }) : null]
     }) : null;
   };
   const sectionId = id ? {
@@ -231,8 +319,9 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
-  return /*#__PURE__*/_jsxs("div", {
-    className: `grid-container ${grid} has-hover element-root ${isDragging ? "dragging" : ""} ${isActiveDrag ? "active_drag" : ""}`,
+  return /*#__PURE__*/_jsxs(GridContainer, {
+    container: true,
+    className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
     style: {
@@ -243,10 +332,8 @@ const Grid = props => {
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
-    }
-    // onMouseOver={onMouseOver}
-    // onMouseLeave={onMouseLeave}
-    ,
+    },
+    "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -279,7 +366,9 @@ const Grid = props => {
       onClose: onClose,
       onDelete: onDelete,
       customProps: customProps
-    }) : null, /*#__PURE__*/_jsx("div", {
+    }) : null, /*#__PURE__*/_jsx(GridContainer, {
+      item: true,
+      xs: 12,
       className: "grid-c-wrpr",
       style: {
         display: "flex",
@@ -290,11 +379,18 @@ const Grid = props => {
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
-        width: "100%",
-        height: resizing ? `${size?.height}px` : elHeight ? `${elHeight}px` : "fit-content"
+        width: "100%"
+        // height cause overlap issues TBD
+        // height: resizing
+        //   ? `${size?.height}px`
+        //   : elHeight
+        //   ? `${elHeight}px`
+        //   : "fit-content",
       },
+
+      "data-path": path.join(","),
       children: children
-    })]
+    }), /*#__PURE__*/_jsx(NewLineButtons, {})]
   });
 };
 export default Grid;