@flozy/editor 5.3.0 → 5.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. package/dist/Editor/ChatEditor.js +25 -34
  2. package/dist/Editor/CommonEditor.js +20 -12
  3. package/dist/Editor/Editor.css +14 -16
  4. package/dist/Editor/Elements/AI/AIInput.js +0 -3
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +6 -6
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -2
  7. package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
  8. package/dist/Editor/Elements/DataView/DataView.js +124 -0
  9. package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
  10. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +67 -0
  11. package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +33 -0
  12. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +162 -0
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +40 -0
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +67 -0
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +35 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +39 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
  18. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
  19. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
  20. package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
  21. package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
  22. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +29 -0
  23. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +38 -0
  24. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
  25. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +64 -0
  26. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +106 -0
  27. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
  28. package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
  29. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
  30. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
  31. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
  32. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +60 -0
  33. package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
  34. package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
  35. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +160 -0
  36. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
  37. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
  38. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
  39. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
  40. package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +179 -0
  41. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +112 -0
  42. package/dist/Editor/Elements/DataView/Layouts/TableView.js +227 -0
  43. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +80 -0
  44. package/dist/Editor/Elements/DataView/Layouts/colStyles.js +10 -0
  45. package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
  46. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +281 -0
  47. package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
  48. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +74 -0
  49. package/dist/Editor/Elements/DataView/styles.js +154 -0
  50. package/dist/Editor/Elements/Form/Form.js +1 -0
  51. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +4 -4
  52. package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
  53. package/dist/Editor/Elements/List/CheckList.js +2 -1
  54. package/dist/Editor/Elements/Search/SearchAttachment.js +1 -0
  55. package/dist/Editor/Elements/SimpleText/index.js +8 -1
  56. package/dist/Editor/Elements/SimpleText/style.js +10 -1
  57. package/dist/Editor/Elements/Table/Table.js +1 -1
  58. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -1
  59. package/dist/Editor/Styles/EditorStyles.js +5 -0
  60. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +10 -0
  61. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +45 -0
  62. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  63. package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
  64. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  65. package/dist/Editor/common/Icon.js +6 -0
  66. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +1 -0
  68. package/dist/Editor/common/RnD/GuideLines/styles.js +3 -3
  69. package/dist/Editor/common/RnD/ShadowElement.js +1 -1
  70. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +14 -2
  71. package/dist/Editor/common/RnD/Utils/gridDropItem.js +9 -6
  72. package/dist/Editor/common/RnD/index.js +1 -1
  73. package/dist/Editor/common/Shorthands/elements.js +13 -1
  74. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +10 -2
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +79 -0
  78. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +4 -0
  79. package/dist/Editor/common/Uploader.js +8 -0
  80. package/dist/Editor/common/iconListV2.js +53 -53
  81. package/dist/Editor/common/iconslist.js +6 -3
  82. package/dist/Editor/commonStyle.js +9 -0
  83. package/dist/Editor/helper/enforceDateFormat.js +41 -0
  84. package/dist/Editor/helper/index.js +2 -2
  85. package/dist/Editor/helper/theme.js +24 -1
  86. package/dist/Editor/hooks/useMouseMove.js +5 -2
  87. package/dist/Editor/plugins/withEmbeds.js +30 -26
  88. package/dist/Editor/plugins/withHTML.js +47 -12
  89. package/dist/Editor/plugins/withLayout.js +42 -0
  90. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -2
  91. package/dist/Editor/utils/button.js +4 -4
  92. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +26 -1
  93. package/dist/Editor/utils/dataView.js +43 -0
  94. package/dist/Editor/utils/events.js +0 -1
  95. package/dist/Editor/utils/helper.js +51 -1
  96. package/dist/Editor/utils/pageSettings.js +14 -2
  97. package/dist/Editor/utils/serializeToText.js +2 -0
  98. package/package.json +1 -1
