@flozy/editor 2.1.1 → 2.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. package/dist/Editor/CommonEditor.js +16 -3
  2. package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
  3. package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
  4. package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
  5. package/dist/Editor/Elements/Embed/Image.js +13 -2
  6. package/dist/Editor/Elements/Form/Form.js +1 -1
  7. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +1 -0
  8. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +1 -1
  9. package/dist/Editor/Elements/Form/Workflow/Styles.js +7 -2
  10. package/dist/Editor/Elements/Form/Workflow/index.js +3 -3
  11. package/dist/Editor/Elements/Grid/Grid.js +4 -3
  12. package/dist/Editor/Styles/EditorStyles.js +7 -0
  13. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
  14. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
  15. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
  16. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
  17. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
  18. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
  19. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
  20. package/dist/Editor/Toolbar/PopupTool/index.js +34 -34
  21. package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
  22. package/dist/Editor/assets/svg/PaintIcon.js +15 -0
  23. package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
  24. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
  25. package/dist/Editor/plugins/withHTML.js +2 -2
  26. package/dist/Editor/service/formSubmit.js +2 -1
  27. package/package.json +1 -1
  28. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat.js +0 -419
@@ -1,419 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
- import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
4
- import WidthFullIcon from "@mui/icons-material/WidthFull";
5
- import WidthNormalIcon from "@mui/icons-material/WidthNormal";
6
- import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
7
- import FormatClearIcon from "@mui/icons-material/FormatClear";
8
- import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
9
- import { toolbarGroups } from "../toolbarGroups";
10
- import ColorPicker from "../../Elements/Color Picker/ColorPicker";
11
- import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
12
- import LinkButton from "../../Elements/Link/LinkButton";
13
- import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
14
- import { AllColors } from "../../Elements/Color Picker/ColorButtons";
15
- import { fontFamilyMap } from "../../utils/font";
16
- import { jsx as _jsx } from "react/jsx-runtime";
17
- import { jsxs as _jsxs } from "react/jsx-runtime";
18
- const allTools = toolbarGroups.flat();
19
- const ButtonComp = {
20
- AccordionButton: AccordionButton
21
- };
22
- const MiniTextFormat = props => {
23
- const {
24
- classes,
25
- editor
26
- } = props;
27
- const [anchorEl, setAnchorEl] = useState(null);
28
- const [type, setType] = useState(null);
29
- const open = Boolean(anchorEl);
30
- const fontFamily = allTools.find(f => f.format === "fontFamily");
31
- const fontWeight = allTools.find(f => f.format === "fontWeight");
32
- const fontStyle = allTools.filter(f => f.type === "mark");
33
- const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
34
- const link = allTools.find(f => f.format?.indexOf("link") >= 0);
35
- const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
36
- const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
37
- const {
38
- pageProps
39
- } = getPageSettings(editor)?.element || {};
40
- const {
41
- pageWidth
42
- } = pageProps;
43
- const {
44
- isActive: isBlockQuoteActive,
45
- props: bqProps
46
- } = getBlockActive(editor, "blockquote");
47
- const {
48
- color: bqColor,
49
- bgColor: bqBgColor
50
- } = bqProps || {
51
- color: "",
52
- bgColor: ""
53
- };
54
- const handlePageWidth = width => () => {
55
- updatePageSettings(editor, {
56
- ...(pageProps || {}),
57
- pageWidth: width
58
- });
59
- };
60
- const handleColorPicker = type => e => {
61
- setType(type);
62
- setAnchorEl(e.currentTarget);
63
- };
64
- const updateBlockQuote = attr => {
65
- const upAttr = {
66
- ...(bqProps || {}),
67
- ...attr
68
- };
69
- delete upAttr.children;
70
- delete upAttr.type;
71
- if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
72
- upateBlockActive(editor, "blockquote", upAttr);
73
- } else {
74
- toggleBlock(editor, "blockquote", editor.selection, upAttr);
75
- }
76
- };
77
- const onSelectColor = color => () => {
78
- const attr = {
79
- [type]: color
80
- };
81
- updateBlockQuote(attr);
82
- };
83
- const handleQuote = attr => () => {
84
- updateBlockQuote(attr);
85
- };
86
- const onClosePicker = () => {
87
- setAnchorEl(null);
88
- };
89
- const handleDefault = ({
90
- format,
91
- val
92
- }) => () => {
93
- const value = val ? val : "inherit";
94
- addMarkData(editor, {
95
- format,
96
- value
97
- });
98
- };
99
- return /*#__PURE__*/_jsxs(Grid, {
100
- container: true,
101
- sx: classes.textFormatWrapper,
102
- children: [/*#__PURE__*/_jsxs(Grid, {
103
- item: true,
104
- xs: 12,
105
- children: [/*#__PURE__*/_jsxs(Grid, {
106
- container: true,
107
- justifyContent: "space-between",
108
- alignItems: "center",
109
- children: [/*#__PURE__*/_jsx(Grid, {
110
- item: true,
111
- children: /*#__PURE__*/_jsx(Typography, {
112
- variant: "body1",
113
- color: "primary",
114
- sx: classes.typoLabel,
115
- children: "Font Family"
116
- })
117
- }), /*#__PURE__*/_jsx(Grid, {
118
- item: true,
119
- children: /*#__PURE__*/_jsx(Button, {
120
- sx: classes.defaultBtn,
121
- startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
122
- onClick: handleDefault({
123
- format: "fontFamily",
124
- val: Object.values(fontFamilyMap)[0]
125
- }),
126
- children: "Default"
127
- })
128
- })]
129
- }), /*#__PURE__*/_jsx(Grid, {
130
- item: true,
131
- xs: 12,
132
- sx: classes.textFormatField,
133
- children: /*#__PURE__*/_jsx(Dropdown, {
134
- classes: classes,
135
- ...fontFamily,
136
- editor: editor
137
- })
138
- })]
139
- }), /*#__PURE__*/_jsxs(Grid, {
140
- container: true,
141
- spacing: 2,
142
- children: [/*#__PURE__*/_jsxs(Grid, {
143
- item: true,
144
- xs: 6,
145
- children: [/*#__PURE__*/_jsx(Typography, {
146
- variant: "body1",
147
- color: "primary",
148
- sx: classes.typoLabel,
149
- children: "Font Weight"
150
- }), /*#__PURE__*/_jsx(Grid, {
151
- item: true,
152
- xs: 12,
153
- sx: classes.textFormatField,
154
- children: /*#__PURE__*/_jsx(Dropdown, {
155
- classes: classes,
156
- ...fontWeight,
157
- editor: editor,
158
- width: "100%"
159
- })
160
- })]
161
- }), /*#__PURE__*/_jsxs(Grid, {
162
- item: true,
163
- xs: 6,
164
- children: [/*#__PURE__*/_jsx(Typography, {
165
- variant: "body1",
166
- color: "primary",
167
- sx: classes.typoLabel,
168
- children: "Font Size"
169
- }), /*#__PURE__*/_jsx(Grid, {
170
- item: true,
171
- xs: 12,
172
- sx: classes.textFormatCG,
173
- children: /*#__PURE__*/_jsx(TextSize, {
174
- classes: classes,
175
- format: "fontSize",
176
- activeMark: activeMark,
177
- editor: editor,
178
- fullWidth: true
179
- })
180
- })]
181
- })]
182
- }), /*#__PURE__*/_jsxs(Grid, {
183
- item: true,
184
- xs: 12,
185
- sx: classes.textFormatField,
186
- children: [/*#__PURE__*/_jsxs(Grid, {
187
- container: true,
188
- justifyContent: "space-between",
189
- alignItems: "center",
190
- children: [/*#__PURE__*/_jsx(Grid, {
191
- item: true,
192
- children: /*#__PURE__*/_jsx(Typography, {
193
- variant: "body1",
194
- color: "primary",
195
- sx: classes.typoLabel,
196
- children: "Text Color"
197
- })
198
- }), /*#__PURE__*/_jsx(Grid, {
199
- item: true,
200
- children: /*#__PURE__*/_jsx(Button, {
201
- sx: classes.defaultBtn,
202
- startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
203
- onClick: handleDefault({
204
- format: "color"
205
- }),
206
- children: "Default"
207
- })
208
- })]
209
- }), /*#__PURE__*/_jsx(Grid, {
210
- sx: classes.textFormatColorWrpr,
211
- children: /*#__PURE__*/_jsx(ColorPicker, {
212
- format: "color",
213
- activeMark: activeMark,
214
- editor: editor,
215
- showHex: false,
216
- rounded: true,
217
- title: "Text Color",
218
- id: "11_cc",
219
- classes: classes
220
- }, "11_cc")
221
- })]
222
- }), /*#__PURE__*/_jsxs(Grid, {
223
- item: true,
224
- xs: 12,
225
- sx: classes.textFormatField,
226
- children: [/*#__PURE__*/_jsxs(Grid, {
227
- container: true,
228
- justifyContent: "space-between",
229
- alignItems: "center",
230
- children: [/*#__PURE__*/_jsx(Grid, {
231
- item: true,
232
- children: /*#__PURE__*/_jsx(Typography, {
233
- variant: "body1",
234
- color: "primary",
235
- sx: classes.typoLabel,
236
- children: "Text Background Color"
237
- })
238
- }), /*#__PURE__*/_jsx(Grid, {
239
- item: true,
240
- children: /*#__PURE__*/_jsx(Grid, {
241
- item: true,
242
- children: /*#__PURE__*/_jsx(Button, {
243
- sx: classes.defaultBtn,
244
- startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
245
- onClick: handleDefault({
246
- format: "bgColor"
247
- }),
248
- children: "Default"
249
- })
250
- })
251
- })]
252
- }), /*#__PURE__*/_jsx(Grid, {
253
- item: true,
254
- xs: 12,
255
- sx: classes.textFormatColorWrpr,
256
- children: /*#__PURE__*/_jsx(ColorPicker, {
257
- format: "bgColor",
258
- activeMark: activeMark,
259
- editor: editor,
260
- showHex: false,
261
- rounded: true,
262
- title: "Text Background Color",
263
- classes: classes,
264
- id: "12_cc"
265
- }, "12_cc")
266
- })]
267
- }), /*#__PURE__*/_jsxs(Grid, {
268
- item: true,
269
- xs: 6,
270
- sx: classes.textFormatField,
271
- children: [/*#__PURE__*/_jsx(Typography, {
272
- variant: "body1",
273
- color: "primary",
274
- sx: classes.typoLabel,
275
- children: "Text Alignment"
276
- }), /*#__PURE__*/_jsx(Grid, {
277
- item: true,
278
- xs: 12,
279
- sx: classes.textFormatCG,
280
- children: fontAlign?.map((m, i) => {
281
- return /*#__PURE__*/_jsx(BlockButton, {
282
- editor: editor,
283
- ...m
284
- }, `pptool_block_${i}_${m.id}`);
285
- })
286
- })]
287
- }), /*#__PURE__*/_jsxs(Grid, {
288
- item: true,
289
- xs: 6,
290
- sx: classes.textFormatField,
291
- children: [/*#__PURE__*/_jsx(Typography, {
292
- variant: "body1",
293
- color: "primary",
294
- sx: classes.typoLabel,
295
- children: "Lists"
296
- }), /*#__PURE__*/_jsx(Grid, {
297
- item: true,
298
- xs: 12,
299
- sx: classes.textFormatCG,
300
- children: lists?.map((m, i) => {
301
- const Comp = ButtonComp[m?.component] || BlockButton;
302
- return /*#__PURE__*/_jsx(Comp, {
303
- editor: editor,
304
- ...m
305
- }, `pptool_block_${i}_${m.id}`);
306
- })
307
- })]
308
- }), /*#__PURE__*/_jsxs(Grid, {
309
- item: true,
310
- xs: 12,
311
- children: [/*#__PURE__*/_jsx(Typography, {
312
- variant: "body1",
313
- color: "primary",
314
- sx: classes.typoLabel,
315
- children: "Typography"
316
- }), /*#__PURE__*/_jsxs(Grid, {
317
- item: true,
318
- xs: 12,
319
- className: "typo-icons",
320
- sx: classes.evenSpace,
321
- children: [typo?.map((m, i) => {
322
- return /*#__PURE__*/_jsx(BlockButton, {
323
- editor: editor,
324
- ...m
325
- }, `pptool_mark_${i}_${m.id}`);
326
- }), fontStyle?.map((m, i) => {
327
- return /*#__PURE__*/_jsx(MarkButton, {
328
- editor: editor,
329
- ...m
330
- }, `pptool_mark_${i}_${m.id}`);
331
- }), /*#__PURE__*/_jsx(LinkButton, {
332
- active: isBlockActive(editor, link.format),
333
- editor: editor
334
- }, link.id)]
335
- })]
336
- }), /*#__PURE__*/_jsx(Grid, {
337
- item: true,
338
- xs: 12,
339
- sx: classes.evenSpace,
340
- style: {
341
- justifyContent: "space-between"
342
- },
343
- children: /*#__PURE__*/_jsx(Typography, {
344
- variant: "body1",
345
- color: "primary",
346
- sx: classes.typoLabel,
347
- children: "Decorations"
348
- })
349
- }), /*#__PURE__*/_jsxs(Grid, {
350
- item: true,
351
- xs: 12,
352
- sx: classes.evenSpace,
353
- style: {
354
- justifyContent: "space-between"
355
- },
356
- className: "text-decorations-wrpr",
357
- children: [/*#__PURE__*/_jsxs(ButtonGroup, {
358
- sx: classes.btnGroup,
359
- children: [/*#__PURE__*/_jsx(Button, {
360
- className: `no-hover ${bqBgColor ? "active" : ""}`,
361
- onClick: handleQuote({
362
- bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
363
- }),
364
- style: {
365
- background: bqBgColor
366
- },
367
- children: "Colorbox"
368
- }), /*#__PURE__*/_jsx(Button, {
369
- onClick: handleColorPicker("bgColor"),
370
- children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
371
- })]
372
- }), /*#__PURE__*/_jsxs(ButtonGroup, {
373
- sx: classes.btnGroup,
374
- children: [/*#__PURE__*/_jsx(Button, {
375
- className: `no-hover ${bqColor ? "active" : ""}`,
376
- onClick: handleQuote({
377
- color: !bqColor ? "rgb(47, 94, 188)" : null
378
- }),
379
- children: /*#__PURE__*/_jsx("span", {
380
- style: {
381
- borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
382
- paddingLeft: "12px"
383
- },
384
- children: "Quote"
385
- })
386
- }), /*#__PURE__*/_jsx(Button, {
387
- onClick: handleColorPicker("color"),
388
- children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
389
- })]
390
- }), /*#__PURE__*/_jsx(Button, {
391
- onClick: handlePageWidth("fixed"),
392
- startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
393
- sx: classes.pageWidthBtn,
394
- className: pageWidth === "fixed" || !pageWidth ? "active" : "",
395
- style: {
396
- width: "45%"
397
- },
398
- children: "Centered"
399
- }), /*#__PURE__*/_jsx(Button, {
400
- sx: classes.pageWidthBtn,
401
- className: pageWidth === "full" ? "active" : "",
402
- onClick: handlePageWidth("full"),
403
- startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
404
- style: {
405
- width: "45%"
406
- },
407
- children: "Full width"
408
- })]
409
- }), /*#__PURE__*/_jsx(AllColors, {
410
- open: open,
411
- anchorEl: anchorEl,
412
- onClose: onClosePicker,
413
- classes: classes,
414
- onSelect: onSelectColor,
415
- id: "all_1"
416
- })]
417
- });
418
- };
419
- export default MiniTextFormat;