@flozy/editor 10.2.3 → 10.2.5

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 (172) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +24 -128
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +2 -6
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  13. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  16. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  17. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  18. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Image.js +2 -3
  21. package/dist/Editor/Elements/Embed/Video.js +1 -1
  22. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  23. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  24. package/dist/Editor/Elements/Form/Form.js +168 -181
  25. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  26. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
  27. package/dist/Editor/Elements/Form/FormField.js +6 -13
  28. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  29. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -36
  30. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  31. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  32. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  33. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  34. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  35. package/dist/Editor/Elements/List/CheckList.js +2 -3
  36. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  37. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  38. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  39. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  40. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  41. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  42. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  43. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  44. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  45. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  46. package/dist/Editor/Elements/Table/Styles.js +0 -7
  47. package/dist/Editor/Elements/Table/Table.js +3 -3
  48. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  49. package/dist/Editor/Elements/Title/title.js +6 -6
  50. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  51. package/dist/Editor/MiniEditor.js +1 -2
  52. package/dist/Editor/Styles/EditorStyles.js +5 -5
  53. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  54. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  55. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  56. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  58. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  59. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  65. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  66. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  67. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  68. package/dist/Editor/common/ColorPickerButton.js +16 -38
  69. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  70. package/dist/Editor/common/FontLoader/FontLoader.js +15 -31
  71. package/dist/Editor/common/Icon.js +1 -31
  72. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  73. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  74. package/dist/Editor/common/LinkSettings/index.js +68 -84
  75. package/dist/Editor/common/LinkSettings/style.js +30 -245
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  91. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  92. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  93. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  94. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  95. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  96. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  97. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  98. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +54 -48
  99. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -143
  100. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  101. package/dist/Editor/common/RnD/index.js +11 -6
  102. package/dist/Editor/common/Select/index.js +0 -2
  103. package/dist/Editor/common/Shorthands/elements.js +11 -65
  104. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  106. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  107. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  108. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  109. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  110. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  111. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  112. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  114. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  115. package/dist/Editor/common/Uploader.js +0 -8
  116. package/dist/Editor/common/iconListV2.js +6 -156
  117. package/dist/Editor/common/iconslist.js +0 -24
  118. package/dist/Editor/commonStyle.js +62 -168
  119. package/dist/Editor/helper/index.js +0 -4
  120. package/dist/Editor/helper/theme.js +2 -203
  121. package/dist/Editor/hooks/useMouseMove.js +5 -8
  122. package/dist/Editor/hooks/useTable.js +4 -5
  123. package/dist/Editor/plugins/withEmbeds.js +1 -1
  124. package/dist/Editor/plugins/withHTML.js +1 -3
  125. package/dist/Editor/plugins/withTable.js +1 -1
  126. package/dist/Editor/theme/ThemeList.js +173 -50
  127. package/dist/Editor/utils/SlateUtilityFunctions.js +45 -169
  128. package/dist/Editor/utils/accordion.js +4 -14
  129. package/dist/Editor/utils/button.js +17 -1
  130. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  131. package/dist/Editor/utils/draftToSlate.js +2 -3
  132. package/dist/Editor/utils/events.js +6 -50
  133. package/dist/Editor/utils/font.js +37 -40
  134. package/dist/Editor/utils/form.js +4 -4
  135. package/dist/Editor/utils/formfield.js +2 -8
  136. package/dist/Editor/utils/helper.js +19 -109
  137. package/dist/Editor/utils/signature.js +9 -2
  138. package/package.json +4 -4
  139. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  140. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  141. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  142. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  143. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  144. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  145. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  146. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  147. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  148. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  149. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  150. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  151. package/dist/Editor/common/CustomSelect.js +0 -43
  152. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  153. package/dist/Editor/common/SnackBar/index.js +0 -43
  154. package/dist/Editor/helper/textIndeces.js +0 -58
  155. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  156. package/dist/Editor/hooks/useThemeValues.js +0 -63
  157. package/dist/Editor/theme/index.js +0 -149
  158. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  159. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  160. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  161. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  162. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  163. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  164. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  165. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  166. package/dist/Editor/themeSettings/icons.js +0 -60
  167. package/dist/Editor/themeSettings/index.js +0 -361
  168. package/dist/Editor/themeSettings/style.js +0 -299
  169. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  170. package/dist/Editor/themeSettingsAI/index.js +0 -355
  171. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  172. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -3,139 +3,31 @@ const useOptionsPopupStyle = ({
3
3
  }) => ({
4
4
  root: {
5
5
  zIndex: 1200,
6
- background: theme?.palette?.editor?.miniToolBarBackground,
7
- border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
8
- borderRadius: "20px",
6
+ background: theme?.palette?.editor?.background,
7
+ borderRadius: "7px",
9
8
  overflow: "hidden",
10
- boxShadow: "0px 0px 12px 4px #00000014",
9
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
11
10
  marginRight: "4px !important",
12
- padding: "0px 5px",
13
- fontFamily: "'Inter',sans-serif",
14
- "& .MuiPaper-root": {
15
- background: theme?.palette?.editor?.miniToolBarBackground
16
- },
17
- "& .sectionOptionTitle": {
18
- fontSize: "16px",
19
- fontFamily: "'Inter',sans-serif",
20
- fontWeight: "700",
21
- fontSize: "16px",
22
- lineHeight: "25px",
23
- background: theme?.palette?.editor?.miniToolBarBackground,
24
- "& button": {
25
- background: theme?.palette?.editor?.closeButtonBackground,
26
- borderRadius: "8px",
27
- "& svg": {
28
- fill: theme?.palette?.editor?.closeButtonSvgStroke
29
- }
30
- }
31
- },
32
- "& .sectionOptionChild": {
33
- background: theme?.palette?.editor?.miniToolBarBackground,
34
- "& .MuiBox-root": {
35
- maxHeight: "unset"
36
- },
37
- "& .MuiInputBase-root, fieldset": {
38
- background: theme?.palette?.editor?.inputFieldBgColor,
39
- borderRadius: "8px",
40
- "& fieldset": {
41
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
42
- background: "transparent",
43
- borderRadius: "8px"
44
- },
45
- "& input": {
46
- border: `1px solid transparent`,
47
- background: theme?.palette?.editor?.inputFieldBgColor,
48
- borderRadius: "8px",
49
- fontSize: "12px",
50
- color: theme?.palette?.editor?.textColor
51
- }
52
- },
53
- "& p": {
54
- color: theme?.palette?.editor?.textColor
55
- },
56
- "& .sliderInput": {
57
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
58
- background: theme?.palette?.editor?.inputFieldBgColor,
59
- borderRadius: "10px"
60
- },
61
- "& .style-settings-wrpr": {
62
- overflow: "hidden",
63
- "&:hover": {
64
- overflowY: "auto",
65
- "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
66
- background: `${theme?.palette?.editor?.brainPopupScroll} !important`
67
- },
68
- "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
69
- visibility: "hidden"
70
- }
71
- }
72
- },
73
- "& svg": {
74
- width: "17.5px",
75
- height: "17.5px"
76
- }
77
- },
78
- "& .MuiList-root": {
79
- "& .MuiButtonBase-root": {
80
- padding: "8px 12px",
81
- "& .MuiTypography-root": {
82
- color: `${theme?.palette?.editor?.textColor} !important`,
83
- fontSize: "14px",
84
- fontWeight: "500",
85
- fontFamily: "'Inter',sans-serif"
86
- },
87
- "&:hover": {
88
- background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
89
- "& .MuiTypography-root": {
90
- color: `${theme?.palette?.editor?.textColor} !important`
91
- },
92
- "& .MuiListItemIcon-root": {
93
- "& .signatureElementIcon, & .newLineElementIcon": {
94
- "& path": {
95
- fill: `${theme?.palette?.editor?.textColor}`
96
- }
97
- },
98
- "& .commonSvgStyle, & .commonSvgStyle2": {
99
- "& path": {
100
- stroke: `${theme?.palette?.editor?.textColor}`
101
- }
102
- },
103
- "& .colorBoxElementIcon": {
104
- "& path": {
105
- stroke: `${theme?.palette?.editor?.textColor}`,
106
- fill: "none"
107
- }
108
- },
109
- "& .gridElementIcon": {
110
- "& path": {
111
- stroke: `${theme?.palette?.editor?.textColor}`,
112
- fill: `${theme?.palette?.editor?.textColor}`
113
- }
114
- }
115
- }
116
- }
117
- }
118
- },
119
- "& .sectionMoreOption": {
120
- "& .MuiButtonBase-root": {
121
- padding: "12px 12px",
122
- color: `${theme?.palette?.editor?.textColor} !important`,
123
- fontSize: "14px",
124
- fontWeight: "500",
125
- fontFamily: "'Inter',sans-serif"
126
- }
127
- },
128
11
  "& .papper-root": {
129
12
  width: "344px",
130
13
  boxShadow: "none",
14
+ border: `1px solid ${theme?.palette?.editor?.borderColor}`,
131
15
  borderRadius: "7px",
132
16
  background: theme?.palette?.editor?.background,
133
17
  "& .MuiTypography-root, .MuiInputBase-root, input": {
134
18
  color: theme?.palette?.editor?.textColor
135
19
  },
20
+ "& .MuiInputBase-root, input": {
21
+ border: `1px solid ${theme?.palette?.editor?.borderColor}`
22
+ },
136
23
  "& .borderInput": {
137
24
  background: theme?.palette?.editor?.background,
138
25
  color: theme?.palette?.editor?.textColor
26
+ },
27
+ "& .MuiCheckbox-root": {
28
+ "& svg": {
29
+ fill: theme?.palette?.editor?.textColor
30
+ }
139
31
  }
140
32
  },
141
33
  "& .item-list-wrpr": {
@@ -145,7 +37,13 @@ const useOptionsPopupStyle = ({
145
37
  "& .MuiListItemButton-root": {
146
38
  borderRadius: "7px",
147
39
  color: theme?.palette?.editor?.textColor,
148
- alignItems: "center"
40
+ "&:hover": {
41
+ color: theme?.palette?.editor?.activeColor,
42
+ background: "rgba(233, 243, 254, 1)",
43
+ "& .MuiTypography-root": {
44
+ color: theme?.palette?.editor?.activeColor
45
+ }
46
+ }
149
47
  }
150
48
  },
151
49
  "& .item-wrapper": {
@@ -10,27 +10,23 @@ const SwitchViewport = props => {
10
10
  const {
11
11
  breakpoint,
12
12
  onChange,
13
- translation,
14
- show
13
+ translation
15
14
  } = props;
16
15
  const classes = useSwitchViewport();
17
16
  const {
18
- setSelectedElement
17
+ setActiveBreakPoint
19
18
  } = useEditorContext();
20
19
  useEffect(() => {
21
- // to reset selection on viewport changes - FS-6589
22
- setSelectedElement({});
20
+ console.log(breakpoint);
23
21
  }, [breakpoint]);
24
22
  return /*#__PURE__*/_jsxs(Box, {
25
23
  sx: classes.root,
26
- style: {
27
- display: show ? "block" : "none"
28
- },
29
24
  children: [/*#__PURE__*/_jsx(Tooltip, {
30
25
  title: translation("Desktop View"),
31
26
  children: /*#__PURE__*/_jsx(IconButton, {
32
27
  className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
33
28
  onClick: () => {
29
+ setActiveBreakPoint("");
34
30
  onChange("");
35
31
  },
36
32
  children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -40,6 +36,7 @@ const SwitchViewport = props => {
40
36
  children: /*#__PURE__*/_jsx(IconButton, {
41
37
  className: `${breakpoint === "xs" ? "active" : ""}`,
42
38
  onClick: () => {
39
+ setActiveBreakPoint("xs");
43
40
  onChange("xs");
44
41
  },
45
42
  children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
- import { useTheme, createTheme, useMediaQuery } from "@mui/material";
2
+ import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
3
3
  import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
4
- import MainThemeProvider from "./MainThemeProvider";
5
4
 
6
5
  // Custom breakpoints functions
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -60,15 +59,13 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
60
59
  } : getBreakPoints(prevTheme)
61
60
  });
62
61
  const ViewportStimulator = ({
63
- children,
64
- selectedTheme
62
+ children
65
63
  }) => {
66
64
  const theme = useTheme();
67
65
  const isPrintMode = useMediaQuery("print");
68
66
  const viewportTheme = extendedTheme(theme, isPrintMode);
69
- return /*#__PURE__*/_jsx(MainThemeProvider, {
67
+ return /*#__PURE__*/_jsx(ThemeProvider, {
70
68
  theme: viewportTheme,
71
- userSelectedTheme: selectedTheme,
72
69
  children: children
73
70
  });
74
71
  };
@@ -2,7 +2,6 @@ import { Transforms, Node, Path, Editor } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import { getNode, handleNegativeInteger } from "../../../utils/helper";
4
4
  import { handleBoxAlignment } from "../VirtualElement/helper";
5
- import { convertToGridArea, findMaxYValue } from "../../../Elements/FreeGrid/helper";
6
5
  export const ROW_HEIGHT = 50;
7
6
 
8
7
  // const MARGIN_OF = {
@@ -23,27 +22,18 @@ export function updateRows() {}
23
22
  export function updateCols() {}
24
23
  const handleMoveNode = (editor, path, newPath, {
25
24
  isEmpty
26
- }, autoAlign, moveToNode) => {
25
+ }, autoAlign) => {
27
26
  try {
28
27
  let replaceNode = Node.get(editor, path);
29
- let heightDiff = 0;
30
28
  if (autoAlign) {
31
- const y = findMaxYValue(moveToNode?.children);
32
- const {
33
- gridArea,
34
- marginTop
35
- } = convertToGridArea(y);
29
+ // reset node for auto alignment in mobile
36
30
  replaceNode = {
37
31
  ...replaceNode,
38
- gridArea_xs: gridArea,
39
- marginTop_xs: marginTop + 12,
40
- xs_updatedOn: new Date().getTime()
32
+ gridArea_xs: null,
33
+ xs_updatedOn: null,
34
+ marginTop_xs: null
41
35
  };
42
- const newHeight = y + replaceNode?.height_xs + 12;
43
- const diffH = newHeight - moveToNode?.height_xs;
44
- heightDiff = diffH >= 0 ? diffH : 0;
45
36
  }
46
- let rPath;
47
37
  if (isEmpty) {
48
38
  const toPath = [...newPath, 0];
49
39
  Transforms.insertNodes(editor, [{
@@ -54,7 +44,7 @@ const handleMoveNode = (editor, path, newPath, {
54
44
  Transforms.removeNodes(editor, {
55
45
  at: path
56
46
  });
57
- rPath = toPath;
47
+ return toPath;
58
48
  } else {
59
49
  Transforms.insertNodes(editor, [{
60
50
  ...replaceNode
@@ -64,12 +54,8 @@ const handleMoveNode = (editor, path, newPath, {
64
54
  Transforms.removeNodes(editor, {
65
55
  at: path
66
56
  });
67
- rPath = newPath;
57
+ return newPath;
68
58
  }
69
- return {
70
- rPath,
71
- heightDiff
72
- };
73
59
  } catch (err) {
74
60
  console.log(err);
75
61
  console.log("Drop Node error");
@@ -224,7 +210,7 @@ export function onDropItem(props, parentClass) {
224
210
  at: moveTo,
225
211
  match: n => n.type === "freegrid"
226
212
  });
227
- const [, sectionPath] = sectionData || [];
213
+ const [sectionNode, sectionPath] = sectionData || [];
228
214
  if (needMove && isInsidePath(from, moveTo)) {
229
215
  reRenderSectionPath = sectionPath;
230
216
  } else {
@@ -243,6 +229,14 @@ export function onDropItem(props, parentClass) {
243
229
  const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
244
230
  if (isBoxHeader) {
245
231
  // will handle on <BoxHeaderAutoAlignment />
232
+ } else if (moveTo?.length === 2 && autoAlign) {
233
+ // auto align in mobile
234
+ Transforms.setNodes(editor, {
235
+ xs_updatedOn: null,
236
+ xs_updatedOn: new Date().getTime()
237
+ }, {
238
+ at: moveTo
239
+ });
246
240
  } else if (autoAlign) {
247
241
  Transforms.setNodes(editor, {
248
242
  autoAlign: true,
@@ -251,15 +245,12 @@ export function onDropItem(props, parentClass) {
251
245
  at: moveTo
252
246
  });
253
247
  }
254
- const {
255
- rPath,
256
- heightDiff
257
- } = handleMoveNode(editor, path, newPath, {
248
+ const rPath = handleMoveNode(editor, path, newPath, {
258
249
  isEmpty
259
- }, autoAlign, toSectionNode) || {};
250
+ }, autoAlign);
260
251
  reRenderChildNodes(editor, reRenderSectionPath || moveTo);
261
252
  if (autoAlign && !isBoxHeader) {
262
- handleBoxAlignment(editor, sectionPath, heightDiff);
253
+ handleBoxAlignment(editor, sectionNode, sectionPath);
263
254
  }
264
255
  return {
265
256
  updated_at: rPath
@@ -87,9 +87,7 @@ export function updatePositions(props, closestClass) {
87
87
  newPath = [...newPath, toSectionNode?.children?.length];
88
88
  }
89
89
  newPath = newPath.map(m => parseInt(m));
90
- const {
91
- rPath
92
- } = handleMoveNode(editor, path, newPath, {
90
+ const rPath = handleMoveNode(editor, path, newPath, {
93
91
  isEmpty
94
92
  });
95
93
  // to update path index need to re-render items in parent sections
@@ -1,57 +1,71 @@
1
1
  import { useEffect, useRef } from "react";
2
+ import { Path, Transforms } from "slate";
2
3
  import { getNode } from "../../../utils/helper";
3
4
  import { ROW_HEIGHT } from "../Utils/gridDropItem";
4
- import { getGridArea, handleTextAlignment } from "./helper";
5
+ import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
5
6
  import { Box } from "@mui/material";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
- export const getElementOffset = element => {
8
- const {
9
- marginTop_xs: marginTop,
10
- gridArea_xs: gridArea,
11
- height_xs: height
12
- } = element;
13
- const [startRow] = getGridArea(gridArea);
14
- const top = (startRow - 1) * ROW_HEIGHT + marginTop;
15
- const bottom = top + height;
16
- return {
17
- top,
18
- bottom
19
- };
20
- };
21
8
  const updateTextHeight = (editor, path, height) => {
22
9
  if (!height) {
23
10
  return;
24
11
  }
25
- const textItem = getNode(editor, path);
26
- if (!textItem) {
12
+ const parentPath = Path.parent(path);
13
+ const currentNode = getNode(editor, parentPath);
14
+ const gridItems = currentNode?.children || [];
15
+ const isNewlyAddedElement = gridItems.some(gridItem => !gridItem.gridArea_xs && gridItem.type !== "paragraph");
16
+ if (isNewlyAddedElement) {
27
17
  return;
28
18
  }
19
+ const textItemIndex = path[parentPath.length];
20
+ const textItem = gridItems.find((_, index) => textItemIndex === index);
29
21
  const {
30
- height_xs,
31
- gridArea_xs,
32
- type
22
+ marginTop_xs: marginTop,
23
+ gridArea_xs: gridArea,
24
+ height_xs
33
25
  } = textItem;
34
- if (!gridArea_xs && type !== "paragraph") {
35
- return;
36
- }
37
- const oldHeight = height_xs;
38
- const newHeight = height;
39
- const heightDiff = newHeight - oldHeight;
40
- if (heightDiff !== 0) {
41
- const textNode = [textItem, path];
42
- handleTextAlignment(editor, textNode, heightDiff);
26
+ const oldHeight = height_xs + marginTop;
27
+ const newHeight = height + marginTop;
28
+ const extraHeight = newHeight - oldHeight;
29
+ let containerExtraHeight = extraHeight;
30
+ if (extraHeight > 0) {
31
+ const [startRow] = getGridArea(gridArea);
32
+ const newRows = Math.floor(newHeight / ROW_HEIGHT) + 1;
33
+ const endRow = startRow + newRows;
34
+ const firstOverlappedRow = findFirstRowOverlap(gridItems, startRow, endRow, textItemIndex);
35
+ if (firstOverlappedRow) {
36
+ const moveRows = endRow - firstOverlappedRow;
37
+ moveOverlappedItems(editor, moveRows, gridItems, parentPath, textItemIndex, startRow);
38
+ containerExtraHeight += moveRows * ROW_HEIGHT;
39
+ }
40
+
41
+ // handle containers (box and section)
42
+ const containerData = handleContainers(editor, parentPath, containerExtraHeight);
43
+ containerData.forEach(container => {
44
+ const {
45
+ moveRows,
46
+ containerNode,
47
+ containerPath,
48
+ newHeight,
49
+ childIndex,
50
+ lastChildStartRow
51
+ } = container;
52
+ if (moveRows) {
53
+ moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
54
+ }
55
+ Transforms.setNodes(editor, {
56
+ height_xs: newHeight,
57
+ xs_updatedOn: new Date().getTime()
58
+ }, {
59
+ at: containerPath
60
+ });
61
+ });
62
+ Transforms.setNodes(editor, {
63
+ height_xs: height
64
+ }, {
65
+ at: path
66
+ });
43
67
  }
44
- // else if (heightDiff < 0) {
45
- // Transforms.setNodes(
46
- // editor,
47
- // {
48
- // height_xs: newHeight,
49
- // },
50
- // { at: path }
51
- // );
52
- // }
53
68
  };
54
-
55
69
  function VirtualTextElement(props) {
56
70
  const {
57
71
  dataSets,
@@ -69,7 +83,7 @@ function VirtualTextElement(props) {
69
83
  height
70
84
  } = entry.contentRect;
71
85
  const currentText = currElement?.innerText;
72
- const prevText = prevTextRef?.current;
86
+ const prevText = prevTextRef.current;
73
87
  if (currentText && currentText !== prevText) {
74
88
  updateTextHeight(editor, path, height);
75
89
  }
@@ -108,14 +122,6 @@ function VirtualTextElement(props) {
108
122
  },
109
123
  "& .editor-blocker": {
110
124
  display: "none"
111
- },
112
- "& .fgi_type_text": {
113
- "& .edt-headings": {
114
- margin: "0px"
115
- },
116
- "& .edt-paragraphs": {
117
- margin: "0px"
118
- }
119
125
  }
120
126
  },
121
127
  dangerouslySetInnerHTML: {