@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,66 +1,70 @@
1
- import React, { useEffect, useMemo, useState } from "react";
2
- import { Popper, Fade, Paper, IconButton,
3
- // Drawer,
4
- Grid, Typography } from "@mui/material";
5
- // import { Drawer, Popper } from "@mui/material";
6
- import CloseIcon from "@mui/icons-material/Close";
1
+ import React, { useEffect, useState } from "react";
2
+ import { Popper, Fade, Paper } from "@mui/material";
7
3
  import { Editor, Range } from "slate";
8
4
  import { useSlate, useFocused } from "slate-react";
9
5
  import TextFormat from "./TextFormat";
10
6
  import usePopupStyle from "./PopupToolStyle";
11
7
  import useDrag from "../../hooks/useDrag";
8
+ import PopperHeader from "./PopperHeader";
9
+ import { TableUtil } from "../../utils/table";
12
10
  import { jsx as _jsx } from "react/jsx-runtime";
13
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
12
  const PopupTool = props => {
15
13
  const classes = usePopupStyle();
16
14
  const [anchorEl, setAnchorEl] = useState(null);
15
+ const [open, setOpen] = useState(false);
17
16
  const editor = useSlate();
18
17
  const inFocus = useFocused();
19
18
  const {
20
19
  selection
21
20
  } = editor;
22
- const open = Boolean(anchorEl);
21
+ const [event] = useDrag(anchorEl);
23
22
  const id = open ? "popup-edit-tool" : "";
24
- const [event] = useDrag();
23
+ const table = new TableUtil(editor);
24
+ useEffect(() => {
25
+ if (event === "end" && anchorEl && !open) {
26
+ // for table cell selection
27
+ const isCellsSelected = table.isCellSelected(editor.selection);
28
+ if (!isCellsSelected) {
29
+ setOpen(true);
30
+ }
31
+ } else if (!anchorEl) {
32
+ setOpen(false);
33
+ }
34
+ }, [event, anchorEl]);
25
35
  useEffect(() => {
26
36
  if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
27
37
  setAnchorEl(null);
28
38
  } else {
29
- const domSelection = window.getSelection();
30
- const domRange = domSelection.getRangeAt(0);
31
- const {
32
- startOffset,
33
- endOffset
34
- } = domRange || {};
35
- if (startOffset !== endOffset) {
36
- const rect = domRange.getBoundingClientRect();
37
- if (event === "end" && !open && anchorEl === null) {
38
- setAnchorEl({
39
- clientWidth: rect.width,
40
- clientHeight: rect.height,
41
- getBoundingClientRect: () => rect
42
- });
43
- }
44
- }
39
+ updateAnchorEl();
40
+ }
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
+ });
45
56
  }
46
- }, [selection, event]);
57
+ };
47
58
  const handleClose = () => {
48
59
  setAnchorEl(null);
60
+ setOpen(false);
49
61
  };
