@flozy/editor 1.5.9 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. package/dist/Editor/CommonEditor.js +195 -94
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +211 -50
  4. package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
  5. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
  8. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
  9. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  10. package/dist/Editor/Elements/Button/EditorButton.js +8 -24
  11. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  12. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
  15. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  16. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  17. package/dist/Editor/Elements/Embed/Embed.js +35 -126
  18. package/dist/Editor/Elements/Embed/Image.js +24 -7
  19. package/dist/Editor/Elements/Embed/Video.js +21 -6
  20. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  22. package/dist/Editor/Elements/Form/Form.js +24 -13
  23. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  24. package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
  25. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  26. package/dist/Editor/Elements/Form/FormField.js +7 -1
  27. package/dist/Editor/Elements/Grid/Grid.js +143 -47
  28. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  29. package/dist/Editor/Elements/Grid/GridItem.js +32 -21
  30. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  31. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  32. package/dist/Editor/Elements/List/CheckList.js +57 -0
  33. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  34. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  35. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  36. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
  37. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  38. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  39. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  41. package/dist/Editor/Elements/SimpleText.js +62 -0
  42. package/dist/Editor/Elements/Table/Styles.js +66 -0
  43. package/dist/Editor/Elements/Table/Table.js +33 -16
  44. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  45. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  46. package/dist/Editor/Elements/Table/table.css +0 -10
  47. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  48. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  49. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  50. package/dist/Editor/Styles/EditorStyles.js +50 -0
  51. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  52. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  53. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  54. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  55. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  56. package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  58. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  59. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  60. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  61. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  65. package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
  66. package/dist/Editor/Toolbar/Toolbar.js +189 -129
  67. package/dist/Editor/Toolbar/styles.css +136 -18
  68. package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
  69. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  70. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  71. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  72. package/dist/Editor/common/Icon.js +54 -5
  73. package/dist/Editor/common/ImageList.js +75 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  75. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  76. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  77. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  78. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  79. package/dist/Editor/common/ImageUploader.js +94 -0
  80. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  81. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  82. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  83. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  84. package/dist/Editor/common/Shorthands/elements.js +191 -0
  85. package/dist/Editor/common/Shorthands/index.js +7 -0
  86. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  87. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  88. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  89. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  90. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  99. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  100. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  101. package/dist/Editor/common/ToolbarIcon.js +43 -0
  102. package/dist/Editor/common/Uploader.js +35 -61
  103. package/dist/Editor/common/iconslist.js +46 -1
  104. package/dist/Editor/helper/index.js +0 -1
  105. package/dist/Editor/hooks/useDrag.js +2 -2
  106. package/dist/Editor/hooks/useMentions.js +104 -17
  107. package/dist/Editor/hooks/useMouseMove.js +53 -0
  108. package/dist/Editor/hooks/useScroll.js +26 -0
  109. package/dist/Editor/plugins/withEmbeds.js +12 -0
  110. package/dist/Editor/service/fileupload.js +2 -2
  111. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
  112. package/dist/Editor/utils/button.js +2 -1
  113. package/dist/Editor/utils/carousel.js +5 -2
  114. package/dist/Editor/utils/carouselItem.js +2 -2
  115. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  116. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  117. package/dist/Editor/utils/embed.js +25 -8
  118. package/dist/Editor/utils/emoji.js +8 -0
  119. package/dist/Editor/utils/events.js +49 -12
  120. package/dist/Editor/utils/form.js +3 -9
  121. package/dist/Editor/utils/formfield.js +2 -1
  122. package/dist/Editor/utils/grid.js +44 -8
  123. package/dist/Editor/utils/gridItem.js +4 -3
  124. package/dist/Editor/utils/insertNewLine.js +12 -0
  125. package/dist/Editor/utils/mentions.js +14 -10
  126. package/dist/Editor/utils/pageSettings.js +67 -0
  127. package/dist/Editor/utils/signature.js +6 -8
  128. package/dist/Editor/utils/table.js +79 -18
  129. package/dist/Editor/utils/topBanner.js +58 -0
  130. package/package.json +6 -2
  131. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,15 +1,21 @@
