@flozy/editor 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +185 -170
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -19
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
  8. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  13. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  14. package/dist/Editor/Elements/Embed/Image.js +15 -14
  15. package/dist/Editor/Elements/Embed/Video.js +12 -8
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  17. package/dist/Editor/Elements/Form/Form.js +43 -27
  18. package/dist/Editor/Elements/Form/FormField.js +21 -10
  19. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  20. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  21. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  22. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  23. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  30. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  31. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  32. package/dist/Editor/Elements/Grid/Grid.js +11 -9
  33. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  34. package/dist/Editor/Elements/Link/Link.js +1 -6
  35. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  36. package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
  38. package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
  39. package/dist/Editor/Elements/SimpleText/index.js +18 -16
  40. package/dist/Editor/Elements/SimpleText/style.js +43 -0
  41. package/dist/Editor/ErrorBoundary.js +30 -0
  42. package/dist/Editor/MiniEditor.js +1 -3
  43. package/dist/Editor/Styles/EditorStyles.js +28 -0
  44. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  52. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
  53. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
  54. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  55. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  56. package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
  57. package/dist/Editor/common/ColorPickerButton.js +9 -25
  58. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/Icon.js +16 -34
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  62. package/dist/Editor/common/LinkSettings/index.js +1 -2
  63. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  64. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  65. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  66. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  67. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  68. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  69. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  70. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  71. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  72. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  73. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  74. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  75. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  76. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  77. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  78. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  79. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  88. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  89. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  90. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  91. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  92. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  93. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  94. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  95. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  96. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  97. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  99. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  100. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  101. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  102. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  103. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  104. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  105. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  106. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  107. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  108. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  109. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  110. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  111. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  112. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  113. package/dist/Editor/common/RnD/index.js +567 -0
  114. package/dist/Editor/common/RnD/styles.js +4 -0
  115. package/dist/Editor/common/Section/index.js +21 -12
  116. package/dist/Editor/common/Section/styles.js +7 -4
  117. package/dist/Editor/common/Shorthands/elements.js +12 -54
  118. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  128. package/dist/Editor/common/StyleBuilder/index.js +5 -3
  129. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  130. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  131. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  132. package/dist/Editor/helper/breakpoint.js +5 -0
  133. package/dist/Editor/helper/index.js +139 -0
  134. package/dist/Editor/helper/theme.js +48 -186
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +37 -12
  137. package/dist/Editor/hooks/withCommon.js +2 -1
  138. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  139. package/dist/Editor/plugins/withEmbeds.js +1 -1
  140. package/dist/Editor/plugins/withHTML.js +1 -1
  141. package/dist/Editor/plugins/withTable.js +1 -1
  142. package/dist/Editor/theme/ThemeList.js +173 -50
  143. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  144. package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
  145. package/dist/Editor/utils/button.js +17 -1
  146. package/dist/Editor/utils/events.js +5 -0
  147. package/dist/Editor/utils/font.js +37 -40
  148. package/dist/Editor/utils/form.js +7 -2
  149. package/dist/Editor/utils/formfield.js +1 -1
  150. package/dist/Editor/utils/freegrid.js +91 -0
  151. package/dist/Editor/utils/helper.js +44 -30
  152. package/dist/Editor/utils/insertAppHeader.js +47 -40
  153. package/package.json +5 -2
  154. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  155. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  156. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  157. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  158. package/dist/Editor/common/CustomDialog/index.js +0 -94
  159. package/dist/Editor/common/CustomDialog/style.js +0 -67
  160. package/dist/Editor/common/CustomSelect.js +0 -33
  161. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  162. package/dist/Editor/theme/index.js +0 -144
  163. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  164. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  165. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  166. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  167. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  168. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  169. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  170. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  171. package/dist/Editor/themeSettings/icons.js +0 -60
  172. package/dist/Editor/themeSettings/index.js +0 -320
  173. package/dist/Editor/themeSettings/style.js +0 -152
  174. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  175. package/dist/Editor/themeSettingsAI/index.js +0 -356
  176. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  177. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -2,7 +2,7 @@
2
2
  import React, { useState } from "react";
