@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
@@ -4,104 +4,105 @@ import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs"
|
|
4
4
|
import { FaSuperscript, FaSubscript } from "react-icons/fa";
|
5
5
|
import { AiFillEdit, AiOutlineTable, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
|
6
6
|
import { SiLatex } from "react-icons/si";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
const iconList = {
|
8
|
-
bold: /*#__PURE__*/
|
9
|
+
bold: /*#__PURE__*/_jsx(MdFormatBold, {
|
9
10
|
size: 20
|
10
11
|
}),
|
11
|
-
italic: /*#__PURE__*/
|
12
|
+
italic: /*#__PURE__*/_jsx(MdFormatItalic, {
|
12
13
|
size: 20
|
13
14
|
}),
|
14
|
-
strikethrough: /*#__PURE__*/
|
15
|
+
strikethrough: /*#__PURE__*/_jsx(MdStrikethroughS, {
|
15
16
|
size: 20
|
16
17
|
}),
|
17
|
-
underline: /*#__PURE__*/
|
18
|
+
underline: /*#__PURE__*/_jsx(MdFormatUnderlined, {
|
18
19
|
size: 20
|
19
20
|
}),
|
20
|
-
headingOne: /*#__PURE__*/
|
21
|
+
headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
|
21
22
|
size: 20
|
22
23
|
}),
|
23
|
-
headingTwo: /*#__PURE__*/
|
24
|
+
headingTwo: /*#__PURE__*/_jsx(BsTypeH2, {
|
24
25
|
size: 20
|
25
26
|
}),
|
26
|
-
headingThree: /*#__PURE__*/
|
27
|
+
headingThree: /*#__PURE__*/_jsx(BsTypeH3, {
|
27
28
|
size: 20
|
28
29
|
}),
|
29
|
-
blockquote: /*#__PURE__*/
|
30
|
+
blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
|
30
31
|
size: 20
|
31
32
|
}),
|
32
|
-
superscript: /*#__PURE__*/
|
33
|
+
superscript: /*#__PURE__*/_jsx(FaSuperscript, {
|
33
34
|
size: 15
|
34
35
|
}),
|
35
|
-
subscript: /*#__PURE__*/
|
36
|
+
subscript: /*#__PURE__*/_jsx(FaSubscript, {
|
36
37
|
size: 15
|
37
38
|
}),
|
38
|
-
alignLeft: /*#__PURE__*/
|
39
|
+
alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
|
39
40
|
size: 20
|
40
41
|
}),
|
41
|
-
alignCenter: /*#__PURE__*/
|
42
|
+
alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
|
42
43
|
size: 20
|
43
44
|
}),
|
44
|
-
alignRight: /*#__PURE__*/
|
45
|
+
alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
|
45
46
|
size: 20
|
46
47
|
}),
|
47
|
-
orderedList: /*#__PURE__*/
|
48
|
+
orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
|
48
49
|
size: 20
|
49
50
|
}),
|
50
|
-
unorderedList: /*#__PURE__*/
|
51
|
+
unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
|
51
52
|
size: 20
|
52
53
|
}),
|
53
|
-
link: /*#__PURE__*/
|
54
|
+
link: /*#__PURE__*/_jsx(MdInsertLink, {
|
54
55
|
size: 20
|
55
56
|
}),
|
56
|
-
image: /*#__PURE__*/
|
57
|
+
image: /*#__PURE__*/_jsx(MdImage, {
|
57
58
|
size: 20
|
58
59
|
}),
|
59
|
-
video: /*#__PURE__*/
|
60
|
+
video: /*#__PURE__*/_jsx(MdVideoLibrary, {
|
60
61
|
size: 20
|
61
62
|
}),
|
62
|
-
add: /*#__PURE__*/
|
63
|
+
add: /*#__PURE__*/_jsx(MdAdd, {
|
63
64
|
size: 20
|
64
65
|
}),
|
65
|
-
table: /*#__PURE__*/
|
66
|
+
table: /*#__PURE__*/_jsx(AiOutlineTable, {
|
66
67
|
size: 20
|
67
68
|
}),
|
68
|
-
insertRowBelow: /*#__PURE__*/
|
69
|
+
insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {
|
69
70
|
size: 25
|
70
71
|
}),
|
71
|
-
insertColumnRight: /*#__PURE__*/
|
72
|
+
insertColumnRight: /*#__PURE__*/_jsx(AiOutlineInsertRowRight, {
|
72
73
|
size: 25
|
73
74
|
}),
|
74
|
-
insertColumnLeft: /*#__PURE__*/
|
75
|
+
insertColumnLeft: /*#__PURE__*/_jsx(AiOutlineInsertRowLeft, {
|
75
76
|
size: 25
|
76
77
|
}),
|
77
|
-
insertRowAbove: /*#__PURE__*/
|
78
|
+
insertRowAbove: /*#__PURE__*/_jsx(AiOutlineInsertRowAbove, {
|
78
79
|
size: 25
|
79
80
|
}),
|
80
|
-
trashCan: /*#__PURE__*/
|
81
|
+
trashCan: /*#__PURE__*/_jsx(AiOutlineDelete, {
|
81
82
|
size: 25
|
82
83
|
}),
|
83
|
-
addId: /*#__PURE__*/
|
84
|
+
addId: /*#__PURE__*/_jsx(AiFillTag, {
|
84
85
|
size: 20
|
85
86
|
}),
|
86
|
-
upload: /*#__PURE__*/
|
87
|
+
upload: /*#__PURE__*/_jsx(AiOutlineUpload, {
|
87
88
|
size: 20
|
88
89
|
}),
|
89
|
-
equation: /*#__PURE__*/
|
90
|
+
equation: /*#__PURE__*/_jsx(SiLatex, {
|
90
91
|
size: 20
|
91
92
|
}),
|
92
|
-
resize: /*#__PURE__*/
|
93
|
+
resize: /*#__PURE__*/_jsx(AiOutlineArrowsAlt, {
|
93
94
|
size: 20
|
94
95
|
}),
|
95
|
-
videoPlayer: /*#__PURE__*/
|
96
|
+
videoPlayer: /*#__PURE__*/_jsx(BsCameraVideoFill, {
|
96
97
|
size: 20
|
97
98
|
}),
|
98
|
-
insertHtml: /*#__PURE__*/
|
99
|
+
insertHtml: /*#__PURE__*/_jsx(AiFillHtml5, {
|
99
100
|
size: 20
|
100
101
|
}),
|
101
|
-
arrowRight: /*#__PURE__*/
|
102
|
+
arrowRight: /*#__PURE__*/_jsx(MdArrowForward, {
|
102
103
|
size: 35
|
103
104
|
}),
|
104
|
-
pen: /*#__PURE__*/
|
105
|
+
pen: /*#__PURE__*/_jsx(AiFillEdit, {
|
105
106
|
size: 20
|
106
107
|
})
|
107
108
|
};
|
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
|
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { ReactEditor } from "slate-react";
|
4
4
|
import { insertMention } from "../utils/mentions";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const MentionsPopup = props => {
|
6
7
|
const {
|
7
8
|
editor,
|
@@ -21,7 +22,7 @@ const MentionsPopup = props => {
|
|
21
22
|
el.style.left = `${rect.left + window.scrollX}px`;
|
22
23
|
}
|
23
24
|
}, [chars.length, editor, index, target]);
|
24
|
-
return target && chars.length > 0 ? /*#__PURE__*/
|
25
|
+
return target && chars.length > 0 ? /*#__PURE__*/_jsx("div", {
|
25
26
|
ref: ref,
|
26
27
|
style: {
|
27
28
|
top: "-9999px",
|
@@ -33,22 +34,23 @@ const MentionsPopup = props => {
|
|
33
34
|
borderRadius: "4px",
|
34
35
|
boxShadow: "0 1px 5px rgba(0,0,0,.2)"
|
35
36
|
},
|
36
|
-
"data-cy": "mentions-portal"
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
}
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
37
|
+
"data-cy": "mentions-portal",
|
38
|
+
children: chars.map((char, i) => /*#__PURE__*/_jsx("div", {
|
39
|
+
onClick: () => {
|
40
|
+
Transforms.select(editor, target);
|
41
|
+
insertMention(editor, char);
|
42
|
+
setMentions({
|
43
|
+
...mentions,
|
44
|
+
target: null
|
45
|
+
});
|
46
|
+
},
|
47
|
+
style: {
|
48
|
+
padding: "1px 3px",
|
49
|
+
borderRadius: "3px",
|
50
|
+
background: i === index ? "#B4D5FF" : "transparent"
|
51
|
+
},
|
52
|
+
children: char
|
53
|
+
}, char))
|
54
|
+
}) : null;
|
53
55
|
};
|
54
56
|
export default MentionsPopup;
|
@@ -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 { Editor, Transforms, Element as SlateElement } from "slate";
|
3
2
|
import Link from "../Elements/Link/Link";
|
4
3
|
import Image from "../Elements/Embed/Image";
|
@@ -9,6 +8,7 @@ import Table from "../Elements/Table/Table";
|
|
9
8
|
import Mentions from "../Elements/Mentions/Mentions";
|
10
9
|
import Grid from "../Elements/Grid/Grid";
|
11
10
|
import GridItem from "../Elements/Grid/GridItem";
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
const alignment = ["alignLeft", "alignRight", "alignCenter"];
|
13
13
|
const list_types = ["orderedList", "unorderedList"];
|
14
14
|
export const sizeMap = {
|
@@ -93,59 +93,76 @@ export const activeMark = (editor, format) => {
|
|
93
93
|
};
|
94
94
|
export const getMarked = (leaf, children) => {
|
95
95
|
if (leaf.bold) {
|
96
|
-
children = /*#__PURE__*/
|
96
|
+
children = /*#__PURE__*/_jsx("strong", {
|
97
|
+
children: children
|
98
|
+
});
|
97
99
|
}
|
98
100
|
if (leaf.code) {
|
99
|
-
children = /*#__PURE__*/
|
101
|
+
children = /*#__PURE__*/_jsx("code", {
|
102
|
+
children: children
|
103
|
+
});
|
100
104
|
}
|
101
105
|
if (leaf.italic) {
|
102
|
-
children = /*#__PURE__*/
|
106
|
+
children = /*#__PURE__*/_jsx("em", {
|
107
|
+
children: children
|
108
|
+
});
|
103
109
|
}
|
104
110
|
if (leaf.strikethrough) {
|
105
|
-
children = /*#__PURE__*/
|
111
|
+
children = /*#__PURE__*/_jsx("span", {
|
106
112
|
style: {
|
107
113
|
textDecoration: "line-through"
|
108
|
-
}
|
109
|
-
|
114
|
+
},
|
115
|
+
children: children
|
116
|
+
});
|
110
117
|
}
|
111
118
|
if (leaf.underline) {
|
112
|
-
children = /*#__PURE__*/
|
119
|
+
children = /*#__PURE__*/_jsx("u", {
|
120
|
+
children: children
|
121
|
+
});
|
113
122
|
}
|
114
123
|
if (leaf.superscript) {
|
115
|
-
children = /*#__PURE__*/
|
124
|
+
children = /*#__PURE__*/_jsx("sup", {
|
125
|
+
children: children
|
126
|
+
});
|
116
127
|
}
|
117
128
|
if (leaf.subscript) {
|
118
|
-
children = /*#__PURE__*/
|
129
|
+
children = /*#__PURE__*/_jsx("sub", {
|
130
|
+
children: children
|
131
|
+
});
|
119
132
|
}
|
120
133
|
if (leaf.color) {
|
121
|
-
children = /*#__PURE__*/
|
134
|
+
children = /*#__PURE__*/_jsx("span", {
|
122
135
|
style: {
|
123
136
|
color: leaf.color
|
124
|
-
}
|
125
|
-
|
137
|
+
},
|
138
|
+
children: children
|
139
|
+
});
|
126
140
|
}
|
127
141
|
if (leaf.bgColor) {
|
128
|
-
children = /*#__PURE__*/
|
142
|
+
children = /*#__PURE__*/_jsx("span", {
|
129
143
|
style: {
|
130
144
|
backgroundColor: leaf.bgColor
|
131
|
-
}
|
132
|
-
|
145
|
+
},
|
146
|
+
children: children
|
147
|
+
});
|
133
148
|
}
|
134
149
|
if (leaf.fontSize) {
|
135
150
|
const size = sizeMap[leaf.fontSize];
|
136
|
-
children = /*#__PURE__*/
|
151
|
+
children = /*#__PURE__*/_jsx("span", {
|
137
152
|
style: {
|
138
153
|
fontSize: size
|
139
|
-
}
|
140
|
-
|
154
|
+
},
|
155
|
+
children: children
|
156
|
+
});
|
141
157
|
}
|
142
158
|
if (leaf.fontFamily) {
|
143
159
|
const family = fontFamilyMap[leaf.fontFamily];
|
144
|
-
children = /*#__PURE__*/
|
160
|
+
children = /*#__PURE__*/_jsx("span", {
|
145
161
|
style: {
|
146
162
|
fontFamily: family
|
147
|
-
}
|
148
|
-
|
163
|
+
},
|
164
|
+
children: children
|
165
|
+
});
|
149
166
|
}
|
150
167
|
return children;
|
151
168
|
};
|
@@ -157,68 +174,131 @@ export const getBlock = props => {
|
|
157
174
|
const attributes = props.attributes ?? {};
|
158
175
|
switch (element.type) {
|
159
176
|
case "headingOne":
|
160
|
-
return /*#__PURE__*/
|
177
|
+
return /*#__PURE__*/_jsx("h1", {
|
178
|
+
...attributes,
|
179
|
+
...element.attr,
|
180
|
+
children: children
|
181
|
+
});
|
161
182
|
case "headingTwo":
|
162
|
-
return /*#__PURE__*/
|
183
|
+
return /*#__PURE__*/_jsx("h2", {
|
184
|
+
...attributes,
|
185
|
+
...element.attr,
|
186
|
+
children: children
|
187
|
+
});
|
163
188
|
case "headingThree":
|
164
|
-
return /*#__PURE__*/
|
189
|
+
return /*#__PURE__*/_jsx("h3", {
|
190
|
+
...attributes,
|
191
|
+
...element.attr,
|
192
|
+
children: children
|
193
|
+
});
|
165
194
|
case "blockquote":
|
166
|
-
return /*#__PURE__*/
|
195
|
+
return /*#__PURE__*/_jsx("blockquote", {
|
196
|
+
...attributes,
|
197
|
+
...element.attr,
|
198
|
+
children: children
|
199
|
+
});
|
167
200
|
case "alignLeft":
|
168
|
-
return /*#__PURE__*/
|
201
|
+
return /*#__PURE__*/_jsx("div", {
|
169
202
|
style: {
|
170
203
|
listStylePosition: "inside"
|
171
|
-
}
|
172
|
-
|
204
|
+
},
|
205
|
+
...attributes,
|
206
|
+
...element.attr,
|
207
|
+
children: children
|
208
|
+
});
|
173
209
|
case "alignCenter":
|
174
|
-
return /*#__PURE__*/
|
210
|
+
return /*#__PURE__*/_jsx("div", {
|
175
211
|
style: {
|
176
212
|
display: "flex",
|
177
213
|
alignItems: "center",
|
178
214
|
listStylePosition: "inside",
|
179
215
|
flexDirection: "column"
|
180
|
-
}
|
181
|
-
|
216
|
+
},
|
217
|
+
...attributes,
|
218
|
+
...element.attr,
|
219
|
+
children: children
|
220
|
+
});
|
182
221
|
case "alignRight":
|
183
|
-
return /*#__PURE__*/
|
222
|
+
return /*#__PURE__*/_jsx("div", {
|
184
223
|
style: {
|
185
224
|
display: "flex",
|
186
225
|
alignItems: "flex-end",
|
187
226
|
listStylePosition: "inside",
|
188
227
|
flexDirection: "column"
|
189
|
-
}
|
190
|
-
|
228
|
+
},
|
229
|
+
...attributes,
|
230
|
+
...element.attr,
|
231
|
+
children: children
|
232
|
+
});
|
191
233
|
case "list-item":
|
192
|
-
return /*#__PURE__*/
|
234
|
+
return /*#__PURE__*/_jsx("li", {
|
235
|
+
...attributes,
|
236
|
+
...element.attr,
|
237
|
+
children: children
|
238
|
+
});
|
193
239
|
case "orderedList":
|
194
|
-
return /*#__PURE__*/
|
195
|
-
type: "1"
|
196
|
-
|
240
|
+
return /*#__PURE__*/_jsx("ol", {
|
241
|
+
type: "1",
|
242
|
+
...attributes,
|
243
|
+
children: children
|
244
|
+
});
|
197
245
|
case "unorderedList":
|
198
|
-
return /*#__PURE__*/
|
246
|
+
return /*#__PURE__*/_jsx("ul", {
|
247
|
+
...attributes,
|
248
|
+
children: children
|
249
|
+
});
|
199
250
|
case "link":
|
200
|
-
return /*#__PURE__*/
|
251
|
+
return /*#__PURE__*/_jsx(Link, {
|
252
|
+
...props
|
253
|
+
});
|
201
254
|
case "table":
|
202
|
-
return /*#__PURE__*/
|
255
|
+
return /*#__PURE__*/_jsx(Table, {
|
256
|
+
...props
|
257
|
+
});
|
203
258
|
case "table-row":
|
204
|
-
return /*#__PURE__*/
|
259
|
+
return /*#__PURE__*/_jsx("tr", {
|
260
|
+
...attributes,
|
261
|
+
children: children
|
262
|
+
});
|
205
263
|
case "table-cell":
|
206
|
-
return /*#__PURE__*/
|
264
|
+
return /*#__PURE__*/_jsx("td", {
|
265
|
+
...element.attr,
|
266
|
+
...attributes,
|
267
|
+
children: children
|
268
|
+
});
|
207
269
|
case "image":
|
208
|
-
return /*#__PURE__*/
|
270
|
+
return /*#__PURE__*/_jsx(Image, {
|
271
|
+
...props
|
272
|
+
});
|
209
273
|
case "video":
|
210
|
-
return /*#__PURE__*/
|
274
|
+
return /*#__PURE__*/_jsx(Video, {
|
275
|
+
...props
|
276
|
+
});
|
211
277
|
case "equation":
|
212
|
-
return /*#__PURE__*/
|
278
|
+
return /*#__PURE__*/_jsx(Equation, {
|
279
|
+
...props
|
280
|
+
});
|
213
281
|
case "htmlCode":
|
214
|
-
return /*#__PURE__*/
|
282
|
+
return /*#__PURE__*/_jsx(HtmlCode, {
|
283
|
+
...props
|
284
|
+
});
|
215
285
|
case "mention":
|
216
|
-
return /*#__PURE__*/
|
286
|
+
return /*#__PURE__*/_jsx(Mentions, {
|
287
|
+
...props
|
288
|
+
});
|
217
289
|
case "grid":
|
218
|
-
return /*#__PURE__*/
|
290
|
+
return /*#__PURE__*/_jsx(Grid, {
|
291
|
+
...props
|
292
|
+
});
|
219
293
|
case "grid-item":
|
220
|
-
return /*#__PURE__*/
|
294
|
+
return /*#__PURE__*/_jsx(GridItem, {
|
295
|
+
...props
|
296
|
+
});
|
221
297
|
default:
|
222
|
-
return /*#__PURE__*/
|
298
|
+
return /*#__PURE__*/_jsx("div", {
|
299
|
+
...element.attr,
|
300
|
+
...attributes,
|
301
|
+
children: children
|
302
|
+
});
|
223
303
|
}
|
224
304
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.9",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -115,7 +115,7 @@
|
|
115
115
|
},
|
116
116
|
"babel": {
|
117
117
|
"presets": [
|
118
|
-
"@babel/preset-react"
|
118
|
+
["@babel/preset-react", {"runtime": "automatic"}]
|
119
119
|
]
|
120
120
|
}
|
121
121
|
}
|