@flozy/editor 10.4.2 → 10.4.3
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.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +16 -131
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -46
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
- package/dist/Editor/Elements/Button/EditorButton.js +9 -27
- package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +1 -0
- package/dist/Editor/Elements/Table/Draggable.js +2 -6
- package/dist/Editor/Elements/Table/Styles.js +0 -7
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +5 -24
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -41
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +66 -45
- package/dist/Editor/common/LinkSettings/index.js +29 -14
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- package/dist/Editor/common/MentionsPopup/index.js +1 -4
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
- package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +39 -68
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -30
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconListV2.js +0 -76
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +61 -116
- package/dist/Editor/helper/index.js +1 -5
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -3
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
- package/dist/Editor/utils/accordion.js +4 -14
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/events.js +6 -50
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/formfield.js +0 -1
- package/dist/Editor/utils/helper.js +26 -210
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/Checkbox/index.js +0 -46
- package/dist/Editor/common/Checkbox/styles.js +0 -45
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RadioGroup/index.js +0 -48
- package/dist/Editor/common/RadioGroup/styles.js +0 -29
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
- package/dist/Editor/helper/textIndeces.js +0 -58
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- package/dist/Editor/themeSettingsAI/style.js +0 -332
- package/dist/Editor/utils/updateFormName.js +0 -22
@@ -2,11 +2,8 @@ import { useMemo } from "react";
|
|
2
2
|
import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
|
3
3
|
import CustomSelectTool from "./CustomSelectTool";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
-
import { BREAKPOINTS_DEVICES, getBreakPointsValue
|
5
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
|
6
6
|
import { sizeMap } from "../../../utils/font";
|
7
|
-
import { Editor } from "slate";
|
8
|
-
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
9
|
-
import { MenuItem, Select } from "@mui/material";
|
10
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
9
|
function Label({
|
@@ -21,29 +18,26 @@ function Label({
|
|
21
18
|
});
|
22
19
|
}
|
23
20
|
function DisplayHeaderLabel({
|
24
|
-
type
|
25
|
-
isCustomized,
|
26
|
-
isPara = false
|
21
|
+
type
|
27
22
|
}) {
|
28
23
|
return /*#__PURE__*/_jsxs("div", {
|
29
|
-
children: [
|
24
|
+
children: ["H", /*#__PURE__*/_jsx("sub", {
|
30
25
|
children: type
|
31
26
|
})]
|
32
27
|
});
|
33
28
|
}
|
34
|
-
function getTypographyOptions(
|
35
|
-
|
29
|
+
function getTypographyOptions(translation) {
|
30
|
+
return [{
|
36
31
|
id: 11,
|
37
32
|
format: "headingOne",
|
38
33
|
type: "block",
|
39
34
|
title: /*#__PURE__*/_jsx(Label, {
|
40
35
|
label: "H1",
|
41
|
-
type: "
|
36
|
+
type: "Header",
|
42
37
|
translation: translation
|
43
38
|
}),
|
44
39
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
45
|
-
type: 1
|
46
|
-
isCustomized: isCustomized
|
40
|
+
type: 1
|
47
41
|
}),
|
48
42
|
group: "typography",
|
49
43
|
value: "headingOne"
|
@@ -53,12 +47,11 @@ function getTypographyOptions(isCustomized, translation) {
|
|
53
47
|
type: "block",
|
54
48
|
title: /*#__PURE__*/_jsx(Label, {
|
55
49
|
label: "H2",
|
56
|
-
type: "
|
50
|
+
type: "Header",
|
57
51
|
translation: translation
|
58
52
|
}),
|
59
53
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
60
|
-
type: 2
|
61
|
-
isCustomized: isCustomized
|
54
|
+
type: 2
|
62
55
|
}),
|
63
56
|
group: "typography",
|
64
57
|
value: "headingTwo"
|
@@ -68,156 +61,63 @@ function getTypographyOptions(isCustomized, translation) {
|
|
68
61
|
type: "block",
|
69
62
|
title: /*#__PURE__*/_jsx(Label, {
|
70
63
|
label: "H3",
|
71
|
-
type: "
|
64
|
+
type: "Header",
|
72
65
|
translation: translation
|
73
66
|
}),
|
74
67
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
75
|
-
type: 3
|
76
|
-
isCustomized: isCustomized
|
68
|
+
type: 3
|
77
69
|
}),
|
78
70
|
group: "typography",
|
79
71
|
value: "headingThree"
|
80
72
|
}, {
|
81
|
-
id:
|
82
|
-
format: "
|
83
|
-
type: "
|
73
|
+
id: 14,
|
74
|
+
format: "fontSize",
|
75
|
+
type: "mark",
|
84
76
|
title: /*#__PURE__*/_jsx(Label, {
|
85
|
-
label: "
|
86
|
-
type: "
|
77
|
+
label: "L",
|
78
|
+
type: "Large",
|
87
79
|
translation: translation
|
88
80
|
}),
|
89
|
-
label:
|
90
|
-
type: 4,
|
91
|
-
isCustomized: isCustomized
|
92
|
-
}),
|
81
|
+
label: "L",
|
93
82
|
group: "typography",
|
94
|
-
value: "
|
83
|
+
value: "huge"
|
95
84
|
}, {
|
96
|
-
id:
|
97
|
-
format: "
|
98
|
-
type: "
|
85
|
+
id: 15,
|
86
|
+
format: "fontSize",
|
87
|
+
type: "mark",
|
99
88
|
title: /*#__PURE__*/_jsx(Label, {
|
100
|
-
label: "
|
101
|
-
type: "
|
89
|
+
label: "M",
|
90
|
+
type: "Medium",
|
102
91
|
translation: translation
|
103
92
|
}),
|
104
|
-
label:
|
105
|
-
type: 5,
|
106
|
-
isCustomized: isCustomized
|
107
|
-
}),
|
93
|
+
label: "M",
|
108
94
|
group: "typography",
|
109
|
-
value: "
|
95
|
+
value: "medium"
|
110
96
|
}, {
|
111
|
-
id:
|
112
|
-
format: "
|
113
|
-
type: "
|
97
|
+
id: 16,
|
98
|
+
format: "fontSize",
|
99
|
+
type: "mark",
|
114
100
|
title: /*#__PURE__*/_jsx(Label, {
|
115
|
-
label: "
|
116
|
-
type: "
|
101
|
+
label: "S",
|
102
|
+
type: "Small",
|
117
103
|
translation: translation
|
118
104
|
}),
|
119
|
-
label:
|
120
|
-
type: 6,
|
121
|
-
isCustomized: isCustomized
|
122
|
-
}),
|
105
|
+
label: "S",
|
123
106
|
group: "typography",
|
124
|
-
value: "
|
125
|
-
}
|
126
|
-
id: 20,
|
127
|
-
format: "paragraphOne",
|
128
|
-
type: "block",
|
129
|
-
title: /*#__PURE__*/_jsx(Label, {
|
130
|
-
label: "P1",
|
131
|
-
type: "Paragraph",
|
132
|
-
translation: translation
|
133
|
-
}),
|
134
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
135
|
-
type: 1,
|
136
|
-
isCustomized: isCustomized,
|
137
|
-
isPara: true
|
138
|
-
}),
|
139
|
-
group: "typography",
|
140
|
-
value: "paragraphOne"
|
141
|
-
}, {
|
142
|
-
id: 21,
|
143
|
-
format: "paragraphTwo",
|
144
|
-
type: "block",
|
145
|
-
title: /*#__PURE__*/_jsx(Label, {
|
146
|
-
label: "P2",
|
147
|
-
type: "Paragraph",
|
148
|
-
translation: translation
|
149
|
-
}),
|
150
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
151
|
-
type: 2,
|
152
|
-
isCustomized: isCustomized,
|
153
|
-
isPara: true
|
154
|
-
}),
|
155
|
-
group: "typography",
|
156
|
-
value: "paragraphTwo"
|
157
|
-
}, {
|
158
|
-
id: 22,
|
159
|
-
format: "paragraphThree",
|
160
|
-
type: "block",
|
161
|
-
title: /*#__PURE__*/_jsx(Label, {
|
162
|
-
label: "P3",
|
163
|
-
type: "Paragraph",
|
164
|
-
translation: translation
|
165
|
-
}),
|
166
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
167
|
-
type: 3,
|
168
|
-
isCustomized: isCustomized,
|
169
|
-
isPara: true
|
170
|
-
}),
|
171
|
-
group: "typography",
|
172
|
-
value: "paragraphThree"
|
173
|
-
}
|
174
|
-
// {
|
175
|
-
// id: 14,
|
176
|
-
// format: "fontSize",
|
177
|
-
// type: "mark",
|
178
|
-
// title: <Label label="L" type="Large" />,
|
179
|
-
// label: "L",
|
180
|
-
// group: "typography",
|
181
|
-
// value: "huge",
|
182
|
-
// },
|
183
|
-
// {
|
184
|
-
// id: 15,
|
185
|
-
// format: "fontSize",
|
186
|
-
// type: "mark",
|
187
|
-
// title: <Label label="M" type="Medium" />,
|
188
|
-
// label: "M",
|
189
|
-
// group: "typography",
|
190
|
-
// value: "medium",
|
191
|
-
// },
|
192
|
-
// {
|
193
|
-
// id: 16,
|
194
|
-
// format: "fontSize",
|
195
|
-
// type: "mark",
|
196
|
-
// title: <Label label="S" type="Small" />,
|
197
|
-
// label: "S",
|
198
|
-
// group: "typography",
|
199
|
-
// value: "small",
|
200
|
-
// },
|
201
|
-
];
|
202
|
-
|
203
|
-
return typographyOptions;
|
107
|
+
value: "small"
|
108
|
+
}];
|
204
109
|
}
|
205
110
|
function SelectTypography({
|
206
111
|
editor,
|
207
112
|
classes,
|
208
113
|
closeMainPopup,
|
209
|
-
type,
|
210
114
|
customProps
|
211
115
|
}) {
|
212
116
|
const [size] = useWindowResize();
|
213
|
-
const {
|
214
|
-
theme
|
215
|
-
} = useEditorTheme();
|
216
117
|
const {
|
217
118
|
translation
|
218
119
|
} = customProps;
|
219
|
-
const
|
220
|
-
const typographyOptions = getTypographyOptions(isTextCustomized, translation);
|
120
|
+
const typographyOptions = getTypographyOptions(translation);
|
221
121
|
const updateMarkData = newVal => {
|
222
122
|
const val = activeMark(editor, "fontSize");
|
223
123
|
let upData = {
|
@@ -239,10 +139,7 @@ function SelectTypography({
|
|
239
139
|
...upData
|
240
140
|
}
|
241
141
|
});
|
242
|
-
|
243
|
-
// closeMainPopup();
|
244
142
|
};
|
245
|
-
|
246
143
|
const selectedBlock = useMemo(() => {
|
247
144
|
return typographyOptions.find(t => {
|
248
145
|
if (t.type === "block") {
|
@@ -264,13 +161,15 @@ function SelectTypography({
|
|
264
161
|
});
|
265
162
|
}, [typographyOptions, activeMark, isBlockActive, editor]);
|
266
163
|
const onChange = (format, option) => {
|
164
|
+
// add/reset block elements
|
165
|
+
toggleBlock(editor, format);
|
267
166
|
if (option.type === "block") {
|
268
|
-
|
269
|
-
|
167
|
+
// reset old font size
|
168
|
+
// let updatedValue = !selectedBlock ? {} : { xs: "16px", sm: "16px", md: "16px", lg: "16px" }
|
169
|
+
addMarkData(editor, {
|
170
|
+
format: "fontSize",
|
171
|
+
value: {}
|
270
172
|
});
|
271
|
-
|
272
|
-
// add/reset block elements
|
273
|
-
toggleBlock(editor, format);
|
274
173
|
} else if (option.type === "mark") {
|
275
174
|
const size = sizeMap[option.value] || "";
|
276
175
|
const [sizeInNumber] = size.split("px");
|
@@ -278,35 +177,11 @@ function SelectTypography({
|
|
278
177
|
}
|
279
178
|
closeMainPopup();
|
280
179
|
};
|
281
|
-
const typographyValue = selectedBlock?.value || "headingOne";
|
282
|
-
if (type === "fullWidth") {
|
283
|
-
return /*#__PURE__*/_jsx(Select, {
|
284
|
-
value: typographyValue,
|
285
|
-
className: "editor-dd",
|
286
|
-
onChange: e => {
|
287
|
-
const {
|
288
|
-
value
|
289
|
-
} = e.target;
|
290
|
-
const option = typographyOptions?.find(o => o.value === value);
|
291
|
-
onChange(value, option);
|
292
|
-
},
|
293
|
-
style: {
|
294
|
-
width: "100%",
|
295
|
-
height: "36px",
|
296
|
-
borderRadius: "10px",
|
297
|
-
fontSize: "14px"
|
298
|
-
},
|
299
|
-
children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
|
300
|
-
value: item.value,
|
301
|
-
children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
|
302
|
-
}, index))
|
303
|
-
});
|
304
|
-
}
|
305
180
|
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
306
181
|
options: typographyOptions,
|
307
182
|
editor: editor,
|
308
183
|
onChange: onChange,
|
309
|
-
value:
|
184
|
+
value: selectedBlock?.value || "headingOne",
|
310
185
|
classes: classes
|
311
186
|
});
|
312
187
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Fade, Grid, IconButton, Paper, Popper
|
1
|
+
import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
|
2
2
|
import SelectTypography from "./SelectTypography";
|
3
3
|
import SelectList from "./SelectList";
|
4
4
|
import { toolbarGroups } from "../../toolbarGroups";
|
@@ -14,7 +14,7 @@ import MiniColorPicker from "./MiniColorPicker";
|
|
14
14
|
import SelectAlignment from "./SelectAlignment";
|
15
15
|
import SelectFontSize from "./SelectFontSize";
|
16
16
|
import InfinityAITool from "./InfinityAITool";
|
17
|
-
import {
|
17
|
+
import { viewSlateSelection } from "../../../utils/helper";
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
19
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
20
20
|
const DEFAULT_COLOR = {
|
@@ -35,12 +35,11 @@ const MiniTextFormat = props => {
|
|
35
35
|
const open = Boolean(anchorEl);
|
36
36
|
const id = open ? "popup-edit-tool" : "";
|
37
37
|
const [size] = useWindowResize();
|
38
|
-
const theme = useTheme();
|
39
38
|
const removeFontStyles = ["superscript", "subscript"];
|
40
39
|
const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
|
41
40
|
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
42
41
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
43
|
-
const activeColor =
|
42
|
+
const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
|
44
43
|
const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
|
45
44
|
return /*#__PURE__*/_jsx(Grid, {
|
46
45
|
container: true,
|
@@ -58,7 +57,6 @@ const MiniTextFormat = props => {
|
|
58
57
|
classes: classes,
|
59
58
|
editor: editor,
|
60
59
|
closeMainPopup: closeMainPopup,
|
61
|
-
type: "miniToolBar",
|
62
60
|
customProps: customProps
|
63
61
|
}), /*#__PURE__*/_jsx("div", {
|
64
62
|
className: "verticalLine"
|
@@ -94,8 +92,7 @@ const MiniTextFormat = props => {
|
|
94
92
|
activeColor: activeColor,
|
95
93
|
id: "11_cc",
|
96
94
|
editor: editor,
|
97
|
-
customProps: customProps
|
98
|
-
type: "textColor"
|
95
|
+
customProps: customProps
|
99
96
|
}), /*#__PURE__*/_jsx(MiniColorPicker, {
|
100
97
|
format: textBgFormat,
|
101
98
|
classes: classes,
|
@@ -98,9 +98,6 @@ const usePopupStyle = theme => ({
|
|
98
98
|
}
|
99
99
|
}
|
100
100
|
},
|
101
|
-
"& .MuiDivider-root": {
|
102
|
-
border: `0.5px solid ${theme?.palette?.editor?.deviderBgColor}`
|
103
|
-
},
|
104
101
|
"@media only screen and (max-width: 599px)": {
|
105
102
|
// margin: "10px !important",
|
106
103
|
background: "unset",
|
@@ -114,7 +111,6 @@ const usePopupStyle = theme => ({
|
|
114
111
|
width: "323px",
|
115
112
|
maxWidth: "100%",
|
116
113
|
overflowX: "hidden !important",
|
117
|
-
marginTop: "6px",
|
118
114
|
// 30% of window height
|
119
115
|
maxHeight: `${window.innerHeight * 0.45}px`,
|
120
116
|
overflow: "auto",
|
@@ -134,7 +130,7 @@ const usePopupStyle = theme => ({
|
|
134
130
|
},
|
135
131
|
"& .accordionIcon": {
|
136
132
|
"& p": {
|
137
|
-
textAlign:
|
133
|
+
textAlign: 'left'
|
138
134
|
}
|
139
135
|
}
|
140
136
|
},
|
@@ -308,21 +304,6 @@ const usePopupStyle = theme => ({
|
|
308
304
|
paddingRight: "0px !important"
|
309
305
|
}
|
310
306
|
},
|
311
|
-
textFormatContainer: {
|
312
|
-
".saveThemeBtnsWrapper": {
|
313
|
-
position: "sticky",
|
314
|
-
bottom: "0px",
|
315
|
-
right: "0px",
|
316
|
-
boxShadow: `0px -3px 16px 0px ${theme?.palette?.editor?.cardShadow}`,
|
317
|
-
padding: "10px",
|
318
|
-
borderRadius: "8px 8px 19px 19px",
|
319
|
-
display: "flex",
|
320
|
-
justifyContent: "end",
|
321
|
-
alignItems: "center",
|
322
|
-
gap: "8px",
|
323
|
-
background: theme?.palette?.editor?.miniToolBarBackground
|
324
|
-
}
|
325
|
-
},
|
326
307
|
textFormatLabel: {
|
327
308
|
display: "flex",
|
328
309
|
alignItems: "center",
|
@@ -354,10 +335,9 @@ const usePopupStyle = theme => ({
|
|
354
335
|
borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
|
355
336
|
},
|
356
337
|
textFormatField: {
|
357
|
-
marginBottom: "8px"
|
358
|
-
|
338
|
+
marginBottom: "8px",
|
339
|
+
marginTop: "8px"
|
359
340
|
},
|
360
|
-
|
361
341
|
textFormatField1: {
|
362
342
|
marginBottom: "16px",
|
363
343
|
marginTop: "10px"
|
@@ -436,11 +416,6 @@ const usePopupStyle = theme => ({
|
|
436
416
|
"& .MuiOutlinedInput-notchedOutline": {
|
437
417
|
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
438
418
|
},
|
439
|
-
"& .MuiInputBase-root": {
|
440
|
-
"& input": {
|
441
|
-
border: "none !important"
|
442
|
-
}
|
443
|
-
},
|
444
419
|
"& svg": {
|
445
420
|
width: "20px",
|
446
421
|
height: "24px"
|
@@ -449,6 +424,9 @@ const usePopupStyle = theme => ({
|
|
449
424
|
fontFamilyListOptions: {
|
450
425
|
"& .MuiAutocomplete-listbox": {
|
451
426
|
padding: "0px",
|
427
|
+
// "&::-webkit-scrollbar-thumb": {
|
428
|
+
// background: `none !important`,
|
429
|
+
// },
|
452
430
|
"&::-webkit-scrollbar-thumb": {
|
453
431
|
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
454
432
|
},
|
@@ -459,8 +437,8 @@ const usePopupStyle = theme => ({
|
|
459
437
|
margin: "5px",
|
460
438
|
borderRadius: "8px",
|
461
439
|
color: theme?.palette?.editor?.menuOptionTextColor,
|
462
|
-
fontSize:
|
463
|
-
padding:
|
440
|
+
fontSize: '14px',
|
441
|
+
padding: '8px 12px',
|
464
442
|
'&[aria-selected="true"]': {
|
465
443
|
backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
|
466
444
|
}
|
@@ -559,7 +537,7 @@ const usePopupStyle = theme => ({
|
|
559
537
|
}
|
560
538
|
},
|
561
539
|
alignItems: "flexStart",
|
562
|
-
|
540
|
+
justifyContent: "center",
|
563
541
|
flexDirection: "row",
|
564
542
|
"&:hover": {
|
565
543
|
background: "unset"
|
@@ -808,13 +786,8 @@ const usePopupStyle = theme => ({
|
|
808
786
|
padding: "0px"
|
809
787
|
},
|
810
788
|
defaultBtn: {
|
811
|
-
color: "#
|
812
|
-
textTransform: "none"
|
813
|
-
textDecoration: "underline",
|
814
|
-
"&.Mui-disabled": {
|
815
|
-
color: "#A0AEC0 !important",
|
816
|
-
textDecoration: "none"
|
817
|
-
}
|
789
|
+
color: "#0F172A",
|
790
|
+
textTransform: "none"
|
818
791
|
},
|
819
792
|
templateCardBtnGrp: {
|
820
793
|
display: "none",
|
@@ -891,7 +864,7 @@ const usePopupStyle = theme => ({
|
|
891
864
|
margin: "30px",
|
892
865
|
"& .MuiPaper-root": {
|
893
866
|
overflow: "auto",
|
894
|
-
backgroundColor: theme?.palette?.editor?.
|
867
|
+
backgroundColor: theme?.palette?.editor?.background,
|
895
868
|
borderRadius: "14px !important",
|
896
869
|
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
|
897
870
|
minWidth: "fit-content",
|
@@ -1165,39 +1138,6 @@ const usePopupStyle = theme => ({
|
|
1165
1138
|
"& fieldset": {
|
1166
1139
|
border: "none !important"
|
1167
1140
|
}
|
1168
|
-
},
|
1169
|
-
customCheckBox: {
|
1170
|
-
marginTop: "4px",
|
1171
|
-
padding: "0px",
|
1172
|
-
"& .MuiCheckbox-root": {
|
1173
|
-
padding: "8px 8px 8px 10px",
|
1174
|
-
"&:hover": {
|
1175
|
-
background: "unset !important"
|
1176
|
-
}
|
1177
|
-
},
|
1178
|
-
"& button": {
|
1179
|
-
width: "14px !important",
|
1180
|
-
height: "14px !important",
|
1181
|
-
borderRadius: "3px",
|
1182
|
-
border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
|
1183
|
-
padding: "0px",
|
1184
|
-
"& svg": {
|
1185
|
-
width: "10px",
|
1186
|
-
height: "10px"
|
1187
|
-
}
|
1188
|
-
},
|
1189
|
-
"& .checkedIcon": {
|
1190
|
-
background: "#2563EB",
|
1191
|
-
borderColor: "#2563EB"
|
1192
|
-
},
|
1193
|
-
"& .unCheckedIcon": {
|
1194
|
-
background: theme?.palette?.editor?.checkedIconBg
|
1195
|
-
},
|
1196
|
-
"& p": {
|
1197
|
-
margin: "0px !important",
|
1198
|
-
color: theme?.palette?.editor?.tv_text,
|
1199
|
-
fontSize: "13px"
|
1200
|
-
}
|
1201
1141
|
}
|
1202
1142
|
});
|
1203
1143
|
export default usePopupStyle;
|
@@ -10,8 +10,6 @@ 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";
|
15
13
|
import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
|
16
14
|
import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
|
17
15
|
import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
|
@@ -45,7 +43,7 @@ const TextFormat = props => {
|
|
45
43
|
const pageSettingLine = pageSt?.pageProps?.lineHeight;
|
46
44
|
const {
|
47
45
|
fontFamilies,
|
48
|
-
theme
|
46
|
+
theme
|
49
47
|
} = useEditorContext();
|
50
48
|
const breakpoint = getDevice(window.innerWidth);
|
51
49
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
@@ -64,11 +62,6 @@ const TextFormat = props => {
|
|
64
62
|
color: "",
|
65
63
|
bgColor: ""
|
66
64
|
};
|
67
|
-
const {
|
68
|
-
theme,
|
69
|
-
updateTheme
|
70
|
-
} = useEditorTheme();
|
71
|
-
const customized = isTextCustomized(editor);
|
72
65
|
let lineSpacingValue = activeMark(editor, "lineHeight");
|
73
66
|
lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
|
74
67
|
const handleColorPicker = type => e => {
|
@@ -123,51 +116,6 @@ const TextFormat = props => {
|
|
123
116
|
sx: classes.textFormatWrapper,
|
124
117
|
className: "text-formatter-popup",
|
125
118
|
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, {
|
171
119
|
item: true,
|
172
120
|
xs: 12,
|
173
121
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
@@ -294,8 +242,7 @@ const TextFormat = props => {
|
|
294
242
|
rounded: true,
|
295
243
|
title: translation("textColor"),
|
296
244
|
id: "11_cc",
|
297
|
-
classes: classes
|
298
|
-
type: "textColor"
|
245
|
+
classes: classes
|
299
246
|
}, "11_cc")
|
300
247
|
})]
|
301
248
|
}), /*#__PURE__*/_jsxs(Grid, {
|
@@ -321,7 +268,7 @@ const TextFormat = props => {
|
|
321
268
|
children: /*#__PURE__*/_jsx(Button, {
|
322
269
|
sx: classes.defaultBtn2,
|
323
270
|
startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
|
324
|
-
stroke:
|
271
|
+
stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
|
325
272
|
}),
|
326
273
|
onClick: handleDefault({
|
327
274
|
format: "bgColor"
|
@@ -411,7 +358,12 @@ const TextFormat = props => {
|
|
411
358
|
xs: 12,
|
412
359
|
className: "typo-icons",
|
413
360
|
sx: classes.evenSpace,
|
414
|
-
children: [
|
361
|
+
children: [/*#__PURE__*/_jsx(SelectTypography, {
|
362
|
+
classes: classes,
|
363
|
+
editor: editor,
|
364
|
+
closeMainPopup: closeMainPopup || onClose,
|
365
|
+
customProps: customProps
|
366
|
+
}), fontStyle?.map((m, i) => {
|
415
367
|
return /*#__PURE__*/_jsx(MarkButton, {
|
416
368
|
editor: editor,
|
417
369
|
...m,
|
@@ -450,7 +402,7 @@ const TextFormat = props => {
|
|
450
402
|
value: lineSpacingValue,
|
451
403
|
onChange: handleLineSpacing,
|
452
404
|
data: {
|
453
|
-
key:
|
405
|
+
key: 'lineHeight'
|
454
406
|
}
|
455
407
|
})
|
456
408
|
})]
|
@@ -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
|
99
98
|
} else {
|
100
99
|
updateAnchorEl();
|
100
|
+
hideSlateSelection(); // removes slate selection background, when there is no selection
|
101
101
|
}
|
102
102
|
}, [selection, event, selectedElement?.enable]);
|
103
103
|
const handleClose = () => {
|