@flozy/editor 10.3.9 → 10.4.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 (166) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +30 -28
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -3
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
  23. package/dist/Editor/Elements/Form/FormField.js +3 -2
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  27. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  30. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  31. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  38. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  39. package/dist/Editor/Elements/Table/Styles.js +7 -0
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  44. package/dist/Editor/MiniEditor.js +2 -1
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  58. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  59. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  61. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  62. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  63. package/dist/Editor/common/Checkbox/index.js +46 -0
  64. package/dist/Editor/common/Checkbox/styles.js +45 -0
  65. package/dist/Editor/common/ColorPickerButton.js +41 -16
  66. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  67. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  68. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  69. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  70. package/dist/Editor/common/CustomSelect.js +43 -0
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  73. package/dist/Editor/common/Icon.js +28 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -66
  77. package/dist/Editor/common/LinkSettings/index.js +14 -28
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +164 -244
  80. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  81. package/dist/Editor/common/RadioGroup/index.js +48 -0
  82. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  83. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  96. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  97. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  98. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  101. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  105. package/dist/Editor/common/RnD/index.js +68 -39
  106. package/dist/Editor/common/Select/index.js +44 -7
  107. package/dist/Editor/common/Select/styles.js +31 -2
  108. package/dist/Editor/common/Shorthands/elements.js +54 -0
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  122. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  123. package/dist/Editor/common/Uploader.js +16 -0
  124. package/dist/Editor/common/iconListV2.js +76 -0
  125. package/dist/Editor/common/iconslist.js +21 -0
  126. package/dist/Editor/commonStyle.js +116 -61
  127. package/dist/Editor/helper/index.js +5 -1
  128. package/dist/Editor/helper/textIndeces.js +58 -0
  129. package/dist/Editor/helper/theme.js +203 -2
  130. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  131. package/dist/Editor/hooks/useMouseMove.js +9 -3
  132. package/dist/Editor/hooks/useTable.js +5 -4
  133. package/dist/Editor/hooks/useThemeValues.js +63 -0
  134. package/dist/Editor/plugins/withEmbeds.js +1 -1
  135. package/dist/Editor/plugins/withHTML.js +3 -1
  136. package/dist/Editor/plugins/withTable.js +1 -1
  137. package/dist/Editor/theme/ThemeList.js +50 -173
  138. package/dist/Editor/theme/index.js +149 -0
  139. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  140. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  141. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  142. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  143. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  144. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  145. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  146. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  147. package/dist/Editor/themeSettings/icons.js +60 -0
  148. package/dist/Editor/themeSettings/index.js +380 -0
  149. package/dist/Editor/themeSettings/style.js +299 -0
  150. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  151. package/dist/Editor/themeSettingsAI/index.js +355 -0
  152. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  153. package/dist/Editor/themeSettingsAI/style.js +332 -0
  154. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  155. package/dist/Editor/utils/accordion.js +14 -4
  156. package/dist/Editor/utils/button.js +1 -17
  157. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  158. package/dist/Editor/utils/draftToSlate.js +3 -2
  159. package/dist/Editor/utils/events.js +50 -6
  160. package/dist/Editor/utils/font.js +40 -37
  161. package/dist/Editor/utils/formfield.js +1 -0
  162. package/dist/Editor/utils/helper.js +210 -26
  163. package/dist/Editor/utils/insertAppHeader.js +1 -1
  164. package/dist/Editor/utils/signature.js +2 -9
  165. package/dist/Editor/utils/updateFormName.js +22 -0
  166. package/package.json +4 -4
@@ -12,7 +12,8 @@ const FormSettings = props => {
12
12
  const {
13
13
  editor,
14
14
  path,
15
- customProps
15
+ customProps,
16
+ onClose
16
17
  } = props;
17
18
  const item_path = path?.split("|").map(m => parseInt(m));
18
19
  const element_path = [...item_path];
@@ -56,13 +57,14 @@ const FormSettings = props => {
56
57
  }
57
58
  };
58
59
  const handleClose = () => {
59
- console.log("close");
60
+ onClose();
60
61
  };
