@flozy/editor 10.3.9 → 10.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +30 -28
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -3
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
  23. package/dist/Editor/Elements/Form/FormField.js +3 -2
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  27. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  30. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  31. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  38. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  39. package/dist/Editor/Elements/Table/Styles.js +7 -0
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  44. package/dist/Editor/MiniEditor.js +2 -1
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  58. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  59. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  61. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  62. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  63. package/dist/Editor/common/Checkbox/index.js +46 -0
  64. package/dist/Editor/common/Checkbox/styles.js +45 -0
  65. package/dist/Editor/common/ColorPickerButton.js +41 -16
  66. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  67. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  68. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  69. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  70. package/dist/Editor/common/CustomSelect.js +43 -0
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  73. package/dist/Editor/common/Icon.js +28 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -66
  77. package/dist/Editor/common/LinkSettings/index.js +14 -28
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +164 -244
  80. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  81. package/dist/Editor/common/RadioGroup/index.js +48 -0
  82. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  83. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  96. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  97. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  98. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  101. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  105. package/dist/Editor/common/RnD/index.js +68 -39
  106. package/dist/Editor/common/Select/index.js +44 -7
  107. package/dist/Editor/common/Select/styles.js +31 -2
  108. package/dist/Editor/common/Shorthands/elements.js +54 -0
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  122. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  123. package/dist/Editor/common/Uploader.js +16 -0
  124. package/dist/Editor/common/iconListV2.js +76 -0
  125. package/dist/Editor/common/iconslist.js +21 -0
  126. package/dist/Editor/commonStyle.js +116 -61
  127. package/dist/Editor/helper/index.js +5 -1
  128. package/dist/Editor/helper/textIndeces.js +58 -0
  129. package/dist/Editor/helper/theme.js +203 -2
  130. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  131. package/dist/Editor/hooks/useMouseMove.js +9 -3
  132. package/dist/Editor/hooks/useTable.js +5 -4
  133. package/dist/Editor/hooks/useThemeValues.js +63 -0
  134. package/dist/Editor/plugins/withEmbeds.js +1 -1
  135. package/dist/Editor/plugins/withHTML.js +3 -1
  136. package/dist/Editor/plugins/withTable.js +1 -1
  137. package/dist/Editor/theme/ThemeList.js +50 -173
  138. package/dist/Editor/theme/index.js +149 -0
  139. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  140. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  141. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  142. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  143. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  144. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  145. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  146. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  147. package/dist/Editor/themeSettings/icons.js +60 -0
  148. package/dist/Editor/themeSettings/index.js +380 -0
  149. package/dist/Editor/themeSettings/style.js +299 -0
  150. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  151. package/dist/Editor/themeSettingsAI/index.js +355 -0
  152. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  153. package/dist/Editor/themeSettingsAI/style.js +332 -0
  154. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  155. package/dist/Editor/utils/accordion.js +14 -4
  156. package/dist/Editor/utils/button.js +1 -17
  157. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  158. package/dist/Editor/utils/draftToSlate.js +3 -2
  159. package/dist/Editor/utils/events.js +50 -6
  160. package/dist/Editor/utils/font.js +40 -37
  161. package/dist/Editor/utils/formfield.js +1 -0
  162. package/dist/Editor/utils/helper.js +210 -26
  163. package/dist/Editor/utils/insertAppHeader.js +1 -1
  164. package/dist/Editor/utils/signature.js +2 -9
  165. package/dist/Editor/utils/updateFormName.js +22 -0
  166. package/package.json +4 -4
