@atlaskit/editor-plugin-media-insert 2.1.0 → 2.1.2

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 (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/hooks/use-focus-editor.js +17 -0
  3. package/dist/cjs/plugin.js +1 -3
  4. package/dist/cjs/ui/MediaInsertPicker.js +11 -3
  5. package/dist/es2019/hooks/use-focus-editor.js +10 -0
  6. package/dist/es2019/plugin.js +3 -5
  7. package/dist/es2019/ui/MediaInsertPicker.js +9 -1
  8. package/dist/esm/hooks/use-focus-editor.js +11 -0
  9. package/dist/esm/plugin.js +1 -3
  10. package/dist/esm/ui/MediaInsertPicker.js +11 -3
  11. package/dist/types/hooks/use-focus-editor.d.ts +4 -0
  12. package/dist/types-ts4.5/hooks/use-focus-editor.d.ts +4 -0
  13. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 2.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#134104](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134104)
8
+ [`18a1de35efaf0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18a1de35efaf0) -
9
+ [ux] ED-24639 Make sure the editor is properly re-focused when the media insert picker is closed
10
+ - Updated dependencies
11
+
12
+ ## 2.1.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 2.1.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/hooks/use-focus-editor.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useFocusEditor = void 0;
7
+ var _react = require("react");
8
+ var useFocusEditor = exports.useFocusEditor = function useFocusEditor(_ref) {
9
+ var editorView = _ref.editorView;
10
+ var focusEditor = (0, _react.useCallback)(function () {
11
+ // use setTimeout to run this async after the call
12
+ setTimeout(function () {
13
+ return editorView.focus();
14
+ }, 0);
15
+ }, [editorView]);
16
+ return focusEditor;
17
+ };
package/dist/cjs/plugin.js CHANGED
@@ -43,8 +43,6 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
43
43
  popupsMountPoint = _ref3.popupsMountPoint,
44
44
  popupsBoundariesElement = _ref3.popupsBoundariesElement,
45
45
  popupsScrollableElement = _ref3.popupsScrollableElement;
46
- var dispatch = editorView.dispatch,
47
- state = editorView.state;
48
46
  return /*#__PURE__*/_react.default.createElement(_MediaInsertPicker.MediaInsertPicker, {
49
47
  api: api,
50
48
  editorView: editorView,
@@ -53,7 +51,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
53
51
  popupsBoundariesElement: popupsBoundariesElement,
54
52
  popupsScrollableElement: popupsScrollableElement,
55
53
  closeMediaInsertPicker: function closeMediaInsertPicker() {
56
- return dispatch((0, _actions.closeMediaInsertPicker)(state.tr));
54
+ editorView.dispatch((0, _actions.closeMediaInsertPicker)(editorView.state.tr));
57
55
  }
58
56
  });
59
57
  },
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -13,6 +13,7 @@ var _messages = require("@atlaskit/editor-common/messages");
13
13
  var _ui = require("@atlaskit/editor-common/ui");
14
14
  var _utils = require("@atlaskit/editor-prosemirror/utils");
15
15
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
+ var _useFocusEditor = require("../hooks/use-focus-editor");
16
17
  var _MediaInsertContent = require("./MediaInsertContent");
17
18
  var _MediaInsertWrapper = require("./MediaInsertWrapper");
18
19
  var PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
@@ -47,11 +48,14 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
47
48
  popupsMountPoint = _ref.popupsMountPoint,
48
49
  popupsBoundariesElement = _ref.popupsBoundariesElement,
49
50
  popupsScrollableElement = _ref.popupsScrollableElement,
50
- closeMediaInsertPicker = _ref.closeMediaInsertPicker;
51
+ _closeMediaInsertPicker = _ref.closeMediaInsertPicker;
51
52
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
52
53
  var isOpen = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
53
54
  var mediaProvider = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
54
55
  var intl = (0, _reactIntlNext.useIntl)();
56
+ var focusEditor = (0, _useFocusEditor.useFocusEditor)({
57
+ editorView: editorView
58
+ });
55
59
  if (!isOpen || !mediaProvider) {
56
60
  return null;
57
61
  }
@@ -70,7 +74,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
70
74
  };
71
75
  dispatchAnalyticsEvent(payload);
72
76
  }
73
- closeMediaInsertPicker();
77
+ _closeMediaInsertPicker();
78
+ focusEditor();
74
79
  };
75
80
  };
76
81
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
@@ -90,6 +95,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
90
95
  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, {
91
96
  mediaProvider: mediaProvider,
92
97
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
93
- closeMediaInsertPicker: closeMediaInsertPicker
98
+ closeMediaInsertPicker: function closeMediaInsertPicker() {
99
+ _closeMediaInsertPicker();
100
+ focusEditor();
101
+ }
94
102
  })));
95
103
  };
package/dist/es2019/hooks/use-focus-editor.js ADDED
@@ -0,0 +1,10 @@
1
+ import { useCallback } from 'react';
2
+ export const useFocusEditor = ({
3
+ editorView
4
+ }) => {
5
+ const focusEditor = useCallback(() => {
6
+ // use setTimeout to run this async after the call
7
+ setTimeout(() => editorView.focus(), 0);
8
+ }, [editorView]);
9
+ return focusEditor;
10
+ };
package/dist/es2019/plugin.js CHANGED
@@ -37,10 +37,6 @@ export const mediaInsertPlugin = ({
37
37
  popupsBoundariesElement,
38
38
  popupsScrollableElement
39
39
  }) => {
40
- const {
41
- dispatch,
42
- state
43
- } = editorView;
44
40
  return /*#__PURE__*/React.createElement(MediaInsertPicker, {
45
41
  api: api,
46
42
  editorView: editorView,
@@ -48,7 +44,9 @@ export const mediaInsertPlugin = ({
48
44
  popupsMountPoint: popupsMountPoint,
49
45
  popupsBoundariesElement: popupsBoundariesElement,
50
46
  popupsScrollableElement: popupsScrollableElement,
51
- closeMediaInsertPicker: () => dispatch(closeMediaInsertPicker(state.tr))
47
+ closeMediaInsertPicker: () => {
48
+ editorView.dispatch(closeMediaInsertPicker(editorView.state.tr));
49
+ }
52
50
  });
53
51
  },
54
52
  pluginsOptions: {
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -6,6 +6,7 @@ import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
6
6
  import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
7
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
8
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
+ import { useFocusEditor } from '../hooks/use-focus-editor';
9
10
  import { MediaInsertContent } from './MediaInsertContent';
10
11
  import { MediaInsertWrapper } from './MediaInsertWrapper';
11
12
  const PopupWithListeners = withOuterListeners(Popup);
@@ -46,6 +47,9 @@ export const MediaInsertPicker = ({
46
47
  const isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.isOpen;
47
48
  const mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 ? void 0 : (_useSharedPluginState4 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState4 === void 0 ? void 0 : _useSharedPluginState4.mediaProvider;
48
49
  const intl = useIntl();
50
+ const focusEditor = useFocusEditor({
51
+ editorView
52
+ });
49
53
  if (!isOpen || !mediaProvider) {
50
54
  return null;
51
55
  }
@@ -64,6 +68,7 @@ export const MediaInsertPicker = ({
64
68
  dispatchAnalyticsEvent(payload);
65
69
  }
66
70
  closeMediaInsertPicker();
71
+ focusEditor();
67
72
  };
68
73
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
69
74
  ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
@@ -82,6 +87,9 @@ export const MediaInsertPicker = ({
82
87
  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
83
88
  mediaProvider: mediaProvider,
84
89
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
85
- closeMediaInsertPicker: closeMediaInsertPicker
90
+ closeMediaInsertPicker: () => {
91
+ closeMediaInsertPicker();
92
+ focusEditor();
93
+ }
86
94
  })));
87
95
  };
package/dist/esm/hooks/use-focus-editor.js ADDED
@@ -0,0 +1,11 @@
1
+ import { useCallback } from 'react';
2
+ export var useFocusEditor = function useFocusEditor(_ref) {
3
+ var editorView = _ref.editorView;
4
+ var focusEditor = useCallback(function () {
5
+ // use setTimeout to run this async after the call
6
+ setTimeout(function () {
7
+ return editorView.focus();
8
+ }, 0);
9
+ }, [editorView]);
10
+ return focusEditor;
11
+ };
package/dist/esm/plugin.js CHANGED
@@ -36,8 +36,6 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
36
36
  popupsMountPoint = _ref3.popupsMountPoint,
37
37
  popupsBoundariesElement = _ref3.popupsBoundariesElement,
38
38
  popupsScrollableElement = _ref3.popupsScrollableElement;
39
- var dispatch = editorView.dispatch,
40
- state = editorView.state;
41
39
  return /*#__PURE__*/React.createElement(MediaInsertPicker, {
42
40
  api: api,
43
41
  editorView: editorView,
@@ -46,7 +44,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
46
44
  popupsBoundariesElement: popupsBoundariesElement,
47
45
  popupsScrollableElement: popupsScrollableElement,
48
46
  closeMediaInsertPicker: function closeMediaInsertPicker() {
49
- return dispatch(_closeMediaInsertPicker(state.tr));
47
+ editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
50
48
  }
51
49
  });
52
50
  },
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -6,6 +6,7 @@ import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
6
6
  import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
7
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
8
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
+ import { useFocusEditor } from '../hooks/use-focus-editor';
9
10
  import { MediaInsertContent } from './MediaInsertContent';
10
11
  import { MediaInsertWrapper } from './MediaInsertWrapper';
11
12
  var PopupWithListeners = withOuterListeners(Popup);
@@ -40,11 +41,14 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
40
41
  popupsMountPoint = _ref.popupsMountPoint,
41
42
  popupsBoundariesElement = _ref.popupsBoundariesElement,
42
43
  popupsScrollableElement = _ref.popupsScrollableElement,
43
- closeMediaInsertPicker = _ref.closeMediaInsertPicker;
44
+ _closeMediaInsertPicker = _ref.closeMediaInsertPicker;
44
45
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
45
46
  var isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
46
47
  var mediaProvider = (_useSharedPluginState2 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
47
48
  var intl = useIntl();
49
+ var focusEditor = useFocusEditor({
50
+ editorView: editorView
51
+ });
48
52
  if (!isOpen || !mediaProvider) {
49
53
  return null;
50
54
  }
@@ -63,7 +67,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
63
67
  };
64
68
  dispatchAnalyticsEvent(payload);
65
69
  }
66
- closeMediaInsertPicker();
70
+ _closeMediaInsertPicker();
71
+ focusEditor();
67
72
  };
68
73
  };
69
74
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
@@ -83,6 +88,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
83
88
  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
84
89
  mediaProvider: mediaProvider,
85
90
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
86
- closeMediaInsertPicker: closeMediaInsertPicker
91
+ closeMediaInsertPicker: function closeMediaInsertPicker() {
92
+ _closeMediaInsertPicker();
93
+ focusEditor();
94
+ }
87
95
  })));
88
96
  };
package/dist/types/hooks/use-focus-editor.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare const useFocusEditor: ({ editorView }: {
3
+ editorView: EditorView;
4
+ }) => () => void;
package/dist/types-ts4.5/hooks/use-focus-editor.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare const useFocusEditor: ({ editorView }: {
3
+ editorView: EditorView;
4
+ }) => () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "2.1.0",
3
+ "version": "2.1.2",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,15 +24,15 @@
24
24
  ".": "./src/index.ts"
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^20.0.0",
28
- "@atlaskit/editor-common": "^87.12.0",
29
- "@atlaskit/editor-plugin-analytics": "^1.7.0",
27
+ "@atlaskit/button": "^20.1.0",
28
+ "@atlaskit/editor-common": "^88.2.0",
29
+ "@atlaskit/editor-plugin-analytics": "^1.8.0",
30
30
  "@atlaskit/editor-plugin-media": "^1.29.0",
31
31
  "@atlaskit/editor-prosemirror": "5.0.1",
32
32
  "@atlaskit/editor-shared-styles": "^2.13.0",
33
- "@atlaskit/icon": "^22.13.0",
34
- "@atlaskit/media-card": "^78.0.0",
35
- "@atlaskit/media-client": "^27.3.0",
33
+ "@atlaskit/icon": "^22.15.0",
34
+ "@atlaskit/media-card": "^78.1.0",
35
+ "@atlaskit/media-client": "^27.5.0",
36
36
  "@atlaskit/media-client-react": "^2.1.0",
37
37
  "@atlaskit/primitives": "^12.0.0",
38
38
  "@atlaskit/section-message": "^6.6.0",
@@ -43,7 +43,7 @@
43
43
  "react-intl-next": "npm:react-intl@^5.18.1"
44
44
  },
45
45
  "peerDependencies": {
46
- "@atlaskit/tokens": "^1.58.0"
46
+ "@atlaskit/tokens": "^1.59.0"
47
47
  },
48
48
  "devDependencies": {
49
49
  "typescript": "~5.4.2"