@flozy/editor 11.2.1 → 11.2.2
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 +7 -7
- package/dist/Editor/CommonEditor.js +24 -86
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +4 -37
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Attachments/Attachments.js +11 -154
- package/dist/Editor/Elements/Attachments/AttachmentsButton.js +3 -8
- package/dist/Editor/Elements/Button/EditorButton.js +7 -22
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +55 -134
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +8 -7
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +3 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +1 -1
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +43 -37
- package/dist/Editor/Elements/Embed/Image.js +22 -242
- package/dist/Editor/Elements/Embed/Video.js +32 -277
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +6 -9
- package/dist/Editor/Elements/EmbedScript/styles.js +1 -17
- package/dist/Editor/Elements/Form/FormField.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -25
- package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +76 -37
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +5 -9
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -15
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -2
- package/dist/Editor/Elements/Table/Table.js +1 -2
- package/dist/Editor/Elements/Table/TableCell.js +3 -10
- package/dist/Editor/Elements/Title/title.js +5 -4
- package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -4
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +3 -5
- package/dist/Editor/Styles/EditorStyles.js +5 -19
- 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 +29 -33
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +23 -25
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +5 -15
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +7 -65
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -66
- package/dist/Editor/Toolbar/PopupTool/index.js +4 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +19 -38
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -1
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +7 -45
- package/dist/Editor/common/ImageSelector/Options/Upload.js +11 -26
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +7 -20
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +7 -20
- package/dist/Editor/common/RnD/GuideLines/styles.js +1 -1
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +11 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +63 -52
- package/dist/Editor/common/RnD/VirtualElement/helper.js +68 -248
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
- package/dist/Editor/common/RnD/index.js +14 -61
- package/dist/Editor/common/Shorthands/elements.js +3 -55
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +3 -13
- 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/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/formStyle.js +13 -19
- package/dist/Editor/common/StyleBuilder/index.js +4 -8
- package/dist/Editor/common/Uploader.js +17 -118
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +53 -111
- package/dist/Editor/helper/index.js +1 -4
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -12
- package/dist/Editor/hooks/useTable.js +1 -62
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -56
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/service/fileupload.js +0 -70
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +40 -165
- package/dist/Editor/utils/accordion.js +1 -1
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/formfield.js +2 -2
- package/dist/Editor/utils/helper.js +3 -101
- package/dist/Editor/utils/insertAppHeader.js +4 -8
- package/package.json +1 -1
- package/dist/Editor/Elements/Attachments/AttachmentStyles.js +0 -16
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -194
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/UploaderWithProgress.js +0 -183
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
|
|
34
34
|
import CheckList from "../Elements/List/CheckList";
|
35
35
|
import { getTextColor, isEmptyTextNode } from "../helper";
|
36
36
|
import Attachments from "../Elements/Attachments/Attachments";
|
37
|
-
import { getBreakpointLineSpacing, getBreakPointsValue, getDevice,
|
37
|
+
import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, groupByBreakpoint } from "../helper/theme";
|
38
38
|
import Variables from "../Elements/Variables/Variable";
|
39
|
+
import insertNewLine from "./insertNewLine";
|
39
40
|
import Divider from "../Elements/Divider/Divider";
|
40
41
|
import { getBorderColor, getSlateDom } from "./helper";
|
41
42
|
import Code from "../Elements/EmbedScript/Code";
|
42
|
-
import { ReactEditor } from "slate-react";
|
43
43
|
import FreeGrid from "../Elements/FreeGrid/FreeGrid";
|
44
44
|
import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
|
45
45
|
import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
|
@@ -47,7 +47,7 @@ import DataView from "../Elements/DataView/DataView";
|
|
47
47
|
import ViewData from "../Elements/DataView/Layouts/ViewData";
|
48
48
|
import ColumnView from "../Elements/DataView/Layouts/ColumnView";
|
49
49
|
import SearchAttachment from "../Elements/Search/SearchAttachment";
|
50
|
-
import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
|
50
|
+
// import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
|
51
51
|
import { jsx as _jsx } from "react/jsx-runtime";
|
52
52
|
const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
|
53
53
|
const list_types = ["orderedList", "unorderedList"];
|
@@ -55,17 +55,7 @@ const LIST_FORMAT_TYPE = {
|
|
55
55
|
orderedList: "list-item",
|
56
56
|
unorderedList: "list-item"
|
57
57
|
};
|
58
|
-
|
59
|
-
// const NEWLINESAFTER = [
|
60
|
-
// "headingOne",
|
61
|
-
// "headingTwo",
|
62
|
-
// "headingThree",
|
63
|
-
// "headingFour",
|
64
|
-
// "headingFive",
|
65
|
-
// "headingSix",
|
66
|
-
// ];
|
67
|
-
|
68
|
-
const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
58
|
+
const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
|
69
59
|
export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
70
60
|
const isActive = isBlockActive(editor, format);
|
71
61
|
const isList = list_types.includes(format);
|
@@ -98,9 +88,8 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
98
88
|
if (!selection) {
|
99
89
|
Transforms.insertText(editor, "");
|
100
90
|
}
|
101
|
-
const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
|
102
91
|
Transforms.setNodes(editor, {
|
103
|
-
type: isActive ?
|
92
|
+
type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
|
104
93
|
...attr
|
105
94
|
});
|
106
95
|
if (isList && !isActive) {
|
@@ -109,12 +98,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
109
98
|
children: []
|
110
99
|
});
|
111
100
|
}
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
// }
|
101
|
+
if (NEWLINESAFTER.indexOf(format) > -1) {
|
102
|
+
insertNewLine(editor);
|
103
|
+
}
|
116
104
|
};
|
117
|
-
|
118
105
|
export const addMarkData = (editor, data) => {
|
119
106
|
try {
|
120
107
|
Editor.addMark(editor, data.format, data.value);
|
@@ -123,14 +110,9 @@ export const addMarkData = (editor, data) => {
|
|
123
110
|
}
|
124
111
|
};
|
125
112
|
export const toggleMark = (editor, format) => {
|
126
|
-
const isActive =
|
113
|
+
const isActive = isMarkActive(editor, format);
|
127
114
|
if (isActive) {
|
128
|
-
|
129
|
-
if (isThemeSupportedMark) {
|
130
|
-
Editor.addMark(editor, format, false);
|
131
|
-
} else {
|
132
|
-
Editor.removeMark(editor, format);
|
133
|
-
}
|
115
|
+
Editor.removeMark(editor, format);
|
134
116
|
} else {
|
135
117
|
Editor.addMark(editor, format, true);
|
136
118
|
}
|
@@ -144,58 +126,6 @@ export const isMarkActive = (editor, format) => {
|
|
144
126
|
return null;
|
145
127
|
}
|
146
128
|
};
|
147
|
-
export const isMarkBtnActive = (editor, format) => {
|
148
|
-
switch (format) {
|
149
|
-
case "bold":
|
150
|
-
{
|
151
|
-
const style = getSelectedElementStyle("font-weight", editor);
|
152
|
-
return style === "700";
|
153
|
-
}
|
154
|
-
case "italic":
|
155
|
-
{
|
156
|
-
const style = getSelectedElementStyle("font-style", editor);
|
157
|
-
return style === format;
|
158
|
-
}
|
159
|
-
// case "underline": {
|
160
|
-
// const style = getSelectedElementStyle("text-decoration");
|
161
|
-
|
162
|
-
// return style?.includes(format);
|
163
|
-
// }
|
164
|
-
// case "strikethrough": {
|
165
|
-
// const style = getSelectedElementStyle("text-decoration");
|
166
|
-
|
167
|
-
// return style?.includes("line-through");
|
168
|
-
// }
|
169
|
-
default:
|
170
|
-
return isMarkActive(editor, format);
|
171
|
-
}
|
172
|
-
};
|
173
|
-
export const getSelectedElementStyle = (styleProperty, editor, format) => {
|
174
|
-
try {
|
175
|
-
if (!editor.selection) {
|
176
|
-
return "";
|
177
|
-
}
|
178
|
-
if (Range.isCollapsed(editor.selection)) {
|
179
|
-
return "";
|
180
|
-
}
|
181
|
-
if (format) {
|
182
|
-
const value = activeMark(editor, format, true);
|
183
|
-
if (value) {
|
184
|
-
return value;
|
185
|
-
}
|
186
|
-
}
|
187
|
-
const domRange = ReactEditor.toDOMRange(editor, editor.selection);
|
188
|
-
const selectedDomNode = domRange.commonAncestorContainer;
|
189
|
-
|
190
|
-
// If it's a text node, get its parent element
|
191
|
-
const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
|
192
|
-
if (selectedElement) {
|
193
|
-
return getElementProperty(selectedElement, styleProperty);
|
194
|
-
}
|
195
|
-
} catch (err) {
|
196
|
-
console.log(err);
|
197
|
-
}
|
198
|
-
};
|
199
129
|
export const isBlockActive = (editor, format) => {
|
200
130
|
const [match] = Editor.nodes(editor, {
|
201
131
|
match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
|
@@ -221,7 +151,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
|
|
221
151
|
});
|
222
152
|
}
|
223
153
|
};
|
224
|
-
export const activeMark = (editor, format
|
154
|
+
export const activeMark = (editor, format) => {
|
225
155
|
const defaultMarkData = {
|
226
156
|
color: "#000000",
|
227
157
|
bgColor: "#FFFFFF",
|
@@ -231,7 +161,7 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
231
161
|
};
|
232
162
|
try {
|
233
163
|
const marks = Editor.marks(editor);
|
234
|
-
let defaultValue =
|
164
|
+
let defaultValue = defaultMarkData[format];
|
235
165
|
const {
|
236
166
|
selection
|
237
167
|
} = editor || {};
|
@@ -248,31 +178,6 @@ export const activeMark = (editor, format, noDefaultValue) => {
|
|
248
178
|
return null;
|
249
179
|
}
|
250
180
|
};
|
251
|
-
|
252
|
-
// to avoid the styles, that automatically assign from themes
|
253
|
-
const getThemeMarkedLeaf = (leaf, children) => {
|
254
|
-
const {
|
255
|
-
italic,
|
256
|
-
bold
|
257
|
-
} = leaf || {};
|
258
|
-
const style = {};
|
259
|
-
if (italic === false) {
|
260
|
-
style.fontStyle = "normal";
|
261
|
-
}
|
262
|
-
if (bold === false) {
|
263
|
-
style.fontWeight = "normal";
|
264
|
-
}
|
265
|
-
if (Object.keys(style).length) {
|
266
|
-
children = /*#__PURE__*/_jsx(Box, {
|
267
|
-
component: "span",
|
268
|
-
sx: {
|
269
|
-
"& span": style
|
270
|
-
},
|
271
|
-
children: children
|
272
|
-
});
|
273
|
-
}
|
274
|
-
return children;
|
275
|
-
};
|
276
181
|
export const getMarked = (leaf, children, theme) => {
|
277
182
|
const className = leaf?.doublequote ? "doublequote" : "";
|
278
183
|
const lineH = leaf?.lineHeight;
|
@@ -302,7 +207,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
302
207
|
children: children
|
303
208
|
});
|
304
209
|
}
|
305
|
-
children = getThemeMarkedLeaf(leaf, children);
|
306
210
|
if (leaf.strikethrough) {
|
307
211
|
children = /*#__PURE__*/_jsx("span", {
|
308
212
|
style: {
|
@@ -330,15 +234,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
330
234
|
if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
|
331
235
|
const family = leaf?.fontFamily;
|
332
236
|
const textStyles = getTextColor(leaf?.color);
|
333
|
-
const fontSize = {
|
334
|
-
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
335
|
-
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
336
|
-
};
|
337
|
-
const fontSizesImportant = {};
|
338
|
-
Object.entries(fontSize).forEach(([key, value]) => {
|
339
|
-
fontSizesImportant[key] = `${value} !important`;
|
340
|
-
});
|
341
|
-
const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
|
342
237
|
children = /*#__PURE__*/_jsx("span", {
|
343
238
|
style: {
|
344
239
|
background: leaf.bgColor
|
@@ -347,13 +242,12 @@ export const getMarked = (leaf, children, theme) => {
|
|
347
242
|
className: `${className} leaf-item`,
|
348
243
|
component: "span",
|
349
244
|
sx: {
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
},
|
356
|
-
...fontSizeWithBreakpoints,
|
245
|
+
...groupByBreakpoint({
|
246
|
+
fontSize: {
|
247
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
248
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
249
|
+
}
|
250
|
+
}, theme),
|
357
251
|
// ...wrapThemeBreakpoints(
|
358
252
|
// {
|
359
253
|
// lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
@@ -374,8 +268,7 @@ export const getMarked = (leaf, children, theme) => {
|
|
374
268
|
WebkitTextFillColor: "unset !important"
|
375
269
|
},
|
376
270
|
style: {
|
377
|
-
"--fontSize_xs": leaf?.fontSize?.xs || "auto"
|
378
|
-
"--fontSize_lg": leaf?.fontSize?.lg || "auto"
|
271
|
+
"--fontSize_xs": leaf?.fontSize?.xs || "auto"
|
379
272
|
},
|
380
273
|
children: children
|
381
274
|
})
|
@@ -406,84 +299,67 @@ export const getBlock = props => {
|
|
406
299
|
const {
|
407
300
|
translation
|
408
301
|
} = customProps;
|
409
|
-
const commonHeadingProps = () => ({
|
410
|
-
...attributes,
|
411
|
-
...element.attr,
|
412
|
-
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element disablePointerEvent`
|
413
|
-
});
|
414
|
-
const commonParaProps = paraType => ({
|
415
|
-
...attributes,
|
416
|
-
...element.attr,
|
417
|
-
className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element disablePointerEvent ${paraType}`
|
418
|
-
});
|
419
302
|
const breakpoint = getDevice(window.innerWidth);
|
420
303
|
const lineH = element?.children[0]?.lineHeight;
|
421
304
|
const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
422
305
|
switch (element.type) {
|
423
306
|
case "headingOne":
|
424
307
|
return /*#__PURE__*/_jsx("h1", {
|
425
|
-
...
|
308
|
+
...attributes,
|
309
|
+
...element.attr,
|
310
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
426
311
|
placeholder: translation("Heading 1"),
|
427
312
|
children: children
|
428
313
|
});
|
429
314
|
case "headingTwo":
|
430
315
|
return /*#__PURE__*/_jsx("h2", {
|
431
|
-
...
|
316
|
+
...attributes,
|
317
|
+
...element.attr,
|
318
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
432
319
|
placeholder: translation("Heading 2"),
|
433
320
|
children: children
|
434
321
|
});
|
435
322
|
case "headingThree":
|
436
323
|
return /*#__PURE__*/_jsx("h3", {
|
437
|
-
...
|
324
|
+
...attributes,
|
325
|
+
...element.attr,
|
326
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
438
327
|
placeholder: translation("Heading 3"),
|
439
328
|
children: children
|
440
329
|
});
|
441
330
|
case "headingFour":
|
442
331
|
return /*#__PURE__*/_jsx("h4", {
|
443
|
-
...
|
332
|
+
...attributes,
|
333
|
+
...element.attr,
|
334
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
444
335
|
placeholder: translation("Heading 4"),
|
445
336
|
children: children
|
446
337
|
});
|
447
338
|
case "headingFive":
|
448
339
|
return /*#__PURE__*/_jsx("h5", {
|
449
|
-
...
|
340
|
+
...attributes,
|
341
|
+
...element.attr,
|
342
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
450
343
|
placeholder: translation("Heading 5"),
|
451
344
|
children: children
|
452
345
|
});
|
453
346
|
case "headingSix":
|
454
347
|
return /*#__PURE__*/_jsx("h6", {
|
455
|
-
...
|
348
|
+
...attributes,
|
349
|
+
...element.attr,
|
350
|
+
className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
|
456
351
|
placeholder: translation("Heading 6"),
|
457
352
|
children: children
|
458
353
|
});
|
459
|
-
case "paragraphOne":
|
460
|
-
return /*#__PURE__*/_jsx("p", {
|
461
|
-
...commonParaProps("para1"),
|
462
|
-
placeholder: "Paragraph 1",
|
463
|
-
children: children
|
464
|
-
});
|
465
|
-
case "paragraphTwo":
|
466
|
-
return /*#__PURE__*/_jsx("p", {
|
467
|
-
...commonParaProps("para2"),
|
468
|
-
placeholder: "Paragraph 2",
|
469
|
-
children: children
|
470
|
-
});
|
471
|
-
case "paragraphThree":
|
472
|
-
return /*#__PURE__*/_jsx("p", {
|
473
|
-
...commonParaProps("para3"),
|
474
|
-
placeholder: "Paragraph 3",
|
475
|
-
children: children
|
476
|
-
});
|
477
354
|
case "blockquote":
|
478
355
|
return /*#__PURE__*/_jsx("blockquote", {
|
479
356
|
...attributes,
|
480
357
|
...element.attr,
|
481
|
-
className: "blockQuoteComp",
|
482
358
|
style: {
|
483
359
|
// borderColor: element?.color || "transparent",
|
484
360
|
...getBorderColor(element?.color || "transparent", 3),
|
485
|
-
background: element?.bgColor,
|
486
|
-
padding: "16px"
|
361
|
+
background: element?.bgColor || "none",
|
362
|
+
padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
|
487
363
|
borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
|
488
364
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
489
365
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
@@ -708,8 +584,7 @@ export const getBlock = props => {
|
|
708
584
|
case "docs":
|
709
585
|
case "pdf":
|
710
586
|
case "xls":
|
711
|
-
case "
|
712
|
-
case "ppt":
|
587
|
+
case "csv":
|
713
588
|
return /*#__PURE__*/_jsx(Attachments, {
|
714
589
|
...props
|
715
590
|
});
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Editor, Path, Transforms } from "slate";
|
1
|
+
import { Editor, Element, Path, Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
3
|
import { ALLOWED_TEXT_NODES, getNode, getNodeText, getNodeWithType, getSelectedText } from "./helper";
|
4
4
|
import { isMobileWindow } from "../helper";
|
@@ -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;
|
@@ -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",
|
@@ -13,8 +13,8 @@ export const formField = data => {
|
|
13
13
|
text: ""
|
14
14
|
}],
|
15
15
|
field_type: "text",
|
16
|
-
bgColor: data?.bgColor ? data?.bgColor : "",
|
17
|
-
borderColor: data?.borderColor ? data?.borderColor : "",
|
16
|
+
bgColor: data?.bgColor ? data?.bgColor : "rgba(255, 255, 255, 1)",
|
17
|
+
borderColor: data?.borderColor ? data?.borderColor : "#ccc",
|
18
18
|
bannerSpacing: {
|
19
19
|
left: 16,
|
20
20
|
right: 16,
|
@@ -2,9 +2,7 @@ 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
|
import { getCurrentElementText } from "../plugins/withHTML";
|
7
|
-
import { isEmptyTextNode } from "../helper";
|
8
6
|
export const windowVar = {};
|
9
7
|
let ST_TIMEOUT = null;
|
10
8
|
const BLOCKS = ["grid", "dataView"];
|
@@ -175,7 +173,7 @@ export const handleInsertLastElement = (event, editor) => {
|
|
175
173
|
if (isFreeGrid) {
|
176
174
|
return;
|
177
175
|
}
|
178
|
-
const isLastElementEmpty =
|
176
|
+
const isLastElementEmpty = lastElement && lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => BLOCKS.includes(c.type));
|
179
177
|
if (!ReactEditor.isFocused(editor)) {
|
180
178
|
if (isLastElementEmpty) {
|
181
179
|
if (hasPath) {
|
@@ -494,34 +492,6 @@ export const decodeString = str => {
|
|
494
492
|
console.log(err);
|
495
493
|
}
|
496
494
|
};
|
497
|
-
export const getContrastColor = color => {
|
498
|
-
let r, g, b;
|
499
|
-
|
500
|
-
// Check if the color is in hex format
|
501
|
-
if (color.startsWith("#")) {
|
502
|
-
r = parseInt(color.substring(1, 3), 16);
|
503
|
-
g = parseInt(color.substring(3, 5), 16);
|
504
|
-
b = parseInt(color.substring(5, 7), 16);
|
505
|
-
}
|
506
|
-
// Check if the color is in RGB/RGBA format
|
507
|
-
else if (color.startsWith("rgb")) {
|
508
|
-
const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
|
509
|
-
.split(","); // Split the values into an array
|
510
|
-
|
511
|
-
r = parseInt(rgbValues[0]);
|
512
|
-
g = parseInt(rgbValues[1]);
|
513
|
-
b = parseInt(rgbValues[2]);
|
514
|
-
} else {
|
515
|
-
// If the format is not recognized, default to black text
|
516
|
-
return "#000000";
|
517
|
-
}
|
518
|
-
|
519
|
-
// Calculate relative luminance
|
520
|
-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
521
|
-
|
522
|
-
// Return black for light colors, white for dark colors
|
523
|
-
return luminance > 0.5 ? "#000000" : "#FFFFFF";
|
524
|
-
};
|
525
495
|
export const onDeleteKey = (event, {
|
526
496
|
editor
|
527
497
|
}) => {
|
@@ -859,8 +829,7 @@ export const clearWindowSelection = () => {
|
|
859
829
|
|
860
830
|
export const viewSlateSelection = () => {
|
861
831
|
// if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
|
862
|
-
|
863
|
-
|
832
|
+
clearWindowSelection();
|
864
833
|
const selectionBg = "rgba(35, 131, 226, 0.35)";
|
865
834
|
const root = document.documentElement;
|
866
835
|
root.style.setProperty("--slate-highlight-bg", selectionBg);
|
@@ -1014,71 +983,4 @@ export const handleCopy = (event, editor) => {
|
|
1014
983
|
event.clipboardData?.setData("text/plain", text);
|
1015
984
|
event.clipboardData?.setData("application/x-slate-fragment", encodedFragment);
|
1016
985
|
};
|
1017
|
-
export const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "blockquote"];
|
1018
|
-
function convertColorToRgb(color) {
|
1019
|
-
if (color?.startsWith("#")) {
|
1020
|
-
// HEX to RGB
|
1021
|
-
let hex = color.replace("#", "");
|
1022
|
-
let r, g, b;
|
1023
|
-
if (hex.length === 3) {
|
1024
|
-
hex = hex.split("").map(x => x + x).join("");
|
1025
|
-
}
|
1026
|
-
if (hex.length === 6) {
|
1027
|
-
[r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
|
1028
|
-
return `rgb(${r}, ${g}, ${b})`;
|
1029
|
-
}
|
1030
|
-
} else {
|
1031
|
-
return color;
|
1032
|
-
}
|
1033
|
-
}
|
1034
|
-
export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
|
1035
|
-
const colorVars = hideThemeColors ? null : theme?.vars?.colors;
|
1036
|
-
let selectedValue = selectedColor;
|
1037
|
-
if (colorVars) {
|
1038
|
-
const convertedColor = convertColorToRgb(selectedColor);
|
1039
|
-
Object.entries(theme.colors).forEach(([key, value]) => {
|
1040
|
-
const convertedThemeColor = convertColorToRgb(value);
|
1041
|
-
if (convertedThemeColor === convertedColor) {
|
1042
|
-
selectedValue = colorVars[key];
|
1043
|
-
}
|
1044
|
-
});
|
1045
|
-
}
|
1046
|
-
return selectedValue;
|
1047
|
-
};
|
1048
|
-
const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
1049
|
-
export const getSelectedElementColor = (editor, format, theme) => {
|
1050
|
-
const [isThemeText] = Editor.nodes(editor, {
|
1051
|
-
at: editor.selection,
|
1052
|
-
match: n => themeTextFormats.includes(n?.type)
|
1053
|
-
});
|
1054
|
-
if (!isThemeText) {
|
1055
|
-
return activeMark(editor, "color") || "#000000";
|
1056
|
-
}
|
1057
|
-
const color = getSelectedElementStyle(format, editor, format);
|
1058
|
-
return getSelectedColor(color, theme);
|
1059
|
-
};
|
1060
|
-
export const GetsectionBgImage = sectionBackgroundImage => {
|
1061
|
-
if (sectionBackgroundImage && sectionBackgroundImage !== "none") {
|
1062
|
-
if (typeof sectionBackgroundImage === "object") {
|
1063
|
-
return {
|
1064
|
-
backgroundImage: `url(${sectionBackgroundImage?.embedURL})`
|
1065
|
-
};
|
1066
|
-
} else if (typeof sectionBackgroundImage === "string") {
|
1067
|
-
return {
|
1068
|
-
backgroundImage: `url(${sectionBackgroundImage})`
|
1069
|
-
};
|
1070
|
-
}
|
1071
|
-
} else {
|
1072
|
-
return {};
|
1073
|
-
}
|
1074
|
-
};
|
1075
|
-
export const GetPageBgImage = pageBgImage => {
|
1076
|
-
if (pageBgImage && pageBgImage !== "none") {
|
1077
|
-
if (typeof pageBgImage === "object") {
|
1078
|
-
return pageBgImage.embedURL;
|
1079
|
-
} else if (typeof pageBgImage === "string") {
|
1080
|
-
return pageBgImage;
|
1081
|
-
}
|
1082
|
-
}
|
1083
|
-
return null;
|
1084
|
-
};
|
986
|
+
export const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "blockquote"];
|
@@ -8,31 +8,27 @@ export const appHeaderNode = ({
|
|
8
8
|
appLogo: "none",
|
9
9
|
menus: menus || [{
|
10
10
|
type: "menu",
|
11
|
-
url: "",
|
12
|
-
placeholder: "home",
|
11
|
+
url: "home",
|
13
12
|
target: "",
|
14
13
|
text: "Home",
|
15
14
|
linkType: "page"
|
16
15
|
}, {
|
17
16
|
type: "menu",
|
18
|
-
url: "",
|
19
|
-
placeholder: "wireframe2",
|
17
|
+
url: "wireframe2",
|
20
18
|
target: "",
|
21
19
|
text: "Wireframe",
|
22
20
|
linkType: "page"
|
23
21
|
}, {
|
24
22
|
type: "menu",
|
25
|
-
url: "",
|
23
|
+
url: "https://www.google.com",
|
26
24
|
target: "",
|
27
|
-
placeholder: "Work",
|
28
25
|
text: "Work",
|
29
26
|
linkType: "webAddress"
|
30
27
|
}, {
|
31
28
|
type: "menu",
|
32
|
-
url: "",
|
29
|
+
url: "https://www.google.com",
|
33
30
|
target: "",
|
34
31
|
text: "Contact",
|
35
|
-
placeholder: "Contact",
|
36
32
|
linkType: "webAddress"
|
37
33
|
}],
|
38
34
|
menuStyle: "stacked",
|