@flozy/editor 1.8.6 → 1.8.7

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

@@ -63,7 +63,7 @@ const Image = ({
   const selected = hoverPath === path.join(",");
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
-      const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
+      const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
       onLoad(element?.size || {});
     }

package/dist/Editor/Styles/EditorStyles.js

@@ -103,7 +103,15 @@ const editorStyles = ({
             display: "block",
             left: "8px",
             top: "8px",
-            width: "fit-content"
+            width: "fit-content",
+            "& button": {
+              boxShadow: "none",
+              color: "rgb(85, 85, 85)",
+              background: "rgb(221, 221, 221, 0.1)",
+              "&:hover": {
+                background: "rgb(221, 221, 221, 0.8)"
+              }
+            }
           }
         },
         "&.hselect:before": {

package/dist/Editor/common/DnD/DragHandle.js

@@ -12,7 +12,7 @@ const DragHandleStyle = () => ({
   root: {
     position: "relative",
     "&:hover": {
-      "& > .dh-para:first-child": {
+      "& > .dh-para:first-of-type": {
         opacity: 1
       }
     },
@@ -74,7 +74,6 @@ const DragHandle = props => {
     if (moved) {
       const upPath = ReactEditor.findPath(editor, element);
       try {
-        alert(upPath);
         Transforms.removeNodes(editor, {
           at: upPath
         });
@@ -89,7 +88,7 @@ const DragHandle = props => {
   return canDraggable ? /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     component: "div",
-    className: `${dragging ? "dragging" : ""}`,
+    className: `drag-wrpr ${dragging ? "dragging" : ""}`,
     sx: classes.root,
     children: [/*#__PURE__*/_jsx(Droppable, {
       id: id,

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box } from "@mui/material";
+import Draggable from "./Draggable";
+import Droppable from "./Droppable";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { Transforms } from "slate";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headinTwo", "headingThree", "grid"];
+const DragHandleStyle = () => ({
+  dragHandle: {
+    opacity: 0,
+    content: '" "',
+    position: "absolute",
+    top: "2px",
+    left: "-52px",
+    borderRadius: "0px",
+    padding: "0px",
+    width: "20px",
+    height: "20px",
+    border: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "grab",
+    color: "rgb(85, 85, 85)",
+    background: "rgb(221, 221, 221, 0.1)",
+    "& svg": {
+      width: "20px"
+    },
+    "&:hover": {
+      opacity: 1,
+      background: "rgb(221, 221, 221, 0.8)"
+    },
+    "&.active": {
+      opacity: 1,
+      cursor: "grabbing"
+    }
+  },
+  dropArea: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    "&.dragging": {
+      backgroundColor: "#def4ff"
+    }
+  },
+  dropAreaOver: {
+    height: "4px"
+  }
+});
+const DragHandle = props => {
+  const classes = DragHandleStyle();
+  const editor = useSlateStatic();
+  const [dragging, setDragging] = useState(false);
+  const {
+    element
+  } = props;
+  const path = ReactEditor.findPath(editor, element);
+  const canDraggable = DRAGGABLE_TYPES.indexOf(element?.type) > -1;
+  const id = `${element.type}_${[...path].join("|")}`;
+  const {
+    moved
+  } = element;
+  const {
+    drop
+  } = useEditorContext();
+  useEffect(() => {
+    if (moved) {
+      const upPath = ReactEditor.findPath(editor, element);
+      try {
+        Transforms.removeNodes(editor, {
+          at: upPath
+        });
+      } catch (err) {
+        console.log(err, upPath);
+      }
+    }
+  }, [moved]);
+  const handleOnDrag = isDragging => {
+    setDragging(isDragging);
+  };
+  return canDraggable ? /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: dragging ? "dragging" : "",
+      sx: classes.dropArea
+    }), /*#__PURE__*/_jsx(Droppable, {
+      id: id,
+      classes: classes
+    }), /*#__PURE__*/_jsx(Draggable, {
+      id: id,
+      classes: classes,
+      onDrag: handleOnDrag
+    })]
+  }, `${id}_${drop}`) : null;
+};
+export default DragHandle;

package/dist/Editor/common/DnD/Droppable.js

@@ -14,7 +14,7 @@ const Droppable = props => {
     id: id
   });
   const dropStyle = {
-    backgroundColor: isOver ? "green" : undefined
+    backgroundColor: isOver ? "#47bbf5" : undefined
   };
   return /*#__PURE__*/_jsx(Box, {
     ref: setNodeRef,
@@ -22,7 +22,7 @@ const Droppable = props => {
     className: `droppable-para`,
     contentEditable: false,
     style: dropStyle,
-    sx: classes.dropArea
+    sx: classes.dropAreaOver
   });
 };
 export default Droppable;

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

@@ -5,9 +5,20 @@ import { Box, IconButton, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+import DragHandle from "../DnD/DragHandleButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const SectionStyle = () => ({
+  root: {
+    "&:hover": {
+      "& .dh-para": {
+        opacity: 1
+      }
+    }
+  }
+});
 const Section = props => {
+  const classes = SectionStyle();
   const {
     children,
     element,
@@ -47,7 +58,7 @@ const Section = props => {
       className: "element-toolbar no-border-button ss hr section-tw",
       style: {
         left: "-28px",
-        top: "0px"
+        top: "2px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
@@ -86,6 +97,7 @@ const Section = props => {
     component: "section",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
     sx: {
+      ...classes.root,
       background: sectionBgColor,
       ...sectionBgImage,
       padding: {
@@ -104,7 +116,9 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
+      children: [/*#__PURE__*/_jsx(DragHandle, {
+        ...props
+      }), children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -37,6 +37,7 @@ import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
+import insertNewLine from "./insertNewLine";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -44,6 +45,7 @@ const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
+const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -86,6 +88,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
       children: []
     });
   }
+  if (NEWLINESAFTER.indexOf(format) > -1) {
+    insertNewLine(editor);
+  }
 };
 export const addMarkData = (editor, data) => {
   try {

package/dist/Editor/utils/events.js

@@ -127,7 +127,12 @@ export const escapeEvent = props => {
 };
 export const enterEvent = (e, editor, ele) => {
   try {
-    if (ele && ele[0]) {
+    // on shift enter break line in same node
+    if (e.shiftKey) {
+      console.log("shif enter");
+      e.preventDefault();
+      Transforms.insertText(editor, "\n");
+    } else if (ele && ele[0]) {
       const {
         type
       } = ele[0];

package/package.json

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