@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.
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 +14 -8
  7. package/dist/Editor/Elements/Color Picker/ColorPicker.js +61 -53
  8. package/dist/Editor/Elements/Embed/Embed.js +62 -49
  9. package/dist/Editor/Elements/Embed/Image.js +30 -24
  10. package/dist/Editor/Elements/Embed/Video.js +45 -38
  11. package/dist/Editor/Elements/Equation/Equation.js +17 -10
  12. package/dist/Editor/Elements/Equation/EquationButton.js +37 -28
  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 +26 -19
  18. package/dist/Editor/Elements/Link/LinkButton.js +45 -35
  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 +18 -13
  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,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__*/React.createElement("span", _extends({}, attributes, {
28
+ return /*#__PURE__*/_jsxs("span", {
29
+ ...attributes,
29
30
  contentEditable: false,
30
31
  "data-cy": `mention-${element.character.replace(" ", "-")}`,
31
- style: style
32
- }), "@", element.character, children);
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__*/React.createElement("button", {
18
+ return /*#__PURE__*/_jsx("button", {
18
19
  title: "New Line",
19
- onClick: onAddNewLine
20
- }, /*#__PURE__*/React.createElement(KeyboardReturnIcon, null));
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__*/React.createElement("div", {
8
+ return /*#__PURE__*/_jsx("div", {
8
9
  style: {
9
10
  minWidth: "100%",
10
11
  maxWidth: "100%",
11
12
  overflow: "auto"
12
- }
13
- }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", attributes, children)));
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__*/React.createElement("div", {
60
+ return /*#__PURE__*/_jsxs("div", {
59
61
  ref: tableOptionsRef,
60
- className: "popup-wrapper"
61
- }, /*#__PURE__*/React.createElement("button", {
62
- style: {
63
- border: showOptions ? '1px solid lightgray' : 'none'
64
- },
65
- title: "table",
66
- onClick: handleButtonClick
67
- }, /*#__PURE__*/React.createElement(Icon, {
68
- icon: "table"
69
- })), showOptions && /*#__PURE__*/React.createElement("div", {
70
- className: "popup"
71
- }, /*#__PURE__*/React.createElement("span", {
72
- style: {
73
- fontSize: '0.85em'
74
- }
75
- }, /*#__PURE__*/React.createElement("i", null, `Insert a ${tableData.row >= 1 ? `${tableData.row} x ${tableData.column}` : ''} table`)), /*#__PURE__*/React.createElement("div", {
76
- className: "table-input"
77
- }, tableInput.map((grp, row) => grp.map(({
78
- column,
79
- bg
80
- }, col) => /*#__PURE__*/React.createElement("div", {
81
- key: row + col,
82
- onClick: () => handleInsert(),
83
- onMouseOver: () => setTableData({
84
- row: row + 1,
85
- column: column + 1
86
- }),
87
- className: "table-unit",
88
- style: {
89
- border: `1px solid ${bg}`
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__*/React.createElement("div", {
75
+ return showMenu && /*#__PURE__*/_jsx("div", {
74
76
  className: "contextMenu",
75
77
  style: {
76
78
  top,
77
79
  left
78
- }
79
- }, menu.map(({
80
- icon,
81
- text,
82
- action
83
- }, index) => /*#__PURE__*/React.createElement("div", {
84
- className: "menuOption",
85
- key: index,
86
- onClick: () => handleInsert(action)
87
- }, /*#__PURE__*/React.createElement(Icon, {
88
- icon: icon
89
- }), /*#__PURE__*/React.createElement("span", null, text))));
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__*/React.createElement("div", {
17
+ return /*#__PURE__*/_jsx("div", {
17
18
  style: {
18
19
  ...caretStyle,
19
20
  position: "absolute",
20
21
  width: "0.5px"
21
- }
22
- }, /*#__PURE__*/React.createElement("div", {
23
- style: {
24
- position: "absolute",
25
- color: "#FFF",
26
- whiteSpace: "nowrap",
27
- top: 0,
28
- ...labelStyle
29
- }
30
- }, data?.name));
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__*/React.createElement(React.Fragment, null, selectionRects.map((position, i) => /*#__PURE__*/React.createElement("div", {
44
- style: {
45
- ...selectionStyle,
46
- ...position,
47
- position: "absolute",
48
- pointerEvents: "none"
49
- }
50
- // eslint-disable-next-line react/no-array-index-key
51
- ,
52
- key: i
53
- })), caretPosition && /*#__PURE__*/React.createElement(Caret, {
54
- caretPosition: caretPosition,
55
- data: data
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__*/React.createElement("div", {
69
+ return /*#__PURE__*/_jsxs("div", {
67
70
  className: `${className}`,
68
71
  style: {
69
72
  position: "relative"
70
73
  },
71
- ref: containerRef
72
- }, children, cursors.map(cursor => /*#__PURE__*/React.createElement(RemoteSelection, _extends({
73
- key: cursor.clientId
74
- }, cursor))));
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__*/React.createElement(Button, {
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
- }, /*#__PURE__*/React.createElement(Icon, {
51
- icon: format
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__*/React.createElement(Button, {
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
- }, /*#__PURE__*/React.createElement(Icon, {
65
- icon: format
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__*/React.createElement("select", {
75
+ return /*#__PURE__*/_jsx("select", {
73
76
  value: activeMark(editor, format),
74
- onChange: e => changeMarkData(e, format)
75
- }, options.map((item, index) => /*#__PURE__*/React.createElement("option", {
76
- key: index,
77
- value: item.value
78
- }, item.text)));
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__*/React.createElement("div", {
89
- className: "toolbar"
90
- }, toolbarGroups.map((group, index) => /*#__PURE__*/React.createElement("span", {
91
- key: index,
92
- className: "toolbar-grp"
93
- }, group.map((element, gi) => {
94
- switch (element.type) {
95
- case "block":
96
- return /*#__PURE__*/React.createElement(BlockButton, _extends({
97
- key: element.id
98
- }, element));
99
- case "mark":
100
- return /*#__PURE__*/React.createElement(MarkButton, _extends({
101
- key: element.id
102
- }, element));
103
- case "dropdown":
104
- return /*#__PURE__*/React.createElement(Dropdown, _extends({
105
- key: element.id
106
- }, element));
107
- case "link":
108
- return /*#__PURE__*/React.createElement(LinkButton, {
109
- key: element.id,
110
- active: isBlockActive(editor, "link"),
111
- editor: editor
112
- });
113
- case "embed":
114
- return /*#__PURE__*/React.createElement(Embed, {
115
- key: element.id,
116
- format: element.format,
117
- editor: editor
118
- });
119
- case "color-picker":
120
- return /*#__PURE__*/React.createElement(ColorPicker, {
121
- key: element.id,
122
- activeMark: activeMark,
123
- format: element.format,
124
- editor: editor
125
- });
126
- case "table":
127
- return /*#__PURE__*/React.createElement(TableSelector, {
128
- key: element.id,
129
- editor: editor
130
- });
131
- case "id":
132
- return /*#__PURE__*/React.createElement(Id, {
133
- key: `gi_id_${gi}`,
134
- editor: editor
135
- });
136
- case "equation":
137
- return /*#__PURE__*/React.createElement(EquationButton, {
138
- key: `gi_equation_${gi}`,
139
- editor: editor
140
- });
141
- case "codeToText":
142
- return /*#__PURE__*/React.createElement(CodeToTextButton, {
143
- key: `gi_codeToText_${gi}`,
144
- handleButtonClick: handleCodeToText
145
- });
146
- case "grid":
147
- return /*#__PURE__*/React.createElement(GridButton, {
148
- key: element.id,
149
- editor: editor
150
- });
151
- case "newLine":
152
- return /*#__PURE__*/React.createElement(NewLineButton, {
153
- key: element.id,
154
- editor: editor
155
- });
156
- default:
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__*/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;