@flozy/editor 11.1.0 → 11.1.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 +6 -6
- package/dist/Editor/CommonEditor.js +21 -82
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +4 -37
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Attachments/Attachments.js +11 -153
- 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.css +0 -5
- 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/Form/Form.js +35 -10
- package/dist/Editor/Elements/Form/FormField.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +75 -34
- 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/Signature/SignatureOptions/TypeSignature.js +3 -2
- package/dist/Editor/Elements/Signature/SignaturePopup.js +13 -2
- package/dist/Editor/Elements/SimpleText/index.js +1 -4
- 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 -16
- 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 +0 -54
- 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 +2 -10
- 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/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 +3 -37
- 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 +38 -162
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +3 -76
- 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
@@ -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,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,46 +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
|
-
};
|
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",
|
package/package.json
CHANGED
@@ -1,16 +0,0 @@
|
|
1
|
-
const useAttachmentStyle = theme => ({
|
2
|
-
attachmentRoot: {
|
3
|
-
"& .uploadinDetails": {
|
4
|
-
display: "flex",
|
5
|
-
gap: "10px",
|
6
|
-
"& .MuiCircularProgress-root": {
|
7
|
-
width: "15px !important",
|
8
|
-
height: "15px !important"
|
9
|
-
}
|
10
|
-
},
|
11
|
-
"& .cancelBtn": {
|
12
|
-
display: "contents"
|
13
|
-
}
|
14
|
-
}
|
15
|
-
});
|
16
|
-
export default useAttachmentStyle;
|
@@ -1,194 +0,0 @@
|
|
1
|
-
import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
|
2
|
-
import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
|
3
|
-
import { RND_ITEMS } from "../../helper";
|
4
|
-
export const ELEMENT_CASE = {
|
5
|
-
ADD_TEXT: "addText",
|
6
|
-
ADD_BUTTON: "addButton",
|
7
|
-
ADD_SIGNATURE: "addSignature",
|
8
|
-
ADD_IMAGE: "addImage",
|
9
|
-
ADD_VIDEO: "addVideo",
|
10
|
-
ADD_TABLE: "addTable",
|
11
|
-
ADD_CODE: "addCode",
|
12
|
-
ADD_BOX: "addBox",
|
13
|
-
ADD_FORM: "addForm",
|
14
|
-
ADD_APP_HEADER: "addAppHeader",
|
15
|
-
ADD_DIVIDER: "addDivider"
|
16
|
-
};
|
17
|
-
const commonXsValues = {
|
18
|
-
top_xs: 0,
|
19
|
-
marginTop_xs: 12,
|
20
|
-
left_xs: 24,
|
21
|
-
width_xs: 272,
|
22
|
-
xs_updatedOn: new Date().getTime()
|
23
|
-
};
|
24
|
-
const elementValues = {
|
25
|
-
[ELEMENT_CASE.ADD_TEXT]: {
|
26
|
-
gridArea: "3 / 1 / 4 / 2",
|
27
|
-
left: 50,
|
28
|
-
marginTop: 0,
|
29
|
-
top: 0,
|
30
|
-
width: 170,
|
31
|
-
height: 30,
|
32
|
-
height_xs: 50,
|
33
|
-
...commonXsValues
|
34
|
-
},
|
35
|
-
[ELEMENT_CASE.ADD_BUTTON]: {
|
36
|
-
gridArea: "3 / 1 / 4 / 2",
|
37
|
-
left: 50,
|
38
|
-
marginTop: 0,
|
39
|
-
top: 0,
|
40
|
-
width: 143,
|
41
|
-
height: 50,
|
42
|
-
height_xs: 50,
|
43
|
-
...commonXsValues
|
44
|
-
},
|
45
|
-
[ELEMENT_CASE.ADD_SIGNATURE]: {
|
46
|
-
left: 50,
|
47
|
-
marginTop: 0,
|
48
|
-
top: 0,
|
49
|
-
width: 217,
|
50
|
-
height: 173,
|
51
|
-
height_xs: 173,
|
52
|
-
...commonXsValues
|
53
|
-
},
|
54
|
-
[ELEMENT_CASE.ADD_IMAGE]: {
|
55
|
-
gridArea: "3 / 1 / 4 / 2",
|
56
|
-
left: 50,
|
57
|
-
marginTop: 0,
|
58
|
-
top: 0,
|
59
|
-
width: 170,
|
60
|
-
height: 80,
|
61
|
-
height_xs: 80,
|
62
|
-
...commonXsValues
|
63
|
-
},
|
64
|
-
[ELEMENT_CASE.ADD_VIDEO]: {
|
65
|
-
height: 370,
|
66
|
-
width: 650,
|
67
|
-
height_xs: 300,
|
68
|
-
...commonXsValues
|
69
|
-
},
|
70
|
-
[ELEMENT_CASE.ADD_TABLE]: {
|
71
|
-
height: 150,
|
72
|
-
width: 400,
|
73
|
-
height_xs: 165,
|
74
|
-
...commonXsValues
|
75
|
-
},
|
76
|
-
[ELEMENT_CASE.ADD_CODE]: {
|
77
|
-
gridArea: "3 / 1 / 4 / 2",
|
78
|
-
left: 50,
|
79
|
-
marginTop: 0,
|
80
|
-
top: 0,
|
81
|
-
width: 400,
|
82
|
-
height: 300,
|
83
|
-
...commonXsValues
|
84
|
-
},
|
85
|
-
[ELEMENT_CASE.ADD_BOX]: {
|
86
|
-
height_xs: 300,
|
87
|
-
...commonXsValues
|
88
|
-
},
|
89
|
-
[ELEMENT_CASE.ADD_FORM]: {
|
90
|
-
height: 92,
|
91
|
-
width: 400,
|
92
|
-
height_xs: 80,
|
93
|
-
...commonXsValues
|
94
|
-
},
|
95
|
-
[ELEMENT_CASE.ADD_APP_HEADER]: {
|
96
|
-
height: 60,
|
97
|
-
width: 400,
|
98
|
-
height_xs: 80,
|
99
|
-
...commonXsValues
|
100
|
-
},
|
101
|
-
[ELEMENT_CASE.ADD_DIVIDER]: {
|
102
|
-
gridArea: "3 / 1 / 4 / 2",
|
103
|
-
left: 50,
|
104
|
-
marginTop: 0,
|
105
|
-
top: 0,
|
106
|
-
width: 170,
|
107
|
-
height: 30,
|
108
|
-
height_xs: 24,
|
109
|
-
...commonXsValues
|
110
|
-
}
|
111
|
-
};
|
112
|
-
export const findMaxYValue = (sectionItems, breakpoint) => {
|
113
|
-
let maxY = 0;
|
114
|
-
sectionItems.forEach(item => {
|
115
|
-
if (!item?.type) {
|
116
|
-
return;
|
117
|
-
}
|
118
|
-
const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
|
119
|
-
if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
|
120
|
-
const {
|
121
|
-
bottom
|
122
|
-
} = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
|
123
|
-
maxY = Math.max(maxY, bottom);
|
124
|
-
}
|
125
|
-
});
|
126
|
-
return maxY;
|
127
|
-
};
|
128
|
-
export const convertToGridArea = y => {
|
129
|
-
// Calculate grid position
|
130
|
-
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
131
|
-
|
132
|
-
// to calculate difference inside the grid
|
133
|
-
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
134
|
-
|
135
|
-
// Update grid area
|
136
|
-
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
137
|
-
return {
|
138
|
-
gridArea,
|
139
|
-
marginTop
|
140
|
-
};
|
141
|
-
};
|
142
|
-
const BUFFER_MARGIN_TOP = 12;
|
143
|
-
const getInsertValues = (sectionItems, breakpoint, elValues) => {
|
144
|
-
const y_xs = sectionItems?.length ? findMaxYValue(sectionItems, breakpoint) : 0;
|
145
|
-
const {
|
146
|
-
gridArea,
|
147
|
-
marginTop
|
148
|
-
} = convertToGridArea(y_xs);
|
149
|
-
const appendBp = breakpoint === "lg" ? "" : "_xs";
|
150
|
-
const insertPos = {
|
151
|
-
[`gridArea${appendBp}`]: gridArea,
|
152
|
-
[`marginTop${appendBp}`]: marginTop + BUFFER_MARGIN_TOP
|
153
|
-
};
|
154
|
-
const sectionHeight = y_xs + elValues[`height${appendBp}`] + BUFFER_MARGIN_TOP + 12;
|
155
|
-
return {
|
156
|
-
insertPos,
|
157
|
-
sectionHeight
|
158
|
-
};
|
159
|
-
};
|
160
|
-
export const getElementValues = (type, sectionItems, breakpoint) => {
|
161
|
-
const elValues = elementValues[type] || {};
|
162
|
-
let elInsertPos = {};
|
163
|
-
let sectionVal = {};
|
164
|
-
|
165
|
-
// insert element on xs
|
166
|
-
const {
|
167
|
-
insertPos: insertPos_xs,
|
168
|
-
sectionHeight: sectionHeight_xs
|
169
|
-
} = getInsertValues(sectionItems, "xs", elValues);
|
170
|
-
elInsertPos = {
|
171
|
-
...insertPos_xs
|
172
|
-
};
|
173
|
-
sectionVal.height_xs = sectionHeight_xs;
|
174
|
-
|
175
|
-
// if user in xs, auto-align lg
|
176
|
-
if (breakpoint === "xs") {
|
177
|
-
const {
|
178
|
-
insertPos: insertPos_lg,
|
179
|
-
sectionHeight
|
180
|
-
} = getInsertValues(sectionItems, "lg", elValues);
|
181
|
-
elInsertPos = {
|
182
|
-
...elInsertPos,
|
183
|
-
...insertPos_lg
|
184
|
-
};
|
185
|
-
sectionVal.height = sectionHeight;
|
186
|
-
}
|
187
|
-
return {
|
188
|
-
elValues: {
|
189
|
-
...elValues,
|
190
|
-
...elInsertPos
|
191
|
-
},
|
192
|
-
sectionVal
|
193
|
-
};
|
194
|
-
};
|