50
- const toolTextFormat = useMemo(() => {
51
- return /*#__PURE__*/_jsx(TextFormat, {
52
- editor: editor,
53
- classes: classes
54
- });
55
- }, [open]);
56
- return /*#__PURE__*/_jsx(Popper, {
62
+ return open ? /*#__PURE__*/_jsx(Popper, {
57
63
  id: id,
58
64
  open: open,
59
- disablePortal: false,
60
65
  anchorEl: anchorEl,
61
66
  transition: true,
62
67
  placement: "auto-end",
63
- onMouseDown: e => e.preventDefault(),
64
68
  sx: classes.popupWrapper,
65
69
  className: "tools-drawer",
66
70
  children: ({
@@ -69,58 +73,19 @@ const PopupTool = props => {
69
73
  ...TransitionProps,
70
74
  timeout: 350,
71
75
  children: /*#__PURE__*/_jsxs(Paper, {
72
- children: [/*#__PURE__*/_jsxs(Grid, {
73
- item: true,
74
- xs: 12,
75
- style: {
76
- display: "flex",
77
- padding: "12px"
78
- },
79
- justifyContent: "space-between",
80
- alignItems: "center",
81
- className: "textSettingHeader",
82
- children: [/*#__PURE__*/_jsx(Typography, {
83
- color: "primary",
84
- sx: {
85
- fontSize: "16px",
86
- fontWeight: "700",
87
- color: "#000"
88
- },
89
- children: "TEXT SETTINGS"
90
- }), /*#__PURE__*/_jsx(Grid, {
91
- sx: classes.textFormatLabel,
92
- justifyContent: "end",
93
- children: /*#__PURE__*/_jsx(IconButton, {
94
- className: "close-popupbtn",
95
- onClick: handleClose,
96
- children: /*#__PURE__*/_jsx(CloseIcon, {})
97
- })
98
- })]
99
- }), toolTextFormat]
76
+ style: {
77
+ borderRadius: "10px"
78
+ },
79
+ children: [/*#__PURE__*/_jsx(PopperHeader, {
80
+ title: "Text Settings",
81
+ classes: classes,
82
+ onClose: handleClose
83
+ }), /*#__PURE__*/_jsx(TextFormat, {
84
+ editor: editor,
85
+ classes: classes
86
+ })]
100
87
  })
101
88
  })
102
- });
103
-
104
- // return (
105
- // <Drawer
106
- // // id={id}
107
- // open={open}
108
- // fullWidth
109
- // // disablePortal={false}
110
- // // anchorEl={anchorEl}
111
- // // transition
112
- // // placement="bottom-start"
113
- // // onMouseDown={(e) => e.preventDefault()}
114
- // // sx={classes.popupWrapper}
115
- // anchor="right"
116
- // hideBackdrop
117
- // // handleClose={handleClose}
118
- // className="tools-drawer"
119
- // // variant="persistent"
120
- // >
121
- // <TextFormat editor={editor} classes={classes} onClose={handleClose} />
122
- // </Drawer>
123
- // );
89
+ }) : null;
124
90
  };
125
-
126
91
  export default PopupTool;
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
2
2
  import { useSlate } from "slate-react";
3
3
  import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
4
4
  import useFormat from "../utils/customHooks/useFormat.js";
5
- import defaultToolbarGroups from "./toolbarGroups.js";
6
- import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
5
+ import { toolbarGroups as defaultToolbarGroups } from "./toolbarGroups.js";
6
+ import { BlockButton, MarkButton, Dropdown, TextSize, FontFamilyDropdown, FontSize } from "./FormatTools";
7
7
  import ColorPicker from "../Elements/Color Picker/ColorPicker";
8
8
  import LinkButton from "../Elements/Link/LinkButton";
9
9
  import Embed from "../Elements/Embed/Embed";
@@ -24,13 +24,185 @@ import FormButton from "../Elements/Form/FormButton.js";
24
24
  import Text from "./FormatTools/Text";
25
25
  import ChipTextButton from "../Elements/ChipText/ChipTextButton";
26
26
  import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
27
+ import EmojiButton from "../Elements/Emoji/EmojiButton.js";
27
28
  import "./styles.css";
29
+ import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
28
30
  import { jsx as _jsx } from "react/jsx-runtime";
29
31
  import { jsxs as _jsxs } from "react/jsx-runtime";
