@flozy/editor 3.8.9 → 3.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/dist/Editor/ChatEditor.js +55 -45
  2. package/dist/Editor/CommonEditor.js +8 -69
  3. package/dist/Editor/DialogWrapper.js +3 -4
  4. package/dist/Editor/Editor.css +12 -5
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +36 -47
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +15 -4
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +23 -36
  8. package/dist/Editor/Elements/Button/EditorButton.js +16 -23
  9. package/dist/Editor/Elements/Embed/Image.js +14 -15
  10. package/dist/Editor/Elements/Embed/Video.js +8 -12
  11. package/dist/Editor/Elements/Emoji/EmojiButton.js +7 -11
  12. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  13. package/dist/Editor/Elements/Form/Form.js +1 -1
  14. package/dist/Editor/Elements/Grid/Grid.js +8 -12
  15. package/dist/Editor/Elements/Grid/GridItem.js +21 -31
  16. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
  17. package/dist/Editor/Elements/SimpleText/index.js +8 -9
  18. package/dist/Editor/Elements/SimpleText/style.js +0 -37
  19. package/dist/Editor/Styles/EditorStyles.js +0 -23
  20. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +25 -1
  21. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
  22. package/dist/Editor/Toolbar/PopupTool/index.js +0 -8
  23. package/dist/Editor/Toolbar/Toolbar.js +0 -7
  24. package/dist/Editor/Toolbar/toolbarGroups.js +0 -5
  25. package/dist/Editor/common/Icon.js +2 -9
  26. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
  27. package/dist/Editor/common/MentionsPopup/index.js +8 -12
  28. package/dist/Editor/common/Section/index.js +12 -21
  29. package/dist/Editor/common/Section/styles.js +1 -6
  30. package/dist/Editor/common/Shorthands/elements.js +0 -12
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +31 -32
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
  33. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +2 -4
  35. package/dist/Editor/common/StyleBuilder/index.js +2 -2
  36. package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -13
  37. package/dist/Editor/helper/index.js +0 -139
  38. package/dist/Editor/helper/theme.js +2 -50
  39. package/dist/Editor/hooks/useMouseMove.js +8 -36
  40. package/dist/Editor/hooks/withCommon.js +1 -2
  41. package/dist/Editor/utils/SlateUtilityFunctions.js +3 -23
  42. package/dist/Editor/utils/draftToSlate.js +1 -1
  43. package/dist/Editor/utils/events.js +0 -5
  44. package/dist/Editor/utils/helper.js +0 -29
  45. package/package.json +2 -5
  46. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -391
  47. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -193
  48. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +0 -23
  49. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -184
  50. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -36
  51. package/dist/Editor/Elements/FreeGrid/Options/More.js +0 -24
  52. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +0 -47
  53. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +0 -11
  54. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +0 -75
  55. package/dist/Editor/Elements/FreeGrid/styles.js +0 -159
  56. package/dist/Editor/ErrorBoundary.js +0 -30
  57. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +0 -105
  58. package/dist/Editor/common/RnD/ContextMenu/index.js +0 -38
  59. package/dist/Editor/common/RnD/ContextMenu/styles.js +0 -21
  60. package/dist/Editor/common/RnD/DragInfo/index.js +0 -31
  61. package/dist/Editor/common/RnD/DragInfo/styles.js +0 -15
  62. package/dist/Editor/common/RnD/DragOver/index.js +0 -46
  63. package/dist/Editor/common/RnD/DragOver/styles.js +0 -23
  64. package/dist/Editor/common/RnD/ElementOptions/Actions.js +0 -82
  65. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -26
  66. package/dist/Editor/common/RnD/ElementOptions/index.js +0 -93
  67. package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -41
  68. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +0 -153
  69. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +0 -58
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +0 -7
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +0 -46
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +0 -46
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +0 -46
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -30
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +0 -46
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +0 -13
  77. package/dist/Editor/common/RnD/ElementSettings/index.js +0 -17
  78. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +0 -14
  79. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -76
  80. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +0 -52
  81. package/dist/Editor/common/RnD/GuideLines/index.js +0 -33
  82. package/dist/Editor/common/RnD/GuideLines/styles.js +0 -60
  83. package/dist/Editor/common/RnD/OptionsPopup/index.js +0 -50
  84. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -36
  85. package/dist/Editor/common/RnD/RnDCopy.js +0 -23
  86. package/dist/Editor/common/RnD/ShadowElement.js +0 -34
  87. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -40
  88. package/dist/Editor/common/RnD/SwitchViewport/styles.js +0 -24
  89. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +0 -63
  90. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +0 -19
  91. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +0 -13
  92. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +0 -18
  93. package/dist/Editor/common/RnD/TransformHandles/index.js +0 -62
  94. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +0 -26
  95. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +0 -98
  96. package/dist/Editor/common/RnD/Utils/collisionDetection.js +0 -52
  97. package/dist/Editor/common/RnD/Utils/gridDropItem.js +0 -148
  98. package/dist/Editor/common/RnD/Utils/index.js +0 -251
  99. package/dist/Editor/common/RnD/VirtualElement/index.js +0 -76
  100. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -27
  101. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +0 -28
  102. package/dist/Editor/common/RnD/index.js +0 -503
  103. package/dist/Editor/common/RnD/styles.js +0 -4
  104. package/dist/Editor/common/StyleBuilder/boxStyle.js +0 -30
  105. package/dist/Editor/helper/RnD/focusOnNewItem.js +0 -39
  106. package/dist/Editor/helper/RnD/scrollToNewSection.js +0 -24
  107. package/dist/Editor/helper/breakpoint.js +0 -5
  108. package/dist/Editor/hooks/useBreakpoints.js +0 -34
  109. package/dist/Editor/hooks/withErrorHandling.js +0 -14
  110. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +0 -168
  111. package/dist/Editor/utils/freegrid.js +0 -49