1
1
  import React, { useState } from "react";
2
- import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
3
- import { insertGrid } from "../../utils/grid";
2
+ import { Button, Dialog, DialogContent, DialogTitle, Grid,
3
+ // ImageListItemBar,
4
+ Tooltip, Box } from "@mui/material";
5
+ import { insertGrid, insertPlainGrid } from "../../utils/grid";
4
6
  import { GridIcon } from "../../common/iconslist";
5
- import { ImageList, ImageListItem } from "@mui/material";
7
+ // import { ImageList, ImageListItem } from "@mui/material";
8
+ import ToolbarIcon from "../../common/ToolbarIcon";
9
+ import GridStyles from "./Styles";
6
10
  import { jsx as _jsx } from "react/jsx-runtime";
7
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
13
  const GridButton = props => {
14
+ const classes = GridStyles();
10
15
  const {
11
16
  editor,
12
- customProps
17
+ customProps,
18
+ icoBtnType
13
19
  } = props;
14
20
  const {
15
21
  services
@@ -48,17 +54,19 @@ const GridButton = props => {
48
54
  const handleClose = () => {
49
55
  setOpen(false);
50
56
  };
51
- const {
52
- list
53
- } = templates;
57
+ const handleGridClick = count => () => {
58
+ insertGrid(editor, insertPlainGrid(count));
59
+ handleClose();
60
+ };
61
+
62
+ // const { list } = templates;
63
+
54
64
  return /*#__PURE__*/_jsxs(_Fragment, {
55
- children: [/*#__PURE__*/_jsx(Tooltip, {
65
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
56
66
  title: "Grid",
57
- arrow: true,
58
- children: /*#__PURE__*/_jsx(IconButton, {
59
- onClick: onButtonClick,
60
- children: /*#__PURE__*/_jsx(GridIcon, {})
61
- })
67
+ onClick: onButtonClick,
68
+ icon: /*#__PURE__*/_jsx(GridIcon, {}),
69
+ icoBtnType: icoBtnType
62
70
  }), /*#__PURE__*/_jsxs(Dialog, {
63
71
  open: open,
64
72
  onClose: handleClose,
@@ -69,7 +77,7 @@ const GridButton = props => {
69
77
  children: [/*#__PURE__*/_jsx(Grid, {
70
78
  item: true,
71
79
  xs: 6,
72
- children: "Templates"
80
+ children: "Grid"
73
81
  }), /*#__PURE__*/_jsx(Grid, {
74
82
  item: true,
75
83
  xs: 6,
@@ -81,21 +89,36 @@ const GridButton = props => {
81
89
  })]
82
90
  })
83
91
  }), /*#__PURE__*/_jsx(DialogContent, {
84
- children: /*#__PURE__*/_jsx(ImageList, {
85
- variant: "quilted",
86
- cols: 1,
87
- children: list.map(item => {
88
- return /*#__PURE__*/_jsxs(ImageListItem, {
89
- onClick: handleInsertGrid(item),
90
- children: [/*#__PURE__*/_jsx("img", {
91
- src: item.thumbnail,
92
- alt: item.title,
93
- width: "auto",
94
- height: "250px"
95
- }), /*#__PURE__*/_jsx(ImageListItemBar, {
96
- title: item.title
97
- })]
98
- }, item.thumbnail);
92
+ children: /*#__PURE__*/_jsx(Grid, {
93
+ container: true,
94
+ spacing: 2,
95
+ style: {
96
+ display: "flex"
97
+ },
98
+ children: Array.from(Array(12).keys()).map(m => {
99
+ m = m + 1;
100
+ return /*#__PURE__*/_jsx(Grid, {
101
+ item: true,
102
+ xs: 2,
103
+ style: {
104
+ display: "flex"
105
+ },
106
+ children: /*#__PURE__*/_jsx(Box, {
107
+ component: "div",
108
+ style: {
109
+ display: "flex"
110
+ },
111
+ children: /*#__PURE__*/_jsx(Tooltip, {
112
+ title: `Insert ${m} Column Grid`,
113
+ arrow: true,
114
+ children: /*#__PURE__*/_jsx(Button, {
115
+ sx: classes.gridButton,
116
+ onClick: handleGridClick(m),
117
+ children: m
118
+ })
119
+ })
120
+ })
121
+ }, `in_grid_co_${m}`);
99
122
  })
100
123
  })
101
124
  })]
@@ -1,9 +1,11 @@
1
+ /* eslint-disable no-unused-vars */
1
2
  import React, { useState } from "react";
2
3
  import { Transforms } from "slate";
3
- import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
+ import { useSlateStatic, ReactEditor } from "slate-react";
4
5
  import GridItemPopup from "./GridItemPopup";
5
- import { IconButton, Tooltip, Box } from "@mui/material";
6
+ import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
6
7
  import { GridSettingsIcon } from "../../common/iconslist";
8
+ import { useEditorContext } from "../../hooks/useMouseMove";
7
9
  import { jsx as _jsx } from "react/jsx-runtime";
8
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
11
  const GridItem = props => {
@@ -51,9 +53,13 @@ const GridItem = props => {
51
53
  } = borderRadius || {};
52
54
  const editor = useSlateStatic();
53
55
  // const selected = useSelected();
54
- const [selected, setSelected] = useState(false);
56
+ // const [selected, setSelected] = useState(false);
55
57
  const itemWidth = (grid || 6) / 12 * 100;
56
58
  const path = ReactEditor.findPath(editor, element);
59
+ const {
60
+ hoverPath
61
+ } = useEditorContext();
62
+ const selected = hoverPath === path.join(",");
57
63
  const GridItemToolbar = () => {
58
64
  return selected ? /*#__PURE__*/_jsx("div", {
59
65
  contentEditable: false,
@@ -79,7 +85,6 @@ const GridItem = props => {
79
85
  const updateData = {
80
86
  ...data
81
87
  };
82
- console.log(updateData);
83
88
  delete updateData.children;
84
89
  Transforms.setNodes(editor, {
85
90
  ...updateData
@@ -98,18 +103,21 @@ const GridItem = props => {
98
103
  });
99
104
  }
100
105
  };
101
- const onMouseOver = e => {
102
- if (!readOnly) {
103
- e.stopPropagation();
104
- setSelected(true);
105
- }
106
- };
107
- const onMouseLeave = e => {
108
- if (!readOnly) {
109
- e.stopPropagation();
110
- setSelected(false);
111
- }
112
- };
106
+
107
+ // const onMouseOver = (e) => {
108
+ // if (!readOnly) {
109
+ // e.stopPropagation();
110
+ // setSelected(true);
111
+ // }
112
+ // };
113
+
114
+ // const onMouseLeave = (e) => {
115
+ // if (!readOnly) {
116
+ // e.stopPropagation();
117
+ // setSelected(false);
118
+ // }
119
+ // };
120
+
113
121
  return /*#__PURE__*/_jsxs(Box, {
114
122
  component: "div",
115
123
  className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -127,10 +135,13 @@ const GridItem = props => {
127
135
  marginBottom: `${margin?.bottom || 0}px`,
128
136
  "&:hover": {
129
137
  background: `${bgColorHover || bgColor || "transparent"}`
130
- }
138
+ },
139
+ height: "100%"
131
140
  },
132
- onMouseOver: onMouseOver,
133
- onMouseLeave: onMouseLeave,
141
+ "data-path": path.join(",")
142
+ // onMouseOver={onMouseOver}
143
+ // onMouseLeave={onMouseLeave}
144
+ ,
134
145
  children: [!readOnly && /*#__PURE__*/_jsxs("div", {
135
146
  className: `element-selector ${selected ? "selected" : ""}`,
136
147
  contentEditable: false,
@@ -150,16 +161,16 @@ const GridItem = props => {
150
161
  }), /*#__PURE__*/_jsx(Box, {
151
162
  className: "gi-inner-cw",
152
163
  component: "div",
164
+ "data-path": path.join(","),
153
165
  sx: {
154
166
  display: "flex",
155
167
  flexDirection: flexDirection || "column",
156
- width: "100%",
157
168
  paddingLeft: `${left}px`,
158
169
  paddingRight: `${right}px`,
159
170
  paddingTop: `${top}px`,
160
171
  paddingBottom: `${bottom}px`,
161
172
  justifyContent: vertical,
162
- height: gridHeight || "auto",
173
+ height: gridHeight || "100%",
163
174
  borderColor: borderColor || "transparent",
164
175
  borderWidth: borderWidth || "1px",
165
176
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
@@ -0,0 +1,11 @@
1
+ const GridStyles = () => ({
2
+ gridButton: {
3
+ background: "#007FFF",
4
+ color: "#fff",
5
+ "&:hover": {
6
+ background: "#0066CC",
7
+ color: "#FFF"
8
+ }
9
+ }
10
+ });
11
+ export default GridStyles;
@@ -29,7 +29,6 @@ const InlineIcon = props => {
29
29
  bottomRight
30
30
  } = borderRadius || {};
31
31
  const BtnIcon = fIcons["Check"];
32
- console.log(icon);
33
32
  return /*#__PURE__*/_jsxs("button", {
34
33
  ...attributes,
35
34
  className: "editor-icon-text",
@@ -0,0 +1,57 @@
1
+ import React from "react";
2
+ import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
3
+ import { Transforms } from "slate";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const CheckList = ({
7
+ attributes,
8
+ children,
9
+ element
10
+ }) => {
11
+ const editor = useSlateStatic();
12
+ const readOnly = useReadOnly();
13
+ const {
14
+ checked
15
+ } = element;
16
+ return /*#__PURE__*/_jsxs("div", {
17
+ ...attributes,
18
+ className: "checkbox-list",
19
+ style: {
20
+ textAlign: element.alignment || "left"
21
+ },
22
+ children: [/*#__PURE__*/_jsxs("span", {
23
+ contentEditable: false,
24
+ className: "checkbox-edit",
25
+ children: [/*#__PURE__*/_jsx("input", {
26
+ type: "checkbox",
27
+ className: "styled-checkbox",
28
+ checked: checked,
29
+ style: {
30
+ marginRight: "8px"
31
+ },
32
+ onChange: event => {
33
+ const path = ReactEditor.findPath(editor, element);
34
+ const newProperties = {
35
+ checked: event.target.checked
36
+ };
37
+ Transforms.setNodes(editor, newProperties, {
38
+ at: path
39
+ });
40
+ }
41
+ }), /*#__PURE__*/_jsx("span", {
42
+ className: "checkbox-inner"
43
+ })]
44
+ }), /*#__PURE__*/_jsx("span", {
45
+ contentEditable: !readOnly,
46
+ suppressContentEditableWarning: true,
47
+ className: "",
48
+ style: {
49
+ flex: 1,
50
+ opacity: checked ? 1 : 1,
51
+ textDecoration: !checked ? "none" : "none"
52
+ },
53
+ children: children
54
+ })]
55
+ });
56
+ };
57
+ export default CheckList;
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import Icon from "../../common/Icon";
3
+ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
4
+ import ToolbarIcon from "../../common/ToolbarIcon";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { Fragment as _Fragment } from "react/jsx-runtime";
7
+ const CheckListButton = props => {
8
+ const {
9
+ editor
10
+ } = props;
11
+ const handleClick = type => () => {
12
+ toggleBlock(editor, type);
13
+ };
14
+ return /*#__PURE__*/_jsx(_Fragment, {
15
+ children: /*#__PURE__*/_jsx(ToolbarIcon, {
16
+ title: "Check List",
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "checkList"
19
+ }),
20
+ onClick: handleClick("checkList")
21
+ })
22
+ });
23
+ };
24
+ export default CheckListButton;
@@ -1,10 +1,12 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
4
3
  import { Transforms } from "slate";
5
4
  import { ReactEditor, useSlateStatic } from "slate-react";
5
+ import ToolbarIcon from "../../common/ToolbarIcon";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
- const NewLineButton = () => {
7
+ const NewLineButton = ({
8
+ icoBtnType
9
+ }) => {
8
10
  const editor = useSlateStatic();
9
11
  const onAddNewLine = () => {
10
12
  Transforms.insertNodes(editor, [{
@@ -18,19 +20,17 @@ const NewLineButton = () => {
18
20
  });
19
21
  ReactEditor.focus(editor);
20
22
  };
21
- return /*#__PURE__*/_jsx(Tooltip, {
23
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
22
24
  title: "New Line",
23
- arrow: true,
24
- children: /*#__PURE__*/_jsx(IconButton, {
25
- onClick: onAddNewLine,
26
- children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
- sx: {
28
- fill: "#64748B",
29
- width: "18px",
30
- height: "18px"
31
- }
32
- })
33
- })
25
+ onClick: onAddNewLine,
26
+ icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
+ sx: {
28
+ fill: "#64748B",
29
+ width: "18px",
30
+ height: "18px"
31
+ }
32
+ }),
33
+ icoBtnType: icoBtnType
34
34
  });
35
35
  };
36
36
  export default NewLineButton;
@@ -2,12 +2,14 @@ import React from "react";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  const PageSettings = props => {
4
4
  const {
5
- attributes
5
+ attributes,
6
+ children
6
7
  } = props;
7
8
  return /*#__PURE__*/_jsx("div", {
8
9
  ...attributes,
9
10
  className: "page-settings",
10
- contentEditable: false
11
+ contentEditable: false,
12
+ children: children
11
13
  });
12
14
  };
13
15
  export default PageSettings;
@@ -1,15 +1,16 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Editor, Element } from "slate";
3
- import { IconButton, Tooltip } from "@mui/material";
4
- import { useSlateStatic, ReactEditor } from "slate-react";
2
+ import { useSlateStatic } from "slate-react";
5
3
  import PageSettingsPopup from "./PageSettingsPopup";
6
4
  import { PageSettings } from "../../common/iconslist";
5
+ import ToolbarIcon from "../../common/ToolbarIcon";
6
+ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const PageSettingsButton = props => {
11
11
  const {
12
- customProps
12
+ customProps,
13
+ icoBtnType
13
14
  } = props;
14
15
  const [openSetttings, setOpenSettings] = useState(false);
15
16
  const editor = useSlateStatic();
@@ -17,79 +18,33 @@ const PageSettingsButton = props => {
17
18
  const {
18
19
  element,
19
20
  path
20
- } = getPageSettingsPath();
21
+ } = getPageSettings(editor);
21
22
  setOpenSettings({
22
23
  element: element?.pageProps || {},
23
24
  path
24
25
  });
25
26
  };
26
- const getPageSettingsPath = () => {
27
+ const onSave = data => {
27
28
  try {
28
- const [pageSettingsNode] = Editor.nodes(editor, {
29
- at: [],
30
- match: n => {
31
- return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
32
- }
33
- });
34
- if (pageSettingsNode && pageSettingsNode[0]) {
35
- const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
36
- return {
37
- path,
38
- element: pageSettingsNode[0]
39
- };
40
- } else {
41
- return {
42
- path: null
43
- };
44
- }
29
+ const updateData = {
30
+ ...data
31
+ };
32
+ delete updateData.children;
33
+ updatePageSettings(editor, updateData);
34
+ onClose();
45
35
  } catch (err) {
46
36
  console.log(err);
47
- return {
48
- path: null
49
- };
50
- }
51
- };
52
- const onSave = data => {
53
- const updateData = {
54
- ...data
55
- };
56
- delete updateData.children;
57
- console.log(openSetttings);
58
- if (openSetttings?.path) {
59
- Transforms.setNodes(editor, {
60
- pageProps: {
61
- ...updateData
62
- }
63
- }, {
64
- at: openSetttings?.path
65
- });
66
- } else {
67
- console.log(editor.children.length);
68
- Transforms.insertNodes(editor, [{
69
- type: "page-settings",
70
- pageProps: {
71
- ...updateData
72
- },
73
- children: [{
74
- text: ""
75
- }]
76
- }], {
77
- at: [editor.children.length]
78
- });
79
37
  }
80
- onClose();
81
38
  };
82
39
  const onClose = () => {
83
40
  setOpenSettings(false);
84
41
  };
85
42
  return /*#__PURE__*/_jsxs(_Fragment, {
86
- children: [/*#__PURE__*/_jsx(Tooltip, {
43
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
87
44
  title: "Page Settings",
88
- arrow: true,
89
- children: /*#__PURE__*/_jsx(IconButton, {
90
- onClick: onSettings,
91
- children: /*#__PURE__*/_jsx(PageSettings, {})
92
- })
45
+ onClick: onSettings,
46
+ icon: /*#__PURE__*/_jsx(PageSettings, {}),
47
+ icoBtnType: icoBtnType
93
48
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
94
49
  element: openSetttings?.element || {},
95
50
  onSave: onSave,
@@ -10,7 +10,7 @@ const PageSettingsPopup = props => {
10
10
  customProps
11
11
  } = props;
12
12
  return /*#__PURE__*/_jsx(StyleBuilder, {
13
- title: "Grid",
13
+ title: "Page Settings",
14
14
  type: "pageSettingsStyle",
15
15
  element: element,
16
16
  onSave: onSave,
@@ -29,22 +29,28 @@ const Signature = props => {
29
29
  }],
30
30
  ...data
31
31
  }], {
32
- at: [...path, 0]
32
+ at: path
33
33
  });
34
34
  };
35
35
  const onClear = () => {
36
36
  Transforms.removeNodes(editor, {
37
- at: [...path, 0]
37
+ at: path
38
38
  });
39
39
  };
40
40
  return /*#__PURE__*/_jsxs("div", {
41
41
  className: `signature-container`,
42
42
  ...attributes,
43
+ contentEditable: false,
43
44
  children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
44
45
  customProps: customProps,
45
46
  onSave: onSave,
46
47
  onClear: onClear
47
- }) : null, children]
48
+ }) : null, /*#__PURE__*/_jsx("span", {
49
+ style: {
50
+ display: "none"
51
+ },
52
+ children: children
53
+ })]
48
54
  });
49
55
  };
50
56
  export default Signature;
@@ -1,22 +1,23 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import { insertSignature } from "../../utils/signature";
4
- import { SignatureIcon } from "../../common/iconslist";
3
+ import ToolbarIcon from "../../common/ToolbarIcon";
4
+ import Icon from "../../common/Icon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const SignatureButton = props => {
7
7
  const {
8
- editor
8
+ editor,
9
+ icoBtnType
9
10
  } = props;
10
11
  const handleInsertSignature = () => {
11
12
  insertSignature(editor);
12
13
  };
13
- return /*#__PURE__*/_jsx(Tooltip, {
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
14
15
  title: "Signature",
15
- arrow: true,
16
- children: /*#__PURE__*/_jsx(IconButton, {
17
- onClick: handleInsertSignature,
18
- children: /*#__PURE__*/_jsx(SignatureIcon, {})
19
- })
16
+ onClick: handleInsertSignature,
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "signature"
19
+ }),
20
+ icoBtnType: icoBtnType
20
21
  });
21
22
  };
22
23
  export default SignatureButton;