@seafile/sdoc-editor 2.0.126 → 2.0.127

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.
@@ -0,0 +1,48 @@
1
+ .sdoc-editor__article {
2
+ position: relative;
3
+ overflow: auto;
4
+ }
5
+
6
+ .slate-content.hide-native-cursor {
7
+ caret-color: transparent;
8
+ }
9
+
10
+ .custom-cursor {
11
+ position: absolute;
12
+ width: 1px;
13
+ height: 1.2em;
14
+ background-color: blue;
15
+ animation: blink 1s infinite;
16
+ }
17
+
18
+ .custom-cursor.link-start::after,
19
+ .custom-cursor.next-start::after {
20
+ content: '';
21
+ position: absolute;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 4px;
25
+ height: 1px;
26
+ background-color: blue;
27
+ }
28
+
29
+ .custom-cursor.link-end::after,
30
+ .custom-cursor.prev-end::after {
31
+ content: '';
32
+ position: absolute;
33
+ bottom: 0;
34
+ right: 0;
35
+ width: 4px;
36
+ height: 1px;
37
+ background-color: blue;
38
+ }
39
+
40
+ @keyframes blink {
41
+ 0%, 100% {
42
+ opacity: 1;
43
+ }
44
+
45
+ 50% {
46
+ opacity: 0;
47
+ }
48
+ }
@@ -26,7 +26,7 @@ var notificationReducer = exports.notificationReducer = function notificationRed
26
26
  {
27
27
  var notifications = action.payload;
28
28
  var notificationsMap = {};
29
- notifications.forEach(function (n) {
29
+ notifications === null || notifications === void 0 ? void 0 : notifications.forEach(function (n) {
30
30
  var newNotification = new _model.Notification(n);
31
31
  notificationsMap[newNotification.key] = newNotification;
32
32
  });
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
+ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
10
11
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
12
  var _react = _interopRequireWildcard(require("react"));
12
13
  var _slate = require("@seafile/slate");
@@ -28,6 +29,7 @@ var _commonUtils = require("../utils/common-utils");
28
29
  var _domUtils = require("../utils/dom-utils");
29
30
  var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
30
31
  var _eventHandler = _interopRequireDefault(require("../utils/event-handler"));
32
+ require("../assets/css/link-cursor.css");
31
33
  var EditableArticle = function EditableArticle(_ref) {
32
34
  var _ref$showComment = _ref.showComment,
33
35
  showComment = _ref$showComment === void 0 ? true : _ref$showComment,
@@ -38,6 +40,14 @@ var EditableArticle = function EditableArticle(_ref) {
38
40
  cursors = _useCursors.cursors;
39
41
  var decorate = (0, _decorates.usePipDecorate)(editor);
40
42
  var forceUpdate = (0, _useForceUpdate["default"])();
43
+ var _useState = (0, _react.useState)({
44
+ top: 0,
45
+ left: 0,
46
+ type: null // 'link-start' | 'link-end' | 'next-start' | 'prev-end'
47
+ }),
48
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
49
+ cursorState = _useState2[0],
50
+ setCursorState = _useState2[1];
41
51
 
42
52
  // init eventHandler
43
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -67,6 +77,113 @@ var EditableArticle = function EditableArticle(_ref) {
67
77
  };
68
78
  // eslint-disable-next-line react-hooks/exhaustive-deps
69
79
  }, []);
80
+ (0, _react.useEffect)(function () {
81
+ var selection = editor.selection;
82
+ if (!selection || !_slate.Range.isCollapsed(selection)) {
83
+ setCursorState({
84
+ top: 0,
85
+ left: 0,
86
+ type: null
87
+ });
88
+ return;
89
+ }
90
+ var domSelection = window.getSelection();
91
+ if (!domSelection || domSelection.rangeCount === 0) {
92
+ setCursorState({
93
+ top: 0,
94
+ left: 0,
95
+ type: null
96
+ });
97
+ return;
98
+ }
99
+ var range = domSelection.getRangeAt(0);
100
+ var rect = range.getBoundingClientRect();
101
+ var editorEl = document.querySelector('.sdoc-editor__article');
102
+ if (!editorEl) {
103
+ setCursorState({
104
+ top: 0,
105
+ left: 0,
106
+ type: null
107
+ });
108
+ return;
109
+ }
110
+ var editorRect = editorEl.getBoundingClientRect();
111
+ var top = rect.top - editorRect.top + editorEl.scrollTop;
112
+ var left = rect.left - editorRect.left + editorEl.scrollLeft;
113
+ var _Editor$node = _slate.Editor.node(editor, selection.anchor.path),
114
+ _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 2),
115
+ node = _Editor$node2[0],
116
+ path = _Editor$node2[1];
117
+ if (!_slate.Text.isText(node)) {
118
+ setCursorState({
119
+ top: 0,
120
+ left: 0,
121
+ type: null
122
+ });
123
+ return;
124
+ }
125
+ var isInLink = false;
126
+ var _iterator = (0, _createForOfIteratorHelper2["default"])(_slate.Node.ancestors(editor, path)),
127
+ _step;
128
+ try {
129
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
130
+ var _step$value = (0, _slicedToArray2["default"])(_step.value, 1),
131
+ ancestor = _step$value[0];
132
+ if (ancestor.type === 'link') {
133
+ isInLink = true;
134
+ break;
135
+ }
136
+ }
137
+ } catch (err) {
138
+ _iterator.e(err);
139
+ } finally {
140
+ _iterator.f();
141
+ }
142
+ if (isInLink) {
143
+ var offset = selection.anchor.offset;
144
+ var isStart = offset === 0;
145
+ var isEnd = offset === node.text.length;
146
+ if (!isStart && !isEnd) {
147
+ setCursorState({
148
+ top: 0,
149
+ left: 0,
150
+ type: null
151
+ });
152
+ return;
153
+ }
154
+ setCursorState({
155
+ top: top,
156
+ left: left,
157
+ type: isStart ? 'link-start' : 'link-end'
158
+ });
159
+ } else {
160
+ var parent = _slate.Node.parent(editor, path);
161
+ var index = path[path.length - 1];
162
+ var nextSibling = index < parent.children.length - 1 ? parent.children[index + 1] : null;
163
+ var prevSibling = index > 0 ? parent.children[index - 1] : null;
164
+ var isLeftNeighborEnd = nextSibling && _slate.Element.isElement(nextSibling) && nextSibling.type === 'link' && selection.anchor.offset === node.text.length;
165
+ var isRightNeighborStart = prevSibling && _slate.Element.isElement(prevSibling) && prevSibling.type === 'link' && selection.anchor.offset === 0;
166
+ if (isLeftNeighborEnd) {
167
+ setCursorState({
168
+ top: top,
169
+ left: left,
170
+ type: 'prev-end'
171
+ });
172
+ } else if (isRightNeighborStart) {
173
+ setCursorState({
174
+ top: top,
175
+ left: left,
176
+ type: 'next-start'
177
+ });
178
+ } else {
179
+ setCursorState({
180
+ top: 0,
181
+ left: 0,
182
+ type: null
183
+ });
184
+ }
185
+ }
186
+ }, [editor.selection]);
70
187
  var onKeyDown = (0, _react.useCallback)(function (event) {
71
188
  var _scrollRef$current = scrollRef.current,
72
189
  scrollTop = _scrollRef$current.scrollTop,
@@ -254,7 +371,14 @@ var EditableArticle = function EditableArticle(_ref) {
254
371
  onCopy: eventProxy.onCopy,
255
372
  onCompositionStart: eventProxy.onCompositionStart,
256
373
  id: "sdoc-editor",
257
- "aria-label": "textbox"
374
+ "aria-label": "textbox",
375
+ className: "slate-content ".concat(cursorState.type ? 'hide-native-cursor' : '')
376
+ }), cursorState.type && /*#__PURE__*/_react["default"].createElement("div", {
377
+ className: "custom-cursor ".concat(cursorState.type),
378
+ style: {
379
+ top: cursorState.top,
380
+ left: cursorState.left
381
+ }
258
382
  })), /*#__PURE__*/_react["default"].createElement(_extension.SideToolbar, null), showComment && /*#__PURE__*/_react["default"].createElement(_comment["default"], {
259
383
  editor: editor,
260
384
  type: "editor"
@@ -95,7 +95,13 @@ function AIModule(_ref) {
95
95
  _content += (0, _slateToMd["default"])(item);
96
96
  });
97
97
  }
98
- setSelectedValue(_content);
98
+
99
+ // Add paragraph symbol for selected content
100
+ var newContent = _content;
101
+ if (_content.includes('\n')) {
102
+ newContent = _content.replace(/\n/g, '\n\n');
103
+ }
104
+ setSelectedValue(newContent);
99
105
  }