61
62
  const muiTheme = createTheme({
62
63
  components: {
63
64
  MuiAccordion: {
64
65
  styleOverrides: {
65
66
  root: {
67
+ background: theme?.palette?.editor?.miniToolBarBackground,
66
68
  "& .MuiAccordionSummary-root": {
67
69
  flexDirection: "row-reverse",
68
70
  "& .MuiSvgIcon-root": {
@@ -8,7 +8,8 @@ const ImageSettings = props => {
8
8
  const {
9
9
  editor,
10
10
  path,
11
- customProps
11
+ customProps,
12
+ onClose
12
13
  } = props;
13
14
  const item_path = path?.split("|").map(m => parseInt(m));
14
15
  const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const ImageSettings = props => {
27
28
  });
28
29
  };
29
30
  const handleClose = () => {
30
- console.log("close");
31
+ onClose();
31
32
  };
32
33
  return /*#__PURE__*/_jsx(Box, {
33
34
  component: "div",
@@ -9,7 +9,8 @@ const TableSettings = props => {
9
9
  const {
10
10
  editor,
11
11
  path,
12
- customProps
12
+ customProps,
13
+ onClose
13
14
  } = props;
14
15
  const item_path = path?.split("|").map(m => parseInt(m));
15
16
  const element_path = [...item_path, 0];
@@ -57,7 +58,7 @@ const TableSettings = props => {
57
58
  }
58
59
  };
59
60
  const handleClose = () => {
60
- console.log("close");
61
+ onClose();
61
62
  };
62
63
  return /*#__PURE__*/_jsx(Box, {
63
64
  component: "div",
@@ -9,6 +9,7 @@ const TextSettings = props => {
9
9
  editor,
10
10
  path,
11
11
  theme,
12
+ onClose,
12
13
  customProps
13
14
  } = props;
14
15
  const item_path = path.split("|").map(m => parseInt(m));
@@ -27,7 +28,8 @@ const TextSettings = props => {
27
28
  return /*#__PURE__*/_jsx(TextFormat, {
28
29
  classes: classes,
29
30
  editor: editor,
30
- customProps: customProps
31
+ customProps: customProps,
32
+ closeMainPopup: onClose
31
33
  });
32
34
  };
33
35
  export default TextSettings;
@@ -8,7 +8,8 @@ const VideoSettings = props => {
8
8
  const {
9
9
  editor,
10
10
  path,
11
- customProps
11
+ customProps,
12
+ onClose
12
13
  } = props;
13
14
  const item_path = path?.split("|").map(m => parseInt(m));
14
15
  const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const VideoSettings = props => {
28
29
  });
29
30
  };
30
31
  const handleClose = () => {
31
- console.log("close");
32
+ onClose();
32
33
  };
33
34
  return /*#__PURE__*/_jsx(Box, {
34
35
  component: "div",
@@ -140,7 +140,6 @@ const useElementSettingsStyle = theme => ({
140
140
  }
141
141
  },
142
142
  "& .popUpHeader": {
143
- fontSize: "16px",
144
143
  fontFamily: "'Inter',sans-serif",
145
144
  fontWeight: "700",
146
145
  fontSize: "16px",
@@ -15,7 +15,6 @@ const useOptionsPopupStyle = ({
15
15
  background: theme?.palette?.editor?.miniToolBarBackground
16
16
  },
17
17
  "& .sectionOptionTitle": {
18
- fontSize: "16px",
19
18
  fontFamily: "'Inter',sans-serif",
20
19
  fontWeight: "700",
21
20
  fontSize: "16px",
@@ -3,20 +3,29 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
3
3
  import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
4
4
  import useSwitchViewport from "./styles";
5
5
  import { useEffect } from "react";
6
+ import { useEditorContext } from "../../../hooks/useMouseMove";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const SwitchViewport = props => {
9
10
  const {
10
11
  breakpoint,
11
12
  onChange,
12
- translation
13
+ translation,
14
+ show
13
15
  } = props;
14
16
  const classes = useSwitchViewport();
17
+ const {
18
+ setSelectedElement
19
+ } = useEditorContext();
15
20
  useEffect(() => {
16
- console.log(breakpoint);
21
+ // to reset selection on viewport changes - FS-6589
22
+ setSelectedElement({});
17
23
  }, [breakpoint]);
18
24
  return /*#__PURE__*/_jsxs(Box, {
19
25
  sx: classes.root,
26
+ style: {
27
+ display: show ? "block" : "none"
28
+ },
20
29
  children: [/*#__PURE__*/_jsx(Tooltip, {
21
30
  title: translation("Desktop View"),
22
31
  children: /*#__PURE__*/_jsx(IconButton, {
@@ -0,0 +1,17 @@
1
+ import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ function MainThemeProvider({
4
+ children,
5
+ userSelectedTheme,
6
+ theme = {}
7
+ }) {
8
+ const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
9
+ return /*#__PURE__*/_jsx(CssVarsProvider, {
10
+ theme: {
11
+ ...themeVars,
12
+ ...theme
13
+ },
14
+ children: children
15
+ });
16
+ }
17
+ export default MainThemeProvider;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
- import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
2
+ import { useTheme, createTheme, useMediaQuery } from "@mui/material";
3
3
  import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
4
+ import MainThemeProvider from "./MainThemeProvider";
4
5
 
5
6
  // Custom breakpoints functions
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
59
60
  } : getBreakPoints(prevTheme)
60
61
  });
61
62
  const ViewportStimulator = ({
62
- children
63
+ children,
64
+ selectedTheme
63
65
  }) => {
64
66
  const theme = useTheme();
65
67
  const isPrintMode = useMediaQuery("print");
66
68
  const viewportTheme = extendedTheme(theme, isPrintMode);
67
- return /*#__PURE__*/_jsx(ThemeProvider, {
69
+ return /*#__PURE__*/_jsx(MainThemeProvider, {
68
70
  theme: viewportTheme,
71
+ userSelectedTheme: selectedTheme,
69
72
  children: children
70
73
  });
71
74
  };
@@ -2,6 +2,7 @@ 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";
5
6
  export const ROW_HEIGHT = 50;
6
7
 
7
8
  // const MARGIN_OF = {
@@ -22,18 +23,27 @@ export function updateRows() {}
22
23
  export function updateCols() {}
23
24
  const handleMoveNode = (editor, path, newPath, {
24
25
  isEmpty
25
- }, autoAlign) => {
26
+ }, autoAlign, moveToNode) => {
26
27
  try {
27
28
  let replaceNode = Node.get(editor, path);
29
+ let heightDiff = 0;
28
30
  if (autoAlign) {
29
- // reset node for auto alignment in mobile
31
+ const y = findMaxYValue(moveToNode?.children);
32
+ const {
33
+ gridArea,
34
+ marginTop
35
+ } = convertToGridArea(y);
30
36
  replaceNode = {
31
37
  ...replaceNode,
32
- gridArea_xs: null,
33
- xs_updatedOn: null,
34
- marginTop_xs: null
38
+ gridArea_xs: gridArea,
39
+ marginTop_xs: marginTop + 12,
40
+ xs_updatedOn: new Date().getTime()
35
41
  };
42
+ const newHeight = y + replaceNode?.height_xs + 12;
43
+ const diffH = newHeight - moveToNode?.height_xs;
44
+ heightDiff = diffH >= 0 ? diffH : 0;
36
45
  }
46
+ let rPath;
37
47
  if (isEmpty) {
38
48
  const toPath = [...newPath, 0];
39
49
  Transforms.insertNodes(editor, [{
@@ -44,7 +54,7 @@ const handleMoveNode = (editor, path, newPath, {
44
54
  Transforms.removeNodes(editor, {
45
55
  at: path
46
56
  });
47
- return toPath;
57
+ rPath = toPath;
48
58
  } else {
49
59
  Transforms.insertNodes(editor, [{
50
60
  ...replaceNode
@@ -54,8 +64,12 @@ const handleMoveNode = (editor, path, newPath, {
54
64
  Transforms.removeNodes(editor, {
55
65
  at: path
56
66
  });
57
- return newPath;
67
+ rPath = newPath;
58
68
  }
69
+ return {
70
+ rPath,
71
+ heightDiff
72
+ };
59
73
  } catch (err) {
60
74
  console.log(err);
61
75
  console.log("Drop Node error");
@@ -210,7 +224,7 @@ export function onDropItem(props, parentClass) {
210
224
  at: moveTo,
211
225
  match: n => n.type === "freegrid"
212
226
  });
213
- const [sectionNode, sectionPath] = sectionData || [];
227
+ const [, sectionPath] = sectionData || [];
214
228
  if (needMove && isInsidePath(from, moveTo)) {
215
229
  reRenderSectionPath = sectionPath;
216
230
  } else {
@@ -229,14 +243,6 @@ export function onDropItem(props, parentClass) {
229
243
  const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
230
244
  if (isBoxHeader) {
231
245
  // 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
- });
240
246
  } else if (autoAlign) {
241
247
  Transforms.setNodes(editor, {
242
248
  autoAlign: true,
@@ -245,12 +251,15 @@ export function onDropItem(props, parentClass) {
245
251
  at: moveTo
246
252
  });
247
253
  }
248
- const rPath = handleMoveNode(editor, path, newPath, {
254
+ const {
255
+ rPath,
256
+ heightDiff
257
+ } = handleMoveNode(editor, path, newPath, {
249
258
  isEmpty
250
- }, autoAlign);
259
+ }, autoAlign, toSectionNode) || {};
251
260
  reRenderChildNodes(editor, reRenderSectionPath || moveTo);
252
261
  if (autoAlign && !isBoxHeader) {
253
- handleBoxAlignment(editor, sectionNode, sectionPath);
262
+ handleBoxAlignment(editor, sectionPath, heightDiff);
254
263
  }
255
264
  return {
256
265
  updated_at: rPath
@@ -87,7 +87,9 @@ export function updatePositions(props, closestClass) {
87
87
  newPath = [...newPath, toSectionNode?.children?.length];
88
88
  }
89
89
  newPath = newPath.map(m => parseInt(m));
90
- const rPath = handleMoveNode(editor, path, newPath, {
90
+ const {
91
+ rPath
92
+ } = handleMoveNode(editor, path, newPath, {
91
93
  isEmpty
92
94
  });
93
95
  // to update path index need to re-render items in parent sections
@@ -1,69 +1,45 @@
1
1
  import { useEffect, useRef } from "react";
2
- import { Path, Transforms } from "slate";
3
2
  import { getNode } from "../../../utils/helper";
4
3
  import { ROW_HEIGHT } from "../Utils/gridDropItem";
5
- import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
4
+ import { getGridArea, getNodeValues, handleTextAlignment } from "./helper";
6
5
  import { Box } from "@mui/material";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
- const updateTextHeight = (editor, path, height) => {
9
- if (!height) {
7
+ export const getElementOffset = (element, breakpoint) => {
8
+ const {
9
+ height,
10
+ gridArea,
11
+ marginTop
12
+ } = getNodeValues(element, breakpoint);
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
+ export const updateTextHeight = (editor, path, currHeight, updateBreakpoint) => {
22
+ if (!currHeight) {
10
23
  return;
11
24
  }
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) {
25
+ const textItem = getNode(editor, path);
26
+ if (!textItem) {
17
27
  return;
18
28
  }
19
- const textItemIndex = path[parentPath.length];
20
- const textItem = gridItems.find((_, index) => textItemIndex === index);
21
29
  const {
22
- marginTop_xs: marginTop,
23
- gridArea_xs: gridArea,
24
- height_xs
25
- } = textItem;
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
- });
30
+ height,
31
+ gridArea,
32
+ type
33
+ } = getNodeValues(textItem, updateBreakpoint);
34
+ if (!gridArea && type !== "paragraph") {
35
+ return;
36
+ }
37
+ const oldHeight = height;
38
+ const newHeight = currHeight;
39
+ const heightDiff = newHeight - oldHeight;
40
+ if (heightDiff !== 0) {
41
+ const textNode = [textItem, path];
42
+ handleTextAlignment(editor, textNode, heightDiff, updateBreakpoint);
67
43
  }
68
44
  };
69
45
  function VirtualTextElement(props) {
@@ -83,9 +59,9 @@ function VirtualTextElement(props) {
83
59
  height
84
60
  } = entry.contentRect;
85
61
  const currentText = currElement?.innerText;
86
- const prevText = prevTextRef.current;
62
+ const prevText = prevTextRef?.current;
87
63
  if (currentText && currentText !== prevText) {
88
- updateTextHeight(editor, path, height);
64
+ updateTextHeight(editor, path, height, "xs");
89
65
  }
90
66
  prevTextRef.current = currentText;
91
67
  }
@@ -122,6 +98,14 @@ function VirtualTextElement(props) {
122
98
  },
123
99
  "& .editor-blocker": {
124
100
  display: "none"
101
+ },
102
+ "& .fgi_type_text": {
103
+ "& .edt-headings": {
104
+ margin: "0px"
105
+ },
106
+ "& .edt-paragraphs": {
107
+ margin: "0px"
108
+ }
125
109
  }
126
110
  },
127
111
  dangerouslySetInnerHTML: {