@atlaskit/editor-plugin-selection 1.0.2 → 1.1.0
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.
- package/CHANGELOG.md +10 -0
- package/dist/cjs/pm-plugins/events/keydown.js +66 -50
- package/dist/cjs/pm-plugins/selection-main.js +3 -1
- package/dist/es2019/pm-plugins/events/keydown.js +69 -50
- package/dist/es2019/pm-plugins/selection-main.js +4 -2
- package/dist/esm/pm-plugins/events/keydown.js +65 -49
- package/dist/esm/pm-plugins/selection-main.js +4 -2
- package/dist/types/pm-plugins/events/keydown.d.ts +3 -1
- package/dist/types/types.d.ts +10 -0
- package/dist/types-ts4.5/pm-plugins/events/keydown.d.ts +3 -1
- package/dist/types-ts4.5/types.d.ts +10 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#75042](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75042) [`ce823f018248`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce823f018248) - [ux] ED-21987 Diverge expands in live pages so that they are not multiplayer, and are closed by default.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 1.0.2
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.createOnKeydown = createOnKeydown;
|
|
7
7
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
8
|
/*
|
|
9
9
|
* The way expand was built, no browser reconize selection on it.
|
|
@@ -16,8 +16,9 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
16
16
|
* when a collapsed exxpand is the next node in the common depth.
|
|
17
17
|
* If that is true, we create a new TextSelection and stop the event bubble
|
|
18
18
|
*/
|
|
19
|
-
var isCollpasedExpand = function isCollpasedExpand(node) {
|
|
20
|
-
|
|
19
|
+
var isCollpasedExpand = function isCollpasedExpand(node, _ref) {
|
|
20
|
+
var __livePage = _ref.__livePage;
|
|
21
|
+
return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && (__livePage ? node.attrs.__expanded : !node.attrs.__expanded));
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
/**
|
|
@@ -38,10 +39,14 @@ var isBodiedExtension = function isBodiedExtension(node) {
|
|
|
38
39
|
var isTable = function isTable(node) {
|
|
39
40
|
return Boolean(node && ['table'].includes(node.type.name));
|
|
40
41
|
};
|
|
41
|
-
var isProblematicNode = function isProblematicNode(node) {
|
|
42
|
-
|
|
42
|
+
var isProblematicNode = function isProblematicNode(node, _ref2) {
|
|
43
|
+
var __livePage = _ref2.__livePage;
|
|
44
|
+
return isCollpasedExpand(node, {
|
|
45
|
+
__livePage: __livePage
|
|
46
|
+
}) || isBodiedExtension(node) || isTable(node);
|
|
43
47
|
};
|
|
44
|
-
var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
|
|
48
|
+
var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction, _ref3) {
|
|
49
|
+
var __livePage = _ref3.__livePage;
|
|
45
50
|
if ($head.pos === 0 || $head.depth === 0) {
|
|
46
51
|
return null;
|
|
47
52
|
}
|
|
@@ -49,7 +54,9 @@ var findFixedProblematicNodePosition = function findFixedProblematicNodePosition
|
|
|
49
54
|
var pos = $head.before();
|
|
50
55
|
var $posResolved = $head.doc.resolve(pos);
|
|
51
56
|
var maybeProblematicNode = $posResolved.nodeBefore;
|
|
52
|
-
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode
|
|
57
|
+
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode, {
|
|
58
|
+
__livePage: __livePage
|
|
59
|
+
})) {
|
|
53
60
|
var nodeSize = maybeProblematicNode.nodeSize;
|
|
54
61
|
var nodeStartPosition = pos - nodeSize;
|
|
55
62
|
|
|
@@ -65,7 +72,9 @@ var findFixedProblematicNodePosition = function findFixedProblematicNodePosition
|
|
|
65
72
|
if (direction === 'down') {
|
|
66
73
|
var _pos = $head.after();
|
|
67
74
|
var _maybeProblematicNode = doc.nodeAt(_pos);
|
|
68
|
-
if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode
|
|
75
|
+
if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode, {
|
|
76
|
+
__livePage: __livePage
|
|
77
|
+
}) && $head.pos + 1 === _pos) {
|
|
69
78
|
var _nodeSize = _maybeProblematicNode.nodeSize;
|
|
70
79
|
var nodePosition = _pos + _nodeSize;
|
|
71
80
|
var _startPosNode = Math.max(nodePosition, 0);
|
|
@@ -106,47 +115,54 @@ var isNavigatingVerticallyWhenCursorIsInsideInlineNode = function isNavigatingVe
|
|
|
106
115
|
var isNavigatingInlineNodeDownward = event.key === 'ArrowDown' && Boolean((_selection$$cursor$no3 = selection.$cursor.nodeBefore) === null || _selection$$cursor$no3 === void 0 ? void 0 : _selection$$cursor$no3.isInline) && Boolean((_selection$$cursor$no4 = selection.$cursor.nodeAfter) === null || _selection$$cursor$no4 === void 0 ? void 0 : _selection$$cursor$no4.isInline);
|
|
107
116
|
return isNavigatingInlineNodeDownward;
|
|
108
117
|
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
$
|
|
134
|
-
|
|
135
|
-
|
|
118
|
+
function createOnKeydown(_ref4) {
|
|
119
|
+
var _ref4$__livePage = _ref4.__livePage,
|
|
120
|
+
__livePage = _ref4$__livePage === void 0 ? false : _ref4$__livePage;
|
|
121
|
+
function onKeydown(view, event) {
|
|
122
|
+
/*
|
|
123
|
+
* This workaround is needed for some specific situations.
|
|
124
|
+
* - expand collapse
|
|
125
|
+
* - bodied extension
|
|
126
|
+
*/
|
|
127
|
+
if (!(event instanceof KeyboardEvent)) {
|
|
128
|
+
return false;
|
|
129
|
+
}
|
|
130
|
+
if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
|
|
131
|
+
return true;
|
|
132
|
+
}
|
|
133
|
+
if (isNavigatingVerticallyWhenCursorIsInsideInlineNode(view, event)) {
|
|
134
|
+
return true;
|
|
135
|
+
}
|
|
136
|
+
if (!event.shiftKey || event.ctrlKey || event.metaKey) {
|
|
137
|
+
return false;
|
|
138
|
+
}
|
|
139
|
+
if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
|
|
140
|
+
return false;
|
|
141
|
+
}
|
|
142
|
+
var _view$state2 = view.state,
|
|
143
|
+
doc = _view$state2.doc,
|
|
144
|
+
_view$state2$selectio = _view$state2.selection,
|
|
145
|
+
$head = _view$state2$selectio.$head,
|
|
146
|
+
$anchor = _view$state2$selectio.$anchor;
|
|
147
|
+
if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
|
|
148
|
+
return false;
|
|
149
|
+
}
|
|
150
|
+
var direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
|
|
151
|
+
var $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction, {
|
|
152
|
+
__livePage: __livePage
|
|
153
|
+
});
|
|
154
|
+
if ($fixedProblematicNodePosition) {
|
|
155
|
+
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
156
|
+
var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
157
|
+
var head = $fixedProblematicNodePosition.pos + headOffset;
|
|
158
|
+
var forcedTextSelection = _state.TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
159
|
+
var tr = view.state.tr;
|
|
160
|
+
tr.setSelection(forcedTextSelection);
|
|
161
|
+
view.dispatch(tr);
|
|
162
|
+
event.preventDefault();
|
|
163
|
+
return true;
|
|
164
|
+
}
|
|
136
165
|
return false;
|
|
137
166
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if ($fixedProblematicNodePosition) {
|
|
141
|
-
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
142
|
-
var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
143
|
-
var head = $fixedProblematicNodePosition.pos + headOffset;
|
|
144
|
-
var forcedTextSelection = _state.TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
145
|
-
var tr = view.state.tr;
|
|
146
|
-
tr.setSelection(forcedTextSelection);
|
|
147
|
-
view.dispatch(tr);
|
|
148
|
-
event.preventDefault();
|
|
149
|
-
return true;
|
|
150
|
-
}
|
|
151
|
-
return false;
|
|
152
|
-
};
|
|
167
|
+
return onKeydown;
|
|
168
|
+
}
|
|
@@ -84,7 +84,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
|
|
|
84
84
|
return (0, _pluginFactory.getPluginState)(state).decorationSet;
|
|
85
85
|
},
|
|
86
86
|
handleDOMEvents: {
|
|
87
|
-
keydown: _keydown.
|
|
87
|
+
keydown: (0, _keydown.createOnKeydown)({
|
|
88
|
+
__livePage: options.__livePage
|
|
89
|
+
}),
|
|
88
90
|
// We only want to fire analytics for a click and drag range/cell selection when
|
|
89
91
|
// the user has finished, otherwise we will get an event almost every time they move
|
|
90
92
|
// their mouse which is too much
|
|
@@ -10,8 +10,10 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
10
10
|
* when a collapsed exxpand is the next node in the common depth.
|
|
11
11
|
* If that is true, we create a new TextSelection and stop the event bubble
|
|
12
12
|
*/
|
|
13
|
-
const isCollpasedExpand = node
|
|
14
|
-
|
|
13
|
+
const isCollpasedExpand = (node, {
|
|
14
|
+
__livePage
|
|
15
|
+
}) => {
|
|
16
|
+
return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && (__livePage ? node.attrs.__expanded : !node.attrs.__expanded));
|
|
15
17
|
};
|
|
16
18
|
|
|
17
19
|
/**
|
|
@@ -32,10 +34,16 @@ const isBodiedExtension = node => {
|
|
|
32
34
|
const isTable = node => {
|
|
33
35
|
return Boolean(node && ['table'].includes(node.type.name));
|
|
34
36
|
};
|
|
35
|
-
const isProblematicNode = node
|
|
36
|
-
|
|
37
|
+
const isProblematicNode = (node, {
|
|
38
|
+
__livePage
|
|
39
|
+
}) => {
|
|
40
|
+
return isCollpasedExpand(node, {
|
|
41
|
+
__livePage
|
|
42
|
+
}) || isBodiedExtension(node) || isTable(node);
|
|
37
43
|
};
|
|
38
|
-
const findFixedProblematicNodePosition = (doc, $head, direction
|
|
44
|
+
const findFixedProblematicNodePosition = (doc, $head, direction, {
|
|
45
|
+
__livePage
|
|
46
|
+
}) => {
|
|
39
47
|
if ($head.pos === 0 || $head.depth === 0) {
|
|
40
48
|
return null;
|
|
41
49
|
}
|
|
@@ -43,7 +51,9 @@ const findFixedProblematicNodePosition = (doc, $head, direction) => {
|
|
|
43
51
|
const pos = $head.before();
|
|
44
52
|
const $posResolved = $head.doc.resolve(pos);
|
|
45
53
|
const maybeProblematicNode = $posResolved.nodeBefore;
|
|
46
|
-
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode
|
|
54
|
+
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode, {
|
|
55
|
+
__livePage
|
|
56
|
+
})) {
|
|
47
57
|
const nodeSize = maybeProblematicNode.nodeSize;
|
|
48
58
|
const nodeStartPosition = pos - nodeSize;
|
|
49
59
|
|
|
@@ -59,7 +69,9 @@ const findFixedProblematicNodePosition = (doc, $head, direction) => {
|
|
|
59
69
|
if (direction === 'down') {
|
|
60
70
|
const pos = $head.after();
|
|
61
71
|
const maybeProblematicNode = doc.nodeAt(pos);
|
|
62
|
-
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode
|
|
72
|
+
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode, {
|
|
73
|
+
__livePage
|
|
74
|
+
}) && $head.pos + 1 === pos) {
|
|
63
75
|
const nodeSize = maybeProblematicNode.nodeSize;
|
|
64
76
|
const nodePosition = pos + nodeSize;
|
|
65
77
|
const startPosNode = Math.max(nodePosition, 0);
|
|
@@ -100,49 +112,56 @@ const isNavigatingVerticallyWhenCursorIsInsideInlineNode = (view, event) => {
|
|
|
100
112
|
const isNavigatingInlineNodeDownward = event.key === 'ArrowDown' && Boolean((_selection$$cursor$no3 = selection.$cursor.nodeBefore) === null || _selection$$cursor$no3 === void 0 ? void 0 : _selection$$cursor$no3.isInline) && Boolean((_selection$$cursor$no4 = selection.$cursor.nodeAfter) === null || _selection$$cursor$no4 === void 0 ? void 0 : _selection$$cursor$no4.isInline);
|
|
101
113
|
return isNavigatingInlineNodeDownward;
|
|
102
114
|
};
|
|
103
|
-
export
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
115
|
+
export function createOnKeydown({
|
|
116
|
+
__livePage = false
|
|
117
|
+
}) {
|
|
118
|
+
function onKeydown(view, event) {
|
|
119
|
+
/*
|
|
120
|
+
* This workaround is needed for some specific situations.
|
|
121
|
+
* - expand collapse
|
|
122
|
+
* - bodied extension
|
|
123
|
+
*/
|
|
124
|
+
if (!(event instanceof KeyboardEvent)) {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
|
|
128
|
+
return true;
|
|
129
|
+
}
|
|
130
|
+
if (isNavigatingVerticallyWhenCursorIsInsideInlineNode(view, event)) {
|
|
131
|
+
return true;
|
|
132
|
+
}
|
|
133
|
+
if (!event.shiftKey || event.ctrlKey || event.metaKey) {
|
|
134
|
+
return false;
|
|
135
|
+
}
|
|
136
|
+
if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
|
|
137
|
+
return false;
|
|
138
|
+
}
|
|
139
|
+
const {
|
|
140
|
+
doc,
|
|
141
|
+
selection: {
|
|
142
|
+
$head,
|
|
143
|
+
$anchor
|
|
144
|
+
}
|
|
145
|
+
} = view.state;
|
|
146
|
+
if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
|
|
147
|
+
return false;
|
|
148
|
+
}
|
|
149
|
+
const direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
|
|
150
|
+
const $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction, {
|
|
151
|
+
__livePage
|
|
152
|
+
});
|
|
153
|
+
if ($fixedProblematicNodePosition) {
|
|
154
|
+
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
155
|
+
const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
156
|
+
const head = $fixedProblematicNodePosition.pos + headOffset;
|
|
157
|
+
const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
158
|
+
const tr = view.state.tr;
|
|
159
|
+
tr.setSelection(forcedTextSelection);
|
|
160
|
+
view.dispatch(tr);
|
|
161
|
+
event.preventDefault();
|
|
162
|
+
return true;
|
|
129
163
|
}
|
|
130
|
-
} = view.state;
|
|
131
|
-
if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
|
|
132
164
|
return false;
|
|
133
165
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if ($fixedProblematicNodePosition) {
|
|
137
|
-
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
138
|
-
const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
139
|
-
const head = $fixedProblematicNodePosition.pos + headOffset;
|
|
140
|
-
const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
141
|
-
const tr = view.state.tr;
|
|
142
|
-
tr.setSelection(forcedTextSelection);
|
|
143
|
-
view.dispatch(tr);
|
|
144
|
-
event.preventDefault();
|
|
145
|
-
return true;
|
|
146
|
-
}
|
|
147
|
-
return false;
|
|
148
|
-
};
|
|
166
|
+
return onKeydown;
|
|
167
|
+
}
|
|
@@ -5,7 +5,7 @@ import { createPluginState, getPluginState } from '../plugin-factory';
|
|
|
5
5
|
import { selectionPluginKey } from '../types';
|
|
6
6
|
import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, shouldRecalcDecorations } from '../utils';
|
|
7
7
|
import { onCreateSelectionBetween } from './events/create-selection-between';
|
|
8
|
-
import {
|
|
8
|
+
import { createOnKeydown } from './events/keydown';
|
|
9
9
|
export const getInitialState = state => ({
|
|
10
10
|
decorationSet: getDecorations(state.tr),
|
|
11
11
|
selection: state.selection
|
|
@@ -77,7 +77,9 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
|
|
|
77
77
|
return getPluginState(state).decorationSet;
|
|
78
78
|
},
|
|
79
79
|
handleDOMEvents: {
|
|
80
|
-
keydown:
|
|
80
|
+
keydown: createOnKeydown({
|
|
81
|
+
__livePage: options.__livePage
|
|
82
|
+
}),
|
|
81
83
|
// We only want to fire analytics for a click and drag range/cell selection when
|
|
82
84
|
// the user has finished, otherwise we will get an event almost every time they move
|
|
83
85
|
// their mouse which is too much
|
|
@@ -10,8 +10,9 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
10
10
|
* when a collapsed exxpand is the next node in the common depth.
|
|
11
11
|
* If that is true, we create a new TextSelection and stop the event bubble
|
|
12
12
|
*/
|
|
13
|
-
var isCollpasedExpand = function isCollpasedExpand(node) {
|
|
14
|
-
|
|
13
|
+
var isCollpasedExpand = function isCollpasedExpand(node, _ref) {
|
|
14
|
+
var __livePage = _ref.__livePage;
|
|
15
|
+
return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && (__livePage ? node.attrs.__expanded : !node.attrs.__expanded));
|
|
15
16
|
};
|
|
16
17
|
|
|
17
18
|
/**
|
|
@@ -32,10 +33,14 @@ var isBodiedExtension = function isBodiedExtension(node) {
|
|
|
32
33
|
var isTable = function isTable(node) {
|
|
33
34
|
return Boolean(node && ['table'].includes(node.type.name));
|
|
34
35
|
};
|
|
35
|
-
var isProblematicNode = function isProblematicNode(node) {
|
|
36
|
-
|
|
36
|
+
var isProblematicNode = function isProblematicNode(node, _ref2) {
|
|
37
|
+
var __livePage = _ref2.__livePage;
|
|
38
|
+
return isCollpasedExpand(node, {
|
|
39
|
+
__livePage: __livePage
|
|
40
|
+
}) || isBodiedExtension(node) || isTable(node);
|
|
37
41
|
};
|
|
38
|
-
var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
|
|
42
|
+
var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction, _ref3) {
|
|
43
|
+
var __livePage = _ref3.__livePage;
|
|
39
44
|
if ($head.pos === 0 || $head.depth === 0) {
|
|
40
45
|
return null;
|
|
41
46
|
}
|
|
@@ -43,7 +48,9 @@ var findFixedProblematicNodePosition = function findFixedProblematicNodePosition
|
|
|
43
48
|
var pos = $head.before();
|
|
44
49
|
var $posResolved = $head.doc.resolve(pos);
|
|
45
50
|
var maybeProblematicNode = $posResolved.nodeBefore;
|
|
46
|
-
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode
|
|
51
|
+
if (maybeProblematicNode && isProblematicNode(maybeProblematicNode, {
|
|
52
|
+
__livePage: __livePage
|
|
53
|
+
})) {
|
|
47
54
|
var nodeSize = maybeProblematicNode.nodeSize;
|
|
48
55
|
var nodeStartPosition = pos - nodeSize;
|
|
49
56
|
|
|
@@ -59,7 +66,9 @@ var findFixedProblematicNodePosition = function findFixedProblematicNodePosition
|
|
|
59
66
|
if (direction === 'down') {
|
|
60
67
|
var _pos = $head.after();
|
|
61
68
|
var _maybeProblematicNode = doc.nodeAt(_pos);
|
|
62
|
-
if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode
|
|
69
|
+
if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode, {
|
|
70
|
+
__livePage: __livePage
|
|
71
|
+
}) && $head.pos + 1 === _pos) {
|
|
63
72
|
var _nodeSize = _maybeProblematicNode.nodeSize;
|
|
64
73
|
var nodePosition = _pos + _nodeSize;
|
|
65
74
|
var _startPosNode = Math.max(nodePosition, 0);
|
|
@@ -100,47 +109,54 @@ var isNavigatingVerticallyWhenCursorIsInsideInlineNode = function isNavigatingVe
|
|
|
100
109
|
var isNavigatingInlineNodeDownward = event.key === 'ArrowDown' && Boolean((_selection$$cursor$no3 = selection.$cursor.nodeBefore) === null || _selection$$cursor$no3 === void 0 ? void 0 : _selection$$cursor$no3.isInline) && Boolean((_selection$$cursor$no4 = selection.$cursor.nodeAfter) === null || _selection$$cursor$no4 === void 0 ? void 0 : _selection$$cursor$no4.isInline);
|
|
101
110
|
return isNavigatingInlineNodeDownward;
|
|
102
111
|
};
|
|
103
|
-
export
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
$
|
|
128
|
-
|
|
129
|
-
|
|
112
|
+
export function createOnKeydown(_ref4) {
|
|
113
|
+
var _ref4$__livePage = _ref4.__livePage,
|
|
114
|
+
__livePage = _ref4$__livePage === void 0 ? false : _ref4$__livePage;
|
|
115
|
+
function onKeydown(view, event) {
|
|
116
|
+
/*
|
|
117
|
+
* This workaround is needed for some specific situations.
|
|
118
|
+
* - expand collapse
|
|
119
|
+
* - bodied extension
|
|
120
|
+
*/
|
|
121
|
+
if (!(event instanceof KeyboardEvent)) {
|
|
122
|
+
return false;
|
|
123
|
+
}
|
|
124
|
+
if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
|
|
125
|
+
return true;
|
|
126
|
+
}
|
|
127
|
+
if (isNavigatingVerticallyWhenCursorIsInsideInlineNode(view, event)) {
|
|
128
|
+
return true;
|
|
129
|
+
}
|
|
130
|
+
if (!event.shiftKey || event.ctrlKey || event.metaKey) {
|
|
131
|
+
return false;
|
|
132
|
+
}
|
|
133
|
+
if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
|
|
134
|
+
return false;
|
|
135
|
+
}
|
|
136
|
+
var _view$state2 = view.state,
|
|
137
|
+
doc = _view$state2.doc,
|
|
138
|
+
_view$state2$selectio = _view$state2.selection,
|
|
139
|
+
$head = _view$state2$selectio.$head,
|
|
140
|
+
$anchor = _view$state2$selectio.$anchor;
|
|
141
|
+
if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
|
|
142
|
+
return false;
|
|
143
|
+
}
|
|
144
|
+
var direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
|
|
145
|
+
var $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction, {
|
|
146
|
+
__livePage: __livePage
|
|
147
|
+
});
|
|
148
|
+
if ($fixedProblematicNodePosition) {
|
|
149
|
+
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
150
|
+
var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
151
|
+
var head = $fixedProblematicNodePosition.pos + headOffset;
|
|
152
|
+
var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
153
|
+
var tr = view.state.tr;
|
|
154
|
+
tr.setSelection(forcedTextSelection);
|
|
155
|
+
view.dispatch(tr);
|
|
156
|
+
event.preventDefault();
|
|
157
|
+
return true;
|
|
158
|
+
}
|
|
130
159
|
return false;
|
|
131
160
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
if ($fixedProblematicNodePosition) {
|
|
135
|
-
// an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
|
|
136
|
-
var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
|
|
137
|
-
var head = $fixedProblematicNodePosition.pos + headOffset;
|
|
138
|
-
var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
|
|
139
|
-
var tr = view.state.tr;
|
|
140
|
-
tr.setSelection(forcedTextSelection);
|
|
141
|
-
view.dispatch(tr);
|
|
142
|
-
event.preventDefault();
|
|
143
|
-
return true;
|
|
144
|
-
}
|
|
145
|
-
return false;
|
|
146
|
-
};
|
|
161
|
+
return onKeydown;
|
|
162
|
+
}
|
|
@@ -5,7 +5,7 @@ import { createPluginState, getPluginState } from '../plugin-factory';
|
|
|
5
5
|
import { selectionPluginKey } from '../types';
|
|
6
6
|
import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, shouldRecalcDecorations } from '../utils';
|
|
7
7
|
import { onCreateSelectionBetween } from './events/create-selection-between';
|
|
8
|
-
import {
|
|
8
|
+
import { createOnKeydown } from './events/keydown';
|
|
9
9
|
export var getInitialState = function getInitialState(state) {
|
|
10
10
|
return {
|
|
11
11
|
decorationSet: getDecorations(state.tr),
|
|
@@ -78,7 +78,9 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
|
|
|
78
78
|
return getPluginState(state).decorationSet;
|
|
79
79
|
},
|
|
80
80
|
handleDOMEvents: {
|
|
81
|
-
keydown:
|
|
81
|
+
keydown: createOnKeydown({
|
|
82
|
+
__livePage: options.__livePage
|
|
83
|
+
}),
|
|
82
84
|
// We only want to fire analytics for a click and drag range/cell selection when
|
|
83
85
|
// the user has finished, otherwise we will get an event almost every time they move
|
|
84
86
|
// their mouse which is too much
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
export declare
|
|
2
|
+
export declare function createOnKeydown({ __livePage, }: {
|
|
3
|
+
__livePage?: boolean;
|
|
4
|
+
}): (view: EditorView, event: Event) => boolean;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -17,4 +17,14 @@ export type EditorSelectionAPI = {
|
|
|
17
17
|
selectNearNode: SetSelectionRelativeToNode;
|
|
18
18
|
};
|
|
19
19
|
export interface SelectionPluginOptions extends LongPressSelectionPluginOptions {
|
|
20
|
+
/**
|
|
21
|
+
* There is expected to be temporary divergence between Live Page editor expand behaviour and the standard expand behaviour.
|
|
22
|
+
*
|
|
23
|
+
* This is expected to be removed in Q4 as Editor and Live Page teams align on a singular behaviour.
|
|
24
|
+
*
|
|
25
|
+
* It is only supported for use by Confluence.
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
__livePage?: boolean;
|
|
20
30
|
}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
export declare
|
|
2
|
+
export declare function createOnKeydown({ __livePage, }: {
|
|
3
|
+
__livePage?: boolean;
|
|
4
|
+
}): (view: EditorView, event: Event) => boolean;
|
|
@@ -17,4 +17,14 @@ export type EditorSelectionAPI = {
|
|
|
17
17
|
selectNearNode: SetSelectionRelativeToNode;
|
|
18
18
|
};
|
|
19
19
|
export interface SelectionPluginOptions extends LongPressSelectionPluginOptions {
|
|
20
|
+
/**
|
|
21
|
+
* There is expected to be temporary divergence between Live Page editor expand behaviour and the standard expand behaviour.
|
|
22
|
+
*
|
|
23
|
+
* This is expected to be removed in Q4 as Editor and Live Page teams align on a singular behaviour.
|
|
24
|
+
*
|
|
25
|
+
* It is only supported for use by Confluence.
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
__livePage?: boolean;
|
|
20
30
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-selection",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Selection plugin for @atlaskit/editor-core",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"runReact18": false
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@atlaskit/editor-common": "^78.
|
|
24
|
+
"@atlaskit/editor-common": "^78.4.0",
|
|
25
25
|
"@atlaskit/editor-prosemirror": "3.0.0",
|
|
26
26
|
"@atlaskit/editor-shared-styles": "^2.9.0",
|
|
27
27
|
"@atlaskit/editor-tables": "^2.5.0",
|