@flozy/editor 10.2.3 → 10.2.5
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 +24 -128
- 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 +2 -6
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +9 -25
- 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/MultiSelectType.js +6 -21
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Image.js +2 -3
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
- package/dist/Editor/Elements/Form/Form.js +168 -181
- package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
- package/dist/Editor/Elements/Form/FormField.js +6 -13
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -36
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +2 -3
- package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
- package/dist/Editor/Elements/Search/SearchButton.js +8 -9
- package/dist/Editor/Elements/Search/SearchList.js +7 -9
- 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/index.js +1 -6
- 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 +27 -100
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
- package/dist/Editor/common/ColorPickerButton.js +16 -38
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +15 -31
- package/dist/Editor/common/Icon.js +1 -31
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
- package/dist/Editor/common/LinkSettings/index.js +68 -84
- package/dist/Editor/common/LinkSettings/style.js +30 -245
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
- 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 +12 -147
- package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
- package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
- 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 +54 -48
- package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -143
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +11 -6
- package/dist/Editor/common/Select/index.js +0 -2
- package/dist/Editor/common/Shorthands/elements.js +11 -65
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -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/lineSpacing.js +6 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
- package/dist/Editor/common/Uploader.js +0 -8
- package/dist/Editor/common/iconListV2.js +6 -156
- package/dist/Editor/common/iconslist.js +0 -24
- package/dist/Editor/commonStyle.js +62 -168
- package/dist/Editor/helper/index.js +0 -4
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +5 -8
- 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 +45 -169
- 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/form.js +4 -4
- package/dist/Editor/utils/formfield.js +2 -8
- package/dist/Editor/utils/helper.js +19 -109
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
- package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
- package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- 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/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/SnackBar/index.js +0 -43
- 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 -361
- 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
@@ -1,58 +1,181 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { useEffect, useState } from "react";
|
1
|
+
import { MenuItem, Select, useTheme } from "@mui/material";
|
2
|
+
import { fontOptions } from "../utils/font";
|
3
|
+
import { toolbarGroups } from "../Toolbar/toolbarGroups";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
}
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
} catch (err) {
|
20
|
-
console.log(err);
|
21
|
-
}
|
22
|
-
setLoading(false);
|
23
|
-
};
|
6
|
+
const themes = [{
|
7
|
+
label: "Theme 1",
|
8
|
+
colors: ["#c90c1f", "#ff5d05"]
|
9
|
+
}, {
|
10
|
+
label: "Theme 2",
|
11
|
+
colors: ["#4c0be3", "#43f7ee"]
|
12
|
+
}, {
|
13
|
+
label: "Theme 3",
|
14
|
+
colors: ["#22f20f", "#fff705"]
|
15
|
+
}];
|
16
|
+
const allTools = toolbarGroups.flat();
|
17
|
+
function ThemeList(props) {
|
24
18
|
const {
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
19
|
+
selectedTheme,
|
20
|
+
setSelectedTheme
|
21
|
+
} = props;
|
22
|
+
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
23
|
+
const fontStyles = [{
|
24
|
+
text: "Bold",
|
25
|
+
value: "bold",
|
26
|
+
styleField: "fontWeight"
|
27
|
+
}, {
|
28
|
+
text: "Italic",
|
29
|
+
value: "italic",
|
30
|
+
styleField: "fontStyle"
|
31
|
+
}
|
32
|
+
// {
|
33
|
+
// text: "Underline",
|
34
|
+
// value: "underline",
|
35
|
+
// styleField: "textDecoration",
|
36
|
+
// },
|
37
|
+
// {
|
38
|
+
// text: "Line through",
|
39
|
+
// value: "line-through",
|
40
|
+
// styleField: "textDecoration",
|
41
|
+
// },
|
42
|
+
];
|
43
|
+
|
44
|
+
const theme = useTheme();
|
45
|
+
const colorVars = theme?.vars?.colors || {};
|
46
|
+
const handleTypographyTheme = (key, value, elementType) => {
|
47
|
+
setSelectedTheme(prev => {
|
48
|
+
const newValue = {
|
49
|
+
...prev,
|
50
|
+
typography: {
|
51
|
+
...(prev.typography || {}),
|
52
|
+
[elementType]: {
|
53
|
+
...(prev?.typography?.[elementType] || {}),
|
54
|
+
[key]: value
|
55
|
+
}
|
56
|
+
}
|
57
|
+
};
|
58
|
+
if (!value) {
|
59
|
+
delete newValue?.typography?.[elementType]?.[key];
|
60
|
+
}
|
61
|
+
return newValue;
|
62
|
+
});
|
36
63
|
};
|
37
|
-
return /*#__PURE__*/
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
64
|
+
return /*#__PURE__*/_jsxs("div", {
|
65
|
+
children: [themes.map((theme, i) => {
|
66
|
+
return /*#__PURE__*/_jsxs("button", {
|
67
|
+
style: {
|
68
|
+
margin: "10px"
|
69
|
+
},
|
70
|
+
onClick: () => setSelectedTheme(prev => ({
|
71
|
+
...prev,
|
72
|
+
colors: theme.colors
|
73
|
+
})),
|
74
|
+
children: [theme.label, /*#__PURE__*/_jsx("div", {
|
75
|
+
children: theme.colors.map((c, j) => {
|
76
|
+
return /*#__PURE__*/_jsx("div", {
|
77
|
+
style: {
|
78
|
+
width: "20px",
|
79
|
+
height: "20px",
|
80
|
+
background: c,
|
81
|
+
margin: "10px"
|
82
|
+
}
|
83
|
+
}, j);
|
84
|
+
})
|
85
|
+
})]
|
86
|
+
}, i);
|
87
|
+
}), /*#__PURE__*/_jsxs("div", {
|
88
|
+
children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
|
89
|
+
// value={""}
|
90
|
+
, {
|
91
|
+
label: "Font Family",
|
92
|
+
onChange: e => {
|
93
|
+
handleTypographyTheme("fontFamily", e.target.value, "h1");
|
94
|
+
},
|
95
|
+
children: fontOptions.map((font, i) => {
|
96
|
+
const {
|
97
|
+
text,
|
98
|
+
value
|
99
|
+
} = font;
|
100
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
101
|
+
value: value,
|
102
|
+
children: text
|
103
|
+
}, i);
|
104
|
+
})
|
105
|
+
}), "Font Weight", /*#__PURE__*/_jsx(Select
|
106
|
+
// value={""}
|
107
|
+
, {
|
108
|
+
label: "Font Weight",
|
109
|
+
onChange: e => {
|
110
|
+
handleTypographyTheme("fontWeight", e.target.value, "h1");
|
111
|
+
},
|
112
|
+
children: fontWeight.options.map((option, i) => {
|
113
|
+
const {
|
114
|
+
text,
|
115
|
+
value
|
116
|
+
} = option;
|
117
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
118
|
+
value: value,
|
119
|
+
children: text
|
120
|
+
}, i);
|
121
|
+
})
|
122
|
+
}), /*#__PURE__*/_jsx("input", {
|
123
|
+
type: "number",
|
124
|
+
placeholder: "font size",
|
125
|
+
onChange: e => {
|
126
|
+
handleTypographyTheme("fontSize", e.target.value, "h1");
|
127
|
+
}
|
128
|
+
}), /*#__PURE__*/_jsxs("div", {
|
129
|
+
children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
|
130
|
+
return /*#__PURE__*/_jsx("button", {
|
131
|
+
style: {
|
132
|
+
width: "20px",
|
133
|
+
height: "20px",
|
134
|
+
background: colorVar,
|
135
|
+
margin: "10px",
|
136
|
+
outline: "none"
|
137
|
+
},
|
138
|
+
onClick: () => handleTypographyTheme("color", colorVar, "h1")
|
139
|
+
}, i);
|
140
|
+
}), "normal color", /*#__PURE__*/_jsx("button", {
|
141
|
+
style: {
|
142
|
+
width: "20px",
|
143
|
+
height: "20px",
|
144
|
+
background: "#ff00e1",
|
145
|
+
margin: "10px",
|
146
|
+
outline: "none"
|
147
|
+
},
|
148
|
+
onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
|
149
|
+
})]
|
150
|
+
}), /*#__PURE__*/_jsxs("div", {
|
151
|
+
children: ["Font styles", fontStyles.map((option, i) => {
|
152
|
+
const styles = selectedTheme?.typography?.h1 || {};
|
153
|
+
const {
|
154
|
+
text,
|
155
|
+
value,
|
156
|
+
styleField
|
157
|
+
} = option;
|
158
|
+
return /*#__PURE__*/_jsxs("button", {
|
159
|
+
onClick: () => {
|
160
|
+
handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
|
161
|
+
},
|
162
|
+
children: [text, " ", styles[styleField] === value]
|
163
|
+
}, i);
|
164
|
+
})]
|
165
|
+
}), /*#__PURE__*/_jsx("input", {
|
166
|
+
type: "number",
|
167
|
+
placeholder: "Margin text Spacing",
|
168
|
+
onChange: e => {
|
169
|
+
handleTypographyTheme("letterSpacing", e.target.value, "h1");
|
170
|
+
}
|
171
|
+
}), /*#__PURE__*/_jsx("input", {
|
172
|
+
type: "number",
|
173
|
+
placeholder: "Line spacing",
|
174
|
+
onChange: e => {
|
175
|
+
handleTypographyTheme("lineHeight", e.target.value, "h1");
|
176
|
+
}
|
54
177
|
})]
|
55
|
-
})
|
178
|
+
})]
|
56
179
|
});
|
57
180
|
}
|
58
181
|
export default ThemeList;
|
@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
|
|
34
34
|
import CheckList from "../Elements/List/CheckList";
|
35
35
|
import { getTextColor, isEmptyTextNode } from "../helper";
|
36
36
|
import Attachments from "../Elements/Attachments/Attachments";
|
37
|
-
import {
|
37
|
+
import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
|
38
38
|
import Variables from "../Elements/Variables/Variable";
|
39
|
+
import insertNewLine from "./insertNewLine";
|
39
40
|
import Divider from "../Elements/Divider/Divider";
|
40
41
|
import { getBorderColor, getSlateDom } from "./helper";
|
41
42
|
import Code from "../Elements/EmbedScript/Code";
|
42
|
-
import { ReactEditor } from "slate-react";
|
43
43
|
import FreeGrid from "../Elements/FreeGrid/FreeGrid";
|
44
44
|
import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
|
45
45
|
import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
|
@@ -47,7 +47,7 @@ import DataView from "../Elements/DataView/DataView";
|
|
47
47
|
import ViewData from "../Elements/DataView/Layouts/ViewData";
|
48
48
|
import ColumnView from "../Elements/DataView/Layouts/ColumnView";
|
49
49
|
import SearchAttachment from "../Elements/Search/SearchAttachment";
|
50
|
-
import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
|
50
|
+
// import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
|
51
51
|
import { jsx as _jsx } from "react/jsx-runtime";
|
52
52
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
53
53
|
const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
|
@@ -56,17 +56,7 @@ const LIST_FORMAT_TYPE = {
|
|
56
56
|
orderedList: "list-item",
|
57
57
|
unorderedList: "list-item"
|
58
58
|
};
|
59
|
-
|
60
|
-
// const NEWLINESAFTER = [
|
61
|
-
// "headingOne",
|
62
|
-
// "headingTwo",
|
63
|
-
// "headingThree",
|
64
|
-
// "headingFour",
|
65
|
-
// "headingFive",
|
66
|
-
// "headingSix",
|
67
|
-
// ];
|
68
|
-
|
69
|
-
const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
59
|
+
const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
|
70
60
|
export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
71
61
|
const isActive = isBlockActive(editor, format);
|
72
62
|
const isList = list_types.includes(format);
|
@@ -99,9 +89,8 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
99
89
|
if (!selection) {
|
100
90
|
Transforms.insertText(editor, "");
|
101
91
|
}
|
102
|
-
const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
|
103
92
|
Transforms.setNodes(editor, {
|
104
|
-
type: isActive ?
|
93
|
+
type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
|
105
94
|
...attr
|
106
95
|
});
|
107
96
|
if (isList && !isActive) {
|
@@ -110,12 +99,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
110
99
|
children: []
|
111
100
|
});
|
112
101
|
}
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
// }
|
102
|
+
if (NEWLINESAFTER.indexOf(format) > -1) {
|
103
|
+
insertNewLine(editor);
|
104
|
+
}
|
117
105
|
};
|
118
|
-
|
119
106
|
export const addMarkData = (editor, data) => {
|
120
107
|
try {
|
121
108
|
Editor.addMark(editor, data.format, data.value);
|
@@ -124,14 +111,9 @@ export const addMarkData = (editor, data) => {
|
|
124
111
|
}
|
125
112
|
};
|
126
113
|
export const toggleMark = (editor, format) => {
|
127
|
-
const isActive =
|
114
|
+
const isActive = isMarkActive(editor, format);
|
128
115
|
if (isActive) {
|
129
|
-
|
130
|
-
if (isThemeSupportedMark) {
|
131
|
-
Editor.addMark(editor, format, false);
|
132
|
-
} else {
|
133
|
-
Editor.removeMark(editor, format);
|
134
|
-
}
|
116
|
+
Editor.removeMark(editor, format);
|
135
117
|
} else {
|
136
118
|
Editor.addMark(editor, format, true);
|
137
119
|
}
|
@@ -145,58 +127,6 @@ export const isMarkActive = (editor, format) => {
|
|
145
127
|
return null;
|
146
128
|
}
|
147
129
|
};
|
148
|
-
export const isMarkBtnActive = (editor, format) => {
|
149
|
-
switch (format) {
|
150
|
-
case "bold":
|
151
|
-
{
|
152
|
-
const style = getSelectedElementStyle("font-weight", editor);
|
153
|
-
return style === "700";
|
154
|
-
}
|
155
|
-
case "italic":
|
156
|
-
{
|
157
|
-
const style = getSelectedElementStyle("font-style", editor);
|
158
|
-
return style === format;
|
159
|
-
}
|
160
|
-
// case "underline": {
|
161
|
-
// const style = getSelectedElementStyle("text-decoration");
|
162
|
-
|
163
|
-
// return style?.includes(format);
|
164
|
-
// }
|
165
|
-
// case "strikethrough": {
|
166
|
-
// const style = getSelectedElementStyle("text-decoration");
|
167
|
-
|
168
|
-
// return style?.includes("line-through");
|
169
|
-
// }
|
170
|
-
default:
|
171
|
-
return isMarkActive(editor, format);
|
172
|
-
}
|
173
|
-
};
|
174
|
-
export const getSelectedElementStyle = (styleProperty, editor, format) => {
|
175
|
-
try {
|
176
|
-
if (!editor.selection) {
|
177
|
-
return "";
|
178
|
-
}
|
179
|
-
if (Range.isCollapsed(editor.selection)) {
|
180
|
-
return "";
|
181
|
-
}
|
182
|
-
if (format) {
|
183
|
-
const value = activeMark(editor, format, true);
|
184
|
-
if (value) {
|
185
|
-
return value;
|
186
|
-
}
|
187
|
-
}
|
188
|
-
const domRange = ReactEditor.toDOMRange(editor, editor.selection);
|
189
|
-
const selectedDomNode = domRange.commonAncestorContainer;
|
190
|
-
|
191
|
-
// If it's a text node, get its parent element
|
192
|
-
const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
|
193
|
-
if (selectedElement) {
|
194
|
-
return getElementProperty(selectedElement, styleProperty);
|
195
|
-
}
|
196
|
-
} catch (err) {
|
197
|
-
console.log(err);
|
198
|
-
}
|
199
|
-
};
|
200
130
|
export const isBlockActive = (editor, format) => {
|
201
131
|
const [match] = Editor.nodes(editor, {
|
202
132
|
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
|
@@ -222,7 +152,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
|
|
222
152
|
});
|
223
153
|
}
|
224
154
|
};
|
225
|
-
export const activeMark = (editor, format
|
155
|
+
export const activeMark = (editor, format) => {
|
226
156
|
const defaultMarkData = {
|
227
157
|
color: "#000000",
|
228
158
|
bgColor: "#FFFFFF",
|
@@ -232,7 +162,7 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
232
162
|
};
|
233
163
|
try {
|
234
164
|
const marks = Editor.marks(editor);
|
235
|
-
let defaultValue =
|
165
|
+
let defaultValue = defaultMarkData[format];
|
236
166
|
const {
|
237
167
|
selection
|
238
168
|
} = editor || {};
|
@@ -249,36 +179,8 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
249
179
|
return null;
|
250
180
|
}
|
251
181
|
};
|
252
|
-
|
253
|
-
// to avoid the styles, that automatically assign from themes
|
254
|
-
const getThemeMarkedLeaf = (leaf, children) => {
|
255
|
-
const {
|
256
|
-
italic,
|
257
|
-
bold
|
258
|
-
} = leaf || {};
|
259
|
-
const style = {};
|
260
|
-
if (italic === false) {
|
261
|
-
style.fontStyle = "normal";
|
262
|
-
}
|
263
|
-
if (bold === false) {
|
264
|
-
style.fontWeight = "normal";
|
265
|
-
}
|
266
|
-
if (Object.keys(style).length) {
|
267
|
-
children = /*#__PURE__*/_jsx(Box, {
|
268
|
-
component: "span",
|
269
|
-
sx: {
|
270
|
-
"& span": style
|
271
|
-
},
|
272
|
-
children: children
|
273
|
-
});
|
274
|
-
}
|
275
|
-
return children;
|
276
|
-
};
|
277
182
|
export const getMarked = (leaf, children, theme) => {
|
278
183
|
const className = leaf?.doublequote ? "doublequote" : "";
|
279
|
-
const lineH = leaf?.lineHeight;
|
280
|
-
const breakpoint = getDevice(window.innerWidth);
|
281
|
-
const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
282
184
|
if (leaf.highlight) {
|
283
185
|
children = /*#__PURE__*/_jsx("span", {
|
284
186
|
style: {
|
@@ -303,7 +205,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
303
205
|
children: children
|
304
206
|
});
|
305
207
|
}
|
306
|
-
children = getThemeMarkedLeaf(leaf, children);
|
307
208
|
if (leaf.strikethrough) {
|
308
209
|
children = /*#__PURE__*/_jsx("span", {
|
309
210
|
style: {
|
@@ -328,18 +229,9 @@ export const getMarked = (leaf, children, theme) => {
|
|
328
229
|
});
|
329
230
|
}
|
330
231
|
// cover under single span
|
331
|
-
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight ||
|
232
|
+
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
|
332
233
|
const family = leaf?.fontFamily;
|
333
234
|
const textStyles = getTextColor(leaf?.color);
|
334
|
-
const fontSize = {
|
335
|
-
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
336
|
-
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
337
|
-
};
|
338
|
-
const fontSizesImportant = {};
|
339
|
-
Object.entries(fontSize).forEach(([key, value]) => {
|
340
|
-
fontSizesImportant[key] = `${value} !important`;
|
341
|
-
});
|
342
|
-
const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
|
343
235
|
children = /*#__PURE__*/_jsx("span", {
|
344
236
|
style: {
|
345
237
|
background: leaf.bgColor
|
@@ -348,13 +240,12 @@ export const getMarked = (leaf, children, theme) => {
|
|
348
240
|
className: `${className} leaf-item`,
|
349
241
|
component: "span",
|
350
242
|
sx: {
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
},
|
357
|
-
...fontSizeWithBreakpoints,
|
243
|
+
...groupByBreakpoint({
|
244
|
+
fontSize: {
|
245
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
246
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
247
|
+
}
|
248
|
+
}, theme),
|
358
249
|
// ...wrapThemeBreakpoints(
|
359
250
|
// {
|
360
251
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -406,23 +297,12 @@ export const getBlock = props => {
|
|
406
297
|
const {
|
407
298
|
translation
|
408
299
|
} = customProps;
|
409
|
-
const commonHeadingProps = () => ({
|
410
|
-
...attributes,
|
411
|
-
...element.attr,
|
412
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
|
413
|
-
});
|
414
|
-
const commonParaProps = paraType => ({
|
415
|
-
...attributes,
|
416
|
-
...element.attr,
|
417
|
-
className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
|
418
|
-
});
|
419
|
-
const breakpoint = getDevice(window.innerWidth);
|
420
|
-
const lineH = element?.children[0]?.lineHeight;
|
421
|
-
const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
422
300
|
switch (element.type) {
|
423
301
|
case "headingOne":
|
424
302
|
return /*#__PURE__*/_jsxs("h1", {
|
425
|
-
...
|
303
|
+
...attributes,
|
304
|
+
...element.attr,
|
305
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
426
306
|
placeholder: translation("Heading 1"),
|
427
307
|
children: [children, /*#__PURE__*/_jsx("span", {
|
428
308
|
contentEditable: false
|
@@ -430,7 +310,9 @@ export const getBlock = props => {
|
|
430
310
|
});
|
431
311
|
case "headingTwo":
|
432
312
|
return /*#__PURE__*/_jsxs("h2", {
|
433
|
-
...
|
313
|
+
...attributes,
|
314
|
+
...element.attr,
|
315
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
434
316
|
placeholder: translation("Heading 2"),
|
435
317
|
children: [children, /*#__PURE__*/_jsx("span", {
|
436
318
|
contentEditable: false
|
@@ -438,7 +320,9 @@ export const getBlock = props => {
|
|
438
320
|
});
|
439
321
|
case "headingThree":
|
440
322
|
return /*#__PURE__*/_jsxs("h3", {
|
441
|
-
...
|
323
|
+
...attributes,
|
324
|
+
...element.attr,
|
325
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
442
326
|
placeholder: translation("Heading 3"),
|
443
327
|
children: [children, /*#__PURE__*/_jsx("span", {
|
444
328
|
contentEditable: false
|
@@ -446,7 +330,9 @@ export const getBlock = props => {
|
|
446
330
|
});
|
447
331
|
case "headingFour":
|
448
332
|
return /*#__PURE__*/_jsxs("h4", {
|
449
|
-
...
|
333
|
+
...attributes,
|
334
|
+
...element.attr,
|
335
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
450
336
|
placeholder: translation("Heading 4"),
|
451
337
|
children: [children, /*#__PURE__*/_jsx("span", {
|
452
338
|
contentEditable: false
|
@@ -454,7 +340,9 @@ export const getBlock = props => {
|
|
454
340
|
});
|
455
341
|
case "headingFive":
|
456
342
|
return /*#__PURE__*/_jsxs("h5", {
|
457
|
-
...
|
343
|
+
...attributes,
|
344
|
+
...element.attr,
|
345
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
458
346
|
placeholder: translation("Heading 5"),
|
459
347
|
children: [children, /*#__PURE__*/_jsx("span", {
|
460
348
|
contentEditable: false
|
@@ -462,30 +350,14 @@ export const getBlock = props => {
|
|
462
350
|
});
|
463
351
|
case "headingSix":
|
464
352
|
return /*#__PURE__*/_jsxs("h6", {
|
465
|
-
...
|
353
|
+
...attributes,
|
354
|
+
...element.attr,
|
355
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
466
356
|
placeholder: translation("Heading 6"),
|
467
357
|
children: [children, /*#__PURE__*/_jsx("span", {
|
468
358
|
contentEditable: false
|
469
359
|
})]
|
470
360
|
});
|
471
|
-
case "paragraphOne":
|
472
|
-
return /*#__PURE__*/_jsx("p", {
|
473
|
-
...commonParaProps("para1"),
|
474
|
-
placeholder: "Paragraph 1",
|
475
|
-
children: children
|
476
|
-
});
|
477
|
-
case "paragraphTwo":
|
478
|
-
return /*#__PURE__*/_jsx("p", {
|
479
|
-
...commonParaProps("para2"),
|
480
|
-
placeholder: "Paragraph 2",
|
481
|
-
children: children
|
482
|
-
});
|
483
|
-
case "paragraphThree":
|
484
|
-
return /*#__PURE__*/_jsx("p", {
|
485
|
-
...commonParaProps("para3"),
|
486
|
-
placeholder: "Paragraph 3",
|
487
|
-
children: children
|
488
|
-
});
|
489
361
|
case "blockquote":
|
490
362
|
return /*#__PURE__*/_jsx("blockquote", {
|
491
363
|
...attributes,
|
@@ -499,7 +371,7 @@ export const getBlock = props => {
|
|
499
371
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
500
372
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
501
373
|
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
|
502
|
-
lineHeight:
|
374
|
+
lineHeight: 1.43
|
503
375
|
},
|
504
376
|
children: children
|
505
377
|
});
|
@@ -553,13 +425,15 @@ export const getBlock = props => {
|
|
553
425
|
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
554
426
|
placeholder: translation("List"),
|
555
427
|
style: {
|
556
|
-
color: firstChildren?.color
|
557
|
-
lineHeight: `${selectedLineHeight}`
|
428
|
+
color: firstChildren?.color
|
558
429
|
},
|
559
430
|
children: children
|
560
431
|
});
|
561
432
|
case "orderedList":
|
562
433
|
return /*#__PURE__*/_jsx("ol", {
|
434
|
+
style: {
|
435
|
+
lineHeight: 1.43
|
436
|
+
},
|
563
437
|
className: "listItemMargin",
|
564
438
|
type: "1",
|
565
439
|
...attributes,
|
@@ -567,6 +441,9 @@ export const getBlock = props => {
|
|
567
441
|
});
|
568
442
|
case "unorderedList":
|
569
443
|
return /*#__PURE__*/_jsx("ul", {
|
444
|
+
style: {
|
445
|
+
lineHeight: 1.43
|
446
|
+
},
|
570
447
|
className: "listItemMargin",
|
571
448
|
...attributes,
|
572
449
|
children: children
|
@@ -574,7 +451,6 @@ export const getBlock = props => {
|
|
574
451
|
case "check-list-item":
|
575
452
|
return /*#__PURE__*/_jsx(CheckList, {
|
576
453
|
...props,
|
577
|
-
selectedLineHeight: selectedLineHeight,
|
578
454
|
isEmpty: isEmpty
|
579
455
|
});
|
580
456
|
case "link":
|
@@ -1,13 +1,6 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
3
|
import { getSelectedText } from "./helper";
|
4
|
-
import { isMobileWindow } from "../helper";
|
5
|
-
const focusAccordion = (editor, upPath) => {
|
6
|
-
Transforms.select(editor, {
|
7
|
-
path: upPath,
|
8
|
-
offset: 0
|
9
|
-
});
|
10
|
-
};
|
11
4
|
export const insertAccordion = (editor, path) => {
|
12
5
|
try {
|
13
6
|
const selectedText = getSelectedText(editor);
|
@@ -43,14 +36,11 @@ export const insertAccordion = (editor, path) => {
|
|
43
36
|
// get title index
|
44
37
|
const summaryIndex = upPath.length - 3;
|
45
38
|
upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
|
46
|
-
|
47
39
|
// select accordion title by default
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
}
|
52
|
-
focusAccordion(editor, upPath);
|
53
|
-
}
|
40
|
+
Transforms.select(editor, {
|
41
|
+
path: upPath,
|
42
|
+
offset: 0
|
43
|
+
});
|
54
44
|
insertNewLine(editor);
|
55
45
|
} catch (err) {
|
56
46
|
console.log(err);
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Path, Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
|
+
import { windowVar } from "./helper";
|
3
4
|
import { getCurrentElementText } from "../plugins/withHTML";
|
4
5
|
export const insertButton = editor => {
|
5
6
|
const button = {
|
@@ -10,7 +11,22 @@ export const insertButton = editor => {
|
|
10
11
|
buttonLink: {
|
11
12
|
linkType: "webAddress"
|
12
13
|
},
|
13
|
-
iconPosition: "start"
|
14
|
+
iconPosition: "start",
|
15
|
+
bgColor: "#2563EB",
|
16
|
+
textColor: "#FFF",
|
17
|
+
borderRadius: {
|
18
|
+
topLeft: 30,
|
19
|
+
topRight: 30,
|
20
|
+
bottomLeft: 30,
|
21
|
+
bottomRight: 30
|
22
|
+
},
|
23
|
+
bannerSpacing: {
|
24
|
+
left: 16,
|
25
|
+
top: 8,
|
26
|
+
right: 16,
|
27
|
+
bottom: 8
|
28
|
+
},
|
29
|
+
...(windowVar.lastButtonProps || {})
|
14
30
|
};
|
15
31
|
const hasText = getCurrentElementText(editor);
|
16
32
|
const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;
|