3
3
  import { Transforms, Path, Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
- import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
5
+ import { IconButton, Tooltip, Grid as GridContainer, useTheme } 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,9 +13,8 @@ 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 } from "../../helper/theme";
16
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
17
17
  import useWindowResize from "../../hooks/useWindowResize";
18
- import { useTheme } from "@emotion/react";
19
18
  import { jsx as _jsx } from "react/jsx-runtime";
20
19
  import { Fragment as _Fragment } from "react/jsx-runtime";
21
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -298,6 +297,14 @@ const Grid = props => {
298
297
  bottomLeft,
299
298
  bottomRight
300
299
  } = getBreakPointsValue(borderRadius, size?.device) || {};
300
+ const gridcwrprProps = groupByBreakpoint({
301
+ padding: {
302
+ ...getTRBLBreakPoints(bannerSpacing)
303
+ },
304
+ flexWrap: {
305
+ ...getBreakPointsValue(flexWrap || "wrap")
306
+ }
307
+ }, theme);
301
308
  return /*#__PURE__*/_jsxs(GridContainer, {
302
309
  container: true,
303
310
  className: `grid-container ${grid} has-hover element-root dpath`,
@@ -364,16 +371,11 @@ const Grid = props => {
364
371
  className: "grid-c-wrpr",
365
372
  sx: {
366
373
  display: "flex",
367
- padding: {
368
- ...getTRBLBreakPoints(bannerSpacing)
369
- },
374
+ ...gridcwrprProps,
370
375
  alignItems: vertical || "start",
371
376
  justifyContent: horizantal || "start",
372
377
  flexDirection: flexDirection || "row",
373
378
  width: "100%",
374
- flexWrap: {
375
- ...getBreakPointsValue(flexWrap || "wrap")
376
- },
377
379
  height: "auto"
378
380
  },
379
381
  "data-path": path.join(","),
@@ -1,14 +1,15 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms, Node } from "slate";
3
+ import { useTheme } from "@mui/material";
4
+ import { Transforms } from "slate";
4
5
  import { useSlateStatic, ReactEditor } from "slate-react";
5
6
  import GridItemPopup from "./GridItemPopup";
6
7
  import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
7
8
  import { GridSettingsIcon } from "../../common/iconslist";
8
9
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
9
- import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
10
+ import { groupByBreakpoint, getBreakPointsValue, getBRValue, getTRBLBreakPoints } from "../../helper/theme";
10
11
  import { isEmptyNode } from "../../utils/helper";
11
- import { useTheme } from "@emotion/react";
12
+ import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const GridItemToolbar = ({
@@ -104,35 +105,44 @@ const GridItem = props => {
104
105
  const getBorderColor = () => {
105
106
  return borderColor || "transparent";
106
107
  };
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);
107
131
  return /*#__PURE__*/_jsxs(Item, {
108
132
  item: true,
109
133
  component: "div",
110
134
  className: `grid-item element-root gi-top-wrpr dpath`,
111
135
  ...attributes,
112
136
  sx: {
113
- width: {
114
- ...getBreakPointsValue(grid, null, "overrideGridSize", true)
115
- },
116
- height: {
117
- ...getBreakPointsValue(cellGHeight || "auto")
118
- },
119
- display: {
120
- lg: "flex",
121
- xs: xsHidden ? "none" : "flex"
122
- },
137
+ ...getBRProps,
138
+ display: "flex",
123
139
  flexDirection: flexDirection || "column",
124
- background: bgColor,
140
+ background: bgColor || "transparent",
125
141
  borderColor: getBorderColor(),
126
142
  borderWidth: borderWidth || "1px",
127
- borderRadius: {
128
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
129
- },
130
143
  borderStyle: borderStyle || "solid",
131
144
  alignItems: horizantal,
132
145
  justifyContent: vertical,
133
- margin: {
134
- ...getTRBLBreakPoints(margin)
135
- },
136
146
  "&:hover": {
137
147
  background: `${bgColorHover || bgColor || "transparent"}`
138
148
  }
@@ -171,9 +181,7 @@ const GridItem = props => {
171
181
  sx: {
172
182
  display: "flex",
173
183
  flexDirection: flexDirection || "column",
174
- padding: {
175
- ...getTRBLBreakPoints(bannerSpacing)
176
- },
184
+ ...giInProps,
177
185
  width: "100%",
178
186
  height: "100%",
179
187
  color: textColor || "#000",
@@ -9,7 +9,6 @@ import { removeLink } from "../../utils/link";
9
9
  import LinkPopup from "./LinkPopup";
10
10
  import "./styles.css";
11
11
  import { absoluteLink } from "../../utils/helper";
12
- import { useEditorContext } from "../../hooks/useMouseMove";
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
14
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
14
  const Link = props => {
@@ -30,9 +29,6 @@ const Link = props => {
30
29
  const path = ReactEditor.findPath(editor, element);
31
30
  const urlPath = element.url || element.href;
32
31
  const absLink = absoluteLink(urlPath);
33
- const {
34
- theme
35
- } = useEditorContext();
36
32
  const updateLink = () => {
37
33
  Transforms.setNodes(editor, {
38
34
  href: linkData?.url,
@@ -111,8 +107,7 @@ const Link = props => {
111
107
  linkData: linkData,
112
108
  handleClose: handleClose,
113
109
  handleInputChange: handleInputChange,
114
- handleInsertLink: updateLink,
115
- theme: theme
110
+ handleInsertLink: updateLink
116
111
  })]
117
112
  });
118
113
  };
@@ -9,8 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const LinkButton = props => {
11
11
  const {
12
- editor,
13
- theme
12
+ editor
14
13
  } = props;
15
14
  const linkInputRef = useRef(null);
16
15
  const [showInput, setShowInput] = useState(false);
@@ -78,8 +77,7 @@ const LinkButton = props => {
78
77
  linkData: linkData,
79
78
  handleClose: handleClose,
80
79
  handleInputChange: handleInputChange,
81
- handleInsertLink: handleInsertLink,
82
- theme: theme
80
+ handleInsertLink: handleInsertLink
83
81
  })]
84
82
  });
85
83
  };
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
2
  import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Divider } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
- import LinkPopupStyles from "./LinkPopupStyles";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
6
  const LinkPopup = props => {
@@ -10,11 +9,9 @@ const LinkPopup = props => {
10
9
  handleClose,
11
10
  linkData,
12
11
  handleInputChange,
13
- handleInsertLink,
14
- theme
12
+ handleInsertLink
15
13
  } = props;
16
14
  const themeType = localStorage.getItem("themeType");
17
- const classes = LinkPopupStyles(themeType);
18
15
  return /*#__PURE__*/_jsxs(Dialog, {
19
16
  fullWidth: true,
20
17
  open: open,
@@ -64,7 +61,7 @@ const LinkPopup = props => {
64
61
  },
65
62
  children: [/*#__PURE__*/_jsx(Typography, {
66
63
  sx: {
67
- fontFamily: 'Inter, sans-serif',
64
+ fontFamily: "Inter, sans-serif",
68
65
  fontSize: "14px",
69
66
  marginBottom: "6px"
70
67
  },
@@ -77,14 +74,14 @@ const LinkPopup = props => {
77
74
  placeholder: "Link Title",
78
75
  onChange: handleInputChange,
79
76
  sx: {
80
- '& .MuiOutlinedInput-root': {
81
- borderRadius: '8px'
77
+ "& .MuiOutlinedInput-root": {
78
+ borderRadius: "8px"
82
79
  },
83
- '& .MuiInputBase-input': {
84
- color: themeType === "dark" ? "#FFFFFF" : '#000'
80
+ "& .MuiInputBase-input": {
81
+ color: themeType === "dark" ? "#FFFFFF" : "#000"
85
82
  },
86
- '& .MuiInputBase-input::placeholder': {
87
- color: '#94A3B8',
83
+ "& .MuiInputBase-input::placeholder": {
84
+ color: "#94A3B8",
88
85
  fontFamily: '"Inter", sans-serif'
89
86
  }
90
87
  }
@@ -98,7 +95,7 @@ const LinkPopup = props => {
98
95
  },
99
96
  children: [/*#__PURE__*/_jsx(Typography, {
100
97
  sx: {
101
- fontFamily: 'Inter, sans-serif',
98
+ fontFamily: "Inter, sans-serif",
102
99
  fontSize: "14px",
103
100
  marginBottom: "6px"
104
101
  },
@@ -111,14 +108,14 @@ const LinkPopup = props => {
111
108
  placeholder: "https://google.com",
112
109
  onChange: handleInputChange,
113
110
  sx: {
114
- '& .MuiOutlinedInput-root': {
115
- borderRadius: '8px'
111
+ "& .MuiOutlinedInput-root": {
112
+ borderRadius: "8px"
116
113
  },
117
- '& .MuiInputBase-input': {
118
- color: themeType === "dark" ? "#FFFFFF" : '#000'
114
+ "& .MuiInputBase-input": {
115
+ color: themeType === "dark" ? "#FFFFFF" : "#000"
119
116
  },
120
- '& .MuiInputBase-input::placeholder': {
121
- color: '#94A3B8',
117
+ "& .MuiInputBase-input::placeholder": {
118
+ color: "#94A3B8",
122
119
  fontFamily: '"Inter", sans-serif'
123
120
  }
124
121
  }
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
3
2
  import { Transforms } from "slate";
4
3
  import { ReactEditor, useSlateStatic } from "slate-react";
5
4
  import ToolbarIcon from "../../common/ToolbarIcon";
@@ -423,7 +423,7 @@ const SignaturePopup = props => {
423
423
  },
424
424
  children: [/*#__PURE__*/_jsx(Grid, {
425
425
  style: {
426
- marginRight: "8px"
426
+ marginRight: "6px"
427
427
  },
428
428
  xs: 1,
429
429
  children: /*#__PURE__*/_jsx("label", {
@@ -8,6 +8,7 @@ import SimpleTextStyle from "./style";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { createElement as _createElement } from "react";
11
12
  const SimpleText = props => {
12
13
  const {
13
14
  theme,
@@ -39,24 +40,25 @@ const SimpleText = props => {
39
40
  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
40
41
  const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
41
42
  const opacity = !isTextSelected(editor?.selection);
42
- return /*#__PURE__*/_jsxs(Box, {
43
+ const nextType = element?.children[0]?.type;
44
+ return /*#__PURE__*/_createElement(Box, {
43
45
  ...element.attr,
44
46
  ...attributes,
45
- className: `simple-text`,
47
+ className: `simple-text ${nextType}`,
46
48
  sx: classes.root,
47
- children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
48
- className: "placeholder-simple-text",
49
- children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
50
- children: ["Type ", /*#__PURE__*/_jsx("span", {
51
- style: {
52
- backgroundColor: '#F2F6FA',
53
- padding: "0px 2px",
54
- borderRadius: "2px"
55
- },
56
- children: "/"
57
- }), " to browse elements"]
58
- }) : "" : ""
59
- })]
60
- });
49
+ key: `para_${path.join("|")}`
50
+ }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
51
+ className: "placeholder-simple-text",
52
+ children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
53
+ children: ["Type ", /*#__PURE__*/_jsx("span", {
54
+ style: {
55
+ backgroundColor: '#F2F6FA',
56
+ padding: "0px 2px",
57
+ borderRadius: "2px"
58
+ },
59
+ children: "/"
60
+ }), " to browse elements"]
61
+ }) : "" : ""
62
+ }));
61
63
  };
62
64
  export default SimpleText;
@@ -23,6 +23,49 @@ 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
+ "& .bottom-handle": {
64
+ "&.parent": {
65
+ bottom: "2px !important",
66
+ zIndex: 1
67
+ }
68
+ }
26
69
  }
27
70
  },
28
71
  section: {
@@ -0,0 +1,30 @@
1
+ import React, { Component } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ class ErrorBoundary extends Component {
4
+ constructor(props) {
5
+ super(props);
6
+ this.state = {
7
+ hasError: false
8
+ };
9
+ }
10
+ static getDerivedStateFromError(error) {
11
+ // Update state so the next render will show the fallback UI.
12
+ return {
13
+ hasError: true
14
+ };
15
+ }
16
+ componentDidCatch(error, errorInfo) {
17
+ // You can also log the error to an error reporting service
18
+ console.error("Error caught in Error Boundary: ", error, errorInfo);
19
+ }
20
+ render() {
21
+ if (this.state.hasError) {
22
+ // You can render any custom fallback UI
23
+ return /*#__PURE__*/_jsx("h1", {
24
+ children: "Something went wrong."
25
+ });
26
+ }
27
+ return this.props.children;
28
+ }
29
+ }
30
+ export default ErrorBoundary;
@@ -23,8 +23,7 @@ const MiniEditor = props => {
23
23
  miniEditorPlaceholder,
24
24
  className,
25
25
  otherProps,
26
- onSave,
27
- theme
26
+ onSave
28
27
  } = props;
29
28
  const {
30
29
  CHARACTERS = []
@@ -133,7 +132,6 @@ const MiniEditor = props => {
133
132
  editor: editor,
134
133
  initialValue: content,
135
134
  onChange: onChange,
136
- theme: theme,
137
135
  children: [/*#__PURE__*/_jsx(BasicToolbar, {
138
136
  ...props
139
137
  }), /*#__PURE__*/_jsx(Editable, {
@@ -29,6 +29,33 @@ const editorStyles = ({
29
29
  "& .MuiOutlinedInput-input": {
30
30
  color: theme?.palette?.editor?.textColor || "black"
31
31
  }
32
+ },
33
+ "&.stimulate-xs": {
34
+ "& .scrollable-content": {
35
+ width: "320px"
36
+ },
37
+ ":before": {
38
+ content: '" "',
39
+ position: "absolute",
40
+ top: 0,
41
+ left: 0,
42
+ width: "calc(50% - 162px)",
43
+ height: "100%",
44
+ pointerEvents: "none",
45
+ backgroundColor: "#FFF",
46
+ zIndex: 10
47
+ },
48
+ ":after": {
49
+ content: '" "',
50
+ position: "absolute",
51
+ top: 0,
52
+ right: 0,
53
+ width: "calc(50% - 160px)",
54
+ height: "100%",
55
+ pointerEvents: "none",
56
+ backgroundColor: "#FFF",
57
+ zIndex: 10
58
+ }
32
59
  }
33
60
  },
34
61
  slateWrapper: {
@@ -243,6 +270,7 @@ const editorStyles = ({
243
270
  }
244
271
  },
245
272
  "&.hideScroll": {
273
+ overflowAnchor: "none",
246
274
  "&::-webkit-scrollbar-track": {
247
275
  background: "none !important"
248
276
  },
@@ -25,8 +25,7 @@ const BasicToolbar = props => {
25
25
  hideTextColor = false,
26
26
  hideResetIcon = true,
27
27
  onResetClick = () => {}
28
- },
29
- theme
28
+ }
30
29
  } = props;
31
30
  // state
32
31
  const [activeColor, setActiveColor] = useState("#000000");
@@ -66,8 +65,7 @@ const BasicToolbar = props => {
66
65
  item: true,
67
66
  children: /*#__PURE__*/_jsx(LinkButton, {
68
67
  active: isBlockActive(editor, link.format),
69
- editor: editor,
70
- theme: theme
68
+ editor: editor
71
69
  }, link.id)
72
70
  }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
73
71
  item: true,
@@ -1,32 +1,8 @@
1
1
  import React from "react";
2
2
  import { Select, MenuItem } from "@mui/material";
3
- import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
3
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { fontFamilyMap } from "../../utils/font";
5
- import { toolbarGroups } from "../toolbarGroups.js";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
- const allTools = toolbarGroups.flat();
8
- const fontWeight = allTools.find(f => f.format === "fontWeight");
9
- const getValue = (editor, format) => {
10
- switch (format) {
11
- case "fontFamily":
12
- {
13
- const style = getSelectedElementStyle("font-family", editor);
14
- const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
15
- return val || fontFamilyMap.PoppinsRegular;
16
- }
17
- case "fontWeight":
18
- {
19
- const {
20
- options
21
- } = fontWeight || {};
22
- const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
23
- const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
24
- return selected?.value;
25
- }
26
- default:
27
- return activeMark(editor, format);
28
- }
29
- };
30
6
  const Dropdown = ({
31
7
  classes,
32
8
  editor,
@@ -34,7 +10,7 @@ const Dropdown = ({
34
10
  options,
35
11
  width
36
12
  }) => {
37
- const value = getValue(editor, format);
13
+ const value = activeMark(editor, format);
38
14
  const changeMarkData = (event, format) => {
39
15
  event.preventDefault();
40
16
  const value = event.target.value;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import Icon from "../../common/Icon";
3
3
  import Button from "../../common/Button";
4
- import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
4
+ import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const MarkButton = ({
7
7
  editor,
@@ -9,7 +9,7 @@ const MarkButton = ({
9
9
  title
10
10
  }) => {
11
11
  return /*#__PURE__*/_jsx(Button, {
12
- active: isMarkBtnActive(editor, format),
12
+ active: isMarkActive(editor, format),
13
13
  format: format,
14
14
  onMouseDown: e => {
15
15
  e.preventDefault();
@@ -1,8 +1,9 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
  import { TextField, IconButton } from "@mui/material";
3
- import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
3
+ import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
4
+ import { headingMap, sizeMap } from "../../utils/font.js";
4
5
  import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
5
- import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
6
+ import { getBreakPointsValue } from "../../helper/theme.js";
6
7
  import useWindowResize from "../../hooks/useWindowResize.js";
7
8
  import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,8 +17,7 @@ const TextSize = ({
16
17
  }) => {
17
18
  const [size] = useWindowResize();
18
19
  const val = activeMark(editor, format);
19
- const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
20
- const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
20
+ const value = getBreakPointsValue(val, size?.device);
21
21
  const [fontSize, setFontSize] = useState();
22
22
  const timerRef = useRef();
23
23
  useEffect(() => {
@@ -55,7 +55,13 @@ const TextSize = ({
55
55
  };
56
56
  const getSizeVal = () => {
57
57
  try {
58
- return parseInt(value);
58
+ let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
59
+ Object.entries(headingMap).forEach(([format, value]) => {
60
+ if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
61
+ size = value;
62
+ }
63
+ });
64
+ return parseInt(size);
59
65
  } catch (err) {
60
66
  return "";
61
67
  }
@@ -116,14 +116,13 @@ const MiniToolbar = props => {
116
116
  label,
117
117
  icon: Icon
118
118
  }) => {
119
- const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
120
-
119
+ const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false;
121
120
  return /*#__PURE__*/_jsx(Tooltip, {
122
121
  arrow: true,
123
122
  title: label,
124
123
  disableHoverListener: toolTip,
125
124
  children: /*#__PURE__*/_jsx(IconButton, {
126
- className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
125
+ className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
127
126
  onClick: handleClick(type),
128
127
  disabled: isDisabled,
129
128
  children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
@@ -1,9 +1,10 @@
1
1
  import { useEffect, useRef, useState } from "react";
2
- import { activeMark, addMarkData } from "../../../utils/SlateUtilityFunctions";
2
+ import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
3
3
  import { Button, IconButton, Popover, TextField } from "@mui/material";
4
4
  import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
5
5
  import useWindowResize from "../../../hooks/useWindowResize";
6
- import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../../helper/theme";
6
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
7
+ import { headingMap, sizeMap } from "../../../utils/font";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
@@ -18,7 +19,7 @@ function SelectFontSize({
18
19
  const containerRef = useRef();
19
20
  const [size] = useWindowResize();
20
21
  const val = activeMark(editor, format);
21
- const value = getTextSizeVal(editor);
22
+ const value = getBreakPointsValue(val, size?.device);
22
23
  const timerRef = useRef();
23
24
  const updateMarkData = newVal => {
24
25
  let upData = {
@@ -52,7 +53,13 @@ function SelectFontSize({
52
53
  };
53
54
  const getSizeVal = () => {
54
55
  try {
55
- return parseInt(value);
56
+ let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
57
+ Object.entries(headingMap).forEach(([format, value]) => {
58
+ if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
59
+ size = value;
60
+ }
61
+ });
62
+ return parseInt(size);
56
63
  } catch (err) {
57
64
  return "";
58
65
  }