@flozy/editor 10.3.1 → 10.3.3

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 (163) 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 +30 -7
  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 +1 -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/Options/More.js +7 -7
  28. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  29. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  30. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  31. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  32. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  33. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  34. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  35. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  36. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  37. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  38. package/dist/Editor/Elements/Table/Styles.js +7 -0
  39. package/dist/Editor/Elements/Table/Table.js +3 -3
  40. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  41. package/dist/Editor/Elements/Title/title.js +6 -6
  42. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  43. package/dist/Editor/MiniEditor.js +2 -1
  44. package/dist/Editor/Styles/EditorStyles.js +5 -5
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  46. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  47. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  48. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  57. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  58. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  59. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  60. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  61. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  62. package/dist/Editor/common/Checkbox/index.js +46 -0
  63. package/dist/Editor/common/Checkbox/styles.js +45 -0
  64. package/dist/Editor/common/ColorPickerButton.js +41 -16
  65. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  66. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  67. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  68. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  69. package/dist/Editor/common/CustomSelect.js +43 -0
  70. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  71. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  72. package/dist/Editor/common/Icon.js +28 -0
  73. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  74. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  75. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -65
  76. package/dist/Editor/common/LinkSettings/index.js +13 -26
  77. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  78. package/dist/Editor/common/LinkSettings/style.js +164 -244
  79. package/dist/Editor/common/RadioGroup/index.js +48 -0
  80. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  81. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  93. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  94. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  95. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  96. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  97. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  98. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  99. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  100. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  101. package/dist/Editor/common/RnD/VirtualElement/helper.js +321 -131
  102. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  103. package/dist/Editor/common/RnD/index.js +25 -11
  104. package/dist/Editor/common/Select/index.js +44 -7
  105. package/dist/Editor/common/Select/styles.js +30 -2
  106. package/dist/Editor/common/Shorthands/elements.js +54 -0
  107. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  108. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  109. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  110. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  111. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  112. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  120. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  121. package/dist/Editor/common/Uploader.js +16 -0
  122. package/dist/Editor/common/iconListV2.js +76 -0
  123. package/dist/Editor/common/iconslist.js +21 -0
  124. package/dist/Editor/commonStyle.js +116 -61
  125. package/dist/Editor/helper/index.js +4 -0
  126. package/dist/Editor/helper/textIndeces.js +58 -0
  127. package/dist/Editor/helper/theme.js +203 -2
  128. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  129. package/dist/Editor/hooks/useMouseMove.js +9 -3
  130. package/dist/Editor/hooks/useTable.js +5 -4
  131. package/dist/Editor/hooks/useThemeValues.js +63 -0
  132. package/dist/Editor/plugins/withEmbeds.js +1 -1
  133. package/dist/Editor/plugins/withHTML.js +3 -1
  134. package/dist/Editor/plugins/withTable.js +1 -1
  135. package/dist/Editor/theme/ThemeList.js +50 -173
  136. package/dist/Editor/theme/index.js +149 -0
  137. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  138. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  139. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  140. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  141. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  142. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  143. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  144. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  145. package/dist/Editor/themeSettings/icons.js +60 -0
  146. package/dist/Editor/themeSettings/index.js +380 -0
  147. package/dist/Editor/themeSettings/style.js +299 -0
  148. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  149. package/dist/Editor/themeSettingsAI/index.js +355 -0
  150. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  151. package/dist/Editor/themeSettingsAI/style.js +332 -0
  152. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  153. package/dist/Editor/utils/accordion.js +14 -4
  154. package/dist/Editor/utils/button.js +1 -17
  155. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  156. package/dist/Editor/utils/draftToSlate.js +3 -2
  157. package/dist/Editor/utils/events.js +50 -6
  158. package/dist/Editor/utils/font.js +40 -37
  159. package/dist/Editor/utils/helper.js +197 -30
  160. package/dist/Editor/utils/insertAppHeader.js +1 -1
  161. package/dist/Editor/utils/signature.js +2 -9
  162. package/dist/Editor/utils/updateFormName.js +22 -0
  163. package/package.json +4 -4
