@flozy/editor 4.0.2 → 4.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +14 -9
- package/dist/Editor/CommonEditor.js +185 -170
- package/dist/Editor/DialogWrapper.js +4 -3
- package/dist/Editor/Editor.css +5 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
- package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
- package/dist/Editor/Elements/Button/EditorButton.js +33 -38
- package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Embed/Image.js +15 -14
- package/dist/Editor/Elements/Embed/Video.js +12 -8
- package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
- package/dist/Editor/Elements/Form/Form.js +43 -27
- package/dist/Editor/Elements/Form/FormField.js +21 -10
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
- package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
- package/dist/Editor/Elements/Grid/Grid.js +11 -9
- package/dist/Editor/Elements/Grid/GridItem.js +31 -23
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
- package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
- package/dist/Editor/Elements/SimpleText/index.js +18 -16
- package/dist/Editor/Elements/SimpleText/style.js +43 -0
- package/dist/Editor/ErrorBoundary.js +30 -0
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +28 -0
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
- package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
- package/dist/Editor/Toolbar/Toolbar.js +7 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
- package/dist/Editor/common/ColorPickerButton.js +9 -25
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/EditorCmds.js +0 -3
- package/dist/Editor/common/Icon.js +16 -34
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +1 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/MentionsPopup/index.js +12 -8
- package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
- package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
- package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
- package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
- package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
- package/dist/Editor/common/RnD/DragOver/index.js +55 -0
- package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
- package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
- package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
- package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
- package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
- package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
- package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
- package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
- package/dist/Editor/common/RnD/RnDCopy.js +23 -0
- package/dist/Editor/common/RnD/ShadowElement.js +34 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
- package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
- package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
- package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
- package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
- package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
- package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
- package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
- package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
- package/dist/Editor/common/RnD/Utils/index.js +251 -0
- package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
- package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
- package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
- package/dist/Editor/common/RnD/index.js +567 -0
- package/dist/Editor/common/RnD/styles.js +4 -0
- package/dist/Editor/common/Section/index.js +21 -12
- package/dist/Editor/common/Section/styles.js +7 -4
- package/dist/Editor/common/Shorthands/elements.js +12 -54
- package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +5 -3
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
- package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
- package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
- package/dist/Editor/helper/breakpoint.js +5 -0
- package/dist/Editor/helper/index.js +139 -0
- package/dist/Editor/helper/theme.js +48 -186
- package/dist/Editor/hooks/useBreakpoints.js +34 -0
- package/dist/Editor/hooks/useMouseMove.js +37 -12
- package/dist/Editor/hooks/withCommon.js +2 -1
- package/dist/Editor/hooks/withErrorHandling.js +14 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/events.js +5 -0
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/form.js +7 -2
- package/dist/Editor/utils/formfield.js +1 -1
- package/dist/Editor/utils/freegrid.js +91 -0
- package/dist/Editor/utils/helper.js +44 -30
- package/dist/Editor/utils/insertAppHeader.js +47 -40
- package/package.json +5 -2
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -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 { MenuItem, Select } from "@mui/material";
|
9
|
-
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
10
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
9
|
function Label({
|
@@ -20,194 +17,93 @@ function Label({
|
|
20
17
|
});
|
21
18
|
}
|
22
19
|
function DisplayHeaderLabel({
|
23
|
-
type
|
24
|
-
isCustomized,
|
25
|
-
isPara = false
|
20
|
+
type
|
26
21
|
}) {
|
27
22
|
return /*#__PURE__*/_jsxs("div", {
|
28
|
-
children: [
|
23
|
+
children: ["H", /*#__PURE__*/_jsx("sub", {
|
29
24
|
children: type
|
30
25
|
})]
|
31
26
|
});
|
32
27
|
}
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
type: "
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
id: 17,
|
78
|
-
format: "headingFour",
|
79
|
-
type: "block",
|
80
|
-
title: /*#__PURE__*/_jsx(Label, {
|
81
|
-
label: "H4",
|
82
|
-
type: "Heading"
|
83
|
-
}),
|
84
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
85
|
-
type: 4,
|
86
|
-
isCustomized: isCustomized
|
87
|
-
}),
|
88
|
-
group: "typography",
|
89
|
-
value: "headingFour"
|
90
|
-
}, {
|
91
|
-
id: 18,
|
92
|
-
format: "headingFive",
|
93
|
-
type: "block",
|
94
|
-
title: /*#__PURE__*/_jsx(Label, {
|
95
|
-
label: "H5",
|
96
|
-
type: "Heading"
|
97
|
-
}),
|
98
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
99
|
-
type: 5,
|
100
|
-
isCustomized: isCustomized
|
101
|
-
}),
|
102
|
-
group: "typography",
|
103
|
-
value: "headingFive"
|
104
|
-
}, {
|
105
|
-
id: 19,
|
106
|
-
format: "headingSix",
|
107
|
-
type: "block",
|
108
|
-
title: /*#__PURE__*/_jsx(Label, {
|
109
|
-
label: "H6",
|
110
|
-
type: "Heading"
|
111
|
-
}),
|
112
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
113
|
-
type: 6,
|
114
|
-
isCustomized: isCustomized
|
115
|
-
}),
|
116
|
-
group: "typography",
|
117
|
-
value: "headingSix"
|
118
|
-
}, {
|
119
|
-
id: 20,
|
120
|
-
format: "paragraphOne",
|
121
|
-
type: "block",
|
122
|
-
title: /*#__PURE__*/_jsx(Label, {
|
123
|
-
label: "P1",
|
124
|
-
type: "Paragraph"
|
125
|
-
}),
|
126
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
127
|
-
type: 1,
|
128
|
-
isCustomized: isCustomized,
|
129
|
-
isPara: true
|
130
|
-
}),
|
131
|
-
group: "typography",
|
132
|
-
value: "paragraphOne"
|
133
|
-
}, {
|
134
|
-
id: 21,
|
135
|
-
format: "paragraphTwo",
|
136
|
-
type: "block",
|
137
|
-
title: /*#__PURE__*/_jsx(Label, {
|
138
|
-
label: "P2",
|
139
|
-
type: "Paragraph"
|
140
|
-
}),
|
141
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
142
|
-
type: 2,
|
143
|
-
isCustomized: isCustomized,
|
144
|
-
isPara: true
|
145
|
-
}),
|
146
|
-
group: "typography",
|
147
|
-
value: "paragraphTwo"
|
148
|
-
}, {
|
149
|
-
id: 22,
|
150
|
-
format: "paragraphThree",
|
151
|
-
type: "block",
|
152
|
-
title: /*#__PURE__*/_jsx(Label, {
|
153
|
-
label: "P3",
|
154
|
-
type: "Paragraph"
|
155
|
-
}),
|
156
|
-
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
157
|
-
type: 3,
|
158
|
-
isCustomized: isCustomized,
|
159
|
-
isPara: true
|
160
|
-
}),
|
161
|
-
group: "typography",
|
162
|
-
value: "paragraphThree"
|
163
|
-
}, {
|
164
|
-
id: 14,
|
165
|
-
format: "fontSize",
|
166
|
-
type: "mark",
|
167
|
-
title: /*#__PURE__*/_jsx(Label, {
|
168
|
-
label: "L",
|
169
|
-
type: "Large"
|
170
|
-
}),
|
28
|
+
const typographyOptions = [{
|
29
|
+
id: 11,
|
30
|
+
format: "headingOne",
|
31
|
+
type: "block",
|
32
|
+
title: /*#__PURE__*/_jsx(Label, {
|
33
|
+
label: "H1",
|
34
|
+
type: "Header"
|
35
|
+
}),
|
36
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
37
|
+
type: 1
|
38
|
+
}),
|
39
|
+
group: "typography",
|
40
|
+
value: "headingOne"
|
41
|
+
}, {
|
42
|
+
id: 12,
|
43
|
+
format: "headingTwo",
|
44
|
+
type: "block",
|
45
|
+
title: /*#__PURE__*/_jsx(Label, {
|
46
|
+
label: "H2",
|
47
|
+
type: "Header"
|
48
|
+
}),
|
49
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
50
|
+
type: 2
|
51
|
+
}),
|
52
|
+
group: "typography",
|
53
|
+
value: "headingTwo"
|
54
|
+
}, {
|
55
|
+
id: 13,
|
56
|
+
format: "headingThree",
|
57
|
+
type: "block",
|
58
|
+
title: /*#__PURE__*/_jsx(Label, {
|
59
|
+
label: "H3",
|
60
|
+
type: "Header"
|
61
|
+
}),
|
62
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
63
|
+
type: 3
|
64
|
+
}),
|
65
|
+
group: "typography",
|
66
|
+
value: "headingThree"
|
67
|
+
}, {
|
68
|
+
id: 14,
|
69
|
+
format: "fontSize",
|
70
|
+
type: "mark",
|
71
|
+
title: /*#__PURE__*/_jsx(Label, {
|
171
72
|
label: "L",
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
73
|
+
type: "Large"
|
74
|
+
}),
|
75
|
+
label: "L",
|
76
|
+
group: "typography",
|
77
|
+
value: "huge"
|
78
|
+
}, {
|
79
|
+
id: 15,
|
80
|
+
format: "fontSize",
|
81
|
+
type: "mark",
|
82
|
+
title: /*#__PURE__*/_jsx(Label, {
|
182
83
|
label: "M",
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
84
|
+
type: "Medium"
|
85
|
+
}),
|
86
|
+
label: "M",
|
87
|
+
group: "typography",
|
88
|
+
value: "medium"
|
89
|
+
}, {
|
90
|
+
id: 16,
|
91
|
+
format: "fontSize",
|
92
|
+
type: "mark",
|
93
|
+
title: /*#__PURE__*/_jsx(Label, {
|
193
94
|
label: "S",
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
95
|
+
type: "Small"
|
96
|
+
}),
|
97
|
+
label: "S",
|
98
|
+
group: "typography",
|
99
|
+
value: "small"
|
100
|
+
}];
|
199
101
|
function SelectTypography({
|
200
102
|
editor,
|
201
103
|
classes,
|
202
|
-
closeMainPopup
|
203
|
-
type
|
104
|
+
closeMainPopup
|
204
105
|
}) {
|
205
106
|
const [size] = useWindowResize();
|
206
|
-
const {
|
207
|
-
theme
|
208
|
-
} = useEditorTheme();
|
209
|
-
const isTextCustomized = theme?.id ? isCustomized(editor) : false;
|
210
|
-
const typographyOptions = getTypographyOptions(isTextCustomized);
|
211
107
|
const updateMarkData = newVal => {
|
212
108
|
const val = activeMark(editor, "fontSize");
|
213
109
|
let upData = {
|
@@ -252,49 +148,26 @@ function SelectTypography({
|
|
252
148
|
});
|
253
149
|
}, [typographyOptions, activeMark, isBlockActive, editor]);
|
254
150
|
const onChange = (format, option) => {
|
151
|
+
// add/reset block elements
|
152
|
+
toggleBlock(editor, format);
|
255
153
|
if (option.type === "block") {
|
256
|
-
|
257
|
-
|
154
|
+
// reset old font size
|
155
|
+
addMarkData(editor, {
|
156
|
+
format: "fontSize",
|
157
|
+
value: {}
|
258
158
|
});
|
259
|
-
|
260
|
-
// add/reset block elements
|
261
|
-
toggleBlock(editor, format);
|
262
159
|
} else if (option.type === "mark") {
|
263
160
|
const size = sizeMap[option.value] || "";
|
264
161
|
const [sizeInNumber] = size.split("px");
|
265
162
|
updateMarkData(Number(sizeInNumber));
|
266
163
|
}
|
267
164
|
};
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
value: typographyValue,
|
275
|
-
classes: classes
|
276
|
-
});
|
277
|
-
}
|
278
|
-
return /*#__PURE__*/_jsx(Select, {
|
279
|
-
value: typographyValue,
|
280
|
-
className: "editor-dd",
|
281
|
-
onChange: e => {
|
282
|
-
const {
|
283
|
-
value
|
284
|
-
} = e.target;
|
285
|
-
const option = typographyOptions?.find(o => o.value === value);
|
286
|
-
onChange(value, option);
|
287
|
-
},
|
288
|
-
style: {
|
289
|
-
width: "100%",
|
290
|
-
height: "36px",
|
291
|
-
borderRadius: "10px",
|
292
|
-
fontSize: "14px"
|
293
|
-
},
|
294
|
-
children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
|
295
|
-
value: item.value,
|
296
|
-
children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
|
297
|
-
}, index))
|
165
|
+
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
166
|
+
options: typographyOptions,
|
167
|
+
editor: editor,
|
168
|
+
onChange: onChange,
|
169
|
+
value: selectedBlock?.value || "headingOne",
|
170
|
+
classes: classes
|
298
171
|
});
|
299
172
|
}
|
300
173
|
export default SelectTypography;
|
@@ -53,8 +53,7 @@ const MiniTextFormat = props => {
|
|
53
53
|
children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
|
54
54
|
classes: classes,
|
55
55
|
editor: editor,
|
56
|
-
closeMainPopup: closeMainPopup
|
57
|
-
type: "miniToolBar"
|
56
|
+
closeMainPopup: closeMainPopup
|
58
57
|
}), /*#__PURE__*/_jsx("div", {
|
59
58
|
className: "verticalLine"
|
60
59
|
}), /*#__PURE__*/_jsx(SelectList, {
|
@@ -4,9 +4,8 @@ const usePopupStyle = theme => ({
|
|
4
4
|
zIndex: 1300,
|
5
5
|
marginBottom: "12px !important",
|
6
6
|
border: "1px solid #D8DDE1",
|
7
|
-
borderRadius: "
|
8
|
-
maxWidth: "
|
9
|
-
// maxHeight: "40px",
|
7
|
+
borderRadius: "6px",
|
8
|
+
maxWidth: "96%",
|
10
9
|
"&.fullscreen": {
|
11
10
|
marginBottom: "0px !important",
|
12
11
|
"& .papper-wrpr": {
|
@@ -107,7 +106,6 @@ const usePopupStyle = theme => ({
|
|
107
106
|
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
108
107
|
},
|
109
108
|
"& .mini": {
|
110
|
-
borderRadius: "0px",
|
111
109
|
width: "100%",
|
112
110
|
justifyContent: "start",
|
113
111
|
borderRadius: "10px !important",
|
@@ -224,8 +222,7 @@ const usePopupStyle = theme => ({
|
|
224
222
|
fontSize: "14px",
|
225
223
|
marginBottom: "5px",
|
226
224
|
paddingLeft: "5px",
|
227
|
-
fontWeight: 500
|
228
|
-
color: "#000000"
|
225
|
+
fontWeight: 500
|
229
226
|
},
|
230
227
|
typoLabel2: {
|
231
228
|
fontSize: "14px",
|
@@ -390,13 +387,8 @@ const usePopupStyle = theme => ({
|
|
390
387
|
padding: "0px 10px"
|
391
388
|
},
|
392
389
|
defaultBtn: {
|
393
|
-
color: "#
|
394
|
-
textTransform: "none"
|
395
|
-
textDecoration: "underline",
|
396
|
-
"&.Mui-disabled": {
|
397
|
-
color: "#A0AEC0 !important",
|
398
|
-
textDecoration: "none"
|
399
|
-
}
|
390
|
+
color: "#0F172A",
|
391
|
+
textTransform: "none"
|
400
392
|
},
|
401
393
|
templateCardBtnGrp: {
|
402
394
|
display: "none",
|
@@ -482,7 +474,6 @@ const usePopupStyle = theme => ({
|
|
482
474
|
colorPopper: {
|
483
475
|
"& .MuiPaper-root": {
|
484
476
|
backgroundColor: theme?.palette?.editor?.background,
|
485
|
-
padding: "4px 14px",
|
486
477
|
"@media only screen and (max-width: 600px)": {
|
487
478
|
marginTop: "-40px"
|
488
479
|
}
|
@@ -595,13 +586,13 @@ const usePopupStyle = theme => ({
|
|
595
586
|
},
|
596
587
|
customSelectPopoverWrapper: {
|
597
588
|
"& .MuiPopover-paper": {
|
598
|
-
maxHeight: 'fit-content',
|
599
589
|
// minWidth: "130px",
|
600
590
|
border: "1px solid #E4E8EB",
|
601
|
-
|
602
|
-
overflowY:
|
591
|
+
background: theme?.palette?.editor?.background,
|
592
|
+
overflowY: "hidden",
|
603
593
|
padding: "6px 12px 6px 0px",
|
604
|
-
|
594
|
+
maxHeight: "140px",
|
595
|
+
"@media only screen and (max-width: 600px)": {
|
605
596
|
marginTop: "-40px"
|
606
597
|
}
|
607
598
|
},
|
@@ -617,16 +608,13 @@ const usePopupStyle = theme => ({
|
|
617
608
|
// background: theme?.palette?.editor?.background || "#fff",
|
618
609
|
overflowY: "hidden",
|
619
610
|
"&:hover": {
|
620
|
-
background:
|
621
|
-
|
611
|
+
background: `${theme?.palette?.action?.selected} !important`
|
612
|
+
},
|
613
|
+
"&.selected": {
|
614
|
+
color: `${theme?.palette?.primary?.main} !important`,
|
615
|
+
background: `${theme?.palette?.action?.selected} !important`
|
622
616
|
}
|
623
|
-
|
624
|
-
// "&.selected": {
|
625
|
-
// color: `#2563EB !important`,
|
626
|
-
// background: `${theme?.palette?.action?.selected} !important`
|
627
|
-
// }
|
628
617
|
},
|
629
|
-
|
630
618
|
"& .menuOptions": {
|
631
619
|
display: "flex",
|
632
620
|
alignItems: "center",
|
@@ -1,22 +1,15 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Button, ButtonGroup, Divider, 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
3
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
7
|
-
import FormatClearIcon from "@mui/icons-material/FormatClear";
|
8
4
|
import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
|
9
5
|
import { toolbarGroups } from "../toolbarGroups";
|
10
6
|
import ColorPicker from "../../Elements/Color Picker/ColorPicker";
|
11
7
|
import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
|
12
8
|
import LinkButton from "../../Elements/Link/LinkButton";
|
13
|
-
import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
14
9
|
import { AllColors } from "../../Elements/Color Picker/ColorButtons";
|
15
10
|
import { fontFamilyMap } from "../../utils/font";
|
16
11
|
import { getBorderColor } from "../../utils/helper";
|
17
12
|
import SelectTypography from "./MiniTextFormat/SelectTypography";
|
18
|
-
import { isTextCustomized, saveToTheme } from "../../helper/theme";
|
19
|
-
import { useEditorTheme } from "../../hooks/useEditorTheme";
|
20
13
|
import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
|
21
14
|
import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
|
22
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -38,16 +31,10 @@ const TextFormat = props => {
|
|
38
31
|
const open = Boolean(anchorEl);
|
39
32
|
const fontFamily = allTools.find(f => f.format === "fontFamily");
|
40
33
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
41
|
-
const fontStyle = allTools.filter(f => f.type === "mark" && f.format
|
34
|
+
const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
|
42
35
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
43
36
|
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
44
37
|
const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
|
45
|
-
const {
|
46
|
-
pageProps
|
47
|
-
} = getPageSettings(editor)?.element || {};
|
48
|
-
const {
|
49
|
-
pageWidth
|
50
|
-
} = pageProps;
|
51
38
|
const {
|
52
39
|
isActive: isBlockQuoteActive,
|
53
40
|
props: bqProps
|
@@ -59,17 +46,6 @@ const TextFormat = props => {
|
|
59
46
|
color: "",
|
60
47
|
bgColor: ""
|
61
48
|
};
|
62
|
-
const {
|
63
|
-
theme,
|
64
|
-
updateTheme
|
65
|
-
} = useEditorTheme();
|
66
|
-
const customized = isTextCustomized(editor);
|
67
|
-
const handlePageWidth = width => () => {
|
68
|
-
updatePageSettings(editor, {
|
69
|
-
...(pageProps || {}),
|
70
|
-
pageWidth: width
|
71
|
-
});
|
72
|
-
};
|
73
49
|
const handleColorPicker = type => e => {
|
74
50
|
setType(type);
|
75
51
|
setAnchorEl(e.currentTarget);
|
@@ -112,50 +88,8 @@ const TextFormat = props => {
|
|
112
88
|
return /*#__PURE__*/_jsxs(Grid, {
|
113
89
|
container: true,
|
114
90
|
sx: classes.textFormatWrapper,
|
91
|
+
className: "text-formatter-popup",
|
115
92
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
116
|
-
item: true,
|
117
|
-
xs: 12,
|
118
|
-
children: [/*#__PURE__*/_jsxs(Grid, {
|
119
|
-
container: true,
|
120
|
-
justifyContent: "space-between",
|
121
|
-
alignItems: "center",
|
122
|
-
children: [/*#__PURE__*/_jsx(Grid, {
|
123
|
-
item: true,
|
124
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
125
|
-
variant: "body1",
|
126
|
-
color: "primary",
|
127
|
-
sx: classes.typoLabel,
|
128
|
-
children: "Theme Style"
|
129
|
-
})
|
130
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
131
|
-
item: true,
|
132
|
-
children: theme?.id ? /*#__PURE__*/_jsx(Button, {
|
133
|
-
sx: classes.defaultBtn,
|
134
|
-
onClick: () => {
|
135
|
-
const {
|
136
|
-
field,
|
137
|
-
theme
|
138
|
-
} = saveToTheme(editor) || {};
|
139
|
-
updateTheme(theme, {
|
140
|
-
action: "ELEMENT_PROPS_CHANGE",
|
141
|
-
fieldName: field
|
142
|
-
});
|
143
|
-
},
|
144
|
-
disabled: !customized,
|
145
|
-
children: "Save to theme"
|
146
|
-
}) : null
|
147
|
-
})]
|
148
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
149
|
-
item: true,
|
150
|
-
xs: 12,
|
151
|
-
sx: classes.textFormatField,
|
152
|
-
children: /*#__PURE__*/_jsx(SelectTypography, {
|
153
|
-
editor: editor,
|
154
|
-
classes: classes,
|
155
|
-
closeMainPopup: () => {}
|
156
|
-
})
|
157
|
-
})]
|
158
|
-
}), /*#__PURE__*/_jsxs(Grid, {
|
159
93
|
item: true,
|
160
94
|
xs: 12,
|
161
95
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
@@ -30,6 +30,9 @@ const PopupTool = props => {
|
|
30
30
|
const id = open ? "popup-edit-tool" : "";
|
31
31
|
const table = new TableUtil(editor);
|
32
32
|
const [size] = useWindowResize();
|
33
|
+
const {
|
34
|
+
selectedElement
|
35
|
+
} = useEditorContext();
|
33
36
|
useEffect(() => {
|
34
37
|
const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
|
35
38
|
|
@@ -54,6 +57,11 @@ const PopupTool = props => {
|
|
54
57
|
updateAnchorEl();
|
55
58
|
}
|
56
59
|
}, [selection]);
|
60
|
+
useEffect(() => {
|
61
|
+
if (selectedElement?.enable === 1) {
|
62
|
+
setAnchorEl(null);
|
63
|
+
}
|
64
|
+
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
57
65
|
const updateAnchorEl = () => {
|
58
66
|
try {
|
59
67
|
const domSelection = window.getSelection();
|
@@ -31,6 +31,7 @@ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
|
|
31
31
|
import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
|
32
32
|
import DividerButton from "../Elements/Divider/DividerButton.js";
|
33
33
|
import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
|
34
|
+
import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
|
34
35
|
import { jsx as _jsx } from "react/jsx-runtime";
|
35
36
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
36
37
|
export const RenderToolbarIcon = props => {
|
@@ -133,6 +134,12 @@ export const RenderToolbarIcon = props => {
|
|
133
134
|
customProps: customProps,
|
134
135
|
icoBtnType: icoBtnType
|
135
136
|
}, element.id);
|
137
|
+
case "freegrid":
|
138
|
+
return /*#__PURE__*/_jsx(FreeGridButton, {
|
139
|
+
editor: editor,
|
140
|
+
customProps: customProps,
|
141
|
+
icoBtnType: icoBtnType
|
142
|
+
}, element.id);
|
136
143
|
case "newLine":
|
137
144
|
return /*#__PURE__*/_jsx(NewLineButton, {
|
138
145
|
editor: editor,
|