@flozy/editor 10.3.9 → 10.4.1

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 (166) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +30 -28
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -3
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
  23. package/dist/Editor/Elements/Form/FormField.js +3 -2
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  27. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  30. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  31. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  38. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  39. package/dist/Editor/Elements/Table/Styles.js +7 -0
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  44. package/dist/Editor/MiniEditor.js +2 -1
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  58. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  59. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  61. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  62. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  63. package/dist/Editor/common/Checkbox/index.js +46 -0
  64. package/dist/Editor/common/Checkbox/styles.js +45 -0
  65. package/dist/Editor/common/ColorPickerButton.js +41 -16
  66. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  67. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  68. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  69. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  70. package/dist/Editor/common/CustomSelect.js +43 -0
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  73. package/dist/Editor/common/Icon.js +28 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -66
  77. package/dist/Editor/common/LinkSettings/index.js +14 -28
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +164 -244
  80. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  81. package/dist/Editor/common/RadioGroup/index.js +48 -0
  82. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  83. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  96. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  97. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  98. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  101. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  105. package/dist/Editor/common/RnD/index.js +68 -39
  106. package/dist/Editor/common/Select/index.js +44 -7
  107. package/dist/Editor/common/Select/styles.js +31 -2
  108. package/dist/Editor/common/Shorthands/elements.js +54 -0
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  122. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  123. package/dist/Editor/common/Uploader.js +16 -0
  124. package/dist/Editor/common/iconListV2.js +76 -0
  125. package/dist/Editor/common/iconslist.js +21 -0
  126. package/dist/Editor/commonStyle.js +116 -61
  127. package/dist/Editor/helper/index.js +5 -1
  128. package/dist/Editor/helper/textIndeces.js +58 -0
  129. package/dist/Editor/helper/theme.js +203 -2
  130. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  131. package/dist/Editor/hooks/useMouseMove.js +9 -3
  132. package/dist/Editor/hooks/useTable.js +5 -4
  133. package/dist/Editor/hooks/useThemeValues.js +63 -0
  134. package/dist/Editor/plugins/withEmbeds.js +1 -1
  135. package/dist/Editor/plugins/withHTML.js +3 -1
  136. package/dist/Editor/plugins/withTable.js +1 -1
  137. package/dist/Editor/theme/ThemeList.js +50 -173
  138. package/dist/Editor/theme/index.js +149 -0
  139. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  140. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  141. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  142. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  143. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  144. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  145. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  146. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  147. package/dist/Editor/themeSettings/icons.js +60 -0
  148. package/dist/Editor/themeSettings/index.js +380 -0
  149. package/dist/Editor/themeSettings/style.js +299 -0
  150. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  151. package/dist/Editor/themeSettingsAI/index.js +355 -0
  152. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  153. package/dist/Editor/themeSettingsAI/style.js +332 -0
  154. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  155. package/dist/Editor/utils/accordion.js +14 -4
  156. package/dist/Editor/utils/button.js +1 -17
  157. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  158. package/dist/Editor/utils/draftToSlate.js +3 -2
  159. package/dist/Editor/utils/events.js +50 -6
  160. package/dist/Editor/utils/font.js +40 -37
  161. package/dist/Editor/utils/formfield.js +1 -0
  162. package/dist/Editor/utils/helper.js +210 -26
  163. package/dist/Editor/utils/insertAppHeader.js +1 -1
  164. package/dist/Editor/utils/signature.js +2 -9
  165. package/dist/Editor/utils/updateFormName.js +22 -0
  166. package/package.json +4 -4
@@ -10,6 +10,8 @@ import { AllColors } from "../../Elements/Color Picker/ColorButtons";
10
10
  import { fontFamilyMap } from "../../utils/font";
11
11
  import { getBorderColor } from "../../utils/helper";
12
12
  import SelectTypography from "./MiniTextFormat/SelectTypography";
