@flozy/editor 3.7.1 → 3.7.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (104) hide show
  1. package/dist/Editor/ChatEditor.js +211 -0
  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 +34 -18
  8. package/dist/Editor/Elements/ChipText/ChipText.js +3 -3
  9. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  12. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  13. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
  14. package/dist/Editor/Elements/Embed/Image.js +28 -20
  15. package/dist/Editor/Elements/Embed/Video.js +15 -11
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
  17. package/dist/Editor/Elements/Emoji/EmojiPicker.js +16 -0
  18. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  19. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  20. package/dist/Editor/Elements/Grid/Grid.js +3 -1
  21. package/dist/Editor/Elements/Grid/GridItem.js +4 -2
  22. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +2 -3
  23. package/dist/Editor/Elements/Link/Link.js +6 -1
  24. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  25. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  26. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  27. package/dist/Editor/Elements/List/CheckList.js +6 -2
  28. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  29. package/dist/Editor/MiniEditor.js +3 -1
  30. package/dist/Editor/Styles/EditorStyles.js +3 -2
  31. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  32. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  33. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  34. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  35. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  36. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  37. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  38. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  39. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  40. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  41. package/dist/Editor/Toolbar/PopupTool/index.js +9 -2
  42. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  43. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  44. package/dist/Editor/common/ColorPickerButton.js +25 -9
  45. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  46. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  47. package/dist/Editor/common/CustomDialog/index.js +94 -0
  48. package/dist/Editor/common/CustomDialog/style.js +67 -0
  49. package/dist/Editor/common/CustomSelect.js +33 -0
  50. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  51. package/dist/Editor/common/EditorCmds.js +35 -0
  52. package/dist/Editor/common/Icon.js +30 -2
  53. package/dist/Editor/common/MUIIcon/index.js +48 -0
  54. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +5 -2
  55. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  56. package/dist/Editor/common/Shorthands/elements.js +54 -0
  57. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  58. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  59. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  60. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  62. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +12 -28
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js +13 -0
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/mui_filled_icons.js +2 -0
  67. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  68. package/dist/Editor/common/StyleBuilder/formStyle.js +25 -26
  69. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  70. package/dist/Editor/helper/index.js +15 -0
  71. package/dist/Editor/helper/theme.js +190 -4
  72. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  73. package/dist/Editor/hooks/useMouseMove.js +15 -6
  74. package/dist/Editor/plugins/withEmbeds.js +1 -1
  75. package/dist/Editor/plugins/withHTML.js +47 -5
  76. package/dist/Editor/plugins/withLayout.js +15 -10
  77. package/dist/Editor/plugins/withTable.js +2 -2
  78. package/dist/Editor/theme/ThemeList.js +50 -173
  79. package/dist/Editor/theme/index.js +144 -0
  80. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  81. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  82. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  83. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  84. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  85. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  86. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  87. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  88. package/dist/Editor/themeSettings/icons.js +60 -0
  89. package/dist/Editor/themeSettings/index.js +320 -0
  90. package/dist/Editor/themeSettings/style.js +152 -0
  91. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  92. package/dist/Editor/themeSettingsAI/index.js +356 -0
  93. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  94. package/dist/Editor/themeSettingsAI/style.js +247 -0
  95. package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
  96. package/dist/Editor/utils/button.js +1 -17
  97. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +361 -0
  98. package/dist/Editor/utils/events.js +11 -4
  99. package/dist/Editor/utils/font.js +40 -37
  100. package/dist/Editor/utils/form.js +2 -2
  101. package/dist/Editor/utils/helper.js +71 -12
  102. package/dist/Editor/utils/serializeToHTML.js +25 -13
  103. package/dist/index.js +5 -1
  104. package/package.json +4 -4