32
+ export const RenderToolbarIcon = props => {
33
+ const {
34
+ element,
35
+ editor,
36
+ customProps,
37
+ gi,
38
+ handleCodeToText,
39
+ icoBtnType
40
+ } = props;
41
+ const renderIcon = () => {
42
+ switch (element.type) {
43
+ case "block":
44
+ return /*#__PURE__*/_jsx(BlockButton, {
45
+ ...element,
46
+ editor: editor
47
+ }, element.id);
48
+ case "mark":
49
+ return /*#__PURE__*/_jsx(MarkButton, {
50
+ ...element,
51
+ editor: editor
52
+ }, element.id);
53
+ case "dropdown":
54
+ return /*#__PURE__*/_jsx(Dropdown, {
55
+ ...element,
56
+ editor: editor
57
+ }, element.id);
58
+ case "fontfamilydropdown":
59
+ return /*#__PURE__*/_jsx(FontFamilyDropdown, {
60
+ ...element,
61
+ editor: editor
62
+ }, element.id);
63
+ case "numberInput":
64
+ return /*#__PURE__*/_jsx(FontSize, {
65
+ editor: editor,
66
+ ...element
67
+ }, element.id);
68
+ case "fontSize":
69
+ return /*#__PURE__*/_jsx(TextSize, {
70
+ ...element,
71
+ editor: editor
72
+ }, element.id);
73
+ case "text":
74
+ return /*#__PURE__*/_jsx(Text, {
75
+ ...element,
76
+ editor: editor,
77
+ style: {
78
+ width: "80px"
79
+ }
80
+ }, element.id);
81
+ case "link":
82
+ return /*#__PURE__*/_jsx(LinkButton, {
83
+ active: isBlockActive(editor, "link"),
84
+ editor: editor
85
+ }, element.id);
86
+ case "embed":
87
+ return /*#__PURE__*/_jsx(Embed, {
88
+ format: element.format,
89
+ editor: editor,
90
+ customProps: customProps,
91
+ icoBtnType: icoBtnType,
92
+ lbT: element.lbT
93
+ }, element.id);
94
+ case "color-picker":
95
+ return /*#__PURE__*/_jsx(ColorPicker, {
96
+ activeMark: activeMark,
97
+ format: element.format,
98
+ editor: editor,
99
+ title: element.title
100
+ }, element.id);
101
+ case "table":
102
+ return /*#__PURE__*/_jsx(TableSelector, {
103
+ editor: editor,
104
+ icoBtnType: icoBtnType
105
+ }, element.id);
106
+ case "id":
107
+ return /*#__PURE__*/_jsx(Id, {
108
+ editor: editor
109
+ }, `gi_id_${gi}`);
110
+ case "equation":
111
+ return /*#__PURE__*/_jsx(EquationButton, {
112
+ editor: editor
113
+ }, `gi_equation_${gi}`);
114
+ case "codeToText":
115
+ return /*#__PURE__*/_jsx(CodeToTextButton, {
116
+ handleButtonClick: handleCodeToText
117
+ }, `gi_codeToText_${gi}`);
118
+ case "grid":
119
+ return /*#__PURE__*/_jsx(GridButton, {
120
+ editor: editor,
121
+ customProps: customProps,
122
+ icoBtnType: icoBtnType
123
+ }, element.id);
124
+ case "newLine":
125
+ return /*#__PURE__*/_jsx(NewLineButton, {
126
+ editor: editor,
127
+ icoBtnType: icoBtnType
128
+ }, element.id);
129
+ case "accordion":
130
+ return /*#__PURE__*/_jsx(AccordionButton, {
131
+ editor: editor
132
+ }, element.id);
133
+ case "signature":
134
+ return /*#__PURE__*/_jsx(SignatureButton, {
135
+ editor: editor,
136
+ icoBtnType: icoBtnType
137
+ }, element.id);
138
+ case "button":
139
+ return /*#__PURE__*/_jsx(ButtonToolIcon, {
140
+ editor: editor,
141
+ icoBtnType: icoBtnType
142
+ }, element.id);
143
+ case "page-settings":
144
+ return /*#__PURE__*/_jsx(PageSettingsButton, {
145
+ editor: editor,
146
+ customProps: customProps,
147
+ icoBtnType: icoBtnType
148
+ }, element.id);
149
+ case "carousel":
150
+ return /*#__PURE__*/_jsx(CarouselButton, {
151
+ editor: editor,
152
+ icoBtnType: icoBtnType
153
+ }, element.id);
154
+ case "chip-text":
155
+ return /*#__PURE__*/_jsx(ChipTextButton, {
156
+ editor: editor,
157
+ customProps: customProps
158
+ }, element.id);
159
+ // case "drawer":
160
+ // return (
161
+ // <DrawerMenuButton
162
+ // key={element.id}
163
+ // editor={editor}
164
+ // customProps={customProps}
165
+ // />
166
+ // );
167
+ case "app-header":
168
+ return /*#__PURE__*/_jsx(AppHeaderButton, {
169
+ editor: editor,
170
+ customProps: customProps
171
+ }, element.id);
172
+ case "form":
173
+ return /*#__PURE__*/_jsx(FormButton, {
174
+ editor: editor,
175
+ customProps: customProps,
176
+ icoBtnType: icoBtnType
177
+ }, element.id);
178
+ case "icon-text":
179
+ return /*#__PURE__*/_jsx(InlineIconButton, {
180
+ editor: editor,
181
+ customProps: customProps
182
+ }, element.id);
183
+ case "emoji":
184
+ return /*#__PURE__*/_jsx(EmojiButton, {
185
+ editor: editor,
186
+ customProps: customProps,
187
+ icoBtnType: icoBtnType
188
+ }, element.id);
189
+ case "topbanner":
190
+ return /*#__PURE__*/_jsx(TopBannerButton, {
191
+ editor: editor,
192
+ customProps: customProps,
193
+ icoBtnType: icoBtnType
194
+ }, element.id);
195
+ default:
196
+ return null;
197
+ }
198
+ };
199
+ return renderIcon();
200
+ };
30
201
  const Toolbar = props => {
31
202
  const {
32
203
  handleCodeToText,
33
- customProps
204
+ customProps,
205
+ toolbarOptions
34
206
  } = props;
35
207
  const editor = useSlate();
36
208
  const isTable = useFormat(editor, "table");
@@ -47,135 +219,23 @@ const Toolbar = props => {
47
219
  setToolbarGroups(filteredGroups);
48
220
  // eslint-disable-next-line react-hooks/exhaustive-deps
49
221
  }, [isTable]);
