@flozy/editor 10.4.0 → 10.4.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 +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- 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 +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -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 +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -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 +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- 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/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -80
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- 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 +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -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 +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- 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/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- 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/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- 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 +380 -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 +172 -46
- 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 +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- 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 { getBreakpointLineSpacing, getBreakPointsValue, getDevice, getElementProperty, textThemeFields } 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,8 +249,36 @@ 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" : "";
|
279
|
+
const lineH = leaf?.lineHeight;
|
280
|
+
const breakpoint = getDevice(window.innerWidth);
|
281
|
+
const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
184
282
|
if (leaf.highlight) {
|
185
283
|
children = /*#__PURE__*/_jsx("span", {
|
186
284
|
style: {
|
@@ -205,6 +303,7 @@ export const getMarked = (leaf, children, theme) => {
|
|
205
303
|
children: children
|
206
304
|
});
|
207
305
|
}
|
306
|
+
children = getThemeMarkedLeaf(leaf, children);
|
208
307
|
if (leaf.strikethrough) {
|
209
308
|
children = /*#__PURE__*/_jsx("span", {
|
210
309
|
style: {
|
@@ -229,9 +328,18 @@ export const getMarked = (leaf, children, theme) => {
|
|
229
328
|
});
|
230
329
|
}
|
231
330
|
// cover under single span
|
232
|
-
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
|
331
|
+
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
|
233
332
|
const family = leaf?.fontFamily;
|
234
333
|
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);
|
235
343
|
children = /*#__PURE__*/_jsx("span", {
|
236
344
|
style: {
|
237
345
|
background: leaf.bgColor
|
@@ -240,12 +348,13 @@ export const getMarked = (leaf, children, theme) => {
|
|
240
348
|
className: `${className} leaf-item`,
|
241
349
|
component: "span",
|
242
350
|
sx: {
|
243
|
-
|
244
|
-
fontSize:
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
},
|
351
|
+
"& span": {
|
352
|
+
// fontSize: fontSizesImportant,
|
353
|
+
// ...groupByBreakpoint(fontSizesImportant, theme),
|
354
|
+
background: leaf.bgColor,
|
355
|
+
...fontSizeWithBreakpoints
|
356
|
+
},
|
357
|
+
...fontSizeWithBreakpoints,
|
249
358
|
// ...wrapThemeBreakpoints(
|
250
359
|
// {
|
251
360
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -297,12 +406,23 @@ export const getBlock = props => {
|
|
297
406
|
const {
|
298
407
|
translation
|
299
408
|
} = customProps;
|
409
|
+
const commonHeadingProps = () => ({
|
410
|
+
...attributes,
|
411
|
+
...element.attr,
|
412
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
|
413
|
+
});
|
414
|
+
const commonParaProps = paraType => ({
|
415
|
+
...attributes,
|
416
|
+
...element.attr,
|
417
|
+
className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
|
418
|
+
});
|
419
|
+
const breakpoint = getDevice(window.innerWidth);
|
420
|
+
const lineH = element?.children[0]?.lineHeight;
|
421
|
+
const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
300
422
|
switch (element.type) {
|
301
423
|
case "headingOne":
|
302
424
|
return /*#__PURE__*/_jsxs("h1", {
|
303
|
-
...
|
304
|
-
...element.attr,
|
305
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
425
|
+
...commonHeadingProps(),
|
306
426
|
placeholder: translation("Heading 1"),
|
307
427
|
children: [children, /*#__PURE__*/_jsx("span", {
|
308
428
|
contentEditable: false
|
@@ -310,9 +430,7 @@ export const getBlock = props => {
|
|
310
430
|
});
|
311
431
|
case "headingTwo":
|
312
432
|
return /*#__PURE__*/_jsxs("h2", {
|
313
|
-
...
|
314
|
-
...element.attr,
|
315
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
433
|
+
...commonHeadingProps(),
|
316
434
|
placeholder: translation("Heading 2"),
|
317
435
|
children: [children, /*#__PURE__*/_jsx("span", {
|
318
436
|
contentEditable: false
|
@@ -320,9 +438,7 @@ export const getBlock = props => {
|
|
320
438
|
});
|
321
439
|
case "headingThree":
|
322
440
|
return /*#__PURE__*/_jsxs("h3", {
|
323
|
-
...
|
324
|
-
...element.attr,
|
325
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
441
|
+
...commonHeadingProps(),
|
326
442
|
placeholder: translation("Heading 3"),
|
327
443
|
children: [children, /*#__PURE__*/_jsx("span", {
|
328
444
|
contentEditable: false
|
@@ -330,9 +446,7 @@ export const getBlock = props => {
|
|
330
446
|
});
|
331
447
|
case "headingFour":
|
332
448
|
return /*#__PURE__*/_jsxs("h4", {
|
333
|
-
...
|
334
|
-
...element.attr,
|
335
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
449
|
+
...commonHeadingProps(),
|
336
450
|
placeholder: translation("Heading 4"),
|
337
451
|
children: [children, /*#__PURE__*/_jsx("span", {
|
338
452
|
contentEditable: false
|
@@ -340,9 +454,7 @@ export const getBlock = props => {
|
|
340
454
|
});
|
341
455
|
case "headingFive":
|
342
456
|
return /*#__PURE__*/_jsxs("h5", {
|
343
|
-
...
|
344
|
-
...element.attr,
|
345
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
457
|
+
...commonHeadingProps(),
|
346
458
|
placeholder: translation("Heading 5"),
|
347
459
|
children: [children, /*#__PURE__*/_jsx("span", {
|
348
460
|
contentEditable: false
|
@@ -350,14 +462,30 @@ export const getBlock = props => {
|
|
350
462
|
});
|
351
463
|
case "headingSix":
|
352
464
|
return /*#__PURE__*/_jsxs("h6", {
|
353
|
-
...
|
354
|
-
...element.attr,
|
355
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
465
|
+
...commonHeadingProps(),
|
356
466
|
placeholder: translation("Heading 6"),
|
357
467
|
children: [children, /*#__PURE__*/_jsx("span", {
|
358
468
|
contentEditable: false
|
359
469
|
})]
|
360
470
|
});
|
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
|
+
});
|
361
489
|
case "blockquote":
|
362
490
|
return /*#__PURE__*/_jsx("blockquote", {
|
363
491
|
...attributes,
|
@@ -371,7 +499,7 @@ export const getBlock = props => {
|
|
371
499
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
372
500
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
373
501
|
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
|
374
|
-
lineHeight:
|
502
|
+
lineHeight: `${selectedLineHeight} !important`
|
375
503
|
},
|
376
504
|
children: children
|
377
505
|
});
|
@@ -425,15 +553,13 @@ export const getBlock = props => {
|
|
425
553
|
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
426
554
|
placeholder: translation("List"),
|
427
555
|
style: {
|
428
|
-
color: firstChildren?.color
|
556
|
+
color: firstChildren?.color,
|
557
|
+
lineHeight: `${selectedLineHeight}`
|
429
558
|
},
|
430
559
|
children: children
|
431
560
|
});
|
432
561
|
case "orderedList":
|
433
562
|
return /*#__PURE__*/_jsx("ol", {
|
434
|
-
style: {
|
435
|
-
lineHeight: 1.43
|
436
|
-
},
|
437
563
|
className: "listItemMargin",
|
438
564
|
type: "1",
|
439
565
|
...attributes,
|
@@ -441,9 +567,6 @@ export const getBlock = props => {
|
|
441
567
|
});
|
442
568
|
case "unorderedList":
|
443
569
|
return /*#__PURE__*/_jsx("ul", {
|
444
|
-
style: {
|
445
|
-
lineHeight: 1.43
|
446
|
-
},
|
447
570
|
className: "listItemMargin",
|
448
571
|
...attributes,
|
449
572
|
children: children
|
@@ -451,6 +574,7 @@ export const getBlock = props => {
|
|
451
574
|
case "check-list-item":
|
452
575
|
return /*#__PURE__*/_jsx(CheckList, {
|
453
576
|
...props,
|
577
|
+
selectedLineHeight: selectedLineHeight,
|
454
578
|
isEmpty: isEmpty
|
455
579
|
});
|
456
580
|
case "link":
|
@@ -670,8 +794,10 @@ export const getQueryStrings = urlString => {
|
|
670
794
|
const newUrl = new URL(urlString);
|
671
795
|
var youCode = newUrl.searchParams.get("v");
|
672
796
|
if (!youCode) {
|
673
|
-
|
797
|
+
const parts = newUrl.pathname.split("/");
|
798
|
+
youCode = parts[parts.length - 1]; // video ID
|
674
799
|
}
|
800
|
+
|
675
801
|
return `https://www.youtube.com/embed/${youCode}`;
|
676
802
|
} else {
|
677
803
|
return urlString;
|
@@ -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, {
|