@flozy/editor 3.7.9 → 3.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. package/dist/Editor/CommonEditor.js +111 -169
  2. package/dist/Editor/Editor.css +12 -1
  3. package/dist/Editor/Elements/AI/AIInput.js +5 -16
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +17 -31
  5. package/dist/Editor/Elements/AI/Styles.js +1 -2
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  7. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  8. package/dist/Editor/Elements/Accordion/AccordionSummary.js +74 -7
  9. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  10. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  14. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  15. package/dist/Editor/Elements/Embed/Image.js +20 -28
  16. package/dist/Editor/Elements/Embed/Video.js +11 -15
  17. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  18. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  19. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  20. package/dist/Editor/Elements/Link/Link.js +1 -6
  21. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  22. package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
  23. package/dist/Editor/Elements/Table/Table.js +1 -1
  24. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  25. package/dist/Editor/MiniEditor.js +1 -3
  26. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  27. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  28. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  29. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  30. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  31. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  32. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  33. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  34. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  35. package/dist/Editor/Toolbar/PopupTool/index.js +5 -6
  36. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  37. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  38. package/dist/Editor/common/ColorPickerButton.js +9 -25
  39. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  40. package/dist/Editor/common/Icon.js +2 -30
  41. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  42. package/dist/Editor/common/LinkSettings/index.js +1 -2
  43. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  44. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  45. package/dist/Editor/common/Shorthands/elements.js +0 -54
  46. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  47. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  48. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  53. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  55. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  56. package/dist/Editor/helper/theme.js +4 -189
  57. package/dist/Editor/hooks/useMouseMove.js +2 -4
  58. package/dist/Editor/plugins/withEmbeds.js +1 -1
  59. package/dist/Editor/plugins/withHTML.js +5 -47
  60. package/dist/Editor/plugins/withLayout.js +10 -15
  61. package/dist/Editor/plugins/withTable.js +2 -2
  62. package/dist/Editor/theme/ThemeList.js +173 -50
  63. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
  64. package/dist/Editor/utils/button.js +17 -1
  65. package/dist/Editor/utils/events.js +4 -11
  66. package/dist/Editor/utils/font.js +37 -40
  67. package/dist/Editor/utils/helper.js +13 -73
  68. package/package.json +1 -2
  69. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  70. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
  71. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  72. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  73. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  74. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  75. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  76. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  77. package/dist/Editor/common/CustomDialog/index.js +0 -94
  78. package/dist/Editor/common/CustomDialog/style.js +0 -67
  79. package/dist/Editor/common/CustomSelect.js +0 -33
  80. package/dist/Editor/common/EditorCmds.js +0 -35
  81. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  82. package/dist/Editor/theme/index.js +0 -144
  83. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  84. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  85. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  86. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  87. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  88. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  89. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  90. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  91. package/dist/Editor/themeSettings/icons.js +0 -60
  92. package/dist/Editor/themeSettings/index.js +0 -320
  93. package/dist/Editor/themeSettings/style.js +0 -152
  94. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  95. package/dist/Editor/themeSettingsAI/index.js +0 -356
  96. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  97. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -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 } 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,10 +9,8 @@ const LinkPopup = props => {
10
9
  handleClose,
11
10
  linkData,
12
11
  handleInputChange,
13
- handleInsertLink,
14
- theme
12
+ handleInsertLink
15
13
  } = props;