@@ -1,7 +1,8 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
4
+ import { IconButton, Tooltip, Box } from "@mui/material";
5
+ // import * as fIcons from "@mui/icons-material";
5
6
  import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
6
7
  import SettingsIcon from "@mui/icons-material/Settings";
7
8
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -9,13 +10,12 @@ import LinkIcon from "@mui/icons-material/Link";
9
10
  import ButtonPopup from "./ButtonPopup";
10
11
  import { actionButtonRedirect } from "../../service/actionTrigger";
11
12
  import { WorkflowIcon } from "../../common/iconslist";
12
- import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
13
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
13
14
  import { handleLinkType, windowVar } from "../../utils/helper";
14
15
  import LinkSettings from "../../common/LinkSettings";
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
18
  const EditorButton = props => {
18
- const theme = useTheme();
19
19
  const {
20
20
  attributes,
21
21
  element,
@@ -81,6 +81,7 @@ const EditorButton = props => {
81
81
  }
82
82
  };
83
83
  const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
84
+ console.log(openInNewTab);
84
85
  const onMenuClick = val => () => {
85
86
  switch (val) {
86
87
  case "edit":
@@ -153,33 +154,21 @@ const EditorButton = props => {
153
154
  const onClose = () => {
154
155
  setEdit(false);
155
156
  };
156
- const tAlign = alignment || textAlign || "left";
157
- const btnSp = groupByBreakpoint({
158
- borderRadius: {
159
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
160
- },
161
- padding: {
162
- ...getTRBLBreakPoints(bannerSpacing)
163
- }
164
- }, theme);
165
- const pSp = groupByBreakpoint({
166
- display: {
167
- xs: xsHidden ? "none" : "inline-block",
168
- lg: "inline-block"
169
- }
170
- }, theme);
171
157
  return /*#__PURE__*/_jsxs("div", {
172
- className: `editor-btn-wrapper`,
158
+ className: "editor-btn-wrapper",
173
159
  ...attributes,
174
160
  style: {
175
- textAlign: tAlign
161
+ textAlign: alignment || textAlign || "left"
176
162
  },
177
163
  contentEditable: false,
178
164
  children: [/*#__PURE__*/_jsx(Box, {
179
165
  component: "div",
180
166
  className: "editor-btn-wrapper-inner",
181
167
  sx: {
182
- ...pSp,
168
+ display: {
169
+ lg: "inline-block",
170
+ xs: xsHidden ? "none" : "inline-block"
171
+ },
183
172
  "& .element-toolbar": {
184
173
  display: "none"
185
174
  },
@@ -195,15 +184,19 @@ const EditorButton = props => {
195
184
  display: "inline-block"
196
185
  },
197
186
  children: [/*#__PURE__*/_jsxs(Box, {
198
- className: `btn textAlign-${tAlign}`,
199
187
  sx: {
200
188
  textDecoration: "none",
201
189
  background: bgColor || "rgb(30, 75, 122)",
202
190
  borderBlockStyle: "solid",
203
191
  borderColor: borderColor || "transparent",
204
192
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
205
- ...btnSp,
193
+ borderRadius: {
194
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
+ },
206
196
  borderStyle: borderStyle || "solid",
197
+ padding: {
198
+ ...getTRBLBreakPoints(bannerSpacing)
199
+ },
207
200
  color: `${textColor || "#FFFFFF"}`,
208
201
  fontSize: textSize || "inherit",
209
202
  fontFamily: fontFamily || "PoppinsRegular",
@@ -4,16 +4,15 @@ import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
5
  import useResize from "../../utils/customHooks/useResize";
6
6
  import EmbedPopup from "./EmbedPopup";
7
- import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
7
+ import { IconButton, Tooltip, Box } from "@mui/material";
8
8
  import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
- import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
10
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
12
  import frames from "./Frames";
13
13
  import ImageFrame from "./Frames/ImageFrame";
14
14
  import LinkSettings from "../../common/LinkSettings";
15
15
  import { handleLinkType } from "../../utils/helper";
16
- import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
17
16
  import { jsx as _jsx } from "react/jsx-runtime";
18
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
18
  const ToolBar = ({
@@ -66,7 +65,6 @@ const ImageContent = ({
66
65
  objectFit,
67
66
  webAddress
68
67
  } = element;
69
- const theme = useTheme();
70
68
  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
71
69
  component: "button",
72
70
  className: "element-empty-btn",
@@ -81,7 +79,9 @@ const ImageContent = ({
81
79
  component: "img",
82
80
  className: "emb-img",
83
81
  sx: {
84
- ...wrapThemeBreakpoints(getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true), "borderRadius", theme),
82
+ borderRadius: {
83
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
84
+ },
85
85
  objectFit: "cover",
86
86
  boxShadow: boxShadow || "none",
87
87
  height: objectFit ? "100%" : "auto",
@@ -105,7 +105,6 @@ const Image = ({
105
105
  children,
106
106
  customProps
107
107
  }) => {
108
- const theme = useTheme();
109
108
  const {
110
109
  url,
111
110
  bannerSpacing,
@@ -228,14 +227,12 @@ const Image = ({
228
227
  };
229
228
  } else {
230
229
  return {
231
- ...groupByBreakpoint({
232
- width: url ? {
233
- ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
234
- } : "100%",
235
- height: objectFit && url ? {
236
- ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
237
- } : "auto"
238
- }, theme)
230
+ width: url ? {
231
+ ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
232
+ } : "100%",
233
+ height: objectFit && url ? {
234
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
235
+ } : "auto"
239
236
  };
240
237
  }
241
238
  };
@@ -250,7 +247,9 @@ const Image = ({
250
247
  },
251
248
  width: `100%`,
252
249
  maxWidth: "100%",
253
- ...wrapThemeBreakpoints(getTRBLBreakPoints(bannerSpacing), "padding", theme),
250
+ padding: {
251
+ ...getTRBLBreakPoints(bannerSpacing)
252
+ },
254
253
  backgroundColor: bgColor,
255
254
  justifyContent: horizantal,
256
255
  alignContent: vertical
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
- import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
4
+ import { IconButton, Tooltip, Box } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
6
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
7
7
  import Icon from "../../common/Icon";
@@ -10,7 +10,7 @@ import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
11
  import { gradientBorder } from "../../utils/helper";
12
12
  import { getEmbedURL } from "../../helper";
13
- import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
13
+ import { getBreakPointsValue } from "../../helper/theme";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
16
  const Video = ({
@@ -19,7 +19,6 @@ const Video = ({
19
19
  children,
20
20
  customProps
21
21
  }) => {
22
- const theme = useTheme();
23
22
  const {
24
23
  alt,
25
24
  alignment,
@@ -127,14 +126,12 @@ const Video = ({
127
126
  };
128
127
  } else {
129
128
  return {
130
- ...groupByBreakpoint({
131
- width: {
132
- ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
133
- },
134
- height: url ? {
135
- ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
136
- } : "auto"
137
- }, theme)
129
+ width: {
130
+ ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
131
+ },
132
+ height: url ? {
133
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
134
+ } : "auto"
138
135
  };
139
136
  }
140
137
  };
@@ -208,7 +205,6 @@ const Video = ({
208
205
  onDelete: onDelete
209
206
  }) : null, /*#__PURE__*/_jsxs(Box, {
210
207
  component: "div",
211
- className: "embed-video-wrpr-in",
212
208
  contentEditable: false,
213
209
  sx: {
214
210
  position: "relative",
@@ -25,17 +25,13 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
25
25
  }
26
26
  }));
27
27
  const onClick = () => {
28
- try {
29
- if (editor.selection) {
30
- const domRange = ReactEditor.toDOMRange(editor, editor.selection);
31
- const rect = domRange.getBoundingClientRect();
32
- setAnchorEl({
33
- getBoundingClientRect: () => rect,
34
- nodeType: 1
35
- });
36
- }
37
- } catch (err) {
38
- console.log(err);
28
+ if (editor.selection) {
29
+ const domRange = ReactEditor.toDOMRange(editor, editor.selection);
30
+ const rect = domRange.getBoundingClientRect();
31
+ setAnchorEl({
32
+ getBoundingClientRect: () => rect,
33
+ nodeType: 1
34
+ });
39
35
  }
40
36
  };
41
37
  const onEmojiSelect = emoji => {
@@ -4,12 +4,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { Fragment as _Fragment } from "react/jsx-runtime";
5
5
  const EmojiPicker = props => {
6
6
  const {
7
- onEmojiSelect
7
+ onEmojiSelect,
8
+ onClose
8
9
  } = props;
9
10
  return /*#__PURE__*/_jsx(_Fragment, {
10
11
  children: /*#__PURE__*/_jsx(Picker, {
11
12
  data: data,
12
- onEmojiSelect: onEmojiSelect
13
+ onEmojiSelect: onEmojiSelect,
14
+ onClickOutside: onClose
13
15
  })
14
16
  });
15
17
  };
@@ -119,7 +119,7 @@ const Form = props => {
119
119
  if (fieldData?.element === "email") {
120
120
  rule.push(`isEmail`);
121
121
  }
122
- if (fieldData?.required || fieldData?.element === "email") {
122
+ if (fieldData?.required && fieldData?.element === "email") {
123
123
  validations.push({
124
124
  name: pair[0],
125
125
  value: pair[1],
@@ -2,7 +2,7 @@
2
2
  import React, { useState } from "react";
3
3
  import { Transforms, Path } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
- import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
5
+ import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
7
7
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
8
8
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
@@ -13,7 +13,7 @@ import GridPopup from "./GridPopup";
13
13
  import SectionPopup from "./SectionPopup";
14
14
  import { gridItem } from "../../utils/gridItem";
15
15
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
16
- import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
16
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
17
17
  import useWindowResize from "../../hooks/useWindowResize";
18
18
  import { jsx as _jsx } from "react/jsx-runtime";
19
19
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -75,7 +75,6 @@ const GridToolBar = ({
75
75
  }) : null;
76
76
  };
77
77
  const Grid = props => {
78
- const theme = useTheme();
79
78
  const {
80
79
  attributes,
81
80
  children,
@@ -276,14 +275,6 @@ const Grid = props => {
276
275
  bottomLeft,
277
276
  bottomRight
278
277
  } = getBreakPointsValue(borderRadius, size?.device) || {};
279
- const gridcwrprProps = groupByBreakpoint({
280
- padding: {
281
- ...getTRBLBreakPoints(bannerSpacing)
282
- },
283
- flexWrap: {
284
- ...getBreakPointsValue(flexWrap || "wrap")
285
- }
286
- }, theme);
287
278
  return /*#__PURE__*/_jsxs(GridContainer, {
288
279
  container: true,
289
280
  className: `grid-container ${grid} has-hover element-root dpath`,
@@ -349,11 +340,16 @@ const Grid = props => {
349
340
  className: "grid-c-wrpr",
350
341
  sx: {
351
342
  display: "flex",
352
- ...gridcwrprProps,
343
+ padding: {
344
+ ...getTRBLBreakPoints(bannerSpacing)
345
+ },
353
346
  alignItems: vertical || "start",
354
347
  justifyContent: horizantal || "start",
355
348
  flexDirection: flexDirection || "row",
356
349
  width: "100%",
350
+ flexWrap: {
351
+ ...getBreakPointsValue(flexWrap || "wrap")
352
+ },
357
353
  height: "auto"
358
354
  },
359
355
  "data-path": path.join(","),
@@ -1,15 +1,13 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { useTheme } from "@mui/material";
4
- import { Transforms } from "slate";
3
+ import { Transforms, Node } from "slate";
5
4
  import { useSlateStatic, ReactEditor } from "slate-react";
6
5
  import GridItemPopup from "./GridItemPopup";
7
6
  import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
8
7
  import { GridSettingsIcon } from "../../common/iconslist";
9
8
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
10
- import { groupByBreakpoint, getBreakPointsValue, getBRValue, getTRBLBreakPoints } from "../../helper/theme";
9
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
11
10
  import { isEmptyNode } from "../../utils/helper";
12
- import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
13
11
  import { jsx as _jsx } from "react/jsx-runtime";
14
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
13
  const GridItemToolbar = ({
@@ -36,7 +34,6 @@ const GridItemToolbar = ({
36
34
  }) : null;
37
35
  };
38
36
  const GridItem = props => {
39
- const theme = useTheme();
40
37
  const {
41
38
  attributes,
42
39
  children,
@@ -105,44 +102,35 @@ const GridItem = props => {
105
102
  const getBorderColor = () => {
106
103
  return borderColor || "transparent";
107
104
  };
108
- const getBRProps = groupByBreakpoint({
109
- display: {
110
- xs: xsHidden ? "none" : "inline-block",
111
- lg: "inline-block"
112
- },
113
- width: {
114
- ...getBreakPointsValue(grid, null, "overrideGridSize", true)
115
- },
116
- height: {
117
- ...getBreakPointsValue(cellGHeight || "auto")
118
- },
119
- borderRadius: {
120
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
121
- },
122
- margin: {
123
- ...getTRBLBreakPoints(margin)
124
- }
125
- }, theme);
126
- const giInProps = groupByBreakpoint({
127
- padding: {
128
- ...getTRBLBreakPoints(bannerSpacing)
129
- }
130
- }, theme);
131
105
  return /*#__PURE__*/_jsxs(Item, {
132
106
  item: true,
133
107
  component: "div",
134
108
  className: `grid-item element-root gi-top-wrpr dpath`,
135
109
  ...attributes,
136
110
  sx: {
137
- ...getBRProps,
138
- display: "flex",
111
+ width: {
112
+ ...getBreakPointsValue(grid, null, "overrideGridSize", true)
113
+ },
114
+ height: {
115
+ ...getBreakPointsValue(cellGHeight || "auto")
116
+ },
117
+ display: {
118
+ lg: "flex",
119
+ xs: xsHidden ? "none" : "flex"
120
+ },
139
121
  flexDirection: flexDirection || "column",
140
122
  background: bgColor || "transparent",
141
123
  borderColor: getBorderColor(),
142
124
  borderWidth: borderWidth || "1px",
125
+ borderRadius: {
126
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
127
+ },
143
128
  borderStyle: borderStyle || "solid",
144
129
  alignItems: horizantal,
145
130
  justifyContent: vertical,
131
+ margin: {
132
+ ...getTRBLBreakPoints(margin)
133
+ },
146
134
  "&:hover": {
147
135
  background: `${bgColorHover || bgColor || "transparent"}`
148
136
  }
@@ -181,7 +169,9 @@ const GridItem = props => {
181
169
  sx: {
182
170
  display: "flex",
183
171
  flexDirection: flexDirection || "column",
184
- ...giInProps,
172
+ padding: {
173
+ ...getTRBLBreakPoints(bannerSpacing)
174
+ },
185
175
  width: "100%",
186
176
  height: "100%",
187
177
  color: textColor || "#000",
@@ -11,7 +11,9 @@ const PageSettingsButton = props => {
11
11
  const {
12
12
  customProps,
13
13
  icoBtnType,
14
- from
14
+ from,
15
+ closePopper,
16
+ setToolTip
15
17
  } = props;
16
18
  const [openSetttings, setOpenSettings] = useState(false);
17
19
  const editor = useSlateStatic();
@@ -38,6 +40,8 @@ const PageSettingsButton = props => {
38
40
  }
39
41
  };
40
42
  const onClose = () => {
43
+ closePopper(true);
44
+ setToolTip(false);
41
45
  setOpenSettings(false);
42
46
  };
43
47
  return /*#__PURE__*/_jsxs(_Fragment, {
@@ -6,7 +6,7 @@ import { isTextSelected } from "../../utils/helper";
6
6
  import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import SimpleTextStyle from "./style";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { createElement as _createElement } from "react";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const SimpleText = props => {
11
11
  const {
12
12
  theme,
@@ -38,16 +38,15 @@ const SimpleText = props => {
38
38
  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
39
39
  const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
40
40
  const opacity = !isTextSelected(editor?.selection);
41
- const nextType = element?.children[0]?.type;
42
- return /*#__PURE__*/_createElement(Box, {
41
+ return /*#__PURE__*/_jsxs(Box, {
43
42
  ...element.attr,
44
43
  ...attributes,
45
- className: `simple-text ${nextType}`,
44
+ className: `simple-text`,
46
45
  sx: classes.root,
47
- key: `para_${path.join("|")}`
48
- }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
49
- className: "placeholder-simple-text",
50
- children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
51
- }));
46
+ children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
47
+ className: "placeholder-simple-text",
48
+ children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
49
+ })]
50
+ });
52
51
  };
53
52
  export default SimpleText;
@@ -23,43 +23,6 @@ const SimpleTextStyle = ({
23
23
  background: "transparent",
24
24
  color: invertColor(pageColor)
25
25
  }
26
- },
27
- "& .freegrid-section": {
28
- "&.enable-1:before": {
29
- content: "' '",
30
- pointerEvents: "none",
31
- position: "absolute",
32
- left: "2px",
33
- top: "2px",
34
- width: "calc(100% - 4px)",
35
- height: "calc(100% - 4px)",
36
- outline: "2px solid #2563EB",
37
- zIndex: 1
38
- },
39
- "&:hover, &.enable-1": {
40
- "& .freegrid-section-infos": {
41
- pointerEvents: "none",
42
- position: "absolute",
43
- top: 0,
44
- left: 0,
45
- width: "100%",
46
- zIndex: 1,
47
- ":before": {
48
- position: "absolute",
49
- content: "attr(placeholder)",
50
- left: "0px",
51
- top: "0px",
52
- width: "auto",
53
- height: "auto",
54
- backgroundColor: "#8360FD",
55
- padding: "4px 6px",
56
- fontSize: "12px",
57
- fontWeight: "500",
58
- color: "#FFF",
59
- lineHeight: "12px"
60
- }
61
- }
62
- }
63
26
  }
64
27
  },
65
28
  section: {
@@ -29,28 +29,6 @@ const editorStyles = ({
29
29
  "& .MuiOutlinedInput-input": {
30
30
  color: theme?.palette?.editor?.textColor || "black"
31
31
  }
32
- },
33
- "&.stimulate-xs": {
34
- ":before": {
35
- content: '" "',
36
- position: "absolute",
37
- top: 0,
38
- left: 0,
39
- width: "calc(50% - 162px)",
40
- height: "100%",
41
- pointerEvents: "none",
42
- backgroundColor: "#FFF"
43
- },
44
- ":after": {
45
- content: '" "',
46
- position: "absolute",
47
- top: 0,
48
- right: 0,
49
- width: "calc(50% - 160px)",
50
- height: "100%",
51
- pointerEvents: "none",
52
- backgroundColor: "#FFF"
53
- }
54
32
  }
55
33
  },
56
34
  slateWrapper: {
@@ -265,7 +243,6 @@ const editorStyles = ({
265
243
  }
266
244
  },
267
245
  "&.hideScroll": {
268
- overflowAnchor: "none",
269
246
  "&::-webkit-scrollbar-track": {
270
247
  background: "none !important"
271
248
  },
@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
9
9
  import usePopupStyle from "../PopupTool/PopupToolStyle";
10
10
  import PopperHeader from "../PopupTool/PopperHeader";
11
11
  import { useEditorContext } from "../../hooks/useMouseMove";
12
+ import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,12 +48,23 @@ const MiniToolbar = props => {
47
48
  const {
48
49
  popupType
49
50
  } = useEditorContext();
51
+ const [toolTip, setToolTip] = useState(false);
52
+ const [data, setData] = useState(null);
53
+ useEffect(() => {
54
+ if (data) {
55
+ setToolTip(false);
56
+ setData(null);
57
+ }
58
+ }, [data]);
50
59
  useEffect(() => {
51
60
  if (popper) {
52
61
  setPopper(null);
53
62
  }
54
63
  }, [editor.selection]);
55
64
  const handleClick = type => e => {
65
+ if (type === "page-settings") {
66
+ setToolTip(true);
67
+ }
56
68
  setPopper(type);
57
69
  setAnchorEl(e.currentTarget);
58
70
  };
@@ -66,6 +78,10 @@ const MiniToolbar = props => {
66
78
  const onSearch = e => {
67
79
  setSearch(e?.target?.value || "");
68
80
  };
81
+ const closePopper = data => {
82
+ setData(data);
83
+ setToolTip("false");
84
+ };
69
85
  return /*#__PURE__*/_jsxs(_Fragment, {
70
86
  children: [/*#__PURE__*/_jsx(Box, {
71
87
  component: "div",
@@ -81,11 +97,19 @@ const MiniToolbar = props => {
81
97
  return /*#__PURE__*/_jsx(Tooltip, {
82
98
  arrow: true,
83
99
  title: label,
100
+ disableHoverListener: toolTip,
84
101
  children: /*#__PURE__*/_jsx(IconButton, {
85
102
  className: type === popper ? "active" : "",
86
103
  onClick: handleClick(type),
87
104
  disabled: isDisabled,
88
- children: /*#__PURE__*/_jsx(Icon, {
105
+ children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
106
+ from: "miniToolBar",
107
+ icoBtnType: "mini",
108
+ customProps: customProps,
109
+ editor: editor,
110
+ closePopper: closePopper,
111
+ setToolTip: setToolTip
112
+ }) : /*#__PURE__*/_jsx(Icon, {
89
113
  from: "miniToolBar",
90
114
  icoBtnType: "mini",
91
115
  customProps: customProps,
@@ -100,7 +100,6 @@ const TextFormat = props => {
100
100
  return /*#__PURE__*/_jsxs(Grid, {
101
101
  container: true,
102
102
  sx: classes.textFormatWrapper,
103
- className: "text-formatter-popup",
104
103
  children: [/*#__PURE__*/_jsxs(Grid, {
105
104
  item: true,
106
105
  xs: 12,
@@ -31,9 +31,6 @@ const PopupTool = props => {
31
31
  const id = open ? "popup-edit-tool" : "";
32
32
  const table = new TableUtil(editor);
33
33
  const [size] = useWindowResize();
34
- const {
35
- selectedElement
36
- } = useEditorContext();
37
34
  useEffect(() => {
38
35
  if (event === "end" && anchorEl && !open) {
39
36
  // for table cell selection
@@ -56,11 +53,6 @@ const PopupTool = props => {
56
53
  updateAnchorEl();
57
54
  }
58
55
  }, [selection]);
59
- useEffect(() => {
60
- if (selectedElement?.enable === 1) {
61
- setAnchorEl(null);
62
- }
63
- }, [selection, selectedElement?.path, selectedElement?.enable]);
64
56
  const updateAnchorEl = () => {
65
57
  try {
66
58
  const domSelection = window.getSelection();