@flozy/editor 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;