222
+ useEffect(() => {
223
+ if (toolbarOptions?.removeOptions) {
224
+ setToolbarGroups(defaultToolbarGroups.map(elem => elem?.filter(item => !toolbarOptions?.removeOptions?.includes(item?.format))));
225
+ }
226
+ }, [toolbarOptions]);
50
227
  return /*#__PURE__*/_jsxs("div", {
51
- className: "toolbar",
228
+ className: `toolbar ${toolbarOptions?.toolbarPosition}`,
52
229
  children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
53
- className: "toolbar-grp1",
230
+ className: `toolbar-grp1 ${toolbarOptions?.toolbarPosition}`,
54
231
  children: group.map((element, gi) => {
55
- switch (element.type) {
56
- case "block":
57
- return /*#__PURE__*/_jsx(BlockButton, {
58
- ...element,
59
- editor: editor
60
- }, element.id);
61
- case "mark":
62
- return /*#__PURE__*/_jsx(MarkButton, {
63
- ...element,
64
- editor: editor
65
- }, element.id);
66
- case "dropdown":
67
- return /*#__PURE__*/_jsx(Dropdown, {
68
- ...element,
69
- editor: editor
70
- }, element.id);
71
- case "fontSize":
72
- return /*#__PURE__*/_jsx(TextSize, {
73
- ...element,
74
- editor: editor
75
- }, element.id);
76
- case "text":
77
- return /*#__PURE__*/_jsx(Text, {
78
- ...element,
79
- editor: editor,
80
- style: {
81
- width: "80px"
82
- }
83
- }, element.id);
84
- case "link":
85
- return /*#__PURE__*/_jsx(LinkButton, {
86
- active: isBlockActive(editor, "link"),
87
- editor: editor
88
- }, element.id);
89
- case "embed":
90
- return /*#__PURE__*/_jsx(Embed, {
91
- format: element.format,
92
- editor: editor,
93
- customProps: customProps
94
- }, element.id);
95
- case "color-picker":
96
- return /*#__PURE__*/_jsx(ColorPicker, {
97
- activeMark: activeMark,
98
- format: element.format,
99
- editor: editor,
100
- title: element.title
101
- }, element.id);
102
- case "table":
103
- return /*#__PURE__*/_jsx(TableSelector, {
104
- editor: editor
105
- }, element.id);
106
- case "id":
107
- return /*#__PURE__*/_jsx(Id, {
108
- editor: editor
109
- }, `gi_id_${gi}`);
110
- case "equation":
111
- return /*#__PURE__*/_jsx(EquationButton, {
112
- editor: editor
113
- }, `gi_equation_${gi}`);
114
- case "codeToText":
115
- return /*#__PURE__*/_jsx(CodeToTextButton, {
116
- handleButtonClick: handleCodeToText
117
- }, `gi_codeToText_${gi}`);
118
- case "grid":
119
- return /*#__PURE__*/_jsx(GridButton, {
120
- editor: editor,
121
- customProps: customProps
122
- }, element.id);
123
- case "newLine":
124
- return /*#__PURE__*/_jsx(NewLineButton, {
125
- editor: editor
126
- }, element.id);
127
- case "accordion":
128
- return /*#__PURE__*/_jsx(AccordionButton, {
129
- editor: editor
130
- }, element.id);
131
- case "signature":
132
- return /*#__PURE__*/_jsx(SignatureButton, {
133
- editor: editor
134
- }, element.id);
135
- case "button":
136
- return /*#__PURE__*/_jsx(ButtonToolIcon, {
137
- editor: editor
138
- }, element.id);
139
- case "page-settings":
140
- return /*#__PURE__*/_jsx(PageSettingsButton, {
141
- editor: editor,
142
- customProps: customProps
143
- }, element.id);
144
- case "carousel":
145
- return /*#__PURE__*/_jsx(CarouselButton, {
146
- editor: editor
147
- }, element.id);
148
- case "chip-text":
149
- return /*#__PURE__*/_jsx(ChipTextButton, {
150
- editor: editor,
151
- customProps: customProps
152
- }, element.id);
153
- // case "drawer":
154
- // return (
155
- // <DrawerMenuButton
156
- // key={element.id}
157
- // editor={editor}
158
- // customProps={customProps}
159
- // />
160
- // );
161
- case "app-header":
162
- return /*#__PURE__*/_jsx(AppHeaderButton, {
163
- editor: editor,
164
- customProps: customProps
165
- }, element.id);
166
- case "form":
167
- return /*#__PURE__*/_jsx(FormButton, {
168
- editor: editor,
169
- customProps: customProps
170
- }, element.id);
171
- case "icon-text":
172
- return /*#__PURE__*/_jsx(InlineIconButton, {
173
- editor: editor,
174
- customProps: customProps
175
- }, element.id);
176
- default:
177
- return null;
178
- }
232
+ return /*#__PURE__*/_jsx(RenderToolbarIcon, {
233
+ editor: editor,
234
+ element: element,
235
+ gi: gi,
236
+ handleCodeToText: handleCodeToText,
237
+ customProps: customProps
238
+ }, `ri_${element.id}`);
179
239
  })
180
240
  }, index)), /*#__PURE__*/_jsx(HtmlContextMenu, {
181
241
  editor: editor,
@@ -1,43 +1,161 @@
1
- .toolbar {
2
- background: #ffffff;
3
- margin:4px 0;
4
- display:flex;
5
- flex-wrap:wrap;
6
- align-items:center;
7
- padding: 12px 0px;
8
- row-gap: 15px;
9
- position: -webkit-sticky;
10
- position: sticky;
1
+ .toolbar-wrapper {
2
+ position: absolute;
11
3
  top: 0;
4
+ /* background-color: #ffffff; */
5
+ overflow: auto;
6
+ display: flex;
12
7
  z-index: 2;
13
- margin-bottom: 12px;
14
- border-bottom: 2px solid #CCC;
8
+ width: 100%;
9
+ padding: 12px 6px;
10
+ }
11
+
12
+ .editor-wrapper-toolbar-closed .toolbar-wrapper {
13
+ background-color: unset;
14
+ width: unset;
15
+ right: unset;
16
+ }
17
+
18
+ .toolbar-toggle {
19
+ display: flex;
20
+ align-items: center;
21
+ align-self: center;
22
+ background-color: #ffffff;
23
+ border-radius: 6px;
24
+ }
25
+
26
+ .editor-wrapper-toolbar-closed .toolbar-toggle {
27
+ border-radius: 8px;
28
+ }
29
+
30
+ .toolbar-toggle .MuiTypography-body1 {
31
+ font-size: 0.63rem;
32
+ }
33
+
34
+ .toolbar-wrapper.top-right,
35
+ .bottom-right {
36
+ flex-direction: row-reverse;
37
+ right: 0;
38
+ left: 0
39
+ }
40
+
41
+ .top-left,
42
+ .bottom-left {
43
+ flex-direction: row;
44
+ }
45
+
46
+ .left-top {
47
+ flex-direction: column;
48
+ }
49
+
50
+ .left-bottom {
51
+ flex-direction: column-reverse;
52
+ }
53
+
54
+ .top-left-toolbar-wrapper,
55
+ .bottom-left-toolbar-wrapper {
56
+ left: 0;
57
+ right: 0;
58
+ }
59
+
60
+ .left-top-toolbar-wrapper,
61
+ .left-bottom-toolbar-wrapper {
62
+ left: 0;
63
+ height: 100%;
64
+ width: fit-content;
65
+ }
66
+
67
+ .right-top {
68
+ flex-direction: column;
15
69
  }
16
- .toolbar-grp1>*{
70
+
71
+ .right-bottom {
72
+ flex-direction: column-reverse;
73
+ }
74
+
75
+ .right-top-toolbar-wrapper,
76
+ .right-bottom-toolbar-wrapper {
77
+ right: 0;
78
+ height: 100%;
79
+ width: fit-content;
80
+ transition: all 0.5s;
81
+ }
82
+
83
+ .left-top-toolbar-wrapper,
84
+ .left-bottom-toolbar-wrapper {
85
+ left: 0;
86
+ height: 100%;
87
+ width: fit-content;
88
+ transition: all 0.5s;
89
+ }
90
+
91
+ .bottom-left-toolbar-wrapper,
92
+ .bottom-right-toolbar-wrapper {
93
+ top: unset;
94
+ bottom: 0;
95
+ }
96
+ .toolbar-wrapper.bottom-right-toolbar-wrapper {
97
+ right: 0 !important;
98
+ }
99
+
100
+ .toolbar {
101
+ display: flex;
102
+ flex-wrap: nowrap;
103
+ align-items: center;
104
+ }
105
+
106
+ .toolbar-grp1>* {
17
107
  /* margin-right: 10px; */
18
108
  cursor: pointer;
19
109
  }
20
- .toolbar-grp1{
21
- margin:0 2px;
110
+
111
+ .toolbar-grp1 {
112
+ margin: 0 2px;
22
113
  display: flex;
23
114
  align-items: center;
115
+ row-gap: 12px;
24
116
  }
117
+
25
118
  .toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
26
119
  margin-right: 10px;
27
120
  }
121
+
28
122
  .color-picker.popup-wrapper1 button {
29
123
  padding: 8px;
30
124
  }
31
- select{
125
+
126
+ select {
32
127
  height: 30px;
33
128
  border: none;
34
129
  width: 6.9rem;
35
130
  }
36
131
 
37
132
  .toolbar .editor-dd {
38
- width: 200px !important;
133
+ width: 200px;
39
134
  }
40
135
 
41
- .toolbar .MuiIconButton-root {
136
+ .toolbar .MuiIconButton-root {}
42
137
 
138
+
139
+ ::-webkit-scrollbar {
140
+ width: 4px;
141
+ height: 4px;
142
+ }
143
+
144
+ /* Track */
145
+ ::-webkit-scrollbar-track {
146
+ /* background: #E6E9F4; */
147
+ background: #e6e9f48a;
43
148
  }
149
+
150
+ /* Handle */
151
+ ::-webkit-scrollbar-thumb {
152
+ /* background: #bdc0d2; */
153
+ background: #bdc0d240;
154
+ border-radius: 10px;
155
+ }
156
+
157
+ /* Handle on hover */
158
+ ::-webkit-scrollbar-thumb:hover {
159
+ /* background: #a1a5bd; */
160
+ background: #bdc0d240;
161
+ }