@@ -0,0 +1,115 @@
1
+ import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
2
+ import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
3
+ import { RND_ITEMS } from "../../helper";
4
+ export const ELEMENT_CASE = {
5
+ ADD_TEXT: "addText",
6
+ ADD_BUTTON: "addButton",
7
+ ADD_SIGNATURE: "addSignature",
8
+ ADD_IMAGE: "addImage",
9
+ ADD_VIDEO: "addVideo",
10
+ ADD_TABLE: "addTable",
11
+ ADD_CODE: "addCode",
12
+ ADD_BOX: "addBox",
13
+ ADD_FORM: "addForm",
14
+ ADD_APP_HEADER: "addAppHeader",
15
+ ADD_DIVIDER: "addDivider"
16
+ };
17
+ const commonXsValues = {
18
+ top_xs: 0,
19
+ marginTop_xs: 12,
20
+ left_xs: 24,
21
+ width_xs: 272,
22
+ xs_updatedOn: new Date().getTime()
23
+ };
24
+ const elementXsValues = {
25
+ [ELEMENT_CASE.ADD_TEXT]: {
26
+ ...commonXsValues,
27
+ height_xs: 50
28
+ },
29
+ [ELEMENT_CASE.ADD_BUTTON]: {
30
+ ...commonXsValues,
31
+ height_xs: 50
32
+ },
33
+ [ELEMENT_CASE.ADD_SIGNATURE]: {
34
+ ...commonXsValues,
35
+ height_xs: 173
36
+ },
37
+ [ELEMENT_CASE.ADD_IMAGE]: {
38
+ ...commonXsValues,
39
+ height_xs: 80
40
+ },
41
+ [ELEMENT_CASE.ADD_VIDEO]: {
42
+ ...commonXsValues,
43
+ height_xs: 300
44
+ },
45
+ [ELEMENT_CASE.ADD_TABLE]: {
46
+ ...commonXsValues,
47
+ height_xs: 165
48
+ },
49
+ [ELEMENT_CASE.ADD_CODE]: {
50
+ ...commonXsValues,
51
+ height: 300
52
+ },
53
+ [ELEMENT_CASE.ADD_BOX]: {
54
+ ...commonXsValues,
55
+ height_xs: 300
56
+ },
57
+ [ELEMENT_CASE.ADD_FORM]: {
58
+ ...commonXsValues,
59
+ height_xs: 80
60
+ },
61
+ [ELEMENT_CASE.ADD_APP_HEADER]: {
62
+ ...commonXsValues,
63
+ height_xs: 80
64
+ },
65
+ [ELEMENT_CASE.ADD_DIVIDER]: {
66
+ ...commonXsValues,
67
+ height_xs: 24
68
+ }
69
+ };
70
+ export const findMaxYValue = (sectionItems, breakpoint) => {
71
+ let maxY = 0;
72
+ sectionItems.forEach(item => {
73
+ const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
74
+ if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
75
+ const {
76
+ bottom
77
+ } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
78
+ maxY = Math.max(maxY, bottom);
79
+ }
80
+ });
81
+ return maxY;
82
+ };
83
+ export const convertToGridArea = y => {
84
+ // Calculate grid position
85
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
86
+
87
+ // to calculate difference inside the grid
88
+ const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
89
+
90
+ // Update grid area
91
+ const gridArea = `${row} / 1 / ${row + 1} / 2`;
92
+ return {
93
+ gridArea,
94
+ marginTop
95
+ };
96
+ };
97
+ export const getNewElementXsValues = (type, sectionItems) => {
98
+ const values = elementXsValues[type] || {};
99
+ const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
100
+ const {
101
+ gridArea,
102
+ marginTop
103
+ } = convertToGridArea(y);
104
+ const BUFFER_MARGIN_TOP = 12;
105
+ const xsVal = {
106
+ ...values,
107
+ gridArea_xs: gridArea,
108
+ marginTop_xs: marginTop + BUFFER_MARGIN_TOP
109
+ };
110
+ const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
111
+ return {
112
+ xsVal,
113
+ sectionHeightXs
114
+ };
115
+ };
@@ -247,6 +247,9 @@ const useFreeGridStyles = ({
247
247
  },
248
248
  "& > .simple-text": {
249
249
  display: "none"
250
+ },
251
+ "& > .edt-paragraphs": {
252
+ display: "none"
250
253
  }
251
254
  },