100
106
  var domSelection = window.getSelection();
101
107
  var domRange = domSelection.getRangeAt(0);
@@ -144,7 +150,11 @@ function AIModule(_ref) {
144
150
  var slateRect = slateDom.getBoundingClientRect();
145
151
  var content = _slate.Node.string(element);
146
152
  if (content) {
147
- setSelectedValue(content);
153
+ var _newContent = content;
154
+ if (content.includes('\n')) {
155
+ _newContent = content.replace(/\n/g, '\n\n');
156
+ }
157
+ setSelectedValue(_newContent);
148
158
  }
149
159
  var needPaddingBottomHeight = scrollTop + slateRect.bottom + _constants2.AI_MIN_HEIGHT - scrollHeight;
150
160
  if (needPaddingBottomHeight > 0) {
@@ -142,7 +142,7 @@
142
142
  }
143
143
 
144
144
  .md-rendered-html p {
145
- padding-bottom: 5px;
146
- line-height: 1.6;
145
+ padding: 5px 0;
146
+ line-height: 1.5;
147
147
  margin-bottom: 0 !important;
148
148
  }
@@ -396,9 +396,9 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
396
396
  }, []);
397
397
  var onHandleInputFocus = (0, _react.useCallback)(function (isFocus) {
398
398
  if (inputWrapperRef.current) {
399
- queueMicrotask(function () {
399
+ setTimeout(function () {
400
400
  isFocus ? inputWrapperRef.current.focus() : inputWrapperRef.current.blur();
401
- });
401
+ }, 50);
402
402
  }
403
403
  }, []);
404
404
  (0, _react.useEffect)(function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "2.0.126",
3
+ "version": "2.0.127",
4
4
  "main": "dist/index.js",
5
5
  "scripts": {
6
6
  "test": "jest",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "7af77d5a5fda5e6aaa76145cf4547f5bc66cb4b1"
73
+ "gitHead": "fadcfb916d934dc56ea439ca0221f9ff08e59563"
74
74
  }