@flozy/editor 10.1.4 → 10.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +120 -16
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +181 -168
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +4 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +24 -5
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/ColorPickerButton.js +39 -17
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -57
- package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +5 -10
- package/dist/Editor/common/Select/index.js +2 -0
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +156 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +168 -62
- package/dist/Editor/helper/index.js +4 -0
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +361 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +8 -2
- package/dist/Editor/utils/helper.js +109 -19
- package/dist/Editor/utils/signature.js +2 -9
- package/package.json +4 -4
@@ -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 { getBreakPointsValue,
|
37
|
+
import { getBreakPointsValue, textThemeFields, getElementProperty } from "../helper/theme";
|
38
38
|
import Variables from "../Elements/Variables/Variable";
|
39
|
-
import insertNewLine from "./insertNewLine";
|
40
39
|
import Divider from "../Elements/Divider/Divider";
|
41
40
|
import { getBorderColor, getSlateDom } from "./helper";
|
42
41
|
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
|
-
|
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,7 +56,17 @@ const LIST_FORMAT_TYPE = {
|
|
56
56
|
orderedList: "list-item",
|
57
57
|
unorderedList: "list-item"
|
58
58
|
};
|
59
|
-
|
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"];
|
60
70
|
export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
61
71
|
const isActive = isBlockActive(editor, format);
|
62
72
|
const isList = list_types.includes(format);
|
@@ -89,8 +99,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
89
99
|
if (!selection) {
|
90
100
|
Transforms.insertText(editor, "");
|
91
101
|
}
|
102
|
+
const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
|
92
103
|
Transforms.setNodes(editor, {
|
93
|
-
type: isActive ?
|
104
|
+
type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
|
94
105
|
...attr
|
95
106
|
});
|
96
107
|
if (isList && !isActive) {
|
@@ -99,10 +110,12 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
99
110
|
children: []
|
100
111
|
});
|
101
112
|
}
|
102
|
-
|
103
|
-
|
104
|
-
|
113
|
+
|
114
|
+
// if (NEWLINESAFTER.indexOf(format) > -1) {
|
115
|
+
// insertNewLine(editor);
|
116
|
+
// }
|
105
117
|
};
|
118
|
+
|
106
119
|
export const addMarkData = (editor, data) => {
|
107
120
|
try {
|
108
121
|
Editor.addMark(editor, data.format, data.value);
|
@@ -111,9 +124,14 @@ export const addMarkData = (editor, data) => {
|
|
111
124
|
}
|
112
125
|
};
|
113
126
|
export const toggleMark = (editor, format) => {
|
114
|
-
const isActive =
|
127
|
+
const isActive = isMarkBtnActive(editor, format);
|
115
128
|
if (isActive) {
|
116
|
-
|
129
|
+
const isThemeSupportedMark = textThemeFields.some(f => f === format);
|
130
|
+
if (isThemeSupportedMark) {
|
131
|
+
Editor.addMark(editor, format, false);
|
132
|
+
} else {
|
133
|
+
Editor.removeMark(editor, format);
|
134
|
+
}
|
117
135
|
} else {
|
118
136
|
Editor.addMark(editor, format, true);
|
119
137
|
}
|
@@ -127,6 +145,58 @@ export const isMarkActive = (editor, format) => {
|
|
127
145
|
return null;
|
128
146
|
}
|
129
147
|
};
|
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
|
+
};
|
130
200
|
export const isBlockActive = (editor, format) => {
|
131
201
|
const [match] = Editor.nodes(editor, {
|
132
202
|
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
|
@@ -152,7 +222,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
|
|
152
222
|
});
|
153
223
|
}
|
154
224
|
};
|
155
|
-
export const activeMark = (editor, format) => {
|
225
|
+
export const activeMark = (editor, format, noDefaultValue) => {
|
156
226
|
const defaultMarkData = {
|
157
227
|
color: "#000000",
|
158
228
|
bgColor: "#FFFFFF",
|
@@ -162,7 +232,7 @@ export const activeMark = (editor, format) => {
|
|
162
232
|
};
|
163
233
|
try {
|
164
234
|
const marks = Editor.marks(editor);
|
165
|
-
let defaultValue = defaultMarkData[format];
|
235
|
+
let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
|
166
236
|
const {
|
167
237
|
selection
|
168
238
|
} = editor || {};
|
@@ -179,6 +249,31 @@ export const activeMark = (editor, format) => {
|
|
179
249
|
return null;
|
180
250
|
}
|
181
251
|
};
|
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
|
+
};
|
182
277
|
export const getMarked = (leaf, children, theme) => {
|
183
278
|
const className = leaf?.doublequote ? "doublequote" : "";
|
184
279
|
if (leaf.highlight) {
|
@@ -205,6 +300,7 @@ export const getMarked = (leaf, children, theme) => {
|
|
205
300
|
children: children
|
206
301
|
});
|
207
302
|
}
|
303
|
+
children = getThemeMarkedLeaf(leaf, children);
|
208
304
|
if (leaf.strikethrough) {
|
209
305
|
children = /*#__PURE__*/_jsx("span", {
|
210
306
|
style: {
|
@@ -232,20 +328,27 @@ export const getMarked = (leaf, children, theme) => {
|
|
232
328
|
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
|
233
329
|
const family = leaf?.fontFamily;
|
234
330
|
const textStyles = getTextColor(leaf?.color);
|
331
|
+
const fontSize = {
|
332
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
333
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
334
|
+
};
|
335
|
+
const fontSizesImportant = {};
|
336
|
+
Object.entries(fontSize).forEach(([key, value]) => {
|
337
|
+
fontSizesImportant[key] = `${value} !important`;
|
338
|
+
});
|
339
|
+
const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
|
235
340
|
children = /*#__PURE__*/_jsx("span", {
|
236
|
-
style: {
|
237
|
-
background: leaf.bgColor
|
238
|
-
},
|
239
341
|
children: /*#__PURE__*/_jsx(Box, {
|
240
342
|
className: `${className} leaf-item`,
|
241
343
|
component: "span",
|
242
344
|
sx: {
|
243
|
-
|
244
|
-
fontSize:
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
},
|
345
|
+
"& span": {
|
346
|
+
// fontSize: fontSizesImportant,
|
347
|
+
// ...groupByBreakpoint(fontSizesImportant, theme),
|
348
|
+
background: leaf.bgColor,
|
349
|
+
...fontSizeWithBreakpoints
|
350
|
+
},
|
351
|
+
...fontSizeWithBreakpoints,
|
249
352
|
// ...wrapThemeBreakpoints(
|
250
353
|
// {
|
251
354
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -292,17 +395,28 @@ export const getBlock = props => {
|
|
292
395
|
children,
|
293
396
|
customProps
|
294
397
|
} = props;
|
398
|
+
const {
|
399
|
+
customLineHeight
|
400
|
+
} = customProps || {};
|
295
401
|
const attributes = props.attributes ?? {};
|
296
402
|
const isEmpty = isEmptyTextNode(element);
|
297
403
|
const {
|
298
404
|
translation
|
299
405
|
} = customProps;
|
406
|
+
const commonHeadingProps = () => ({
|
407
|
+
...attributes,
|
408
|
+
...element.attr,
|
409
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
|
410
|
+
});
|
411
|
+
const commonParaProps = paraType => ({
|
412
|
+
...attributes,
|
413
|
+
...element.attr,
|
414
|
+
className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
|
415
|
+
});
|
300
416
|
switch (element.type) {
|
301
417
|
case "headingOne":
|
302
418
|
return /*#__PURE__*/_jsxs("h1", {
|
303
|
-
...
|
304
|
-
...element.attr,
|
305
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
419
|
+
...commonHeadingProps(),
|
306
420
|
placeholder: translation("Heading 1"),
|
307
421
|
children: [children, /*#__PURE__*/_jsx("span", {
|
308
422
|
contentEditable: false
|
@@ -310,9 +424,7 @@ export const getBlock = props => {
|
|
310
424
|
});
|
311
425
|
case "headingTwo":
|
312
426
|
return /*#__PURE__*/_jsxs("h2", {
|
313
|
-
...
|
314
|
-
...element.attr,
|
315
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
427
|
+
...commonHeadingProps(),
|
316
428
|
placeholder: translation("Heading 2"),
|
317
429
|
children: [children, /*#__PURE__*/_jsx("span", {
|
318
430
|
contentEditable: false
|
@@ -320,9 +432,7 @@ export const getBlock = props => {
|
|
320
432
|
});
|
321
433
|
case "headingThree":
|
322
434
|
return /*#__PURE__*/_jsxs("h3", {
|
323
|
-
...
|
324
|
-
...element.attr,
|
325
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
435
|
+
...commonHeadingProps(),
|
326
436
|
placeholder: translation("Heading 3"),
|
327
437
|
children: [children, /*#__PURE__*/_jsx("span", {
|
328
438
|
contentEditable: false
|
@@ -330,9 +440,7 @@ export const getBlock = props => {
|
|
330
440
|
});
|
331
441
|
case "headingFour":
|
332
442
|
return /*#__PURE__*/_jsxs("h4", {
|
333
|
-
...
|
334
|
-
...element.attr,
|
335
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
443
|
+
...commonHeadingProps(),
|
336
444
|
placeholder: translation("Heading 4"),
|
337
445
|
children: [children, /*#__PURE__*/_jsx("span", {
|
338
446
|
contentEditable: false
|
@@ -340,9 +448,7 @@ export const getBlock = props => {
|
|
340
448
|
});
|
341
449
|
case "headingFive":
|
342
450
|
return /*#__PURE__*/_jsxs("h5", {
|
343
|
-
...
|
344
|
-
...element.attr,
|
345
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
451
|
+
...commonHeadingProps(),
|
346
452
|
placeholder: translation("Heading 5"),
|
347
453
|
children: [children, /*#__PURE__*/_jsx("span", {
|
348
454
|
contentEditable: false
|
@@ -350,14 +456,30 @@ export const getBlock = props => {
|
|
350
456
|
});
|
351
457
|
case "headingSix":
|
352
458
|
return /*#__PURE__*/_jsxs("h6", {
|
353
|
-
...
|
354
|
-
...element.attr,
|
355
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
459
|
+
...commonHeadingProps(),
|
356
460
|
placeholder: translation("Heading 6"),
|
357
461
|
children: [children, /*#__PURE__*/_jsx("span", {
|
358
462
|
contentEditable: false
|
359
463
|
})]
|
360
464
|
});
|
465
|
+
case "paragraphOne":
|
466
|
+
return /*#__PURE__*/_jsx("p", {
|
467
|
+
...commonParaProps("para1"),
|
468
|
+
placeholder: "Paragraph 1",
|
469
|
+
children: children
|
470
|
+
});
|
471
|
+
case "paragraphTwo":
|
472
|
+
return /*#__PURE__*/_jsx("p", {
|
473
|
+
...commonParaProps("para2"),
|
474
|
+
placeholder: "Paragraph 2",
|
475
|
+
children: children
|
476
|
+
});
|
477
|
+
case "paragraphThree":
|
478
|
+
return /*#__PURE__*/_jsx("p", {
|
479
|
+
...commonParaProps("para3"),
|
480
|
+
placeholder: "Paragraph 3",
|
481
|
+
children: children
|
482
|
+
});
|
361
483
|
case "blockquote":
|
362
484
|
return /*#__PURE__*/_jsx("blockquote", {
|
363
485
|
...attributes,
|
@@ -371,7 +493,7 @@ export const getBlock = props => {
|
|
371
493
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
372
494
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
373
495
|
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
|
374
|
-
lineHeight:
|
496
|
+
lineHeight: `${customLineHeight} !important`
|
375
497
|
},
|
376
498
|
children: children
|
377
499
|
});
|
@@ -425,14 +547,15 @@ export const getBlock = props => {
|
|
425
547
|
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
426
548
|
placeholder: translation("List"),
|
427
549
|
style: {
|
428
|
-
color: firstChildren?.color
|
550
|
+
color: firstChildren?.color,
|
551
|
+
lineHeight: `${customLineHeight} !important`
|
429
552
|
},
|
430
553
|
children: children
|
431
554
|
});
|
432
555
|
case "orderedList":
|
433
556
|
return /*#__PURE__*/_jsx("ol", {
|
434
557
|
style: {
|
435
|
-
lineHeight:
|
558
|
+
lineHeight: `${customLineHeight} !important`
|
436
559
|
},
|
437
560
|
className: "listItemMargin",
|
438
561
|
type: "1",
|
@@ -442,7 +565,7 @@ export const getBlock = props => {
|
|
442
565
|
case "unorderedList":
|
443
566
|
return /*#__PURE__*/_jsx("ul", {
|
444
567
|
style: {
|
445
|
-
lineHeight:
|
568
|
+
lineHeight: `${customLineHeight} !important`
|
446
569
|
},
|
447
570
|
className: "listItemMargin",
|
448
571
|
...attributes,
|
@@ -1,6 +1,13 @@
|
|
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
|
+
};
|
4
11
|
export const insertAccordion = (editor, path) => {
|
5
12
|
try {
|
6
13
|
const selectedText = getSelectedText(editor);
|
@@ -36,11 +43,14 @@ export const insertAccordion = (editor, path) => {
|
|
36
43
|
// get title index
|
37
44
|
const summaryIndex = upPath.length - 3;
|
38
45
|
upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
|
46
|
+
|
39
47
|
// select accordion title by default
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
}
|
48
|
+
if (isMobileWindow()) {
|
49
|
+
// timeout to resolve focus issue in mobile
|
50
|
+
setTimeout(() => focusAccordion(editor, upPath), 0);
|
51
|
+
} else {
|
52
|
+
focusAccordion(editor, upPath);
|
53
|
+
}
|
44
54
|
insertNewLine(editor);
|
45
55
|
} catch (err) {
|
46
56
|
console.log(err);
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import { Path, Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
|
-
import { windowVar } from "./helper";
|
4
3
|
import { getCurrentElementText } from "../plugins/withHTML";
|
5
4
|
export const insertButton = editor => {
|
6
5
|
const button = {
|
@@ -11,22 +10,7 @@ export const insertButton = editor => {
|
|
11
10
|
buttonLink: {
|
12
11
|
linkType: "webAddress"
|
13
12
|
},
|
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 || {})
|
13
|
+
iconPosition: "start"
|
30
14
|
};
|
31
15
|
const hasText = getCurrentElementText(editor);
|
32
16
|
const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;
|
@@ -1,9 +1,10 @@
|
|
1
|
-
import { useState } from "react";
|
1
|
+
import { useRef, useState } from "react";
|
2
2
|
const useTableResize = ({
|
3
3
|
parentDOM,
|
4
4
|
size: defaultSize,
|
5
5
|
onDone,
|
6
|
-
minMaxProps = {}
|
6
|
+
minMaxProps = {},
|
7
|
+
isMobile
|
7
8
|
}) => {
|
8
9
|
const {
|
9
10
|
width
|
@@ -18,6 +19,10 @@ const useTableResize = ({
|
|
18
19
|
});
|
19
20
|
const [resizing, setResizing] = useState(false);
|
20
21
|
const [isDone, setIsDone] = useState(0);
|
22
|
+
const lastTouch = useRef({
|
23
|
+
x: 0,
|
24
|
+
y: 0
|
25
|
+
});
|
21
26
|
const onLoad = defaultSize => {
|
22
27
|
setSize({
|
23
28
|
widthInPercent: 100,
|
@@ -25,29 +30,64 @@ const useTableResize = ({
|
|
25
30
|
...defaultSize
|
26
31
|
});
|
27
32
|
};
|
33
|
+
const handleEventListeners = type => {
|
34
|
+
const listener = type === "add" ? document.addEventListener : document.removeEventListener;
|
35
|
+
const onMoveListener = isMobile ? "touchmove" : "pointermove";
|
36
|
+
const onEndListener = isMobile ? "touchend" : "pointerup";
|
37
|
+
listener(onMoveListener, onMouseMove);
|
38
|
+
listener(onEndListener, onMouseUp);
|
39
|
+
};
|
40
|
+
const updateLastTouch = ({
|
41
|
+
clientX,
|
42
|
+
clientY
|
43
|
+
}) => {
|
44
|
+
lastTouch.current.x = clientX;
|
45
|
+
lastTouch.current.y = clientY;
|
46
|
+
};
|
28
47
|
const onMouseDown = e => {
|
29
|
-
|
30
|
-
|
31
|
-
|
48
|
+
if (isMobile) {
|
49
|
+
updateLastTouch(e.touches[0]);
|
50
|
+
} else {
|
51
|
+
e.preventDefault();
|
52
|
+
}
|
53
|
+
handleEventListeners("add");
|
32
54
|
setResizing(true);
|
33
55
|
setIsDone(0);
|
34
56
|
};
|
35
57
|
const onMouseUp = () => {
|
36
|
-
|
37
|
-
document.removeEventListener("pointerup", onMouseUp);
|
58
|
+
handleEventListeners("remove");
|
38
59
|
setResizing(false);
|
39
60
|
setIsDone(1);
|
40
61
|
};
|
41
62
|
const onMouseMove = e => {
|
63
|
+
let {
|
64
|
+
movementX,
|
65
|
+
movementY
|
66
|
+
} = e || {};
|
67
|
+
if (e.type === "touchmove") {
|
68
|
+
// for mobile
|
69
|
+
const {
|
70
|
+
x,
|
71
|
+
y
|
72
|
+
} = lastTouch.current || {};
|
73
|
+
const touches = e.touches[0];
|
74
|
+
const {
|
75
|
+
clientX,
|
76
|
+
clientY
|
77
|
+
} = touches;
|
78
|
+
movementX = clientX - x;
|
79
|
+
movementY = clientY - y;
|
80
|
+
updateLastTouch(touches);
|
81
|
+
}
|
42
82
|
const {
|
43
83
|
minWidth
|
44
84
|
} = minMaxProps || {};
|
45
85
|
setSize(currentSize => {
|
46
86
|
const width = currentSize?.width || parentDOM?.clientWidth;
|
47
|
-
const calcWidth = width +
|
87
|
+
const calcWidth = width + movementX;
|
48
88
|
return {
|
49
89
|
width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
|
50
|
-
height: currentSize.height +
|
90
|
+
height: currentSize.height + movementY,
|
51
91
|
widthInPercent: calcWidth / width * 100
|
52
92
|
};
|
53
93
|
});
|
@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
|
|
82
82
|
};
|
83
83
|
export const draftToSlate = props => {
|
84
84
|
const {
|
85
|
-
data
|
85
|
+
data,
|
86
|
+
needLayout
|
86
87
|
} = props;
|
87
88
|
if (data?.blocks && data?.blocks?.length > 0) {
|
88
89
|
const converted = data?.blocks?.reduce((a, b) => {
|
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
|
|
104
105
|
return data;
|
105
106
|
} else {
|
106
107
|
return [{
|
107
|
-
type: "paragraph",
|
108
|
+
type: needLayout ? "title" : "paragraph",
|
108
109
|
children: [{
|
109
110
|
text: ""
|
110
111
|
}]
|
@@ -1,10 +1,11 @@
|
|
1
|
-
import { Editor, Transforms, Element, Node, Path, Range } from "slate";
|
1
|
+
import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
|
2
2
|
import { toggleBlock } from "./SlateUtilityFunctions";
|
3
3
|
import insertNewLine from "./insertNewLine";
|
4
4
|
import { insertAccordion } from "./accordion";
|
5
|
-
import { isListItem } from "./helper";
|
5
|
+
import { getNodeWithType, isListItem } from "./helper";
|
6
6
|
import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
|
7
7
|
import EDITORCMDS from "../common/EditorCmds";
|
8
|
+
import { ReactEditor } from "slate-react";
|
8
9
|
const HOTKEYS = {
|
9
10
|
b: "bold",
|
10
11
|
i: "italic",
|
@@ -183,6 +184,20 @@ const checkListEnterEvent = (editor, type) => {
|
|
183
184
|
insertNewLine(editor);
|
184
185
|
}
|
185
186
|
};
|
187
|
+
const removeAccordion = (editor, accordionPath) => {
|
188
|
+
Transforms.removeNodes(editor, {
|
189
|
+
at: accordionPath
|
190
|
+
});
|
191
|
+
Transforms.insertNodes(editor, {
|
192
|
+
type: "paragraph",
|
193
|
+
children: [{
|
194
|
+
text: ""
|
195
|
+
}]
|
196
|
+
}, {
|
197
|
+
at: accordionPath,
|
198
|
+
select: true
|
199
|
+
});
|
200
|
+
};
|
186
201
|
export const enterEvent = (e, editor, isMobile) => {
|
187
202
|
try {
|
188
203
|
const ele = isListItem(editor);
|
@@ -225,9 +240,7 @@ export const enterEvent = (e, editor, isMobile) => {
|
|
225
240
|
e.preventDefault();
|
226
241
|
if (!text) {
|
227
242
|
const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
|
228
|
-
|
229
|
-
at: accordionIndex
|
230
|
-
});
|
243
|
+
removeAccordion(editor, accordionIndex);
|
231
244
|
} else {
|
232
245
|
const nextPath = Path.next(Path.parent(ele[1]));
|
233
246
|
insertAccordion(editor, nextPath);
|
@@ -329,6 +342,37 @@ export const enterEvent = (e, editor, isMobile) => {
|
|
329
342
|
console.log(err);
|
330
343
|
}
|
331
344
|
};
|
345
|
+
export const handleAccordionOnBackspace = (e, editor) => {
|
346
|
+
try {
|
347
|
+
let isAccordion = false;
|
348
|
+
const [accordionDetails] = getNodeWithType(editor, "accordion-details");
|
349
|
+
const [accordionDetailsNode] = accordionDetails || [];
|
350
|
+
if (accordionDetailsNode) {
|
351
|
+
const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
|
352
|
+
if (dom?.parentElement) {
|
353
|
+
dom.parentElement.style.display = "block";
|
354
|
+
}
|
355
|
+
}
|
356
|
+
const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
|
357
|
+
const [accordionTitle, accordionTitlePath] = accordionSummary || [];
|
358
|
+
if (accordionTitle) {
|
359
|
+
// no selection
|
360
|
+
if (Range.isCollapsed(editor.selection)) {
|
361
|
+
const start = Editor.start(editor, accordionTitlePath);
|
362
|
+
const isCursorAtStart = Point.equals(editor.selection.focus, start);
|
363
|
+
if (isCursorAtStart) {
|
364
|
+
e.preventDefault();
|
365
|
+
const parentPath = Path.parent(accordionTitlePath);
|
366
|
+
removeAccordion(editor, parentPath);
|
367
|
+
isAccordion = true;
|
368
|
+
}
|
369
|
+
}
|
370
|
+
}
|
371
|
+
return isAccordion;
|
372
|
+
} catch (err) {
|
373
|
+
console.log(err);
|
374
|
+
}
|
375
|
+
};
|
332
376
|
export const upDownArrowKeyEvents = (e, editor) => {
|
333
377
|
try {
|
334
378
|
const {
|
@@ -348,7 +392,7 @@ export const upDownArrowKeyEvents = (e, editor) => {
|
|
348
392
|
}
|
349
393
|
Transforms.move(editor, {
|
350
394
|
distance: 0,
|
351
|
-
unit:
|
395
|
+
unit: "offset",
|
352
396
|
reverse: false
|
353
397
|
});
|
354
398
|
Transforms.select(editor, {
|