@flozy/editor 3.7.6 → 3.7.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. package/dist/Editor/ChatEditor.js +2 -29
  2. package/dist/Editor/CommonEditor.js +169 -111
  3. package/dist/Editor/Elements/Accordion/Accordion.js +74 -7
  4. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +3 -2
  5. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -60
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  7. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  11. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  12. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
  13. package/dist/Editor/Elements/Embed/Image.js +28 -20
  14. package/dist/Editor/Elements/Embed/Video.js +15 -11
  15. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  16. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  17. package/dist/Editor/Elements/Grid/Grid.js +2 -0
  18. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  19. package/dist/Editor/Elements/Link/Link.js +6 -1
  20. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  21. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  22. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  23. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  24. package/dist/Editor/MiniEditor.js +3 -1
  25. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  26. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  27. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  28. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  29. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  30. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  31. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  32. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  33. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  34. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  35. package/dist/Editor/Toolbar/PopupTool/index.js +12 -11
  36. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  37. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  38. package/dist/Editor/common/ColorPickerButton.js +25 -9
  39. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  40. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  41. package/dist/Editor/common/CustomDialog/index.js +94 -0
  42. package/dist/Editor/common/CustomDialog/style.js +67 -0
  43. package/dist/Editor/common/CustomSelect.js +33 -0
  44. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  45. package/dist/Editor/common/EditorCmds.js +35 -0
  46. package/dist/Editor/common/Icon.js +30 -2
  47. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  48. package/dist/Editor/common/LinkSettings/index.js +2 -1
  49. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  50. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  51. package/dist/Editor/common/Shorthands/elements.js +54 -0
  52. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  53. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  54. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  55. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  56. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  57. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  58. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  59. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  60. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  61. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  62. package/dist/Editor/helper/theme.js +190 -4
  63. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  64. package/dist/Editor/hooks/useMouseMove.js +4 -2
  65. package/dist/Editor/plugins/withEmbeds.js +1 -1
  66. package/dist/Editor/plugins/withHTML.js +47 -5
  67. package/dist/Editor/plugins/withLayout.js +15 -10
  68. package/dist/Editor/plugins/withTable.js +2 -2
  69. package/dist/Editor/theme/ThemeList.js +50 -173
  70. package/dist/Editor/theme/index.js +144 -0
  71. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  72. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  73. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  74. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  75. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  76. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  77. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  78. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  79. package/dist/Editor/themeSettings/icons.js +60 -0
  80. package/dist/Editor/themeSettings/index.js +320 -0
  81. package/dist/Editor/themeSettings/style.js +152 -0
  82. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  83. package/dist/Editor/themeSettingsAI/index.js +356 -0
  84. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  85. package/dist/Editor/themeSettingsAI/style.js +247 -0
  86. package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
  87. package/dist/Editor/utils/button.js +1 -17
  88. package/dist/Editor/utils/events.js +11 -4
  89. package/dist/Editor/utils/font.js +40 -37
  90. package/dist/Editor/utils/helper.js +73 -13
  91. package/package.json +1 -1
