@flozy/editor 1.0.7 → 1.0.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/dist/Editor/CollaborativeEditor.js +6 -4
  2. package/dist/Editor/CommonEditor.js +43 -31
  3. package/dist/Editor/Elements/CodeToText/CodeToText.js +44 -33
  4. package/dist/Editor/Elements/CodeToText/CodeToTextButton.js +13 -8
  5. package/dist/Editor/Elements/CodeToText/HtmlCode.js +13 -8
  6. package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +15 -9
  7. package/dist/Editor/Elements/Color Picker/ColorPicker.js +63 -55
  8. package/dist/Editor/Elements/Embed/Embed.js +63 -50
  9. package/dist/Editor/Elements/Embed/Image.js +31 -25
  10. package/dist/Editor/Elements/Embed/Video.js +46 -41
  11. package/dist/Editor/Elements/Equation/Equation.js +17 -10
  12. package/dist/Editor/Elements/Equation/EquationButton.js +38 -29
  13. package/dist/Editor/Elements/Grid/Grid.js +14 -9
  14. package/dist/Editor/Elements/Grid/GridButton.js +5 -3
  15. package/dist/Editor/Elements/Grid/GridItem.js +18 -13
  16. package/dist/Editor/Elements/ID/Id.js +30 -24
  17. package/dist/Editor/Elements/Link/Link.js +27 -20
  18. package/dist/Editor/Elements/Link/LinkButton.js +50 -40
  19. package/dist/Editor/Elements/Mentions/Mentions.js +6 -4
  20. package/dist/Editor/Elements/NewLine/NewLineButton.js +5 -3
  21. package/dist/Editor/Elements/Table/Table.js +10 -3
  22. package/dist/Editor/Elements/Table/TableSelector.js +41 -33
  23. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +21 -16
  24. package/dist/Editor/RemoteCursorOverlay/Overlay.js +35 -31
  25. package/dist/Editor/Toolbar/Toolbar.js +90 -94
  26. package/dist/Editor/common/Button.js +7 -6
  27. package/dist/Editor/common/Icon.js +34 -33
  28. package/dist/Editor/common/MentionsPopup.js +20 -18
  29. package/dist/Editor/utils/SlateUtilityFunctions.js +132 -52
  30. package/package.json +2 -2
@@ -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__*/React.createElement("button", _extends({
10
+ return /*#__PURE__*/_jsx("button", {
11
11
  className: active ? 'btnActive' : '',
12
- title: format
13
- }, rest, {
12
+ title: format,
13
+ ...rest,
14
14
  style: {
15
15
  width: '30px',
16
16
  height: '20px',
17
17
  margin: '0 2px'
18
- }
19
- }), children);
18
+ },
19
+ children: children
20
+ });
20
21
  };
21
22
  export default Button;
