@flozy/editor 4.0.1 → 4.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. package/dist/Editor/ChatEditor.js +17 -28
  2. package/dist/Editor/CommonEditor.js +16 -1
  3. package/dist/Editor/Editor.css +1 -13
  4. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  5. package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -21
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +23 -1
  7. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  8. package/dist/Editor/Elements/Grid/Grid.js +25 -3
  9. package/dist/Editor/Elements/List/CheckList.js +1 -2
  10. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  11. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  12. package/dist/Editor/Elements/Table/Styles.js +23 -1
  13. package/dist/Editor/Elements/Table/Table.js +2 -1
  14. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  15. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  16. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  17. package/dist/Editor/Styles/EditorStyles.js +1 -1
  18. package/dist/Editor/Toolbar/FormatTools/TextSize.js +24 -7
  19. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
  20. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  21. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  22. package/dist/Editor/Toolbar/PopupTool/index.js +2 -3
  23. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  24. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  25. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  26. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  27. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  28. package/dist/Editor/common/ColorPickerButton.js +4 -12
  29. package/dist/Editor/common/DnD/DragHandleButton.js +55 -46
  30. package/dist/Editor/common/Icon.js +13 -1
  31. package/dist/Editor/common/Section/index.js +57 -7
  32. package/dist/Editor/common/Section/styles.js +11 -0
  33. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -26
  35. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
  36. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -6
  37. package/dist/Editor/common/iconslist.js +0 -31
  38. package/dist/Editor/helper/index.js +0 -22
  39. package/dist/Editor/helper/theme.js +1 -2
  40. package/dist/Editor/utils/SlateUtilityFunctions.js +8 -2
  41. package/dist/Editor/utils/events.js +54 -2
  42. package/dist/Editor/utils/helper.js +1 -1
  43. package/dist/Editor/utils/table.js +51 -43
  44. package/package.json +3 -3
