@flozy/editor 10.2.1 → 10.2.2
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 +17 -16
- package/dist/Editor/CommonEditor.js +120 -16
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +181 -168
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +24 -5
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/ColorPickerButton.js +38 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
- package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +6 -11
- package/dist/Editor/common/Select/index.js +2 -0
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +156 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +168 -62
- package/dist/Editor/helper/index.js +4 -0
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +361 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +8 -2
- package/dist/Editor/utils/helper.js +109 -19
- package/dist/Editor/utils/signature.js +2 -9
- package/package.json +4 -4
@@ -1,9 +1,10 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Autocomplete, TextField } from "@mui/material";
|
3
|
-
import {
|
3
|
+
import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import usePopupStyle from "../PopupTool/PopupToolStyle.js";
|
5
5
|
import { useEditorContext } from "../../hooks/useMouseMove.js";
|
6
|
-
import KeyboardArrowDownRoundedIcon from
|
6
|
+
import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
|
7
|
+
import { getValue } from "./Dropdown.js";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
const FontFamilyAutocomplete = ({
|
9
10
|
editor,
|
@@ -14,7 +15,7 @@ const FontFamilyAutocomplete = ({
|
|
14
15
|
val = "",
|
15
16
|
webFont = false
|
16
17
|
}) => {
|
17
|
-
const markValue =
|
18
|
+
const markValue = getValue(editor, format);
|
18
19
|
const value = !webFont ? markValue : val;
|
19
20
|
const changeMarkData = (event, newValue, format) => {
|
20
21
|
if (!webFont) {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import Icon from "../../common/Icon";
|
3
3
|
import Button from "../../common/Button";
|
4
|
-
import { toggleMark,
|
4
|
+
import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
const MarkButton = ({
|
7
7
|
editor,
|
@@ -13,7 +13,7 @@ const MarkButton = ({
|
|
13
13
|
translation
|
14
14
|
} = customProps;
|
15
15
|
return /*#__PURE__*/_jsx(Button, {
|
16
|
-
active:
|
16
|
+
active: isMarkBtnActive(editor, format),
|
17
17
|
format: format,
|
18
18
|
onMouseDown: e => {
|
19
19
|
e.preventDefault();
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark
|
4
|
-
import {
|
5
|
-
import { getBreakPointsValue } from "../../helper/theme.js";
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
4
|
+
import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
|
6
5
|
import useWindowResize from "../../hooks/useWindowResize.js";
|
7
6
|
import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
|
8
7
|
import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
|
@@ -15,11 +14,15 @@ const TextSize = ({
|
|
15
14
|
format,
|
16
15
|
fullWidth
|
17
16
|
}) => {
|
18
|
-
const [size] = useWindowResize();
|
19
|
-
const val = activeMark(editor, format);
|
20
|
-
const value = getBreakPointsValue(val, size?.device);
|
21
17
|
const [fontSize, setFontSize] = useState();
|
22
18
|
const timerRef = useRef();
|
19
|
+
const [size] = useWindowResize();
|
20
|
+
const val = activeMark(editor, format);
|
21
|
+
|
22
|
+
// const noFontSize =
|
23
|
+
// val === "normal" || (typeof val === "object" && !Object.keys(val)?.length);
|
24
|
+
|
25
|
+
const value = getTextSizeVal(editor);
|
23
26
|
useEffect(() => {
|
24
27
|
setFontSize(getSizeVal());
|
25
28
|
}, [value]);
|
@@ -55,13 +58,7 @@ const TextSize = ({
|
|
55
58
|
};
|
56
59
|
const getSizeVal = () => {
|
57
60
|
try {
|
58
|
-
|
59
|
-
Object.entries(headingMap).forEach(([format, value]) => {
|
60
|
-
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
61
|
-
size = value;
|
62
|
-
}
|
63
|
-
});
|
64
|
-
return parseInt(size);
|
61
|
+
return parseInt(value);
|
65
62
|
} catch (err) {
|
66
63
|
return "";
|
67
64
|
}
|
@@ -12,7 +12,8 @@ function MiniColorPicker(props) {
|
|
12
12
|
classes,
|
13
13
|
id,
|
14
14
|
editor,
|
15
|
-
customProps
|
15
|
+
customProps,
|
16
|
+
type
|
16
17
|
} = props;
|
17
18
|
const [openColorTool, setOpenColorTool] = useState(null);
|
18
19
|
const {
|
@@ -38,7 +39,8 @@ function MiniColorPicker(props) {
|
|
38
39
|
classes: classes,
|
39
40
|
forMiniTool: true,
|
40
41
|
openColorTool: openColorTool,
|
41
|
-
closeColorTool: () => setOpenColorTool(null)
|
42
|
+
closeColorTool: () => setOpenColorTool(null),
|
43
|
+
type: type
|
42
44
|
}, id)]
|
43
45
|
});
|
44
46
|
}
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import { useEffect, useRef, useState } from "react";
|
2
|
-
import { activeMark, addMarkData
|
2
|
+
import { activeMark, addMarkData } from "../../../utils/SlateUtilityFunctions";
|
3
3
|
import { Button, IconButton, Popover, TextField } from "@mui/material";
|
4
4
|
import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
|
-
import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
|
7
|
-
import { headingMap, sizeMap } from "../../../utils/font";
|
6
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../../helper/theme";
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
9
|
const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
|
@@ -19,7 +18,7 @@ function SelectFontSize({
|
|
19
18
|
const containerRef = useRef();
|
20
19
|
const [size] = useWindowResize();
|
21
20
|
const val = activeMark(editor, format);
|
22
|
-
const value =
|
21
|
+
const value = getTextSizeVal(editor);
|
23
22
|
const timerRef = useRef();
|
24
23
|
const updateMarkData = newVal => {
|
25
24
|
let upData = {
|
@@ -53,13 +52,7 @@ function SelectFontSize({
|
|
53
52
|
};
|
54
53
|
const getSizeVal = () => {
|
55
54
|
try {
|
56
|
-
|
57
|
-
Object.entries(headingMap).forEach(([format, value]) => {
|
58
|
-
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
59
|
-
size = value;
|
60
|
-
}
|
61
|
-
});
|
62
|
-
return isNaN(parseInt(size)) ? 14 : parseInt(size);
|
55
|
+
return parseInt(value);
|
63
56
|
} catch (err) {
|
64
57
|
return "";
|
65
58
|
}
|
@@ -97,8 +90,8 @@ function SelectFontSize({
|
|
97
90
|
anchorEl: anchorEl,
|
98
91
|
onClose: () => setAnchorEl(null),
|
99
92
|
anchorOrigin: {
|
100
|
-
vertical:
|
101
|
-
horizontal:
|
93
|
+
vertical: "bottom",
|
94
|
+
horizontal: "left"
|
102
95
|
},
|
103
96
|
sx: classes.customSelectPopoverWrapper,
|
104
97
|
children: fontSizeOptions.map((s, i) => {
|
@@ -2,8 +2,11 @@ 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 } from "../../../helper/theme";
|
5
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue, isTextCustomized as isCustomized, textThemeFields as themeFields } 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";
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
12
|
function Label({
|
@@ -18,26 +21,29 @@ function Label({
|
|
18
21
|
});
|
19
22
|
}
|
20
23
|
function DisplayHeaderLabel({
|
21
|
-
type
|
24
|
+
type,
|
25
|
+
isCustomized,
|
26
|
+
isPara = false
|
22
27
|
}) {
|
23
28
|
return /*#__PURE__*/_jsxs("div", {
|
24
|
-
children: ["H", /*#__PURE__*/_jsx("sub", {
|
29
|
+
children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
|
25
30
|
children: type
|
26
31
|
})]
|
27
32
|
});
|
28
33
|
}
|
29
|
-
function getTypographyOptions(translation) {
|
30
|
-
|
34
|
+
function getTypographyOptions(isCustomized, translation) {
|
35
|
+
const typographyOptions = [{
|
31
36
|
id: 11,
|
32
37
|
format: "headingOne",
|
33
38
|
type: "block",
|
34
39
|
title: /*#__PURE__*/_jsx(Label, {
|
35
40
|
label: "H1",
|
36
|
-
type: "
|
41
|
+
type: "Heading",
|
37
42
|
translation: translation
|
38
43
|
}),
|
39
44
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
40
|
-
type: 1
|
45
|
+
type: 1,
|
46
|
+
isCustomized: isCustomized
|
41
47
|
}),
|
42
48
|
group: "typography",
|
43
49
|
value: "headingOne"
|
@@ -47,11 +53,12 @@ function getTypographyOptions(translation) {
|
|
47
53
|
type: "block",
|
48
54
|
title: /*#__PURE__*/_jsx(Label, {
|
49
55
|
label: "H2",
|
50
|
-
type: "
|
56
|
+
type: "Heading",
|
51
57
|
translation: translation
|
52
58
|
}),
|
53
59
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
54
|
-
type: 2
|
60
|
+
type: 2,
|
61
|
+
isCustomized: isCustomized
|
55
62
|
}),
|
56
63
|
group: "typography",
|
57
64
|
value: "headingTwo"
|
@@ -61,63 +68,156 @@ function getTypographyOptions(translation) {
|
|
61
68
|
type: "block",
|
62
69
|
title: /*#__PURE__*/_jsx(Label, {
|
63
70
|
label: "H3",
|
64
|
-
type: "
|
71
|
+
type: "Heading",
|
65
72
|
translation: translation
|
66
73
|
}),
|
67
74
|
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
68
|
-
type: 3
|
75
|
+
type: 3,
|
76
|
+
isCustomized: isCustomized
|
69
77
|
}),
|
70
78
|
group: "typography",
|
71
79
|
value: "headingThree"
|
72
80
|
}, {
|
73
|
-
id:
|
74
|
-
format: "
|
75
|
-
type: "
|
81
|
+
id: 17,
|
82
|
+
format: "headingFour",
|
83
|
+
type: "block",
|
76
84
|
title: /*#__PURE__*/_jsx(Label, {
|
77
|
-
label: "
|
78
|
-
type: "
|
85
|
+
label: "H4",
|
86
|
+
type: "Heading",
|
79
87
|
translation: translation
|
80
88
|
}),
|
81
|
-
label:
|
89
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
90
|
+
type: 4,
|
91
|
+
isCustomized: isCustomized
|
92
|
+
}),
|
82
93
|
group: "typography",
|
83
|
-
value: "
|
94
|
+
value: "headingFour"
|
84
95
|
}, {
|
85
|
-
id:
|
86
|
-
format: "
|
87
|
-
type: "
|
96
|
+
id: 18,
|
97
|
+
format: "headingFive",
|
98
|
+
type: "block",
|
88
99
|
title: /*#__PURE__*/_jsx(Label, {
|
89
|
-
label: "
|
90
|
-
type: "
|
100
|
+
label: "H5",
|
101
|
+
type: "Heading",
|
91
102
|
translation: translation
|
92
103
|
}),
|
93
|
-
label:
|
104
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
105
|
+
type: 5,
|
106
|
+
isCustomized: isCustomized
|
107
|
+
}),
|
94
108
|
group: "typography",
|
95
|
-
value: "
|
109
|
+
value: "headingFive"
|
96
110
|
}, {
|
97
|
-
id:
|
98
|
-
format: "
|
99
|
-
type: "
|
111
|
+
id: 19,
|
112
|
+
format: "headingSix",
|
113
|
+
type: "block",
|
100
114
|
title: /*#__PURE__*/_jsx(Label, {
|
101
|
-
label: "
|
102
|
-
type: "
|
115
|
+
label: "H6",
|
116
|
+
type: "Heading",
|
103
117
|
translation: translation
|
104
118
|
}),
|
105
|
-
label:
|
119
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
120
|
+
type: 6,
|
121
|
+
isCustomized: isCustomized
|
122
|
+
}),
|
106
123
|
group: "typography",
|
107
|
-
value: "
|
108
|
-
}
|
124
|
+
value: "headingSix"
|
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;
|
109
204
|
}
|
110
205
|
function SelectTypography({
|
111
206
|
editor,
|
112
207
|
classes,
|
113
208
|
closeMainPopup,
|
209
|
+
type,
|
114
210
|
customProps
|
115
211
|
}) {
|
116
212
|
const [size] = useWindowResize();
|
213
|
+
const {
|
214
|
+
theme
|
215
|
+
} = useEditorTheme();
|
117
216
|
const {
|
118
217
|
translation
|
119
218
|
} = customProps;
|
120
|
-
const
|
219
|
+
const isTextCustomized = theme?.id ? isCustomized(editor) : false;
|
220
|
+
const typographyOptions = getTypographyOptions(isTextCustomized, translation);
|
121
221
|
const updateMarkData = newVal => {
|
122
222
|
const val = activeMark(editor, "fontSize");
|
123
223
|
let upData = {
|
@@ -139,7 +239,10 @@ function SelectTypography({
|
|
139
239
|
...upData
|
140
240
|
}
|
141
241
|
});
|
242
|
+
|
243
|
+
// closeMainPopup();
|
142
244
|
};
|
245
|
+
|
143
246
|
const selectedBlock = useMemo(() => {
|
144
247
|
return typographyOptions.find(t => {
|
145
248
|
if (t.type === "block") {
|
@@ -161,15 +264,13 @@ function SelectTypography({
|
|
161
264
|
});
|
162
265
|
}, [typographyOptions, activeMark, isBlockActive, editor]);
|
163
266
|
const onChange = (format, option) => {
|
164
|
-
// add/reset block elements
|
165
|
-
toggleBlock(editor, format);
|
166
267
|
if (option.type === "block") {
|
167
|
-
|
168
|
-
|
169
|
-
addMarkData(editor, {
|
170
|
-
format: "fontSize",
|
171
|
-
value: {}
|
268
|
+
themeFields.forEach(field => {
|
269
|
+
Editor.removeMark(editor, field);
|
172
270
|
});
|
271
|
+
|
272
|
+
// add/reset block elements
|
273
|
+
toggleBlock(editor, format);
|
173
274
|
} else if (option.type === "mark") {
|
174
275
|
const size = sizeMap[option.value] || "";
|
175
276
|
const [sizeInNumber] = size.split("px");
|
@@ -177,11 +278,35 @@ function SelectTypography({
|
|
177
278
|
}
|
178
279
|
closeMainPopup();
|
179
280
|
};
|
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
|
+
}
|
180
305
|
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
181
306
|
options: typographyOptions,
|
182
307
|
editor: editor,
|
183
308
|
onChange: onChange,
|
184
|
-
value:
|
309
|
+
value: typographyValue,
|
185
310
|
classes: classes
|
186
311
|
});
|
187
312
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
|
1
|
+
import { Fade, Grid, IconButton, Paper, Popper, useTheme } 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 { viewSlateSelection } from "../../../utils/helper";
|
17
|
+
import { getSelectedElementColor, 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,11 +35,12 @@ 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();
|
38
39
|
const removeFontStyles = ["superscript", "subscript"];
|
39
40
|
const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
|
40
41
|
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
41
42
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
42
|
-
const activeColor =
|
43
|
+
const activeColor = getSelectedElementColor(editor, textColorFormat, theme);
|
43
44
|
const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
|
44
45
|
return /*#__PURE__*/_jsx(Grid, {
|
45
46
|
container: true,
|
@@ -57,6 +58,7 @@ const MiniTextFormat = props => {
|
|
57
58
|
classes: classes,
|
58
59
|
editor: editor,
|
59
60
|
closeMainPopup: closeMainPopup,
|
61
|
+
type: "miniToolBar",
|
60
62
|
customProps: customProps
|
61
63
|
}), /*#__PURE__*/_jsx("div", {
|
62
64
|
className: "verticalLine"
|
@@ -92,7 +94,8 @@ const MiniTextFormat = props => {
|
|
92
94
|
activeColor: activeColor,
|
93
95
|
id: "11_cc",
|
94
96
|
editor: editor,
|
95
|
-
customProps: customProps
|
97
|
+
customProps: customProps,
|
98
|
+
type: "textColor"
|
96
99
|
}), /*#__PURE__*/_jsx(MiniColorPicker, {
|
97
100
|
format: textBgFormat,
|
98
101
|
classes: classes,
|