@@ -177,6 +177,11 @@ const usePopupStyle = theme => ({
177
177
  justifyContent: "start",
178
178
  borderRadius: "10px !important",
179
179
  transition: "background-color 0.3s ease",
180
+ // "& .colorBoxElementIcon": {
181
+ // "& path": {
182
+ // fill: theme?.palette?.type === "dark" ? "none" : "",
183
+ // },
184
+ // },
180
185
  "& .signatureElementIcon": {
181
186
  "& path": {
182
187
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
@@ -389,6 +394,11 @@ const usePopupStyle = theme => ({
389
394
  },
390
395
  "& .MuiOutlinedInput-notchedOutline": {
391
396
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
397
+ },
398
+ '& .MuiInputBase-root': {
399
+ '& input': {
400
+ border: "none !important"
401
+ }
392
402
  }
393
403
  },
394
404
  textFormatSelect: {
@@ -14,6 +14,8 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
14
14
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
15
15
  import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
16
16
  import { useEditorContext } from "../../hooks/useMouseMove";
17
+ import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
18
+ import { getPageSettings } from "../../utils/pageSettings";
17
19
  import { jsx as _jsx } from "react/jsx-runtime";
18
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
21
  const allTools = toolbarGroups.flat();
@@ -31,10 +33,18 @@ const TextFormat = props => {
31
33
  const [anchorEl, setAnchorEl] = useState(null);
32
34
  const [type, setType] = useState(null);
33
35
  const open = Boolean(anchorEl);
36
+ const {
37
+ element: pageSt
38
+ } = getPageSettings(editor) || {};
39
+ const pageSettingLine = pageSt?.pageProps?.lineHeight;
34
40
  const {
35
41
  fontFamilies,
36
42
  theme
37
43
  } = useEditorContext();
44
+ const {
45
+ activeBreakPoint
46
+ } = useEditorContext();
47
+ const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
38
48
  const fontWeight = allTools.find(f => f.format === "fontWeight");
39
49
  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
40
50
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -51,6 +61,8 @@ const TextFormat = props => {
51
61
  color: "",
52
62
  bgColor: ""
53
63
  };
64
+ let lineSpacingValue = activeMark(editor, 'lineHeight');
65
+ lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
54
66
  const handleColorPicker = type => e => {
55
67
  setType(type);
56
68
  setAnchorEl(e.currentTarget);
@@ -90,6 +102,13 @@ const TextFormat = props => {
90
102
  value
91
103
  });
92
104
  };
105
+ const handleLineSpacing = data => {
106
+ const [[format, value]] = Object.entries(data);
107
+ addMarkData(editor, {
108
+ format,
109
+ value
110
+ });
111
+ };
93
112
  return /*#__PURE__*/_jsxs(Grid, {
94
113
  container: true,
95
114
  sx: classes.textFormatWrapper,
@@ -357,6 +376,32 @@ const TextFormat = props => {
357
376
  xs: 12,
358
377
  sx: classes.dividerGrid,
359
378
  children: /*#__PURE__*/_jsx(Divider, {})
379
+ }), /*#__PURE__*/_jsxs(Grid, {
380
+ item: true,
381
+ xs: 12,
382
+ children: [/*#__PURE__*/_jsx(Typography, {
383
+ variant: "body1",
384
+ color: "primary",
385
+ sx: classes.typoLabel,
386
+ children: "Line Spacing"
387
+ }), /*#__PURE__*/_jsx(Grid, {
388
+ item: true,
389
+ xs: 12,
390
+ className: "typo-icons",
391
+ sx: classes.evenSpace,
392
+ children: /*#__PURE__*/_jsx(LineSpacing, {
393
+ value: lineSpacingValue,
394
+ onChange: handleLineSpacing,
395
+ data: {
396
+ key: 'lineHeight'
397
+ }
398
+ })
399
+ })]
400
+ }), /*#__PURE__*/_jsx(Grid, {
401
+ item: true,
402
+ xs: 12,
403
+ sx: classes.dividerGrid,
404
+ children: /*#__PURE__*/_jsx(Divider, {})
360
405
  }), /*#__PURE__*/_jsx(Grid, {
361
406
  item: true,
362
407
  xs: 12,
@@ -32,6 +32,7 @@ import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
32
32
  import DividerButton from "../Elements/Divider/DividerButton.js";
33
33
  import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
34
34
  import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
35
+ import DataViewButton from "../Elements/DataView/DataViewButton.js";
35
36
  import SearchButton from "../Elements/Search/SearchButton.js";
36
37
  import { jsx as _jsx } from "react/jsx-runtime";
37
38
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -118,6 +119,11 @@ export const RenderToolbarIcon = props => {
118
119
  editor: editor,
119
120
  icoBtnType: icoBtnType
120
121
  }, element.id);
122
+ case "dataView":
123
+ return /*#__PURE__*/_jsx(DataViewButton, {
124
+ editor: editor,
125
+ icoBtnType: icoBtnType
126
+ }, element.id);
121
127
  case "id":
122
128
  return /*#__PURE__*/_jsx(Id, {
123
129
  editor: editor
@@ -191,6 +191,10 @@ export const toolbarGroups = [[{
191
191
  id: 42,
192
192
  type: "table",
193
193
  group: "elements"
194
+ }, {
195
+ id: 51,
196
+ type: "dataView",
197
+ group: "elements"
194
198
  }, {
195
199
  id: 48,
196
200
  format: "divider",
@@ -41,9 +41,9 @@ const FontLoader = props => {
41
41
  // Retry loading the same batch
42
42
  loadNextBatch();
43
43
  } else {
44
- console.log(
45
- // `Max retries reached for batch: ${batch}. Moving to the next batch.`
46
- );
44
+ // console.log(
45
+ // `Max retries reached for batch: ${batch}. Moving to the next batch.`
46
+ // );
47
47
  currentIndex += batchSize;
48
48
  retryCount = 0; // Reset retry count for the next batch
49
49
  loadNextBatch();
@@ -67,7 +67,7 @@ const FontLoader = props => {
67
67
  });
68
68
  loadFontsInBatches(families);
69
69
  }).catch(err => {
70
- console.log(err);
70
+ // console.log(err);
71
71
  });
72
72
  } else {
73
73
  function correctFontArray(fontString) {
@@ -11,6 +11,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
11
11
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
12
12
  import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
13
13
  import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
14
+ import GridOnIcon from "@mui/icons-material/GridOn";
14
15
  import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
15
16
  import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
16
17
  import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
@@ -271,6 +272,11 @@ const iconList = {
271
272
  addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
272
273
  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
273
274
  openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
275
+ dataView: /*#__PURE__*/_jsx(GridOnIcon, {
276
+ sx: {
277
+ fill: "#64748B"
278
+ }
279
+ }),
274
280
  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
275
281
  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
276
282
  brain: /*#__PURE__*/_jsx(BrainIcon, {}),
@@ -3,6 +3,7 @@ const usePopupStyles = theme => ({
3
3
  position: "absolute",
4
4
  zIndex: 1300,
5
5
  borderRadius: "10px",
6
+ // padding: "0px",
6
7
  boxShadow: "0px 4px 10px 0px #00000029",
7
8
  overflow: "hidden",
8
9
  padding: "8px 0px !important",
@@ -27,12 +28,8 @@ const usePopupStyles = theme => ({
27
28
  "&:hover": {
28
29
  borderRadius: "10px",
29
30
  background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
30
- // "& svg": {
31
- // fill: "#007bff",
32
- // },
33
31
  }
34
32
  },
35
-
36
33
  "& .active": {
37
34
  border: "unset !important",
38
35
  "& .MuiPaper-root": {
@@ -51,7 +48,7 @@ const usePopupStyles = theme => ({
51
48
  borderRadius: "7px",
52
49
  "& svg": {
53
50
  "& path": {
54
- stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
51
+ stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
55
52
  }
56
53
  },
57
54
  "& span": {
@@ -62,6 +62,7 @@ const FormSettings = props => {
62
62
  MuiAccordion: {
63
63
  styleOverrides: {
64
64
  root: {
65
+ background: theme?.palette?.editor?.miniToolBarBackground,
65
66
  "& .MuiAccordionSummary-root": {
66
67
  flexDirection: "row-reverse",
67
68
  "& .MuiSvgIcon-root": {
@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
22
22
  backgroundColor: "#FFF",
23
23
  pointerEvents: "none",
24
24
  zIndex: 1,
25
- [theme.breakpoints.between("xs", "md")]: {
25
+ [theme?.breakpoints?.between("xs", "md")]: {
26
26
  left: "calc(50% - 160px)"
27
27
  }
28
28
  },
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
35
35
  backgroundColor: "#FFF",
36
36
  pointerEvents: "none",
37
37
  zIndex: 1,
38
- [theme.breakpoints.between("xs", "md")]: {
38
+ [theme?.breakpoints?.between("xs", "md")]: {
39
39
  left: "calc(50% + 160px)"
40
40
  }
41
41
  },
42
42
  "& .white-wrapper": {
43
43
  overflowX: "hidden",
44
- [theme.breakpoints.between("xs", "md")]: {
44
+ [theme?.breakpoints?.between("xs", "md")]: {
45
45
  position: "absolute",
46
46
  width: "calc(50% - 162px)",
47
47
  height: "calc(100% - 2px)",
@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
10
10
  position: "relative",
11
11
  backgroundColor: "rgba(0,0,0,0)",
12
12
  marginLeft: `calc((100% - 980px) * 0.5)`,
13
- [theme.breakpoints.between("xs", "md")]: {
13
+ [theme?.breakpoints?.between("xs", "md")]: {
14
14
  marginLeft: `calc((100% - 320px) * 0.5)`
15
15
  }
16
16
  }
@@ -3,24 +3,35 @@ 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
- onChange
12
+ onChange,
13
+ show
12
14
  } = props;
13
15
  const classes = useSwitchViewport();
16
+ const {
17
+ setSelectedElement,
18
+ setActiveBreakPoint
19
+ } = useEditorContext();
14
20
  useEffect(() => {
15
- console.log(breakpoint);
21
+ // to reset selection on viewport changes - FS-6589
22
+ setSelectedElement({});
16
23
  }, [breakpoint]);
17
24
  return /*#__PURE__*/_jsxs(Box, {
18
25
  sx: classes.root,
26
+ style: {
27
+ display: show ? "block" : "none"
28
+ },
19
29
  children: [/*#__PURE__*/_jsx(Tooltip, {
20
30
  title: "Desktop View",
21
31
  children: /*#__PURE__*/_jsx(IconButton, {
22
32
  className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
23
33
  onClick: () => {
34
+ setActiveBreakPoint("");
24
35
  onChange("");
25
36
  },
26
37
  children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
30
41
  children: /*#__PURE__*/_jsx(IconButton, {
31
42
  className: `${breakpoint === "xs" ? "active" : ""}`,
32
43
  onClick: () => {
44
+ setActiveBreakPoint("xs");
33
45
  onChange("xs");
34
46
  },
35
47
  children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
@@ -1,5 +1,6 @@
1
1
  import { Transforms, Node, Path } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
+ import { handleNegativeInteger } from "../../../utils/helper";
3
4
  export const ROW_HEIGHT = 50;
4
5
  const MARGIN_OF = {
5
6
  xs: 160,
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
75
76
  console.log(err);
76
77
  }
77
78
  };
78
- function isContainerElement(editor, moveTopath, props) {
79
+ function isContainerElement(editor, moveTopath, props, appenBp) {
79
80
  try {
80
81
  const {
81
82
  path,
@@ -91,6 +92,7 @@ function isContainerElement(editor, moveTopath, props) {
91
92
  parentNode = Node.get(editor, Path.parent(dragItemPath));
92
93
  }
93
94
  const moveToNode = Node.get(editor, moveTopath);
95
+ const leftOfMoveToNode = moveToNode[`left${appenBp}`];
94
96
  if (moveToNode.type === "freegridBox") {
95
97
  if (parentNode.type === "freegridBox") {
96
98
  // same box
@@ -98,10 +100,10 @@ function isContainerElement(editor, moveTopath, props) {
98
100
  return props.calX;
99
101
  } else {
100
102
  // for different box
101
- return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
103
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
102
104
  }
103
105
  } else {
104
- return props.calX - moveToNode?.left;
106
+ return props.calX - leftOfMoveToNode;
105
107
  }
106
108
  } else if (moveToNode.type === "freegrid") {
107
109
  if (parentNode.type === "freegridBox") {
@@ -133,14 +135,16 @@ export function onDropItem(props, parentClass) {
133
135
  const from = parentPath.split("|").map(m => parseInt(m));
134
136
  let newPath = [];
135
137
  newPath = moveTo;
136
- const cCalx = isContainerElement(editor, moveTo, props);
138
+ const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
139
+ const cCalx = handleNegativeInteger(isContainerElement(editor, moveTo, props, appenBp));
140
+
137
141
  // const posX = parseInt(
138
142
  // cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
139
143
  // );
140
144
  const toSectionNode = Node.get(editor, newPath);
141
145
  const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
142
146
  const rect = addToSectionDOM.getBoundingClientRect();
143
- const y = endPosition.y - startPosition.diffY - rect.top;
147
+ const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
144
148
 
145
149
  // Calculate grid position
146
150
  const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -150,7 +154,6 @@ export function onDropItem(props, parentClass) {
150
154
 
151
155
  // Update grid area
152
156
  const gridArea = `${row} / 1 / ${row + 1} / 2`;
153
- const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
154
157
  Transforms.setNodes(editor, {
155
158
  [`gridArea${appenBp}`]: gridArea,
156
159
  [`left${appenBp}`]: cCalx,
@@ -533,7 +533,7 @@ const RnD = props => {
533
533
  children: [/*#__PURE__*/_jsx("div", {
534
534
  id: `opt_ref_${str_path}`,
535
535
  style: {
536
- display: "block",
536
+ display: readOnly ? "none" : "block",
537
537
  position: "absolute",
538
538
  left: "-8px",
539
539
  top: "-30px",
@@ -13,6 +13,7 @@ import { insertDivider } from "../../utils/divider";
13
13
  import { insertFreeGrid } from "../../utils/freegrid";
14
14
  import { Transforms } from "slate";
15
15
  import { insertInfinityAI } from "../../utils/infinityAI";
16
+ import { insertDataView } from "../../utils/dataView";
16
17
  import SearchButton from "../../Elements/Search/SearchButton";
17
18
  import { jsx as _jsx } from "react/jsx-runtime";
18
19
  const ELEMENTS_LIST = [{
@@ -158,7 +159,7 @@ const ELEMENTS_LIST = [{
158
159
  renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
159
160
  ...rest,
160
161
  element: {
161
- name: 'Brain'
162
+ name: "Brain"
162
163
  },
163
164
  icoBtnType: "cmd"
164
165
  })
@@ -262,6 +263,17 @@ const ELEMENTS_LIST = [{
262
263
  onInsert: editor => {
263
264
  insertInfinityAI(editor);
264
265
  }
266
+ }, {
267
+ name: "Dynamic Table",
268
+ group: "Dynamic Table",
269
+ desc: "",
270
+ type: "dataView",
271
+ icon: /*#__PURE__*/_jsx(Icon, {
272
+ icon: "dataView"
273
+ }),
274
+ onInsert: editor => {
275
+ insertDataView(editor);
276
+ }
265
277
  }];
266
278
  const elements = props => {
267
279
  const {
@@ -72,6 +72,11 @@ const BackgroundImage = props => {
72
72
  children: "REMOVE"
73
73
  }) : /*#__PURE__*/_jsx(Grid, {
74
74
  className: "uploadImageText",
75
+ sx: {
76
+ padding: 0,
77
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
78
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
79
+ },
75
80
  children: /*#__PURE__*/_jsxs(Button, {
76
81
  component: "label",
77
82
  variant: "text",
@@ -1,6 +1,7 @@
1
1
  import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
2
2
  import React from "react";
3
3
  import Icon from "../../Icon";
4
+ import { useEditorContext } from "../../../hooks/useMouseMove";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,7 +16,10 @@ const RenderCard = ({
15
16
  return /*#__PURE__*/_jsx(Card, {
16
17
  sx: {
17
18
  position: 'relative',
18
- padding: "10px"
19
+ padding: "10px",
20
+ '& .MuiCheckbox-root svg': {
21
+ fill: 'unset !important'
22
+ }
19
23
  },
20
24
  children: /*#__PURE__*/_jsx(FormControlLabel, {
21
25
  control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
81
85
  selectedCard,
82
86
  infoIcon
83
87
  } = data;
88
+ const {
89
+ theme
90
+ } = useEditorContext();
84
91
  const activeCard = value === selectedCard;
85
92
  const handleChange = e => {
86
93
  if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
99
106
  sx: {
100
107
  marginBottom: "12px",
101
108
  "& .MuiPaper-root": {
102
- border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
109
+ background: theme?.palette?.editor?.miniToolBarBackground,
110
+ border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
103
111
  borderRadius: "8px",
104
112
  boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
105
113
  }
@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
18
18
  import SelectSwitch from "./selectSwitch";
19
19
  import CardsMapping from "./card";
20
20
  import MetaDataMapping from "./metaDataMapping";
21
+ import LineSpacing from "./lineSpacing";
21
22
  const FieldMap = {
22
23
  text: Text,
23
24
  bannerSpacing: BannerSpacing,
@@ -38,6 +39,7 @@ const FieldMap = {
38
39
  fontSize: FontSize,
39
40
  selectSwitch: SelectSwitch,
40
41
  card: CardsMapping,
41
- metadatamapping: MetaDataMapping
42
+ metadatamapping: MetaDataMapping,
43
+ lineSpacing: LineSpacing
42
44
  };
43
45
  export default FieldMap;
@@ -0,0 +1,79 @@
1
+ import React, { useState } from "react";
2
+ import { Grid, Slider, Typography, Box } from "@mui/material";
3
+ import { getBreakPointsValue } from "../../../helper/theme";
4
+ import useWindowResize from "../../../hooks/useWindowResize";
5
+ import { useEditorContext } from "../../../hooks/useMouseMove";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const LineSpacing = props => {
9
+ const {
10
+ value: val,
11
+ data,
12
+ onChange
13
+ } = props;
14
+ const {
15
+ theme
16
+ } = useEditorContext();
17
+ const {
18
+ key
19
+ } = data;
20
+ const [size] = useWindowResize();
21
+ const pro_value = getBreakPointsValue(val, size?.device);
22
+ const [value, setValue] = useState(pro_value);
23
+ let breakpointValue = getBreakPointsValue(val, null);
24
+ breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
25
+ useState(() => {
26
+ setValue(pro_value);
27
+ }, [pro_value]);
28
+ const handleChange = e => {
29
+ onChange({
30
+ [key]: {
31
+ ...breakpointValue,
32
+ [size?.device]: e.target.value
33
+ }
34
+ });
35
+ };
36
+ return /*#__PURE__*/_jsxs(Grid, {
37
+ item: true,
38
+ xs: 12,
39
+ children: [/*#__PURE__*/_jsx(Typography, {
40
+ variant: "body1",
41
+ color: "primary",
42
+ style: {
43
+ fontSize: "14px",
44
+ fontWeight: 500
45
+ },
46
+ children: data?.label
47
+ }), /*#__PURE__*/_jsxs(Grid, {
48
+ container: true,
49
+ wrap: "nowrap",
50
+ className: "sld-wrpr",
51
+ children: [/*#__PURE__*/_jsx(Slider, {
52
+ className: "spacingSlider",
53
+ defaultValue: value || 1.43,
54
+ "aria-label": "Default",
55
+ valueLabelDisplay: "auto",
56
+ min: 0.5,
57
+ max: 3.0,
58
+ step: 0.1,
59
+ name: "lineHeight",
60
+ onChange: handleChange
61
+ }), /*#__PURE__*/_jsx(Box, {
62
+ component: "input",
63
+ sx: {
64
+ background: theme?.palette?.editor?.background,
65
+ color: theme?.palette?.editor?.textColor
66
+ },
67
+ name: "lineHeight",
68
+ value: pro_value,
69
+ className: "sliderInput",
70
+ onChange: handleChange,
71
+ type: "number",
72
+ placeholder: "0",
73
+ disabled: true,
74
+ defaultValue: pro_value || 1.43
75
+ })]
76
+ })]
77
+ });
78
+ };
79
+ export default LineSpacing;
@@ -25,6 +25,10 @@ const pageSettingsStyle = [{
25
25
  label: "Padding",
26
26
  key: "bannerSpacing",
27
27
  type: "bannerSpacing"
28
+ }, {
29
+ label: "Line Spacing",
30
+ key: "lineHeight",
31
+ type: "lineSpacing"
28
32
  }]
29
33
  }, {
30
34
  tab: "Max Width",
@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
+ import { useEditorContext } from "../hooks/useMouseMove";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,9 @@ const Uploader = props => {
18
19
  const [base64, setBase64] = useState(value?.url);
19
20
  const [fileName, setFileName] = useState("");
20
21
  const [uploading, setUploading] = useState(false);
22
+ const {
23
+ theme
24
+ } = useEditorContext();
21
25
  const handleChange = async e => {
22
26
  const uFile = e.target.files[0];
23
27
  const strImage = await convertBase64(uFile);
@@ -98,6 +102,10 @@ const Uploader = props => {
98
102
  className: "uploadImageSection",
99
103
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
100
104
  className: "uploadImageText",
105
+ sx: {
106
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
107
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
108
+ },
101
109
  children: /*#__PURE__*/_jsxs(Button, {
102
110
  component: "label",
103
111
  variant: "text",