@flozy/editor 1.0.8 → 1.0.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CollaborativeEditor.js +6 -4
- package/dist/Editor/CommonEditor.js +43 -31
- package/dist/Editor/Elements/CodeToText/CodeToText.js +44 -33
- package/dist/Editor/Elements/CodeToText/CodeToTextButton.js +13 -8
- package/dist/Editor/Elements/CodeToText/HtmlCode.js +13 -8
- package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +14 -8
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +61 -53
- package/dist/Editor/Elements/Embed/Embed.js +62 -49
- package/dist/Editor/Elements/Embed/Image.js +30 -24
- package/dist/Editor/Elements/Embed/Video.js +45 -38
- package/dist/Editor/Elements/Equation/Equation.js +17 -10
- package/dist/Editor/Elements/Equation/EquationButton.js +37 -28
- package/dist/Editor/Elements/Grid/Grid.js +14 -9
- package/dist/Editor/Elements/Grid/GridButton.js +5 -3
- package/dist/Editor/Elements/Grid/GridItem.js +18 -13
- package/dist/Editor/Elements/ID/Id.js +30 -24
- package/dist/Editor/Elements/Link/Link.js +26 -19
- package/dist/Editor/Elements/Link/LinkButton.js +45 -35
- package/dist/Editor/Elements/Mentions/Mentions.js +6 -4
- package/dist/Editor/Elements/NewLine/NewLineButton.js +5 -3
- package/dist/Editor/Elements/Table/Table.js +10 -3
- package/dist/Editor/Elements/Table/TableSelector.js +41 -33
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +18 -13
- package/dist/Editor/RemoteCursorOverlay/Overlay.js +35 -31
- package/dist/Editor/Toolbar/Toolbar.js +90 -94
- package/dist/Editor/common/Button.js +7 -6
- package/dist/Editor/common/Icon.js +34 -33
- package/dist/Editor/common/MentionsPopup.js +20 -18
- package/dist/Editor/utils/SlateUtilityFunctions.js +132 -52
- package/package.json +2 -2
@@ -1,6 +1,6 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React from "react";
|
3
2
|
import { useSelected, useFocused } from "slate-react";
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
4
|
const Mentions = ({
|
5
5
|
attributes,
|
6
6
|
children,
|
@@ -25,10 +25,12 @@ const Mentions = ({
|
|
25
25
|
if (element.children[0].italic) {
|
26
26
|
style.fontStyle = "italic";
|
27
27
|
}
|
28
|
-
return /*#__PURE__*/
|
28
|
+
return /*#__PURE__*/_jsxs("span", {
|
29
|
+
...attributes,
|
29
30
|
contentEditable: false,
|
30
31
|
"data-cy": `mention-${element.character.replace(" ", "-")}`,
|
31
|
-
style: style
|
32
|
-
|
32
|
+
style: style,
|
33
|
+
children: ["@", element.character, children]
|
34
|
+
});
|
33
35
|
};
|
34
36
|
export default Mentions;
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
2
2
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
3
3
|
import { Transforms } from "slate";
|
4
4
|
import { useSlateStatic } from "slate-react";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const NewLineButton = props => {
|
6
7
|
const editor = useSlateStatic();
|
7
8
|
const onAddNewLine = () => {
|
@@ -14,9 +15,10 @@ const NewLineButton = props => {
|
|
14
15
|
at: [editor.children.length]
|
15
16
|
});
|
16
17
|
};
|
17
|
-
return /*#__PURE__*/
|
18
|
+
return /*#__PURE__*/_jsx("button", {
|
18
19
|
title: "New Line",
|
19
|
-
onClick: onAddNewLine
|
20
|
-
|
20
|
+
onClick: onAddNewLine,
|
21
|
+
children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
|
22
|
+
});
|
21
23
|
};
|
22
24
|
export default NewLineButton;
|
@@ -1,15 +1,22 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
3
|
const Table = ({
|
3
4
|
attributes,
|
4
5
|
children,
|
5
6
|
element
|
6
7
|
}) => {
|
7
|
-
return /*#__PURE__*/
|
8
|
+
return /*#__PURE__*/_jsx("div", {
|
8
9
|
style: {
|
9
10
|
minWidth: "100%",
|
10
11
|
maxWidth: "100%",
|
11
12
|
overflow: "auto"
|
12
|
-
}
|
13
|
-
|
13
|
+
},
|
14
|
+
children: /*#__PURE__*/_jsx("table", {
|
15
|
+
children: /*#__PURE__*/_jsx("tbody", {
|
16
|
+
...attributes,
|
17
|
+
children: children
|
18
|
+
})
|
19
|
+
})
|
20
|
+
});
|
14
21
|
};
|
15
22
|
export default Table;
|
@@ -4,6 +4,8 @@ import usePopup from '../../utils/customHooks/usePopup';
|
|
4
4
|
import { Transforms } from 'slate';
|
5
5
|
import { TableUtil } from '../../utils/table.js';
|
6
6
|
import './TableSelector.css';
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
9
|
const TableSelector = ({
|
8
10
|
editor
|
9
11
|
}) => {
|
@@ -55,39 +57,45 @@ const TableSelector = ({
|
|
55
57
|
table.insertTable(tableData.row, tableData.column);
|
56
58
|
setShowOptions(false);
|
57
59
|
};
|
58
|
-
return /*#__PURE__*/
|
60
|
+
return /*#__PURE__*/_jsxs("div", {
|
59
61
|
ref: tableOptionsRef,
|
60
|
-
className: "popup-wrapper"
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
62
|
+
className: "popup-wrapper",
|
63
|
+
children: [/*#__PURE__*/_jsx("button", {
|
64
|
+
style: {
|
65
|
+
border: showOptions ? '1px solid lightgray' : 'none'
|
66
|
+
},
|
67
|
+
title: "table",
|
68
|
+
onClick: handleButtonClick,
|
69
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
70
|
+
icon: "table"
|
71
|
+
})
|
72
|
+
}), showOptions && /*#__PURE__*/_jsxs("div", {
|
73
|
+
className: "popup",
|
74
|
+
children: [/*#__PURE__*/_jsx("span", {
|
75
|
+
style: {
|
76
|
+
fontSize: '0.85em'
|
77
|
+
},
|
78
|
+
children: /*#__PURE__*/_jsx("i", {
|
79
|
+
children: `Insert a ${tableData.row >= 1 ? `${tableData.row} x ${tableData.column}` : ''} table`
|
80
|
+
})
|
81
|
+
}), /*#__PURE__*/_jsx("div", {
|
82
|
+
className: "table-input",
|
83
|
+
children: tableInput.map((grp, row) => grp.map(({
|
84
|
+
column,
|
85
|
+
bg
|
86
|
+
}, col) => /*#__PURE__*/_jsx("div", {
|
87
|
+
onClick: () => handleInsert(),
|
88
|
+
onMouseOver: () => setTableData({
|
89
|
+
row: row + 1,
|
90
|
+
column: column + 1
|
91
|
+
}),
|
92
|
+
className: "table-unit",
|
93
|
+
style: {
|
94
|
+
border: `1px solid ${bg}`
|
95
|
+
}
|
96
|
+
}, row + col)))
|
97
|
+
})]
|
98
|
+
})]
|
99
|
+
});
|
92
100
|
};
|
93
101
|
export default TableSelector;
|
@@ -5,6 +5,8 @@ import "./styles.css";
|
|
5
5
|
import { TableUtil } from "../../utils/table";
|
6
6
|
import { Transforms } from "slate";
|
7
7
|
import { ReactEditor } from "slate-react";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
10
|
const TableContextMenu = props => {
|
9
11
|
const {
|
10
12
|
editor
|
@@ -70,22 +72,25 @@ const TableContextMenu = props => {
|
|
70
72
|
}
|
71
73
|
ReactEditor.focus(editor);
|
72
74
|
};
|
73
|
-
return showMenu && /*#__PURE__*/
|
75
|
+
return showMenu && /*#__PURE__*/_jsx("div", {
|
74
76
|
className: "contextMenu",
|
75
77
|
style: {
|
76
78
|
top,
|
77
79
|
left
|
78
|
-
}
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
80
|
+
},
|
81
|
+
children: menu.map(({
|
82
|
+
icon,
|
83
|
+
text,
|
84
|
+
action
|
85
|
+
}, index) => /*#__PURE__*/_jsxs("div", {
|
86
|
+
className: "menuOption",
|
87
|
+
onClick: () => handleInsert(action),
|
88
|
+
children: [/*#__PURE__*/_jsx(Icon, {
|
89
|
+
icon: icon
|
90
|
+
}), /*#__PURE__*/_jsx("span", {
|
91
|
+
children: text
|
92
|
+
})]
|
93
|
+
}, index))
|
94
|
+
});
|
90
95
|
};
|
91
96
|
export default TableContextMenu;
|
@@ -1,6 +1,7 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React, { useRef } from "react";
|
3
2
|
import { useRemoteCursorOverlayPositions } from "@slate-yjs/react";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
5
|
function Caret({
|
5
6
|
caretPosition,
|
6
7
|
data
|
@@ -13,21 +14,23 @@ function Caret({
|
|
13
14
|
transform: "translateY(-100%)",
|
14
15
|
background: data?.color || "#d33d3db5"
|
15
16
|
};
|
16
|
-
return /*#__PURE__*/
|
17
|
+
return /*#__PURE__*/_jsx("div", {
|
17
18
|
style: {
|
18
19
|
...caretStyle,
|
19
20
|
position: "absolute",
|
20
21
|
width: "0.5px"
|
21
|
-
}
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
22
|
+
},
|
23
|
+
children: /*#__PURE__*/_jsx("div", {
|
24
|
+
style: {
|
25
|
+
position: "absolute",
|
26
|
+
color: "#FFF",
|
27
|
+
whiteSpace: "nowrap",
|
28
|
+
top: 0,
|
29
|
+
...labelStyle
|
30
|
+
},
|
31
|
+
children: data?.name
|
32
|
+
})
|
33
|
+
});
|
31
34
|
}
|
32
35
|
function RemoteSelection({
|
33
36
|
data,
|
@@ -40,20 +43,20 @@ function RemoteSelection({
|
|
40
43
|
const selectionStyle = {
|
41
44
|
backgroundColor: data.color
|
42
45
|
};
|
43
|
-
return /*#__PURE__*/
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
})
|
46
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
47
|
+
children: [selectionRects.map((position, i) => /*#__PURE__*/_jsx("div", {
|
48
|
+
style: {
|
49
|
+
...selectionStyle,
|
50
|
+
...position,
|
51
|
+
position: "absolute",
|
52
|
+
pointerEvents: "none"
|
53
|
+
}
|
54
|
+
// eslint-disable-next-line react/no-array-index-key
|
55
|
+
}, i)), caretPosition && /*#__PURE__*/_jsx(Caret, {
|
56
|
+
caretPosition: caretPosition,
|
57
|
+
data: data
|
58
|
+
})]
|
59
|
+
});
|
57
60
|
}
|
58
61
|
export function RemoteCursorOverlay({
|
59
62
|
className,
|
@@ -63,13 +66,14 @@ export function RemoteCursorOverlay({
|
|
63
66
|
const [cursors] = useRemoteCursorOverlayPositions({
|
64
67
|
containerRef
|
65
68
|
});
|
66
|
-
return /*#__PURE__*/
|
69
|
+
return /*#__PURE__*/_jsxs("div", {
|
67
70
|
className: `${className}`,
|
68
71
|
style: {
|
69
72
|
position: "relative"
|
70
73
|
},
|
71
|
-
ref: containerRef
|
72
|
-
|
73
|
-
|
74
|
-
|
74
|
+
ref: containerRef,
|
75
|
+
children: [children, cursors.map(cursor => /*#__PURE__*/_jsx(RemoteSelection, {
|
76
|
+
...cursor
|
77
|
+
}, cursor.clientId))]
|
78
|
+
});
|
75
79
|
}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React, { useEffect, useState } from "react";
|
3
2
|
import { useSlate } from "slate-react";
|
4
3
|
import Button from "../common/Button";
|
@@ -18,6 +17,8 @@ import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
|
|
18
17
|
import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
|
19
18
|
import GridButton from "../Elements/Grid/GridButton";
|
20
19
|
import NewLineButton from "../Elements/NewLine/NewLineButton";
|
20
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
21
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
22
|
const Toolbar = props => {
|
22
23
|
const {
|
23
24
|
handleCodeToText
|
@@ -40,42 +41,45 @@ const Toolbar = props => {
|
|
40
41
|
const BlockButton = ({
|
41
42
|
format
|
42
43
|
}) => {
|
43
|
-
return /*#__PURE__*/
|
44
|
+
return /*#__PURE__*/_jsx(Button, {
|
44
45
|
active: isBlockActive(editor, format),
|
45
46
|
format: format,
|
46
47
|
onMouseDown: e => {
|
47
48
|
e.preventDefault();
|
48
49
|
toggleBlock(editor, format);
|
49
|
-
}
|
50
|
-
|
51
|
-
|
52
|
-
|
50
|
+
},
|
51
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
52
|
+
icon: format
|
53
|
+
})
|
54
|
+
});
|
53
55
|
};
|
54
56
|
const MarkButton = ({
|
55
57
|
format
|
56
58
|
}) => {
|
57
|
-
return /*#__PURE__*/
|
59
|
+
return /*#__PURE__*/_jsx(Button, {
|
58
60
|
active: isMarkActive(editor, format),
|
59
61
|
format: format,
|
60
62
|
onMouseDown: e => {
|
61
63
|
e.preventDefault();
|
62
64
|
toggleMark(editor, format);
|
63
|
-
}
|
64
|
-
|
65
|
-
|
66
|
-
|
65
|
+
},
|
66
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
67
|
+
icon: format
|
68
|
+
})
|
69
|
+
});
|
67
70
|
};
|
68
71
|
const Dropdown = ({
|
69
72
|
format,
|
70
73
|
options
|
71
74
|
}) => {
|
72
|
-
return /*#__PURE__*/
|
75
|
+
return /*#__PURE__*/_jsx("select", {
|
73
76
|
value: activeMark(editor, format),
|
74
|
-
onChange: e => changeMarkData(e, format)
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
77
|
+
onChange: e => changeMarkData(e, format),
|
78
|
+
children: options.map((item, index) => /*#__PURE__*/_jsx("option", {
|
79
|
+
value: item.value,
|
80
|
+
children: item.text
|
81
|
+
}, index))
|
82
|
+
});
|
79
83
|
};
|
80
84
|
const changeMarkData = (event, format) => {
|
81
85
|
event.preventDefault();
|
@@ -85,82 +89,74 @@ const Toolbar = props => {
|
|
85
89
|
value
|
86
90
|
});
|
87
91
|
};
|
88
|
-
return /*#__PURE__*/
|
89
|
-
className: "toolbar"
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
return null;
|
158
|
-
}
|
159
|
-
}))), /*#__PURE__*/React.createElement(TableContextMenu, {
|
160
|
-
editor: editor
|
161
|
-
}), /*#__PURE__*/React.createElement(HtmlContextMenu, {
|
162
|
-
editor: editor,
|
163
|
-
handleCodeToText: handleCodeToText
|
164
|
-
}));
|
92
|
+
return /*#__PURE__*/_jsxs("div", {
|
93
|
+
className: "toolbar",
|
94
|
+
children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
|
95
|
+
className: "toolbar-grp",
|
96
|
+
children: group.map((element, gi) => {
|
97
|
+
switch (element.type) {
|
98
|
+
case "block":
|
99
|
+
return /*#__PURE__*/_jsx(BlockButton, {
|
100
|
+
...element
|
101
|
+
}, element.id);
|
102
|
+
case "mark":
|
103
|
+
return /*#__PURE__*/_jsx(MarkButton, {
|
104
|
+
...element
|
105
|
+
}, element.id);
|
106
|
+
case "dropdown":
|
107
|
+
return /*#__PURE__*/_jsx(Dropdown, {
|
108
|
+
...element
|
109
|
+
}, element.id);
|
110
|
+
case "link":
|
111
|
+
return /*#__PURE__*/_jsx(LinkButton, {
|
112
|
+
active: isBlockActive(editor, "link"),
|
113
|
+
editor: editor
|
114
|
+
}, element.id);
|
115
|
+
case "embed":
|
116
|
+
return /*#__PURE__*/_jsx(Embed, {
|
117
|
+
format: element.format,
|
118
|
+
editor: editor
|
119
|
+
}, element.id);
|
120
|
+
case "color-picker":
|
121
|
+
return /*#__PURE__*/_jsx(ColorPicker, {
|
122
|
+
activeMark: activeMark,
|
123
|
+
format: element.format,
|
124
|
+
editor: editor
|
125
|
+
}, element.id);
|
126
|
+
case "table":
|
127
|
+
return /*#__PURE__*/_jsx(TableSelector, {
|
128
|
+
editor: editor
|
129
|
+
}, element.id);
|
130
|
+
case "id":
|
131
|
+
return /*#__PURE__*/_jsx(Id, {
|
132
|
+
editor: editor
|
133
|
+
}, `gi_id_${gi}`);
|
134
|
+
case "equation":
|
135
|
+
return /*#__PURE__*/_jsx(EquationButton, {
|
136
|
+
editor: editor
|
137
|
+
}, `gi_equation_${gi}`);
|
138
|
+
case "codeToText":
|
139
|
+
return /*#__PURE__*/_jsx(CodeToTextButton, {
|
140
|
+
handleButtonClick: handleCodeToText
|
141
|
+
}, `gi_codeToText_${gi}`);
|
142
|
+
case "grid":
|
143
|
+
return /*#__PURE__*/_jsx(GridButton, {
|
144
|
+
editor: editor
|
145
|
+
}, element.id);
|
146
|
+
case "newLine":
|
147
|
+
return /*#__PURE__*/_jsx(NewLineButton, {
|
148
|
+
editor: editor
|
149
|
+
}, element.id);
|
150
|
+
default:
|
151
|
+
return null;
|
152
|
+
}
|
153
|
+
})
|
154
|
+
}, index)), /*#__PURE__*/_jsx(TableContextMenu, {
|
155
|
+
editor: editor
|
156
|
+
}), /*#__PURE__*/_jsx(HtmlContextMenu, {
|
157
|
+
editor: editor,
|
158
|
+
handleCodeToText: handleCodeToText
|
159
|
+
})]
|
160
|
+
});
|
165
161
|
};
|
166
162
|
export default Toolbar;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
1
|
import React from 'react';
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
const Button = props => {
|
4
4
|
const {
|
5
5
|
children,
|
@@ -7,15 +7,16 @@ const Button = props => {
|
|
7
7
|
active,
|
8
8
|
...rest
|
9
9
|
} = props;
|
10
|
-
return /*#__PURE__*/
|
10
|
+
return /*#__PURE__*/_jsx("button", {
|
11
11
|
className: active ? 'btnActive' : '',
|
12
|
-
title: format
|
13
|
-
|
12
|
+
title: format,
|
13
|
+
...rest,
|
14
14
|
style: {
|
15
15
|
width: '30px',
|
16
16
|
height: '20px',
|
17
17
|
margin: '0 2px'
|
18
|
-
}
|
19
|
-
|
18
|
+
},
|
19
|
+
children: children
|
20
|
+
});
|
20
21
|
};
|
21
22
|
export default Button;
|