@flozy/editor 10.0.9 → 10.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +20 -120
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -16
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +9 -25
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
- package/dist/Editor/Elements/Form/Form.js +168 -179
- package/dist/Editor/Elements/Form/FormField.js +4 -10
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/styles.js +7 -64
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +1 -4
- package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
- package/dist/Editor/Elements/Search/SearchButton.js +8 -9
- package/dist/Editor/Elements/Search/SearchList.js +7 -9
- package/dist/Editor/Elements/SimpleText/index.js +1 -6
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
- package/dist/Editor/common/ColorPickerButton.js +16 -38
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +1 -31
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
- package/dist/Editor/common/LinkSettings/index.js +68 -84
- package/dist/Editor/common/LinkSettings/style.js +30 -245
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
- package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
- package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
- package/dist/Editor/common/RnD/index.js +6 -5
- package/dist/Editor/common/Select/index.js +0 -2
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
- package/dist/Editor/common/Uploader.js +0 -8
- package/dist/Editor/common/iconListV2.js +6 -101
- package/dist/Editor/common/iconslist.js +0 -24
- package/dist/Editor/commonStyle.js +61 -174
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +5 -8
- 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 +43 -166
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +19 -90
- package/package.json +4 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
- package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
- package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/SnackBar/index.js +0 -43
- package/dist/Editor/helper/textIndeces.js +0 -58
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -361
- package/dist/Editor/themeSettings/style.js +0 -292
- 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 -324
@@ -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, 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
|
if (leaf.highlight) {
|
@@ -300,7 +205,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
300
205
|
children: children
|
301
206
|
});
|
302
207
|
}
|
303
|
-
children = getThemeMarkedLeaf(leaf, children);
|
304
208
|
if (leaf.strikethrough) {
|
305
209
|
children = /*#__PURE__*/_jsx("span", {
|
306
210
|
style: {
|
@@ -328,27 +232,20 @@ export const getMarked = (leaf, children, theme) => {
|
|
328
232
|
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
|
329
233
|
const family = leaf?.fontFamily;
|
330
234
|
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);
|
340
235
|
children = /*#__PURE__*/_jsx("span", {
|
236
|
+
style: {
|
237
|
+
background: leaf.bgColor
|
238
|
+
},
|
341
239
|
children: /*#__PURE__*/_jsx(Box, {
|
342
240
|
className: `${className} leaf-item`,
|
343
241
|
component: "span",
|
344
242
|
sx: {
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
},
|
351
|
-
...fontSizeWithBreakpoints,
|
243
|
+
...groupByBreakpoint({
|
244
|
+
fontSize: {
|
245
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
246
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
247
|
+
}
|
248
|
+
}, theme),
|
352
249
|
// ...wrapThemeBreakpoints(
|
353
250
|
// {
|
354
251
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -395,28 +292,17 @@ export const getBlock = props => {
|
|
395
292
|
children,
|
396
293
|
customProps
|
397
294
|
} = props;
|
398
|
-
const {
|
399
|
-
customLineHeight
|
400
|
-
} = customProps || {};
|
401
295
|
const attributes = props.attributes ?? {};
|
402
296
|
const isEmpty = isEmptyTextNode(element);
|
403
297
|
const {
|
404
298
|
translation
|
405
299
|
} = 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
|
-
});
|
416
300
|
switch (element.type) {
|
417
301
|
case "headingOne":
|
418
302
|
return /*#__PURE__*/_jsxs("h1", {
|
419
|
-
...
|
303
|
+
...attributes,
|
304
|
+
...element.attr,
|
305
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
420
306
|
placeholder: translation("Heading 1"),
|
421
307
|
children: [children, /*#__PURE__*/_jsx("span", {
|
422
308
|
contentEditable: false
|
@@ -424,7 +310,9 @@ export const getBlock = props => {
|
|
424
310
|
});
|
425
311
|
case "headingTwo":
|
426
312
|
return /*#__PURE__*/_jsxs("h2", {
|
427
|
-
...
|
313
|
+
...attributes,
|
314
|
+
...element.attr,
|
315
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
428
316
|
placeholder: translation("Heading 2"),
|
429
317
|
children: [children, /*#__PURE__*/_jsx("span", {
|
430
318
|
contentEditable: false
|
@@ -432,7 +320,9 @@ export const getBlock = props => {
|
|
432
320
|
});
|
433
321
|
case "headingThree":
|
434
322
|
return /*#__PURE__*/_jsxs("h3", {
|
435
|
-
...
|
323
|
+
...attributes,
|
324
|
+
...element.attr,
|
325
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
436
326
|
placeholder: translation("Heading 3"),
|
437
327
|
children: [children, /*#__PURE__*/_jsx("span", {
|
438
328
|
contentEditable: false
|
@@ -440,7 +330,9 @@ export const getBlock = props => {
|
|
440
330
|
});
|
441
331
|
case "headingFour":
|
442
332
|
return /*#__PURE__*/_jsxs("h4", {
|
443
|
-
...
|
333
|
+
...attributes,
|
334
|
+
...element.attr,
|
335
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
444
336
|
placeholder: translation("Heading 4"),
|
445
337
|
children: [children, /*#__PURE__*/_jsx("span", {
|
446
338
|
contentEditable: false
|
@@ -448,7 +340,9 @@ export const getBlock = props => {
|
|
448
340
|
});
|
449
341
|
case "headingFive":
|
450
342
|
return /*#__PURE__*/_jsxs("h5", {
|
451
|
-
...
|
343
|
+
...attributes,
|
344
|
+
...element.attr,
|
345
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
452
346
|
placeholder: translation("Heading 5"),
|
453
347
|
children: [children, /*#__PURE__*/_jsx("span", {
|
454
348
|
contentEditable: false
|
@@ -456,30 +350,14 @@ export const getBlock = props => {
|
|
456
350
|
});
|
457
351
|
case "headingSix":
|
458
352
|
return /*#__PURE__*/_jsxs("h6", {
|
459
|
-
...
|
353
|
+
...attributes,
|
354
|
+
...element.attr,
|
355
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
|
460
356
|
placeholder: translation("Heading 6"),
|
461
357
|
children: [children, /*#__PURE__*/_jsx("span", {
|
462
358
|
contentEditable: false
|
463
359
|
})]
|
464
360
|
});
|
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
|
-
});
|
483
361
|
case "blockquote":
|
484
362
|
return /*#__PURE__*/_jsx("blockquote", {
|
485
363
|
...attributes,
|
@@ -493,7 +371,7 @@ export const getBlock = props => {
|
|
493
371
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
494
372
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
495
373
|
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
|
496
|
-
lineHeight:
|
374
|
+
lineHeight: 1.43
|
497
375
|
},
|
498
376
|
children: children
|
499
377
|
});
|
@@ -547,15 +425,14 @@ export const getBlock = props => {
|
|
547
425
|
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
548
426
|
placeholder: translation("List"),
|
549
427
|
style: {
|
550
|
-
color: firstChildren?.color
|
551
|
-
lineHeight: `${customLineHeight} !important`
|
428
|
+
color: firstChildren?.color
|
552
429
|
},
|
553
430
|
children: children
|
554
431
|
});
|
555
432
|
case "orderedList":
|
556
433
|
return /*#__PURE__*/_jsx("ol", {
|
557
434
|
style: {
|
558
|
-
lineHeight:
|
435
|
+
lineHeight: 1.43
|
559
436
|
},
|
560
437
|
className: "listItemMargin",
|
561
438
|
type: "1",
|
@@ -565,7 +442,7 @@ export const getBlock = props => {
|
|
565
442
|
case "unorderedList":
|
566
443
|
return /*#__PURE__*/_jsx("ul", {
|
567
444
|
style: {
|
568
|
-
lineHeight:
|
445
|
+
lineHeight: 1.43
|
569
446
|
},
|
570
447
|
className: "listItemMargin",
|
571
448
|
...attributes,
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Path, Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
|
+
import { windowVar } from "./helper";
|
3
4
|
import { getCurrentElementText } from "../plugins/withHTML";
|
4
5
|
export const insertButton = editor => {
|
5
6
|
const button = {
|
@@ -10,7 +11,22 @@ export const insertButton = editor => {
|
|
10
11
|
buttonLink: {
|
11
12
|
linkType: "webAddress"
|
12
13
|
},
|
13
|
-
iconPosition: "start"
|
14
|
+
iconPosition: "start",
|
15
|
+
bgColor: "#2563EB",
|
16
|
+
textColor: "#FFF",
|
17
|
+
borderRadius: {
|
18
|
+
topLeft: 30,
|
19
|
+
topRight: 30,
|
20
|
+
bottomLeft: 30,
|
21
|
+
bottomRight: 30
|
22
|
+
},
|
23
|
+
bannerSpacing: {
|
24
|
+
left: 16,
|
25
|
+
top: 8,
|
26
|
+
right: 16,
|
27
|
+
bottom: 8
|
28
|
+
},
|
29
|
+
...(windowVar.lastButtonProps || {})
|
14
30
|
};
|
15
31
|
const hasText = getCurrentElementText(editor);
|
16
32
|
const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;
|
@@ -82,8 +82,7 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
|
|
82
82
|
};
|
83
83
|
export const draftToSlate = props => {
|
84
84
|
const {
|
85
|
-
data
|
86
|
-
needLayout
|
85
|
+
data
|
87
86
|
} = props;
|
88
87
|
if (data?.blocks && data?.blocks?.length > 0) {
|
89
88
|
const converted = data?.blocks?.reduce((a, b) => {
|
@@ -105,7 +104,7 @@ export const draftToSlate = props => {
|
|
105
104
|
return data;
|
106
105
|
} else {
|
107
106
|
return [{
|
108
|
-
type:
|
107
|
+
type: "paragraph",
|
109
108
|
children: [{
|
110
109
|
text: ""
|
111
110
|
}]
|
@@ -7,43 +7,43 @@ export const sizeMap = {
|
|
7
7
|
export const fontFamilyMap = {
|
8
8
|
PoppinsRegular: "PoppinsRegular",
|
9
9
|
PoppinsBold: "PoppinsBold",
|
10
|
-
sans:
|
11
|
-
serif:
|
12
|
-
monospace:
|
13
|
-
roboto: "Roboto, sans-serif",
|
14
|
-
qwitcher: '
|
15
|
-
garamond: '
|
16
|
-
anton: "Anton, sans-serif",
|
17
|
-
dmserif: '
|
18
|
-
inter: "Inter, sans-serif",
|
19
|
-
libre: '
|
20
|
-
montserrat: "Montserrat, sans-serif",
|
21
|
-
opensans: '
|
22
|
-
publicsans: '
|
23
|
-
raleway: "Raleway, sans-serif",
|
24
|
-
spacemono: '
|
25
|
-
bulgarian: '
|
26
|
-
impact: "Impact, serif",
|
27
|
-
redacted: '
|
28
|
-
greatVibes: '
|
29
|
-
zeyada: "Zeyada, cursive",
|
30
|
-
allura: "Allura, cursive",
|
31
|
-
pinyon: '
|
32
|
-
muellerhoff: '
|
33
|
-
dawning: '
|
10
|
+
sans: "Helvetica,Arial, sans serif",
|
11
|
+
serif: "Georgia, Times New Roaman,serif",
|
12
|
+
monospace: "Monaco, Courier New,monospace",
|
13
|
+
roboto: "'Roboto', sans-serif",
|
14
|
+
qwitcher: "'Qwitcher Grypen', cursive",
|
15
|
+
garamond: "'EB Garamond', serif",
|
16
|
+
anton: "'Anton', sans-serif",
|
17
|
+
dmserif: "'DM Serif Text', serif",
|
18
|
+
inter: "'Inter', sans-serif",
|
19
|
+
libre: "'Libre Baskerville', serif",
|
20
|
+
montserrat: "'Montserrat', sans-serif",
|
21
|
+
opensans: "'Open Sans', sans-serif",
|
22
|
+
publicsans: "'Public Sans', sans-serif",
|
23
|
+
raleway: "'Raleway', sans-serif",
|
24
|
+
spacemono: "'Space Mono', sans-serif",
|
25
|
+
bulgarian: "'Bulgarian Garamond', monospace",
|
26
|
+
impact: "'Impact', serif",
|
27
|
+
redacted: "'Redacted Script', cursive",
|
28
|
+
greatVibes: "'Great Vibes', cursive",
|
29
|
+
zeyada: "'Zeyada', cursive",
|
30
|
+
allura: "'Allura', cursive",
|
31
|
+
pinyon: "'Pinyon Script', cursive",
|
32
|
+
muellerhoff: "'Herr Von Muellerhoff', cursive",
|
33
|
+
dawning: "'Dawning of a New Day', cursive",
|
34
34
|
// New Font Added for Type Signature
|
35
|
-
comingsoon: '
|
36
|
-
dancingScript: '
|
37
|
-
engagement: "Engagement, cursive",
|
38
|
-
gaegu: "Gaegu, cursive",
|
39
|
-
ingridDarling: '
|
40
|
-
kitaOne: "
|
41
|
-
laBelleAurore: '
|
42
|
-
lobster: "Lobster, cursive",
|
43
|
-
meaCulpa: '
|
44
|
-
meddon: "Meddon, cursive",
|
45
|
-
merriWeather: "Merriweather, serif",
|
46
|
-
theGirlNextDoor: '
|
35
|
+
comingsoon: "'Coming Soon', cursive",
|
36
|
+
dancingScript: "'Dancing Script', cursive",
|
37
|
+
engagement: "'Engagement', cursive",
|
38
|
+
gaegu: "'Gaegu', cursive",
|
39
|
+
ingridDarling: "'Ingrid Darling', cursive",
|
40
|
+
kitaOne: "'Kite One', sans - serif",
|
41
|
+
laBelleAurore: "'La Belle Aurore', cursive",
|
42
|
+
lobster: "'Lobster', cursive",
|
43
|
+
meaCulpa: "'Mea Culpa', cursive",
|
44
|
+
meddon: "'Meddon', cursive",
|
45
|
+
merriWeather: "'Merriweather', serif",
|
46
|
+
theGirlNextDoor: "'The Girl Next Door', cursive"
|
47
47
|
};
|
48
48
|
export const fontOptions = Object.keys(fontFamilyMap).map(m => {
|
49
49
|
return {
|
@@ -62,10 +62,7 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
|
|
62
62
|
export const headingMap = {
|
63
63
|
headingOne: "32px",
|
64
64
|
headingTwo: "24px",
|
65
|
-
headingThree: "19px"
|
66
|
-
headingFour: "16px",
|
67
|
-
headingFive: "13px",
|
68
|
-
headingSix: "11px"
|
65
|
+
headingThree: "19px"
|
69
66
|
};
|
70
67
|
export const fontWeightOptions = [{
|
71
68
|
text: "Bold",
|
@@ -2,7 +2,6 @@ import { Editor, Node, Transforms, Element, Path, Range, Text } from "slate";
|
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
3
|
import insertNewLine from "./insertNewLine";
|
4
4
|
import { getDevice } from "../helper/theme";
|
5
|
-
import { activeMark, getSelectedElementStyle } from "./SlateUtilityFunctions";
|
6
5
|
export const windowVar = {};
|
7
6
|
let ST_TIMEOUT = null;
|
8
7
|
const BLOCKS = ["grid", "dataView"];
|
@@ -481,34 +480,6 @@ export const decodeString = str => {
|
|
481
480
|
console.log(err);
|
482
481
|
}
|
483
482
|
};
|
484
|
-
export const getContrastColor = color => {
|
485
|
-
let r, g, b;
|
486
|
-
|
487
|
-
// Check if the color is in hex format
|
488
|
-
if (color.startsWith("#")) {
|
489
|
-
r = parseInt(color.substring(1, 3), 16);
|
490
|
-
g = parseInt(color.substring(3, 5), 16);
|
491
|
-
b = parseInt(color.substring(5, 7), 16);
|
492
|
-
}
|
493
|
-
// Check if the color is in RGB/RGBA format
|
494
|
-
else if (color.startsWith("rgb")) {
|
495
|
-
const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
|
496
|
-
.split(","); // Split the values into an array
|
497
|
-
|
498
|
-
r = parseInt(rgbValues[0]);
|
499
|
-
g = parseInt(rgbValues[1]);
|
500
|
-
b = parseInt(rgbValues[2]);
|
501
|
-
} else {
|
502
|
-
// If the format is not recognized, default to black text
|
503
|
-
return "#000000";
|
504
|
-
}
|
505
|
-
|
506
|
-
// Calculate relative luminance
|
507
|
-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
508
|
-
|
509
|
-
// Return black for light colors, white for dark colors
|
510
|
-
return luminance > 0.5 ? "#000000" : "#FFFFFF";
|
511
|
-
};
|
512
483
|
export const onDeleteKey = (event, {
|
513
484
|
editor
|
514
485
|
}) => {
|
@@ -726,10 +697,6 @@ export const isRestrictedNode = (event, editor) => {
|
|
726
697
|
return isNodeRestricted;
|
727
698
|
}
|
728
699
|
};
|
729
|
-
export function capitalizeFirstLetter(str) {
|
730
|
-
if (!str) return str;
|
731
|
-
return str.charAt(0).toUpperCase() + str.slice(1);
|
732
|
-
}
|
733
700
|
export const insertLineBreakAtEndOfPath = (editor, path) => {
|
734
701
|
try {
|
735
702
|
const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
|
@@ -748,13 +715,6 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
|
|
748
715
|
console.log(err);
|
749
716
|
}
|
750
717
|
};
|
751
|
-
export function isHavingSelection(editor) {
|
752
|
-
try {
|
753
|
-
return editor?.selection && !Range.isCollapsed(editor.selection);
|
754
|
-
} catch (err) {
|
755
|
-
console.log(err);
|
756
|
-
}
|
757
|
-
}
|
758
718
|
const omitNodes = ["site-settings", "page-settings"];
|
759
719
|
export function getInitialValue(value = [], readOnly) {
|
760
720
|
if (readOnly === "readonly" && value?.length) {
|
@@ -785,17 +745,20 @@ export function getInitialValue(value = [], readOnly) {
|
|
785
745
|
}
|
786
746
|
return value;
|
787
747
|
}
|
748
|
+
export function capitalizeFirstLetter(str) {
|
749
|
+
if (!str) return str;
|
750
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
751
|
+
}
|
752
|
+
export function isHavingSelection(editor) {
|
753
|
+
try {
|
754
|
+
return editor?.selection && !Range.isCollapsed(editor.selection);
|
755
|
+
} catch (err) {
|
756
|
+
console.log(err);
|
757
|
+
}
|
758
|
+
}
|
788
759
|
export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
|
789
760
|
return `${defaultCls} ${selected ? selectedClsName : ""}`;
|
790
761
|
}
|
791
|
-
export function handleNegativeInteger(val) {
|
792
|
-
return val < 0 ? 0 : val;
|
793
|
-
}
|
794
|
-
export const containsSurrogatePair = text => {
|
795
|
-
// Match surrogate pairs (high and low surrogate)
|
796
|
-
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
797
|
-
return surrogatePairRegex.test(text);
|
798
|
-
};
|
799
762
|
export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
800
763
|
try {
|
801
764
|
const options = {
|
@@ -809,6 +772,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
|
809
772
|
return [];
|
810
773
|
}
|
811
774
|
};
|
775
|
+
export const containsSurrogatePair = text => {
|
776
|
+
// Match surrogate pairs (high and low surrogate)
|
777
|
+
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
778
|
+
return surrogatePairRegex.test(text);
|
779
|
+
};
|
812
780
|
export const getSlateDom = (editor, range) => {
|
813
781
|
try {
|
814
782
|
const slateDom = ReactEditor.toDOMRange(editor, range);
|
@@ -858,6 +826,9 @@ export const hideSlateSelection = () => {
|
|
858
826
|
const root = document.documentElement;
|
859
827
|
root.style.setProperty("--slate-highlight-bg", "none");
|
860
828
|
};
|
829
|
+
export function handleNegativeInteger(val) {
|
830
|
+
return val < 0 ? 0 : val;
|
831
|
+
}
|
861
832
|
export const isEverythingSelected = editor => {
|
862
833
|
const {
|
863
834
|
selection
|
@@ -887,46 +858,4 @@ export const getCurrentNodeText = editor => {
|
|
887
858
|
} catch (error) {
|
888
859
|
console.log("Error:", error);
|
889
860
|
}
|
890
|
-
};
|
891
|
-
function convertColorToRgb(color) {
|
892
|
-
if (color?.startsWith("#")) {
|
893
|
-
// HEX to RGB
|
894
|
-
let hex = color.replace("#", "");
|
895
|
-
let r, g, b;
|
896
|
-
if (hex.length === 3) {
|
897
|
-
hex = hex.split("").map(x => x + x).join("");
|
898
|
-
}
|
899
|
-
if (hex.length === 6) {
|
900
|
-
[r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
|
901
|
-
return `rgb(${r}, ${g}, ${b})`;
|
902
|
-
}
|
903
|
-
} else {
|
904
|
-
return color;
|
905
|
-
}
|
906
|
-
}
|
907
|
-
export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
|
908
|
-
const colorVars = hideThemeColors ? null : theme?.vars?.colors;
|
909
|
-
let selectedValue = selectedColor;
|
910
|
-
if (colorVars) {
|
911
|
-
const convertedColor = convertColorToRgb(selectedColor);
|
912
|
-
Object.entries(theme.colors).forEach(([key, value]) => {
|
913
|
-
const convertedThemeColor = convertColorToRgb(value);
|
914
|
-
if (convertedThemeColor === convertedColor) {
|
915
|
-
selectedValue = colorVars[key];
|
916
|
-
}
|
917
|
-
});
|
918
|
-
}
|
919
|
-
return selectedValue;
|
920
|
-
};
|
921
|
-
const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
922
|
-
export const getSelectedElementColor = (editor, format, theme) => {
|
923
|
-
const [isThemeText] = Editor.nodes(editor, {
|
924
|
-
at: editor.selection,
|
925
|
-
match: n => themeTextFormats.includes(n?.type)
|
926
|
-
});
|
927
|
-
if (!isThemeText) {
|
928
|
-
return activeMark(editor, "color") || "#000000";
|
929
|
-
}
|
930
|
-
const color = getSelectedElementStyle(format, editor, format);
|
931
|
-
return getSelectedColor(color, theme);
|
932
861
|
};
|