@atlaskit/editor-plugin-media-insert 2.4.0 → 2.5.1

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/ui/MediaFromURL.js +13 -1
  3. package/dist/cjs/ui/MediaInsertPicker.js +26 -12
  4. package/dist/es2019/ui/MediaFromURL.js +13 -1
  5. package/dist/es2019/ui/MediaInsertPicker.js +18 -3
  6. package/dist/esm/ui/MediaFromURL.js +13 -1
  7. package/dist/esm/ui/MediaInsertPicker.js +27 -13
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 2.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`45ce61e4e55b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45ce61e4e55b0) -
8
+ [ux] [ED-24844] Make tab panels in media insert popup non-focusable, instead users focus will go
9
+ to the first interactive element inside the tab panel
10
+
11
+ ## 2.5.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#138801](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138801)
16
+ [`f742cd24b83a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f742cd24b83a1) -
17
+ [ux] [ED-24877] Improve keyboard UX for "from link" media uploads
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 2.4.0
4
24
 
5
25
  ### Minor Changes
package/dist/cjs/ui/MediaFromURL.js CHANGED
@@ -260,7 +260,19 @@ function MediaFromURL(_ref) {
260
260
  as: "form",
261
261
  onSubmit: function onSubmit(e) {
262
262
  e.preventDefault();
263
- uploadExternalMedia(inputUrl);
263
+ // This can be triggered from an enter key event on the input even when
264
+ // the button is disabled, so we explicitly do nothing when in loading
265
+ // state.
266
+ if (previewState.isLoading) {
267
+ return;
268
+ }
269
+ if (previewState.previewInfo) {
270
+ return onInsert();
271
+ }
272
+ if (previewState.warning) {
273
+ return onExternalInsert(inputUrl);
274
+ }
275
+ return uploadExternalMedia(inputUrl);
264
276
  },
265
277
  xcss: FormStyles
266
278
  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.MediaInsertPicker = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
10
  var _react = _interopRequireDefault(require("react"));
10
11
  var _reactIntlNext = require("react-intl-next");
11
12
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -47,17 +48,30 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
47
48
  }
48
49
  }
49
50
  };
50
- var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref) {
51
+
52
+ /**
53
+ * A custom TabPanel that is non-focusable.
54
+ */
55
+ var CustomTabPanel = function CustomTabPanel(_ref) {
56
+ var children = _ref.children;
57
+ var tabPanelAttributes = (0, _tabs.useTabPanel)();
58
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
59
+ paddingBlockEnd: "space.150"
60
+ }, tabPanelAttributes, {
61
+ tabIndex: -1
62
+ }), children);
63
+ };
64
+ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref2) {
51
65
  var _useSharedPluginState, _useSharedPluginState2;
52
- var api = _ref.api,
53
- editorView = _ref.editorView,
54
- dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
55
- popupsMountPoint = _ref.popupsMountPoint,
56
- popupsBoundariesElement = _ref.popupsBoundariesElement,
57
- popupsScrollableElement = _ref.popupsScrollableElement,
58
- _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
59
- insertMediaSingle = _ref.insertMediaSingle,
60
- insertExternalMediaSingle = _ref.insertExternalMediaSingle;
66
+ var api = _ref2.api,
67
+ editorView = _ref2.editorView,
68
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
69
+ popupsMountPoint = _ref2.popupsMountPoint,
70
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
71
+ popupsScrollableElement = _ref2.popupsScrollableElement,
72
+ _closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
73
+ insertMediaSingle = _ref2.insertMediaSingle,
74
+ insertExternalMediaSingle = _ref2.insertExternalMediaSingle;
61
75
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
62
76
  var isOpen = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
63
77
  var mediaProvider = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -109,7 +123,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
109
123
  id: "media-insert-tab-navigation"
110
124
  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
111
125
  paddingBlockEnd: "space.150"
112
- }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
126
+ }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
113
127
  ref: autofocusRef,
114
128
  mediaProvider: mediaProvider,
115
129
  insertMediaSingle: insertMediaSingle,
@@ -118,7 +132,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
118
132
  focusEditor();
119
133
  },
120
134
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
121
- })), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
135
+ })), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
122
136
  mediaProvider: mediaProvider,