@@ -0,0 +1,16 @@
1
+ import data from "@emoji-mart/data";
2
+ import Picker from "@emoji-mart/react";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { Fragment as _Fragment } from "react/jsx-runtime";
5
+ const EmojiPicker = props => {
6
+ const {
7
+ onEmojiSelect
8
+ } = props;
9
+ return /*#__PURE__*/_jsx(_Fragment, {
10
+ children: /*#__PURE__*/_jsx(Picker, {
11
+ data: data,
12
+ onEmojiSelect: onEmojiSelect
13
+ })
14
+ });
15
+ };
16
+ export default EmojiPicker;
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
71
71
  children: [/*#__PURE__*/_jsx(Grid, {
72
72
  item: true,
73
73
  sx: classes.radioBtn,
74
- children: /*#__PURE__*/_jsx(RadioGroup, {
74
+ children: /*#__PURE__*/_jsxs(RadioGroup, {
75
75
  name: "set timing",
76
76
  value: schedule,
77
77
  defaultValue: 1,
78
- children: /*#__PURE__*/_jsx(FormControlLabel, {
78
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
79
79
  value: "immediately",
80
80
  label: "Immediately",
81
81
  onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
84
84
  control: /*#__PURE__*/_jsx(Radio, {
85
85
  size: "small"
86
86
  })
87
- })
87
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
88
+ value: "after",
89
+ label: "After",
90
+ onChange: () => {
91
+ setSchedule("after");
92
+ },
93
+ control: /*#__PURE__*/_jsx(Radio, {
94
+ size: "small"
95
+ })
96
+ })]
88
97
  })
89
98
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
90
99
  item: true,
@@ -39,7 +39,8 @@ const UserInputs = props => {
39
39
  fontStyleOptions: ['underline'],
40
40
  hideLink: true,
41
41
  hideTextColor: true
42
- }
42
+ },
43
+ theme: theme
43
44
  })
44
45
  })
45
46
  });
@@ -15,6 +15,7 @@ import { gridItem } from "../../utils/gridItem";
15
15
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
16
16
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
17
17
  import useWindowResize from "../../hooks/useWindowResize";
18
+ import { useTheme } from "@emotion/react";
18
19
  import { jsx as _jsx } from "react/jsx-runtime";
19
20
  import { Fragment as _Fragment } from "react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -75,6 +76,7 @@ const GridToolBar = ({
75
76
  }) : null;
76
77
  };