@@ -0,0 +1,28 @@
1
+ const LinkPopupStyles = theme => ({
2
+ addLinkField: {
3
+ "& .MuiOutlinedInput-input": {
4
+ fontSize: "12px",
5
+ fontWeight: 500,
6
+ color: `${theme?.palette?.editor?.textColor} !important`
7
+ },
8
+ "& .MuiFormHelperText-root": {
9
+ color: `${theme?.palette?.editor?.textColor} !important`
10
+ },
11
+ "& .MuiOutlinedInput-root": {
12
+ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
13
+ color: `${theme?.palette?.editor?.textColor} !important`,
14
+ borderRadius: "7px",
15
+ "& fieldset": {
16
+ borderColor: "#D8DDE1"
17
+ },
18
+ "&:hover fieldset": {
19
+ borderColor: "#64748B"
20
+ },
21
+ "&.Mui-focused fieldset": {
22
+ borderColor: "#2563EB"
23
+ },
24
+ "& .MuiFormLabel-root": {}
25
+ }
26
+ }
27
+ });
28
+ export default LinkPopupStyles;
@@ -117,7 +117,7 @@ const TableCell = props => {
117
117
  className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
118
118
  style: {
119
119
  position: "relative",
120
- backgroundColor: bgColor || entireBgColor,
120
+ background: bgColor || entireBgColor,
121
121
  border: `3px solid ${cellBorderColor}`,
122
122
  ...(sizeProps || {})
123
123
  },
@@ -23,7 +23,8 @@ const MiniEditor = props => {
23
23
  miniEditorPlaceholder,
24
24
  className,
25
25
  otherProps,
26
- onSave
26
+ onSave,
27
+ theme
27
28
  } = props;
28
29
  const {
29
30
  CHARACTERS = []
@@ -132,6 +133,7 @@ const MiniEditor = props => {
132
133
  editor: editor,
133
134
  initialValue: content,
134
135
  onChange: onChange,
136
+ theme: theme,
135
137
  children: [/*#__PURE__*/_jsx(BasicToolbar, {
136
138
  ...props
137
139
  }), /*#__PURE__*/_jsx(Editable, {
@@ -25,7 +25,8 @@ const BasicToolbar = props => {
25
25
  hideTextColor = false,
26
26
  hideResetIcon = true,
27
27
  onResetClick = () => {}
28
- }
28
+ },
29
+ theme
29
30
  } = props;
30
31
  // state
31
32
  const [activeColor, setActiveColor] = useState("#000000");
@@ -65,7 +66,8 @@ const BasicToolbar = props => {
65
66
  item: true,
66
67
  children: /*#__PURE__*/_jsx(LinkButton, {
67
68
  active: isBlockActive(editor, link.format),
68
- editor: editor
69
+ editor: editor,
70
+ theme: theme
69
71
  }, link.id)
70
72
  }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
71
73
  item: true,
@@ -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
4
  import { fontFamilyMap } from "../../utils/font";
5
+ import { toolbarGroups } from "../toolbarGroups.js";
5
6
  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
+ };
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 = getValue(editor, format);
14
38
  const changeMarkData = (event, format) => {
15
39
  event.preventDefault();
16
40
  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, 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,
@@ -9,7 +9,7 @@ const MarkButton = ({
9
9
  title
10
10
  }) => {
11
11
  return /*#__PURE__*/_jsx(Button, {
12
- active: isMarkActive(editor, format),
12
+ active: isMarkBtnActive(editor, format),
13
13
  format: format,
14
14
  onMouseDown: e => {
15
15
  e.preventDefault();
@@ -1,9 +1,8 @@
1
1
  import React 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";
3
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
5
4
  import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
6
- import { getBreakPointsValue } from "../../helper/theme.js";
5
+ import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
7
6
  import useWindowResize from "../../hooks/useWindowResize.js";
8
7
  import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
9
8
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +16,8 @@ const TextSize = ({
17
16
  }) => {
18
17
  const [size] = useWindowResize();
19
18
  const val = activeMark(editor, format);
20
- const value = getBreakPointsValue(val, size?.device);
19
+ const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
20
+ const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
21
21
  const updateMarkData = newVal => {
22
22
  let upData = {
23
23
  ...getBreakPointsValue(val),
@@ -46,13 +46,7 @@ const TextSize = ({
46
46
  };
47
47
  const getSizeVal = () => {
48
48
  try {
49
- let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
50
- Object.entries(headingMap).forEach(([format, value]) => {
51
- if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
52
- size = value;
53
- }
54
- });
55
- return parseInt(size);
49
+ return parseInt(value);
56
50
  } catch (err) {
57
51
  return "";
58
52
  }
@@ -1,10 +1,9 @@
1
1
  import { useEffect, useRef, useState } from "react";
2
- import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
2
+ import { activeMark, addMarkData } 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 } from "../../../helper/theme";
7
- import { headingMap, sizeMap } from "../../../utils/font";
6
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../../helper/theme";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
9
  const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
@@ -19,7 +18,7 @@ function SelectFontSize({
19
18
  const containerRef = useRef();
20
19
  const [size] = useWindowResize();
21
20
  const val = activeMark(editor, format);
22
- const value = getBreakPointsValue(val, size?.device);
21
+ const value = getTextSizeVal(editor);
23
22
  const timerRef = useRef();
24
23
  const updateMarkData = newVal => {
25
24
  let upData = {
@@ -53,13 +52,7 @@ function SelectFontSize({
53
52
  };
54
53
  const getSizeVal = () => {
55
54
  try {
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);
55
+ return parseInt(value);
63
56
  } catch (err) {
64
57
  return "";
65
58
  }
@@ -2,8 +2,11 @@ import { useMemo } from "react";
2
2
  import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
3
  import CustomSelectTool from "./CustomSelectTool";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
5
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
6
6
  import { sizeMap } from "../../../utils/font";
7
+ import { Editor } from "slate";
8
+ import { MenuItem, Select } from "@mui/material";
9
+ import { useEditorTheme } from "../../../hooks/useEditorTheme";
7
10
  import { jsx as _jsx } from "react/jsx-runtime";
8
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
12
  function Label({
@@ -17,93 +20,194 @@ function Label({
17
20
  });
18
21
  }
19
22
  function DisplayHeaderLabel({
20
- type
23
+ type,
24
+ isCustomized,
25
+ isPara = false
21
26
  }) {
22
27
  return /*#__PURE__*/_jsxs("div", {
23
- children: ["H", /*#__PURE__*/_jsx("sub", {
28
+ children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
24
29
  children: type
25
30
  })]
26
31
  });
27
32
  }
28
- const typographyOptions = [{
29
- id: 11,
30
- format: "headingOne",
31
- type: "block",
32
- title: /*#__PURE__*/_jsx(Label, {
33
- label: "H1",
34
- type: "Header"
35
- }),
36
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
37
- type: 1
38
- }),
39
- group: "typography",
40
- value: "headingOne"
41
- }, {
42
- id: 12,
43
- format: "headingTwo",
44
- type: "block",
45
- title: /*#__PURE__*/_jsx(Label, {
46
- label: "H2",
47
- type: "Header"
48
- }),
49
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
50
- type: 2
51
- }),
52
- group: "typography",
53
- value: "headingTwo"
54
- }, {
55
- id: 13,
56
- format: "headingThree",
57
- type: "block",
58
- title: /*#__PURE__*/_jsx(Label, {
59
- label: "H3",
60
- type: "Header"
61
- }),
62
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
63
- type: 3
64
- }),
65
- group: "typography",
66
- value: "headingThree"
67
- }, {
68
- id: 14,
69
- format: "fontSize",
70
- type: "mark",
71
- title: /*#__PURE__*/_jsx(Label, {
33
+ function getTypographyOptions(isCustomized) {
34
+ const typographyOptions = [{
35
+ id: 11,
36
+ format: "headingOne",
37
+ type: "block",
38
+ title: /*#__PURE__*/_jsx(Label, {
39
+ label: "H1",
40
+ type: "Heading"
41
+ }),
42
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
43
+ type: 1,
44
+ isCustomized: isCustomized
45
+ }),
46
+ group: "typography",
47
+ value: "headingOne"
48
+ }, {
49
+ id: 12,
50
+ format: "headingTwo",
51
+ type: "block",
52
+ title: /*#__PURE__*/_jsx(Label, {
53
+ label: "H2",
54
+ type: "Heading"
55
+ }),
56
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
57
+ type: 2,
58
+ isCustomized: isCustomized
59
+ }),
60
+ group: "typography",
61
+ value: "headingTwo"
62
+ }, {
63
+ id: 13,
64
+ format: "headingThree",
65
+ type: "block",
66
+ title: /*#__PURE__*/_jsx(Label, {
67
+ label: "H3",
68
+ type: "Heading"
69
+ }),
70
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
71
+ type: 3,
72
+ isCustomized: isCustomized
73
+ }),
74
+ group: "typography",
75
+ value: "headingThree"
76
+ }, {
77
+ id: 17,
78
+ format: "headingFour",
79
+ type: "block",
80
+ title: /*#__PURE__*/_jsx(Label, {
81
+ label: "H4",
82
+ type: "Heading"
83
+ }),
84
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
85
+ type: 4,
86
+ isCustomized: isCustomized
87
+ }),
88
+ group: "typography",
89
+ value: "headingFour"
90
+ }, {
91
+ id: 18,
92
+ format: "headingFive",
93
+ type: "block",
94
+ title: /*#__PURE__*/_jsx(Label, {
95
+ label: "H5",
96
+ type: "Heading"
97
+ }),
98
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
99
+ type: 5,
100
+ isCustomized: isCustomized
101
+ }),
102
+ group: "typography",
103
+ value: "headingFive"
104
+ }, {
105
+ id: 19,
106
+ format: "headingSix",
107
+ type: "block",
108
+ title: /*#__PURE__*/_jsx(Label, {
109
+ label: "H6",
110
+ type: "Heading"
111
+ }),
112
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
113
+ type: 6,
114
+ isCustomized: isCustomized
115
+ }),
116
+ group: "typography",
117
+ value: "headingSix"
118
+ }, {
119
+ id: 20,
120
+ format: "paragraphOne",
121
+ type: "block",
122
+ title: /*#__PURE__*/_jsx(Label, {
123
+ label: "P1",
124
+ type: "Paragraph"
125
+ }),
126
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
127
+ type: 1,
128
+ isCustomized: isCustomized,
129
+ isPara: true
130
+ }),
131
+ group: "typography",
132
+ value: "paragraphOne"
133
+ }, {
134
+ id: 21,
135
+ format: "paragraphTwo",
136
+ type: "block",
137
+ title: /*#__PURE__*/_jsx(Label, {
138
+ label: "P2",
139
+ type: "Paragraph"
140
+ }),
141
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
142
+ type: 2,
143
+ isCustomized: isCustomized,
144
+ isPara: true
145
+ }),
146
+ group: "typography",
147
+ value: "paragraphTwo"
148
+ }, {
149
+ id: 22,
150
+ format: "paragraphThree",
151
+ type: "block",
152
+ title: /*#__PURE__*/_jsx(Label, {
153
+ label: "P3",
154
+ type: "Paragraph"
155
+ }),
156
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
157
+ type: 3,
158
+ isCustomized: isCustomized,
159
+ isPara: true
160
+ }),
161
+ group: "typography",
162
+ value: "paragraphThree"
163
+ }, {
164
+ id: 14,
165
+ format: "fontSize",
166
+ type: "mark",
167
+ title: /*#__PURE__*/_jsx(Label, {
168
+ label: "L",
169
+ type: "Large"
170
+ }),
72
171
  label: "L",
73
- type: "Large"
74
- }),
75
- label: "L",
76
- group: "typography",
77
- value: "huge"
78
- }, {
79
- id: 15,
80
- format: "fontSize",
81
- type: "mark",
82
- title: /*#__PURE__*/_jsx(Label, {
172
+ group: "typography",
173
+ value: "huge"
174
+ }, {
175
+ id: 15,
176
+ format: "fontSize",
177
+ type: "mark",
178
+ title: /*#__PURE__*/_jsx(Label, {
179
+ label: "M",
180
+ type: "Medium"
181
+ }),
83
182
  label: "M",
84
- type: "Medium"
85
- }),
86
- label: "M",
87
- group: "typography",
88
- value: "medium"
89
- }, {
90
- id: 16,
91
- format: "fontSize",
92
- type: "mark",
93
- title: /*#__PURE__*/_jsx(Label, {
183
+ group: "typography",
184
+ value: "medium"
185
+ }, {
186
+ id: 16,
187
+ format: "fontSize",
188
+ type: "mark",
189
+ title: /*#__PURE__*/_jsx(Label, {
190
+ label: "S",
191
+ type: "Small"
192
+ }),
94
193
  label: "S",
95
- type: "Small"
96
- }),
97
- label: "S",
98
- group: "typography",
99
- value: "small"
100
- }];
194
+ group: "typography",
195
+ value: "small"
196
+ }];
197
+ return typographyOptions;
198
+ }
101
199
  function SelectTypography({
102
200
  editor,
103
201
  classes,
104
- closeMainPopup
202
+ closeMainPopup,
203
+ type
105
204
  }) {
106
205
  const [size] = useWindowResize();
206
+ const {
207
+ theme
208
+ } = useEditorTheme();
209
+ const isTextCustomized = theme?.id ? isCustomized(editor) : false;
210
+ const typographyOptions = getTypographyOptions(isTextCustomized);
107
211
  const updateMarkData = newVal => {
108
212
  const val = activeMark(editor, "fontSize");
109
213
  let upData = {
@@ -148,26 +252,49 @@ function SelectTypography({
148
252
  });
149
253
  }, [typographyOptions, activeMark, isBlockActive, editor]);
150
254
  const onChange = (format, option) => {
151
- // add/reset block elements
152
- toggleBlock(editor, format);
153
255
  if (option.type === "block") {
154
- // reset old font size
155
- addMarkData(editor, {
156
- format: "fontSize",
157
- value: {}
256
+ themeFields.forEach(field => {
257
+ Editor.removeMark(editor, field);
158
258
  });
259
+
260
+ // add/reset block elements
261
+ toggleBlock(editor, format);
159
262
  } else if (option.type === "mark") {
160
263
  const size = sizeMap[option.value] || "";
161
264
  const [sizeInNumber] = size.split("px");
162
265
  updateMarkData(Number(sizeInNumber));
163
266
  }
164
267
  };
165
- return /*#__PURE__*/_jsx(CustomSelectTool, {
166
- options: typographyOptions,
167
- editor: editor,
168
- onChange: onChange,
169
- value: selectedBlock?.value || "headingOne",
170
- classes: classes
268
+ const typographyValue = selectedBlock?.value || "headingOne";
269
+ if (type === "miniToolBar") {
270
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
271
+ options: typographyOptions,
272
+ editor: editor,
273
+ onChange: onChange,
274
+ value: typographyValue,
275
+ classes: classes
276
+ });
277
+ }
278
+ return /*#__PURE__*/_jsx(Select, {
279
+ value: typographyValue,
280
+ className: "editor-dd",
281
+ onChange: e => {
282
+ const {
283
+ value
284
+ } = e.target;
285
+ const option = typographyOptions?.find(o => o.value === value);
286
+ onChange(value, option);
287
+ },
288
+ style: {
289
+ width: "100%",
290
+ height: "36px",
291
+ borderRadius: "10px",
292
+ fontSize: "14px"
293
+ },
294
+ children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
295
+ value: item.value,
296
+ children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
297
+ }, index))
171
298
  });
