@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.
Files changed (140) hide show
  1. package/dist/Editor/ChatEditor.js +6 -6
  2. package/dist/Editor/CommonEditor.js +21 -82
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +4 -37
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Attachments/Attachments.js +11 -153
  7. package/dist/Editor/Elements/Attachments/AttachmentsButton.js +3 -8
  8. package/dist/Editor/Elements/Button/EditorButton.js +7 -22
  9. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  12. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +55 -134
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +8 -7
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +3 -8
  16. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +1 -1
  17. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +1 -1
  18. package/dist/Editor/Elements/Embed/Embed.css +0 -5
  19. package/dist/Editor/Elements/Embed/Embed.js +43 -37
  20. package/dist/Editor/Elements/Embed/Image.js +22 -242
  21. package/dist/Editor/Elements/Embed/Video.js +32 -277
  22. package/dist/Editor/Elements/Form/Form.js +35 -10
  23. package/dist/Editor/Elements/Form/FormField.js +1 -1
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
  26. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +75 -34
  27. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +5 -9
  28. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
  29. package/dist/Editor/Elements/FreeGrid/styles.js +0 -15
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +3 -2
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +13 -2
  34. package/dist/Editor/Elements/SimpleText/index.js +1 -4
  35. package/dist/Editor/Elements/Table/Table.js +1 -2
  36. package/dist/Editor/Elements/Table/TableCell.js +3 -10
  37. package/dist/Editor/Elements/Title/title.js +5 -4
  38. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -4
  39. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +3 -5
  40. package/dist/Editor/Styles/EditorStyles.js +5 -16
  41. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  42. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  43. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  44. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -33
  45. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +1 -3
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +23 -25
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +5 -15
  50. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +7 -65
  52. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -66
  53. package/dist/Editor/Toolbar/PopupTool/index.js +4 -6
  54. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  55. package/dist/Editor/common/ColorPickerButton.js +19 -38
  56. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  57. package/dist/Editor/common/FontLoader/FontLoader.js +0 -1
  58. package/dist/Editor/common/Icon.js +0 -28
  59. package/dist/Editor/common/ImageSelector/ImageSelector.js +7 -45
  60. package/dist/Editor/common/ImageSelector/Options/Upload.js +11 -26
  61. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  62. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  63. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  64. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  65. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  66. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +7 -20
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -2
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +7 -20
  72. package/dist/Editor/common/RnD/GuideLines/styles.js +1 -1
  73. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  74. package/dist/Editor/common/RnD/Utils/gridDropItem.js +11 -28
  75. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  76. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +63 -52
  77. package/dist/Editor/common/RnD/VirtualElement/helper.js +68 -248
  78. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
  79. package/dist/Editor/common/RnD/index.js +14 -61
  80. package/dist/Editor/common/Shorthands/elements.js +0 -54
  81. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  82. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  83. package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -1
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -10
  85. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  91. package/dist/Editor/common/StyleBuilder/formStyle.js +13 -19
  92. package/dist/Editor/common/StyleBuilder/index.js +4 -8
  93. package/dist/Editor/common/Uploader.js +17 -118
  94. package/dist/Editor/common/iconslist.js +0 -21
  95. package/dist/Editor/commonStyle.js +3 -37
  96. package/dist/Editor/helper/index.js +1 -4
  97. package/dist/Editor/helper/theme.js +2 -203
  98. package/dist/Editor/hooks/useMouseMove.js +3 -12
  99. package/dist/Editor/hooks/useTable.js +1 -62
  100. package/dist/Editor/plugins/withEmbeds.js +1 -1
  101. package/dist/Editor/plugins/withHTML.js +3 -56
  102. package/dist/Editor/plugins/withTable.js +1 -1
  103. package/dist/Editor/service/fileupload.js +0 -70
  104. package/dist/Editor/theme/ThemeList.js +173 -50
  105. package/dist/Editor/utils/SlateUtilityFunctions.js +38 -162
  106. package/dist/Editor/utils/button.js +17 -1
  107. package/dist/Editor/utils/font.js +37 -40
  108. package/dist/Editor/utils/helper.js +3 -76
  109. package/dist/Editor/utils/insertAppHeader.js +4 -8
  110. package/package.json +1 -1
  111. package/dist/Editor/Elements/Attachments/AttachmentStyles.js +0 -16
  112. package/dist/Editor/Elements/FreeGrid/helper.js +0 -194
  113. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  114. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  115. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  116. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  117. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  118. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  119. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  120. package/dist/Editor/common/CustomSelect.js +0 -43
  121. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  122. package/dist/Editor/common/UploaderWithProgress.js +0 -183
  123. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  124. package/dist/Editor/hooks/useThemeValues.js +0 -63
  125. package/dist/Editor/theme/index.js +0 -149
  126. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  127. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  128. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  129. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  130. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  131. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  132. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  133. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  134. package/dist/Editor/themeSettings/icons.js +0 -60
  135. package/dist/Editor/themeSettings/index.js +0 -380
  136. package/dist/Editor/themeSettings/style.js +0 -299
  137. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  138. package/dist/Editor/themeSettingsAI/index.js +0 -355
  139. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  140. 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: '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',
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: '"Coming Soon", cursive',
36
- dancingScript: '"Dancing Script", cursive',
37
- engagement: "Engagement, cursive",
38
- gaegu: "Gaegu, cursive",
39
- ingridDarling: '"Ingrid Darling", cursive',
40
- kitaOne: "Times",
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'
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 = isEmptyTextNode(lastElement) && !lastElement.children?.some(c => BLOCKS.includes(c.type));
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
- // clearWindowSelection();
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "11.1.0",
3
+ "version": "11.1.1",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -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
- };