@atlaskit/editor-plugin-media-insert 3.1.0 → 3.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.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/actions.js +4 -4
- package/dist/cjs/plugin.js +6 -7
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/cjs/ui/MediaFromURL.js +1 -2
- package/dist/cjs/ui/MediaInsertPicker.js +13 -6
- package/dist/es2019/actions.js +4 -4
- package/dist/es2019/plugin.js +6 -7
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/es2019/ui/MediaFromURL.js +2 -3
- package/dist/es2019/ui/MediaInsertPicker.js +13 -6
- package/dist/esm/actions.js +4 -4
- package/dist/esm/plugin.js +6 -7
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/esm/ui/MediaFromURL.js +2 -3
- package/dist/esm/ui/MediaInsertPicker.js +13 -6
- package/dist/types/actions.d.ts +4 -1
- package/dist/types/types.d.ts +8 -4
- package/dist/types-ts4.5/actions.d.ts +4 -1
- package/dist/types-ts4.5/types.d.ts +8 -4
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media-insert
|
|
2
2
|
|
|
3
|
+
## 3.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#147461](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147461)
|
|
8
|
+
[`acef010cdb706`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acef010cdb706) -
|
|
9
|
+
[ux] [ED-25164] Pass mounting point to media insert plugin for correct toolbar popup positioning
|
|
10
|
+
- [#147206](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147206)
|
|
11
|
+
[`c3f82dfdeaf62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3f82dfdeaf62) -
|
|
12
|
+
[ED-25157] Make sure document inserted for media from the media insert plugin has the correct
|
|
13
|
+
attributes (insertMediaVia)
|
|
14
|
+
|
|
15
|
+
## 3.1.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#147220](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147220)
|
|
20
|
+
[`6d387adfcf115`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d387adfcf115) -
|
|
21
|
+
[ux] [ED-25164] Disable media popup toolbar pinning
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 3.1.0
|
|
4
25
|
|
|
5
26
|
### Minor Changes
|
package/dist/cjs/actions.js
CHANGED
|
@@ -11,20 +11,20 @@ var ACTION_CLOSE_POPUP = exports.ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
|
|
|
11
11
|
var setPopupMeta = function setPopupMeta(_ref) {
|
|
12
12
|
var type = _ref.type,
|
|
13
13
|
tr = _ref.tr,
|
|
14
|
-
|
|
14
|
+
mountInfo = _ref.mountInfo;
|
|
15
15
|
return tr.setMeta(_pluginKey.pluginKey, {
|
|
16
16
|
type: type,
|
|
17
|
-
|
|
17
|
+
mountInfo: mountInfo
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr,
|
|
20
|
+
var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr, mountInfo) {
|
|
21
21
|
// Log exposure here but don't actually switch anything on it
|
|
22
22
|
(0, _experiments.editorExperiment)('add-media-from-url', true, {
|
|
23
23
|
exposure: true
|
|
24
24
|
});
|
|
25
25
|
return setPopupMeta({
|
|
26
26
|
type: ACTION_OPEN_POPUP,
|
|
27
|
-
|
|
27
|
+
mountInfo: mountInfo,
|
|
28
28
|
tr: tr
|
|
29
29
|
});
|
|
30
30
|
};
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -36,17 +36,17 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
36
36
|
}
|
|
37
37
|
var _ref2 = _pluginKey.pluginKey.getState(editorState) || {},
|
|
38
38
|
isOpen = _ref2.isOpen,
|
|
39
|
-
|
|
39
|
+
mountInfo = _ref2.mountInfo;
|
|
40
40
|
return {
|
|
41
41
|
isOpen: isOpen,
|
|
42
|
-
|
|
42
|
+
mountInfo: mountInfo
|
|
43
43
|
};
|
|
44
44
|
},
|
|
45
45
|
commands: {
|
|
46
|
-
showMediaInsertPopup: function showMediaInsertPopup(
|
|
46
|
+
showMediaInsertPopup: function showMediaInsertPopup(mountInfo) {
|
|
47
47
|
return function (_ref3) {
|
|
48
48
|
var tr = _ref3.tr;
|
|
49
|
-
return (0, _actions.showMediaInsertPopup)(tr,
|
|
49
|
+
return (0, _actions.showMediaInsertPopup)(tr, mountInfo);
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
},
|
|
@@ -59,8 +59,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
59
59
|
var insertMediaSingle = function insertMediaSingle(_ref5) {
|
|
60
60
|
var _api$media$actions$in;
|
|
61
61
|
var mediaState = _ref5.mediaState,
|
|
62
|
-
inputMethod = _ref5.inputMethod
|
|
63
|
-
insertMediaVia = _ref5.insertMediaVia;
|
|
62
|
+
inputMethod = _ref5.inputMethod;
|
|
64
63
|
var id = mediaState.id,
|
|
65
64
|
dimensions = mediaState.dimensions,
|
|
66
65
|
contextId = mediaState.contextId,
|
|
@@ -85,7 +84,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
85
84
|
alt: fileName,
|
|
86
85
|
__fileMimeType: mediaState.fileMimeType
|
|
87
86
|
});
|
|
88
|
-
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported,
|
|
87
|
+
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, _analytics.INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
|
|
89
88
|
};
|
|
90
89
|
var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
|
|
91
90
|
var _api$media$actions$in2;
|
|
@@ -13,7 +13,7 @@ var createPlugin = exports.createPlugin = function createPlugin() {
|
|
|
13
13
|
init: function init() {
|
|
14
14
|
return {
|
|
15
15
|
isOpen: false,
|
|
16
|
-
|
|
16
|
+
mountInfo: undefined
|
|
17
17
|
};
|
|
18
18
|
},
|
|
19
19
|
apply: function apply(tr, mediaInsertPluginState) {
|
|
@@ -22,7 +22,7 @@ var createPlugin = exports.createPlugin = function createPlugin() {
|
|
|
22
22
|
case _actions.ACTION_OPEN_POPUP:
|
|
23
23
|
return {
|
|
24
24
|
isOpen: true,
|
|
25
|
-
|
|
25
|
+
mountInfo: meta.mountInfo
|
|
26
26
|
};
|
|
27
27
|
case _actions.ACTION_CLOSE_POPUP:
|
|
28
28
|
return {
|
|
@@ -250,8 +250,7 @@ function MediaFromURL(_ref) {
|
|
|
250
250
|
if (previewState.previewInfo) {
|
|
251
251
|
insertMediaSingle({
|
|
252
252
|
mediaState: previewState.previewInfo,
|
|
253
|
-
inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
|
|
254
|
-
insertMediaVia: _analytics.INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
|
|
253
|
+
inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
|
|
255
254
|
});
|
|
256
255
|
}
|
|
257
256
|
closeMediaInsertPicker();
|
|
@@ -82,10 +82,17 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
82
82
|
insertFile = _ref2.insertFile;
|
|
83
83
|
var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
|
|
84
84
|
isOpen = _ref3.isOpen,
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
mountInfo = _ref3.mountInfo;
|
|
86
|
+
var targetRef;
|
|
87
|
+
var mountPoint;
|
|
88
|
+
if (mountInfo) {
|
|
89
|
+
targetRef = mountInfo.ref;
|
|
90
|
+
mountPoint = mountInfo.mountPoint;
|
|
91
|
+
} else {
|
|
92
|
+
// If targetRef is undefined, target the selection in the editor
|
|
93
|
+
targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
94
|
+
mountPoint = popupsMountPoint;
|
|
95
|
+
}
|
|
89
96
|
var mediaProvider = (_useSharedPluginState3 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState3 === void 0 || (_useSharedPluginState3 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState3 === void 0 ? void 0 : _useSharedPluginState3.mediaProvider;
|
|
90
97
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
91
98
|
var focusEditor = (0, _useFocusEditor.useFocusEditor)({
|
|
@@ -119,11 +126,11 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
119
126
|
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
|
|
120
127
|
ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel),
|
|
121
128
|
offset: [0, 12],
|
|
122
|
-
target:
|
|
129
|
+
target: targetRef,
|
|
123
130
|
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
|
|
124
131
|
fitHeight: 390,
|
|
125
132
|
fitWidth: 340,
|
|
126
|
-
mountTo:
|
|
133
|
+
mountTo: mountPoint,
|
|
127
134
|
boundariesElement: popupsBoundariesElement,
|
|
128
135
|
handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
|
|
129
136
|
handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
|
package/dist/es2019/actions.js
CHANGED
|
@@ -5,19 +5,19 @@ export const ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
|
|
|
5
5
|
const setPopupMeta = ({
|
|
6
6
|
type,
|
|
7
7
|
tr,
|
|
8
|
-
|
|
8
|
+
mountInfo
|
|
9
9
|
}) => tr.setMeta(pluginKey, {
|
|
10
10
|
type,
|
|
11
|
-
|
|
11
|
+
mountInfo
|
|
12
12
|
});
|
|
13
|
-
export const showMediaInsertPopup = (tr,
|
|
13
|
+
export const showMediaInsertPopup = (tr, mountInfo) => {
|
|
14
14
|
// Log exposure here but don't actually switch anything on it
|
|
15
15
|
editorExperiment('add-media-from-url', true, {
|
|
16
16
|
exposure: true
|
|
17
17
|
});
|
|
18
18
|
return setPopupMeta({
|
|
19
19
|
type: ACTION_OPEN_POPUP,
|
|
20
|
-
|
|
20
|
+
mountInfo,
|
|
21
21
|
tr
|
|
22
22
|
});
|
|
23
23
|
};
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -28,17 +28,17 @@ export const mediaInsertPlugin = ({
|
|
|
28
28
|
}
|
|
29
29
|
const {
|
|
30
30
|
isOpen,
|
|
31
|
-
|
|
31
|
+
mountInfo
|
|
32
32
|
} = pluginKey.getState(editorState) || {};
|
|
33
33
|
return {
|
|
34
34
|
isOpen,
|
|
35
|
-
|
|
35
|
+
mountInfo
|
|
36
36
|
};
|
|
37
37
|
},
|
|
38
38
|
commands: {
|
|
39
|
-
showMediaInsertPopup:
|
|
39
|
+
showMediaInsertPopup: mountInfo => ({
|
|
40
40
|
tr
|
|
41
|
-
}) => showMediaInsertPopup(tr,
|
|
41
|
+
}) => showMediaInsertPopup(tr, mountInfo)
|
|
42
42
|
},
|
|
43
43
|
contentComponent: ({
|
|
44
44
|
editorView,
|
|
@@ -49,8 +49,7 @@ export const mediaInsertPlugin = ({
|
|
|
49
49
|
}) => {
|
|
50
50
|
const insertMediaSingle = ({
|
|
51
51
|
mediaState,
|
|
52
|
-
inputMethod
|
|
53
|
-
insertMediaVia
|
|
52
|
+
inputMethod
|
|
54
53
|
}) => {
|
|
55
54
|
var _api$media$actions$in;
|
|
56
55
|
const {
|
|
@@ -79,7 +78,7 @@ export const mediaInsertPlugin = ({
|
|
|
79
78
|
alt: fileName,
|
|
80
79
|
__fileMimeType: mediaState.fileMimeType
|
|
81
80
|
});
|
|
82
|
-
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported,
|
|
81
|
+
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
|
|
83
82
|
};
|
|
84
83
|
const insertExternalMediaSingle = ({
|
|
85
84
|
url,
|
|
@@ -7,7 +7,7 @@ export const createPlugin = () => {
|
|
|
7
7
|
init() {
|
|
8
8
|
return {
|
|
9
9
|
isOpen: false,
|
|
10
|
-
|
|
10
|
+
mountInfo: undefined
|
|
11
11
|
};
|
|
12
12
|
},
|
|
13
13
|
apply(tr, mediaInsertPluginState) {
|
|
@@ -16,7 +16,7 @@ export const createPlugin = () => {
|
|
|
16
16
|
case ACTION_OPEN_POPUP:
|
|
17
17
|
return {
|
|
18
18
|
isOpen: true,
|
|
19
|
-
|
|
19
|
+
mountInfo: meta.mountInfo
|
|
20
20
|
};
|
|
21
21
|
case ACTION_CLOSE_POPUP:
|
|
22
22
|
return {
|
|
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl-next';
|
|
|
4
4
|
import { isSafeUrl } from '@atlaskit/adf-schema';
|
|
5
5
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
6
6
|
import Button from '@atlaskit/button/new';
|
|
7
|
-
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD
|
|
7
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
8
8
|
import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
|
|
9
9
|
import { ErrorMessage } from '@atlaskit/form';
|
|
10
10
|
import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
@@ -211,8 +211,7 @@ export function MediaFromURL({
|
|
|
211
211
|
if (previewState.previewInfo) {
|
|
212
212
|
insertMediaSingle({
|
|
213
213
|
mediaState: previewState.previewInfo,
|
|
214
|
-
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
215
|
-
insertMediaVia: INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
|
|
214
|
+
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
216
215
|
});
|
|
217
216
|
}
|
|
218
217
|
closeMediaInsertPicker();
|
|
@@ -74,11 +74,18 @@ export const MediaInsertPicker = ({
|
|
|
74
74
|
var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
|
|
75
75
|
const {
|
|
76
76
|
isOpen,
|
|
77
|
-
|
|
77
|
+
mountInfo
|
|
78
78
|
} = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {};
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
let targetRef;
|
|
80
|
+
let mountPoint;
|
|
81
|
+
if (mountInfo) {
|
|
82
|
+
targetRef = mountInfo.ref;
|
|
83
|
+
mountPoint = mountInfo.mountPoint;
|
|
84
|
+
} else {
|
|
85
|
+
// If targetRef is undefined, target the selection in the editor
|
|
86
|
+
targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
87
|
+
mountPoint = popupsMountPoint;
|
|
88
|
+
}
|
|
82
89
|
const mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 ? void 0 : (_useSharedPluginState4 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState4 === void 0 ? void 0 : _useSharedPluginState4.mediaProvider;
|
|
83
90
|
const intl = useIntl();
|
|
84
91
|
const focusEditor = useFocusEditor({
|
|
@@ -111,11 +118,11 @@ export const MediaInsertPicker = ({
|
|
|
111
118
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
112
119
|
ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
|
|
113
120
|
offset: [0, 12],
|
|
114
|
-
target:
|
|
121
|
+
target: targetRef,
|
|
115
122
|
zIndex: akEditorFloatingDialogZIndex,
|
|
116
123
|
fitHeight: 390,
|
|
117
124
|
fitWidth: 340,
|
|
118
|
-
mountTo:
|
|
125
|
+
mountTo: mountPoint,
|
|
119
126
|
boundariesElement: popupsBoundariesElement,
|
|
120
127
|
handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
|
|
121
128
|
handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
|
package/dist/esm/actions.js
CHANGED
|
@@ -5,20 +5,20 @@ export var ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
|
|
|
5
5
|
var setPopupMeta = function setPopupMeta(_ref) {
|
|
6
6
|
var type = _ref.type,
|
|
7
7
|
tr = _ref.tr,
|
|
8
|
-
|
|
8
|
+
mountInfo = _ref.mountInfo;
|
|
9
9
|
return tr.setMeta(pluginKey, {
|
|
10
10
|
type: type,
|
|
11
|
-
|
|
11
|
+
mountInfo: mountInfo
|
|
12
12
|
});
|
|
13
13
|
};
|
|
14
|
-
export var showMediaInsertPopup = function showMediaInsertPopup(tr,
|
|
14
|
+
export var showMediaInsertPopup = function showMediaInsertPopup(tr, mountInfo) {
|
|
15
15
|
// Log exposure here but don't actually switch anything on it
|
|
16
16
|
editorExperiment('add-media-from-url', true, {
|
|
17
17
|
exposure: true
|
|
18
18
|
});
|
|
19
19
|
return setPopupMeta({
|
|
20
20
|
type: ACTION_OPEN_POPUP,
|
|
21
|
-
|
|
21
|
+
mountInfo: mountInfo,
|
|
22
22
|
tr: tr
|
|
23
23
|
});
|
|
24
24
|
};
|
package/dist/esm/plugin.js
CHANGED
|
@@ -29,17 +29,17 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
29
29
|
}
|
|
30
30
|
var _ref2 = pluginKey.getState(editorState) || {},
|
|
31
31
|
isOpen = _ref2.isOpen,
|
|
32
|
-
|
|
32
|
+
mountInfo = _ref2.mountInfo;
|
|
33
33
|
return {
|
|
34
34
|
isOpen: isOpen,
|
|
35
|
-
|
|
35
|
+
mountInfo: mountInfo
|
|
36
36
|
};
|
|
37
37
|
},
|
|
38
38
|
commands: {
|
|
39
|
-
showMediaInsertPopup: function showMediaInsertPopup(
|
|
39
|
+
showMediaInsertPopup: function showMediaInsertPopup(mountInfo) {
|
|
40
40
|
return function (_ref3) {
|
|
41
41
|
var tr = _ref3.tr;
|
|
42
|
-
return _showMediaInsertPopup(tr,
|
|
42
|
+
return _showMediaInsertPopup(tr, mountInfo);
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
},
|
|
@@ -52,8 +52,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
52
52
|
var insertMediaSingle = function insertMediaSingle(_ref5) {
|
|
53
53
|
var _api$media$actions$in;
|
|
54
54
|
var mediaState = _ref5.mediaState,
|
|
55
|
-
inputMethod = _ref5.inputMethod
|
|
56
|
-
insertMediaVia = _ref5.insertMediaVia;
|
|
55
|
+
inputMethod = _ref5.inputMethod;
|
|
57
56
|
var id = mediaState.id,
|
|
58
57
|
dimensions = mediaState.dimensions,
|
|
59
58
|
contextId = mediaState.contextId,
|
|
@@ -78,7 +77,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
78
77
|
alt: fileName,
|
|
79
78
|
__fileMimeType: mediaState.fileMimeType
|
|
80
79
|
});
|
|
81
|
-
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported,
|
|
80
|
+
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
|
|
82
81
|
};
|
|
83
82
|
var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
|
|
84
83
|
var _api$media$actions$in2;
|
|
@@ -7,7 +7,7 @@ export var createPlugin = function createPlugin() {
|
|
|
7
7
|
init: function init() {
|
|
8
8
|
return {
|
|
9
9
|
isOpen: false,
|
|
10
|
-
|
|
10
|
+
mountInfo: undefined
|
|
11
11
|
};
|
|
12
12
|
},
|
|
13
13
|
apply: function apply(tr, mediaInsertPluginState) {
|
|
@@ -16,7 +16,7 @@ export var createPlugin = function createPlugin() {
|
|
|
16
16
|
case ACTION_OPEN_POPUP:
|
|
17
17
|
return {
|
|
18
18
|
isOpen: true,
|
|
19
|
-
|
|
19
|
+
mountInfo: meta.mountInfo
|
|
20
20
|
};
|
|
21
21
|
case ACTION_CLOSE_POPUP:
|
|
22
22
|
return {
|
|
@@ -10,7 +10,7 @@ import { useIntl } from 'react-intl-next';
|
|
|
10
10
|
import { isSafeUrl } from '@atlaskit/adf-schema';
|
|
11
11
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
12
12
|
import Button from '@atlaskit/button/new';
|
|
13
|
-
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD
|
|
13
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
14
14
|
import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
|
|
15
15
|
import { ErrorMessage } from '@atlaskit/form';
|
|
16
16
|
import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
@@ -242,8 +242,7 @@ export function MediaFromURL(_ref) {
|
|
|
242
242
|
if (previewState.previewInfo) {
|
|
243
243
|
insertMediaSingle({
|
|
244
244
|
mediaState: previewState.previewInfo,
|
|
245
|
-
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
246
|
-
insertMediaVia: INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
|
|
245
|
+
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
247
246
|
});
|
|
248
247
|
}
|
|
249
248
|
closeMediaInsertPicker();
|
|
@@ -72,10 +72,17 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
72
72
|
insertFile = _ref2.insertFile;
|
|
73
73
|
var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
|
|
74
74
|
isOpen = _ref3.isOpen,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
mountInfo = _ref3.mountInfo;
|
|
76
|
+
var targetRef;
|
|
77
|
+
var mountPoint;
|
|
78
|
+
if (mountInfo) {
|
|
79
|
+
targetRef = mountInfo.ref;
|
|
80
|
+
mountPoint = mountInfo.mountPoint;
|
|
81
|
+
} else {
|
|
82
|
+
// If targetRef is undefined, target the selection in the editor
|
|
83
|
+
targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
84
|
+
mountPoint = popupsMountPoint;
|
|
85
|
+
}
|
|
79
86
|
var mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 || (_useSharedPluginState3 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState3 === void 0 ? void 0 : _useSharedPluginState3.mediaProvider;
|
|
80
87
|
var intl = useIntl();
|
|
81
88
|
var focusEditor = useFocusEditor({
|
|
@@ -109,11 +116,11 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
109
116
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
110
117
|
ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
|
|
111
118
|
offset: [0, 12],
|
|
112
|
-
target:
|
|
119
|
+
target: targetRef,
|
|
113
120
|
zIndex: akEditorFloatingDialogZIndex,
|
|
114
121
|
fitHeight: 390,
|
|
115
122
|
fitWidth: 340,
|
|
116
|
-
mountTo:
|
|
123
|
+
mountTo: mountPoint,
|
|
117
124
|
boundariesElement: popupsBoundariesElement,
|
|
118
125
|
handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
|
|
119
126
|
handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
|
package/dist/types/actions.d.ts
CHANGED
|
@@ -2,5 +2,8 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
export type MediaInsertPluginAction = typeof ACTION_OPEN_POPUP | typeof ACTION_CLOSE_POPUP;
|
|
3
3
|
export declare const ACTION_OPEN_POPUP = "OPEN_POPUP";
|
|
4
4
|
export declare const ACTION_CLOSE_POPUP = "CLOSE_POPUP";
|
|
5
|
-
export declare const showMediaInsertPopup: (tr: Transaction,
|
|
5
|
+
export declare const showMediaInsertPopup: (tr: Transaction, mountInfo?: {
|
|
6
|
+
ref: HTMLElement;
|
|
7
|
+
mountPoint: HTMLElement;
|
|
8
|
+
}) => Transaction;
|
|
6
9
|
export declare const closeMediaInsertPicker: (tr: Transaction) => Transaction;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
|
|
3
2
|
import type { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
4
3
|
import type { EditorCommand, NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
|
|
5
4
|
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
@@ -9,12 +8,14 @@ import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
|
|
|
9
8
|
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
10
9
|
export type MediaInsertPluginState = {
|
|
11
10
|
isOpen?: boolean;
|
|
12
|
-
|
|
11
|
+
mountInfo?: {
|
|
12
|
+
ref: HTMLElement;
|
|
13
|
+
mountPoint: HTMLElement;
|
|
14
|
+
};
|
|
13
15
|
};
|
|
14
16
|
export type InsertMediaSingle = (props: {
|
|
15
17
|
mediaState: MediaState;
|
|
16
18
|
inputMethod: InputMethodInsertMedia;
|
|
17
|
-
insertMediaVia: InsertMediaVia;
|
|
18
19
|
}) => boolean;
|
|
19
20
|
export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
20
21
|
dependencies: [
|
|
@@ -24,7 +25,10 @@ export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
|
24
25
|
];
|
|
25
26
|
sharedState: MediaInsertPluginState;
|
|
26
27
|
commands: {
|
|
27
|
-
showMediaInsertPopup: (
|
|
28
|
+
showMediaInsertPopup: (mountInfo?: {
|
|
29
|
+
ref: HTMLElement;
|
|
30
|
+
mountPoint: HTMLElement;
|
|
31
|
+
}) => EditorCommand;
|
|
28
32
|
};
|
|
29
33
|
}>;
|
|
30
34
|
export type InsertExternalMediaSingle = (props: {
|
|
@@ -2,5 +2,8 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
export type MediaInsertPluginAction = typeof ACTION_OPEN_POPUP | typeof ACTION_CLOSE_POPUP;
|
|
3
3
|
export declare const ACTION_OPEN_POPUP = "OPEN_POPUP";
|
|
4
4
|
export declare const ACTION_CLOSE_POPUP = "CLOSE_POPUP";
|
|
5
|
-
export declare const showMediaInsertPopup: (tr: Transaction,
|
|
5
|
+
export declare const showMediaInsertPopup: (tr: Transaction, mountInfo?: {
|
|
6
|
+
ref: HTMLElement;
|
|
7
|
+
mountPoint: HTMLElement;
|
|
8
|
+
}) => Transaction;
|
|
6
9
|
export declare const closeMediaInsertPicker: (tr: Transaction) => Transaction;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
|
|
3
2
|
import type { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
4
3
|
import type { EditorCommand, NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
|
|
5
4
|
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
@@ -9,12 +8,14 @@ import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
|
|
|
9
8
|
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
10
9
|
export type MediaInsertPluginState = {
|
|
11
10
|
isOpen?: boolean;
|
|
12
|
-
|
|
11
|
+
mountInfo?: {
|
|
12
|
+
ref: HTMLElement;
|
|
13
|
+
mountPoint: HTMLElement;
|
|
14
|
+
};
|
|
13
15
|
};
|
|
14
16
|
export type InsertMediaSingle = (props: {
|
|
15
17
|
mediaState: MediaState;
|
|
16
18
|
inputMethod: InputMethodInsertMedia;
|
|
17
|
-
insertMediaVia: InsertMediaVia;
|
|
18
19
|
}) => boolean;
|
|
19
20
|
export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
20
21
|
dependencies: [
|
|
@@ -24,7 +25,10 @@ export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
|
24
25
|
];
|
|
25
26
|
sharedState: MediaInsertPluginState;
|
|
26
27
|
commands: {
|
|
27
|
-
showMediaInsertPopup: (
|
|
28
|
+
showMediaInsertPopup: (mountInfo?: {
|
|
29
|
+
ref: HTMLElement;
|
|
30
|
+
mountPoint: HTMLElement;
|
|
31
|
+
}) => EditorCommand;
|
|
28
32
|
};
|
|
29
33
|
}>;
|
|
30
34
|
export type InsertExternalMediaSingle = (props: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media-insert",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"description": "Media Insert plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@atlaskit/adf-schema": "^40.9.0",
|
|
27
27
|
"@atlaskit/button": "^20.2.0",
|
|
28
|
-
"@atlaskit/editor-common": "^
|
|
28
|
+
"@atlaskit/editor-common": "^92.0.0",
|
|
29
29
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
30
30
|
"@atlaskit/editor-plugin-media": "^1.34.0",
|
|
31
31
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
32
32
|
"@atlaskit/editor-shared-styles": "^3.0.0",
|
|
33
33
|
"@atlaskit/form": "^10.5.3",
|
|
34
|
-
"@atlaskit/icon": "^22.
|
|
34
|
+
"@atlaskit/icon": "^22.20.0",
|
|
35
35
|
"@atlaskit/media-card": "^78.5.0",
|
|
36
36
|
"@atlaskit/media-client": "^28.0.0",
|
|
37
37
|
"@atlaskit/media-client-react": "^2.2.0",
|