@@ -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__*/React.createElement(MdFormatBold, {
9
+ bold: /*#__PURE__*/_jsx(MdFormatBold, {
9
10
  size: 20
10
11
  }),
11
- italic: /*#__PURE__*/React.createElement(MdFormatItalic, {
12
+ italic: /*#__PURE__*/_jsx(MdFormatItalic, {
12
13
  size: 20
13
14
  }),
14
- strikethrough: /*#__PURE__*/React.createElement(MdStrikethroughS, {
15
+ strikethrough: /*#__PURE__*/_jsx(MdStrikethroughS, {
15
16
  size: 20
16
17
  }),
17
- underline: /*#__PURE__*/React.createElement(MdFormatUnderlined, {
18
+ underline: /*#__PURE__*/_jsx(MdFormatUnderlined, {
18
19
  size: 20
19
20
  }),
20
- headingOne: /*#__PURE__*/React.createElement(BsTypeH1, {
21
+ headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
21
22
  size: 20
22
23
  }),
23
- headingTwo: /*#__PURE__*/React.createElement(BsTypeH2, {
24
+ headingTwo: /*#__PURE__*/_jsx(BsTypeH2, {
24
25
  size: 20
25
26
  }),
26
- headingThree: /*#__PURE__*/React.createElement(BsTypeH3, {
27
+ headingThree: /*#__PURE__*/_jsx(BsTypeH3, {
27
28
  size: 20
28
29
  }),
29
- blockquote: /*#__PURE__*/React.createElement(MdFormatQuote, {
30
+ blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
30
31
  size: 20
31
32
  }),
32
- superscript: /*#__PURE__*/React.createElement(FaSuperscript, {
33
+ superscript: /*#__PURE__*/_jsx(FaSuperscript, {
33
34
  size: 15
34
35
  }),
35
- subscript: /*#__PURE__*/React.createElement(FaSubscript, {
36
+ subscript: /*#__PURE__*/_jsx(FaSubscript, {
36
37
  size: 15
37
38
  }),
38
- alignLeft: /*#__PURE__*/React.createElement(MdFormatAlignLeft, {
39
+ alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
39
40
  size: 20
40
41
  }),
41
- alignCenter: /*#__PURE__*/React.createElement(MdFormatAlignCenter, {
42
+ alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
42
43
  size: 20
43
44
  }),
44
- alignRight: /*#__PURE__*/React.createElement(MdFormatAlignRight, {
45
+ alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
45
46
  size: 20
46
47
  }),
47
- orderedList: /*#__PURE__*/React.createElement(MdFormatListNumbered, {
48
+ orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
48
49
  size: 20
49
50
  }),
50
- unorderedList: /*#__PURE__*/React.createElement(MdFormatListBulleted, {
51
+ unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
51
52
  size: 20
52
53
  }),
53
- link: /*#__PURE__*/React.createElement(MdInsertLink, {
54
+ link: /*#__PURE__*/_jsx(MdInsertLink, {
54
55
  size: 20
55
56
  }),
56
- image: /*#__PURE__*/React.createElement(MdImage, {
57
+ image: /*#__PURE__*/_jsx(MdImage, {
57
58
  size: 20
58
59
  }),
59
- video: /*#__PURE__*/React.createElement(MdVideoLibrary, {
60
+ video: /*#__PURE__*/_jsx(MdVideoLibrary, {
60
61
  size: 20
61
62
  }),
62
- add: /*#__PURE__*/React.createElement(MdAdd, {
63
+ add: /*#__PURE__*/_jsx(MdAdd, {
63
64
  size: 20
64
65
  }),
65
- table: /*#__PURE__*/React.createElement(AiOutlineTable, {
66
+ table: /*#__PURE__*/_jsx(AiOutlineTable, {
66
67
  size: 20
67
68
  }),
68
- insertRowBelow: /*#__PURE__*/React.createElement(AiOutlineInsertRowBelow, {
69
+ insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {
69
70
  size: 25
70
71
  }),
71
- insertColumnRight: /*#__PURE__*/React.createElement(AiOutlineInsertRowRight, {
72
+ insertColumnRight: /*#__PURE__*/_jsx(AiOutlineInsertRowRight, {
72
73
  size: 25
73
74
  }),
74
- insertColumnLeft: /*#__PURE__*/React.createElement(AiOutlineInsertRowLeft, {
75
+ insertColumnLeft: /*#__PURE__*/_jsx(AiOutlineInsertRowLeft, {
75
76
  size: 25
76
77
  }),
77
- insertRowAbove: /*#__PURE__*/React.createElement(AiOutlineInsertRowAbove, {
78
+ insertRowAbove: /*#__PURE__*/_jsx(AiOutlineInsertRowAbove, {
78
79
  size: 25
79
80
  }),
80
- trashCan: /*#__PURE__*/React.createElement(AiOutlineDelete, {
81
+ trashCan: /*#__PURE__*/_jsx(AiOutlineDelete, {
81
82
  size: 25
82
83
  }),
83
- addId: /*#__PURE__*/React.createElement(AiFillTag, {
84
+ addId: /*#__PURE__*/_jsx(AiFillTag, {
84
85
  size: 20
85
86
  }),
86
- upload: /*#__PURE__*/React.createElement(AiOutlineUpload, {
87
+ upload: /*#__PURE__*/_jsx(AiOutlineUpload, {
87
88
  size: 20
88
89
  }),
89
- equation: /*#__PURE__*/React.createElement(SiLatex, {
90
+ equation: /*#__PURE__*/_jsx(SiLatex, {
90
91
  size: 20
91
92
  }),
92
- resize: /*#__PURE__*/React.createElement(AiOutlineArrowsAlt, {
93
+ resize: /*#__PURE__*/_jsx(AiOutlineArrowsAlt, {
93
94
  size: 20
94
95
  }),
95
- videoPlayer: /*#__PURE__*/React.createElement(BsCameraVideoFill, {
96
+ videoPlayer: /*#__PURE__*/_jsx(BsCameraVideoFill, {
96
97
  size: 20
97
98
  }),
98
- insertHtml: /*#__PURE__*/React.createElement(AiFillHtml5, {
99
+ insertHtml: /*#__PURE__*/_jsx(AiFillHtml5, {
99
100
  size: 20
100
101
  }),
101
- arrowRight: /*#__PURE__*/React.createElement(MdArrowForward, {
102
+ arrowRight: /*#__PURE__*/_jsx(MdArrowForward, {
102
103
  size: 35
103
104
  }),
104
- pen: /*#__PURE__*/React.createElement(AiFillEdit, {
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__*/React.createElement("div", {
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
- }, chars.map((char, i) => /*#__PURE__*/React.createElement("div", {
38
- key: char,
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
- }, char))) : null;
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__*/React.createElement("strong", null, children);
96
+ children = /*#__PURE__*/_jsx("strong", {
97
+ children: children
98
+ });
97
99
  }
98
100
  if (leaf.code) {
99
- children = /*#__PURE__*/React.createElement("code", null, children);
101
+ children = /*#__PURE__*/_jsx("code", {
102
+ children: children
103
+ });
100
104
  }
101
105
  if (leaf.italic) {
102
- children = /*#__PURE__*/React.createElement("em", null, children);
106
+ children = /*#__PURE__*/_jsx("em", {
107
+ children: children
108
+ });
103
109
  }
104
110
  if (leaf.strikethrough) {
105
- children = /*#__PURE__*/React.createElement("span", {
111
+ children = /*#__PURE__*/_jsx("span", {
106
112
  style: {
107
113
  textDecoration: "line-through"
108
- }
109
- }, children);
114
+ },
115
+ children: children
116
+ });
110
117
  }
111
118
  if (leaf.underline) {
112
- children = /*#__PURE__*/React.createElement("u", null, children);
119
+ children = /*#__PURE__*/_jsx("u", {
120
+ children: children
121
+ });
113
122
  }
114
123
  if (leaf.superscript) {
115
- children = /*#__PURE__*/React.createElement("sup", null, children);
124
+ children = /*#__PURE__*/_jsx("sup", {
125
+ children: children
126
+ });
116
127
  }
117
128
  if (leaf.subscript) {
118
- children = /*#__PURE__*/React.createElement("sub", null, children);
129
+ children = /*#__PURE__*/_jsx("sub", {
130
+ children: children
131
+ });
119
132
  }
120
133
  if (leaf.color) {
121
- children = /*#__PURE__*/React.createElement("span", {
134
+ children = /*#__PURE__*/_jsx("span", {
122
135
  style: {
123
136
  color: leaf.color
124
- }
125
- }, children);
137
+ },
138
+ children: children
139
+ });
126
140
  }
127
141
  if (leaf.bgColor) {
128
- children = /*#__PURE__*/React.createElement("span", {
142
+ children = /*#__PURE__*/_jsx("span", {
129
143
  style: {
130
144
  backgroundColor: leaf.bgColor
131
- }
132
- }, children);
145
+ },
146
+ children: children
147
+ });
133
148
  }
134
149
  if (leaf.fontSize) {
135
150
  const size = sizeMap[leaf.fontSize];
136
- children = /*#__PURE__*/React.createElement("span", {
151
+ children = /*#__PURE__*/_jsx("span", {
137
152
  style: {
138
153
  fontSize: size
139
- }
140
- }, children);
154
+ },
155
+ children: children
156
+ });
141
157
  }
142
158
  if (leaf.fontFamily) {
143
159
  const family = fontFamilyMap[leaf.fontFamily];
144
- children = /*#__PURE__*/React.createElement("span", {
160
+ children = /*#__PURE__*/_jsx("span", {
145
161
  style: {
146
162
  fontFamily: family
147
- }
148
- }, children);
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__*/React.createElement("h1", _extends({}, attributes, element.attr), children);
177
+ return /*#__PURE__*/_jsx("h1", {
178
+ ...attributes,
179
+ ...element.attr,
180
+ children: children
181
+ });
161
182
  case "headingTwo":
162
- return /*#__PURE__*/React.createElement("h2", _extends({}, attributes, element.attr), children);
183
+ return /*#__PURE__*/_jsx("h2", {
184
+ ...attributes,
185
+ ...element.attr,
186
+ children: children
187
+ });
163
188
  case "headingThree":
164
- return /*#__PURE__*/React.createElement("h3", _extends({}, attributes, element.attr), children);
189
+ return /*#__PURE__*/_jsx("h3", {
190
+ ...attributes,
191
+ ...element.attr,
192
+ children: children
193
+ });
165
194
  case "blockquote":
166
- return /*#__PURE__*/React.createElement("blockquote", _extends({}, attributes, element.attr), children);
195
+ return /*#__PURE__*/_jsx("blockquote", {
196
+ ...attributes,
197
+ ...element.attr,
198
+ children: children
199
+ });
167
200
  case "alignLeft":
168
- return /*#__PURE__*/React.createElement("div", _extends({
201
+ return /*#__PURE__*/_jsx("div", {
169
202
  style: {
170
203
  listStylePosition: "inside"
171
- }
172
- }, attributes, element.attr), children);
204
+ },
205
+ ...attributes,
206
+ ...element.attr,
207
+ children: children
208
+ });
173
209
  case "alignCenter":
174
- return /*#__PURE__*/React.createElement("div", _extends({
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
- }, attributes, element.attr), children);
216
+ },
217
+ ...attributes,
218
+ ...element.attr,
219
+ children: children
220
+ });
182
221
  case "alignRight":
183
- return /*#__PURE__*/React.createElement("div", _extends({
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
- }, attributes, element.attr), children);
228
+ },
229
+ ...attributes,
230
+ ...element.attr,
231
+ children: children
232
+ });
191
233
  case "list-item":
192
- return /*#__PURE__*/React.createElement("li", _extends({}, attributes, element.attr), children);
234
+ return /*#__PURE__*/_jsx("li", {
235
+ ...attributes,
236
+ ...element.attr,
237
+ children: children
238
+ });
193
239
  case "orderedList":
194
- return /*#__PURE__*/React.createElement("ol", _extends({
195
- type: "1"
196
- }, attributes), children);
240
+ return /*#__PURE__*/_jsx("ol", {
241
+ type: "1",
242
+ ...attributes,
243
+ children: children
244
+ });
197
245
  case "unorderedList":
198
- return /*#__PURE__*/React.createElement("ul", attributes, children);
246
+ return /*#__PURE__*/_jsx("ul", {
247
+ ...attributes,
248
+ children: children
249
+ });
199
250
  case "link":
200
- return /*#__PURE__*/React.createElement(Link, props);
251
+ return /*#__PURE__*/_jsx(Link, {
252
+ ...props
253
+ });
201
254
  case "table":
202
- return /*#__PURE__*/React.createElement(Table, props);
255
+ return /*#__PURE__*/_jsx(Table, {
256
+ ...props
257
+ });
203
258
  case "table-row":
204
- return /*#__PURE__*/React.createElement("tr", attributes, children);
259
+ return /*#__PURE__*/_jsx("tr", {
260
+ ...attributes,
261
+ children: children
262
+ });
205
263
  case "table-cell":
206
- return /*#__PURE__*/React.createElement("td", _extends({}, element.attr, attributes), children);
264
+ return /*#__PURE__*/_jsx("td", {
265
+ ...element.attr,
266
+ ...attributes,
267
+ children: children
268
+ });
207
269
  case "image":
208
- return /*#__PURE__*/React.createElement(Image, props);
270
+ return /*#__PURE__*/_jsx(Image, {
271
+ ...props
272
+ });
209
273
  case "video":
210
- return /*#__PURE__*/React.createElement(Video, props);
274
+ return /*#__PURE__*/_jsx(Video, {
275
+ ...props
276
+ });
211
277
  case "equation":
212
- return /*#__PURE__*/React.createElement(Equation, props);
278
+ return /*#__PURE__*/_jsx(Equation, {
279
+ ...props
280
+ });
213
281
  case "htmlCode":
214
- return /*#__PURE__*/React.createElement(HtmlCode, props);
282
+ return /*#__PURE__*/_jsx(HtmlCode, {
283
+ ...props
284
+ });
215
285
  case "mention":
216
- return /*#__PURE__*/React.createElement(Mentions, props);
286
+ return /*#__PURE__*/_jsx(Mentions, {
287
+ ...props
288
+ });
217
289
  case "grid":
218
- return /*#__PURE__*/React.createElement(Grid, props);
290
+ return /*#__PURE__*/_jsx(Grid, {
291
+ ...props
292
+ });
219
293
  case "grid-item":
220
- return /*#__PURE__*/React.createElement(GridItem, props);
294
+ return /*#__PURE__*/_jsx(GridItem, {
295
+ ...props
296
+ });
221
297
  default:
222
- return /*#__PURE__*/React.createElement("div", _extends({}, element.attr, attributes), children);
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.7",
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
  }