@flozy/editor 6.0.8 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/Editor/ChatEditor.js +7 -7
  2. package/dist/Editor/CommonEditor.js +21 -79
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +16 -21
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  7. package/dist/Editor/Elements/Color Picker/ColorButtons.js +12 -57
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  10. package/dist/Editor/Elements/Color Picker/Styles.js +1 -1
  11. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +1 -1
  12. package/dist/Editor/Elements/Embed/Image.js +2 -2
  13. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +14 -0
  14. package/dist/Editor/Elements/FreeGrid/styles.js +0 -3
  15. package/dist/Editor/Elements/Grid/GridItem.js +3 -2
  16. package/dist/Editor/Elements/Link/Link.js +43 -70
  17. package/dist/Editor/Elements/SimpleText/index.js +12 -7
  18. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  19. package/dist/Editor/Elements/Table/Table.js +12 -12
  20. package/dist/Editor/Elements/Title/title.js +1 -13
  21. package/dist/Editor/Elements/Variables/Style.js +2 -28
  22. package/dist/Editor/Elements/Variables/VariableButton.js +4 -17
  23. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  24. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  25. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  26. package/dist/Editor/Toolbar/FormatTools/TextSize.js +15 -7
  27. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +8 -9
  28. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  29. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +85 -210
  30. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  31. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -16
  32. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +9 -56
  33. package/dist/Editor/Toolbar/PopupTool/index.js +48 -32
  34. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  35. package/dist/Editor/common/ColorPickerButton.js +9 -32
  36. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  37. package/dist/Editor/common/DnD/Draggable.js +1 -0
  38. package/dist/Editor/common/FontLoader/FontList.js +11 -3
  39. package/dist/Editor/common/FontLoader/FontLoader.js +42 -74
  40. package/dist/Editor/common/Icon.js +0 -28
  41. package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -1
  42. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  43. package/dist/Editor/common/ImageSelector/UploadStyles.js +2 -1
  44. package/dist/Editor/common/MentionsPopup/Styles.js +9 -3
  45. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  46. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  47. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  48. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  49. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  50. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  51. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  52. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  53. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  54. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  55. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -8
  56. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  57. package/dist/Editor/common/RnD/Utils/gridDropItem.js +4 -5
  58. package/dist/Editor/common/RnD/Utils/index.js +0 -40
  59. package/dist/Editor/common/RnD/index.js +3 -23
  60. package/dist/Editor/common/Section/index.js +89 -60
  61. package/dist/Editor/common/Shorthands/elements.js +0 -54
  62. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  67. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +11 -35
  68. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  69. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  70. package/dist/Editor/common/Uploader.js +0 -8
  71. package/dist/Editor/commonStyle.js +65 -55
  72. package/dist/Editor/helper/deserialize/index.js +1 -1
  73. package/dist/Editor/helper/index.js +2 -2
  74. package/dist/Editor/helper/theme.js +2 -200
  75. package/dist/Editor/hooks/useDrag.js +11 -17
  76. package/dist/Editor/hooks/useEditorScroll.js +2 -1
  77. package/dist/Editor/hooks/useMouseMove.js +3 -9
  78. package/dist/Editor/plugins/withEmbeds.js +1 -1
  79. package/dist/Editor/plugins/withHTML.js +9 -3
  80. package/dist/Editor/plugins/withLayout.js +1 -1
  81. package/dist/Editor/plugins/withTable.js +1 -1
  82. package/dist/Editor/theme/ThemeList.js +173 -50
  83. package/dist/Editor/utils/SlateUtilityFunctions.js +49 -157
  84. package/dist/Editor/utils/button.js +14 -0
  85. package/dist/Editor/utils/draftToSlate.js +2 -3
  86. package/dist/Editor/utils/font.js +37 -40
  87. package/dist/Editor/utils/helper.js +20 -48
  88. package/dist/Editor/utils/link.js +1 -1
  89. package/package.json +3 -6
  90. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  91. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  92. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  93. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  94. package/dist/Editor/common/CustomDialog/index.js +0 -94
  95. package/dist/Editor/common/CustomDialog/style.js +0 -67
  96. package/dist/Editor/common/CustomSelect.js +0 -33
  97. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  98. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  99. package/dist/Editor/theme/index.js +0 -144
  100. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  101. package/dist/Editor/themeSettings/buttons/index.js +0 -283
  102. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  103. package/dist/Editor/themeSettings/colorTheme/index.js +0 -292
  104. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  105. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  106. package/dist/Editor/themeSettings/fonts/index.js +0 -220
  107. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  108. package/dist/Editor/themeSettings/icons.js +0 -60
  109. package/dist/Editor/themeSettings/index.js +0 -320
  110. package/dist/Editor/themeSettings/style.js +0 -152
  111. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  112. package/dist/Editor/themeSettingsAI/index.js +0 -356
  113. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -197
  114. package/dist/Editor/themeSettingsAI/style.js +0 -250
