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