@atlaskit/editor-plugin-toolbar 3.4.8 → 3.4.10
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 +16 -0
- package/dist/cjs/pm-plugins/experiences/selection-toolbar-open-experience.js +68 -15
- package/dist/cjs/toolbarPlugin.js +3 -0
- package/dist/es2019/pm-plugins/experiences/selection-toolbar-open-experience.js +70 -15
- package/dist/es2019/toolbarPlugin.js +3 -0
- package/dist/esm/pm-plugins/experiences/selection-toolbar-open-experience.js +68 -15
- package/dist/esm/toolbarPlugin.js +3 -0
- package/dist/types/pm-plugins/experiences/selection-toolbar-open-experience.d.ts +3 -3
- package/dist/types/toolbarPluginType.d.ts +10 -0
- package/dist/types-ts4.5/pm-plugins/experiences/selection-toolbar-open-experience.d.ts +3 -3
- package/dist/types-ts4.5/toolbarPluginType.d.ts +10 -0
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-toolbar
|
|
2
2
|
|
|
3
|
+
## 3.4.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7af1ad7f6bb6b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7af1ad7f6bb6b) -
|
|
8
|
+
Fix toolbar experience tracking failures
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 3.4.9
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`fd59b4b1d712d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd59b4b1d712d) -
|
|
16
|
+
[ux] ED-29573 Improve JSM comment responsiveness
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 3.4.8
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -23,31 +23,40 @@ var ABORT_REASON = {
|
|
|
23
23
|
* This experience tracks when the selection toolbar is opened.
|
|
24
24
|
*
|
|
25
25
|
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
26
|
-
* Success: When the selection toolbar is added to the DOM within
|
|
27
|
-
* Failure: When
|
|
28
|
-
* Abort: When selection
|
|
26
|
+
* Success: When the selection toolbar is added to the DOM within 1000ms of start
|
|
27
|
+
* Failure: When 1000ms passes without the selection toolbar being added to the DOM
|
|
28
|
+
* Abort: When selection transitions to empty or block menu is opened
|
|
29
29
|
*/
|
|
30
30
|
var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExperiencePlugin = function getSelectionToolbarOpenExperiencePlugin(_ref) {
|
|
31
31
|
var refs = _ref.refs,
|
|
32
32
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
|
|
33
|
+
var editorView;
|
|
33
34
|
var targetEl;
|
|
34
|
-
var
|
|
35
|
+
var shiftArrowKeyPressed = false;
|
|
36
|
+
var mouseDownPos;
|
|
35
37
|
var getTarget = function getTarget() {
|
|
36
38
|
if (!targetEl) {
|
|
37
|
-
|
|
39
|
+
var _editorView;
|
|
40
|
+
targetEl = refs.popupsMountPoint || (0, _experiences.getPopupContainerFromEditorView)((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
|
|
38
41
|
}
|
|
39
42
|
return targetEl;
|
|
40
43
|
};
|
|
41
44
|
var experience = new _experiences.Experience('selection-toolbar-open', {
|
|
42
45
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
43
46
|
checks: [new _experiences.ExperienceCheckTimeout({
|
|
44
|
-
durationMs:
|
|
47
|
+
durationMs: 1000,
|
|
45
48
|
onTimeout: function onTimeout() {
|
|
49
|
+
var _editorView2;
|
|
46
50
|
if (isBlockMenuWithinNode(getTarget())) {
|
|
47
51
|
return {
|
|
48
52
|
status: 'abort',
|
|
49
53
|
reason: ABORT_REASON.BLOCK_MENU_OPENED
|
|
50
54
|
};
|
|
55
|
+
} else if (isSelectionWithoutTextContent((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.state.selection)) {
|
|
56
|
+
return {
|
|
57
|
+
status: 'abort',
|
|
58
|
+
reason: ABORT_REASON.SELECTION_CLEARED
|
|
59
|
+
};
|
|
51
60
|
}
|
|
52
61
|
}
|
|
53
62
|
}), new _experiences.ExperienceCheckDomMutation({
|
|
@@ -76,36 +85,58 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
|
|
|
76
85
|
return {};
|
|
77
86
|
},
|
|
78
87
|
apply: function apply(_tr, pluginState, oldState, newState) {
|
|
79
|
-
if (!oldState.selection.empty && newState.selection
|
|
88
|
+
if (!oldState.selection.empty && isSelectionWithoutTextContent(newState.selection)) {
|
|
80
89
|
experience.abort({
|
|
81
90
|
reason: ABORT_REASON.SELECTION_CLEARED
|
|
82
91
|
});
|
|
83
92
|
}
|
|
93
|
+
if (shiftArrowKeyPressed && !newState.selection.eq(oldState.selection) && !isSelectionWithoutTextContent(newState.selection)) {
|
|
94
|
+
experience.start({
|
|
95
|
+
method: START_METHOD.KEY_DOWN
|
|
96
|
+
});
|
|
97
|
+
shiftArrowKeyPressed = false;
|
|
98
|
+
}
|
|
84
99
|
return pluginState;
|
|
85
100
|
}
|
|
86
101
|
},
|
|
87
102
|
props: {
|
|
88
103
|
handleDOMEvents: {
|
|
89
|
-
|
|
90
|
-
|
|
104
|
+
mousedown: function mousedown(_view, e) {
|
|
105
|
+
mouseDownPos = {
|
|
106
|
+
x: e.clientX,
|
|
107
|
+
y: e.clientY
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
mouseup: function mouseup(view, e) {
|
|
111
|
+
if (!mouseDownPos || isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
if (e.clientX !== mouseDownPos.x || e.clientY !== mouseDownPos.y) {
|
|
91
115
|
experience.start({
|
|
92
116
|
method: START_METHOD.MOUSE_UP
|
|
93
117
|
});
|
|
94
118
|
}
|
|
95
119
|
},
|
|
120
|
+
dblclick: function dblclick(view, e) {
|
|
121
|
+
if (isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
experience.start({
|
|
125
|
+
method: START_METHOD.MOUSE_UP
|
|
126
|
+
});
|
|
127
|
+
},
|
|
96
128
|
keydown: function keydown(_view, _ref3) {
|
|
97
129
|
var shiftKey = _ref3.shiftKey,
|
|
98
130
|
key = _ref3.key;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
131
|
+
shiftArrowKeyPressed = shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget());
|
|
132
|
+
},
|
|
133
|
+
keyup: function keyup() {
|
|
134
|
+
shiftArrowKeyPressed = false;
|
|
104
135
|
}
|
|
105
136
|
}
|
|
106
137
|
},
|
|
107
138
|
view: function view(_view2) {
|
|
108
|
-
|
|
139
|
+
editorView = _view2;
|
|
109
140
|
return {
|
|
110
141
|
destroy: function destroy() {
|
|
111
142
|
experience.abort({
|
|
@@ -126,4 +157,26 @@ var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
|
|
|
126
157
|
};
|
|
127
158
|
var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
|
|
128
159
|
return (0, _experiences.containsPopupWithNestedElement)(node, '[data-testid="editor-block-menu"]');
|
|
160
|
+
};
|
|
161
|
+
var isSelectionWithoutTextContent = function isSelectionWithoutTextContent(selection) {
|
|
162
|
+
if (!selection || selection.empty) {
|
|
163
|
+
return true;
|
|
164
|
+
}
|
|
165
|
+
var hasText = false;
|
|
166
|
+
selection.$from.doc.nodesBetween(selection.from, selection.to, function (node) {
|
|
167
|
+
if (hasText) {
|
|
168
|
+
return false;
|
|
169
|
+
}
|
|
170
|
+
if (node.isText && node.text && node.text.length > 0) {
|
|
171
|
+
hasText = true;
|
|
172
|
+
return false;
|
|
173
|
+
}
|
|
174
|
+
return true;
|
|
175
|
+
});
|
|
176
|
+
return !hasText;
|
|
177
|
+
};
|
|
178
|
+
var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(selection) {
|
|
179
|
+
var $from = selection.$from,
|
|
180
|
+
$to = selection.$to;
|
|
181
|
+
return $from.sameParent($to) && $from.parent.type.name === 'codeBlock';
|
|
129
182
|
};
|
|
@@ -99,6 +99,9 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
99
99
|
},
|
|
100
100
|
contextualFormattingMode: function contextualFormattingMode() {
|
|
101
101
|
return contextualFormattingEnabled;
|
|
102
|
+
},
|
|
103
|
+
getBreakpointPreset: function getBreakpointPreset() {
|
|
104
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_responsive_improve') ? breakpointPreset : undefined;
|
|
102
105
|
}
|
|
103
106
|
},
|
|
104
107
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -15,32 +15,41 @@ const ABORT_REASON = {
|
|
|
15
15
|
* This experience tracks when the selection toolbar is opened.
|
|
16
16
|
*
|
|
17
17
|
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
18
|
-
* Success: When the selection toolbar is added to the DOM within
|
|
19
|
-
* Failure: When
|
|
20
|
-
* Abort: When selection
|
|
18
|
+
* Success: When the selection toolbar is added to the DOM within 1000ms of start
|
|
19
|
+
* Failure: When 1000ms passes without the selection toolbar being added to the DOM
|
|
20
|
+
* Abort: When selection transitions to empty or block menu is opened
|
|
21
21
|
*/
|
|
22
22
|
export const getSelectionToolbarOpenExperiencePlugin = ({
|
|
23
23
|
refs,
|
|
24
24
|
dispatchAnalyticsEvent
|
|
25
25
|
}) => {
|
|
26
|
+
let editorView;
|
|
26
27
|
let targetEl;
|
|
27
|
-
let
|
|
28
|
+
let shiftArrowKeyPressed = false;
|
|
29
|
+
let mouseDownPos;
|
|
28
30
|
const getTarget = () => {
|
|
29
31
|
if (!targetEl) {
|
|
30
|
-
|
|
32
|
+
var _editorView;
|
|
33
|
+
targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
|
|
31
34
|
}
|
|
32
35
|
return targetEl;
|
|
33
36
|
};
|
|
34
37
|
const experience = new Experience('selection-toolbar-open', {
|
|
35
38
|
dispatchAnalyticsEvent,
|
|
36
39
|
checks: [new ExperienceCheckTimeout({
|
|
37
|
-
durationMs:
|
|
40
|
+
durationMs: 1000,
|
|
38
41
|
onTimeout: () => {
|
|
42
|
+
var _editorView2;
|
|
39
43
|
if (isBlockMenuWithinNode(getTarget())) {
|
|
40
44
|
return {
|
|
41
45
|
status: 'abort',
|
|
42
46
|
reason: ABORT_REASON.BLOCK_MENU_OPENED
|
|
43
47
|
};
|
|
48
|
+
} else if (isSelectionWithoutTextContent((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.state.selection)) {
|
|
49
|
+
return {
|
|
50
|
+
status: 'abort',
|
|
51
|
+
reason: ABORT_REASON.SELECTION_CLEARED
|
|
52
|
+
};
|
|
44
53
|
}
|
|
45
54
|
}
|
|
46
55
|
}), new ExperienceCheckDomMutation({
|
|
@@ -66,37 +75,59 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
|
|
|
66
75
|
state: {
|
|
67
76
|
init: () => ({}),
|
|
68
77
|
apply: (_tr, pluginState, oldState, newState) => {
|
|
69
|
-
if (!oldState.selection.empty && newState.selection
|
|
78
|
+
if (!oldState.selection.empty && isSelectionWithoutTextContent(newState.selection)) {
|
|
70
79
|
experience.abort({
|
|
71
80
|
reason: ABORT_REASON.SELECTION_CLEARED
|
|
72
81
|
});
|
|
73
82
|
}
|
|
83
|
+
if (shiftArrowKeyPressed && !newState.selection.eq(oldState.selection) && !isSelectionWithoutTextContent(newState.selection)) {
|
|
84
|
+
experience.start({
|
|
85
|
+
method: START_METHOD.KEY_DOWN
|
|
86
|
+
});
|
|
87
|
+
shiftArrowKeyPressed = false;
|
|
88
|
+
}
|
|
74
89
|
return pluginState;
|
|
75
90
|
}
|
|
76
91
|
},
|
|
77
92
|
props: {
|
|
78
93
|
handleDOMEvents: {
|
|
79
|
-
|
|
80
|
-
|
|
94
|
+
mousedown: (_view, e) => {
|
|
95
|
+
mouseDownPos = {
|
|
96
|
+
x: e.clientX,
|
|
97
|
+
y: e.clientY
|
|
98
|
+
};
|
|
99
|
+
},
|
|
100
|
+
mouseup: (view, e) => {
|
|
101
|
+
if (!mouseDownPos || isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
if (e.clientX !== mouseDownPos.x || e.clientY !== mouseDownPos.y) {
|
|
81
105
|
experience.start({
|
|
82
106
|
method: START_METHOD.MOUSE_UP
|
|
83
107
|
});
|
|
84
108
|
}
|
|
85
109
|
},
|
|
110
|
+
dblclick: (view, e) => {
|
|
111
|
+
if (isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
experience.start({
|
|
115
|
+
method: START_METHOD.MOUSE_UP
|
|
116
|
+
});
|
|
117
|
+
},
|
|
86
118
|
keydown: (_view, {
|
|
87
119
|
shiftKey,
|
|
88
120
|
key
|
|
89
121
|
}) => {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
122
|
+
shiftArrowKeyPressed = shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget());
|
|
123
|
+
},
|
|
124
|
+
keyup: () => {
|
|
125
|
+
shiftArrowKeyPressed = false;
|
|
95
126
|
}
|
|
96
127
|
}
|
|
97
128
|
},
|
|
98
129
|
view: view => {
|
|
99
|
-
|
|
130
|
+
editorView = view;
|
|
100
131
|
return {
|
|
101
132
|
destroy: () => {
|
|
102
133
|
experience.abort({
|
|
@@ -118,4 +149,28 @@ const isSelectionToolbarWithinNode = node => {
|
|
|
118
149
|
};
|
|
119
150
|
const isBlockMenuWithinNode = node => {
|
|
120
151
|
return containsPopupWithNestedElement(node, '[data-testid="editor-block-menu"]');
|
|
152
|
+
};
|
|
153
|
+
const isSelectionWithoutTextContent = selection => {
|
|
154
|
+
if (!selection || selection.empty) {
|
|
155
|
+
return true;
|
|
156
|
+
}
|
|
157
|
+
let hasText = false;
|
|
158
|
+
selection.$from.doc.nodesBetween(selection.from, selection.to, node => {
|
|
159
|
+
if (hasText) {
|
|
160
|
+
return false;
|
|
161
|
+
}
|
|
162
|
+
if (node.isText && node.text && node.text.length > 0) {
|
|
163
|
+
hasText = true;
|
|
164
|
+
return false;
|
|
165
|
+
}
|
|
166
|
+
return true;
|
|
167
|
+
});
|
|
168
|
+
return !hasText;
|
|
169
|
+
};
|
|
170
|
+
const isSelectionWithinCodeBlock = selection => {
|
|
171
|
+
const {
|
|
172
|
+
$from,
|
|
173
|
+
$to
|
|
174
|
+
} = selection;
|
|
175
|
+
return $from.sameParent($to) && $from.parent.type.name === 'codeBlock';
|
|
121
176
|
};
|
|
@@ -84,6 +84,9 @@ export const toolbarPlugin = ({
|
|
|
84
84
|
},
|
|
85
85
|
contextualFormattingMode: () => {
|
|
86
86
|
return contextualFormattingEnabled;
|
|
87
|
+
},
|
|
88
|
+
getBreakpointPreset: () => {
|
|
89
|
+
return fg('platform_editor_toolbar_aifc_responsive_improve') ? breakpointPreset : undefined;
|
|
87
90
|
}
|
|
88
91
|
},
|
|
89
92
|
getSharedState(editorState) {
|
|
@@ -16,31 +16,40 @@ var ABORT_REASON = {
|
|
|
16
16
|
* This experience tracks when the selection toolbar is opened.
|
|
17
17
|
*
|
|
18
18
|
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
19
|
-
* Success: When the selection toolbar is added to the DOM within
|
|
20
|
-
* Failure: When
|
|
21
|
-
* Abort: When selection
|
|
19
|
+
* Success: When the selection toolbar is added to the DOM within 1000ms of start
|
|
20
|
+
* Failure: When 1000ms passes without the selection toolbar being added to the DOM
|
|
21
|
+
* Abort: When selection transitions to empty or block menu is opened
|
|
22
22
|
*/
|
|
23
23
|
export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolbarOpenExperiencePlugin(_ref) {
|
|
24
24
|
var refs = _ref.refs,
|
|
25
25
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
|
|
26
|
+
var editorView;
|
|
26
27
|
var targetEl;
|
|
27
|
-
var
|
|
28
|
+
var shiftArrowKeyPressed = false;
|
|
29
|
+
var mouseDownPos;
|
|
28
30
|
var getTarget = function getTarget() {
|
|
29
31
|
if (!targetEl) {
|
|
30
|
-
|
|
32
|
+
var _editorView;
|
|
33
|
+
targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
|
|
31
34
|
}
|
|
32
35
|
return targetEl;
|
|
33
36
|
};
|
|
34
37
|
var experience = new Experience('selection-toolbar-open', {
|
|
35
38
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
36
39
|
checks: [new ExperienceCheckTimeout({
|
|
37
|
-
durationMs:
|
|
40
|
+
durationMs: 1000,
|
|
38
41
|
onTimeout: function onTimeout() {
|
|
42
|
+
var _editorView2;
|
|
39
43
|
if (isBlockMenuWithinNode(getTarget())) {
|
|
40
44
|
return {
|
|
41
45
|
status: 'abort',
|
|
42
46
|
reason: ABORT_REASON.BLOCK_MENU_OPENED
|
|
43
47
|
};
|
|
48
|
+
} else if (isSelectionWithoutTextContent((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.state.selection)) {
|
|
49
|
+
return {
|
|
50
|
+
status: 'abort',
|
|
51
|
+
reason: ABORT_REASON.SELECTION_CLEARED
|
|
52
|
+
};
|
|
44
53
|
}
|
|
45
54
|
}
|
|
46
55
|
}), new ExperienceCheckDomMutation({
|
|
@@ -69,36 +78,58 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
|
|
|
69
78
|
return {};
|
|
70
79
|
},
|
|
71
80
|
apply: function apply(_tr, pluginState, oldState, newState) {
|
|
72
|
-
if (!oldState.selection.empty && newState.selection
|
|
81
|
+
if (!oldState.selection.empty && isSelectionWithoutTextContent(newState.selection)) {
|
|
73
82
|
experience.abort({
|
|
74
83
|
reason: ABORT_REASON.SELECTION_CLEARED
|
|
75
84
|
});
|
|
76
85
|
}
|
|
86
|
+
if (shiftArrowKeyPressed && !newState.selection.eq(oldState.selection) && !isSelectionWithoutTextContent(newState.selection)) {
|
|
87
|
+
experience.start({
|
|
88
|
+
method: START_METHOD.KEY_DOWN
|
|
89
|
+
});
|
|
90
|
+
shiftArrowKeyPressed = false;
|
|
91
|
+
}
|
|
77
92
|
return pluginState;
|
|
78
93
|
}
|
|
79
94
|
},
|
|
80
95
|
props: {
|
|
81
96
|
handleDOMEvents: {
|
|
82
|
-
|
|
83
|
-
|
|
97
|
+
mousedown: function mousedown(_view, e) {
|
|
98
|
+
mouseDownPos = {
|
|
99
|
+
x: e.clientX,
|
|
100
|
+
y: e.clientY
|
|
101
|
+
};
|
|
102
|
+
},
|
|
103
|
+
mouseup: function mouseup(view, e) {
|
|
104
|
+
if (!mouseDownPos || isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (e.clientX !== mouseDownPos.x || e.clientY !== mouseDownPos.y) {
|
|
84
108
|
experience.start({
|
|
85
109
|
method: START_METHOD.MOUSE_UP
|
|
86
110
|
});
|
|
87
111
|
}
|
|
88
112
|
},
|
|
113
|
+
dblclick: function dblclick(view, e) {
|
|
114
|
+
if (isSelectionWithoutTextContent(view.state.selection) || isSelectionWithinCodeBlock(view.state.selection) || isSelectionToolbarWithinNode(getTarget())) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
experience.start({
|
|
118
|
+
method: START_METHOD.MOUSE_UP
|
|
119
|
+
});
|
|
120
|
+
},
|
|
89
121
|
keydown: function keydown(_view, _ref3) {
|
|
90
122
|
var shiftKey = _ref3.shiftKey,
|
|
91
123
|
key = _ref3.key;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
124
|
+
shiftArrowKeyPressed = shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget());
|
|
125
|
+
},
|
|
126
|
+
keyup: function keyup() {
|
|
127
|
+
shiftArrowKeyPressed = false;
|
|
97
128
|
}
|
|
98
129
|
}
|
|
99
130
|
},
|
|
100
131
|
view: function view(_view2) {
|
|
101
|
-
|
|
132
|
+
editorView = _view2;
|
|
102
133
|
return {
|
|
103
134
|
destroy: function destroy() {
|
|
104
135
|
experience.abort({
|
|
@@ -119,4 +150,26 @@ var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
|
|
|
119
150
|
};
|
|
120
151
|
var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
|
|
121
152
|
return containsPopupWithNestedElement(node, '[data-testid="editor-block-menu"]');
|
|
153
|
+
};
|
|
154
|
+
var isSelectionWithoutTextContent = function isSelectionWithoutTextContent(selection) {
|
|
155
|
+
if (!selection || selection.empty) {
|
|
156
|
+
return true;
|
|
157
|
+
}
|
|
158
|
+
var hasText = false;
|
|
159
|
+
selection.$from.doc.nodesBetween(selection.from, selection.to, function (node) {
|
|
160
|
+
if (hasText) {
|
|
161
|
+
return false;
|
|
162
|
+
}
|
|
163
|
+
if (node.isText && node.text && node.text.length > 0) {
|
|
164
|
+
hasText = true;
|
|
165
|
+
return false;
|
|
166
|
+
}
|
|
167
|
+
return true;
|
|
168
|
+
});
|
|
169
|
+
return !hasText;
|
|
170
|
+
};
|
|
171
|
+
var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(selection) {
|
|
172
|
+
var $from = selection.$from,
|
|
173
|
+
$to = selection.$to;
|
|
174
|
+
return $from.sameParent($to) && $from.parent.type.name === 'codeBlock';
|
|
122
175
|
};
|
|
@@ -92,6 +92,9 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
92
92
|
},
|
|
93
93
|
contextualFormattingMode: function contextualFormattingMode() {
|
|
94
94
|
return contextualFormattingEnabled;
|
|
95
|
+
},
|
|
96
|
+
getBreakpointPreset: function getBreakpointPreset() {
|
|
97
|
+
return fg('platform_editor_toolbar_aifc_responsive_improve') ? breakpointPreset : undefined;
|
|
95
98
|
}
|
|
96
99
|
},
|
|
97
100
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -10,9 +10,9 @@ type SelectionToolbarOpenExperienceOptions = {
|
|
|
10
10
|
* This experience tracks when the selection toolbar is opened.
|
|
11
11
|
*
|
|
12
12
|
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
13
|
-
* Success: When the selection toolbar is added to the DOM within
|
|
14
|
-
* Failure: When
|
|
15
|
-
* Abort: When selection
|
|
13
|
+
* Success: When the selection toolbar is added to the DOM within 1000ms of start
|
|
14
|
+
* Failure: When 1000ms passes without the selection toolbar being added to the DOM
|
|
15
|
+
* Abort: When selection transitions to empty or block menu is opened
|
|
16
16
|
*/
|
|
17
17
|
export declare const getSelectionToolbarOpenExperiencePlugin: ({ refs, dispatchAnalyticsEvent, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
18
18
|
export {};
|
|
@@ -7,6 +7,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
|
7
7
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
8
8
|
import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
|
|
9
9
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
10
|
+
import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
|
|
10
11
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
11
12
|
import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
|
|
12
13
|
export type EditorToolbarPluginState = {
|
|
@@ -32,6 +33,15 @@ export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
|
|
|
32
33
|
* - `controlled`: Both inline and primary toolbars are available
|
|
33
34
|
*/
|
|
34
35
|
contextualFormattingMode: () => ContextualFormattingEnabledOptions;
|
|
36
|
+
/**
|
|
37
|
+
* Returns the breakpoint preset configuration for the toolbar.
|
|
38
|
+
*
|
|
39
|
+
* This method retrieves the breakpoint preset that determines how the toolbar
|
|
40
|
+
* responds to different viewport sizes and layouts.
|
|
41
|
+
*
|
|
42
|
+
* @returns The configured breakpoint preset, or `undefined` if not set.
|
|
43
|
+
*/
|
|
44
|
+
getBreakpointPreset: () => BreakpointPreset | undefined;
|
|
35
45
|
getComponents: () => Array<RegisterComponent>;
|
|
36
46
|
registerComponents: RegisterComponentsAction;
|
|
37
47
|
};
|
|
@@ -10,9 +10,9 @@ type SelectionToolbarOpenExperienceOptions = {
|
|
|
10
10
|
* This experience tracks when the selection toolbar is opened.
|
|
11
11
|
*
|
|
12
12
|
* Start: When user makes a selection via mouseup or shift+arrow key down
|
|
13
|
-
* Success: When the selection toolbar is added to the DOM within
|
|
14
|
-
* Failure: When
|
|
15
|
-
* Abort: When selection
|
|
13
|
+
* Success: When the selection toolbar is added to the DOM within 1000ms of start
|
|
14
|
+
* Failure: When 1000ms passes without the selection toolbar being added to the DOM
|
|
15
|
+
* Abort: When selection transitions to empty or block menu is opened
|
|
16
16
|
*/
|
|
17
17
|
export declare const getSelectionToolbarOpenExperiencePlugin: ({ refs, dispatchAnalyticsEvent, }: SelectionToolbarOpenExperienceOptions) => SafePlugin<{}>;
|
|
18
18
|
export {};
|
|
@@ -7,6 +7,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
|
7
7
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
8
8
|
import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
|
|
9
9
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
10
|
+
import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
|
|
10
11
|
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
11
12
|
import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
|
|
12
13
|
export type EditorToolbarPluginState = {
|
|
@@ -32,6 +33,15 @@ export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
|
|
|
32
33
|
* - `controlled`: Both inline and primary toolbars are available
|
|
33
34
|
*/
|
|
34
35
|
contextualFormattingMode: () => ContextualFormattingEnabledOptions;
|
|
36
|
+
/**
|
|
37
|
+
* Returns the breakpoint preset configuration for the toolbar.
|
|
38
|
+
*
|
|
39
|
+
* This method retrieves the breakpoint preset that determines how the toolbar
|
|
40
|
+
* responds to different viewport sizes and layouts.
|
|
41
|
+
*
|
|
42
|
+
* @returns The configured breakpoint preset, or `undefined` if not set.
|
|
43
|
+
*/
|
|
44
|
+
getBreakpointPreset: () => BreakpointPreset | undefined;
|
|
35
45
|
getComponents: () => Array<RegisterComponent>;
|
|
36
46
|
registerComponents: RegisterComponentsAction;
|
|
37
47
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-toolbar",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.10",
|
|
4
4
|
"description": "Toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"@atlaskit/editor-toolbar-model": "^0.2.0",
|
|
41
41
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^13.
|
|
43
|
+
"@atlaskit/tmp-editor-statsig": "^13.42.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"bind-event-listener": "^3.0.0",
|
|
46
46
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@atlaskit/editor-common": "^110.
|
|
49
|
+
"@atlaskit/editor-common": "^110.33.0",
|
|
50
50
|
"react": "^18.2.0"
|
|
51
51
|
},
|
|
52
52
|
"platform-feature-flags": {
|
|
@@ -58,6 +58,9 @@
|
|
|
58
58
|
},
|
|
59
59
|
"platform_editor_toolbar_aifc_placement_config": {
|
|
60
60
|
"type": "boolean"
|
|
61
|
+
},
|
|
62
|
+
"platform_editor_toolbar_aifc_responsive_improve": {
|
|
63
|
+
"type": "boolean"
|
|
61
64
|
}
|
|
62
65
|
},
|
|
63
66
|
"techstack": {
|