16
- const classes = LinkPopupStyles(theme);
17
14
  return /*#__PURE__*/_jsxs(Dialog, {
18
15
  fullWidth: true,
19
16
  open: open,
@@ -47,16 +44,13 @@ const LinkPopup = props => {
47
44
  style: {
48
45
  paddingTop: "12px"
49
46
  },
50
- className: classes.titleTypo,
51
47
  children: /*#__PURE__*/_jsx(TextField, {
52
48
  size: "small",
53
49
  fullWidth: true,
54
50
  value: linkData?.name,
55
51
  name: "name",
56
52
  placeholder: "Link Title",
57
- onChange: handleInputChange,
58
- sx: classes.addLinkField,
59
- className: classes.addLinkField
53
+ onChange: handleInputChange
60
54
  })
61
55
  }), /*#__PURE__*/_jsx(Grid, {
62
56
  item: true,
@@ -70,9 +64,7 @@ const LinkPopup = props => {
70
64
  name: "url",
71
65
  value: linkData?.url,
72
66
  placeholder: "https://google.com",
73
- onChange: handleInputChange,
74
- sx: classes.addLinkField,
75
- className: classes.addLinkField
67
+ onChange: handleInputChange
76
68
  })
77
69
  }), /*#__PURE__*/_jsx(Grid, {
78
70
  item: true,
@@ -183,7 +183,7 @@ const Table = props => {
183
183
  children: [/*#__PURE__*/_jsx(TableComp, {
184
184
  sx: classes.table,
185
185
  style: {
186
- background: bgColor,
186
+ backgroundColor: bgColor,
187
187
  border: `1px solid ${borderColor}`,
188
188
  width: "auto"
189
189
  },
@@ -117,7 +117,7 @@ const TableCell = props => {
117
117
  className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
118
118
  style: {
119
119
  position: "relative",
120
- background: bgColor || entireBgColor,
120
+ backgroundColor: bgColor || entireBgColor,
121
121
  border: `3px solid ${cellBorderColor}`,
122
122
  ...(sizeProps || {})
123
123
  },
@@ -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, {
@@ -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 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 updateMarkData = newVal => {
22
22
  let upData = {
23
23
  ...getBreakPointsValue(val),
@@ -46,7 +46,13 @@ const TextSize = ({
46
46
  };
47
47
  const getSizeVal = () => {
48
48
  try {
49
- return parseInt(value);
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);
50
56
  } catch (err) {
51
57
  return "";
52
58
  }
@@ -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
  }
@@ -2,11 +2,8 @@ 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, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
5
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } 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";
10
7
  import { jsx as _jsx } from "react/jsx-runtime";
11
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
9
  function Label({
@@ -20,194 +17,93 @@ function Label({
20
17
  });
21
18
  }
22
19
  function DisplayHeaderLabel({
23
- type,
24
- isCustomized,
25
- isPara = false
20
+ type
26
21
  }) {
27
22
  return /*#__PURE__*/_jsxs("div", {
28
- children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
23
+ children: ["H", /*#__PURE__*/_jsx("sub", {
29
24
  children: type
30
25
  })]
31
26
  });
32
27
  }
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
- }),
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, {
171
72
  label: "L",
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
- }),
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, {
182
83
  label: "M",
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
- }),
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, {
193
94
  label: "S",
194
- group: "typography",
195
- value: "small"
196
- }];
197
- return typographyOptions;
198
- }
95
+ type: "Small"
96
+ }),
97
+ label: "S",
98
+ group: "typography",
99
+ value: "small"
100
+ }];
199
101
  function SelectTypography({
200
102
  editor,
201
103
  classes,
202
- closeMainPopup,
203
- type
104
+ closeMainPopup
204
105
  }) {
205
106
  const [size] = useWindowResize();
206
- const {
207
- theme
208
- } = useEditorTheme();
209
- const isTextCustomized = theme?.id ? isCustomized(editor) : false;
210
- const typographyOptions = getTypographyOptions(isTextCustomized);
211
107
  const updateMarkData = newVal => {
212
108
  const val = activeMark(editor, "fontSize");
213
109
  let upData = {
@@ -252,49 +148,26 @@ function SelectTypography({
252
148
  });
253
149
  }, [typographyOptions, activeMark, isBlockActive, editor]);
254
150
  const onChange = (format, option) => {
151
+ // add/reset block elements
152
+ toggleBlock(editor, format);
255
153
  if (option.type === "block") {
256
- themeFields.forEach(field => {
257
- Editor.removeMark(editor, field);
154
+ // reset old font size
155
+ addMarkData(editor, {
156
+ format: "fontSize",
157
+ value: {}
258
158
  });
259
-
260
- // add/reset block elements
261
- toggleBlock(editor, format);
262
159
  } else if (option.type === "mark") {
263
160
  const size = sizeMap[option.value] || "";
264
161
  const [sizeInNumber] = size.split("px");
265
162
  updateMarkData(Number(sizeInNumber));
266
163
  }
267
164
  };
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))
165
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
166
+ options: typographyOptions,
167
+ editor: editor,
168
+ onChange: onChange,
169
+ value: selectedBlock?.value || "headingOne",
170
+ classes: classes
298
171
  });
299
172
  }
300
173
  export default SelectTypography;
@@ -53,8 +53,7 @@ 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,
57
- type: "miniToolBar"
56
+ closeMainPopup: closeMainPopup
58
57
  }), /*#__PURE__*/_jsx("div", {
59
58
  className: "verticalLine"
60
59
  }), /*#__PURE__*/_jsx(SelectList, {