13
+ import { isTextCustomized, saveToTheme } from "../../helper/theme";
14
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
13
15
  import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
14
16
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
15
17
  import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
@@ -43,7 +45,7 @@ const TextFormat = props => {
43
45
  const pageSettingLine = pageSt?.pageProps?.lineHeight;
44
46
  const {
45
47
  fontFamilies,
46
- theme
48
+ theme: appTheme
47
49
  } = useEditorContext();
48
50
  const breakpoint = getDevice(window.innerWidth);
49
51
  const fontWeight = allTools.find(f => f.format === "fontWeight");
@@ -62,6 +64,11 @@ const TextFormat = props => {
62
64
  color: "",
63
65
  bgColor: ""
64
66
  };
67
+ const {
68
+ theme,
69
+ updateTheme
70
+ } = useEditorTheme();
71
+ const customized = isTextCustomized(editor);
65
72
  let lineSpacingValue = activeMark(editor, "lineHeight");
66
73
  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
67
74
  const handleColorPicker = type => e => {
@@ -116,6 +123,51 @@ const TextFormat = props => {
116
123
  sx: classes.textFormatWrapper,
117
124
  className: "text-formatter-popup",
118
125
  children: [/*#__PURE__*/_jsxs(Grid, {
126
+ item: true,
127
+ xs: 12,
128
+ children: [/*#__PURE__*/_jsxs(Grid, {
129
+ container: true,
130
+ justifyContent: "space-between",
131
+ alignItems: "center",
132
+ children: [/*#__PURE__*/_jsx(Grid, {
133
+ item: true,
134
+ children: /*#__PURE__*/_jsx(Typography, {
135
+ variant: "body1",
136
+ color: "primary",
137
+ sx: classes.typoLabel,
138
+ children: "Style"
139
+ })
140
+ }), /*#__PURE__*/_jsx(Grid, {
141
+ item: true,
142
+ children: theme?.id ? /*#__PURE__*/_jsx(Button, {
143
+ sx: classes.defaultBtn,
144
+ onClick: () => {
145
+ const {
146
+ field,
147
+ theme
148
+ } = saveToTheme(editor) || {};
149
+ updateTheme(theme, {
150
+ action: "ELEMENT_PROPS_CHANGE",
151
+ fieldName: field
152
+ });
153
+ },
154
+ disabled: !customized,
155
+ children: "Save to theme"
156
+ }) : null
157
+ })]
158
+ }), /*#__PURE__*/_jsx(Grid, {
159
+ item: true,
160
+ xs: 12,
161
+ sx: classes.textFormatField,
162
+ children: /*#__PURE__*/_jsx(SelectTypography, {
163
+ editor: editor,
164
+ classes: classes,
165
+ closeMainPopup: closeMainPopup,
166
+ type: "fullWidth",
167
+ customProps: customProps
168
+ })
169
+ })]
170
+ }), /*#__PURE__*/_jsxs(Grid, {
119
171
  item: true,
120
172
  xs: 12,
121
173
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -242,7 +294,8 @@ const TextFormat = props => {
242
294
  rounded: true,
243
295
  title: translation("textColor"),
244
296
  id: "11_cc",
245
- classes: classes
297
+ classes: classes,
298
+ type: "textColor"
246
299
  }, "11_cc")
247
300
  })]
248
301
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -268,7 +321,7 @@ const TextFormat = props => {
268
321
  children: /*#__PURE__*/_jsx(Button, {
269
322
  sx: classes.defaultBtn2,
270
323
  startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
271
- stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
324
+ stroke: appTheme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
272
325
  }),
273
326
  onClick: handleDefault({
274
327
  format: "bgColor"
@@ -358,12 +411,7 @@ const TextFormat = props => {
358
411
  xs: 12,
359
412
  className: "typo-icons",
360
413
  sx: classes.evenSpace,
361
- children: [/*#__PURE__*/_jsx(SelectTypography, {
362
- classes: classes,
363
- editor: editor,
364
- closeMainPopup: closeMainPopup || onClose,
365
- customProps: customProps
366
- }), fontStyle?.map((m, i) => {
414
+ children: [fontStyle?.map((m, i) => {
367
415
  return /*#__PURE__*/_jsx(MarkButton, {
368
416
  editor: editor,
369
417
  ...m,
@@ -402,7 +450,7 @@ const TextFormat = props => {
402
450
  value: lineSpacingValue,
403
451
  onChange: handleLineSpacing,
404
452
  data: {
405
- key: 'lineHeight'
453
+ key: "lineHeight"
406
454
  }
407
455
  })
408
456
  })]
@@ -0,0 +1,439 @@
1
+ import { Box, Button, Divider, 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 { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
21
+ import { fontFamilyMap } from "../../utils/font";
22
+ import { jsx as _jsx } from "react/jsx-runtime";
23
+ import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { Fragment as _Fragment } from "react/jsx-runtime";
25
+ function getFontStyleProps(settings = {}, format) {
26
+ const {
27
+ fontWeight,
28
+ fontStyle
29
+ } = settings;
30
+ let isActive;
31
+ let onClick;
32
+ switch (format) {
33
+ case "bold":
34
+ isActive = fontWeight === "bold" || fontWeight === "700";
35
+ onClick = () => {
36
+ return {
37
+ fontWeight: isActive ? "normal" : "bold"
38
+ };
39
+ };
40
+ break;
41
+ case "italic":
42
+ isActive = fontStyle === "italic";
43
+ onClick = () => {
44
+ return {
45
+ fontStyle: isActive ? "unset" : "italic"
46
+ };
47
+ };
48
+ break;
49
+
50
+ // case "underline":
51
+ // isActive = textDecoration.includes("underline");
52
+ // onClick = () => {
53
+ // let otherTextDecoration = textDecoration?.includes("line-through")
54
+ // ? "line-through"
55
+ // : "";
56
+
57
+ // otherTextDecoration += isActive ? "" : " underline";
58
+
59
+ // return { textDecoration: otherTextDecoration };
60
+ // };
61
+ // break;
62
+ // case "strikethrough":
63
+ // isActive = textDecoration.includes("line-through");
64
+ // onClick = () => {
65
+ // let otherTextDecoration = textDecoration?.includes("underline")
66
+ // ? "underline"
67
+ // : "";
68
+
69
+ // otherTextDecoration += isActive ? "" : " line-through";
70
+
71
+ // return { textDecoration: otherTextDecoration };
72
+ // };
73
+ // break;
74
+
75
+ default:
76
+ isActive = false;
77
+ onClick = () => {};
78
+ break;
79
+ }
80
+ return {
81
+ isActive,
82
+ onClick
83
+ };
84
+ }
85
+ const allTools = toolbarGroups.flat();
86
+ function ThemeTextFormat(props) {
87
+ const {
88
+ settings,
89
+ updateSettings,
90
+ onSaveTextSettings,
91
+ onClose
92
+ } = props;
93
+ const {
94
+ theme,
95
+ fontFamilies
96
+ } = useEditorContext();
97
+ const classes = usePopupStyles(theme);
98
+ const pickerStyles = ColorPickerStyles(theme);
99
+ const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
100
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
101
+ const fontFamilyVal = useMemo(() => {
102
+ const {
103
+ fontFamily = ""
104
+ } = settings;
105
+ let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
106
+ return font;
107
+ }, [settings]);
108
+ const fontWeightVal = useMemo(() => {
109
+ const {
110
+ options
111
+ } = fontWeight || {};
112
+ const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
113
+ return selected?.value;
114
+ }, [settings?.fontWeight]);
115
+ return /*#__PURE__*/_jsxs(Box, {
116
+ sx: classes.textFormatContainer,
117
+ children: [/*#__PURE__*/_jsxs(Grid, {
118
+ container: true,
119
+ sx: classes.textFormatWrapper,
120
+ children: [/*#__PURE__*/_jsxs(Grid, {
121
+ item: true,
122
+ xs: 12,
123
+ children: [/*#__PURE__*/_jsxs(Grid, {
124
+ container: true,
125
+ justifyContent: "space-between",
126
+ alignItems: "center",
127
+ children: [/*#__PURE__*/_jsx(Grid, {
128
+ item: true,
129
+ children: /*#__PURE__*/_jsx(Typography, {
130
+ variant: "body1",
131
+ color: "primary",
132
+ sx: classes.typoLabel,
133
+ children: "Font Family"
134
+ })
135
+ }), /*#__PURE__*/_jsx(Grid, {
136
+ item: true,
137
+ children: /*#__PURE__*/_jsx(Button, {
138
+ sx: classes.defaultBtn1,
139
+ startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
140
+ onClick: () => updateSettings({
141
+ fontFamily: Object.values(fontFamilyMap)[0]
142
+ }),
143
+ className: "npr-0",
144
+ children: "Default Text"
145
+ })
146
+ })]
147
+ }), /*#__PURE__*/_jsx(Grid, {
148
+ item: true,
149
+ xs: 12,
150
+ sx: classes.textFormatField,
151
+ children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
152
+ editor: {},
153
+ format: "fontFamily",
154
+ options: fontFamilies?.options,
155
+ width: "100%",
156
+ onChange: updateSettings,
157
+ val: fontFamilyVal || defaultFonts[0],
158
+ webFont: true
159
+ })
160
+ })]
161
+ }), /*#__PURE__*/_jsxs(Grid, {
162
+ container: true,
163
+ spacing: 2,
164
+ children: [/*#__PURE__*/_jsxs(Grid, {
165
+ item: true,
166
+ xs: 6,
167
+ children: [/*#__PURE__*/_jsx(Typography, {
168
+ variant: "body1",
169
+ color: "primary",
170
+ sx: classes.typoLabel,
171
+ children: "Font Weight"
172
+ }), /*#__PURE__*/_jsx(Grid, {
173
+ item: true,
174
+ xs: 12,
175
+ sx: classes.textFormatField,
176
+ children: /*#__PURE__*/_jsx(CustomSelect, {
177
+ options: fontWeight?.options || [],
178
+ classes: classes,
179
+ onChange: e => {
180
+ updateSettings({
181
+ fontWeight: e.target.value
182
+ });
183
+ },
184
+ value: fontWeightVal
185
+ })
186
+ })]
187
+ }), /*#__PURE__*/_jsxs(Grid, {
188
+ item: true,
189
+ xs: 6,
190
+ children: [/*#__PURE__*/_jsx(Typography, {
191
+ variant: "body1",
192
+ color: "primary",
193
+ sx: classes.typoLabel,
194
+ children: "Font Size"
195
+ }), /*#__PURE__*/_jsx(Grid, {
196
+ item: true,
197
+ xs: 12,
198
+ sx: classes.textFormatCG,
199
+ children: /*#__PURE__*/_jsx(TextSize, {
200
+ classes: classes,
201
+ value: settings?.fontSize || 16,
202
+ onChange: fontSize => updateSettings({
203
+ fontSize
204
+ }),
205
+ fullWidth: true
206
+ })
207
+ })]
208
+ })]
209
+ }), /*#__PURE__*/_jsx(Grid, {
210
+ item: true,
211
+ xs: 12,
212
+ sx: classes.dividerGrid,
213
+ children: /*#__PURE__*/_jsx(Divider, {})
214
+ }), /*#__PURE__*/_jsxs(Grid, {
215
+ item: true,
216
+ xs: 12,
217
+ children: [/*#__PURE__*/_jsxs(Grid, {
218
+ container: true,
219
+ justifyContent: "space-between",
220
+ alignItems: "center",
221
+ children: [/*#__PURE__*/_jsx(Grid, {
222
+ item: true,
223
+ children: /*#__PURE__*/_jsx(Typography, {
224
+ variant: "body1",
225
+ color: "primary",
226
+ sx: classes.typoLabel,
227
+ children: "Text Color"
228
+ })
229
+ }), /*#__PURE__*/_jsx(Grid, {
230
+ item: true,
231
+ children: /*#__PURE__*/_jsx(Button, {
232
+ sx: classes.defaultBtn1,
233
+ startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
234
+ onClick: () => updateSettings({
235
+ color: "#ddd"
236
+ }),
237
+ children: "Default Color"
238
+ })
239
+ })]
240
+ }), /*#__PURE__*/_jsx(Grid, {
241
+ sx: classes.textFormatColorWrpr,
242
+ children: /*#__PURE__*/_jsx(ColorPicker, {
243
+ classes: classes,
244
+ pickerStyles: pickerStyles,
245
+ onChange: color => updateSettings({
246
+ color
247
+ }),
248
+ color: settings?.color,
249
+ disableEditTheme: true
250
+ })
251
+ })]
252
+ }), /*#__PURE__*/_jsx(Grid, {
253
+ item: true,
254
+ xs: 12,
255
+ sx: classes.dividerGrid,
256
+ children: /*#__PURE__*/_jsx(Divider, {})
257
+ }), /*#__PURE__*/_jsxs(Grid, {
258
+ item: true,
259
+ xs: 12,
260
+ children: [/*#__PURE__*/_jsx(Typography, {
261
+ variant: "body1",
262
+ color: "primary",
263
+ sx: classes.typoLabel,
264
+ children: "Typography"
265
+ }), /*#__PURE__*/_jsx(Grid, {
266
+ item: true,
267
+ xs: 12,
268
+ className: "typo-icons",
269
+ sx: classes.evenSpace,
270
+ children: fontStyle?.map((m, i) => {
271
+ const {
272
+ isActive,
273
+ onClick
274
+ } = getFontStyleProps(settings, m.format) || {};
275
+ return /*#__PURE__*/_jsx(CommonButton, {
276
+ active: isActive,
277
+ onClick: () => {
278
+ const style = onClick();
279
+ updateSettings(style);
280
+ },
281
+ children: /*#__PURE__*/_jsx(Icon, {
282
+ icon: m.format
283
+ })
284
+ }, i);
285
+ })
286
+ })]
287
+ })]
288
+ }), /*#__PURE__*/_jsxs("div", {
289
+ className: "saveThemeBtnsWrapper",
290
+ children: [/*#__PURE__*/_jsx(Button, {
291
+ onClick: onClose,
292
+ className: "closeBtn",
293
+ style: {
294
+ background: "none"
295
+ },
296
+ children: "Cancel"
297
+ }), /*#__PURE__*/_jsx(Button, {
298
+ onClick: onSaveTextSettings,
299
+ className: "confirmBtn",
300
+ children: "Save"
301
+ })]
302
+ })]
303
+ });
304
+ }
305
+ export default ThemeTextFormat;
306
+ function TextSize(props) {
307
+ const {
308
+ classes,
309
+ value: val,
310
+ onChange,
311
+ fullWidth
312
+ } = props;
313
+ const [size] = useWindowResize();
314
+ const value = getBreakPointsValue(val, size?.device);
315
+ const updateMarkData = newVal => {
316
+ let upData = {
317
+ ...getBreakPointsValue(val),
318
+ [size?.device]: `${newVal}px`
319
+ };
320
+
321
+ // if desktop update to all other devices
322
+ // to avoid default normal size
323
+ if (size?.device === "lg") {
324
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
325
+ a[b] = upData[b] || `${newVal}px`;
326
+ return a;
327
+ }, {});
328
+ }
329
+ onChange(upData);
330
+ };
331
+ const onChangeSize = e => {
332
+ let inc = parseInt(e.target.value) || 8;
333
+ inc = inc > 200 ? 200 : inc;
334
+ updateMarkData(inc || 8);
335
+ };
336
+ const getSizeVal = () => {
337
+ try {
338
+ return parseInt(value);
339
+ } catch (err) {
340
+ return "";
341
+ }
342
+ };
343
+ const combinedOldVal = getSizeVal();
344
+ const onIncreaseSize = () => {
345
+ let inc = (combinedOldVal || 0) + 1;
346
+ inc = inc > 200 ? 200 : inc;
347
+ updateMarkData(inc);
348
+ };
349
+ const onDecreaseSize = () => {
350
+ const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
351
+ updateMarkData(newVal);
352
+ };
353
+ return /*#__PURE__*/_jsx(TextField, {
354
+ sx: classes?.textSize,
355
+ value: combinedOldVal,
356
+ onChange: onChangeSize,
357
+ size: "small",
358
+ inputProps: {
359
+ style: {
360
+ width: fullWidth ? "100%" : "30px",
361
+ textAlign: "center",
362
+ height: "19px",
363
+ fontSize: "14px"
364
+ }
365
+ },
366
+ fullWidth: fullWidth,
367
+ InputProps: {
368
+ style: {
369
+ borderRadius: "8px"
370
+ },
371
+ endAdornment: /*#__PURE__*/_jsxs("div", {
372
+ className: "textFontArrows",
373
+ children: [/*#__PURE__*/_jsx(IconButton, {
374
+ onClick: onIncreaseSize,
375
+ size: "small",
376
+ children: /*#__PURE__*/_jsx(TextPlusIcon, {})
377
+ }), /*#__PURE__*/_jsx(IconButton, {
378
+ onClick: onDecreaseSize,
379
+ size: "small",
380
+ children: /*#__PURE__*/_jsx(TextMinusIcon, {})
381
+ })]
382
+ })
383
+ }
384
+ });
385
+ }
386
+ function ColorPicker(props) {
387
+ const {
388
+ classes,
389
+ pickerStyles,
390
+ onChange,
391
+ color,
392
+ disableEditTheme
393
+ } = props;
394
+ const [anchorEl, setAnchorEl] = useState(null);
395
+ const open = Boolean(anchorEl);
396
+ const handleClose = () => {
397
+ setAnchorEl(null);
398
+ };
399
+ return /*#__PURE__*/_jsxs(_Fragment, {
400
+ children: [/*#__PURE__*/_jsx(Tooltip, {
401
+ title: "",
402
+ arrow: true,
403
+ children: /*#__PURE__*/_jsx(IconButton, {
404
+ sx: pickerStyles.colorPickerIcon,
405
+ onClick: e => {
406
+ setAnchorEl(e.currentTarget);
407
+ },
408
+ children: /*#__PURE__*/_jsx("img", {
409
+ src: colorWheel,
410
+ alt: "color wheel"
411
+ })
412
+ })
413
+ }), /*#__PURE__*/_jsx(ColorButtons, {
414
+ classes: pickerStyles,
415
+ onSelect: onChange,
416
+ activeColor: color,
417
+ disableEditTheme: disableEditTheme
418
+ }), /*#__PURE__*/_jsx(Popover, {
419
+ open: open,
420
+ anchorEl: anchorEl,
421
+ onClose: handleClose,
422
+ anchorOrigin: {
423
+ vertical: "top",
424
+ horizontal: "center"
425
+ },
426
+ transformOrigin: {
427
+ vertical: "bottom",
428
+ horizontal: "top"
429
+ },
430
+ sx: classes.colorPickerPopup,
431
+ children: /*#__PURE__*/_jsx(CustomColorPicker, {
432
+ gradient: true,
433
+ onChange: onChange,
434
+ color: color,
435
+ disableEditTheme: disableEditTheme
436
+ })
437
+ })]
438
+ });
439
+ }
@@ -95,9 +95,9 @@ const PopupTool = props => {
95
95
  const isFreeGridEnabled = enable === 1 && isFreeGridElement;
96
96
  if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
97
97
  setAnchorEl(null);
98
+ hideSlateSelection(); // removes slate selection background, when there is no selection
98
99
  } else {
99
100
  updateAnchorEl();
100
- hideSlateSelection(); // removes slate selection background, when there is no selection
101
101
  }
102
102
  }, [selection, event, selectedElement?.enable]);
103
103
  const handleClose = () => {
@@ -28,16 +28,20 @@ export const toolbarGroups = [[{
28
28
  type: "dropdown",
29
29
  options: [{
30
30
  text: "Normal",
31
- value: "normal"
31
+ value: "normal",
32
+ numVal: "400"
32
33
  }, {
33
34
  text: "Bold",
34
- value: "bold"
35
+ value: "bold",
36
+ numVal: "700"
35
37
  }, {
36
38
  text: "Bolder",
37
- value: "bolder"
39
+ value: "bolder",
40
+ numVal: "700"
38
41
  }, {
39
42
  text: "Lighter",
40
- value: "lighter"
43
+ value: "lighter",
44
+ numVal: "100"
41
45
  }],
42
46
  icon: FormatBoldIcon,
43
47
  width: "100px"
@@ -46,7 +50,8 @@ export const toolbarGroups = [[{
46
50
  format: "bold",
47
51
  type: "mark",
48
52
  title: "Bold",
49
- basic: true
53
+ basic: true,
54
+ themeEnabled: true
50
55
  }, {
51
56
  id: 5,
52
57
  format: "underline",
@@ -57,7 +62,8 @@ export const toolbarGroups = [[{
57
62
  format: "italic",
58
63
  type: "mark",
59
64
  title: "Italic",
60
- basic: true
65
+ basic: true,
66
+ themeEnabled: true
61
67
  }, {
62
68
  id: 6,
63
69
  format: "strikethrough",
@@ -101,6 +107,42 @@ export const toolbarGroups = [[{
101
107
  type: "block",
102
108
  title: "H3",
103
109
  group: "typography"
110
+ }, {
111
+ id: 39,
112
+ format: "headingFour",
113
+ type: "block",
114
+ title: "H4",
115
+ group: "typography"
116
+ }, {
117
+ id: 40,
118
+ format: "headingFive",
119
+ type: "block",
120
+ title: "H5",
121
+ group: "typography"
122
+ }, {
123
+ id: 41,
124
+ format: "headingSix",
125
+ type: "block",
126
+ title: "H6",
127
+ group: "typography"
128
+ }, {
129
+ id: 42,
130
+ format: "paragraphOne",
131
+ type: "block",
132
+ title: "Paragraph 1",
133
+ group: "typography"
134
+ }, {
135
+ id: 43,
136
+ format: "paragraphTwo",
137
+ type: "block",
138
+ title: "Paragraph 2",
139
+ group: "typography"
140
+ }, {
141
+ id: 44,
142
+ format: "paragraphThree",
143
+ type: "block",
144
+ title: "Paragraph 3",
145
+ group: "typography"
104
146
  }, {
105
147
  id: 14,
106
148
  format: "doublequote",
@@ -0,0 +1,18 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ function BackIcon() {
3
+ return /*#__PURE__*/_jsx("svg", {
4
+ width: "8",
5
+ height: "12",
6
+ viewBox: "0 0 6 10",
7
+ fill: "none",
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ children: /*#__PURE__*/_jsx("path", {
10
+ d: "M4.75 1.5L1.25 5L4.75 8.5",
11
+ stroke: "#94A3B8",
12
+ strokeWidth: "1.5",
13
+ strokeLinecap: "round",
14
+ strokeLinejoin: "round"
15
+ })
16
+ });
17
+ }
18
+ export default BackIcon;