77
78
  const Grid = props => {
79
+ const theme = useTheme();
78
80
  const {
79
81
  attributes,
80
82
  children,
@@ -277,7 +279,7 @@ const Grid = props => {
277
279
  } = getBreakPointsValue(borderRadius, size?.device) || {};
278
280
  return /*#__PURE__*/_jsxs(GridContainer, {
279
281
  container: true,
280
- className: `grid-container ${grid} has-hover element-root`,
282
+ className: `grid-container ${grid} has-hover element-root dpath`,
281
283
  ...attributes,
282
284
  ...sectionId,
283
285
  sx: {
@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
9
9
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
10
10
  import { isEmptyNode } from "../../utils/helper";
11
+ import { useTheme } from "@emotion/react";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const GridItemToolbar = ({
@@ -34,6 +35,7 @@ const GridItemToolbar = ({
34
35
  }) : null;
35
36
  };
36
37
  const GridItem = props => {
38
+ const theme = useTheme();
37
39
  const {
38
40
  attributes,
39
41
  children,
@@ -105,7 +107,7 @@ const GridItem = props => {
105
107
  return /*#__PURE__*/_jsxs(Item, {
106
108
  item: true,
107
109
  component: "div",
108
- className: `grid-item element-root gi-top-wrpr`,
110
+ className: `grid-item element-root gi-top-wrpr dpath`,
109
111
  ...attributes,
110
112
  sx: {
111
113
  width: {
@@ -119,7 +121,7 @@ const GridItem = props => {
119
121
  xs: xsHidden ? "none" : "flex"
120
122
  },
121
123
  flexDirection: flexDirection || "column",
122
- background: bgColor || "transparent",
124
+ background: bgColor,
123
125
  borderColor: getBorderColor(),
124
126
  borderWidth: borderWidth || "1px",
125
127
  borderRadius: {
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import * as fIcons from "@mui/icons-material";
3
2
  import { Box } from "@mui/material";
3
+ import Check from "@mui/icons-material/Check";
4
4
  import { getBreakPointsValue } from "../../helper/theme";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +23,6 @@ const InlineIcon = props => {
23
23
  right,
24
24
  bottom
25
25
  } = bannerSpacing || {};
26
- const BtnIcon = fIcons["Check"];
27
26
  return /*#__PURE__*/_jsxs(Box, {
28
27
  ...attributes,
29
28
  className: "editor-icon-text",
@@ -42,7 +41,7 @@ const InlineIcon = props => {
42
41
  background: bgColor || "#CCC",
43
42
  color: textColor
44
43
  },
45
- children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
44
+ children: [/*#__PURE__*/_jsx(Check, {}), /*#__PURE__*/_jsx("div", {
46
45
  contentEditable: true,
47
46
  children: children
48
47
  })]
@@ -9,6 +9,7 @@ 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";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const Link = props => {
@@ -29,6 +30,9 @@ const Link = props => {
29
30
  const path = ReactEditor.findPath(editor, element);
30
31
  const urlPath = element.url || element.href;
31
32
  const absLink = absoluteLink(urlPath);
33
+ const {
34
+ theme
35
+ } = useEditorContext();
32
36
  const updateLink = () => {
33
37
  Transforms.setNodes(editor, {
34
38
  href: linkData?.url,
@@ -107,7 +111,8 @@ const Link = props => {
107
111
  linkData: linkData,
108
112
  handleClose: handleClose,
109
113
  handleInputChange: handleInputChange,
110
- handleInsertLink: updateLink
114
+ handleInsertLink: updateLink,
115
+ theme: theme
111
116
  })]
112
117
  });
113
118
  };
@@ -9,7 +9,8 @@ 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
12
+ editor,
13
+ theme
13
14
  } = props;
14
15
  const linkInputRef = useRef(null);
15
16
  const [showInput, setShowInput] = useState(false);
@@ -77,7 +78,8 @@ const LinkButton = props => {
77
78
  linkData: linkData,
78
79
  handleClose: handleClose,
79
80
  handleInputChange: handleInputChange,
80
- handleInsertLink: handleInsertLink
81
+ handleInsertLink: handleInsertLink,
82
+ theme: theme
81
83
  })]
82
84
  });
83
85
  };
@@ -1,6 +1,7 @@
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";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const LinkPopup = props => {
@@ -9,8 +10,10 @@ const LinkPopup = props => {
9
10
  handleClose,
10
11
  linkData,
11
12
  handleInputChange,
12
- handleInsertLink
13
+ handleInsertLink,
14
+ theme
13
15
  } = props;
16
+ const classes = LinkPopupStyles(theme);
14
17
  return /*#__PURE__*/_jsxs(Dialog, {
15
18
  fullWidth: true,
16
19
  open: open,
@@ -44,13 +47,16 @@ const LinkPopup = props => {
44
47
  style: {
45
48
  paddingTop: "12px"
46
49
  },
50
+ className: classes.titleTypo,
47
51
  children: /*#__PURE__*/_jsx(TextField, {
48
52
  size: "small",
49
53
  fullWidth: true,
50
54
  value: linkData?.name,
51
55
  name: "name",
52
56
  placeholder: "Link Title",
53
- onChange: handleInputChange
57
+ onChange: handleInputChange,
58
+ sx: classes.addLinkField,
59
+ className: classes.addLinkField
54
60
  })
55
61
  }), /*#__PURE__*/_jsx(Grid, {
56
62
  item: true,
@@ -64,7 +70,9 @@ const LinkPopup = props => {
64
70
  name: "url",
65
71
  value: linkData?.url,
66
72
  placeholder: "https://google.com",
67
- onChange: handleInputChange
73
+ onChange: handleInputChange,
74
+ sx: classes.addLinkField,
75
+ className: classes.addLinkField
68
76
  })
69
77
  }), /*#__PURE__*/_jsx(Grid, {
70
78
  item: true,
@@ -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;
@@ -11,7 +11,9 @@ const CheckList = ({
11
11
  attributes,
12
12
  children,
13
13
  element,
14
- isEmpty
14
+ isEmpty,
15
+ className,
16
+ style
15
17
  }) => {
16
18
  const editor = useSlateStatic();
17
19
  const readOnly = useReadOnly();
@@ -30,12 +32,14 @@ const CheckList = ({
30
32
  const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
31
33
  return /*#__PURE__*/_jsx(_Fragment, {
32
34
  children: /*#__PURE__*/_jsxs("div", {
35
+ className: className || "",
33
36
  ...attributes,
34
37
  style: {
35
38
  textAlign: element.alignment || "left",
36
39
  display: "flex",
37
40
  justifyContent: "center",
38
- alignItems: "center"
41
+ alignItems: "center",
42
+ ...(style || {})
39
43
  },
40
44
  children: [/*#__PURE__*/_jsxs("div", {
41
45
  contentEditable: false,
@@ -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, {
@@ -188,6 +188,7 @@ const editorStyles = ({
188
188
  }
189
189
  },
190
190
  "& .checkbox-edit": {
191
+ alignSelf: "flex-start",
191
192
  "& .MuiFormControlLabel-root": {
192
193
  marginRight: "0px"
193
194
  },
@@ -212,7 +213,7 @@ const editorStyles = ({
212
213
  "& svg": {
213
214
  width: "17px",
214
215
  height: "18px",
215
- marginTop: '-1px'
216
+ marginTop: "-1px"
216
217
  }
217
218
  }
218
219
  },
@@ -273,7 +274,7 @@ const editorStyles = ({
273
274
  },
274
275
  cardsTypo: {
275
276
  color: theme?.palette?.editor?.textColor,
276
- fontSize: '14px !important'
277
+ fontSize: "14px !important"
277
278
  }
278
279
  });
279
280
  export default editorStyles;
@@ -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
  }