123
137
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
124
138
  closeMediaInsertPicker: function closeMediaInsertPicker() {
package/dist/es2019/ui/MediaFromURL.js CHANGED
@@ -228,7 +228,19 @@ export function MediaFromURL({
228
228
  as: "form",
229
229
  onSubmit: e => {
230
230
  e.preventDefault();
231
- uploadExternalMedia(inputUrl);
231
+ // This can be triggered from an enter key event on the input even when
232
+ // the button is disabled, so we explicitly do nothing when in loading
233
+ // state.
234
+ if (previewState.isLoading) {
235
+ return;
236
+ }
237
+ if (previewState.previewInfo) {
238
+ return onInsert();
239
+ }
240
+ if (previewState.warning) {
241
+ return onExternalInsert(inputUrl);
242
+ }
243
+ return uploadExternalMedia(inputUrl);
232
244
  },
233
245
  xcss: FormStyles
234
246
  }, /*#__PURE__*/React.createElement(Stack, {
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import React from 'react';
2
3
  import { useIntl } from 'react-intl-next';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -7,7 +8,7 @@ import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
8
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { Box } from '@atlaskit/primitives';
10
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
11
+ import Tabs, { Tab, TabList, useTabPanel } from '@atlaskit/tabs';
11
12
  import { useFocusEditor } from '../hooks/use-focus-editor';
12
13
  import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
13
14
  import { LocalMedia } from './LocalMedia';
@@ -37,6 +38,20 @@ const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
37
38
  }
38
39
  }
39
40
  };
41
+
42
+ /**
43
+ * A custom TabPanel that is non-focusable.
44
+ */
45
+ const CustomTabPanel = ({
46
+ children
47
+ }) => {
48
+ const tabPanelAttributes = useTabPanel();
49
+ return /*#__PURE__*/React.createElement(Box, _extends({
50
+ paddingBlockEnd: "space.150"
51
+ }, tabPanelAttributes, {
52
+ tabIndex: -1
53
+ }), children);
54
+ };
40
55
  export const MediaInsertPicker = ({
41
56
  api,
42
57
  editorView,
@@ -99,7 +114,7 @@ export const MediaInsertPicker = ({
99
114
  id: "media-insert-tab-navigation"
100
115
  }, /*#__PURE__*/React.createElement(Box, {
101
116
  paddingBlockEnd: "space.150"
102
- }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
117
+ }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
103
118
  ref: autofocusRef,
104
119
  mediaProvider: mediaProvider,
105
120
  insertMediaSingle: insertMediaSingle,
@@ -108,7 +123,7 @@ export const MediaInsertPicker = ({
108
123
  focusEditor();
109
124
  },
110
125
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
111
- })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
126
+ })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
112
127
  mediaProvider: mediaProvider,
113
128
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
114
129
  closeMediaInsertPicker: () => {
package/dist/esm/ui/MediaFromURL.js CHANGED
@@ -253,7 +253,19 @@ export function MediaFromURL(_ref) {
253
253
  as: "form",
254
254
  onSubmit: function onSubmit(e) {
255
255
  e.preventDefault();
256
- uploadExternalMedia(inputUrl);
256
+ // This can be triggered from an enter key event on the input even when
257
+ // the button is disabled, so we explicitly do nothing when in loading
258
+ // state.
259
+ if (previewState.isLoading) {
260
+ return;
261
+ }
262
+ if (previewState.previewInfo) {
263
+ return onInsert();
264
+ }
265
+ if (previewState.warning) {
266
+ return onExternalInsert(inputUrl);
267
+ }
268
+ return uploadExternalMedia(inputUrl);
257
269
  },
258
270
  xcss: FormStyles
259
271
  }, /*#__PURE__*/React.createElement(Stack, {
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import React from 'react';
2
3
  import { useIntl } from 'react-intl-next';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -7,7 +8,7 @@ import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
8
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { Box } from '@atlaskit/primitives';
10
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
11
+ import Tabs, { Tab, TabList, useTabPanel } from '@atlaskit/tabs';
11
12
  import { useFocusEditor } from '../hooks/use-focus-editor';
12
13
  import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
13
14
  import { LocalMedia } from './LocalMedia';
@@ -37,17 +38,30 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
37
38
  }
38
39
  }
39
40
  };
40
- export var MediaInsertPicker = function MediaInsertPicker(_ref) {
41
+
42
+ /**
43
+ * A custom TabPanel that is non-focusable.
44
+ */
45
+ var CustomTabPanel = function CustomTabPanel(_ref) {
46
+ var children = _ref.children;
47
+ var tabPanelAttributes = useTabPanel();
48
+ return /*#__PURE__*/React.createElement(Box, _extends({
49
+ paddingBlockEnd: "space.150"
50
+ }, tabPanelAttributes, {
51
+ tabIndex: -1
52
+ }), children);
53
+ };
54
+ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
41
55
  var _useSharedPluginState, _useSharedPluginState2;
42
- var api = _ref.api,
43
- editorView = _ref.editorView,
44
- dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
45
- popupsMountPoint = _ref.popupsMountPoint,
46
- popupsBoundariesElement = _ref.popupsBoundariesElement,
47
- popupsScrollableElement = _ref.popupsScrollableElement,
48
- _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
49
- insertMediaSingle = _ref.insertMediaSingle,
50
- insertExternalMediaSingle = _ref.insertExternalMediaSingle;
56
+ var api = _ref2.api,
57
+ editorView = _ref2.editorView,
58
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
59
+ popupsMountPoint = _ref2.popupsMountPoint,
60
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
61
+ popupsScrollableElement = _ref2.popupsScrollableElement,
62
+ _closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
63
+ insertMediaSingle = _ref2.insertMediaSingle,
64
+ insertExternalMediaSingle = _ref2.insertExternalMediaSingle;
51
65
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
52
66
  var isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
53
67
  var mediaProvider = (_useSharedPluginState2 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -99,7 +113,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
99
113
  id: "media-insert-tab-navigation"
100
114
  }, /*#__PURE__*/React.createElement(Box, {
101
115
  paddingBlockEnd: "space.150"
102
- }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
116
+ }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
103
117
  ref: autofocusRef,
104
118
  mediaProvider: mediaProvider,
105
119
  insertMediaSingle: insertMediaSingle,
@@ -108,7 +122,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
108
122
  focusEditor();
109
123
  },
110
124
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
111
- })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
125
+ })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
112
126
  mediaProvider: mediaProvider,
113
127
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
114
128
  closeMediaInsertPicker: function closeMediaInsertPicker() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "2.4.0",
3
+ "version": "2.5.1",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,9 +24,9 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/button": "^20.1.0",
27
- "@atlaskit/editor-common": "^88.12.0",
27
+ "@atlaskit/editor-common": "^88.13.0",
28
28
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
29
- "@atlaskit/editor-plugin-media": "^1.30.0",
29
+ "@atlaskit/editor-plugin-media": "^1.31.0",
30
30
  "@atlaskit/editor-prosemirror": "5.0.1",
31
31
  "@atlaskit/editor-shared-styles": "^2.13.0",
32
32
  "@atlaskit/icon": "^22.16.0",