@atlaskit/editor-plugin-media 1.22.5 → 1.22.6
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 +8 -0
- package/dist/cjs/nodeviews/mediaNodeView/media.js +31 -34
- package/dist/cjs/nodeviews/mediaSingle.js +4 -6
- package/dist/cjs/pm-plugins/keymap.js +1 -3
- package/dist/cjs/pm-plugins/main.js +37 -42
- package/dist/es2019/nodeviews/mediaNodeView/media.js +30 -33
- package/dist/es2019/nodeviews/mediaSingle.js +4 -6
- package/dist/es2019/pm-plugins/keymap.js +1 -3
- package/dist/es2019/pm-plugins/main.js +41 -46
- package/dist/esm/nodeviews/mediaNodeView/media.js +31 -34
- package/dist/esm/nodeviews/mediaSingle.js +4 -6
- package/dist/esm/pm-plugins/keymap.js +1 -3
- package/dist/esm/pm-plugins/main.js +37 -42
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 1.22.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#116846](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116846)
|
|
8
|
+
[`b9c3dabe8ea72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9c3dabe8ea72) -
|
|
9
|
+
ECA11Y-66: Make video controls accessible for keyboard users, feature flag removal
|
|
10
|
+
|
|
3
11
|
## 1.22.5
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -22,7 +22,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
|
|
|
22
22
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
23
23
|
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
24
24
|
var _mediaCard = require("@atlaskit/media-card");
|
|
25
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
25
|
var _pluginKey = require("../../pm-plugins/plugin-key");
|
|
27
26
|
var _styles = require("../styles");
|
|
28
27
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -154,7 +153,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
154
153
|
var _this$mediaPluginStat3;
|
|
155
154
|
var node = this.props.node;
|
|
156
155
|
(_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 || _this$mediaPluginStat3.handleMediaNodeUnmount(node);
|
|
157
|
-
if (
|
|
156
|
+
if (this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
|
|
158
157
|
this.unbindKeyDown();
|
|
159
158
|
}
|
|
160
159
|
}
|
|
@@ -170,7 +169,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
170
169
|
(_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 || _this$mediaPluginStat5.updateElement();
|
|
171
170
|
this.setViewMediaClientConfig();
|
|
172
171
|
// this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
|
|
173
|
-
if (
|
|
172
|
+
if (this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
|
|
174
173
|
var _this$mediaPluginStat6;
|
|
175
174
|
if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
|
|
176
175
|
var _this$mediaPluginStat7;
|
|
@@ -184,40 +183,38 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
184
183
|
}, {
|
|
185
184
|
key: "bindKeydown",
|
|
186
185
|
value: function bindKeydown() {
|
|
187
|
-
var _this2 = this
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
(_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
|
|
207
|
-
}
|
|
186
|
+
var _this2 = this,
|
|
187
|
+
_this$videoControlsWr;
|
|
188
|
+
var onKeydown = function onKeydown(event) {
|
|
189
|
+
if (event.key === 'Tab') {
|
|
190
|
+
var _this2$videoControlsW;
|
|
191
|
+
// Add focus trap for controls panel
|
|
192
|
+
var firstElement;
|
|
193
|
+
var lastElement;
|
|
194
|
+
var focusableElements = (_this2$videoControlsW = _this2.videoControlsWrapperRef) === null || _this2$videoControlsW === void 0 || (_this2$videoControlsW = _this2$videoControlsW.current) === null || _this2$videoControlsW === void 0 ? void 0 : _this2$videoControlsW.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
|
|
195
|
+
if (focusableElements && focusableElements.length) {
|
|
196
|
+
firstElement = focusableElements[0];
|
|
197
|
+
lastElement = focusableElements[focusableElements.length - 1];
|
|
198
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
199
|
+
event.preventDefault();
|
|
200
|
+
lastElement.focus();
|
|
201
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
202
|
+
var _firstElement;
|
|
203
|
+
event.preventDefault();
|
|
204
|
+
(_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
|
|
208
205
|
}
|
|
209
206
|
}
|
|
210
|
-
};
|
|
211
|
-
if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
|
|
212
|
-
this.unbindKeyDown = (0, _bindEventListener.bind)(this.videoControlsWrapperRef.current, {
|
|
213
|
-
type: 'keydown',
|
|
214
|
-
listener: onKeydown,
|
|
215
|
-
options: {
|
|
216
|
-
capture: true,
|
|
217
|
-
passive: false
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
207
|
}
|
|
208
|
+
};
|
|
209
|
+
if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
|
|
210
|
+
this.unbindKeyDown = (0, _bindEventListener.bind)(this.videoControlsWrapperRef.current, {
|
|
211
|
+
type: 'keydown',
|
|
212
|
+
listener: onKeydown,
|
|
213
|
+
options: {
|
|
214
|
+
capture: true,
|
|
215
|
+
passive: false
|
|
216
|
+
}
|
|
217
|
+
});
|
|
221
218
|
}
|
|
222
219
|
}
|
|
223
220
|
}, {
|
|
@@ -614,12 +614,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
614
614
|
}, {
|
|
615
615
|
key: "stopEvent",
|
|
616
616
|
value: function stopEvent(event) {
|
|
617
|
-
if ((0
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
return true;
|
|
622
|
-
}
|
|
617
|
+
if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
618
|
+
var targetType = event.target.type;
|
|
619
|
+
if (event.key === 'Enter' && targetType === 'button') {
|
|
620
|
+
return true;
|
|
623
621
|
}
|
|
624
622
|
}
|
|
625
623
|
return false;
|
|
@@ -32,9 +32,7 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
|
|
|
32
32
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
33
33
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
34
34
|
}
|
|
35
|
-
|
|
36
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.activateVideoControls.common, focusPlayButton, list);
|
|
37
|
-
}
|
|
35
|
+
(0, _keymaps.bindKeymapWithCommand)(_keymaps.activateVideoControls.common, focusPlayButton, list);
|
|
38
36
|
return (0, _keymap.keymap)(list);
|
|
39
37
|
}
|
|
40
38
|
var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
|
|
@@ -32,7 +32,6 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
|
32
32
|
var _view2 = require("@atlaskit/editor-prosemirror/view");
|
|
33
33
|
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
34
34
|
var _mediaCommon = require("@atlaskit/media-common");
|
|
35
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
36
35
|
var _helpers = _interopRequireWildcard(require("../commands/helpers"));
|
|
37
36
|
var helpers = _helpers;
|
|
38
37
|
var _pickerFacade = _interopRequireDefault(require("../picker-facade"));
|
|
@@ -848,19 +847,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
|
|
|
848
847
|
},
|
|
849
848
|
nodeViews: options.nodeViews,
|
|
850
849
|
handleTextInput: function handleTextInput(view, from, to, text) {
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
return true;
|
|
863
|
-
}
|
|
850
|
+
var selection = view.state.selection;
|
|
851
|
+
if (text === ' ' && selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
852
|
+
var _stateKey$getState;
|
|
853
|
+
var videoControlsWrapperRef = (_stateKey$getState = _pluginKey.stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
854
|
+
var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
855
|
+
if (videoControls) {
|
|
856
|
+
var isVideoControl = Array.from(videoControls).some(function (videoControl) {
|
|
857
|
+
return document.activeElement === videoControl;
|
|
858
|
+
});
|
|
859
|
+
if (isVideoControl) {
|
|
860
|
+
return true;
|
|
864
861
|
}
|
|
865
862
|
}
|
|
866
863
|
}
|
|
@@ -888,39 +885,37 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
|
|
|
888
885
|
},
|
|
889
886
|
handleDOMEvents: {
|
|
890
887
|
keydown: function keydown(view, event) {
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
var allowedTargets = targetRole || targetType;
|
|
888
|
+
var selection = view.state.selection;
|
|
889
|
+
if (selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
890
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
891
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
892
|
+
var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
893
|
+
var targetsAndButtons = {
|
|
894
|
+
button: a11yDefaultKeys,
|
|
895
|
+
range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
|
|
896
|
+
combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
|
|
897
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
898
|
+
};
|
|
899
|
+
var targetRole = event.target.role;
|
|
900
|
+
var targetType = event.target.type;
|
|
901
|
+
var allowedTargets = targetRole || targetType;
|
|
906
902
|
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
}
|
|
903
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
904
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
905
|
+
var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
906
|
+
var allowedKeys = new Set(targetRelatedA11YKeys);
|
|
907
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
908
|
+
// allow event to bubble to be handled by react handlers
|
|
909
|
+
return true;
|
|
910
|
+
} else {
|
|
911
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
912
|
+
view.focus();
|
|
918
913
|
}
|
|
919
914
|
}
|
|
920
915
|
}
|
|
921
|
-
// fire regular prosemirror listeners;
|
|
922
|
-
return false;
|
|
923
916
|
}
|
|
917
|
+
// fire regular prosemirror listeners;
|
|
918
|
+
return false;
|
|
924
919
|
}
|
|
925
920
|
}
|
|
926
921
|
}
|
|
@@ -6,7 +6,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
|
6
6
|
import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
8
8
|
import { Card, CardLoading } from '@atlaskit/media-card';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
|
|
11
10
|
import { MediaCardWrapper } from '../styles';
|
|
12
11
|
|
|
@@ -99,7 +98,7 @@ export class MediaNode extends Component {
|
|
|
99
98
|
node
|
|
100
99
|
} = this.props;
|
|
101
100
|
(_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.handleMediaNodeUnmount(node);
|
|
102
|
-
if (
|
|
101
|
+
if (this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
|
|
103
102
|
this.unbindKeyDown();
|
|
104
103
|
}
|
|
105
104
|
}
|
|
@@ -113,7 +112,7 @@ export class MediaNode extends Component {
|
|
|
113
112
|
(_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 ? void 0 : _this$mediaPluginStat5.updateElement();
|
|
114
113
|
this.setViewMediaClientConfig();
|
|
115
114
|
// this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
|
|
116
|
-
if (
|
|
115
|
+
if (this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
|
|
117
116
|
var _this$mediaPluginStat6;
|
|
118
117
|
if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
|
|
119
118
|
var _this$mediaPluginStat7;
|
|
@@ -125,39 +124,37 @@ export class MediaNode extends Component {
|
|
|
125
124
|
}
|
|
126
125
|
}
|
|
127
126
|
bindKeydown() {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
(_firstElement = firstElement) === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
|
|
147
|
-
}
|
|
127
|
+
var _this$videoControlsWr3;
|
|
128
|
+
const onKeydown = event => {
|
|
129
|
+
if (event.key === 'Tab') {
|
|
130
|
+
var _this$videoControlsWr, _this$videoControlsWr2;
|
|
131
|
+
// Add focus trap for controls panel
|
|
132
|
+
let firstElement;
|
|
133
|
+
let lastElement;
|
|
134
|
+
const focusableElements = (_this$videoControlsWr = this.videoControlsWrapperRef) === null || _this$videoControlsWr === void 0 ? void 0 : (_this$videoControlsWr2 = _this$videoControlsWr.current) === null || _this$videoControlsWr2 === void 0 ? void 0 : _this$videoControlsWr2.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
|
|
135
|
+
if (focusableElements && focusableElements.length) {
|
|
136
|
+
firstElement = focusableElements[0];
|
|
137
|
+
lastElement = focusableElements[focusableElements.length - 1];
|
|
138
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
139
|
+
event.preventDefault();
|
|
140
|
+
lastElement.focus();
|
|
141
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
142
|
+
var _firstElement;
|
|
143
|
+
event.preventDefault();
|
|
144
|
+
(_firstElement = firstElement) === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
|
|
148
145
|
}
|
|
149
146
|
}
|
|
150
|
-
};
|
|
151
|
-
if ((_this$videoControlsWr3 = this.videoControlsWrapperRef) !== null && _this$videoControlsWr3 !== void 0 && _this$videoControlsWr3.current) {
|
|
152
|
-
this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
|
|
153
|
-
type: 'keydown',
|
|
154
|
-
listener: onKeydown,
|
|
155
|
-
options: {
|
|
156
|
-
capture: true,
|
|
157
|
-
passive: false
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
147
|
}
|
|
148
|
+
};
|
|
149
|
+
if ((_this$videoControlsWr3 = this.videoControlsWrapperRef) !== null && _this$videoControlsWr3 !== void 0 && _this$videoControlsWr3.current) {
|
|
150
|
+
this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
|
|
151
|
+
type: 'keydown',
|
|
152
|
+
listener: onKeydown,
|
|
153
|
+
options: {
|
|
154
|
+
capture: true,
|
|
155
|
+
passive: false
|
|
156
|
+
}
|
|
157
|
+
});
|
|
161
158
|
}
|
|
162
159
|
}
|
|
163
160
|
render() {
|
|
@@ -515,12 +515,10 @@ class MediaSingleNodeView extends ReactNodeView {
|
|
|
515
515
|
return undefined;
|
|
516
516
|
}
|
|
517
517
|
stopEvent(event) {
|
|
518
|
-
if (
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
return true;
|
|
523
|
-
}
|
|
518
|
+
if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
519
|
+
const targetType = event.target.type;
|
|
520
|
+
if (event.key === 'Enter' && targetType === 'button') {
|
|
521
|
+
return true;
|
|
524
522
|
}
|
|
525
523
|
}
|
|
526
524
|
return false;
|
|
@@ -25,9 +25,7 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
|
|
|
25
25
|
bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
26
26
|
bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
|
|
30
|
-
}
|
|
28
|
+
bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
|
|
31
29
|
return keymap(list);
|
|
32
30
|
}
|
|
33
31
|
const ignoreLinksInSteps = state => {
|
|
@@ -14,7 +14,6 @@ import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSe
|
|
|
14
14
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
15
15
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
16
16
|
import { getMediaFeatureFlag } from '@atlaskit/media-common';
|
|
17
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
18
17
|
import * as helpers from '../commands/helpers';
|
|
19
18
|
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
20
19
|
import PickerFacade from '../picker-facade';
|
|
@@ -733,21 +732,19 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
|
|
|
733
732
|
},
|
|
734
733
|
nodeViews: options.nodeViews,
|
|
735
734
|
handleTextInput(view, from, to, text) {
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
return true;
|
|
750
|
-
}
|
|
735
|
+
const {
|
|
736
|
+
selection
|
|
737
|
+
} = view.state;
|
|
738
|
+
if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
739
|
+
var _stateKey$getState;
|
|
740
|
+
const videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
741
|
+
const videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
742
|
+
if (videoControls) {
|
|
743
|
+
const isVideoControl = Array.from(videoControls).some(videoControl => {
|
|
744
|
+
return document.activeElement === videoControl;
|
|
745
|
+
});
|
|
746
|
+
if (isVideoControl) {
|
|
747
|
+
return true;
|
|
751
748
|
}
|
|
752
749
|
}
|
|
753
750
|
}
|
|
@@ -775,41 +772,39 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
|
|
|
775
772
|
},
|
|
776
773
|
handleDOMEvents: {
|
|
777
774
|
keydown: (view, event) => {
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
const allowedTargets = targetRole || targetType;
|
|
775
|
+
const {
|
|
776
|
+
selection
|
|
777
|
+
} = view.state;
|
|
778
|
+
if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
779
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
780
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
781
|
+
const a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
782
|
+
const targetsAndButtons = {
|
|
783
|
+
button: a11yDefaultKeys,
|
|
784
|
+
range: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
|
|
785
|
+
combobox: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'Esc'],
|
|
786
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
787
|
+
};
|
|
788
|
+
const targetRole = event.target.role;
|
|
789
|
+
const targetType = event.target.type;
|
|
790
|
+
const allowedTargets = targetRole || targetType;
|
|
795
791
|
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
}
|
|
792
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
793
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
794
|
+
let targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
795
|
+
const allowedKeys = new Set(targetRelatedA11YKeys);
|
|
796
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
797
|
+
// allow event to bubble to be handled by react handlers
|
|
798
|
+
return true;
|
|
799
|
+
} else {
|
|
800
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
801
|
+
view.focus();
|
|
807
802
|
}
|
|
808
803
|
}
|
|
809
804
|
}
|
|
810
|
-
// fire regular prosemirror listeners;
|
|
811
|
-
return false;
|
|
812
805
|
}
|
|
806
|
+
// fire regular prosemirror listeners;
|
|
807
|
+
return false;
|
|
813
808
|
}
|
|
814
809
|
}
|
|
815
810
|
}
|
|
@@ -16,7 +16,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
|
16
16
|
import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
|
|
17
17
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
18
18
|
import { Card, CardLoading } from '@atlaskit/media-card';
|
|
19
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
20
19
|
import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
|
|
21
20
|
import { MediaCardWrapper } from '../styles';
|
|
22
21
|
|
|
@@ -145,7 +144,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
145
144
|
var _this$mediaPluginStat3;
|
|
146
145
|
var node = this.props.node;
|
|
147
146
|
(_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 || _this$mediaPluginStat3.handleMediaNodeUnmount(node);
|
|
148
|
-
if (
|
|
147
|
+
if (this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
|
|
149
148
|
this.unbindKeyDown();
|
|
150
149
|
}
|
|
151
150
|
}
|
|
@@ -161,7 +160,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
161
160
|
(_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 || _this$mediaPluginStat5.updateElement();
|
|
162
161
|
this.setViewMediaClientConfig();
|
|
163
162
|
// this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
|
|
164
|
-
if (
|
|
163
|
+
if (this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
|
|
165
164
|
var _this$mediaPluginStat6;
|
|
166
165
|
if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
|
|
167
166
|
var _this$mediaPluginStat7;
|
|
@@ -175,40 +174,38 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
175
174
|
}, {
|
|
176
175
|
key: "bindKeydown",
|
|
177
176
|
value: function bindKeydown() {
|
|
178
|
-
var _this2 = this
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
(_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
|
|
198
|
-
}
|
|
177
|
+
var _this2 = this,
|
|
178
|
+
_this$videoControlsWr;
|
|
179
|
+
var onKeydown = function onKeydown(event) {
|
|
180
|
+
if (event.key === 'Tab') {
|
|
181
|
+
var _this2$videoControlsW;
|
|
182
|
+
// Add focus trap for controls panel
|
|
183
|
+
var firstElement;
|
|
184
|
+
var lastElement;
|
|
185
|
+
var focusableElements = (_this2$videoControlsW = _this2.videoControlsWrapperRef) === null || _this2$videoControlsW === void 0 || (_this2$videoControlsW = _this2$videoControlsW.current) === null || _this2$videoControlsW === void 0 ? void 0 : _this2$videoControlsW.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
|
|
186
|
+
if (focusableElements && focusableElements.length) {
|
|
187
|
+
firstElement = focusableElements[0];
|
|
188
|
+
lastElement = focusableElements[focusableElements.length - 1];
|
|
189
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
190
|
+
event.preventDefault();
|
|
191
|
+
lastElement.focus();
|
|
192
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
193
|
+
var _firstElement;
|
|
194
|
+
event.preventDefault();
|
|
195
|
+
(_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
|
|
199
196
|
}
|
|
200
197
|
}
|
|
201
|
-
};
|
|
202
|
-
if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
|
|
203
|
-
this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
|
|
204
|
-
type: 'keydown',
|
|
205
|
-
listener: onKeydown,
|
|
206
|
-
options: {
|
|
207
|
-
capture: true,
|
|
208
|
-
passive: false
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
198
|
}
|
|
199
|
+
};
|
|
200
|
+
if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
|
|
201
|
+
this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
|
|
202
|
+
type: 'keydown',
|
|
203
|
+
listener: onKeydown,
|
|
204
|
+
options: {
|
|
205
|
+
capture: true,
|
|
206
|
+
passive: false
|
|
207
|
+
}
|
|
208
|
+
});
|
|
212
209
|
}
|
|
213
210
|
}
|
|
214
211
|
}, {
|
|
@@ -609,12 +609,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
609
609
|
}, {
|
|
610
610
|
key: "stopEvent",
|
|
611
611
|
value: function stopEvent(event) {
|
|
612
|
-
if (
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
return true;
|
|
617
|
-
}
|
|
612
|
+
if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
613
|
+
var targetType = event.target.type;
|
|
614
|
+
if (event.key === 'Enter' && targetType === 'button') {
|
|
615
|
+
return true;
|
|
618
616
|
}
|
|
619
617
|
}
|
|
620
618
|
return false;
|
|
@@ -25,9 +25,7 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
|
|
|
25
25
|
bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
26
26
|
bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
|
|
30
|
-
}
|
|
28
|
+
bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
|
|
31
29
|
return keymap(list);
|
|
32
30
|
}
|
|
33
31
|
var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
|
|
@@ -23,7 +23,6 @@ import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSe
|
|
|
23
23
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
24
24
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
25
25
|
import { getMediaFeatureFlag } from '@atlaskit/media-common';
|
|
26
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
27
26
|
import * as helpers from '../commands/helpers';
|
|
28
27
|
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
29
28
|
import PickerFacade from '../picker-facade';
|
|
@@ -833,19 +832,17 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
|
|
|
833
832
|
},
|
|
834
833
|
nodeViews: options.nodeViews,
|
|
835
834
|
handleTextInput: function handleTextInput(view, from, to, text) {
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
return true;
|
|
848
|
-
}
|
|
835
|
+
var selection = view.state.selection;
|
|
836
|
+
if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
837
|
+
var _stateKey$getState;
|
|
838
|
+
var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
839
|
+
var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
840
|
+
if (videoControls) {
|
|
841
|
+
var isVideoControl = Array.from(videoControls).some(function (videoControl) {
|
|
842
|
+
return document.activeElement === videoControl;
|
|
843
|
+
});
|
|
844
|
+
if (isVideoControl) {
|
|
845
|
+
return true;
|
|
849
846
|
}
|
|
850
847
|
}
|
|
851
848
|
}
|
|
@@ -873,39 +870,37 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
|
|
|
873
870
|
},
|
|
874
871
|
handleDOMEvents: {
|
|
875
872
|
keydown: function keydown(view, event) {
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
var allowedTargets = targetRole || targetType;
|
|
873
|
+
var selection = view.state.selection;
|
|
874
|
+
if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
875
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
876
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
877
|
+
var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
878
|
+
var targetsAndButtons = {
|
|
879
|
+
button: a11yDefaultKeys,
|
|
880
|
+
range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
|
|
881
|
+
combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
|
|
882
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
883
|
+
};
|
|
884
|
+
var targetRole = event.target.role;
|
|
885
|
+
var targetType = event.target.type;
|
|
886
|
+
var allowedTargets = targetRole || targetType;
|
|
891
887
|
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
}
|
|
888
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
889
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
890
|
+
var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
891
|
+
var allowedKeys = new Set(targetRelatedA11YKeys);
|
|
892
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
893
|
+
// allow event to bubble to be handled by react handlers
|
|
894
|
+
return true;
|
|
895
|
+
} else {
|
|
896
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
897
|
+
view.focus();
|
|
903
898
|
}
|
|
904
899
|
}
|
|
905
900
|
}
|
|
906
|
-
// fire regular prosemirror listeners;
|
|
907
|
-
return false;
|
|
908
901
|
}
|
|
902
|
+
// fire regular prosemirror listeners;
|
|
903
|
+
return false;
|
|
909
904
|
}
|
|
910
905
|
}
|
|
911
906
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "1.22.
|
|
3
|
+
"version": "1.22.6",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -132,9 +132,6 @@
|
|
|
132
132
|
"type": "boolean",
|
|
133
133
|
"referenceOnly": "true"
|
|
134
134
|
},
|
|
135
|
-
"platform.editor.a11y_video_controls_keyboard_support_yhcxh": {
|
|
136
|
-
"type": "boolean"
|
|
137
|
-
},
|
|
138
135
|
"platform.editor.media.fix-copy-paste-excel_62g4s": {
|
|
139
136
|
"type": "boolean"
|
|
140
137
|
},
|