@flozy/editor 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,20 +1,88 @@
1
- import React from "react";
2
- import { Grid, Typography } from "@mui/material";
3
- import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
1
+ import React, { useState } from "react";
2
+ import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
3
+ import WidthFullIcon from "@mui/icons-material/WidthFull";
4
+ import WidthNormalIcon from "@mui/icons-material/WidthNormal";
5
+ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
6
+ import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
4
7
  import { toolbarGroups } from "../toolbarGroups";
5
8
  import ColorPicker from "../../Elements/Color Picker/ColorPicker";
6
- import { activeMark } from "../../utils/SlateUtilityFunctions";
9
+ import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive } from "../../utils/SlateUtilityFunctions";
10
+ import LinkButton from "../../Elements/Link/LinkButton";
11
+ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
12
+ import { AllColors } from "../../Elements/Color Picker/ColorButtons";
7
13
  import { jsx as _jsx } from "react/jsx-runtime";
8
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
15
  const allTools = toolbarGroups.flat();
16
+ const ButtonComp = {
17
+ AccordionButton: AccordionButton
18
+ };
10
19
  const TextFormat = props => {
11
20
  const {
12
21
  classes,
13
22
  editor
14
23
  } = props;
24
+ const [anchorEl, setAnchorEl] = useState(null);
25
+ const [type, setType] = useState(null);
26
+ const open = Boolean(anchorEl);
15
27
  const fontFamily = allTools.find(f => f.format === "fontFamily");
28
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
16
29
  const fontStyle = allTools.filter(f => f.type === "mark");
17
30
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
31
+ const link = allTools.find(f => f.format?.indexOf("link") >= 0);
32
+ const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
33
+ const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
34
+ const {
35
+ pageProps
36
+ } = getPageSettings(editor)?.element || {};
37
+ const {
38
+ pageWidth
39
+ } = pageProps;
40
+ const {
41
+ isActive: isBlockQuoteActive,
42
+ props: bqProps
43
+ } = getBlockActive(editor, "blockquote");
44
+ const {
45
+ color: bqColor,
46
+ bgColor: bqBgColor
47
+ } = bqProps || {
48
+ color: "",
49
+ bgColor: ""
50
+ };
51
+ const handlePageWidth = width => () => {
52
+ updatePageSettings(editor, {
53
+ ...pageProps,
54
+ pageWidth: width
55
+ });
56
+ };
57
+ const handleColorPicker = type => e => {
58
+ setType(type);
59
+ setAnchorEl(e.currentTarget);
60
+ };
61
+ const updateBlockQuote = attr => {
62
+ const upAttr = {
63
+ ...(bqProps || {}),
64
+ ...attr
65
+ };
66
+ delete upAttr.children;
67
+ delete upAttr.type;
68
+ if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
69
+ upateBlockActive(editor, "blockquote", upAttr);
70
+ } else {
71
+ toggleBlock(editor, "blockquote", editor.selection, upAttr);
72
+ }
73
+ };
74
+ const onSelectColor = color => () => {
75
+ const attr = {
76
+ [type]: color
77
+ };
78
+ updateBlockQuote(attr);
79
+ };
80
+ const handleQuote = attr => () => {
81
+ updateBlockQuote(attr);
82
+ };
83
+ const onClosePicker = () => {
84
+ setAnchorEl(null);
85
+ };
18
86
  return /*#__PURE__*/_jsxs(Grid, {
19
87
  container: true,
20
88
  sx: classes.textFormatWrapper,
@@ -24,11 +92,7 @@ const TextFormat = props => {
24
92
  children: [/*#__PURE__*/_jsx(Typography, {
25
93
  variant: "body1",
26
94
  color: "primary",
27
- style: {
28
- fontSize: "14px",
29
- fontWeight: 500,
30
- marginBottom: 5
31
- },
95
+ sx: classes.typoLabel,
32
96
  children: "Font Family"
33
97
  }), /*#__PURE__*/_jsx(Grid, {
34
98
  item: true,
@@ -39,67 +103,96 @@ const TextFormat = props => {
39
103
  editor: editor
40
104
  })
41
105
  })]
42
- }), /*#__PURE__*/_jsx(Grid, {
106
+ }), /*#__PURE__*/_jsxs(Grid, {
107
+ container: true,
108
+ spacing: 2,
109
+ children: [/*#__PURE__*/_jsxs(Grid, {
110
+ item: true,
111
+ xs: 6,
112
+ children: [/*#__PURE__*/_jsx(Typography, {
113
+ variant: "body1",
114
+ color: "primary",
115
+ sx: classes.typoLabel,
116
+ children: "Font Weight"
117
+ }), /*#__PURE__*/_jsx(Grid, {
118
+ item: true,
119
+ xs: 12,
120
+ sx: classes.textFormatField,
121
+ children: /*#__PURE__*/_jsx(Dropdown, {
122
+ ...fontWeight,
123
+ editor: editor,
124
+ width: "100%"
125
+ })
126
+ })]
127
+ }), /*#__PURE__*/_jsxs(Grid, {
128
+ item: true,
129
+ xs: 6,
130
+ children: [/*#__PURE__*/_jsx(Typography, {
131
+ variant: "body1",
132
+ color: "primary",
133
+ sx: classes.typoLabel,
134
+ children: "Font Size"
135
+ }), /*#__PURE__*/_jsx(Grid, {
136
+ item: true,
137
+ xs: 12,
138
+ sx: classes.textFormatCG,
139
+ children: /*#__PURE__*/_jsx(TextSize, {
140
+ format: "fontSize",
141
+ activeMark: activeMark,
142
+ editor: editor,
143
+ fullWidth: true
144
+ })
145
+ })]
146
+ })]
147
+ }), /*#__PURE__*/_jsxs(Grid, {
43
148
  item: true,
44
149
  xs: 12,
45
- sx: {
46
- paddingTop: "12px"
47
- },
48
- children: /*#__PURE__*/_jsx(Typography, {
150
+ sx: classes.textFormatField,
151
+ children: [/*#__PURE__*/_jsx(Typography, {
49
152
  variant: "body1",
50
153
  color: "primary",
51
- style: {
52
- fontSize: "14px",
53
- fontWeight: 500,
54
- marginBottom: 5
55
- },
56
- children: "Font Style"
57
- })
58
- }), /*#__PURE__*/_jsx(Grid, {
59
- item: true,
60
- xs: 12,
61
- sx: classes.textFormatCG,
62
- children: fontStyle?.map((m, i) => {
63
- return /*#__PURE__*/_jsx(MarkButton, {
154
+ sx: classes.typoLabel,
155
+ children: "Text Color"
156
+ }), /*#__PURE__*/_jsx(Grid, {
157
+ sx: classes.textFormatColorWrpr,
158
+ children: /*#__PURE__*/_jsx(ColorPicker, {
159
+ format: "color",
160
+ activeMark: activeMark,
64
161
  editor: editor,
65
- ...m
66
- }, `pptool_mark_${i}_${m.id}`);
67
- })
162
+ showHex: false,
163
+ rounded: true
164
+ }, "11_cc")
165
+ })]
68
166
  }), /*#__PURE__*/_jsxs(Grid, {
69
167
  item: true,
70
- xs: 4,
168
+ xs: 12,
71
169
  sx: classes.textFormatField,
72
170
  children: [/*#__PURE__*/_jsx(Typography, {
73
171
  variant: "body1",
74
172
  color: "primary",
75
- style: {
76
- fontSize: "14px",
77
- fontWeight: 500,
78
- marginBottom: 5
79
- },
80
- children: "Font Size"
173
+ sx: classes.typoLabel,
174
+ children: "Text Background Color"
81
175
  }), /*#__PURE__*/_jsx(Grid, {
82
176
  item: true,
83
- xs: 10,
84
- sx: classes.textFormatCG,
85
- children: /*#__PURE__*/_jsx(TextSize, {
86
- format: "fontSize",
177
+ xs: 12,
178
+ sx: classes.textFormatColorWrpr,
179
+ children: /*#__PURE__*/_jsx(ColorPicker, {
180
+ format: "bgColor",
87
181
  activeMark: activeMark,
88
- editor: editor
89
- })
182
+ editor: editor,
183
+ showHex: false,
184
+ rounded: true,
185
+ classes: classes
186
+ }, "12_cc")
90
187
  })]
91
188
  }), /*#__PURE__*/_jsxs(Grid, {
92
189
  item: true,
93
- xs: 7,
190
+ xs: 6,
94
191
  sx: classes.textFormatField,
95
192
  children: [/*#__PURE__*/_jsx(Typography, {
96
193
  variant: "body1",
97
194
  color: "primary",
98
- style: {
99
- fontSize: "14px",
100
- fontWeight: 500,
101
- marginBottom: 5
102
- },
195
+ sx: classes.typoLabel,
103
196
  children: "Text Alignment"
104
197
  }), /*#__PURE__*/_jsx(Grid, {
105
198
  item: true,
@@ -114,52 +207,142 @@ const TextFormat = props => {
114
207
  })]
115
208
  }), /*#__PURE__*/_jsxs(Grid, {
116
209
  item: true,
117
- xs: 12,
210
+ xs: 6,
118
211
  sx: classes.textFormatField,
119
212
  children: [/*#__PURE__*/_jsx(Typography, {
120
213
  variant: "body1",
121
214
  color: "primary",
122
- style: {
123
- fontSize: "14px",
124
- fontWeight: 500,
125
- marginBottom: 5
126
- },
127
- children: "Text Color"
215
+ sx: classes.typoLabel,
216
+ children: "Lists"
128
217
  }), /*#__PURE__*/_jsx(Grid, {
129
- sx: classes.textFormatFieldBorder,
130
- children: /*#__PURE__*/_jsx(ColorPicker, {
131
- format: "color",
132
- activeMark: activeMark,
133
- editor: editor,
134
- showHex: true,
135
- rounded: true
136
- }, "11_cc")
218
+ item: true,
219
+ xs: 12,
220
+ sx: classes.textFormatCG,
221
+ children: lists?.map((m, i) => {
222
+ const Comp = ButtonComp[m?.component] || BlockButton;
223
+ return /*#__PURE__*/_jsx(Comp, {
224
+ editor: editor,
225
+ ...m
226
+ }, `pptool_block_${i}_${m.id}`);
227
+ })
137
228
  })]
138
229
  }), /*#__PURE__*/_jsxs(Grid, {
139
230
  item: true,
140
231
  xs: 12,
141
- sx: classes.textFormatField,
142
232
  children: [/*#__PURE__*/_jsx(Typography, {
143
233
  variant: "body1",
144
234
  color: "primary",
145
- style: {
146
- fontSize: "14px",
147
- fontWeight: 500,
148
- marginBottom: 5
149
- },
150
- children: "Background Color"
151
- }), /*#__PURE__*/_jsx(Grid, {
235
+ sx: classes.typoLabel,
236
+ children: "Typography"
237
+ }), /*#__PURE__*/_jsxs(Grid, {
152
238
  item: true,
153
239
  xs: 12,
154
- sx: classes.textFormatFieldBorder,
155
- children: /*#__PURE__*/_jsx(ColorPicker, {
156
- format: "bgColor",
157
- activeMark: activeMark,
158
- editor: editor,
159
- showHex: true,
160
- rounded: true
161
- }, "12_cc")
240
+ className: "typo-icons",
241
+ sx: classes.evenSpace,
242
+ children: [typo?.map((m, i) => {
243
+ return /*#__PURE__*/_jsx(BlockButton, {
244
+ editor: editor,
245
+ ...m
246
+ }, `pptool_mark_${i}_${m.id}`);
247
+ }), fontStyle?.map((m, i) => {
248
+ return /*#__PURE__*/_jsx(MarkButton, {
249
+ editor: editor,
250
+ ...m
251
+ }, `pptool_mark_${i}_${m.id}`);
252
+ }), /*#__PURE__*/_jsx(LinkButton, {
253
+ active: isBlockActive(editor, link.format),
254
+ editor: editor
255
+ }, link.id)]
162
256
  })]
257
+ }), /*#__PURE__*/_jsx(Grid, {
258
+ item: true,
259
+ xs: 12,
260
+ sx: classes.evenSpace,
261
+ style: {
262
+ justifyContent: "space-between"
263
+ },
264
+ children: /*#__PURE__*/_jsx(Typography, {
265
+ variant: "body1",
266
+ color: "primary",
267
+ sx: classes.typoLabel,
268
+ children: "Decorations"
269
+ })
270
+ }), /*#__PURE__*/_jsxs(Grid, {
271
+ item: true,
272
+ xs: 12,
273
+ sx: classes.evenSpace,
274
+ style: {
275
+ justifyContent: "space-between"
276
+ },
277
+ className: "text-decorations-wrpr",
278
+ children: [/*#__PURE__*/_jsxs(ButtonGroup, {
279
+ sx: classes.btnGroup,
280
+ children: [/*#__PURE__*/_jsx(Button, {
281
+ className: `no-hover ${bqBgColor ? "active" : ""}`,
282
+ onClick: handleQuote({
283
+ bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
284
+ }),
285
+ style: {
286
+ background: bqBgColor
287
+ },
288
+ children: "Colorbox"
289
+ }), /*#__PURE__*/_jsx(Button, {
290
+ onClick: handleColorPicker("bgColor"),
291
+ children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
292
+ })]
293
+ }), /*#__PURE__*/_jsxs(ButtonGroup, {
294
+ sx: classes.btnGroup,
295
+ children: [/*#__PURE__*/_jsx(Button, {
296
+ className: `no-hover ${bqColor ? "active" : ""}`,
297
+ onClick: handleQuote({
298
+ color: !bqColor ? "rgb(47, 94, 188)" : null
299
+ }),
300
+ children: /*#__PURE__*/_jsx("span", {
301
+ style: {
302
+ borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
303
+ paddingLeft: "12px"
304
+ },
305
+ children: "Quote"
306
+ })
307
+ }), /*#__PURE__*/_jsx(Button, {
308
+ onClick: handleColorPicker("color"),
309
+ children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
310
+ })]
311
+ }), /*#__PURE__*/_jsx(Button, {
312
+ onClick: handlePageWidth("fixed"),
313
+ startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
314
+ sx: classes.pageWidthBtn,
315
+ className: pageWidth === "fixed" || !pageWidth ? "active" : "",
316
+ style: {
317
+ width: "45%"
318
+ },
319
+ children: "Centered"
320
+ }), /*#__PURE__*/_jsx(Button, {
321
+ sx: classes.pageWidthBtn,
322
+ className: pageWidth === "full" ? "active" : "",
323
+ onClick: handlePageWidth("full"),
324
+ startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
325
+ style: {
326
+ width: "45%"
327
+ },
328
+ children: "Full width"
329
+ })]
330
+ }), /*#__PURE__*/_jsx(Popover, {
331
+ open: open,
332
+ anchorEl: anchorEl,
333
+ anchorOrigin: {
334
+ vertical: "bottom",
335
+ horizontal: "center"
336
+ },
337
+ transformOrigin: {
338
+ vertical: "top",
339
+ horizontal: "center"
340
+ },
341
+ onClose: onClosePicker,
342
+ children: /*#__PURE__*/_jsx(AllColors, {
343
+ classes: classes,
344
+ onSelect: onSelectColor
345
+ })
163
346
  })]