@@ -1,438 +0,0 @@
1
- import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
2
- import { useEditorContext } from "../../hooks/useMouseMove";
3
- import FormatClearIcon from "@mui/icons-material/FormatClear";
4
- import usePopupStyles from "../PopupTool/PopupToolStyle";
5
- import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
6
- import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
7
- import useWindowResize from "../../hooks/useWindowResize";
8
- import { toolbarGroups } from "../toolbarGroups";
9
- import Icon from "../../common/Icon";
10
- import { useMemo, useState } from "react";
11
- import CommonButton from "../../common/Button";
12
- import CustomSelect from "../../common/CustomSelect";
13
- import ColorButtons from "../../Elements/Color Picker/ColorButtons";
14
- import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
15
- import ColorPickerStyles from "../../Elements/Color Picker/Styles";
16
- import colorWheel from "../../Elements/Color Picker/colorWheel.png";
17
- import CustomColorPicker from "../../common/CustomColorPicker";
18
- import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
19
- import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList";
20
- import { jsx as _jsx } from "react/jsx-runtime";
21
- import { jsxs as _jsxs } from "react/jsx-runtime";
22
- import { Fragment as _Fragment } from "react/jsx-runtime";
23
- function getFontStyleProps(settings = {}, format) {
24
- const {
25
- fontWeight,
26
- fontStyle
27
- } = settings;
28
- let isActive;
29
- let onClick;
30
- switch (format) {
31
- case "bold":
32
- isActive = fontWeight === "bold" || fontWeight === "700";
33
- onClick = () => {
34
- return {
35
- fontWeight: isActive ? "normal" : "bold"
36
- };
37
- };
38
- break;
39
- case "italic":
40
- isActive = fontStyle === "italic";
41
- onClick = () => {
42
- return {
43
- fontStyle: isActive ? "unset" : "italic"
44
- };
45
- };
46
- break;
47
-
48
- // case "underline":
49
- // isActive = textDecoration.includes("underline");
50
- // onClick = () => {
51
- // let otherTextDecoration = textDecoration?.includes("line-through")
52
- // ? "line-through"
53
- // : "";
54
-
55
- // otherTextDecoration += isActive ? "" : " underline";
56
-
57
- // return { textDecoration: otherTextDecoration };
58
- // };
59
- // break;
60
- // case "strikethrough":
61
- // isActive = textDecoration.includes("line-through");
62
- // onClick = () => {
63
- // let otherTextDecoration = textDecoration?.includes("underline")
64
- // ? "underline"
65
- // : "";
66
-
67
- // otherTextDecoration += isActive ? "" : " line-through";
68
-
69
- // return { textDecoration: otherTextDecoration };
70
- // };
71
- // break;
72
-
73
- default:
74
- isActive = false;
75
- onClick = () => {};
76
- break;
77
- }
78
- return {
79
- isActive,
80
- onClick
81
- };
82
- }
83
- const allTools = toolbarGroups.flat();
84
- function ThemeTextFormat(props) {
85
- const {
86
- settings,
87
- updateSettings,
88
- onSaveTextSettings,
89
- onClose
90
- } = props;
91
- const {
92
- theme,
93
- fontFamilies
94
- } = useEditorContext();
95
- const classes = usePopupStyles(theme);
96
- const pickerStyles = ColorPickerStyles(theme);
97
- const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
98
- const fontWeight = allTools.find(f => f.format === "fontWeight");
99
- const fontFamilyVal = useMemo(() => {
100
- const {
101
- fontFamily = ""
102
- } = settings;
103
- let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
104
- return font;
105
- }, [settings]);
106
- const fontWeightVal = useMemo(() => {
107
- const {
108
- options
109
- } = fontWeight || {};
110
- const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
111
- return selected?.value;
112
- }, [settings?.fontWeight]);
113
- return /*#__PURE__*/_jsxs(Grid, {
114
- container: true,
115
- sx: classes.textFormatWrapper,
116
- children: [/*#__PURE__*/_jsxs(Grid, {
117
- item: true,
118
- xs: 12,
119
- children: [/*#__PURE__*/_jsxs(Grid, {
120
- container: true,
121
- justifyContent: "space-between",
122
- alignItems: "center",
123
- children: [/*#__PURE__*/_jsx(Grid, {
124
- item: true,
125
- children: /*#__PURE__*/_jsx(Typography, {
126
- variant: "body1",
127
- color: "primary",
128
- sx: classes.typoLabel,
129
- children: "Font Family"
130
- })
131
- }), /*#__PURE__*/_jsx(Grid, {
132
- item: true,
133
- children: /*#__PURE__*/_jsx(Button, {
134
- sx: classes.defaultBtn,
135
- startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
136
- onClick: () => updateSettings({
137
- fontFamily: defaultFonts[0]
138
- }),
139
- children: "Default"
140
- })
141
- })]
142
- }), /*#__PURE__*/_jsx(Grid, {
143
- item: true,
144
- xs: 12,
145
- sx: classes.textFormatField,
146
- children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
147
- editor: {},
148
- format: "fontFamily",
149
- options: fontFamilies?.options,
150
- width: "100%",
151
- onChange: updateSettings,
152
- val: fontFamilyVal || defaultFonts[0],
153
- webFont: true
154
- })
155
- })]
156
- }), /*#__PURE__*/_jsxs(Grid, {
157
- container: true,
158
- spacing: 2,
159
- children: [/*#__PURE__*/_jsxs(Grid, {
160
- item: true,
161
- xs: 6,
162
- children: [/*#__PURE__*/_jsx(Typography, {
163
- variant: "body1",
164
- color: "primary",
165
- sx: classes.typoLabel,
166
- children: "Font Weight"
167
- }), /*#__PURE__*/_jsx(Grid, {
168
- item: true,
169
- xs: 12,
170
- sx: classes.textFormatField,
171
- children: /*#__PURE__*/_jsx(CustomSelect, {
172
- options: fontWeight?.options || [],
173
- classes: classes,
174
- onChange: e => {
175
- updateSettings({
176
- fontWeight: e.target.value
177
- });
178
- },
179
- value: fontWeightVal
180
- })
181
- })]
182
- }), /*#__PURE__*/_jsxs(Grid, {
183
- item: true,
184
- xs: 6,
185
- children: [/*#__PURE__*/_jsx(Typography, {
186
- variant: "body1",
187
- color: "primary",
188
- sx: classes.typoLabel,
189
- children: "Font Size"
190
- }), /*#__PURE__*/_jsx(Grid, {
191
- item: true,
192
- xs: 12,
193
- sx: classes.textFormatCG,
194
- children: /*#__PURE__*/_jsx(TextSize, {
195
- classes: classes,
196
- value: settings?.fontSize || 16,
197
- onChange: fontSize => updateSettings({
198
- fontSize
199
- }),
200
- fullWidth: true
201
- })
202
- })]
203
- })]
204
- }), /*#__PURE__*/_jsxs(Grid, {
205
- item: true,
206
- xs: 12,
207
- sx: classes.textFormatField,
208
- style: {
209
- marginTop: "14px"
210
- },
211
- children: [/*#__PURE__*/_jsxs(Grid, {
212
- container: true,
213
- justifyContent: "space-between",
214
- alignItems: "center",
215
- children: [/*#__PURE__*/_jsx(Grid, {
216
- item: true,
217
- children: /*#__PURE__*/_jsx(Typography, {
218
- variant: "body1",
219
- color: "primary",
220
- sx: classes.typoLabel,
221
- children: "Text Color"
222
- })
223
- }), /*#__PURE__*/_jsx(Grid, {
224
- item: true,
225
- children: /*#__PURE__*/_jsx(Button, {
226
- sx: classes.defaultBtn,
227
- startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
228
- onClick: () => updateSettings({
229
- color: "#ddd"
230
- }),
231
- children: "Default"
232
- })
233
- })]
234
- }), /*#__PURE__*/_jsx(Grid, {
235
- sx: classes.textFormatColorWrpr,
236
- children: /*#__PURE__*/_jsx(ColorPicker, {
237
- classes: classes,
238
- pickerStyles: pickerStyles,
239
- onChange: color => updateSettings({
240
- color
241
- }),
242
- color: settings?.color,
243
- disableEditTheme: true
244
- })
245
- })]
246
- }), /*#__PURE__*/_jsxs(Grid, {
247
- item: true,
248
- xs: 12,
249
- children: [/*#__PURE__*/_jsx(Typography, {
250
- variant: "body1",
251
- color: "primary",
252
- sx: classes.typoLabel,
253
- children: "Typography"
254
- }), /*#__PURE__*/_jsx(Grid, {
255
- item: true,
256
- xs: 12,
257
- className: "typo-icons",
258
- sx: classes.evenSpace,
259
- children: fontStyle?.map((m, i) => {
260
- const {
261
- isActive,
262
- onClick
263
- } = getFontStyleProps(settings, m.format) || {};
264
- return /*#__PURE__*/_jsx(CommonButton, {
265
- active: isActive,
266
- onClick: () => {
267
- const style = onClick();
268
- updateSettings(style);
269
- },
270
- children: /*#__PURE__*/_jsx(Icon, {
271
- icon: m.format
272
- })
273
- }, i);
274
- })
275
- })]
276
- }), /*#__PURE__*/_jsx(Grid, {
277
- item: true,
278
- xs: 12,
279
- sx: {
280
- mt: 2
281
- },
282
- children: /*#__PURE__*/_jsxs("div", {
283
- style: {
284
- display: "flex",
285
- justifyContent: "end",
286
- margin: "8px",
287
- position: "absolute",
288
- bottom: 0,
289
- right: 0
290
- },
291
- children: [/*#__PURE__*/_jsx(Button, {
292
- onClick: onClose,
293
- className: "secondaryBtn",
294
- children: "Cancel"
295
- }), /*#__PURE__*/_jsx(Button, {
296
- onClick: onSaveTextSettings,
297
- className: "primaryBtn",
298
- children: "Save"
299
- })]
300
- })
301
- })]
302
- });
303
- }
304
- export default ThemeTextFormat;
305
- function TextSize(props) {
306
- const {
307
- classes,
308
- value: val,
309
- onChange,
310
- fullWidth
311
- } = props;
312
- const [size] = useWindowResize();
313
- const value = getBreakPointsValue(val, size?.device);
314
- const updateMarkData = newVal => {
315
- let upData = {
316
- ...getBreakPointsValue(val),
317
- [size?.device]: `${newVal}px`
318
- };
319
-
320
- // if desktop update to all other devices
321
- // to avoid default normal size
322
- if (size?.device === "lg") {
323
- upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
324
- a[b] = `${newVal}px`;
325
- return a;
326
- }, {});
327
- }
328
- onChange(upData);
329
- };
330
- const onChangeSize = e => {
331
- let inc = parseInt(e.target.value) || 8;
332
- inc = inc > 200 ? 200 : inc;
333
- updateMarkData(inc || 8);
334
- };
335
- const getSizeVal = () => {
336
- try {
337
- return parseInt(value);
338
- } catch (err) {
339
- return "";
340
- }
341
- };
342
- const combinedOldVal = getSizeVal();
343
- const onIncreaseSize = () => {
344
- let inc = (combinedOldVal || 0) + 1;
345
- inc = inc > 200 ? 200 : inc;
346
- updateMarkData(inc);
347
- };
348
- const onDecreaseSize = () => {
349
- const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
350
- updateMarkData(newVal);
351
- };
352
- return /*#__PURE__*/_jsx(TextField, {
353
- sx: classes?.textSize,
354
- value: combinedOldVal,
355
- onChange: onChangeSize,
356
- size: "small",
357
- inputProps: {
358
- style: {
359
- width: fullWidth ? "100%" : "30px",
360
- textAlign: "center",
361
- height: "19px",
362
- fontSize: "14px"
363
- }
364
- },
365
- fullWidth: fullWidth,
366
- InputProps: {
367
- style: {
368
- borderRadius: "8px"
369
- },
370
- endAdornment: /*#__PURE__*/_jsxs("div", {
371
- className: "textFontArrows",
372
- children: [/*#__PURE__*/_jsx(IconButton, {
373
- onClick: onIncreaseSize,
374
- size: "small",
375
- children: /*#__PURE__*/_jsx(TextPlusIcon, {})
376
- }), /*#__PURE__*/_jsx(IconButton, {
377
- onClick: onDecreaseSize,
378
- size: "small",
379
- children: /*#__PURE__*/_jsx(TextMinusIcon, {})
380
- })]
381
- })
382
- }
383
- });
384
- }
385
- function ColorPicker(props) {
386
- const {
387
- classes,
388
- pickerStyles,
389
- onChange,
390
- color,
391
- disableEditTheme
392
- } = props;
393
- const [anchorEl, setAnchorEl] = useState(null);
394
- const open = Boolean(anchorEl);
395
- const handleClose = () => {
396
- setAnchorEl(null);
397
- };
398
- return /*#__PURE__*/_jsxs(_Fragment, {
399
- children: [/*#__PURE__*/_jsx(Tooltip, {
400
- title: "",
401
- arrow: true,
402
- children: /*#__PURE__*/_jsx(IconButton, {
403
- sx: pickerStyles.colorPickerIcon,
404
- onClick: e => {
405
- setAnchorEl(e.currentTarget);
406
- },
407
- children: /*#__PURE__*/_jsx("img", {
408
- src: colorWheel,
409
- alt: "color wheel"
410
- })
411
- })
412
- }), /*#__PURE__*/_jsx(ColorButtons, {
413
- classes: pickerStyles,
414
- onSelect: onChange,
415
- activeColor: color,
416
- disableEditTheme: disableEditTheme
417
- }), /*#__PURE__*/_jsx(Popover, {
418
- open: open,
419
- anchorEl: anchorEl,
420
- onClose: handleClose,
421
- anchorOrigin: {
422
- vertical: "top",
423
- horizontal: "center"
424
- },
425
- transformOrigin: {
426
- vertical: "bottom",
427
- horizontal: "top"
428
- },
429
- sx: classes.colorPickerPopup,
430
- children: /*#__PURE__*/_jsx(CustomColorPicker, {
431
- gradient: true,
432
- onChange: onChange,
433
- color: color,
434
- disableEditTheme: disableEditTheme
435
- })
436
- })]
437
- });
438
- }