@flozy/editor 4.6.0 → 4.6.1

package/dist/Editor/CommonEditor.js

@@ -439,12 +439,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
-  const handleContextMenu = e => {
-    if (!readOnly) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
+
+  // const handleContextMenu = (e) => {
+  //   if (!readOnly) {
+  //     e.preventDefault();
+  //     e.stopPropagation();
+  //   }
+  // };
+
   const handleCursorScroll = container => {
     try {
       if (!customProps?.isMobile) {
@@ -481,8 +483,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         style: {
           ...dotBg
         },
-        "data-breakpoint": breakpoint,
-        onContextMenu: handleContextMenu,
+        "data-breakpoint": breakpoint
+        // onContextMenu={handleContextMenu}
+        ,
         children: /*#__PURE__*/_jsxs(Slate, {
           editor: editor,
           initialValue: value,

package/dist/Editor/Editor.css

@@ -1206,4 +1206,17 @@ blockquote {
 
 .freegrid-section {
   max-width: 100% !important;
+}
+
+.divider-settings {
+  display: none;
+  position: absolute;
+}
+
+.dividerComponent:hover {
+  padding: 10px 0;
+}
+
+.dividerComponent:hover .divider-settings {
+  display: block;
 }

package/dist/Editor/Elements/Divider/Divider.js

@@ -1,30 +1,129 @@
-import React from "react";
+import React, { useState } from "react";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import { GridSettingsIcon } from "../../common/iconslist";
+import DividerPopup from "./DividerPopup";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
   const {
     attributes,
-    children
+    children,
+    element,
+    customProps
   } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    borderColor = theme?.palette?.text?.primary || '#0F172A',
+    borderWidth = '1px',
+    borderStyle = 'solid'
+  } = element;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [openSettings, setOpenSettings] = useState(false);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const [showTool] = useEditorSelection(editor);
+  const selected = hoverPath === path.join(",");
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const DividerToolbar = ({
+    selected,
+    showTool,
+    onSettings
+  }) => {
+    return /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      className: "divider-settings",
+      style: {
+        top: "-20px",
+        left: 0
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Divider Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          sx: {
+            boxShadow: '0px 0px 4px 0px #00000040',
+            borderRadius: '50%'
+          },
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        })
+      })
+    });
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "dividerComponent",
-    contentEditable: "false",
     style: {
-      userSelect: "none"
+      userSelect: "none",
+      position: 'relative'
     },
-    children: [/*#__PURE__*/_jsx("hr", {
-      contentEditable: "false",
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-root element-selector`,
+      contentEditable: false,
+      style: {
+        zIndex: 1000
+      },
+      children: /*#__PURE__*/_jsx(DividerToolbar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings
+      })
+    }), /*#__PURE__*/_jsx("hr", {
+      contentEditable: false,
       className: "editorDivider",
       style: {
-        userSelect: "none"
+        userSelect: "none",
+        borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
+        backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
+        height: borderColor?.includes("linear") ? borderWidth : undefined
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {
         display: "none"
       },
       children: children
-    })]
+    }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Divider;

package/dist/Editor/Elements/Divider/DividerPopup.js

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import dividerStyle from "../../common/StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Divider",
+    type: "dividerStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: dividerStyle,
+    onDelete: onDelete,
+    customProps: customProps
+  });
+};
+export default DividerPopup;

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

@@ -6,14 +6,16 @@ const EmojiPicker = props => {
   const {
     onEmojiSelect,
     onClose,
-    theme = 'light'
+    theme = 'light',
+    ...rest
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
       onEmojiSelect: onEmojiSelect,
       onClickOutside: onClose,
-      theme: theme
+      theme: theme,
+      ...rest
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -47,7 +47,8 @@ const FreeGrid = props => {
   } = element;
   const {
     readOnly,
-    customSX
+    customSX,
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -342,6 +343,26 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addDivider":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "divider",
+          children: [{
+            type: "divider",
+            children: [{
+              text: ""
+            }]
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 170,
+          height: 30
+        }], {
+          at: [...insertAt]
+        });
+        break;
       default:
     }
     // focus on newly added element
@@ -414,6 +435,7 @@ const FreeGrid = props => {
       ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
     }
   }, theme);
+  const sectionTypeOptions = (itemOptions?.section || []).filter(f => (hideTools || []).indexOf(f) === -1);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `
@@ -441,7 +463,7 @@ const FreeGrid = props => {
       bottomLeft: false,
       bottomRight: false
     },
-    actions: itemOptions?.section || [],
+    actions: sectionTypeOptions,
     type: "parent",
     optionsProps: {
       placement: "right",
@@ -462,7 +484,8 @@ const FreeGrid = props => {
         placement: "left",
         title: "Add Element",
         props: {
-          handleClick: handleAddElementClick
+          handleClick: handleAddElementClick,
+          hideTools: hideTools || []
         }
       },
       more: {

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -28,7 +28,8 @@ const FreeGridItem = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
-    readOnly
+    readOnly,
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -211,12 +212,13 @@ const FreeGridItem = props => {
         break;
     }
   };
+  const itemTypeOptions = (itemOptions[childType] || itemOptions?.default).filter(f => (hideTools || []).indexOf(f) === -1);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
     editor: editor,
     path: path,
-    actions: itemOptions[childType] || itemOptions?.default,
+    actions: itemTypeOptions,
     settingsProps: {
       settings: "freegridItem",
       onChange: onChangeSettings,

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -43,15 +43,25 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addSignature",
   label: "Signature",
   icon: "signature"
+}, {
+  actionType: "addDivider",
+  label: "Divider",
+  icon: "divider"
 }];
 const AddElement = props => {
   const {
-    handleClick
+    handleClick,
+    hideTools
   } = props;
+  const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
   return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      maxHeight: "500px",
+      overflowY: 'auto'
+    },
     children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
-      children: FREE_GRID_ELEMENTS.map(m => {
+      children: ADD_ELEMENTS.map(m => {
         return /*#__PURE__*/_jsxs(ListItemButton, {
           className: "item-wrapper",
           onClick: handleClick(m.actionType),

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -7,10 +7,11 @@ const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
 const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
-const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
+const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
 const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
 const signOptions = ["removeSign", "saveAsTemplate", "close"];
+const dividerOptions = ["settings", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -24,6 +25,7 @@ const itemOptions = {
   embedScript: embedScriptOptions,
   video: videoOptions,
   signature: signatureOptions,
-  sign: signOptions
+  sign: signOptions,
+  divider: dividerOptions
 };
 export default itemOptions;

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -27,7 +27,7 @@ const Actions = {
     Icon: null,
     title: "Add Section"
   },
-  addElement: {
+  addElementInSection: {
     type: "addElement",
     Button: IconButton,
     Icon: AddIcon,

package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import dividerStyle from "../../../StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    console.log("🚀 ~ onChange ~ data:", data);
+    console.log("🚀 ~ onChange ~ element:", element);
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: dividerStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: dividerStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default DividerSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/index.js

@@ -7,6 +7,7 @@ import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
 import TableSettings from "./TableSettings";
 import CodeSettings from "./CodeSettings";
+import DividerSettings from "./DividerSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -16,6 +17,7 @@ const SettingsComponents = {
   appHeader: AppHeaderSettings,
   form: FormSettings,
   table: TableSettings,
-  embedScript: CodeSettings
+  embedScript: CodeSettings,
+  divider: DividerSettings
 };
 export default SettingsComponents;

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -7,7 +7,8 @@ export const settingsLabel = {
   appHeader: "App Header Settings",
   form: "Form Settings",
   table: "Table Settings",
-  embedScript: "Code Settings"
+  embedScript: "Code Settings",
+  divider: 'Divider Settings'
 };
 export const ItemTypes = {
   text: "Text",
@@ -19,5 +20,6 @@ export const ItemTypes = {
   form: "Form",
   table: "Table",
   embedScript: "Code",
-  signature: "Signature"
+  signature: "Signature",
+  divider: 'Divider'
 };

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

@@ -0,0 +1,56 @@
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const dividerStyle = [{
+  tab: "Border",
+  value: "sectionBorderRadius",
+  fields: [{
+    label: "Divider Color",
+    key: "borderColor",
+    type: "color",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
+  }, {
+    label: "Divider Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px",
+    width: 6
+  }, {
+    label: "Divider Style",
+    key: "borderStyle",
+    type: "textOptions",
+    width: 6,
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }, {
+      text: "Double",
+      value: "double"
+    }, {
+      text: "Groove",
+      value: "groove"
+    }, {
+      text: "Ridge",
+      value: "ridge"
+    }, {
+      text: "Inset",
+      value: "inset"
+    }, {
+      text: "Outset",
+      value: "outset"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
+  }]
+}];
+export default dividerStyle;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
+import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,15 +46,30 @@ const Color = props => {
     item: true,
     xs: 12,
     className: "btnColorPicker",
-    children: [/*#__PURE__*/_jsx(Typography, {
+    children: [/*#__PURE__*/_jsxs(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
         fontSize: "14px",
         fontWeight: 500,
-        marginBottom: "5px"
+        marginBottom: "5px",
+        display: 'flex',
+        alignItems: 'center',
+        '& svg': {
+          width: '20px',
+          height: '20px'
+        }
       },
-      children: label
+      children: [label, data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
+        arrow: true,
+        title: "Note: If color gradient is used, divider styles will not apply",
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            display: 'inline-block'
+          },
+          children: data?.infoIcon
+        })
+      }) : null]
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,

package/package.json

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