@@ -48,6 +48,8 @@ const MiniToolbar = props => {
48
48
  const {
49
49
  popupType
50
50
  } = useEditorContext();
51
+ const canUndo = editor.history.undos.length > 0;
52
+ const canRedo = editor.history.redos.length > 0;
51
53
  const [toolTip, setToolTip] = useState(false);
52
54
  const [data, setData] = useState(null);
53
55
  useEffect(() => {
@@ -92,14 +94,14 @@ const MiniToolbar = props => {
92
94
  label,
93
95
  icon: Icon
94
96
  }) => {
95
- const isDisabled = popupType === type; // for textFormat type
97
+ const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false; // for textFormat type
96
98
 
97
99
  return /*#__PURE__*/_jsx(Tooltip, {
98
100
  arrow: true,
99
101
  title: label,
100
102
  disableHoverListener: toolTip,
101
103
  children: /*#__PURE__*/_jsx(IconButton, {
102
- className: type === popper ? "active" : "",
104
+ className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
103
105
  onClick: handleClick(type),
104
106
  disabled: isDisabled,
105
107
  children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
@@ -2,6 +2,8 @@ import TextIcon from "../../../assets/svg/TextIcon";
2
2
  import AddElementIcon from "../../../assets/svg/AddElementIcon";
3
3
  import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
4
4
  import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
5
+ import UndoButton from "../../../Elements/Undo/UndoButton";
6
+ import RedoButton from "../../../Elements/Redo/RedoButton";
5
7
  const MENU_OPTIONS = [{
6
8
  type: "textFormat",
7
9
  icon: TextIcon,
@@ -18,5 +20,13 @@ const MENU_OPTIONS = [{
18
20
  type: "page-settings",
19
21
  icon: PageSettingsButton,
20
22
  label: "Page Settings"
23
+ }, {
24
+ type: "undo",
25
+ icon: UndoButton,
26
+ label: "Undo"
27
+ }, {
28
+ type: "redo",
29
+ icon: RedoButton,
30
+ label: "Redo"
21
31
  }];
22
32
  export default MENU_OPTIONS;
@@ -41,6 +41,13 @@ const miniToolbarStyles = theme => ({
41
41
  "& svg": {
42
42
  stroke: theme?.palette?.editor?.activeColor
43
43
  }
44
+ },
45
+ "&.disabled": {
46
+ "& svg": {
47
+ '& path': {
48
+ stroke: theme?.palette?.editor?.svgStrokeDisabled
49
+ }
50
+ }
44
51
  }
45
52
  }
46
53
  }
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
- import { useSlate, useFocused } from "slate-react";
4
+ import { useSlate } from "slate-react";
5
5
  import useDrag from "../../hooks/useDrag";
6
6
  import { TableUtil } from "../../utils/table";
7
7
  import useWindowResize from "../../hooks/useWindowResize";
@@ -23,7 +23,6 @@ const PopupTool = props => {
23
23
  const [anchorEl, setAnchorEl] = useState(null);
24
24
  const [open, setOpen] = useState(false);
25
25
  const editor = useSlate();
26
- const inFocus = useFocused();
27
26
  const {
28
27
  selection
29
28
  } = editor;
@@ -47,7 +46,7 @@ const PopupTool = props => {
47
46
  }
48
47
  }, [event, anchorEl]);
49
48
  useEffect(() => {
50
- if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
49
+ if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
51
50
  setAnchorEl(null);
52
51
  } else {
53
52
  updateAnchorEl();
@@ -1,29 +1,32 @@
1
1
  import React from "react";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
- const AddElementIcon = () => {
4
+ const AddTemplateIcon = () => {
5
5
  return /*#__PURE__*/_jsxs("svg", {
6
6
  width: "17",
7
- height: "16",
8
- viewBox: "0 0 17 16",
7
+ height: "18",
8
+ viewBox: "0 0 17 18",
9
9
  fill: "none",
10
10
  xmlns: "http://www.w3.org/2000/svg",
11
11
  children: [/*#__PURE__*/_jsx("path", {
12
- d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
13
- strokeWidth: "1.2",
12
+ d: "M9.21541 2.18999L13.3946 4.15499C14.5987 4.71749 14.5987 5.64749 13.3946 6.20999L9.21541 8.17499C8.74083 8.39999 7.96166 8.39999 7.48708 8.17499L3.30791 6.20999C2.10374 5.64749 2.10374 4.71749 3.30791 4.15499L7.48708 2.18999C7.96166 1.96499 8.74083 1.96499 9.21541 2.18999Z",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
14
15
  strokeLinecap: "round",
15
16
  strokeLinejoin: "round"
16
17
  }), /*#__PURE__*/_jsx("path", {
17
- d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
18
- strokeWidth: "1.2",
18
+ d: "M2.125 8.25C2.125 8.88 2.57125 9.6075 3.11667 9.8625L7.92625 12.1275C8.29458 12.3 8.7125 12.3 9.07375 12.1275L13.8833 9.8625C14.4287 9.6075 14.875 8.88 14.875 8.25",
19
+ stroke: "#64748B",
20
+ strokeWidth: "1.5",
19
21
  strokeLinecap: "round",
20
22
  strokeLinejoin: "round"
21
23
  }), /*#__PURE__*/_jsx("path", {
22
- d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
23
- strokeWidth: "1.2",
24
+ d: "M2.125 12C2.125 12.6975 2.51458 13.3275 3.11667 13.6125L7.92625 15.8775C8.29458 16.05 8.7125 16.05 9.07375 15.8775L13.8833 13.6125C14.4854 13.3275 14.875 12.6975 14.875 12",
25
+ stroke: "#64748B",
26
+ strokeWidth: "1.5",
24
27
  strokeLinecap: "round",
25
28
  strokeLinejoin: "round"
26
29
  })]
27
30
  });
28
31
  };
29
- export default AddElementIcon;
32
+ export default AddTemplateIcon;
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const RedoIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M12.25 14.5H6.25C4.18 14.5 2.5 12.484 2.5 10C2.5 7.516 4.18 5.5 6.25 5.5H14.5",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M12.5 7.5L14.5 5.5L12.5 3.5",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeLinecap: "round",
23
+ strokeLinejoin: "round"
24
+ })]
25
+ });
26
+ };
27
+ export default RedoIcon;
@@ -0,0 +1,28 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const SettingsIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M8.5 11.125C9.6736 11.125 10.625 10.1736 10.625 9C10.625 7.82639 9.6736 6.875 8.5 6.875C7.32639 6.875 6.375 7.82639 6.375 9C6.375 10.1736 7.32639 11.125 8.5 11.125Z",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M1.4165 9.62343V8.37676C1.4165 7.6401 2.01859 7.03093 2.76234 7.03093C4.04442 7.03093 4.56859 6.12426 3.924 5.01218C3.55567 4.37468 3.77525 3.54593 4.41984 3.1776L5.64525 2.47635C6.20484 2.14343 6.92734 2.34176 7.26025 2.90135L7.33817 3.03593C7.97567 4.14801 9.024 4.14801 9.66859 3.03593L9.7465 2.90135C10.0794 2.34176 10.8019 2.14343 11.3615 2.47635L12.5869 3.1776C13.2315 3.54593 13.4511 4.37468 13.0828 5.01218C12.4382 6.12426 12.9623 7.03093 14.2444 7.03093C14.9811 7.03093 15.5903 7.63301 15.5903 8.37676V9.62343C15.5903 10.3601 14.9882 10.9693 14.2444 10.9693C12.9623 10.9693 12.4382 11.8759 13.0828 12.988C13.4511 13.6326 13.2315 14.4543 12.5869 14.8226L11.3615 15.5238C10.8019 15.8568 10.0794 15.6584 9.7465 15.0988L9.66859 14.9643C9.03109 13.8522 7.98275 13.8522 7.33817 14.9643L7.26025 15.0988C6.92734 15.6584 6.20484 15.8568 5.64525 15.5238L4.41984 14.8226C3.77525 14.4543 3.55567 13.6255 3.924 12.988C4.56859 11.8759 4.04442 10.9693 2.76234 10.9693C2.01859 10.9693 1.4165 10.3601 1.4165 9.62343Z",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeMiterlimit: "10",
23
+ strokeLinecap: "round",
24
+ strokeLinejoin: "round"
25
+ })]
26
+ });
27
+ };
28
+ export default SettingsIcon;
@@ -4,22 +4,25 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
4
4
  const TextIcon = () => {
5
5
  return /*#__PURE__*/_jsxs("svg", {
6
6
  width: "15",
7
- height: "14",
8
- viewBox: "0 0 15 14",
7
+ height: "16",
8
+ viewBox: "0 0 15 16",
9
9
  fill: "none",
10
10
  xmlns: "http://www.w3.org/2000/svg",
11
11
  children: [/*#__PURE__*/_jsx("path", {
12
- d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
12
+ d: "M1.66895 4.9813V3.8438C1.66895 3.12505 2.2502 2.55005 2.9627 2.55005H12.0377C12.7564 2.55005 13.3314 3.1313 13.3314 3.8438V4.9813",
13
+ stroke: "#64748B",
13
14
  strokeWidth: "1.5",
14
15
  strokeLinecap: "round",
15
16
  strokeLinejoin: "round"
16
17
  }), /*#__PURE__*/_jsx("path", {
17
- d: "M7.5 12.0866V2.39746",
18
+ d: "M7.5 13.4501V3.06885",
19
+ stroke: "#64748B",
18
20
  strokeWidth: "1.5",
19
21
  strokeLinecap: "round",
20
22
  strokeLinejoin: "round"
21
23
  }), /*#__PURE__*/_jsx("path", {
22
- d: "M5.20166 12.0864H9.79833",
24
+ d: "M5.0376 13.45H9.9626",
25
+ stroke: "#64748B",
23
26
  strokeWidth: "1.5",
24
27
  strokeLinecap: "round",
25
28
  strokeLinejoin: "round"
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const UndoIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M4.75 14.5H10.75C12.82 14.5 14.5 12.484 14.5 10C14.5 7.516 12.82 5.5 10.75 5.5H2.5",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M4.5 7.5L2.5 5.5L4.5 3.5",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeLinecap: "round",
23
+ strokeLinejoin: "round"
24
+ })]
25
+ });
26
+ };
27
+ export default UndoIcon;
@@ -1,4 +1,4 @@
1
- import React, { useMemo, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
3
  import ColorPickerTool from "react-gcolor-picker";
4
4
  import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,8 +11,7 @@ const ColorPickerButton = props => {
11
11
  onSave,
12
12
  defaultColors = [],
13
13
  classes = {},
14
- recentColors = [],
15
- hideGradient
14
+ recentColors = []
16
15
  } = props;
17
16
  const [anchorEl, setAnchorEl] = useState(null);
18
17
  const [color, setColor] = useState(value);
@@ -30,13 +29,6 @@ const ColorPickerButton = props => {
30
29
  const handleColorChange = color => {
31
30
  setColor(color);
32
31
  };
33
- const initialColors = useMemo(() => {
34
- let colors = [...recentColors, ...defaultColors];
35
- if (hideGradient) {
36
- colors = colors.filter(c => c && !c.includes("gradient"));
37
- }
38
- return colors;
39
- }, [recentColors, defaultColors, hideGradient]);
40
32
  return /*#__PURE__*/_jsxs(_Fragment, {
41
33
  children: [/*#__PURE__*/_jsx(Button, {
42
34
  style: {
@@ -69,10 +61,10 @@ const ColorPickerButton = props => {
69
61
  xs: 12,
70
62
  children: [/*#__PURE__*/_jsx("div", {
71
63
  children: /*#__PURE__*/_jsx(ColorPickerTool, {
72
- gradient: hideGradient ? false : true,
64
+ gradient: true,
73
65
  value: color,
74
66
  onChange: handleColorChange,
75
- defaultColors: initialColors
67
+ defaultColors: [...recentColors, ...defaultColors] || []
76
68
  })
77
69
  }), /*#__PURE__*/_jsxs("div", {
78
70
  style: {
@@ -8,58 +8,67 @@ import { Transforms } from "slate";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
11
- const DragHandleStyle = () => ({
12
- dragHandle: {
13
- opacity: 0,
14
- content: '" "',
11
+ const DragHandleStyle = fromPopper => {
12
+ const handleDragStyle = fromPopper ? {
13
+ position: "absolute",
14
+ top: "6px",
15
+ left: "4px"
16
+ } : {
15
17
  position: "absolute",
16
18
  top: "3px",
17
- left: "-52px",
18
- borderRadius: "0px",
19
- padding: "0px",
20
- width: "20px",
21
- height: "20px",
22
- border: 0,
23
- display: "flex",
24
- alignItems: "center",
25
- justifyContent: "center",
26
- cursor: "grab",
27
- color: "#D7D7D6",
28
- background: "rgb(221, 221, 221, 0.1)",
29
- "& svg": {
30
- width: "20px"
19
+ left: "-52px"
20
+ };
21
+ return {
22
+ dragHandle: {
23
+ opacity: 0,
24
+ content: '" "',
25
+ ...handleDragStyle,
26
+ borderRadius: "0px",
27
+ padding: "0px",
28
+ width: "20px",
29
+ height: "20px",
30
+ border: 0,
31
+ display: "flex",
32
+ alignItems: "center",
33
+ justifyContent: "center",
34
+ cursor: "grab",
35
+ color: "#D7D7D6",
36
+ background: "rgb(221, 221, 221, 0.1)",
37
+ "& svg": {
38
+ width: "20px"
39
+ },
40
+ "&:hover": {
41
+ opacity: 1,
42
+ background: "rgb(221, 221, 221, 0.8)"
43
+ },
44
+ "&.active": {
45
+ opacity: 1,
46
+ cursor: "grabbing"
47
+ }
31
48
  },
32
- "&:hover": {
33
- opacity: 1,
34
- background: "rgb(221, 221, 221, 0.8)"
49
+ dropArea: {
50
+ position: "absolute",
51
+ left: 0,
52
+ top: 0,
53
+ width: "100%",
54
+ height: "100%",
55
+ pointerEvents: "none",
56
+ zIndex: -1,
57
+ "&.dragging": {
58
+ backgroundColor: "#def4ff"
59
+ }
35
60
  },
36
- "&.active": {
37
- opacity: 1,
38
- cursor: "grabbing"
61
+ dropAreaOver: {
62
+ position: "absolute",
63
+ left: 0,
64
+ top: 0,
65
+ width: "100%",
66
+ height: "4px"
39
67
  }
40
- },
41
- dropArea: {
42
- position: "absolute",
43
- left: 0,
44
- top: 0,
45
- width: "100%",
46
- height: "100%",
47
- pointerEvents: "none",
48
- zIndex: -1,
49
- "&.dragging": {
50
- backgroundColor: "#def4ff"
51
- }
52
- },
53
- dropAreaOver: {
54
- position: "absolute",
55
- left: 0,
56
- top: 0,
57
- width: "100%",
58
- height: "4px"
59
- }
60
- });
68
+ };
69
+ };
61
70
  const DragHandle = props => {
62
- const classes = DragHandleStyle();
71
+ const classes = DragHandleStyle(props.fromPopper);
63
72
  const editor = useSlateStatic();
64
73
  const [dragging, setDragging] = useState(false);
65
74
  const {
@@ -12,6 +12,12 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
12
12
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
13
13
  import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
14
14
  import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
15
+ import SettingsIcon from "../assets/svg/SettingsIcon";
16
+ import UndoIcon from "../assets/svg/UndoIcon";
17
+ import RedoIcon from "../assets/svg/RedoIcon";
18
+ import TextIcon from "../assets/svg/TextIcon";
19
+ import AddElementIcon from "../assets/svg/AddElementIcon";
20
+ import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
15
21
  import { jsx as _jsx } from "react/jsx-runtime";
16
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
23
  const iconList = {
@@ -244,7 +250,13 @@ const iconList = {
244
250
  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
245
251
  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
246
252
  infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
247
- resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
253
+ resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
254
+ pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
255
+ undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
256
+ redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
257
+ textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
258
+ addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
259
+ addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
248
260
  };
249
261
  const Icon = props => {
250
262
  const {
@@ -1,15 +1,17 @@
1
- import React, { useState } from "react";
1
+ import React, { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip } from "@mui/material";
4
+ import { Box, IconButton, Popper, Tooltip } from "@mui/material";
5
5
  import TuneIcon from "@mui/icons-material/Tune";
6
6
  import SectionPopup from "../../Elements/Grid/SectionPopup";
7
7
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
8
8
  import DragHandle from "../DnD/DragHandleButton";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import SectionStyle from "./styles";
11
+ import useWindowResize from "../../hooks/useWindowResize";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ import { Fragment as _Fragment } from "react/jsx-runtime";
13
15
  const list_types = ["orderedList", "unorderedList"];
14
16
  const Section = props => {
15
17
  const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
38
40
  flexDirection
39
41
  } = sectionAlignment || {};
40
42
  const path = ReactEditor.findPath(editor, element);
43
+ const anchorEl = useRef(null);
44
+ const popperEl = useRef(null);
45
+ const [size] = useWindowResize();
46
+ const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
47
+ const [isHovering, setIsHovering] = useState(false);
48
+ const onMouseEnter = () => {
49
+ setIsHovering(true);
50
+ };
51
+ const onMouseLeave = () => {
52
+ setIsHovering(false);
53
+ };
41
54
  const onSettings = () => {
42
55
  setOpenSettings(true);
43
56
  };
44
- const Toolbar = () => {
57
+ const Toolbar = ({
58
+ fromPopper
59
+ }) => {
45
60
  return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
46
61
  component: "div",
47
62
  className: `element-toolbar no-border-button hr section-tw sectionIcon`,
48
- style: {
63
+ style: fromPopper ? {
64
+ position: "unset",
65
+ marginLeft: "28px",
66
+ paddingTop: "4px",
67
+ marginRight: "10px",
68
+ height: "100%"
69
+ } : {
49
70
  left: "-28px",
50
71
  top: "3px"
51
72
  },
@@ -99,6 +120,8 @@ const Section = props => {
99
120
  alignItems: horizantal,
100
121
  justifyContent: vertical
101
122
  },
123
+ onMouseEnter: onMouseEnter,
124
+ onMouseLeave: onMouseLeave,
102
125
  children: [/*#__PURE__*/_jsxs(Box, {
103
126
  className: "ed-section-inner",
104
127
  sx: {
@@ -107,9 +130,36 @@ const Section = props => {
107
130
  ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
108
131
  }
109
132
  },
110
- children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
111
- ...props
112
- }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
133
+ ref: anchorEl,
134
+ children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
135
+ open: isHovering && isSectionFullWidth,
136
+ anchorEl: anchorEl?.current,
137
+ placement: "top-start",
138
+ sx: {
139
+ zIndex: 9999
140
+ },
141
+ disablePortal: true,
142
+ ref: popperEl,
143
+ className: "sectionPopper",
144
+ children: /*#__PURE__*/_jsxs(Box, {
145
+ sx: {
146
+ bgcolor: "background.paper",
147
+ background: "#F6F6F6",
148
+ height: "30px",
149
+ position: "relative"
150
+ },
151
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
152
+ ...props,
153
+ fromPopper: true
154
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {
155
+ fromPopper: true
156
+ })]
157
+ })
158
+ }) : /*#__PURE__*/_jsxs(_Fragment, {
159
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
160
+ ...props
161
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
162
+ }), children]
113
163
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
114
164
  element: {
115
165
  ...element,
@@ -6,6 +6,9 @@ const SectionStyle = () => ({
6
6
  },
7
7
  "& .sectionIcon": {
8
8
  opacity: 1
9
+ },
10
+ "& .sectionPopper": {
11
+ opacity: 1
9
12
  }
10
13
  },
11
14
  "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
13
16
  display: "block"
14
17
  }
15
18
  },
19
+ "& .sectionPopper": {
20
+ "&:hover": {
21
+ opacity: 1
22
+ }
23
+ },
24
+ "& .sectionPopper": {
25
+ opacity: 0
26
+ },
16
27
  "& .sectionIcon": {
17
28
  opacity: 0,
18
29
  padding: "0px",
@@ -5,8 +5,7 @@ const accordionTitleBtnStyle = [{
5
5
  label: "Accordion Color",
6
6
  key: "accordionTextColor",
7
7
  type: "color",
8
- needPreview: true,
9
- hideGradient: true
8
+ needPreview: true
10
9
  }, {
11
10
  label: "Accordion Background Color",
12
11
  key: "accordionBgColor",