@flozy/editor 1.6.0 → 1.6.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +50 -7
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,34 +1,33 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { Editor, Element } from "slate";
3
- import { IconButton } from "@mui/material";
4
- import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
- import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
3
+ import { Box } from "@mui/material";
4
+ import { useSlateStatic, ReactEditor } from "slate-react";
6
5
  import useTableResize from "../../utils/customHooks/useTableResize";
7
6
  import { TableUtil } from "../../utils/table";
7
+ import TableStyles from "./Styles";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
11
  const Resizer = ({
12
- onMouseDown
12
+ classes,
13
+ onMouseDown,
14
+ height
13
15
  }) => {
14
16
  return /*#__PURE__*/_jsx(_Fragment, {
15
- children: /*#__PURE__*/_jsx(IconButton, {
17
+ children: /*#__PURE__*/_jsx(Box, {
18
+ component: "div",
16
19
  className: "cell-resizer",
17
20
  contentEditable: false,
18
21
  onPointerDown: onMouseDown,
22
+ sx: classes.cellResizer,
19
23
  style: {
20
- position: "absolute",
21
- right: "-8px",
22
- top: 0,
23
- background: "none",
24
- width: "15px",
25
- height: "100%"
26
- },
27
- children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
24
+ height: `${height}px`
25
+ }
28
26
  })
29
27
  });
30
28
  };
31
29
  const TableCell = props => {
30
+ const classes = TableStyles();
32
31
  const {
33
32
  element,
34
33
  attributes,
@@ -40,17 +39,18 @@ const TableCell = props => {
40
39
  } = customProps;
41
40
  const {
42
41
  bgColor,
43
- borderColor
42
+ borderColor,
43
+ entireBgColor
44
44
  } = element;
45
45
  const [parentDOM, setParentDOM] = useState(null);
46
46
  const editor = useSlateStatic();
47
- const selected = useSelected();
48
47
  const path = ReactEditor.findPath(editor, element);
49
48
  const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
50
49
  const [size, onMouseDown, resizing, onLoad] = useTableResize({
51
50
  parentDOM,
52
51
  size: element?.size
53
52
  });
53
+ const [tableSize, setTableSize] = useState({});
54
54
  const table = new TableUtil(editor);
55
55
  const tableProps = table.getTableProps();
56
56
  const [tableNode] = Editor.nodes(editor, {
@@ -63,16 +63,40 @@ const TableCell = props => {
63
63
  });
64
64
  const [parentProps] = tableNode || [{}];
65
65
  const [rowProps] = rowNode || [{}];
66
+ const tableDOM = table.getDOMNode(path, true);
67
+ const isCellSelected = table.isCellSelected(editor.selection);
68
+ const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
66
69
  useEffect(() => {
67
- if (editor && element) {
70
+ if (tableDOM) {
71
+ const {
72
+ width,
73
+ height
74
+ } = tableDOM.getBoundingClientRect();
75
+ const {
76
+ width: parentWidth
77
+ } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
78
+ const {
79
+ styleProps
80
+ } = tableProps || {};
81
+ const columns = styleProps ? styleProps["table.columns"] : 2;
82
+ setTableSize({
83
+ width,
84
+ height,
85
+ parentWidth,
86
+ cellWidth: parentWidth / columns
87
+ });
88
+ }
89
+ }, [tableDOM]);
90
+ useEffect(() => {
91
+ if (editor && element && tableSize) {
68
92
  const dom = ReactEditor.toDOMNode(editor, element);
69
93
  setParentDOM(dom);
70
94
  onLoad(element?.size || {
71
- width: 100,
95
+ width: tableSize?.cellWidth,
72
96
  height: 100
73
97
  });
74
98
  }
75
- }, []);
99
+ }, [tableSize]);
76
100
  useEffect(() => {
77
101
  if (!resizing && tableProps) {
78
102
  table.updateTableStyle({
@@ -81,20 +105,26 @@ const TableCell = props => {
81
105
  }
82
106
  }, [resizing]);
83
107
  const sizeProps = isHeader ? {
84
- width: size?.width || 100
108
+ width: size?.width || tableSize?.cellWidth
85
109
  } : {};
110
+ const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
86
111
  return /*#__PURE__*/_jsxs("td", {
87
112
  ...element.attr,
88
113
  ...attributes,
89
- className: "editor-table-cell",
114
+ className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
90
115
  style: {
91
116
  position: "relative",
92
- backgroundColor: bgColor,
93
- border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
117
+ backgroundColor: bgColor || entireBgColor,
118
+ border: `3px solid ${cellBorderColor}`,
94
119
  ...(sizeProps || {})
95
120
  },
96
- children: [children, selected && isHeader && !readOnly ? /*#__PURE__*/_jsx(Resizer, {
97
- onMouseDown: onMouseDown
121
+ children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
122
+ classes: classes,
123
+ onMouseDown: onMouseDown,
124
+ height: tableSize?.height
125
+ }) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
126
+ className: "selection-area-tc",
127
+ contentEditable: false
98
128
  }) : null]
99
129
  });
100
130
  };
@@ -1,16 +1,16 @@
1
1
  import React, { useRef, useState } from "react";
2
- import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography, Tooltip } from "@mui/material";
2
+ import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
3
3
  import Icon from "../../common/Icon";
4
4
  import { Transforms } from "slate";
5
5
  import { TableUtil } from "../../utils/table.js";
6
6
  import "./TableSelector.css";
7
7
  import CloseIcon from "@mui/icons-material/Close";
8
- // import commonStyle from "../../commonStyle";
9
- // import styled from "@emotion/styled";
8
+ import ToolbarIcon from "../../common/ToolbarIcon";
10
9
  import { jsx as _jsx } from "react/jsx-runtime";
11
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
11
  const TableSelector = ({
13
- editor
12
+ editor,
13
+ icoBtnType
14
14
  }) => {
15
15
  const tableOptionsRef = useRef();
16
16
  const [selection, setSelection] = useState();
@@ -41,18 +41,16 @@ const TableSelector = ({
41
41
  return /*#__PURE__*/_jsxs("div", {
42
42
  ref: tableOptionsRef,
43
43
  className: "popup-wrapper1 ",
44
- children: [/*#__PURE__*/_jsx(Tooltip, {
44
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
45
45
  title: "Table",
46
- arrow: true,
47
- children: /*#__PURE__*/_jsx(IconButton, {
48
- style: {
49
- border: showOptions ? "1px solid lightgray" : "none"
50
- },
51
- onClick: handleButtonClick,
52
- children: /*#__PURE__*/_jsx(Icon, {
53
- icon: "table"
54
- })
55
- })
46
+ style: {
47
+ border: showOptions ? "1px solid lightgray" : "none"
48
+ },
49
+ onClick: handleButtonClick,
50
+ icon: /*#__PURE__*/_jsx(Icon, {
51
+ icon: "table"
52
+ }),
53
+ icoBtnType: icoBtnType
56
54
  }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
57
55
  open: showOptions,
58
56
  className: `dialogComp tablePopup`,
@@ -1,13 +1,3 @@
1
1
  .editor-table-cell {
2
2
  /* min-width: 100px; */
3
- }
4
-
5
- .editor-table-cell .cell-resizer {
6
- width: 10px;
7
- height: 100%;
8
- position: absolute;
9
- right: 0;
10
- top: 0;
11
- visibility: visible;
12
- background-color: aqua;
13
3
  }
@@ -0,0 +1,33 @@
1
+ const TopBannerStyles = () => ({
2
+ root: {
3
+ "&:hover": {
4
+ "& .tb-toolbar": {
5
+ display: "block"
6
+ }
7
+ }
8
+ },
9
+ toolbar: {
10
+ position: "absolute",
11
+ width: "auto",
12
+ bottom: "8px",
13
+ left: 0,
14
+ right: 0,
15
+ margin: "auto",
16
+ display: "none",
17
+ "& button": {
18
+ background: "#FFF",
19
+ border: "1px solid #ccc",
20
+ borderRadius: "6px",
21
+ color: "#373232",
22
+ marginRight: "8px",
23
+ padding: "4px 8px",
24
+ textTransform: "capitalize",
25
+ fontSize: "14px",
26
+ "&:hover": {
27
+ background: "#ccc",
28
+ color: "#373232"
29
+ }
30
+ }
31
+ }
32
+ });
33
+ export default TopBannerStyles;
@@ -0,0 +1,106 @@
1
+ import React, { useState } from "react";
2
+ import { Box, Button } from "@mui/material";
3
+ import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
4
+ import ImageSelector from "../../common/ImageSelector/ImageSelector";
5
+ import TopBannerStyles from "./Styles";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
+ export const TopBannerToolbar = props => {
10
+ const {
11
+ classes,
12
+ customProps,
13
+ editor
14
+ } = props;
15
+ const [open, setOpen] = useState(false);
16
+ const handleClick = type => () => {
17
+ switch (type) {
18
+ case "change":
19
+ setOpen(true);
20
+ break;
21
+ case "remove":
22
+ removeTopBanner(editor);
23
+ break;
24
+ default:
25
+ return;
26
+ }
27
+ };
28
+ const onSelectImage = img => {
29
+ updateTopBanner(editor, {
30
+ url: img
31
+ });
32
+ handleClose();
33
+ };
34
+ const handleClose = () => {
35
+ setOpen(false);
36
+ };
37
+ return /*#__PURE__*/_jsxs(_Fragment, {
38
+ children: [/*#__PURE__*/_jsxs(Box, {
39
+ component: "div",
40
+ className: "tb-toolbar",
41
+ sx: classes.toolbar,
42
+ children: [/*#__PURE__*/_jsx(Button, {
43
+ onClick: handleClick("change"),
44
+ children: "Change Image"
45
+ }), /*#__PURE__*/_jsx(Button, {
46
+ onClick: handleClick("remove"),
47
+ children: "Remove"
48
+ })]
49
+ }), /*#__PURE__*/_jsx(ImageSelector, {
50
+ open: open,
51
+ onClose: handleClose,
52
+ customProps: customProps,
53
+ onSelectImage: onSelectImage
54
+ })]
55
+ });
56
+ };
57
+ const TopBanner = props => {
58
+ const {
59
+ attributes,
60
+ element,
61
+ children,
62
+ customProps
63
+ } = props;
64
+ const {
65
+ readOnly
66
+ } = customProps;
67
+ const {
68
+ url
69
+ } = element;
70
+ const classes = TopBannerStyles();
71
+ return /*#__PURE__*/_jsxs(Box, {
72
+ component: "div",
73
+ ...attributes,
74
+ style: {
75
+ position: "relative",
76
+ height: "320px",
77
+ textAlign: "center"
78
+ },
79
+ contentEditable: false,
80
+ sx: classes.root,
81
+ children: [/*#__PURE__*/_jsx("img", {
82
+ src: url,
83
+ alt: "Top Banner",
84
+ style: {
85
+ width: "90%",
86
+ height: "320px",
87
+ objectFit: "cover",
88
+ borderRadius: "12px",
89
+ margin: "0px 0px"
90
+ }
91
+ }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
92
+ ...props,
93
+ classes: classes
94
+ }) : null, /*#__PURE__*/_jsx("span", {
95
+ style: {
96
+ display: "none"
97
+ },
98
+ children: children
99
+ })]
100
+ });
101
+ };
102
+ TopBanner.defaultProps = {
103
+ attributes: {},
104
+ children: []
105
+ };
106
+ export default TopBanner;
@@ -0,0 +1,47 @@
1
+ import React, { useState } from "react";
2
+ import ToolbarIcon from "../../common/ToolbarIcon";
3
+ import Icon from "../../common/Icon";
4
+ import { insertTopBanner } from "../../utils/topBanner";
5
+ import ImageSelector from "../../common/ImageSelector/ImageSelector";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ const TopBannerButton = props => {
10
+ const {
11
+ editor,
12
+ icoBtnType,
13
+ customProps
14
+ } = props;
15
+ const [open, setOpen] = useState(false);
16
+ const onSelectImage = url => {
17
+ console.log(url);
18
+ if (url) {
19
+ insertTopBanner(editor, {
20
+ url
21
+ });
22
+ }
23
+ setOpen(false);
24
+ };
25
+ const handleClick = () => {
26
+ setOpen(true);
27
+ };
28
+ const handleClose = () => {
29
+ setOpen(false);
30
+ };
31
+ return /*#__PURE__*/_jsxs(_Fragment, {
32
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
33
+ title: "Top Banner",
34
+ onClick: handleClick,
35
+ icon: /*#__PURE__*/_jsx(Icon, {
36
+ icon: "topbanner"
37
+ }),
38
+ icoBtnType: icoBtnType
39
+ }), /*#__PURE__*/_jsx(ImageSelector, {
40
+ open: open,
41
+ onClose: handleClose,
42
+ customProps: customProps,
43
+ onSelectImage: onSelectImage
44
+ })]
45
+ });
46
+ };
47
+ export default TopBannerButton;
@@ -0,0 +1,50 @@
1
+ const editorStyles = ({
2
+ padHeight
3
+ }) => ({
4
+ root: {
5
+ display: "flex",
6
+ flexDirection: "column",
7
+ position: "relative",
8
+ padding: "0 8px"
9
+ },
10
+ slateWrapper: {
11
+ height: `${window.innerHeight - padHeight}px`,
12
+ overflow: "auto",
13
+ display: "flex",
14
+ flexDirection: "column",
15
+ backgroundColor: "#cccccc2b",
16
+ "& .scroll-area": {
17
+ display: "flex",
18
+ justifyContent: "center",
19
+ // minHeight: "100vh",
20
+ flex: 1
21
+ },
22
+ "& .editor-wrapper": {
23
+ maxWidth: "90%",
24
+ height: "100%",
25
+ backgroundColor: "#FFF",
26
+ overflow: "visible"
27
+ },
28
+ "& .el-toolbar": {
29
+ position: "absolute",
30
+ left: 0,
31
+ top: 0,
32
+ width: "fit-content",
33
+ "& button": {
34
+ border: "1px solid rgba(37, 99, 235, 0.32)",
35
+ borderRadius: "10px",
36
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
37
+ background: "#fff",
38
+ width: "36px",
39
+ height: "36px",
40
+ "&.mr": {
41
+ marginRight: "2px"
42
+ },
43
+ "& svg": {
44
+ stroke: "rgb(100, 116, 139);"
45
+ }
46
+ }
47
+ }
48
+ }
49
+ });
50
+ export default editorStyles;
@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const Dropdown = ({
7
7
  editor,
8
8
  format,
9
- options
9
+ options,
10
+ width
10
11
  }) => {
11
12
  const value = activeMark(editor, format);
12
13
  const changeMarkData = (event, format) => {
@@ -23,10 +24,11 @@ const Dropdown = ({
23
24
  onChange: e => changeMarkData(e, format),
24
25
  style: {
25
26
  fontFamily: fontFamilyMap[value],
26
- width: "100%",
27
+ width: width || "100%",
27
28
  height: "36px",
28
29
  overflow: "hidden",
29
- borderRadius: "10px"
30
+ borderRadius: "10px",
31
+ fontSize: "14px"
30
32
  },
31
33
  children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
32
34
  style: {
@@ -37,4 +39,7 @@ const Dropdown = ({
37
39
  }, index))
38
40
  });
39
41
  };
42
+ Dropdown.defaultProps = {
43
+ icon: null
44
+ };
40
45
  export default Dropdown;
@@ -4,6 +4,7 @@ import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { fontFamilyMap } from "../../utils/font";
5
5
  import Icon from "../../common/Icon";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const FontFamilyDropdown = ({
9
10
  editor,
@@ -18,26 +19,25 @@ const FontFamilyDropdown = ({
18
19
  const handleClose = () => {
19
20
  setAnchorEl(null);
20
21
  };
21
- return /*#__PURE__*/_jsxs(Tooltip, {
22
- title: format,
23
- arrow: true,
24
- style: {
25
- textTransform: 'capitalize'
26
- },
27
- children: [/*#__PURE__*/_jsx(IconButton, {
28
- "aria-label": "more",
29
- id: "long-button",
30
- "aria-controls": open ? 'long-menu' : undefined,
31
- "aria-expanded": open ? 'true' : undefined,
32
- "aria-haspopup": "true",
33
- onClick: handleClick,
34
- children: /*#__PURE__*/_jsx(Icon, {
35
- icon: format
22
+ return /*#__PURE__*/_jsxs(_Fragment, {
23
+ children: [/*#__PURE__*/_jsx(Tooltip, {
24
+ title: "Font Family",
25
+ arrow: true,
26
+ children: /*#__PURE__*/_jsx(IconButton, {
27
+ "aria-label": "more",
28
+ id: "long-button",
29
+ "aria-controls": open ? "long-menu" : undefined,
30
+ "aria-expanded": open ? "true" : undefined,
31
+ "aria-haspopup": "true",
32
+ onClick: handleClick,
33
+ children: /*#__PURE__*/_jsx(Icon, {
34
+ icon: format
35
+ })
36
36
  })
37
37
  }), /*#__PURE__*/_jsx(Menu, {
38
38
  id: "long-menu",
39
39
  MenuListProps: {
40
- 'aria-labelledby': 'long-button'
40
+ "aria-labelledby": "long-button"
41
41
  },
42
42
  anchorEl: anchorEl,
43
43
  open: open,
@@ -1,9 +1,9 @@
1
- import React, { useEffect, useRef, useState } from 'react';
2
- import Button from '../../common/Button';
3
- import Icon from '../../common/Icon';
4
- import { activeMark, addMarkData, isBlockActive } from '../../utils/SlateUtilityFunctions';
5
- import usePopup from '../../utils/customHooks/usePopup';
6
- import { sizeMap } from '../../utils/font';
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import Button from "../../common/Button";
3
+ import Icon from "../../common/Icon";
4
+ import { activeMark, addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
5
+ import usePopup from "../../utils/customHooks/usePopup";
6
+ import { sizeMap } from "../../utils/font";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const FontSize = ({
@@ -16,7 +16,7 @@ const FontSize = ({
16
16
  const [fontSize, setFontSize] = useState(16);
17
17
  const [showInput, setShowInput] = usePopup(urlInputRef);
18
18
  useEffect(() => {
19
- setFontSize(activeValue === 'normal' ? 16 : getSizeVal(activeValue));
19
+ setFontSize(activeValue === "normal" ? 16 : getSizeVal(activeValue));
20
20
  }, [activeValue]);
21
21
  const getSizeVal = value => {
22
22
  try {
@@ -61,8 +61,8 @@ const FontSize = ({
61
61
  className: `${isBlockActive(editor, format) && "btnActive"}`,
62
62
  active: isBlockActive(editor, format),
63
63
  style: {
64
- border: showInput ? '1px solid lightgray' : '',
65
- borderBottom: 'none'
64
+ border: showInput ? "1px solid lightgray" : "",
65
+ borderBottom: "none"
66
66
  },
67
67
  format: format,
68
68
  onClick: handleButtonClick,
@@ -73,9 +73,9 @@ const FontSize = ({
73
73
  }), showInput && /*#__PURE__*/_jsxs("div", {
74
74
  className: "fontSizeWrapper popup imagePopup",
75
75
  style: {
76
- display: 'flex',
77
- justifyContent: 'center',
78
- maxWidth: '120px'
76
+ display: "flex",
77
+ justifyContent: "center",
78
+ maxWidth: "120px"
79
79
  },
80
80
  children: [/*#__PURE__*/_jsx("span", {
81
81
  className: "controls",
@@ -89,11 +89,11 @@ const FontSize = ({
89
89
  value: fontSize,
90
90
  type: "text",
91
91
  style: {
92
- border: 'unset',
93
- outline: 'unset',
94
- marginBottom: 'unset',
95
- maxWidth: '36px',
96
- overflow: 'hidden'
92
+ border: "unset",
93
+ outline: "unset",
94
+ marginBottom: "unset",
95
+ maxWidth: "36px",
96
+ overflow: "hidden"
97
97
  },
98
98
  onChange: onInputChange,
99
99
  disabled: !activeValue && activeValue !== 0
@@ -8,7 +8,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  const TextSize = ({
10
10
  editor,
11
- format
11
+ format,
12
+ fullWidth
12
13
  }) => {
13
14
  const value = activeMark(editor, format);
14
15
  const onChangeSize = e => {
@@ -49,11 +50,17 @@ const TextSize = ({
49
50
  size: "small",
50
51
  inputProps: {
51
52
  style: {
52
- width: "30px",
53
- textAlign: "center"
53
+ width: fullWidth ? "100%" : "30px",
54
+ textAlign: "center",
55
+ height: "19px",
56
+ fontSize: "14px"
54
57
  }
55
58
  },
59
+ fullWidth: fullWidth,
56
60
  InputProps: {
61
+ style: {
62
+ borderRadius: "8px"
63
+ },
57
64
  endAdornment: /*#__PURE__*/_jsxs("div", {
58
65
  className: "textFontArrows",
59
66
  children: [/*#__PURE__*/_jsx(IconButton, {
@@ -70,4 +77,7 @@ const TextSize = ({
70
77
  })
71
78
  });
72
79
  };
80
+ TextSize.defaultProps = {
81
+ fullWidth: false
82
+ };
73
83
  export default TextSize;
@@ -5,5 +5,6 @@ import Autocomplete from "./Autocomplete";
5
5
  import Text from "./Text";
6
6
  import TextSize from "./TextSize";
7
7
  import FontFamilyDropdown from "./FontFamilyDropdown";
8
- import FontSize from './FontSize';
9
- export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize };
8
+ import FontSize from "./FontSize";
9
+ import AccordionButton from "../../Elements/Accordion/AccordionButton";
10
+ export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize, AccordionButton };