@@ -6,20 +6,22 @@ const Styles = theme => ({
6
6
  "& .MuiDrawer-paper": {
7
7
  borderTopLeftRadius: 8,
8
8
  borderTopRightRadius: 8,
9
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
10
- "& .MuiInputBase-root": {
11
- border: `1px solid ${theme?.palette?.editor?.textColor}`,
12
- color: theme?.palette?.editor?.textColor
13
- },
14
- "& .MuiSvgIcon-root": {
15
- color: theme?.palette?.editor?.textColor
16
- },
17
- "& .MuiFormLabel-root": {
18
- color: theme?.palette?.editor?.textColor,
19
- backgroundColor: theme?.palette?.editor?.background
20
- }
9
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground
10
+
11
+ // "& .MuiInputBase-root": {
12
+ // border: `1px solid ${theme?.palette?.editor?.textColor}`,
13
+ // color: theme?.palette?.editor?.textColor,
14
+ // },
15
+ // "& .MuiSvgIcon-root": {
16
+ // color: theme?.palette?.editor?.textColor,
17
+ // },
18
+ // "& .MuiFormLabel-root": {
19
+ // color: theme?.palette?.editor?.textColor,
20
+ // backgroundColor: theme?.palette?.editor?.background,
21
+ // },
21
22
  }
22
23
  },
24
+
23
25
  childContainer: {
24
26
  padding: "20px",
25
27
  "&.emojiDrawer": {
@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
+ import { useEditorContext } from "../hooks/useMouseMove";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,15 @@ const Uploader = props => {
18
19
  const [base64, setBase64] = useState(value?.url);
19
20
  const [fileName, setFileName] = useState("");
20
21
  const [uploading, setUploading] = useState(false);
22
+ const {
23
+ theme
24
+ } = useEditorContext();
25
+ const allowedFormat = {
26
+ "Document": ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf",
27
+ "Image": "image/*",
28
+ "Video": "video/*",
29
+ "Embed": "*"
30
+ };
21
31
  const handleChange = async e => {
22
32
  const uFile = e.target.files[0];
23
33
  const strImage = await convertBase64(uFile);
@@ -59,6 +69,7 @@ const Uploader = props => {
59
69
  const renderThumb = () => {
60
70
  switch (title) {
61
71
  case "Document":
72
+ case "Video":
62
73
  return /*#__PURE__*/_jsxs(_Fragment, {
63
74
  children: [/*#__PURE__*/_jsx(Typography, {
64
75
  style: {
@@ -102,6 +113,10 @@ const Uploader = props => {
102
113
  className: "uploadImageSection",
103
114
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
104
115
  className: "uploadImageText",
116
+ sx: {
117
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
118
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
119
+ },
105
120
  children: /*#__PURE__*/_jsxs(Button, {
106
121
  component: "label",
107
122
  variant: "text",
@@ -112,6 +127,7 @@ const Uploader = props => {
112
127
  sx: classes.uploadIcon,
113
128
  children: [/*#__PURE__*/_jsx("input", {
114
129
  type: "file",
130
+ accept: allowedFormat[title],
115
131
  style: {
116
132
  opacity: 0,
117
133
  width: "0px"
@@ -962,6 +962,41 @@ export function DragIcon() {
962
962
  })]
963
963
  });
964
964
  }
965
+ export function ResizeIcon() {
966
+ return /*#__PURE__*/_jsxs("svg", {
967
+ width: "16",
968
+ height: "16",
969
+ viewBox: "0 0 16 16",
970
+ fill: "none",
971
+ xmlns: "http://www.w3.org/2000/svg",
972
+ children: [/*#__PURE__*/_jsx("rect", {
973
+ width: "16",
974
+ height: "16",
975
+ rx: "8",
976
+ fill: "#F8FAFC"
977
+ }), /*#__PURE__*/_jsx("rect", {
978
+ x: "0.5",
979
+ y: "0.5",
980
+ width: "15",
981
+ height: "15",
982
+ rx: "7.5",
983
+ stroke: "#2563EB",
984
+ strokeOpacity: "0.32"
985
+ }), /*#__PURE__*/_jsx("path", {
986
+ d: "M5.76758 6.44141L3.99981 8.20917L5.76758 9.97694",
987
+ stroke: "#94A3B8",
988
+ strokeWidth: "0.8",
989
+ strokeLinecap: "round",
990
+ strokeLinejoin: "round"
991
+ }), /*#__PURE__*/_jsx("path", {
992
+ d: "M10.2324 6.44141L12.0002 8.20917L10.2324 9.97694",
993
+ stroke: "#94A3B8",
994
+ strokeWidth: "0.8",
995
+ strokeLinecap: "round",
996
+ strokeLinejoin: "round"
997
+ })]
998
+ });
999
+ }
965
1000
  export function LeftAlignTextFormat() {
966
1001
  return /*#__PURE__*/_jsxs("svg", {
967
1002
  width: "19",
@@ -1323,6 +1358,27 @@ export function CheckedBoxCheckIcon() {
1323
1358
  })
1324
1359
  });
1325
1360
  }
1361
+ export function CheckedRadioIcon() {
1362
+ return /*#__PURE__*/_jsxs("svg", {
1363
+ width: "17",
1364
+ height: "17",
1365
+ viewBox: "0 0 17 17",
1366
+ fill: "none",
1367
+ xmlns: "http://www.w3.org/2000/svg",
1368
+ children: [/*#__PURE__*/_jsx("path", {
1369
+ d: "M16.5 8.42148C16.5 12.792 12.9227 16.343 8.5 16.343C4.07734 16.343 0.5 12.792 0.5 8.42148C0.5 4.05093 4.07734 0.5 8.5 0.5C12.9227 0.5 16.5 4.05093 16.5 8.42148Z",
1370
+ fill: "#DEE8FC",
1371
+ stroke: "#2563EB",
1372
+ className: "radio-icon-path"
1373
+ }), /*#__PURE__*/_jsx("ellipse", {
1374
+ cx: "8.5",
1375
+ cy: "8.42079",
1376
+ rx: "3.5",
1377
+ ry: "3.46767",
1378
+ fill: "#2563EB"
1379
+ })]
1380
+ });
1381
+ }
1326
1382
  export function SectionSettingIcon() {
1327
1383
  return /*#__PURE__*/_jsxs("svg", {
1328
1384
  width: "13",
@@ -1467,6 +1523,26 @@ export function PenIcon() {
1467
1523
  })]
1468
1524
  });
1469
1525
  }
1526
+ export function ResetIcon() {
1527
+ return /*#__PURE__*/_jsxs("svg", {
1528
+ width: "24",
1529
+ height: "24",
1530
+ viewBox: "0 0 24 24",
1531
+ fill: "none",
1532
+ xmlns: "http://www.w3.org/2000/svg",
1533
+ children: [/*#__PURE__*/_jsx("circle", {
1534
+ cx: "11.646",
1535
+ cy: "11.6452",
1536
+ r: "11.5",
1537
+ transform: "rotate(-89.2717 11.646 11.6452)",
1538
+ fill: "#2563EB",
1539
+ fillOpacity: "0.16"
1540
+ }), /*#__PURE__*/_jsx("path", {
1541
+ d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
1542
+ fill: "#2563EB"
1543
+ })]
1544
+ });
1545
+ }
1470
1546
  export function SaveTemplIcon() {
1471
1547
  return /*#__PURE__*/_jsxs("svg", {
1472
1548
  width: "18",
@@ -1677,6 +1677,27 @@ export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
1677
1677
  strokeLinejoin: "round"
1678
1678
  })]
1679
1679
  });
1680
+ export const CloseIcon2 = props => /*#__PURE__*/_jsxs("svg", {
1681
+ width: "10",
1682
+ height: "10",
1683
+ viewBox: "0 0 10 10",
1684
+ fill: "none",
1685
+ xmlns: "http://www.w3.org/2000/svg",
1686
+ ...(props || {}),
1687
+ children: [/*#__PURE__*/_jsx("path", {
1688
+ d: "M9.12476 0.875L0.875176 9.12458",
1689
+ stroke: "#8F9CAE",
1690
+ strokeWidth: "1.5",
1691
+ strokeLinecap: "round",
1692
+ strokeLinejoin: "round"
1693
+ }), /*#__PURE__*/_jsx("path", {
1694
+ d: "M0.875183 0.875L9.12476 9.12458",
1695
+ stroke: "#8F9CAE",
1696
+ strokeWidth: "1.5",
1697
+ strokeLinecap: "round",
1698
+ strokeLinejoin: "round"
1699
+ })]
1700
+ });
1680
1701
  export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
1681
1702
  width: "18",
1682
1703
  height: "18",
@@ -49,31 +49,28 @@ const useCommonStyle = theme => ({
49
49
  fontWeight: "500",
50
50
  fontFamily: "Inter, sans-serif"
51
51
  },
52
+ "& .MuiPaper-root": {
53
+ border: `unset !important`,
54
+ borderRadius: "0px",
55
+ height: "fit-content",
56
+ padding: "2px"
57
+ },
52
58
  "& p": {
53
59
  marginBottom: "7px",
54
60
  marginTop: "4px"
55
61
  },
56
- "& .MuiPaper-root": {
57
- border: 'unset !important',
58
- borderRadius: '0px',
59
- height: 'fit-content',
60
- padding: '2px'
61
- },
62
62
  "& .muiIconsListParent": {
63
63
  "& svg": {
64
64
  color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
65
65
  },
66
66
  "&::-webkit-scrollbar-thumb": {
67
67
  background: `${theme?.palette?.editor?.brainPopupScroll} !important`
68
- },
69
- "&::-webkit-scrollbar-track": {
70
- visibility: "hidden"
71
68
  }
72
69
  },
73
70
  "& .MuiGrid-root>.MuiGrid-item": {
74
71
  paddingRight: "0px !important",
75
72
  fontFamily: "Inter, sans-serif",
76
- height: 'fit-content'
73
+ height: "fit-content"
77
74
  },
78
75
  "& .MuiInputBase-root": {
79
76
  borderRadius: "10px",
@@ -134,14 +131,14 @@ const useCommonStyle = theme => ({
134
131
  borderRadius: "10px",
135
132
  width: "52px !important",
136
133
  marginLeft: "10px",
137
- height: '36px !important'
134
+ height: "36px !important"
138
135
  },
139
136
  "& .spacingSlider": {
140
137
  width: "calc(100% - 18px)"
141
138
  }
142
139
  },
143
- '& .MuiFormHelperText-root': {
144
- margin: '4px 0px 0px 0px',
140
+ "& .MuiFormHelperText-root": {
141
+ margin: "4px 0px 0px 0px",
145
142
  color: theme?.palette?.editor?.closeButtonSvgStroke,
146
143
  fontFamily: "Inter, sans-serif"
147
144
  }
@@ -211,16 +208,16 @@ const useCommonStyle = theme => ({
211
208
  backgroundColor: theme?.palette?.editor?.miniToolBarBackground
212
209
  },
213
210
  "& .popup_tabs": {
214
- backgroundColor: theme?.palette?.editor?.background,
211
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
215
212
  "@media only screen and (max-width: 899px)": {
216
213
  width: "100% !important"
217
214
  }
218
215
  },
219
216
  "& .popup_tabs-header": {
220
- backgroundColor: theme?.palette?.editor?.background,
217
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
221
218
  "& .popup_tabs-header-label-active": {
222
219
  color: theme?.palette?.editor?.activeColor,
223
- backgroundColor: theme?.palette?.editor?.background
220
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground
224
221
  }
225
222
  },
226
223
  "& .colorpicker": {
@@ -249,6 +246,40 @@ const useCommonStyle = theme => ({
249
246
  backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
250
247
  color: theme?.palette?.editor?.textColor
251
248
  }
249
+ },
250
+ "& .colorPickerActionBtns": {
251
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
252
+ display: "flex",
253
+ justifyContent: "end",
254
+ padding: "10px",
255
+ position: "sticky",
256
+ bottom: 0,
257
+ right: 0,
258
+ boxShadow: `0px -3px 12px 0px ${theme?.palette?.editor?.cardShadow}`,
259
+ gap: "8px",
260
+ "& button": {
261
+ fontWeight: 600,
262
+ fontSize: "14px",
263
+ opacity: 1,
264
+ borderRadius: "8px",
265
+ textTransform: "math-auto",
266
+ padding: "4px 20px",
267
+ height: "fit-content",
268
+ minWidth: "90px",
269
+ "@media only screen and (max-width: 899px)": {
270
+ width: "50%"
271
+ },
272
+ "&.confirmBtn": {
273
+ backgroundColor: "#2563EB",
274
+ color: "#ffffff",
275
+ border: `1px solid #2563EB`
276
+ },
277
+ "&.cancelBtn": {
278
+ backgroundColor: theme?.palette?.editor?.closeButtonBackground,
279
+ color: theme?.palette?.editor?.customDialogueCloseBtnColor,
280
+ border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
281
+ }
282
+ }
252
283
  }
253
284
  },
254
285
  colorPickerBtnBorder: {
@@ -260,6 +291,12 @@ const useCommonStyle = theme => ({
260
291
  "& .signature-canvas": {
261
292
  backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
262
293
  },
294
+ "& .clear-canvas": {
295
+ position: "absolute",
296
+ top: 6,
297
+ right: 6,
298
+ color: theme?.palette?.editor?.closeButtonSvgStroke
299
+ },
263
300
  "& label": {
264
301
  color: theme?.palette?.editor?.textColor
265
302
  },
@@ -397,14 +434,14 @@ const useCommonStyle = theme => ({
397
434
  padding: "8px 12px",
398
435
  fontSize: "12px",
399
436
  color: theme?.palette?.editor?.menuOptionTextColor,
400
- fontWeight: '500',
437
+ fontWeight: "500",
401
438
  fontFamily: "Inter, sans-serif",
402
- minHeight: '36px',
439
+ minHeight: "36px",
403
440
  "&:hover": {
404
441
  backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
405
442
  }
406
443
  },
407
- '& .Mui-selected': {
444
+ "& .Mui-selected": {
408
445
  background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
409
446
  },
410
447
  "& .MuiListSubheader-root": {
@@ -413,16 +450,16 @@ const useCommonStyle = theme => ({
413
450
  fontSize: "12px"
414
451
  },
415
452
  "& .MuiPaper-root": {
416
- borderRadius: '8px',
417
- padding: '0px',
453
+ borderRadius: "8px",
454
+ padding: "0px",
418
455
  background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
419
456
  },
420
- '& .MuiButtonBase-root': {
421
- margin: '4px',
422
- borderRadius: '6px'
457
+ "& .MuiButtonBase-root": {
458
+ margin: "4px",
459
+ borderRadius: "6px"
423
460
  },
424
- '& .MuiList-root': {
425
- padding: '0px'
461
+ "& .MuiList-root": {
462
+ padding: "0px"
426
463
  }
427
464
  },
428
465
  datePicker: {
@@ -522,27 +559,45 @@ const useCommonStyle = theme => ({
522
559
  }
523
560
  }
524
561
  },
525
- pageSettingPopUpRoot: {
526
- padding: "16px 8px 16px 10px!important",
527
- height: "100%"
528
- },
529
562
  buttonMoreOption: {
530
563
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
531
564
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
532
- padding: '4px !important',
533
- '& svg': {
534
- width: '18px !important',
535
- height: '18px !important',
536
- '& path': {
565
+ padding: "4px !important",
566
+ "& svg": {
567
+ width: "18px !important",
568
+ height: "18px !important",
569
+ "& path": {
537
570
  stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
538
571
  }
539
572
  }
540
573
  },
574
+ pageSettingPopUpRoot: {
575
+ padding: "16px 8px 16px 10px!important",
576
+ height: "100%"
577
+ },
578
+ buttonMoreIcon: {
579
+ position: "absolute",
580
+ top: "50%",
581
+ right: -40,
582
+ transform: "translateY(-50%)"
583
+ },
584
+ // buttonMoreOption: {
585
+ // background: `${theme?.palette?.editor?.aiInputBackground} !important`,
586
+ // border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
587
+ // padding: "4px !important",
588
+ // "& svg": {
589
+ // width: "18px !important",
590
+ // height: "18px !important",
591
+ // "& path": {
592
+ // stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
593
+ // },
594
+ // },
595
+ // },
541
596
  buttonMoreOption2: {
542
597
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
543
598
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
544
- '& svg': {
545
- '& path': {
599
+ "& svg": {
600
+ "& path": {
546
601
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
547
602
  }
548
603
  }
@@ -550,11 +605,11 @@ const useCommonStyle = theme => ({
550
605
  buttonMoreOption3: {
551
606
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
552
607
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
553
- padding: '5px !important',
554
- '& svg': {
555
- width: '16px !important',
556
- height: '16px !important',
557
- '& path': {
608
+ padding: "5px !important",
609
+ "& svg": {
610
+ width: "16px !important",
611
+ height: "16px !important",
612
+ "& path": {
558
613
  stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
559
614
  }
560
615
  }
@@ -562,37 +617,37 @@ const useCommonStyle = theme => ({
562
617
  resizeButton: {
563
618
  background: theme?.palette?.editor?.aiInputBackground,
564
619
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
565
- padding: '5px !important',
566
- borderRadius: '50% !important',
567
- '& svg': {
568
- width: '18px',
569
- height: '18px',
570
- '& path': {
620
+ padding: "5px !important",
621
+ borderRadius: "50% !important",
622
+ "& svg": {
623
+ width: "18px",
624
+ height: "18px",
625
+ "& path": {
571
626
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
572
627
  }
573
628
  },
574
- '&:hover': {
629
+ "&:hover": {
575
630
  background: theme?.palette?.editor?.aiInputBackground
576
631
  }
577
632
  },
578
633
  gradientFillBtn: {
579
634
  background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
580
- textTransform: 'math-auto !important',
581
- color: '#FFFFFF !important',
582
- padding: '0px 12px !important',
583
- height: '32px',
584
- borderRadius: '8px',
585
- fontWeight: '500',
586
- fontSize: '14px'
635
+ textTransform: "math-auto !important",
636
+ color: "#FFFFFF !important",
637
+ padding: "0px 12px !important",
638
+ height: "32px",
639
+ borderRadius: "8px",
640
+ fontWeight: "500",
641
+ fontSize: "14px"
587
642
  },
588
643
  emptyThumbBtn: {
589
644
  background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
590
645
  color: `${theme?.palette?.editor?.textColor} !important`,
591
- fontSize: '14px !important',
592
- '& svg': {
593
- width: '20px !important',
594
- height: '20px !important',
595
- '& path': {
646
+ fontSize: "14px !important",
647
+ "& svg": {
648
+ width: "20px !important",
649
+ height: "20px !important",
650
+ "& path": {
596
651
  stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
597
652
  }
598
653
  }
@@ -401,4 +401,8 @@ export const clearSelectionOnly = editor => {
401
401
  } catch (err) {
402
402
  console.log(err);
403
403
  }
404
+ };
405
+ export const isMobileWindow = () => {
406
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
407
+ return isMobile;
404
408
  };
@@ -0,0 +1,58 @@
1
+ export function extractTextWithPath(data, path = []) {
2
+ let result = [];
3
+ data.forEach((item, index) => {
4
+ const currentPath = [...path, index];
5
+ if (item.text) {
6
+ result.push({
7
+ path_id: currentPath.join(","),
8
+ text: item.text
9
+ });
10
+ }
11
+ if (item.children) {
12
+ result = result.concat(extractTextWithPath(item.children, currentPath));
13
+ }
14
+ });
15
+ return result;
16
+ }
17
+ export function replaceTextPath(nestedJson, pathIdJson) {
18
+ // Create a map from path_id JSON for quick lookup
19
+ const pathIdMap = new Map(pathIdJson.map(item => [item.path_id, item.text]));
20
+ console.log(pathIdMap);
21
+ function extractTextWithPath(data, path = []) {
22
+ data.forEach((item, index) => {
23
+ const currentPath = [...path, index];
24
+ if (item.text) {
25
+ if (pathIdMap.has(currentPath?.join(","))) {
26
+ item.text = pathIdMap.get(currentPath?.join(","));
27
+ }
28
+ }
29
+ if (item.children) {
30
+ extractTextWithPath(item.children, currentPath);
31
+ }
32
+ });
33
+ }
34
+ extractTextWithPath(nestedJson, []);
35
+ return nestedJson;
36
+ }
37
+
38
+ // export function replaceTextPath(nestedJson, pathIdJson) {
39
+ // // Create a map from path_id JSON for quick lookup
40
+ // const pathIdMap = new Map(
41
+ // pathIdJson.map((item) => [item.path_id, item.text])
42
+ // );
43
+
44
+ // function traverseAndReplace(node) {
45
+ // if (Array.isArray(node)) {
46
+ // node.forEach(traverseAndReplace);
47
+ // } else if (typeof node === "object" && node !== null) {
48
+ // console.log(node);
49
+ // if (node.text && pathIdMap.has(node.text)) {
50
+ // node.text = pathIdMap.get(node.path_id);
51
+ // }
52
+ // Object.values(node).forEach(traverseAndReplace);
53
+ // }
54
+ // }
55
+
56
+ // traverseAndReplace(nestedJson);
57
+ // return nestedJson;
58
+ // }