252
255
  "& .fgi_type_form": {
@@ -350,6 +353,17 @@ const useFreeGridStyles = ({
350
353
  "& .fgi_type_text": {
351
354
  "& .edt-headings": {
352
355
  margin: "0px"
356
+ },
357
+ "& .edt-paragraphs": {
358
+ margin: "0px"
359
+ }
360
+ },
361
+ "& .fgi_type_table": {
362
+ "& .edt-headings": {
363
+ margin: "0px"
364
+ },
365
+ "& .edt-paragraphs": {
366
+ margin: "0px"
353
367
  }
354
368
  },
355
369
  /** element toolbar hide */
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms, Path, Node } from "slate";
3
+ import { Transforms, Path, Node, Editor, Element } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -206,7 +206,19 @@ const Grid = props => {
206
206
  };
207
207
  const onAddSection = () => () => {
208
208
  try {
209
- const duplicateGrid = JSON.parse(JSON.stringify(element));
209
+ let duplicateGrid = JSON.parse(JSON.stringify(element));
210
+ const carousel = Editor.above(editor, {
211
+ at: path,
212
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
213
+ });
214
+ if (carousel) {
215
+ const [carouselNode, carouselItemPath] = carousel || [];
216
+ const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
217
+ Transforms.insertNodes(editor, duplicatecCarousel, {
218
+ at: Path.next(carouselItemPath)
219
+ });
220
+ return;
221
+ }
210
222
  insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
211
223
  } catch (err) {
212
224
  console.log(err);
@@ -292,7 +292,7 @@ const GridItem = props => {
292
292
  ...getBRProps,
293
293
  display: "flex",
294
294
  flexDirection: flexDirection || "column",
295
- background: bgColor || "transparent",
295
+ background: bgColor,
296
296
  borderColor: getBorderColor(),
297
297
  borderWidth: borderWidth || "1px",
298
298
  borderStyle: borderStyle || "solid",
@@ -46,11 +46,12 @@
46
46
 
47
47
  .upload-input-wrapper {
48
48
  width: 100%;
49
+ height: 100%;
49
50
  position: relative;
50
51
  }
51
52
  .upload-input-wrapper input {
52
53
  width: 100%;
53
- height: 100px;
54
+ height: 100%;
54
55
  opacity: 0;
55
56
  z-index: 1;
56
57
  position: relative;
@@ -1,6 +1,7 @@
1
1
  import React, { useRef, useState } from "react";
2
2
  import SignatureCanvas from "react-signature-canvas";
3
- import { Grid, useMediaQuery } from "@mui/material";
3
+ import { Grid, IconButton, useMediaQuery } from "@mui/material";
4
+ import { ResetIcon } from "../../../common/iconListV2";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const DrawSignature = props => {
@@ -24,6 +25,13 @@ const DrawSignature = props => {
24
25
  signature: result?.imageURL || strImage
25
26
  });
26
27
  };
28
+ const onClear = () => {
29
+ canvasRef.clear();
30
+ setUploading(false);
31
+ onDataChange({
32
+ signature: ""
33
+ });
34
+ };
27
35
  const isMobile = useMediaQuery("(max-width:599px)");
28
36
  const signatureCanvasStyle = isMobile ? {
29
37
  width: "260px",
@@ -31,14 +39,15 @@ const DrawSignature = props => {
31
39
  } : {};
32
40
  return /*#__PURE__*/_jsxs(Grid, {
33
41
  container: true,
34
- children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
42
+ children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsxs(Grid, {
35
43
  item: true,
36
44
  xs: 12,
37
45
  style: {
38
46
  width: "100%",
39
- height: "209px"
47
+ height: "209px",
48
+ position: "relative"
40
49
  },
41
- children: /*#__PURE__*/_jsx(SignatureCanvas, {
50
+ children: [/*#__PURE__*/_jsx(SignatureCanvas, {
42
51
  canvasProps: {
43
52
  className: "signature-canvas",
44
53
  ...signatureCanvasStyle
@@ -47,7 +56,11 @@ const DrawSignature = props => {
47
56
  ref: ref => canvasRef = ref,
48
57
  maxWidth: brush.size || 2,
49
58
  penColor: brush?.color || "#000"
50
- })
59
+ }), /*#__PURE__*/_jsx(IconButton, {
60
+ className: "clear-canvas",
61
+ onClick: onClear,
62
+ children: /*#__PURE__*/_jsx(ResetIcon, {})
63
+ })]
51
64
  })]
52
65
  });
53
66
  };
@@ -30,15 +30,28 @@ const UploadSignature = props => {
30
30
  signature: result?.imageURL || strImage
31
31
  });
32
32
  };
33
+ const onRemove = () => {
34
+ setBase64(null);
35
+ setUploading(false);
36
+ onUploadDone({
37
+ signature: ""
38
+ });
39
+ };
33
40
  return /*#__PURE__*/_jsxs("div", {
34
41
  className: "signature-tab2",
35
- children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
42
+ children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsxs("div", {
36
43
  className: "upload-sign-img-wrapper",
37
- children: /*#__PURE__*/_jsx("img", {
44
+ children: [/*#__PURE__*/_jsx("img", {
38
45
  className: "upload-sign-img",
39
46
  src: base64,
40
47
  alt: "Signature"
41
- })
48
+ }), /*#__PURE__*/_jsx(Typography, {
49
+ variant: "body2",
50
+ gutterBottom: true,
51
+ className: "remove-sign-img-btn",
52
+ onClick: onRemove,
53
+ children: "Remove"
54
+ })]
42
55
  }) : /*#__PURE__*/_jsxs("div", {
43
56
  className: "upload-input-wrapper",
44
57
  children: [/*#__PURE__*/_jsx("input", {
@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
35
35
  height: "24px",
36
36
  overflow: "hidden",
37
37
  fontSize: "14px",
38
- display: 'inline-flex',
39
- alignItems: 'center',
38
+ display: "inline-flex",
39
+ alignItems: "center",
40
40
  "& .bg-pad-sl": {
41
41
  padding: "2px 4px 2px 4px",
42
42
  background: "transparent",
@@ -44,7 +44,6 @@ function DragButton({
44
44
  const dragProps = {
45
45
  ...dndProps,
46
46
  id: dndProps?.id + dragType,
47
- disabled: isMobile,
48
47
  data: {
49
48
  ...dndProps.data,
50
49
  dragType
@@ -13,9 +13,13 @@ function Draggable(props) {
13
13
  } = props?.data || {};
14
14
  const style = transform ? {
15
15
  transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
16
- } : undefined;
16
+ } : {};
17
17
  return /*#__PURE__*/_jsx(Box, {
18
- style: style,
18
+ style: {
19
+ ...style,
20
+ touchAction: "none" // Disables scrolling while dragging. Necessary for proper mobile drag functionality.
21
+ },
22
+
19
23
  ref: setNodeRef,
20
24
  ...listeners,
21
25
  ...attributes,
@@ -86,6 +86,13 @@ const TableStyles = theme => {
86
86
  background: "#2563EB"
87
87
  }
88
88
  },
89
+ mobileCellResizer: {
90
+ position: "absolute",
91
+ right: "-10px",
92
+ top: "-10px",
93
+ zIndex: 4000,
94
+ padding: "2px"
95
+ },
89
96
  mobileToolDrawer: {
90
97
  "& .customSelectContainer": {
91
98
  border: "none !important",
@@ -307,7 +307,7 @@ const Table = props => {
307
307
  onScroll: handleScroll,
308
308
  onMouseOver: onMouseOver,
309
309
  onMouseLeave: onMouseLeave,
310
- className: !hideTools.includes("add_column") ? "custom-scroll" : '',
310
+ className: "custom-scroll",
311
311
  children: [/*#__PURE__*/_jsx(TableComp, {
312
312
  className: readOnly ? "readOnly" : "",
313
313
  sx: {
@@ -345,8 +345,8 @@ const Table = props => {
345
345
  handleAction: handleAction,
346
346
  exandTools: exandTools,
347
347
  openSetttings: openSetttings,
348
- translation: translation,
349
- hideTools: hideTools
348
+ hideTools: hideTools,
349
+ translation: translation
350
350
  }), /*#__PURE__*/_jsx(MoreTableSettings, {
351
351
  exandTools: exandTools,
352
352
  handleAction: handleAction,
@@ -1,6 +1,6 @@
1
1
  import React, { useState, useEffect, useMemo } from "react";
2
2
  import { Editor, Path, Range, Transforms } from "slate";
3
- import { Box } from "@mui/material";
3
+ import { Box, IconButton } from "@mui/material";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import useTableResize from "../../utils/customHooks/useTableResize";
6
6
  import { TableUtil } from "../../utils/table";
@@ -12,6 +12,7 @@ import TablePopup from "./TablePopup";
12
12
  import { Droppable } from "./Droppable";
13
13
  import { useDndContext } from "@dnd-kit/core";
14
14
  import { getNodeWithType } from "../../utils/helper";
15
+ import { ResizeIcon } from "../../common/iconListV2";
15
16
  import { isEmptyTextNode } from "../../helper";
16
17
  import SimpleText from "../SimpleText";
17
18
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,16 +42,32 @@ const Resizer = ({
41
42
  onMouseDown,
42
43
  height
43
44
  }) => {
45
+ const eventProps = {
46
+ onPointerDown: onMouseDown
47
+ };
44
48
  return /*#__PURE__*/_jsx(_Fragment, {
45
49
  children: /*#__PURE__*/_jsx(Box, {
46
50
  component: "div",
47
51
  className: "cell-resizer",
48
52
  contentEditable: false,
49
- onPointerDown: onMouseDown,
50
53
  sx: classes.cellResizer,
51
54
  style: {
52
55
  height: `${height}px`
53
- }
56
+ },
57
+ ...eventProps
58
+ })
59
+ });
60
+ };
61
+ const MobileResizer = ({
62
+ classes,
63
+ onMouseDown
64
+ }) => {
65
+ return /*#__PURE__*/_jsx(_Fragment, {
66
+ children: /*#__PURE__*/_jsx(IconButton, {
67
+ contentEditable: false,
68
+ sx: classes.mobileCellResizer,
69
+ onTouchStart: onMouseDown,
70
+ children: /*#__PURE__*/_jsx(ResizeIcon, {})
54
71
  })
55
72
  });
56
73
  };
@@ -115,7 +132,8 @@ const TableCell = props => {
115
132
  size: element?.size,
116
133
  minMaxProps: {
117
134
  minWidth: 30
118
- }
135
+ },
136
+ isMobile
119
137
  });
120
138
  const [tableSize, setTableSize] = useState({});
121
139
  const [openSettings, setOpenSettings] = useState(false);
@@ -424,6 +442,7 @@ const TableCell = props => {
424
442
  resetSelection
425
443
  };
426
444
  const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
445
+ const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
427
446
  return /*#__PURE__*/_jsxs(_Fragment, {
428
447
  children: [/*#__PURE__*/_jsxs("td", {
429
448
  ...element.attr,
@@ -458,7 +477,7 @@ const TableCell = props => {
458
477
  padding: "8px"
459
478
  },
460
479
  children: children
461
- }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
480
+ }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(TableResizer, {
462
481
  classes: classes,
463
482
  onMouseDown: onMouseDown,
464
483
  height: tableDOM?.getBoundingClientRect()?.height
@@ -4,6 +4,12 @@ import { useSlate } from "slate-react";
4
4
  import { getNodeText } from "../../utils/helper";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const isEmptyTextNode = node => {
8
+ if (Text.isText(node)) {
9
+ return !node.text.trim();
10
+ }
11
+ return false;
12
+ };
7
13
  const Title = props => {
8
14
  const {
9
15
  attributes,
@@ -50,10 +56,4 @@ const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
50
56
  }
51
57
  }, [editor.selection]);
52
58
  return null;
53
- };
54
- const isEmptyTextNode = node => {
55
- if (Text.isText(node)) {
56
- return !node.text.trim();
57
- }
58
- return false;
59
59
  };
@@ -34,7 +34,8 @@ const VariableButton = props => {
34
34
  PaperProps: {
35
35
  style: {
36
36
  maxHeight: 300,
37
- overflowY: "auto"
37
+ overflowY: "auto",
38
+ transformOrigin: 'top left'
38
39
  },
39
40
  sx: {
40
41
  "&::-webkit-scrollbar-track": {
@@ -44,6 +45,14 @@ const VariableButton = props => {
44
45
  borderRadius: "16px"
45
46
  }
46
47
  }
48
+ },
49
+ anchorOrigin: {
50
+ vertical: 'bottom',
51
+ horizontal: 'right'
52
+ },
53
+ transformOrigin: {
54
+ vertical: 'top',
55
+ horizontal: 'right'
47
56
  }
48
57
  },
49
58
  children: [/*#__PURE__*/_jsx(MenuItem, {
@@ -45,12 +45,13 @@ const MiniEditor = props => {
45
45
  const {
46
46
  translationMock
47
47
  } = otherProps;
48
+ const dummyTranslation = () => {};
48
49
  const customProps = {
49
50
  ...(otherProps || {}),
50
51
  readOnly: isReadOnly,
51
52
  editorPlaceholder: miniEditorPlaceholder,
52
53
  page_id: id,
53
- translation: translation || translationMock
54
+ translation: translation || translationMock || dummyTranslation
54
55
  };
55
56
  const [mentions, setMentions] = useMentions({
56
57
  editor,
@@ -133,7 +133,7 @@ const editorStyles = ({
133
133
  },
134
134
  "& .accordion-summary-collapse-btn": {
135
135
  padding: "4px",
136
- width: '5px'
136
+ width: "5px"
137
137
  },
138
138
  "& .workflow-icon-btn": {
139
139
  pointerEvents: "none",
@@ -242,7 +242,7 @@ const editorStyles = ({
242
242
  }
243
243
  },
244
244
  "& .section-tw": {
245
- background: 'transparent !important',
245
+ background: "transparent !important",
246
246
  "& button": {
247
247
  padding: "2px",
248
248
  borderRadius: "0px",
@@ -291,8 +291,8 @@ const editorStyles = ({
291
291
  }
292
292
  },
293
293
  "& ::selection": {
294
- background: 'rgba(35, 131, 226, 0.35)!important',
295
- color: 'inherit'
294
+ background: "rgba(35, 131, 226, 0.35)!important",
295
+ color: "inherit"
296
296
  },
297
297
  "&.readOnlyContainer": {
298
298
  "& .max-content": {
@@ -302,7 +302,7 @@ const editorStyles = ({
302
302
  },
303
303
  fullScreenWrapper: {
304
304
  "& .editor-wrapper": {
305
- paddingTop: '20px'
305
+ paddingTop: "20px"
306
306
  },
307
307
  "& .MuiDialog-paper, & .MuiPopover-paper": {
308
308
  background: `${theme?.palette?.editor?.background} !important`
@@ -1,8 +1,32 @@
1
1
  import React from "react";
2
2
  import { Select, MenuItem } from "@mui/material";
3
- import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
3
+ import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
4
+ import { toolbarGroups } from "../toolbarGroups.js";
4
5
  import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
6
+ import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList.js";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
+ const allTools = toolbarGroups.flat();
9
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
10
+ export const getValue = (editor, format) => {
11
+ switch (format) {
12
+ case "fontFamily":
13
+ {
14
+ const style = getSelectedElementStyle("font-family", editor, format);
15
+ return style || defaultFonts[0];
16
+ }
17
+ case "fontWeight":
18
+ {
19
+ const {
20
+ options
21
+ } = fontWeight || {};
22
+ const fontWeightStyle = getSelectedElementStyle("font-weight", editor, format);
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
+ };
6
30
  const Dropdown = ({
7
31
  classes,
8
32
  editor,
@@ -10,7 +34,7 @@ const Dropdown = ({
10
34
  options,
11
35
  width
12
36
  }) => {
13
- const value = activeMark(editor, format);
37
+ const value = activeMark(editor, format, true) || getValue(editor, format);
14
38
  const changeMarkData = (event, format) => {
15
39
  event.preventDefault();
16
40
  const value = event.target.value;
@@ -20,7 +44,7 @@ const Dropdown = ({
20
44
  });
21
45
  };
22
46
  return /*#__PURE__*/_jsx(Select, {
23
- value: value,
47
+ value: value || options?.[0]?.value,
24
48
  className: "editor-dd",
25
49
  onChange: e => changeMarkData(e, format),
26
50
  MenuProps: {
@@ -1,9 +1,10 @@
1
1
  import React from "react";
2
2
  import { Autocomplete, TextField } from "@mui/material";
3
- import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
3
+ import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
4
4
  import usePopupStyle from "../PopupTool/PopupToolStyle.js";
5
5
  import { useEditorContext } from "../../hooks/useMouseMove.js";
6
- import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
6
+ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
7
+ import { getValue } from "./Dropdown.js";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  const FontFamilyAutocomplete = ({
9
10
  editor,
@@ -14,7 +15,7 @@ const FontFamilyAutocomplete = ({
14
15
  val = "",
15
16
  webFont = false
16
17
  }) => {
17
- const markValue = activeMark(editor, format);
18
+ const markValue = getValue(editor, format);
18
19
  const value = !webFont ? markValue : val;
19
20
  const changeMarkData = (event, newValue, format) => {
20
21
  if (!webFont) {
@@ -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, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
4
+ import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const MarkButton = ({
7
7
  editor,
@@ -13,7 +13,7 @@ const MarkButton = ({
13
13
  translation
14
14
  } = customProps;
15
15
  return /*#__PURE__*/_jsx(Button, {
16
- active: isMarkActive(editor, format),
16
+ active: isMarkBtnActive(editor, format),
17
17
  format: format,
18
18
  onMouseDown: e => {
19
19
  e.preventDefault();
@@ -1,8 +1,7 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
  import { TextField, IconButton } from "@mui/material";
3
- import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
4
- import { headingMap, sizeMap } from "../../utils/font.js";
5
- import { getBreakPointsValue } from "../../helper/theme.js";
3
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
+ import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
6
5
  import useWindowResize from "../../hooks/useWindowResize.js";
7
6
  import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
8
7
  import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
@@ -15,11 +14,15 @@ const TextSize = ({
15
14
  format,
16
15
  fullWidth
17
16
  }) => {
18
- const [size] = useWindowResize();
19
- const val = activeMark(editor, format);
20
- const value = getBreakPointsValue(val, size?.device);
21
17
  const [fontSize, setFontSize] = useState();
22
18
  const timerRef = useRef();
19
+ const [size] = useWindowResize();
20
+ const val = activeMark(editor, format);
21
+
22
+ // const noFontSize =
23
+ // val === "normal" || (typeof val === "object" && !Object.keys(val)?.length);
24
+
25
+ const value = getTextSizeVal(editor);
23
26
  useEffect(() => {
24
27
  setFontSize(getSizeVal());
25
28
  }, [value]);
@@ -55,13 +58,7 @@ const TextSize = ({
55
58
  };
56
59
  const getSizeVal = () => {
57
60
  try {
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);
61
+ return parseInt(value);
65
62
  } catch (err) {
66
63
  return "";
67
64
  }