@flozy/editor 1.8.5 → 1.8.7

package/dist/Editor/CommonEditor.js

@@ -100,7 +100,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     CHARACTERS = [],
     editorClass,
     fixedWidth = "60%",
-    fullWidth = "80%"
+    fullWidth = "80%",
+    hideTools
   } = otherProps || {};
   const [drag, setDrag] = useState(null);
   const editor = useMemo(() => {
@@ -243,7 +244,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = mentions;
   const chars = type ? Shorthands[type]({
     ...mentions,
-    CHARACTERS
+    CHARACTERS,
+    hideTools: hideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);

package/dist/Editor/Editor.css

@@ -330,6 +330,10 @@ blockquote {
   border-radius: 12px;
 }
 
+.activeBrush svg {
+  stroke: #2563eb;
+}
+
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;

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/Elements/Embed/Video.js

@@ -58,7 +58,7 @@ const Video = ({
     bottomRight
   } = borderRadius || {};
   useEffect(() => {
-    if (editor && ele[1] !== undefined) {
+    if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
       onLoad(element?.size || {});

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -333,7 +333,7 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: brush.size === m ? "active" : "",
+                      className: brush.size === m ? "activeBrush" : "",
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
                           width: 20 + m,

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/Toolbar/Mini/MiniToolbar.js

@@ -37,6 +37,10 @@ const MiniToolbar = props => {
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
   const DialogComp = !fullScreen ? Popper : Dialog;
+  const {
+    hideTools
+  } = customProps;
+  const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
   useEffect(() => {
     if (popper) {
       setPopper(null);
@@ -58,7 +62,7 @@ const MiniToolbar = props => {
       component: "div",
       className: "mini-tool-wrpr-ei",
       sx: classes.root,
-      children: MENU_OPTIONS.map(({
+      children: UPDATED_MENU_OPTIONS.map(({
         type,
         label,
         icon: Icon

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

@@ -11,6 +11,10 @@ const AddElements = props => {
     editor,
     customProps
   } = props;
+  const {
+    hideTools
+  } = customProps;
+  const filteredElements = elements.filter(f => hideTools.indexOf(f.type) === -1);
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -18,7 +22,7 @@ const AddElements = props => {
     style: {
       margin: 0
     },
-    children: elements.map(m => {
+    children: filteredElements.map(m => {
       return /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 6,

package/dist/Editor/Toolbar/Toolbar.js

@@ -157,14 +157,6 @@ export const RenderToolbarIcon = props => {
           editor: editor,
           customProps: customProps
         }, element.id);
-      // case "drawer":
-      //   return (
-      //     <DrawerMenuButton
-      //       key={element.id}
-      //       editor={editor}
-      //       customProps={customProps}
-      //     />
-      //   );
       case "app-header":
         return /*#__PURE__*/_jsx(AppHeaderButton, {
           editor: editor,

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/common/Shorthands/elements.js

@@ -14,6 +14,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 1",
   desc: "",
   group: "Text",
+  type: "headingOne",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingOne"
   }),
@@ -22,6 +23,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 2",
   desc: "",
   group: "Text",
+  type: "headingTwo",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingTwo"
   }),
@@ -30,6 +32,7 @@ const ELEMENTS_LIST = [{
   name: "Heading 3",
   desc: "",
   group: "Text",
+  type: "headingThree",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "headingThree"
   }),
@@ -38,6 +41,7 @@ const ELEMENTS_LIST = [{
   name: "Quote",
   desc: "",
   group: "Text",
+  type: "blockquote",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "blockquote"
   }),
@@ -48,6 +52,7 @@ const ELEMENTS_LIST = [{
   name: "Colorbox",
   desc: "",
   group: "Text",
+  type: "colorbox",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "colorbox"
   }),
@@ -58,6 +63,7 @@ const ELEMENTS_LIST = [{
   name: "Ordered List",
   desc: "",
   group: "List",
+  type: "orderedList",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "orderedList"
   }),
@@ -66,6 +72,7 @@ const ELEMENTS_LIST = [{
   name: "Bulleted List",
   desc: "",
   group: "List",
+  type: "unorderedList",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "unorderedList"
   }),
@@ -74,6 +81,7 @@ const ELEMENTS_LIST = [{
   name: "Check List",
   desc: "",
   group: "List",
+  type: "check-list-item",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "check-list-item"
   }),
@@ -82,6 +90,7 @@ const ELEMENTS_LIST = [{
   name: "Image",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "image"
   }),
@@ -90,6 +99,7 @@ const ELEMENTS_LIST = [{
   name: "Video",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "video"
   }),
@@ -98,6 +108,7 @@ const ELEMENTS_LIST = [{
   name: "Embed",
   desc: "",
   group: "Media",
+  type: "embed",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "embed"
   }),
@@ -106,6 +117,7 @@ const ELEMENTS_LIST = [{
   name: "Emoji",
   group: "Elements",
   desc: "",
+  type: "emoji",
   renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
     ...rest,
     icoBtnType: "cmd"
@@ -114,6 +126,7 @@ const ELEMENTS_LIST = [{
   name: "Table",
   group: "Elements",
   desc: "",
+  type: "table",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "table"
   }),
@@ -125,6 +138,7 @@ const ELEMENTS_LIST = [{
   name: "Grid",
   group: "Elements",
   desc: "",
+  type: "grid",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "grid"
   }),
@@ -135,6 +149,7 @@ const ELEMENTS_LIST = [{
   name: "Accordion",
   group: "Elements",
   desc: "",
+  type: "accordion",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "accordion"
   }),
@@ -145,6 +160,7 @@ const ELEMENTS_LIST = [{
   name: "Button",
   group: "Elements",
   desc: "",
+  type: "button",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "button"
   }),
@@ -155,6 +171,7 @@ const ELEMENTS_LIST = [{
   name: "Signature",
   group: "Elements",
   desc: "",
+  type: "signature",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "signature"
   }),
@@ -165,6 +182,7 @@ const ELEMENTS_LIST = [{
   name: "Carousel",
   group: "Elements",
   desc: "",
+  type: "carousel",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "carousel"
   }),
@@ -175,6 +193,7 @@ const ELEMENTS_LIST = [{
   name: "Form",
   group: "Elements",
   desc: "",
+  type: "form",
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "form"
   }),
@@ -184,8 +203,10 @@ const ELEMENTS_LIST = [{
 }];
 const elements = props => {
   const {
-    search
+    search,
+    hideTools
   } = props;
-  return ELEMENTS_LIST.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
+  const filteredElements = ELEMENTS_LIST.filter(f => hideTools.indexOf(f.type) === -1);
+  return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
 };
 export default elements;

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

@@ -15,17 +15,21 @@ const StyleContent = props => {
     customProps,
     handleClose
   } = props;
+  const {
+    hideTools
+  } = customProps;
   const tabContent = renderTabs.find(f => f.value === value);
   const {
     fields
   } = tabContent || {
     fields: []
   };
+  const filteredFields = hideTools?.length > 0 ? fields.filter(f => hideTools.indexOf(f.key) === -1) : fields;
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     spacing: 2,
     className: "sidebar-wrpr-eds",
-    children: [...fields].map((m, i) => {
+    children: [...filteredFields].map((m, i) => {
       const FieldComponent = FieldMap[m.type];
       return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
         data: m,

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