@flozy/editor 10.6.8 → 10.7.0
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 +13 -116
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +11 -31
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/AI/Styles.js +0 -1
- package/dist/Editor/Elements/Accordion/Accordion.js +17 -25
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +7 -23
- 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/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/FormField.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -9
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +3 -3
- 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 -9
- 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/SelectList.js +2 -4
- 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 +9 -69
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +2 -5
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -38
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -6
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- 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/SwitchViewport/SwitchViewport.js +2 -11
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +18 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -45
- package/dist/Editor/common/RnD/VirtualElement/helper.js +130 -320
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
- package/dist/Editor/common/RnD/index.js +11 -42
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +64 -107
- package/dist/Editor/helper/index.js +2 -7
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- 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 +24 -229
- package/dist/Editor/utils/accordion.js +34 -62
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +21 -97
- package/dist/Editor/utils/insertAppHeader.js +4 -8
- package/package.json +4 -4
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/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/StyleBuilder/fieldTypes/embedUpload.js +0 -115
- package/dist/Editor/helper/textIndeces.js +0 -58
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -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;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Editor, Transforms, Element as SlateElement, Range
|
1
|
+
import { Editor, Transforms, Element as SlateElement, Range } from "slate";
|
2
2
|
import { Box } from "@mui/material";
|
3
3
|
import { sizeMap } from "./font";
|
4
4
|
import Link from "../Elements/Link/Link";
|
@@ -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 { getBreakpointLineSpacing, getBreakPointsValue, getDevice,
|
37
|
+
import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, 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,70 +47,17 @@ 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
|
const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
|
53
|
-
const list_types = ["orderedList", "unorderedList"
|
53
|
+
const list_types = ["orderedList", "unorderedList"];
|
54
54
|
const LIST_FORMAT_TYPE = {
|
55
55
|
orderedList: "list-item",
|
56
56
|
unorderedList: "list-item"
|
57
57
|
};
|
58
|
-
|
59
|
-
// const NEWLINESAFTER = [
|
60
|
-
// "headingOne",
|
61
|
-
// "headingTwo",
|
62
|
-
// "headingThree",
|
63
|
-
// "headingFour",
|
64
|
-
// "headingFive",
|
65
|
-
// "headingSix",
|
66
|
-
// ];
|
67
|
-
|
68
|
-
const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
69
|
-
const convertAccordionToListItem = (editor, format) => {
|
70
|
-
const accordionLists = Array.from(Editor.nodes(editor, {
|
71
|
-
match: n => {
|
72
|
-
let accordionList = false;
|
73
|
-
if (n.type === "accordion") {
|
74
|
-
const [summary] = n.children;
|
75
|
-
accordionList = [format, "paragraph"].includes(summary.children?.[0]?.type);
|
76
|
-
}
|
77
|
-
return accordionList;
|
78
|
-
}
|
79
|
-
}));
|
80
|
-
accordionLists?.forEach(accordionList => {
|
81
|
-
const [node, path] = accordionList;
|
82
|
-
const [summary, details] = node.children;
|
83
|
-
const listItem = {
|
84
|
-
...(summary.children[0] || {})
|
85
|
-
};
|
86
|
-
const isPara = listItem.type === "paragraph";
|
87
|
-
if (isPara) {
|
88
|
-
listItem.type = "list-item";
|
89
|
-
}
|
90
|
-
|
91
|
-
// Replace the accordion with the format
|
92
|
-
Transforms.removeNodes(editor, {
|
93
|
-
at: path
|
94
|
-
});
|
95
|
-
Transforms.insertNodes(editor, listItem, {
|
96
|
-
at: path
|
97
|
-
});
|
98
|
-
if (isPara) {
|
99
|
-
Transforms.wrapNodes(editor, {
|
100
|
-
type: format,
|
101
|
-
children: []
|
102
|
-
}, {
|
103
|
-
at: path
|
104
|
-
});
|
105
|
-
}
|
106
|
-
const nextPath = Path.next(path);
|
107
|
-
Transforms.insertNodes(editor, details.children, {
|
108
|
-
at: nextPath
|
109
|
-
});
|
110
|
-
});
|
111
|
-
};
|
58
|
+
const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
|
112
59
|
export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
113
|
-
|
60
|
+
const isActive = isBlockActive(editor, format);
|
114
61
|
const isList = list_types.includes(format);
|
115
62
|
const isIndent = alignment.includes(format);
|
116
63
|
const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
|
@@ -132,33 +79,17 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
132
79
|
});
|
133
80
|
return;
|
134
81
|
}
|
135
|
-
|
136
|
-
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) &&
|
137
|
-
|
82
|
+
Transforms.unwrapNodes(editor, {
|
83
|
+
match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
|
84
|
+
split: true
|
138
85
|
});
|
139
86
|
|
140
|
-
if (match) {
|
141
|
-
const [matchNode, matchPath] = match;
|
142
|
-
if (matchNode.type !== "accordion-details") {
|
143
|
-
Transforms.unwrapNodes(editor, {
|
144
|
-
match: (n, n2) => {
|
145
|
-
const isList = !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type);
|
146
|
-
return isList && n2.toString() === matchPath.toString();
|
147
|
-
},
|
148
|
-
split: true
|
149
|
-
});
|
150
|
-
} else {
|
151
|
-
isActive = false;
|
152
|
-
}
|
153
|
-
}
|
154
|
-
|
155
87
|
// inserting blocks from "/"" commands remove searched word
|
156
88
|
if (!selection) {
|
157
89
|
Transforms.insertText(editor, "");
|
158
90
|
}
|
159
|
-
const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
|
160
91
|
Transforms.setNodes(editor, {
|
161
|
-
type: isActive ?
|
92
|
+
type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
|
162
93
|
...attr
|
163
94
|
});
|
164
95
|
if (isList && !isActive) {
|
@@ -167,12 +98,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
167
98
|
children: []
|
168
99
|
});
|
169
100
|
}
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
// }
|
174
|
-
|
175
|
-
convertAccordionToListItem(editor, format);
|
101
|
+
if (NEWLINESAFTER.indexOf(format) > -1) {
|
102
|
+
insertNewLine(editor);
|
103
|
+
}
|
176
104
|
};
|
177
105
|
export const addMarkData = (editor, data) => {
|
178
106
|
try {
|
@@ -182,14 +110,9 @@ export const addMarkData = (editor, data) => {
|
|
182
110
|
}
|
183
111
|
};
|
184
112
|
export const toggleMark = (editor, format) => {
|
185
|
-
const isActive =
|
113
|
+
const isActive = isMarkActive(editor, format);
|
186
114
|
if (isActive) {
|
187
|
-
|
188
|
-
if (isThemeSupportedMark) {
|
189
|
-
Editor.addMark(editor, format, false);
|
190
|
-
} else {
|
191
|
-
Editor.removeMark(editor, format);
|
192
|
-
}
|
115
|
+
Editor.removeMark(editor, format);
|
193
116
|
} else {
|
194
117
|
Editor.addMark(editor, format, true);
|
195
118
|
}
|
@@ -203,76 +126,12 @@ export const isMarkActive = (editor, format) => {
|
|
203
126
|
return null;
|
204
127
|
}
|
205
128
|
};
|
206
|
-
export const isMarkBtnActive = (editor, format) => {
|
207
|
-
switch (format) {
|
208
|
-
case "bold":
|
209
|
-
{
|
210
|
-
const style = getSelectedElementStyle("font-weight", editor);
|
211
|
-
return style === "700";
|
212
|
-
}
|
213
|
-
case "italic":
|
214
|
-
{
|
215
|
-
const style = getSelectedElementStyle("font-style", editor);
|
216
|
-
return style === format;
|
217
|
-
}
|
218
|
-
// case "underline": {
|
219
|
-
// const style = getSelectedElementStyle("text-decoration");
|
220
|
-
|
221
|
-
// return style?.includes(format);
|
222
|
-
// }
|
223
|
-
// case "strikethrough": {
|
224
|
-
// const style = getSelectedElementStyle("text-decoration");
|
225
|
-
|
226
|
-
// return style?.includes("line-through");
|
227
|
-
// }
|
228
|
-
default:
|
229
|
-
return isMarkActive(editor, format);
|
230
|
-
}
|
231
|
-
};
|
232
|
-
export const getSelectedElementStyle = (styleProperty, editor, format) => {
|
233
|
-
try {
|
234
|
-
if (!editor.selection) {
|
235
|
-
return "";
|
236
|
-
}
|
237
|
-
if (Range.isCollapsed(editor.selection)) {
|
238
|
-
return "";
|
239
|
-
}
|
240
|
-
if (format) {
|
241
|
-
const value = activeMark(editor, format, true);
|
242
|
-
if (value) {
|
243
|
-
return value;
|
244
|
-
}
|
245
|
-
}
|
246
|
-
const domRange = ReactEditor.toDOMRange(editor, editor.selection);
|
247
|
-
const selectedDomNode = domRange.commonAncestorContainer;
|
248
|
-
|
249
|
-
// If it's a text node, get its parent element
|
250
|
-
const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
|
251
|
-
if (selectedElement) {
|
252
|
-
return getElementProperty(selectedElement, styleProperty);
|
253
|
-
}
|
254
|
-
} catch (err) {
|
255
|
-
console.log(err);
|
256
|
-
}
|
257
|
-
};
|
258
129
|
export const isBlockActive = (editor, format) => {
|
259
130
|
const [match] = Editor.nodes(editor, {
|
260
131
|
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
|
261
132
|
});
|
262
133
|
return !!match;
|
263
134
|
};
|
264
|
-
export const isListActive = editor => {
|
265
|
-
const list_types = ["orderedList", "unorderedList", "check-list-item", "accordion"];
|
266
|
-
const [match] = Editor.nodes(editor, {
|
267
|
-
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
|
268
|
-
mode: "lowest" // To ensure it's the closest parent
|
269
|
-
});
|
270
|
-
|
271
|
-
if (match) {
|
272
|
-
const [matchNode] = match;
|
273
|
-
return matchNode.type;
|
274
|
-
}
|
275
|
-
};
|
276
135
|
export const getBlockActive = (editor, format) => {
|
277
136
|
const [match] = Editor.nodes(editor, {
|
278
137
|
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
|
@@ -292,7 +151,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
|
|
292
151
|
});
|
293
152
|
}
|
294
153
|
};
|
295
|
-
export const activeMark = (editor, format
|
154
|
+
export const activeMark = (editor, format) => {
|
296
155
|
const defaultMarkData = {
|
297
156
|
color: "#000000",
|
298
157
|
bgColor: "#FFFFFF",
|
@@ -302,7 +161,7 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
302
161
|
};
|
303
162
|
try {
|
304
163
|
const marks = Editor.marks(editor);
|
305
|
-
let defaultValue =
|
164
|
+
let defaultValue = defaultMarkData[format];
|
306
165
|
const {
|
307
166
|
selection
|
308
167
|
} = editor || {};
|
@@ -319,31 +178,6 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
319
178
|
return null;
|
320
179
|
}
|
321
180
|
};
|
322
|
-
|
323
|
-
// to avoid the styles, that automatically assign from themes
|
324
|
-
const getThemeMarkedLeaf = (leaf, children) => {
|
325
|
-
const {
|
326
|
-
italic,
|
327
|
-
bold
|
328
|
-
} = leaf || {};
|
329
|
-
const style = {};
|
330
|
-
if (italic === false) {
|
331
|
-
style.fontStyle = "normal";
|
332
|
-
}
|
333
|
-
if (bold === false) {
|
334
|
-
style.fontWeight = "normal";
|
335
|
-
}
|
336
|
-
if (Object.keys(style).length) {
|
337
|
-
children = /*#__PURE__*/_jsx(Box, {
|
338
|
-
component: "span",
|
339
|
-
sx: {
|
340
|
-
"& span": style
|
341
|
-
},
|
342
|
-
children: children
|
343
|
-
});
|
344
|
-
}
|
345
|
-
return children;
|
346
|
-
};
|
347
181
|
export const getMarked = (leaf, children, theme) => {
|
348
182
|
const className = leaf?.doublequote ? "doublequote" : "";
|
349
183
|
const lineH = leaf?.lineHeight;
|
@@ -373,7 +207,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
373
207
|
children: children
|
374
208
|
});
|
375
209
|
}
|
376
|
-
children = getThemeMarkedLeaf(leaf, children);
|
377
210
|
if (leaf.strikethrough) {
|
378
211
|
children = /*#__PURE__*/_jsx("span", {
|
379
212
|
style: {
|
@@ -401,15 +234,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
401
234
|
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
|
402
235
|
const family = leaf?.fontFamily;
|
403
236
|
const textStyles = getTextColor(leaf?.color);
|
404
|
-
const fontSize = {
|
405
|
-
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
406
|
-
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
407
|
-
};
|
408
|
-
const fontSizesImportant = {};
|
409
|
-
Object.entries(fontSize).forEach(([key, value]) => {
|
410
|
-
fontSizesImportant[key] = `${value} !important`;
|
411
|
-
});
|
412
|
-
const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
|
413
237
|
children = /*#__PURE__*/_jsx("span", {
|
414
238
|
style: {
|
415
239
|
background: leaf.bgColor
|
@@ -418,13 +242,12 @@ export const getMarked = (leaf, children, theme) => {
|
|
418
242
|
className: `${className} leaf-item`,
|
419
243
|
component: "span",
|
420
244
|
sx: {
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
},
|
427
|
-
...fontSizeWithBreakpoints,
|
245
|
+
...groupByBreakpoint({
|
246
|
+
fontSize: {
|
247
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
248
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
249
|
+
}
|
250
|
+
}, theme),
|
428
251
|
// ...wrapThemeBreakpoints(
|
429
252
|
// {
|
430
253
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -476,16 +299,6 @@ export const getBlock = props => {
|
|
476
299
|
const {
|
477
300
|
translation
|
478
301
|
} = customProps;
|
479
|
-
const commonHeadingProps = () => ({
|
480
|
-
...attributes,
|
481
|
-
...element.attr,
|
482
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
|
483
|
-
});
|
484
|
-
const commonParaProps = paraType => ({
|
485
|
-
...attributes,
|
486
|
-
...element.attr,
|
487
|
-
className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
|
488
|
-
});
|
489
302
|
const breakpoint = getDevice(window.innerWidth);
|
490
303
|
const lineH = element?.children[0]?.lineHeight;
|
491
304
|
const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
@@ -538,24 +351,6 @@ export const getBlock = props => {
|
|
538
351
|
placeholder: translation("Heading 6"),
|
539
352
|
children: children
|
540
353
|
});
|
541
|
-
case "paragraphOne":
|
542
|
-
return /*#__PURE__*/_jsx("p", {
|
543
|
-
...commonParaProps("para1"),
|
544
|
-
placeholder: "Paragraph 1",
|
545
|
-
children: children
|
546
|
-
});
|
547
|
-
case "paragraphTwo":
|
548
|
-
return /*#__PURE__*/_jsx("p", {
|
549
|
-
...commonParaProps("para2"),
|
550
|
-
placeholder: "Paragraph 2",
|
551
|
-
children: children
|
552
|
-
});
|
553
|
-
case "paragraphThree":
|
554
|
-
return /*#__PURE__*/_jsx("p", {
|
555
|
-
...commonParaProps("para3"),
|
556
|
-
placeholder: "Paragraph 3",
|
557
|
-
children: children
|
558
|
-
});
|
559
354
|
case "blockquote":
|
560
355
|
return /*#__PURE__*/_jsx("blockquote", {
|
561
356
|
...attributes,
|