@atlaskit/editor-plugin-media-insert 2.8.1 → 2.8.3

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 CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 2.8.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#144608](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144608)
8
+ [`d5049f3552bfa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d5049f3552bfa) -
9
+ [ux] [ED-25088] Hook up insertFile event subscribers to fix comment button state
10
+
11
+ ## 2.8.2
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 2.8.1
4
18
 
5
19
  ### Patch Changes
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.LocalMedia = void 0;
9
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
8
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
11
13
  var _reactIntlNext = require("react-intl-next");
12
14
  var _new = _interopRequireDefault(require("@atlaskit/button/new"));
13
15
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -17,6 +19,8 @@ var _mediaPicker = require("@atlaskit/media-picker");
17
19
  var _primitives = require("@atlaskit/primitives");
18
20
  var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
19
21
  var _useAnalyticsEvents2 = require("./useAnalyticsEvents");
22
+ 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); }
23
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
24
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
25
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
22
26
  var INITIAL_UPLOAD_STATE = Object.freeze({
@@ -68,7 +72,20 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
68
72
  uploadState = _React$useReducer2[0],
69
73
  dispatch = _React$useReducer2[1];
70
74
  var erroredFileIds = _react.default.useState(new Set())[0];
71
- var onUpload = function onUpload(_ref2) {
75
+
76
+ // This is a bit horrendous. Fundementally though, `insertFile` takes a
77
+ // callback that can ask for us to add listeners to any and all of the
78
+ // `Browser` events for each file uplaoded. We add a track those in a
79
+ // ref, call the CBs so the media-plugin can do it's thing, and then
80
+ // remove all listeners `onEnd`.
81
+ var eventSubscribers = _react.default.useRef({});
82
+ var onStateChanged = _react.default.useCallback(function (fileId) {
83
+ return function (cb) {
84
+ var _eventSubscribers$cur, _eventSubscribers$cur2;
85
+ eventSubscribers.current = _objectSpread(_objectSpread({}, eventSubscribers.current), {}, (0, _defineProperty2.default)({}, fileId, [].concat((0, _toConsumableArray2.default)((_eventSubscribers$cur = (_eventSubscribers$cur2 = eventSubscribers.current) === null || _eventSubscribers$cur2 === void 0 ? void 0 : _eventSubscribers$cur2[fileId]) !== null && _eventSubscribers$cur !== void 0 ? _eventSubscribers$cur : []), [cb])));
86
+ };
87
+ }, []);
88
+ var onPreviewUpdate = function onPreviewUpdate(_ref2) {
72
89
  var _mediaProvider$upload;
73
90
  var file = _ref2.file,
74
91
  preview = _ref2.preview;
@@ -90,13 +107,10 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
90
107
  scaleFactor: scaleFactor,
91
108
  status: isErroredFile ? 'error' : undefined
92
109
  };
93
- var onStateChanged = function onStateChanged(_cb) {
94
- // no-op
95
- };
96
110
  insertFile({
97
111
  mediaState: mediaState,
98
112
  inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER,
99
- onMediaStateChanged: onStateChanged
113
+ onMediaStateChanged: onStateChanged(file.id)
100
114
  });
101
115
  closeMediaInsertPicker();
102
116
 
@@ -107,6 +121,40 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
107
121
  };
108
122
  var uploadParams = mediaProvider.uploadParams,
109
123
  uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
124
+ var onEnd = (0, _react.useCallback)(function (payload) {
125
+ var _eventSubscribers$cur3, _eventSubscribers$cur4;
126
+ (_eventSubscribers$cur3 = eventSubscribers.current) === null || _eventSubscribers$cur3 === void 0 || (_eventSubscribers$cur3 = _eventSubscribers$cur3[payload.file.id]) === null || _eventSubscribers$cur3 === void 0 || _eventSubscribers$cur3.forEach(function (cb) {
127
+ return cb({
128
+ id: payload.file.id,
129
+ status: 'ready'
130
+ });
131
+ });
132
+ (_eventSubscribers$cur4 = eventSubscribers.current) === null || _eventSubscribers$cur4 === void 0 || delete _eventSubscribers$cur4[payload.file.id];
133
+ }, []);
134
+ var onError = (0, _react.useCallback)(function (_ref4) {
135
+ var _eventSubscribers$cur5, _eventSubscribers$cur6;
136
+ var error = _ref4.error,
137
+ fileId = _ref4.fileId;
138
+ // Dispatch the error events
139
+ onUploadFailureAnalytics(error.name, 'local');
140
+ dispatch({
141
+ type: 'error',
142
+ error: error.name
143
+ });
144
+
145
+ // Update the status of the errored file
146
+ erroredFileIds.add(fileId);
147
+
148
+ // Update and remove listeners
149
+ (_eventSubscribers$cur5 = eventSubscribers.current) === null || _eventSubscribers$cur5 === void 0 || (_eventSubscribers$cur5 = _eventSubscribers$cur5[fileId]) === null || _eventSubscribers$cur5 === void 0 || _eventSubscribers$cur5.forEach(function (cb) {
150
+ return cb({
151
+ id: fileId,
152
+ status: 'error',
153
+ error: error
154
+ });
155
+ });
156
+ (_eventSubscribers$cur6 = eventSubscribers.current) === null || _eventSubscribers$cur6 === void 0 || delete _eventSubscribers$cur6[fileId];
157
+ }, [erroredFileIds, onUploadFailureAnalytics]);
110
158
  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
111
159
  grow: "fill",
112
160
  space: "space.200"
@@ -131,26 +179,15 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
131
179
  },
132
180
  mediaClientConfig: uploadMediaClientConfig,
133
181
  onUploadsStart: function onUploadsStart() {
134
- onUploadCommencedAnalytics('local');
182
+ return onUploadCommencedAnalytics('local');
135
183
  },
136
- onPreviewUpdate: onUpload
184
+ onPreviewUpdate: onPreviewUpdate,
185
+ onEnd: onEnd
137
186
  // NOTE: this will fire for some errors like network failures, but not
138
187
  // for others like empty files. Those have their own feedback toast
139
188
  // owned by media.
140
189
  ,
141
- onError: function onError(_ref4) {
142
- var error = _ref4.error,
143
- fileId = _ref4.fileId;
144
- // Dispatch the error events
145
- onUploadFailureAnalytics(error.name, 'local');
146
- dispatch({
147
- type: 'error',
148
- error: error.name
149
- });
150
-
151
- // Update the status of the errored file
152
- erroredFileIds.add(fileId);
153
- },
190
+ onError: onError,
154
191
  onClose: function onClose() {
155
192
  erroredFileIds.clear();
156
193
  dispatch({
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import Button from '@atlaskit/button/new';
4
4
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -59,7 +59,21 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
59
59
  } = useAnalyticsEvents(dispatchAnalyticsEvent);
60
60
  const [uploadState, dispatch] = React.useReducer(uploadReducer, INITIAL_UPLOAD_STATE);
61
61
  const erroredFileIds = React.useState(new Set())[0];
62
- const onUpload = ({
62
+
63
+ // This is a bit horrendous. Fundementally though, `insertFile` takes a
64
+ // callback that can ask for us to add listeners to any and all of the
65
+ // `Browser` events for each file uplaoded. We add a track those in a
66
+ // ref, call the CBs so the media-plugin can do it's thing, and then
67
+ // remove all listeners `onEnd`.
68
+ const eventSubscribers = React.useRef({});
69
+ const onStateChanged = React.useCallback(fileId => cb => {
70
+ var _eventSubscribers$cur, _eventSubscribers$cur2;
71
+ eventSubscribers.current = {
72
+ ...eventSubscribers.current,
73
+ [fileId]: [...((_eventSubscribers$cur = (_eventSubscribers$cur2 = eventSubscribers.current) === null || _eventSubscribers$cur2 === void 0 ? void 0 : _eventSubscribers$cur2[fileId]) !== null && _eventSubscribers$cur !== void 0 ? _eventSubscribers$cur : []), cb]
74
+ };
75
+ }, []);
76
+ const onPreviewUpdate = ({
63
77
  file,
64
78
  preview
65
79
  }) => {
@@ -83,13 +97,10 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
83
97
  scaleFactor,
84
98
  status: isErroredFile ? 'error' : undefined
85
99
  };
86
- const onStateChanged = _cb => {
87
- // no-op
88
- };
89
100
  insertFile({
90
101
  mediaState,
91
102
  inputMethod: INPUT_METHOD.MEDIA_PICKER,
92
- onMediaStateChanged: onStateChanged
103
+ onMediaStateChanged: onStateChanged(file.id)
93
104
  });
94
105
  closeMediaInsertPicker();
95
106
 
@@ -102,6 +113,37 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
102
113
  uploadParams,
103
114
  uploadMediaClientConfig
104
115
  } = mediaProvider;
116
+ const onEnd = useCallback(payload => {
117
+ var _eventSubscribers$cur3, _eventSubscribers$cur4, _eventSubscribers$cur5;
118
+ (_eventSubscribers$cur3 = eventSubscribers.current) === null || _eventSubscribers$cur3 === void 0 ? void 0 : (_eventSubscribers$cur4 = _eventSubscribers$cur3[payload.file.id]) === null || _eventSubscribers$cur4 === void 0 ? void 0 : _eventSubscribers$cur4.forEach(cb => cb({
119
+ id: payload.file.id,
120
+ status: 'ready'
121
+ }));
122
+ (_eventSubscribers$cur5 = eventSubscribers.current) === null || _eventSubscribers$cur5 === void 0 ? true : delete _eventSubscribers$cur5[payload.file.id];
123
+ }, []);
124
+ const onError = useCallback(({
125
+ error,
126
+ fileId
127
+ }) => {
128
+ var _eventSubscribers$cur6, _eventSubscribers$cur7, _eventSubscribers$cur8;
129
+ // Dispatch the error events
130
+ onUploadFailureAnalytics(error.name, 'local');
131
+ dispatch({
132
+ type: 'error',
133
+ error: error.name
134
+ });
135
+
136
+ // Update the status of the errored file
137
+ erroredFileIds.add(fileId);
138
+
139
+ // Update and remove listeners
140
+ (_eventSubscribers$cur6 = eventSubscribers.current) === null || _eventSubscribers$cur6 === void 0 ? void 0 : (_eventSubscribers$cur7 = _eventSubscribers$cur6[fileId]) === null || _eventSubscribers$cur7 === void 0 ? void 0 : _eventSubscribers$cur7.forEach(cb => cb({
141
+ id: fileId,
142
+ status: 'error',
143
+ error: error
144
+ }));
145
+ (_eventSubscribers$cur8 = eventSubscribers.current) === null || _eventSubscribers$cur8 === void 0 ? true : delete _eventSubscribers$cur8[fileId];
146
+ }, [erroredFileIds, onUploadFailureAnalytics]);
105
147
  return /*#__PURE__*/React.createElement(Stack, {
106
148
  grow: "fill",
107
149
  space: "space.200"
@@ -125,28 +167,14 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
125
167
  multiple: true
126
168
  },
127
169
  mediaClientConfig: uploadMediaClientConfig,
128
- onUploadsStart: () => {
129
- onUploadCommencedAnalytics('local');
130
- },
131
- onPreviewUpdate: onUpload
170
+ onUploadsStart: () => onUploadCommencedAnalytics('local'),
171
+ onPreviewUpdate: onPreviewUpdate,
172
+ onEnd: onEnd
132
173
  // NOTE: this will fire for some errors like network failures, but not
133
174
  // for others like empty files. Those have their own feedback toast
134
175
  // owned by media.
135
176
  ,
136
- onError: ({
137
- error,
138
- fileId
139
- }) => {
140
- // Dispatch the error events
141
- onUploadFailureAnalytics(error.name, 'local');
142
- dispatch({
143
- type: 'error',
144
- error: error.name
145
- });
146
-
147
- // Update the status of the errored file
148
- erroredFileIds.add(fileId);
149
- },
177
+ onError: onError,
150
178
  onClose: () => {
151
179
  erroredFileIds.clear();
152
180
  dispatch({
@@ -1,8 +1,9 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
- import React from 'react';
6
+ import React, { useCallback } from 'react';
6
7
  import { useIntl } from 'react-intl-next';
7
8
  import Button from '@atlaskit/button/new';
8
9
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -61,7 +62,20 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
61
62
  uploadState = _React$useReducer2[0],
62
63
  dispatch = _React$useReducer2[1];
63
64
  var erroredFileIds = React.useState(new Set())[0];
64
- var onUpload = function onUpload(_ref2) {
65
+
66
+ // This is a bit horrendous. Fundementally though, `insertFile` takes a
67
+ // callback that can ask for us to add listeners to any and all of the
68
+ // `Browser` events for each file uplaoded. We add a track those in a
69
+ // ref, call the CBs so the media-plugin can do it's thing, and then
70
+ // remove all listeners `onEnd`.
71
+ var eventSubscribers = React.useRef({});
72
+ var onStateChanged = React.useCallback(function (fileId) {
73
+ return function (cb) {
74
+ var _eventSubscribers$cur, _eventSubscribers$cur2;
75
+ eventSubscribers.current = _objectSpread(_objectSpread({}, eventSubscribers.current), {}, _defineProperty({}, fileId, [].concat(_toConsumableArray((_eventSubscribers$cur = (_eventSubscribers$cur2 = eventSubscribers.current) === null || _eventSubscribers$cur2 === void 0 ? void 0 : _eventSubscribers$cur2[fileId]) !== null && _eventSubscribers$cur !== void 0 ? _eventSubscribers$cur : []), [cb])));
76
+ };
77
+ }, []);
78
+ var onPreviewUpdate = function onPreviewUpdate(_ref2) {
65
79
  var _mediaProvider$upload;
66
80
  var file = _ref2.file,
67
81
  preview = _ref2.preview;
@@ -83,13 +97,10 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
83
97
  scaleFactor: scaleFactor,
84
98
  status: isErroredFile ? 'error' : undefined
85
99
  };
86
- var onStateChanged = function onStateChanged(_cb) {
87
- // no-op
88
- };
89
100
  insertFile({
90
101
  mediaState: mediaState,
91
102
  inputMethod: INPUT_METHOD.MEDIA_PICKER,
92
- onMediaStateChanged: onStateChanged
103
+ onMediaStateChanged: onStateChanged(file.id)
93
104
  });
94
105
  closeMediaInsertPicker();
95
106
 
@@ -100,6 +111,40 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
100
111
  };
101
112
  var uploadParams = mediaProvider.uploadParams,
102
113
  uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
114
+ var onEnd = useCallback(function (payload) {
115
+ var _eventSubscribers$cur3, _eventSubscribers$cur4;
116
+ (_eventSubscribers$cur3 = eventSubscribers.current) === null || _eventSubscribers$cur3 === void 0 || (_eventSubscribers$cur3 = _eventSubscribers$cur3[payload.file.id]) === null || _eventSubscribers$cur3 === void 0 || _eventSubscribers$cur3.forEach(function (cb) {
117
+ return cb({
118
+ id: payload.file.id,
119
+ status: 'ready'
120
+ });
121
+ });
122
+ (_eventSubscribers$cur4 = eventSubscribers.current) === null || _eventSubscribers$cur4 === void 0 || delete _eventSubscribers$cur4[payload.file.id];
123
+ }, []);
124
+ var onError = useCallback(function (_ref4) {
125
+ var _eventSubscribers$cur5, _eventSubscribers$cur6;
126
+ var error = _ref4.error,
127
+ fileId = _ref4.fileId;
128
+ // Dispatch the error events
129
+ onUploadFailureAnalytics(error.name, 'local');
130
+ dispatch({
131
+ type: 'error',
132
+ error: error.name
133
+ });
134
+
135
+ // Update the status of the errored file
136
+ erroredFileIds.add(fileId);
137
+
138
+ // Update and remove listeners
139
+ (_eventSubscribers$cur5 = eventSubscribers.current) === null || _eventSubscribers$cur5 === void 0 || (_eventSubscribers$cur5 = _eventSubscribers$cur5[fileId]) === null || _eventSubscribers$cur5 === void 0 || _eventSubscribers$cur5.forEach(function (cb) {
140
+ return cb({
141
+ id: fileId,
142
+ status: 'error',
143
+ error: error
144
+ });
145
+ });
146
+ (_eventSubscribers$cur6 = eventSubscribers.current) === null || _eventSubscribers$cur6 === void 0 || delete _eventSubscribers$cur6[fileId];
147
+ }, [erroredFileIds, onUploadFailureAnalytics]);
103
148
  return /*#__PURE__*/React.createElement(Stack, {
104
149
  grow: "fill",
105
150
  space: "space.200"
@@ -124,26 +169,15 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
124
169
  },
125
170
  mediaClientConfig: uploadMediaClientConfig,
126
171
  onUploadsStart: function onUploadsStart() {
127
- onUploadCommencedAnalytics('local');
172
+ return onUploadCommencedAnalytics('local');
128
173
  },
129
- onPreviewUpdate: onUpload
174
+ onPreviewUpdate: onPreviewUpdate,
175
+ onEnd: onEnd
130
176
  // NOTE: this will fire for some errors like network failures, but not
131
177
  // for others like empty files. Those have their own feedback toast
132
178
  // owned by media.
133
179
  ,
134
- onError: function onError(_ref4) {
135
- var error = _ref4.error,
136
- fileId = _ref4.fileId;
137
- // Dispatch the error events
138
- onUploadFailureAnalytics(error.name, 'local');
139
- dispatch({
140
- type: 'error',
141
- error: error.name
142
- });
143
-
144
- // Update the status of the errored file
145
- erroredFileIds.add(fileId);
146
- },
180
+ onError: onError,
147
181
  onClose: function onClose() {
148
182
  erroredFileIds.clear();
149
183
  dispatch({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "2.8.1",
3
+ "version": "2.8.3",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,8 +24,8 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/adf-schema": "^40.9.0",
27
- "@atlaskit/button": "^20.1.0",
28
- "@atlaskit/editor-common": "^90.2.0",
27
+ "@atlaskit/button": "^20.2.0",
28
+ "@atlaskit/editor-common": "^91.0.0",
29
29
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
30
30
  "@atlaskit/editor-plugin-media": "^1.32.0",
31
31
  "@atlaskit/editor-prosemirror": "6.0.0",