164
347
  });
165
348
  };
@@ -1,11 +1,12 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Popper, Fade, Paper, IconButton, Grid, Typography } from "@mui/material";
3
- import CloseIcon from "@mui/icons-material/Close";
2
+ import { Popper, Fade, Paper } from "@mui/material";
4
3
  import { Editor, Range } from "slate";
5
4
  import { useSlate, useFocused } from "slate-react";
6
5
  import TextFormat from "./TextFormat";
7
6
  import usePopupStyle from "./PopupToolStyle";
8
7
  import useDrag from "../../hooks/useDrag";
8
+ import PopperHeader from "./PopperHeader";
9
+ import { TableUtil } from "../../utils/table";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const PopupTool = props => {
@@ -19,9 +20,14 @@ const PopupTool = props => {
19
20
  } = editor;
20
21
  const [event] = useDrag(anchorEl);
21
22
  const id = open ? "popup-edit-tool" : "";
23
+ const table = new TableUtil(editor);
22
24
  useEffect(() => {
23
25
  if (event === "end" && anchorEl && !open) {
24
- setOpen(true);
26
+ // for table cell selection
27
+ const isCellsSelected = table.isCellSelected(editor.selection);
28
+ if (!isCellsSelected) {
29
+ setOpen(true);
30
+ }
25
31
  } else if (!anchorEl) {
26
32
  setOpen(false);
27
33
  }
@@ -30,22 +36,25 @@ const PopupTool = props => {
30
36
  if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
31
37
  setAnchorEl(null);
32
38
  } else {
33
- const domSelection = window.getSelection();
34
- const domRange = domSelection?.getRangeAt(0);
35
- const {
36
- startOffset,
37
- endOffset
38
- } = domRange || {};
39
- if (startOffset !== endOffset) {
40
- const rect = domRange.getBoundingClientRect();
41
- setAnchorEl({
42
- clientWidth: rect.width,
43
- clientHeight: rect.height,
44
- getBoundingClientRect: () => rect
45
- });
46
- }
39
+ updateAnchorEl();
47
40
  }
48
41
  }, [selection]);
42
+ const updateAnchorEl = () => {
43
+ const domSelection = window.getSelection();
44
+ const domRange = domSelection?.getRangeAt(0);
45
+ const {
46
+ startOffset,
47
+ endOffset
48
+ } = domRange || {};
49
+ if (startOffset !== endOffset) {
50
+ const rect = domRange.getBoundingClientRect();
51
+ setAnchorEl({
52
+ clientWidth: rect.width,
53
+ clientHeight: rect.height,
54
+ getBoundingClientRect: () => rect
55
+ });
56
+ }
57
+ };
49
58
  const handleClose = () => {
50
59
  setAnchorEl(null);
51
60
  setOpen(false);
@@ -64,33 +73,13 @@ const PopupTool = props => {
64
73
  ...TransitionProps,
65
74
  timeout: 350,
66
75
  children: /*#__PURE__*/_jsxs(Paper, {
67
- children: [/*#__PURE__*/_jsxs(Grid, {
68
- item: true,
69
- xs: 12,
70
- style: {
71
- display: "flex",
72
- padding: "12px"
73
- },
74
- justifyContent: "space-between",
75
- alignItems: "center",
76
- className: "textSettingHeader",
77
- children: [/*#__PURE__*/_jsx(Typography, {
78
- color: "primary",
79
- sx: {
80
- fontSize: "16px",
81
- fontWeight: "700",
82
- color: "#000"
83
- },
84
- children: "TEXT SETTINGS"
85
- }), /*#__PURE__*/_jsx(Grid, {
86
- sx: classes.textFormatLabel,
87
- justifyContent: "end",
88
- children: /*#__PURE__*/_jsx(IconButton, {
89
- className: "close-popupbtn",
90
- onClick: handleClose,
91
- children: /*#__PURE__*/_jsx(CloseIcon, {})
92
- })
93
- })]
76
+ style: {
77
+ borderRadius: "10px"
78
+ },
79
+ children: [/*#__PURE__*/_jsx(PopperHeader, {
80
+ title: "Text Settings",
81
+ classes: classes,
82
+ onClose: handleClose
94
83
  }), /*#__PURE__*/_jsx(TextFormat, {
95
84
  editor: editor,
96
85
  classes: classes