@atlaskit/editor-plugin-media 1.22.5 → 1.22.7
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/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 +44 -44
- package/dist/cjs/ui/MediaPicker/PickerFacadeProvider.js +7 -1
- 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 +47 -47
- package/dist/es2019/ui/MediaPicker/PickerFacadeProvider.js +9 -1
- 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 +45 -45
- package/dist/esm/ui/MediaPicker/PickerFacadeProvider.js +7 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 1.22.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`666ab2fb8703d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/666ab2fb8703d) -
|
|
8
|
+
Accept the media provider from the plugin rather than only from editor-core
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 1.22.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#116846](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116846)
|
|
16
|
+
[`b9c3dabe8ea72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9c3dabe8ea72) -
|
|
17
|
+
ECA11Y-66: Make video controls accessible for keyboard users, feature flag removal
|
|
18
|
+
|
|
3
19
|
## 1.22.5
|
|
4
20
|
|
|
5
21
|
### 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) {
|
|
@@ -500,9 +500,13 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
|
|
|
500
500
|
this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
|
|
501
501
|
var nodes = _state.schema.nodes;
|
|
502
502
|
(0, _assert.default)(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
}
|
|
503
|
+
if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider && (0, _platformFeatureFlags.fg)('platform_editor_media_provider_from_plugin_config')) {
|
|
504
|
+
this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
|
|
505
|
+
} else {
|
|
506
|
+
options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
|
|
507
|
+
return _this.setMediaProvider(provider);
|
|
508
|
+
});
|
|
509
|
+
}
|
|
506
510
|
if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
|
|
507
511
|
this.allowInlineImages = true;
|
|
508
512
|
}
|
|
@@ -848,19 +852,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
|
|
|
848
852
|
},
|
|
849
853
|
nodeViews: options.nodeViews,
|
|
850
854
|
handleTextInput: function handleTextInput(view, from, to, text) {
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
return true;
|
|
863
|
-
}
|
|
855
|
+
var selection = view.state.selection;
|
|
856
|
+
if (text === ' ' && selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
857
|
+
var _stateKey$getState;
|
|
858
|
+
var videoControlsWrapperRef = (_stateKey$getState = _pluginKey.stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
859
|
+
var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
860
|
+
if (videoControls) {
|
|
861
|
+
var isVideoControl = Array.from(videoControls).some(function (videoControl) {
|
|
862
|
+
return document.activeElement === videoControl;
|
|
863
|
+
});
|
|
864
|
+
if (isVideoControl) {
|
|
865
|
+
return true;
|
|
864
866
|
}
|
|
865
867
|
}
|
|
866
868
|
}
|
|
@@ -888,39 +890,37 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
|
|
|
888
890
|
},
|
|
889
891
|
handleDOMEvents: {
|
|
890
892
|
keydown: function keydown(view, event) {
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
var allowedTargets = targetRole || targetType;
|
|
893
|
+
var selection = view.state.selection;
|
|
894
|
+
if (selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
895
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
896
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
897
|
+
var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
898
|
+
var targetsAndButtons = {
|
|
899
|
+
button: a11yDefaultKeys,
|
|
900
|
+
range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
|
|
901
|
+
combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
|
|
902
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
903
|
+
};
|
|
904
|
+
var targetRole = event.target.role;
|
|
905
|
+
var targetType = event.target.type;
|
|
906
|
+
var allowedTargets = targetRole || targetType;
|
|
906
907
|
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
}
|
|
908
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
909
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
910
|
+
var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
911
|
+
var allowedKeys = new Set(targetRelatedA11YKeys);
|
|
912
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
913
|
+
// allow event to bubble to be handled by react handlers
|
|
914
|
+
return true;
|
|
915
|
+
} else {
|
|
916
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
917
|
+
view.focus();
|
|
918
918
|
}
|
|
919
919
|
}
|
|
920
920
|
}
|
|
921
|
-
// fire regular prosemirror listeners;
|
|
922
|
-
return false;
|
|
923
921
|
}
|
|
922
|
+
// fire regular prosemirror listeners;
|
|
923
|
+
return false;
|
|
924
924
|
}
|
|
925
925
|
}
|
|
926
926
|
}
|
|
@@ -17,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
18
|
var _reactDom = require("react-dom");
|
|
19
19
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
20
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
21
|
var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
|
|
21
22
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
22
23
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
@@ -126,7 +127,12 @@ var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Compo
|
|
|
126
127
|
(0, _createClass2.default)(PickerFacadeProvider, [{
|
|
127
128
|
key: "componentDidMount",
|
|
128
129
|
value: function componentDidMount() {
|
|
129
|
-
this.props.mediaState.
|
|
130
|
+
var mediaProvider = this.props.mediaState.mediaProvider;
|
|
131
|
+
if (mediaProvider && (0, _platformFeatureFlags.fg)('platform_editor_media_provider_from_plugin_config')) {
|
|
132
|
+
this.handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
|
|
133
|
+
} else {
|
|
134
|
+
this.props.mediaState.options.providerFactory.subscribe('mediaProvider', this.handleMediaProvider);
|
|
135
|
+
}
|
|
130
136
|
}
|
|
131
137
|
}, {
|
|
132
138
|
key: "componentWillUnmount",
|
|
@@ -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,7 @@ 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 {
|
|
17
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
18
|
import * as helpers from '../commands/helpers';
|
|
19
19
|
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
20
20
|
import PickerFacade from '../picker-facade';
|
|
@@ -445,7 +445,11 @@ export class MediaPluginStateImplementation {
|
|
|
445
445
|
nodes
|
|
446
446
|
} = _state.schema;
|
|
447
447
|
assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
|
|
448
|
-
|
|
448
|
+
if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider && fg('platform_editor_media_provider_from_plugin_config')) {
|
|
449
|
+
this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
|
|
450
|
+
} else {
|
|
451
|
+
options.providerFactory.subscribe('mediaProvider', (_name, provider) => this.setMediaProvider(provider));
|
|
452
|
+
}
|
|
449
453
|
if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
|
|
450
454
|
this.allowInlineImages = true;
|
|
451
455
|
}
|
|
@@ -733,21 +737,19 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
|
|
|
733
737
|
},
|
|
734
738
|
nodeViews: options.nodeViews,
|
|
735
739
|
handleTextInput(view, from, to, text) {
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
return true;
|
|
750
|
-
}
|
|
740
|
+
const {
|
|
741
|
+
selection
|
|
742
|
+
} = view.state;
|
|
743
|
+
if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
744
|
+
var _stateKey$getState;
|
|
745
|
+
const videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
746
|
+
const videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
747
|
+
if (videoControls) {
|
|
748
|
+
const isVideoControl = Array.from(videoControls).some(videoControl => {
|
|
749
|
+
return document.activeElement === videoControl;
|
|
750
|
+
});
|
|
751
|
+
if (isVideoControl) {
|
|
752
|
+
return true;
|
|
751
753
|
}
|
|
752
754
|
}
|
|
753
755
|
}
|
|
@@ -775,41 +777,39 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
|
|
|
775
777
|
},
|
|
776
778
|
handleDOMEvents: {
|
|
777
779
|
keydown: (view, event) => {
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
const allowedTargets = targetRole || targetType;
|
|
780
|
+
const {
|
|
781
|
+
selection
|
|
782
|
+
} = view.state;
|
|
783
|
+
if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
784
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
785
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
786
|
+
const a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
787
|
+
const targetsAndButtons = {
|
|
788
|
+
button: a11yDefaultKeys,
|
|
789
|
+
range: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
|
|
790
|
+
combobox: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'Esc'],
|
|
791
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
792
|
+
};
|
|
793
|
+
const targetRole = event.target.role;
|
|
794
|
+
const targetType = event.target.type;
|
|
795
|
+
const allowedTargets = targetRole || targetType;
|
|
795
796
|
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
}
|
|
797
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
798
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
799
|
+
let targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
800
|
+
const allowedKeys = new Set(targetRelatedA11YKeys);
|
|
801
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
802
|
+
// allow event to bubble to be handled by react handlers
|
|
803
|
+
return true;
|
|
804
|
+
} else {
|
|
805
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
806
|
+
view.focus();
|
|
807
807
|
}
|
|
808
808
|
}
|
|
809
809
|
}
|
|
810
|
-
// fire regular prosemirror listeners;
|
|
811
|
-
return false;
|
|
812
810
|
}
|
|
811
|
+
// fire regular prosemirror listeners;
|
|
812
|
+
return false;
|
|
813
813
|
}
|
|
814
814
|
}
|
|
815
815
|
}
|
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { flushSync } from 'react-dom';
|
|
4
4
|
import { ErrorReporter } from '@atlaskit/editor-common/utils';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import PickerFacade from '../../picker-facade';
|
|
6
7
|
const dummyMediaPickerObject = {
|
|
7
8
|
on: () => {},
|
|
@@ -63,7 +64,14 @@ export default class PickerFacadeProvider extends React.Component {
|
|
|
63
64
|
});
|
|
64
65
|
}
|
|
65
66
|
componentDidMount() {
|
|
66
|
-
|
|
67
|
+
const {
|
|
68
|
+
mediaProvider
|
|
69
|
+
} = this.props.mediaState;
|
|
70
|
+
if (mediaProvider && fg('platform_editor_media_provider_from_plugin_config')) {
|
|
71
|
+
this.handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
|
|
72
|
+
} else {
|
|
73
|
+
this.props.mediaState.options.providerFactory.subscribe('mediaProvider', this.handleMediaProvider);
|
|
74
|
+
}
|
|
67
75
|
}
|
|
68
76
|
componentWillUnmount() {
|
|
69
77
|
this.props.mediaState.options.providerFactory.unsubscribe('mediaProvider', this.handleMediaProvider);
|
|
@@ -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,7 @@ 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 {
|
|
26
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
27
27
|
import * as helpers from '../commands/helpers';
|
|
28
28
|
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
29
29
|
import PickerFacade from '../picker-facade';
|
|
@@ -485,9 +485,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
485
485
|
this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
|
|
486
486
|
var nodes = _state.schema.nodes;
|
|
487
487
|
assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
}
|
|
488
|
+
if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider && fg('platform_editor_media_provider_from_plugin_config')) {
|
|
489
|
+
this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
|
|
490
|
+
} else {
|
|
491
|
+
options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
|
|
492
|
+
return _this.setMediaProvider(provider);
|
|
493
|
+
});
|
|
494
|
+
}
|
|
491
495
|
if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
|
|
492
496
|
this.allowInlineImages = true;
|
|
493
497
|
}
|
|
@@ -833,19 +837,17 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
|
|
|
833
837
|
},
|
|
834
838
|
nodeViews: options.nodeViews,
|
|
835
839
|
handleTextInput: function handleTextInput(view, from, to, text) {
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
return true;
|
|
848
|
-
}
|
|
840
|
+
var selection = view.state.selection;
|
|
841
|
+
if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
842
|
+
var _stateKey$getState;
|
|
843
|
+
var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
|
|
844
|
+
var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
|
|
845
|
+
if (videoControls) {
|
|
846
|
+
var isVideoControl = Array.from(videoControls).some(function (videoControl) {
|
|
847
|
+
return document.activeElement === videoControl;
|
|
848
|
+
});
|
|
849
|
+
if (isVideoControl) {
|
|
850
|
+
return true;
|
|
849
851
|
}
|
|
850
852
|
}
|
|
851
853
|
}
|
|
@@ -873,39 +875,37 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
|
|
|
873
875
|
},
|
|
874
876
|
handleDOMEvents: {
|
|
875
877
|
keydown: function keydown(view, event) {
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
var allowedTargets = targetRole || targetType;
|
|
878
|
+
var selection = view.state.selection;
|
|
879
|
+
if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
|
|
880
|
+
// handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
|
|
881
|
+
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
|
|
882
|
+
var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
|
|
883
|
+
var targetsAndButtons = {
|
|
884
|
+
button: a11yDefaultKeys,
|
|
885
|
+
range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
|
|
886
|
+
combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
|
|
887
|
+
slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
|
|
888
|
+
};
|
|
889
|
+
var targetRole = event.target.role;
|
|
890
|
+
var targetType = event.target.type;
|
|
891
|
+
var allowedTargets = targetRole || targetType;
|
|
891
892
|
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
}
|
|
893
|
+
// only if targeting interactive elements fe. button, slider, range, dropdown
|
|
894
|
+
if (allowedTargets && allowedTargets in targetsAndButtons) {
|
|
895
|
+
var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
|
|
896
|
+
var allowedKeys = new Set(targetRelatedA11YKeys);
|
|
897
|
+
if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
|
|
898
|
+
// allow event to bubble to be handled by react handlers
|
|
899
|
+
return true;
|
|
900
|
+
} else {
|
|
901
|
+
// otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
|
|
902
|
+
view.focus();
|
|
903
903
|
}
|
|
904
904
|
}
|
|
905
905
|
}
|
|
906
|
-
// fire regular prosemirror listeners;
|
|
907
|
-
return false;
|
|
908
906
|
}
|
|
907
|
+
// fire regular prosemirror listeners;
|
|
908
|
+
return false;
|
|
909
909
|
}
|
|
910
910
|
}
|
|
911
911
|
}
|
|
@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { flushSync } from 'react-dom';
|
|
14
14
|
import { ErrorReporter } from '@atlaskit/editor-common/utils';
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import PickerFacade from '../../picker-facade';
|
|
16
17
|
var dummyMediaPickerObject = {
|
|
17
18
|
on: function on() {},
|
|
@@ -119,7 +120,12 @@ var PickerFacadeProvider = /*#__PURE__*/function (_React$Component) {
|
|
|
119
120
|
_createClass(PickerFacadeProvider, [{
|
|
120
121
|
key: "componentDidMount",
|
|
121
122
|
value: function componentDidMount() {
|
|
122
|
-
this.props.mediaState.
|
|
123
|
+
var mediaProvider = this.props.mediaState.mediaProvider;
|
|
124
|
+
if (mediaProvider && fg('platform_editor_media_provider_from_plugin_config')) {
|
|
125
|
+
this.handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
|
|
126
|
+
} else {
|
|
127
|
+
this.props.mediaState.options.providerFactory.subscribe('mediaProvider', this.handleMediaProvider);
|
|
128
|
+
}
|
|
123
129
|
}
|
|
124
130
|
}, {
|
|
125
131
|
key: "componentWillUnmount",
|
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.7",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"@atlaskit/adf-schema": "^39.0.3",
|
|
37
37
|
"@atlaskit/analytics-namespaced-context": "^6.10.0",
|
|
38
38
|
"@atlaskit/analytics-next": "^9.3.0",
|
|
39
|
-
"@atlaskit/button": "^18.
|
|
40
|
-
"@atlaskit/editor-common": "^84.
|
|
39
|
+
"@atlaskit/button": "^18.2.0",
|
|
40
|
+
"@atlaskit/editor-common": "^84.1.0",
|
|
41
41
|
"@atlaskit/editor-palette": "1.6.0",
|
|
42
42
|
"@atlaskit/editor-plugin-analytics": "^1.4.0",
|
|
43
43
|
"@atlaskit/editor-plugin-annotation": "1.14.1",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/editor-shared-styles": "^2.12.0",
|
|
55
55
|
"@atlaskit/editor-tables": "^2.7.0",
|
|
56
56
|
"@atlaskit/form": "^10.4.0",
|
|
57
|
-
"@atlaskit/icon": "^22.
|
|
57
|
+
"@atlaskit/icon": "^22.6.0",
|
|
58
58
|
"@atlaskit/media-card": "^78.0.0",
|
|
59
59
|
"@atlaskit/media-client": "^27.3.0",
|
|
60
60
|
"@atlaskit/media-client-react": "^2.0.0",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@atlaskit/media-ui": "^25.10.0",
|
|
65
65
|
"@atlaskit/media-viewer": "^48.6.0",
|
|
66
66
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
67
|
-
"@atlaskit/primitives": "^10.
|
|
67
|
+
"@atlaskit/primitives": "^10.1.0",
|
|
68
68
|
"@atlaskit/textfield": "^6.4.0",
|
|
69
69
|
"@atlaskit/theme": "^12.11.0",
|
|
70
70
|
"@atlaskit/tokens": "^1.53.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
|
},
|
|
@@ -146,6 +143,9 @@
|
|
|
146
143
|
},
|
|
147
144
|
"platform.editor.live-view.disable-editing-in-view-mode_fi1rx": {
|
|
148
145
|
"type": "boolean"
|
|
146
|
+
},
|
|
147
|
+
"platform_editor_media_provider_from_plugin_config": {
|
|
148
|
+
"type": "boolean"
|
|
149
149
|
}
|
|
150
150
|
},
|
|
151
151
|
"stricter": {
|