172
299
  }
173
300
  export default SelectTypography;
@@ -53,7 +53,8 @@ const MiniTextFormat = props => {
53
53
  children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
54
54
  classes: classes,
55
55
  editor: editor,
56
- closeMainPopup: closeMainPopup
56
+ closeMainPopup: closeMainPopup,
57
+ type: "miniToolBar"
57
58
  }), /*#__PURE__*/_jsx("div", {
58
59
  className: "verticalLine"
59
60
  }), /*#__PURE__*/_jsx(SelectList, {
@@ -19,7 +19,7 @@ const usePopupStyle = theme => ({
19
19
  backgroundColor: theme?.palette?.editor?.background
20
20
  },
21
21
  "&.textSettings": {
22
- '@media only screen and (max-width: 600px)': {
22
+ "@media only screen and (max-width: 600px)": {
23
23
  margin: "4px !important",
24
24
  marginBottom: "54px !important"
25
25
  }
@@ -78,7 +78,7 @@ const usePopupStyle = theme => ({
78
78
  paddingTop: "4px"
79
79
  },
80
80
  "@media only screen and (max-width: 599px)": {
81
- width: '330px'
81
+ width: "330px"
82
82
  }
83
83
  },
84
84
  "&.templates": {
@@ -89,7 +89,7 @@ const usePopupStyle = theme => ({
89
89
  maxHeight: "fit-content"
90
90
  },
91
91
  "@media only screen and (max-width: 599px)": {
92
- width: '330px'
92
+ width: "330px"
93
93
  }
94
94
  },
95
95
  "& .headerContainer": {},
@@ -144,7 +144,7 @@ const usePopupStyle = theme => ({
144
144
  }
145
145
  },
146
146
  "@media only screen and (max-width: 599px)": {
147
- width: '330px'
147
+ width: "330px"
148
148
  }
149
149
  },
150
150
  textFormatLabel: {
@@ -155,13 +155,13 @@ const usePopupStyle = theme => ({
155
155
  lineHeight: "25px",
156
156
  marginTop: "12px",
157
157
  marginBottom: "8px",
158
- '& .searchContainer': {
158
+ "& .searchContainer": {
159
159
  position: "absolute",
160
160
  right: 0,
161
161
  zIndex: 3
162
162
  },
163
- '& .MuiFormControl-root.MuiTextField-root input': {
164
- padding: '8px 35px 6px 12px'
163
+ "& .MuiFormControl-root.MuiTextField-root input": {
164
+ padding: "8px 35px 6px 12px"
165
165
  }
166
166
  },
167
167
  textFormatField: {
@@ -205,7 +205,8 @@ const usePopupStyle = theme => ({
205
205
  fontSize: "14px",
206
206
  marginBottom: "5px",
207
207
  paddingLeft: "5px",
208
- fontWeight: 500
208
+ fontWeight: 500,
209
+ color: "#000000"
209
210
  },
210
211
  templateCard: {
211
212
  borderRadius: "10px",
@@ -327,8 +328,13 @@ const usePopupStyle = theme => ({
327
328
  }
328
329
  },
329
330
  defaultBtn: {
330
- color: "#0F172A",
331
- textTransform: "none"
331
+ color: "#2563EB !important",
332
+ textTransform: "none",
333
+ textDecoration: "underline",
334
+ "&.Mui-disabled": {
335
+ color: "#A0AEC0 !important",
336
+ textDecoration: "none"
337
+ }
332
338
  },
333
339
  templateCardBtnGrp: {
334
340
  display: "none",
@@ -413,7 +419,8 @@ const usePopupStyle = theme => ({
413
419
  colorPopper: {
414
420
  "& .MuiPaper-root": {
415
421
  backgroundColor: theme?.palette?.editor?.background,
416
- '@media only screen and (max-width: 600px)': {
422
+ padding: "4px 14px",
423
+ "@media only screen and (max-width: 600px)": {
417
424
  marginTop: "-40px"
418
425
  }
419
426
  }
@@ -524,9 +531,9 @@ const usePopupStyle = theme => ({
524
531
  },
525
532
  customSelectPopoverWrapper: {
526
533
  "& .MuiPopover-paper": {
527
- maxHeight: '140px',
534
+ maxHeight: "140px",
528
535
  background: theme?.palette?.editor?.background,
529
- '@media only screen and (max-width: 600px)': {
536
+ "@media only screen and (max-width: 600px)": {
530
537
  marginTop: "-40px"
531
538
  }
532
539
  },