@flozy/editor 10.3.0 → 10.3.1
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 +14 -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 +7 -30
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
- package/dist/Editor/Elements/Button/EditorButton.js +9 -27
- 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/Components/MultiSelect.js +28 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -1
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +2 -3
- 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 -14
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- 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/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 +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -41
- 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 +65 -45
- package/dist/Editor/common/LinkSettings/index.js +26 -13
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- 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 +1 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
- 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 +19 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
- package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +11 -25
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -30
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
- 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/textOptions.js +7 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconListV2.js +0 -76
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +61 -116
- package/dist/Editor/helper/index.js +0 -4
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- 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 +36 -158
- 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/helper.js +30 -143
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- 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/ThemeIcons.js +0 -293
- package/dist/Editor/common/Checkbox/index.js +0 -46
- package/dist/Editor/common/Checkbox/styles.js +0 -45
- 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/RadioGroup/index.js +0 -48
- package/dist/Editor/common/RadioGroup/styles.js +0 -29
- 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
@@ -190,17 +190,16 @@ export const TableProvider = ({
|
|
190
190
|
// selectFirstCell(tablePath, editor, updateTableSelection);
|
191
191
|
// }, []);
|
192
192
|
|
193
|
-
const onClickAway = () => {
|
194
|
-
setTableSelection(getDefaultTableSelection());
|
195
|
-
setHoverPath(null);
|
196
|
-
};
|
197
193
|
return /*#__PURE__*/_jsx(TableContext.Provider, {
|
198
194
|
value: values,
|
199
195
|
children: /*#__PURE__*/_jsxs(DndContext, {
|
200
196
|
sensors: sensors,
|
201
197
|
onDragEnd: data => handleDragEnd(data, editor, resetAll),
|
202
198
|
children: [/*#__PURE__*/_jsx(ClickAwayListener, {
|
203
|
-
onClickAway:
|
199
|
+
onClickAway: () => {
|
200
|
+
setTableSelection(getDefaultTableSelection());
|
201
|
+
setHoverPath(null);
|
202
|
+
},
|
204
203
|
children: /*#__PURE__*/_jsx("div", {
|
205
204
|
children: children
|
206
205
|
})
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Transforms, Path, Node } from "slate";
|
2
|
-
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "
|
2
|
+
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
|
3
3
|
const BlockTypes = ["grid"];
|
4
4
|
const withEmbeds = editor => {
|
5
5
|
const {
|
@@ -30,8 +30,6 @@ const parseCopiedHTML = html => {
|
|
30
30
|
|
31
31
|
// claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
|
32
32
|
parsed.querySelectorAll("li").forEach(li => {
|
33
|
-
li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
|
34
|
-
|
35
33
|
// Check if the parent of <li> is not a <ul> or <ol>
|
36
34
|
if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
|
37
35
|
// Create a <ul> element
|
@@ -57,7 +55,7 @@ const loopChildren = (children = [], defaultInsert) => {
|
|
57
55
|
}
|
58
56
|
return defaultInsert;
|
59
57
|
};
|
60
|
-
|
58
|
+
const getCurrentElement = editor => {
|
61
59
|
try {
|
62
60
|
if (editor.selection) {
|
63
61
|
return Node.parent(editor, editor?.selection?.anchor?.path);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Editor, Range, Point, Element, Transforms, Node } from "slate";
|
2
2
|
import { TableUtil, createTableCell } from "../utils/table";
|
3
|
-
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"
|
3
|
+
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
|
4
4
|
const withTable = editor => {
|
5
5
|
const {
|
6
6
|
deleteBackward,
|
@@ -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 { 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,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,31 +179,6 @@ 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
184
|
const lineH = leaf?.lineHeight;
|
@@ -303,7 +208,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
303
208
|
children: children
|
304
209
|
});
|
305
210
|
}
|
306
|
-
children = getThemeMarkedLeaf(leaf, children);
|
307
211
|
if (leaf.strikethrough) {
|
308
212
|
children = /*#__PURE__*/_jsx("span", {
|
309
213
|
style: {
|
@@ -331,15 +235,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
331
235
|
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
|
332
236
|
const family = leaf?.fontFamily;
|
333
237
|
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
238
|
children = /*#__PURE__*/_jsx("span", {
|
344
239
|
style: {
|
345
240
|
background: leaf.bgColor
|
@@ -348,13 +243,12 @@ export const getMarked = (leaf, children, theme) => {
|
|
348
243
|
className: `${className} leaf-item`,
|
349
244
|
component: "span",
|
350
245
|
sx: {
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
},
|
357
|
-
...fontSizeWithBreakpoints,
|
246
|
+
...groupByBreakpoint({
|
247
|
+
fontSize: {
|
248
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
249
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
250
|
+
}
|
251
|
+
}, theme),
|
358
252
|
// ...wrapThemeBreakpoints(
|
359
253
|
// {
|
360
254
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -406,23 +300,15 @@ export const getBlock = props => {
|
|
406
300
|
const {
|
407
301
|
translation
|
408
302
|
} = 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
303
|
const breakpoint = getDevice(window.innerWidth);
|
420
304
|
const lineH = element?.children[0]?.lineHeight;
|
421
305
|
const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
422
306
|
switch (element.type) {
|
423
307
|
case "headingOne":
|
424
308
|
return /*#__PURE__*/_jsxs("h1", {
|
425
|
-
...
|
309
|
+
...attributes,
|
310
|
+
...element.attr,
|
311
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
426
312
|
placeholder: translation("Heading 1"),
|
427
313
|
children: [children, /*#__PURE__*/_jsx("span", {
|
428
314
|
contentEditable: false
|
@@ -430,7 +316,9 @@ export const getBlock = props => {
|
|
430
316
|
});
|
431
317
|
case "headingTwo":
|
432
318
|
return /*#__PURE__*/_jsxs("h2", {
|
433
|
-
...
|
319
|
+
...attributes,
|
320
|
+
...element.attr,
|
321
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
434
322
|
placeholder: translation("Heading 2"),
|
435
323
|
children: [children, /*#__PURE__*/_jsx("span", {
|
436
324
|
contentEditable: false
|
@@ -438,7 +326,9 @@ export const getBlock = props => {
|
|
438
326
|
});
|
439
327
|
case "headingThree":
|
440
328
|
return /*#__PURE__*/_jsxs("h3", {
|
441
|
-
...
|
329
|
+
...attributes,
|
330
|
+
...element.attr,
|
331
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
442
332
|
placeholder: translation("Heading 3"),
|
443
333
|
children: [children, /*#__PURE__*/_jsx("span", {
|
444
334
|
contentEditable: false
|
@@ -446,7 +336,9 @@ export const getBlock = props => {
|
|
446
336
|
});
|
447
337
|
case "headingFour":
|
448
338
|
return /*#__PURE__*/_jsxs("h4", {
|
449
|
-
...
|
339
|
+
...attributes,
|
340
|
+
...element.attr,
|
341
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
450
342
|
placeholder: translation("Heading 4"),
|
451
343
|
children: [children, /*#__PURE__*/_jsx("span", {
|
452
344
|
contentEditable: false
|
@@ -454,7 +346,9 @@ export const getBlock = props => {
|
|
454
346
|
});
|
455
347
|
case "headingFive":
|
456
348
|
return /*#__PURE__*/_jsxs("h5", {
|
457
|
-
...
|
349
|
+
...attributes,
|
350
|
+
...element.attr,
|
351
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
458
352
|
placeholder: translation("Heading 5"),
|
459
353
|
children: [children, /*#__PURE__*/_jsx("span", {
|
460
354
|
contentEditable: false
|
@@ -462,30 +356,14 @@ export const getBlock = props => {
|
|
462
356
|
});
|
463
357
|
case "headingSix":
|
464
358
|
return /*#__PURE__*/_jsxs("h6", {
|
465
|
-
...
|
359
|
+
...attributes,
|
360
|
+
...element.attr,
|
361
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
466
362
|
placeholder: translation("Heading 6"),
|
467
363
|
children: [children, /*#__PURE__*/_jsx("span", {
|
468
364
|
contentEditable: false
|
469
365
|
})]
|
470
366
|
});
|
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
367
|
case "blockquote":
|
490
368
|
return /*#__PURE__*/_jsx("blockquote", {
|
491
369
|
...attributes,
|
@@ -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);
|