@atlaskit/editor-plugin-media 0.11.10 → 0.12.0
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/commands/helpers.js +7 -7
- package/dist/cjs/commands/index.js +2 -2
- package/dist/cjs/nodeviews/mediaNodeUpdater.js +17 -12
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/cjs/toolbar/index.js +3 -8
- package/dist/cjs/ui/ResizableMediaSingle/index.js +3 -2
- package/dist/es2019/commands/helpers.js +6 -6
- package/dist/es2019/commands/index.js +1 -1
- package/dist/es2019/nodeviews/mediaNodeUpdater.js +18 -13
- package/dist/es2019/pm-plugins/main.js +3 -3
- package/dist/es2019/toolbar/index.js +4 -9
- package/dist/es2019/ui/ResizableMediaSingle/index.js +3 -2
- package/dist/esm/commands/helpers.js +6 -6
- package/dist/esm/commands/index.js +1 -1
- package/dist/esm/nodeviews/mediaNodeUpdater.js +18 -13
- package/dist/esm/pm-plugins/main.js +3 -3
- package/dist/esm/toolbar/index.js +4 -9
- package/dist/esm/ui/ResizableMediaSingle/index.js +3 -2
- package/dist/types/commands/helpers.d.ts +4 -4
- package/dist/types/commands/index.d.ts +1 -1
- package/dist/types/nodeviews/mediaNodeUpdater.d.ts +2 -3
- package/dist/types/types.d.ts +2 -0
- package/dist/types-ts4.5/commands/helpers.d.ts +4 -4
- package/dist/types-ts4.5/commands/index.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/mediaNodeUpdater.d.ts +2 -3
- package/dist/types-ts4.5/types.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 0.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#69175](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69175) [`1760b37895fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1760b37895fd) - Added support for copy&pasting inline images between pages
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#69008](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69008) [`dbf9e9255cea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dbf9e9255cea) - [ux] Show caption remove tooltip on media inline switcher in floating toolbar
|
|
12
|
+
|
|
13
|
+
## 0.11.11
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#68724](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68724) [`766fca9896cb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/766fca9896cb) - [ux] ED-21615 Removing grid lines when resizing image inside panel.
|
|
18
|
+
|
|
3
19
|
## 0.11.10
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.updateMediaNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaNode = exports.findAllMediaNodes = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _steps = require("@atlaskit/adf-schema/steps");
|
|
10
10
|
var _collab = require("@atlaskit/editor-common/collab");
|
|
@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
16
16
|
* Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
|
|
17
17
|
*
|
|
18
18
|
*/
|
|
19
|
-
var
|
|
19
|
+
var findMediaNode = exports.findMediaNode = function findMediaNode(mediaPluginState, id) {
|
|
20
20
|
var mediaNodes = mediaPluginState.mediaNodes;
|
|
21
21
|
|
|
22
22
|
// Array#find... no IE support
|
|
@@ -31,7 +31,7 @@ var findMediaSingleNode = exports.findMediaSingleNode = function findMediaSingle
|
|
|
31
31
|
return memo;
|
|
32
32
|
}, null);
|
|
33
33
|
};
|
|
34
|
-
var
|
|
34
|
+
var findAllMediaNodes = exports.findAllMediaNodes = function findAllMediaNodes(mediaPluginState, id) {
|
|
35
35
|
var mediaNodes = mediaPluginState.mediaNodes;
|
|
36
36
|
return mediaNodes.filter(function (nodeWithHandler) {
|
|
37
37
|
return nodeWithHandler.node.attrs.id === id;
|
|
@@ -41,14 +41,14 @@ var isMediaNode = exports.isMediaNode = function isMediaNode(pos, state) {
|
|
|
41
41
|
var node = state.doc.nodeAt(pos);
|
|
42
42
|
return node && ['media', 'mediaInline'].includes(node.type.name);
|
|
43
43
|
};
|
|
44
|
-
var
|
|
44
|
+
var updateAllMediaNodesAttrs = exports.updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs) {
|
|
45
45
|
return function (state, dispatch) {
|
|
46
46
|
var mediaPluginState = _pluginKey.stateKey.getState(state);
|
|
47
47
|
if (!mediaPluginState) {
|
|
48
48
|
return false;
|
|
49
49
|
}
|
|
50
50
|
var mediaNodes;
|
|
51
|
-
mediaNodes =
|
|
51
|
+
mediaNodes = findAllMediaNodes(mediaPluginState, id);
|
|
52
52
|
var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
|
|
53
53
|
var getPos = _ref.getPos;
|
|
54
54
|
var pos = getPos();
|
|
@@ -88,13 +88,13 @@ var updateCurrentMediaNodeAttrs = exports.updateCurrentMediaNodeAttrs = function
|
|
|
88
88
|
return true;
|
|
89
89
|
};
|
|
90
90
|
};
|
|
91
|
-
var
|
|
91
|
+
var updateMediaNodeAttrs = exports.updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs) {
|
|
92
92
|
return function (state, dispatch) {
|
|
93
93
|
var mediaPluginState = _pluginKey.stateKey.getState(state);
|
|
94
94
|
if (!mediaPluginState) {
|
|
95
95
|
return false;
|
|
96
96
|
}
|
|
97
|
-
var mediaNodeWithPos =
|
|
97
|
+
var mediaNodeWithPos = findMediaNode(mediaPluginState, id);
|
|
98
98
|
if (!mediaNodeWithPos) {
|
|
99
99
|
return false;
|
|
100
100
|
}
|
|
@@ -12,13 +12,13 @@ Object.defineProperty(exports, "replaceExternalMedia", {
|
|
|
12
12
|
Object.defineProperty(exports, "updateAllMediaSingleNodesAttrs", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return _helpers.
|
|
15
|
+
return _helpers.updateAllMediaNodesAttrs;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "updateMediaSingleNodeAttrs", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function get() {
|
|
21
|
-
return _helpers.
|
|
21
|
+
return _helpers.updateMediaNodeAttrs;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
var _helpers = require("./helpers");
|
|
@@ -18,19 +18,24 @@ var _mediaClientReact = require("@atlaskit/media-client-react");
|
|
|
18
18
|
var _helpers = require("../commands/helpers");
|
|
19
19
|
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; }
|
|
20
20
|
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; }
|
|
21
|
+
var isMediaTypeSupported = function isMediaTypeSupported(type) {
|
|
22
|
+
if (type) {
|
|
23
|
+
return ['image', 'file'].includes(type);
|
|
24
|
+
}
|
|
25
|
+
return false;
|
|
26
|
+
};
|
|
21
27
|
var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
22
28
|
function MediaNodeUpdater(props) {
|
|
23
29
|
var _this = this;
|
|
24
30
|
(0, _classCallCheck2.default)(this, MediaNodeUpdater);
|
|
25
31
|
// Updates the node with contextId if it doesn't have one already
|
|
26
|
-
// TODO [MS-2258]: remove updateContextId in order to only use updateMediaSingleFileAttrs
|
|
27
32
|
(0, _defineProperty2.default)(this, "updateContextId", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
28
33
|
var attrs, id, objectId;
|
|
29
34
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
30
35
|
while (1) switch (_context.prev = _context.next) {
|
|
31
36
|
case 0:
|
|
32
37
|
attrs = _this.getAttrs();
|
|
33
|
-
if (!(!attrs || attrs.type
|
|
38
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
34
39
|
_context.next = 3;
|
|
35
40
|
break;
|
|
36
41
|
}
|
|
@@ -41,7 +46,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
41
46
|
return _this.getObjectId();
|
|
42
47
|
case 6:
|
|
43
48
|
objectId = _context.sent;
|
|
44
|
-
(0, _helpers.
|
|
49
|
+
(0, _helpers.updateAllMediaNodesAttrs)(id, {
|
|
45
50
|
__contextId: objectId
|
|
46
51
|
})(_this.props.view.state, _this.props.view.dispatch);
|
|
47
52
|
case 8:
|
|
@@ -57,7 +62,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
57
62
|
while (1) switch (_context2.prev = _context2.next) {
|
|
58
63
|
case 0:
|
|
59
64
|
attrs = _this.getAttrs();
|
|
60
|
-
if (!(
|
|
65
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
61
66
|
_context2.next = 3;
|
|
62
67
|
break;
|
|
63
68
|
}
|
|
@@ -96,7 +101,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
96
101
|
return _this.props.mediaProvider;
|
|
97
102
|
case 3:
|
|
98
103
|
mediaProvider = _context3.sent;
|
|
99
|
-
if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type
|
|
104
|
+
if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || !isMediaTypeSupported(attrs.type) || _this.hasFileAttributesDefined(attrs))) {
|
|
100
105
|
_context3.next = 6;
|
|
101
106
|
break;
|
|
102
107
|
}
|
|
@@ -167,7 +172,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
167
172
|
newAttrs = _context4.sent;
|
|
168
173
|
_ref5 = _this.getAttrs(), id = _ref5.id;
|
|
169
174
|
if (id && newAttrs) {
|
|
170
|
-
(0, _helpers.
|
|
175
|
+
(0, _helpers.updateAllMediaNodesAttrs)(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
|
|
171
176
|
}
|
|
172
177
|
case 5:
|
|
173
178
|
case "end":
|
|
@@ -293,13 +298,13 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
293
298
|
}());
|
|
294
299
|
(0, _defineProperty2.default)(this, "getNodeContextId", function () {
|
|
295
300
|
var attrs = _this.getAttrs();
|
|
296
|
-
if (!attrs || attrs.type
|
|
301
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
297
302
|
return null;
|
|
298
303
|
}
|
|
299
304
|
return attrs.__contextId || null;
|
|
300
305
|
});
|
|
301
306
|
(0, _defineProperty2.default)(this, "updateDimensions", function (dimensions) {
|
|
302
|
-
(0, _helpers.
|
|
307
|
+
(0, _helpers.updateAllMediaNodesAttrs)(dimensions.id, {
|
|
303
308
|
height: dimensions.height,
|
|
304
309
|
width: dimensions.width
|
|
305
310
|
})(_this.props.view.state, _this.props.view.dispatch);
|
|
@@ -344,7 +349,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
344
349
|
case 5:
|
|
345
350
|
currentCollectionName = mediaProvider.uploadParams.collection;
|
|
346
351
|
attrs = _this.getAttrs();
|
|
347
|
-
if (!(!attrs || attrs.type
|
|
352
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
348
353
|
_context9.next = 9;
|
|
349
354
|
break;
|
|
350
355
|
}
|
|
@@ -470,7 +475,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
470
475
|
while (1) switch (_context11.prev = _context11.next) {
|
|
471
476
|
case 0:
|
|
472
477
|
attrs = _this.getAttrs();
|
|
473
|
-
if (!(
|
|
478
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
474
479
|
_context11.next = 3;
|
|
475
480
|
break;
|
|
476
481
|
}
|
|
@@ -509,7 +514,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
509
514
|
case 0:
|
|
510
515
|
attrs = _this.getAttrs();
|
|
511
516
|
view = _this.props.view;
|
|
512
|
-
if (!(
|
|
517
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
513
518
|
_context12.next = 4;
|
|
514
519
|
break;
|
|
515
520
|
}
|
|
@@ -525,7 +530,7 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
525
530
|
}
|
|
526
531
|
return _context12.abrupt("return");
|
|
527
532
|
case 9:
|
|
528
|
-
(0, _helpers.
|
|
533
|
+
(0, _helpers.updateMediaNodeAttrs)(attrs.id, copiedAttrs)(view.state, view.dispatch);
|
|
529
534
|
case 10:
|
|
530
535
|
case "end":
|
|
531
536
|
return _context12.stop();
|
|
@@ -386,7 +386,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
|
|
|
386
386
|
});
|
|
387
387
|
});
|
|
388
388
|
(0, _defineProperty2.default)(this, "findMediaNode", function (id) {
|
|
389
|
-
return helpers.
|
|
389
|
+
return helpers.findMediaNode(_this, id);
|
|
390
390
|
});
|
|
391
391
|
(0, _defineProperty2.default)(this, "destroyAllPickers", function (pickers) {
|
|
392
392
|
pickers.forEach(function (picker) {
|
|
@@ -424,7 +424,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
|
|
|
424
424
|
if (!view) {
|
|
425
425
|
return;
|
|
426
426
|
}
|
|
427
|
-
return (0, _helpers.
|
|
427
|
+
return (0, _helpers.updateMediaNodeAttrs)(id, attrs)(view.state, view.dispatch);
|
|
428
428
|
});
|
|
429
429
|
(0, _defineProperty2.default)(this, "handleMediaState", function (state) {
|
|
430
430
|
switch (state.status) {
|
|
@@ -255,21 +255,16 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
255
255
|
// floating and inline switcher
|
|
256
256
|
if (pluginState.allowInlineImages && selectedNode && (0, _utils2.canShowSwitchButtons)(selectedNode.node)) {
|
|
257
257
|
var _selectedNode$node$fi;
|
|
258
|
-
var inlineSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
259
|
-
var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
260
|
-
|
|
261
|
-
// This is temporary for PF release and can be removed once we have border and link support for inline images
|
|
262
|
-
// TODO: [ED-20261] remove this once both border and link marks are supported for inline image
|
|
263
|
-
var tempTooltipContent = /*#__PURE__*/_react.default.createElement("span", null, "Display inline ", /*#__PURE__*/_react.default.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
|
|
264
|
-
|
|
265
258
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
266
259
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
267
260
|
var _pluginInjectionApi$a4;
|
|
261
|
+
var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
|
|
262
|
+
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
263
|
+
var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
268
264
|
toolbarButtons.push({
|
|
269
265
|
type: 'button',
|
|
270
266
|
id: 'editor.media.image.view.switcher.inline',
|
|
271
267
|
title: inlineSwitcherTitle,
|
|
272
|
-
tooltipContent: tempTooltipContent,
|
|
273
268
|
icon: function icon() {
|
|
274
269
|
return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
|
|
275
270
|
size: "medium",
|
|
@@ -125,8 +125,9 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
|
|
|
125
125
|
layoutColumn = _this$props$view$stat.layoutColumn,
|
|
126
126
|
table = _this$props$view$stat.table,
|
|
127
127
|
expand = _this$props$view$stat.expand,
|
|
128
|
-
nestedExpand = _this$props$view$stat.nestedExpand
|
|
129
|
-
|
|
128
|
+
nestedExpand = _this$props$view$stat.nestedExpand,
|
|
129
|
+
panel = _this$props$view$stat.panel;
|
|
130
|
+
if (_this.$pos && !!(0, _utils2.findParentNodeOfTypeClosestToPos)(_this.$pos, [layoutColumn, table, expand, nestedExpand, panel].filter(Boolean))) {
|
|
130
131
|
return [];
|
|
131
132
|
}
|
|
132
133
|
if (snapWidth > _editorSharedStyles.akEditorWideLayoutWidth) {
|
|
@@ -6,7 +6,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
|
|
|
6
6
|
* Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
|
-
export const
|
|
9
|
+
export const findMediaNode = (mediaPluginState, id) => {
|
|
10
10
|
const {
|
|
11
11
|
mediaNodes
|
|
12
12
|
} = mediaPluginState;
|
|
@@ -25,7 +25,7 @@ export const findMediaSingleNode = (mediaPluginState, id) => {
|
|
|
25
25
|
return memo;
|
|
26
26
|
}, null);
|
|
27
27
|
};
|
|
28
|
-
export const
|
|
28
|
+
export const findAllMediaNodes = (mediaPluginState, id) => {
|
|
29
29
|
const {
|
|
30
30
|
mediaNodes
|
|
31
31
|
} = mediaPluginState;
|
|
@@ -35,13 +35,13 @@ export const isMediaNode = (pos, state) => {
|
|
|
35
35
|
const node = state.doc.nodeAt(pos);
|
|
36
36
|
return node && ['media', 'mediaInline'].includes(node.type.name);
|
|
37
37
|
};
|
|
38
|
-
export const
|
|
38
|
+
export const updateAllMediaNodesAttrs = (id, attrs) => (state, dispatch) => {
|
|
39
39
|
const mediaPluginState = mediaPluginKey.getState(state);
|
|
40
40
|
if (!mediaPluginState) {
|
|
41
41
|
return false;
|
|
42
42
|
}
|
|
43
43
|
let mediaNodes;
|
|
44
|
-
mediaNodes =
|
|
44
|
+
mediaNodes = findAllMediaNodes(mediaPluginState, id);
|
|
45
45
|
const validMediaNodePositions = mediaNodes.reduce((acc, {
|
|
46
46
|
getPos
|
|
47
47
|
}) => {
|
|
@@ -77,12 +77,12 @@ export const updateCurrentMediaNodeAttrs = (attrs, mediaNode) => (state, dispatc
|
|
|
77
77
|
}
|
|
78
78
|
return true;
|
|
79
79
|
};
|
|
80
|
-
export const
|
|
80
|
+
export const updateMediaNodeAttrs = (id, attrs) => (state, dispatch) => {
|
|
81
81
|
const mediaPluginState = mediaPluginKey.getState(state);
|
|
82
82
|
if (!mediaPluginState) {
|
|
83
83
|
return false;
|
|
84
84
|
}
|
|
85
|
-
const mediaNodeWithPos =
|
|
85
|
+
const mediaNodeWithPos = findMediaNode(mediaPluginState, id);
|
|
86
86
|
if (!mediaNodeWithPos) {
|
|
87
87
|
return false;
|
|
88
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { updateMediaSingleNodeAttrs, updateAllMediaSingleNodesAttrs, replaceExternalMedia } from './helpers';
|
|
1
|
+
export { updateMediaNodeAttrs as updateMediaSingleNodeAttrs, updateAllMediaNodesAttrs as updateAllMediaSingleNodesAttrs, replaceExternalMedia } from './helpers';
|
|
@@ -4,27 +4,32 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
|
|
|
4
4
|
import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
5
5
|
import { getAttrsFromUrl, isImageRepresentationReady, isMediaBlobUrl } from '@atlaskit/media-client';
|
|
6
6
|
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
7
|
-
import { replaceExternalMedia,
|
|
7
|
+
import { replaceExternalMedia, updateAllMediaNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaNodeAttrs } from '../commands/helpers';
|
|
8
|
+
const isMediaTypeSupported = type => {
|
|
9
|
+
if (type) {
|
|
10
|
+
return ['image', 'file'].includes(type);
|
|
11
|
+
}
|
|
12
|
+
return false;
|
|
13
|
+
};
|
|
8
14
|
export class MediaNodeUpdater {
|
|
9
15
|
constructor(props) {
|
|
10
16
|
// Updates the node with contextId if it doesn't have one already
|
|
11
|
-
// TODO [MS-2258]: remove updateContextId in order to only use updateMediaSingleFileAttrs
|
|
12
17
|
_defineProperty(this, "updateContextId", async () => {
|
|
13
18
|
const attrs = this.getAttrs();
|
|
14
|
-
if (!attrs || attrs.type
|
|
19
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
15
20
|
return;
|
|
16
21
|
}
|
|
17
22
|
const {
|
|
18
23
|
id
|
|
19
24
|
} = attrs;
|
|
20
25
|
const objectId = await this.getObjectId();
|
|
21
|
-
|
|
26
|
+
updateAllMediaNodesAttrs(id, {
|
|
22
27
|
__contextId: objectId
|
|
23
28
|
})(this.props.view.state, this.props.view.dispatch);
|
|
24
29
|
});
|
|
25
30
|
_defineProperty(this, "updateNodeContextId", async getPos => {
|
|
26
31
|
const attrs = this.getAttrs();
|
|
27
|
-
if (
|
|
32
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
28
33
|
return;
|
|
29
34
|
}
|
|
30
35
|
const objectId = await this.getObjectId();
|
|
@@ -41,7 +46,7 @@ export class MediaNodeUpdater {
|
|
|
41
46
|
_defineProperty(this, "getNewFileAttrsForNode", async () => {
|
|
42
47
|
const attrs = this.getAttrs();
|
|
43
48
|
const mediaProvider = await this.props.mediaProvider;
|
|
44
|
-
if (!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type
|
|
49
|
+
if (!mediaProvider || !mediaProvider.uploadParams || !attrs || !isMediaTypeSupported(attrs.type) || this.hasFileAttributesDefined(attrs)) {
|
|
45
50
|
return;
|
|
46
51
|
}
|
|
47
52
|
const mediaClientConfig = mediaProvider.viewMediaClientConfig;
|
|
@@ -84,7 +89,7 @@ export class MediaNodeUpdater {
|
|
|
84
89
|
id
|
|
85
90
|
} = this.getAttrs();
|
|
86
91
|
if (id && newAttrs) {
|
|
87
|
-
|
|
92
|
+
updateAllMediaNodesAttrs(id, newAttrs)(this.props.view.state, this.props.view.dispatch);
|
|
88
93
|
}
|
|
89
94
|
});
|
|
90
95
|
_defineProperty(this, "updateNodeAttrs", async getPos => {
|
|
@@ -152,13 +157,13 @@ export class MediaNodeUpdater {
|
|
|
152
157
|
});
|
|
153
158
|
_defineProperty(this, "getNodeContextId", () => {
|
|
154
159
|
const attrs = this.getAttrs();
|
|
155
|
-
if (!attrs || attrs.type
|
|
160
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
156
161
|
return null;
|
|
157
162
|
}
|
|
158
163
|
return attrs.__contextId || null;
|
|
159
164
|
});
|
|
160
165
|
_defineProperty(this, "updateDimensions", dimensions => {
|
|
161
|
-
|
|
166
|
+
updateAllMediaNodesAttrs(dimensions.id, {
|
|
162
167
|
height: dimensions.height,
|
|
163
168
|
width: dimensions.width
|
|
164
169
|
})(this.props.view.state, this.props.view.dispatch);
|
|
@@ -178,7 +183,7 @@ export class MediaNodeUpdater {
|
|
|
178
183
|
}
|
|
179
184
|
const currentCollectionName = mediaProvider.uploadParams.collection;
|
|
180
185
|
const attrs = this.getAttrs();
|
|
181
|
-
if (!attrs || attrs.type
|
|
186
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
182
187
|
return false;
|
|
183
188
|
}
|
|
184
189
|
const {
|
|
@@ -252,7 +257,7 @@ export class MediaNodeUpdater {
|
|
|
252
257
|
// Copies the pasted node into the current collection using a getPos handler
|
|
253
258
|
_defineProperty(this, "copyNodeFromPos", async (getPos, traceContext) => {
|
|
254
259
|
const attrs = this.getAttrs();
|
|
255
|
-
if (
|
|
260
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
256
261
|
return;
|
|
257
262
|
}
|
|
258
263
|
const copiedAttrs = await this.copyFile(attrs.id, attrs.collection, traceContext);
|
|
@@ -270,14 +275,14 @@ export class MediaNodeUpdater {
|
|
|
270
275
|
const {
|
|
271
276
|
view
|
|
272
277
|
} = this.props;
|
|
273
|
-
if (
|
|
278
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
274
279
|
return;
|
|
275
280
|
}
|
|
276
281
|
const copiedAttrs = await this.copyFile(attrs.id, attrs.collection, traceContext);
|
|
277
282
|
if (!copiedAttrs) {
|
|
278
283
|
return;
|
|
279
284
|
}
|
|
280
|
-
|
|
285
|
+
updateMediaNodeAttrs(attrs.id, copiedAttrs)(view.state, view.dispatch);
|
|
281
286
|
});
|
|
282
287
|
_defineProperty(this, "copyFile", async (id, collection, traceContext) => {
|
|
283
288
|
const mediaProvider = await this.props.mediaProvider;
|
|
@@ -15,7 +15,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
|
15
15
|
import { getMediaFeatureFlag } from '@atlaskit/media-common';
|
|
16
16
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
17
17
|
import * as helpers from '../commands/helpers';
|
|
18
|
-
import {
|
|
18
|
+
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
19
19
|
import PickerFacade from '../picker-facade';
|
|
20
20
|
import DropPlaceholder from '../ui/Media/DropPlaceholder';
|
|
21
21
|
import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
|
|
@@ -306,7 +306,7 @@ export class MediaPluginStateImplementation {
|
|
|
306
306
|
});
|
|
307
307
|
});
|
|
308
308
|
_defineProperty(this, "findMediaNode", id => {
|
|
309
|
-
return helpers.
|
|
309
|
+
return helpers.findMediaNode(this, id);
|
|
310
310
|
});
|
|
311
311
|
_defineProperty(this, "destroyAllPickers", pickers => {
|
|
312
312
|
pickers.forEach(picker => picker.destroy());
|
|
@@ -344,7 +344,7 @@ export class MediaPluginStateImplementation {
|
|
|
344
344
|
if (!view) {
|
|
345
345
|
return;
|
|
346
346
|
}
|
|
347
|
-
return
|
|
347
|
+
return updateMediaNodeAttrs(id, attrs)(view.state, view.dispatch);
|
|
348
348
|
});
|
|
349
349
|
_defineProperty(this, "handleMediaState", state => {
|
|
350
350
|
switch (state.status) {
|
|
@@ -5,7 +5,7 @@ import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, la
|
|
|
5
5
|
import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
6
6
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
7
7
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
8
|
-
import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
+
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import DownloadIcon from '@atlaskit/icon/glyph/download';
|
|
11
11
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
@@ -248,21 +248,16 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
248
248
|
// floating and inline switcher
|
|
249
249
|
if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
|
|
250
250
|
var _selectedNode$node$fi;
|
|
251
|
-
const inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
252
|
-
const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
253
|
-
|
|
254
|
-
// This is temporary for PF release and can be removed once we have border and link support for inline images
|
|
255
|
-
// TODO: [ED-20261] remove this once both border and link marks are supported for inline image
|
|
256
|
-
const tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
|
|
257
|
-
|
|
258
251
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
259
252
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
260
253
|
var _pluginInjectionApi$a4;
|
|
254
|
+
const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
|
|
255
|
+
const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
256
|
+
const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
261
257
|
toolbarButtons.push({
|
|
262
258
|
type: 'button',
|
|
263
259
|
id: 'editor.media.image.view.switcher.inline',
|
|
264
260
|
title: inlineSwitcherTitle,
|
|
265
|
-
tooltipContent: tempTooltipContent,
|
|
266
261
|
icon: () => /*#__PURE__*/React.createElement(IconInline, {
|
|
267
262
|
size: "medium",
|
|
268
263
|
label: inlineSwitcherTitle
|
|
@@ -112,9 +112,10 @@ export default class ResizableMediaSingle extends React.Component {
|
|
|
112
112
|
layoutColumn,
|
|
113
113
|
table,
|
|
114
114
|
expand,
|
|
115
|
-
nestedExpand
|
|
115
|
+
nestedExpand,
|
|
116
|
+
panel
|
|
116
117
|
} = this.props.view.state.schema.nodes;
|
|
117
|
-
if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
|
|
118
|
+
if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, [layoutColumn, table, expand, nestedExpand, panel].filter(Boolean))) {
|
|
118
119
|
return [];
|
|
119
120
|
}
|
|
120
121
|
if (snapWidth > akEditorWideLayoutWidth) {
|
|
@@ -9,7 +9,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
|
|
|
9
9
|
* Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
|
|
10
10
|
*
|
|
11
11
|
*/
|
|
12
|
-
export var
|
|
12
|
+
export var findMediaNode = function findMediaNode(mediaPluginState, id) {
|
|
13
13
|
var mediaNodes = mediaPluginState.mediaNodes;
|
|
14
14
|
|
|
15
15
|
// Array#find... no IE support
|
|
@@ -24,7 +24,7 @@ export var findMediaSingleNode = function findMediaSingleNode(mediaPluginState,
|
|
|
24
24
|
return memo;
|
|
25
25
|
}, null);
|
|
26
26
|
};
|
|
27
|
-
export var
|
|
27
|
+
export var findAllMediaNodes = function findAllMediaNodes(mediaPluginState, id) {
|
|
28
28
|
var mediaNodes = mediaPluginState.mediaNodes;
|
|
29
29
|
return mediaNodes.filter(function (nodeWithHandler) {
|
|
30
30
|
return nodeWithHandler.node.attrs.id === id;
|
|
@@ -34,14 +34,14 @@ export var isMediaNode = function isMediaNode(pos, state) {
|
|
|
34
34
|
var node = state.doc.nodeAt(pos);
|
|
35
35
|
return node && ['media', 'mediaInline'].includes(node.type.name);
|
|
36
36
|
};
|
|
37
|
-
export var
|
|
37
|
+
export var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs) {
|
|
38
38
|
return function (state, dispatch) {
|
|
39
39
|
var mediaPluginState = mediaPluginKey.getState(state);
|
|
40
40
|
if (!mediaPluginState) {
|
|
41
41
|
return false;
|
|
42
42
|
}
|
|
43
43
|
var mediaNodes;
|
|
44
|
-
mediaNodes =
|
|
44
|
+
mediaNodes = findAllMediaNodes(mediaPluginState, id);
|
|
45
45
|
var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
|
|
46
46
|
var getPos = _ref.getPos;
|
|
47
47
|
var pos = getPos();
|
|
@@ -81,13 +81,13 @@ export var updateCurrentMediaNodeAttrs = function updateCurrentMediaNodeAttrs(at
|
|
|
81
81
|
return true;
|
|
82
82
|
};
|
|
83
83
|
};
|
|
84
|
-
export var
|
|
84
|
+
export var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs) {
|
|
85
85
|
return function (state, dispatch) {
|
|
86
86
|
var mediaPluginState = mediaPluginKey.getState(state);
|
|
87
87
|
if (!mediaPluginState) {
|
|
88
88
|
return false;
|
|
89
89
|
}
|
|
90
|
-
var mediaNodeWithPos =
|
|
90
|
+
var mediaNodeWithPos = findMediaNode(mediaPluginState, id);
|
|
91
91
|
if (!mediaNodeWithPos) {
|
|
92
92
|
return false;
|
|
93
93
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { updateMediaSingleNodeAttrs, updateAllMediaSingleNodesAttrs, replaceExternalMedia } from './helpers';
|
|
1
|
+
export { updateMediaNodeAttrs as updateMediaSingleNodeAttrs, updateAllMediaNodesAttrs as updateAllMediaSingleNodesAttrs, replaceExternalMedia } from './helpers';
|
|
@@ -10,20 +10,25 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
|
|
|
10
10
|
import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
11
11
|
import { getAttrsFromUrl, isImageRepresentationReady, isMediaBlobUrl as _isMediaBlobUrl } from '@atlaskit/media-client';
|
|
12
12
|
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
13
|
-
import { replaceExternalMedia,
|
|
13
|
+
import { replaceExternalMedia, updateAllMediaNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaNodeAttrs } from '../commands/helpers';
|
|
14
|
+
var isMediaTypeSupported = function isMediaTypeSupported(type) {
|
|
15
|
+
if (type) {
|
|
16
|
+
return ['image', 'file'].includes(type);
|
|
17
|
+
}
|
|
18
|
+
return false;
|
|
19
|
+
};
|
|
14
20
|
export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
15
21
|
function MediaNodeUpdater(props) {
|
|
16
22
|
var _this = this;
|
|
17
23
|
_classCallCheck(this, MediaNodeUpdater);
|
|
18
24
|
// Updates the node with contextId if it doesn't have one already
|
|
19
|
-
// TODO [MS-2258]: remove updateContextId in order to only use updateMediaSingleFileAttrs
|
|
20
25
|
_defineProperty(this, "updateContextId", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
21
26
|
var attrs, id, objectId;
|
|
22
27
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
23
28
|
while (1) switch (_context.prev = _context.next) {
|
|
24
29
|
case 0:
|
|
25
30
|
attrs = _this.getAttrs();
|
|
26
|
-
if (!(!attrs || attrs.type
|
|
31
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
27
32
|
_context.next = 3;
|
|
28
33
|
break;
|
|
29
34
|
}
|
|
@@ -34,7 +39,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
34
39
|
return _this.getObjectId();
|
|
35
40
|
case 6:
|
|
36
41
|
objectId = _context.sent;
|
|
37
|
-
|
|
42
|
+
updateAllMediaNodesAttrs(id, {
|
|
38
43
|
__contextId: objectId
|
|
39
44
|
})(_this.props.view.state, _this.props.view.dispatch);
|
|
40
45
|
case 8:
|
|
@@ -50,7 +55,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
50
55
|
while (1) switch (_context2.prev = _context2.next) {
|
|
51
56
|
case 0:
|
|
52
57
|
attrs = _this.getAttrs();
|
|
53
|
-
if (!(
|
|
58
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
54
59
|
_context2.next = 3;
|
|
55
60
|
break;
|
|
56
61
|
}
|
|
@@ -89,7 +94,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
89
94
|
return _this.props.mediaProvider;
|
|
90
95
|
case 3:
|
|
91
96
|
mediaProvider = _context3.sent;
|
|
92
|
-
if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type
|
|
97
|
+
if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || !isMediaTypeSupported(attrs.type) || _this.hasFileAttributesDefined(attrs))) {
|
|
93
98
|
_context3.next = 6;
|
|
94
99
|
break;
|
|
95
100
|
}
|
|
@@ -160,7 +165,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
160
165
|
newAttrs = _context4.sent;
|
|
161
166
|
_ref5 = _this.getAttrs(), id = _ref5.id;
|
|
162
167
|
if (id && newAttrs) {
|
|
163
|
-
|
|
168
|
+
updateAllMediaNodesAttrs(id, newAttrs)(_this.props.view.state, _this.props.view.dispatch);
|
|
164
169
|
}
|
|
165
170
|
case 5:
|
|
166
171
|
case "end":
|
|
@@ -286,13 +291,13 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
286
291
|
}());
|
|
287
292
|
_defineProperty(this, "getNodeContextId", function () {
|
|
288
293
|
var attrs = _this.getAttrs();
|
|
289
|
-
if (!attrs || attrs.type
|
|
294
|
+
if (!attrs || attrs && !isMediaTypeSupported(attrs.type)) {
|
|
290
295
|
return null;
|
|
291
296
|
}
|
|
292
297
|
return attrs.__contextId || null;
|
|
293
298
|
});
|
|
294
299
|
_defineProperty(this, "updateDimensions", function (dimensions) {
|
|
295
|
-
|
|
300
|
+
updateAllMediaNodesAttrs(dimensions.id, {
|
|
296
301
|
height: dimensions.height,
|
|
297
302
|
width: dimensions.width
|
|
298
303
|
})(_this.props.view.state, _this.props.view.dispatch);
|
|
@@ -337,7 +342,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
337
342
|
case 5:
|
|
338
343
|
currentCollectionName = mediaProvider.uploadParams.collection;
|
|
339
344
|
attrs = _this.getAttrs();
|
|
340
|
-
if (!(!attrs || attrs.type
|
|
345
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
341
346
|
_context9.next = 9;
|
|
342
347
|
break;
|
|
343
348
|
}
|
|
@@ -463,7 +468,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
463
468
|
while (1) switch (_context11.prev = _context11.next) {
|
|
464
469
|
case 0:
|
|
465
470
|
attrs = _this.getAttrs();
|
|
466
|
-
if (!(
|
|
471
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
467
472
|
_context11.next = 3;
|
|
468
473
|
break;
|
|
469
474
|
}
|
|
@@ -502,7 +507,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
502
507
|
case 0:
|
|
503
508
|
attrs = _this.getAttrs();
|
|
504
509
|
view = _this.props.view;
|
|
505
|
-
if (!(
|
|
510
|
+
if (!(!attrs || attrs && !isMediaTypeSupported(attrs.type))) {
|
|
506
511
|
_context12.next = 4;
|
|
507
512
|
break;
|
|
508
513
|
}
|
|
@@ -518,7 +523,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
|
|
|
518
523
|
}
|
|
519
524
|
return _context12.abrupt("return");
|
|
520
525
|
case 9:
|
|
521
|
-
|
|
526
|
+
updateMediaNodeAttrs(attrs.id, copiedAttrs)(view.state, view.dispatch);
|
|
522
527
|
case 10:
|
|
523
528
|
case "end":
|
|
524
529
|
return _context12.stop();
|
|
@@ -24,7 +24,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
|
24
24
|
import { getMediaFeatureFlag } from '@atlaskit/media-common';
|
|
25
25
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
26
26
|
import * as helpers from '../commands/helpers';
|
|
27
|
-
import {
|
|
27
|
+
import { updateMediaNodeAttrs } from '../commands/helpers';
|
|
28
28
|
import PickerFacade from '../picker-facade';
|
|
29
29
|
import DropPlaceholder from '../ui/Media/DropPlaceholder';
|
|
30
30
|
import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
|
|
@@ -371,7 +371,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
371
371
|
});
|
|
372
372
|
});
|
|
373
373
|
_defineProperty(this, "findMediaNode", function (id) {
|
|
374
|
-
return helpers.
|
|
374
|
+
return helpers.findMediaNode(_this, id);
|
|
375
375
|
});
|
|
376
376
|
_defineProperty(this, "destroyAllPickers", function (pickers) {
|
|
377
377
|
pickers.forEach(function (picker) {
|
|
@@ -409,7 +409,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
409
409
|
if (!view) {
|
|
410
410
|
return;
|
|
411
411
|
}
|
|
412
|
-
return
|
|
412
|
+
return updateMediaNodeAttrs(id, attrs)(view.state, view.dispatch);
|
|
413
413
|
});
|
|
414
414
|
_defineProperty(this, "handleMediaState", function (state) {
|
|
415
415
|
switch (state.status) {
|
|
@@ -9,7 +9,7 @@ import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, la
|
|
|
9
9
|
import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
10
10
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
11
11
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
12
|
-
import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
12
|
+
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
13
13
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
14
14
|
import DownloadIcon from '@atlaskit/icon/glyph/download';
|
|
15
15
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
@@ -245,21 +245,16 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
245
245
|
// floating and inline switcher
|
|
246
246
|
if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
|
|
247
247
|
var _selectedNode$node$fi;
|
|
248
|
-
var inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
249
|
-
var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
250
|
-
|
|
251
|
-
// This is temporary for PF release and can be removed once we have border and link support for inline images
|
|
252
|
-
// TODO: [ED-20261] remove this once both border and link marks are supported for inline image
|
|
253
|
-
var tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
|
|
254
|
-
|
|
255
248
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
256
249
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
257
250
|
var _pluginInjectionApi$a4;
|
|
251
|
+
var hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
|
|
252
|
+
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
253
|
+
var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
258
254
|
toolbarButtons.push({
|
|
259
255
|
type: 'button',
|
|
260
256
|
id: 'editor.media.image.view.switcher.inline',
|
|
261
257
|
title: inlineSwitcherTitle,
|
|
262
|
-
tooltipContent: tempTooltipContent,
|
|
263
258
|
icon: function icon() {
|
|
264
259
|
return /*#__PURE__*/React.createElement(IconInline, {
|
|
265
260
|
size: "medium",
|
|
@@ -119,8 +119,9 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
|
|
|
119
119
|
layoutColumn = _this$props$view$stat.layoutColumn,
|
|
120
120
|
table = _this$props$view$stat.table,
|
|
121
121
|
expand = _this$props$view$stat.expand,
|
|
122
|
-
nestedExpand = _this$props$view$stat.nestedExpand
|
|
123
|
-
|
|
122
|
+
nestedExpand = _this$props$view$stat.nestedExpand,
|
|
123
|
+
panel = _this$props$view$stat.panel;
|
|
124
|
+
if (_this.$pos && !!findParentNodeOfTypeClosestToPos(_this.$pos, [layoutColumn, table, expand, nestedExpand, panel].filter(Boolean))) {
|
|
124
125
|
return [];
|
|
125
126
|
}
|
|
126
127
|
if (snapWidth > akEditorWideLayoutWidth) {
|
|
@@ -6,10 +6,10 @@ import type { MediaNodeWithPosHandler, MediaPluginState } from '../pm-plugins/ty
|
|
|
6
6
|
* Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
9
|
+
export declare const findMediaNode: (mediaPluginState: MediaPluginState, id: string) => MediaNodeWithPosHandler | null;
|
|
10
|
+
export declare const findAllMediaNodes: (mediaPluginState: MediaPluginState, id: string) => MediaNodeWithPosHandler[];
|
|
11
11
|
export declare const isMediaNode: (pos: number, state: EditorState) => boolean | null;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const updateAllMediaNodesAttrs: (id: string, attrs: object) => Command;
|
|
13
13
|
export declare const updateCurrentMediaNodeAttrs: (attrs: object, mediaNode: MediaNodeWithPosHandler) => Command;
|
|
14
|
-
export declare const
|
|
14
|
+
export declare const updateMediaNodeAttrs: (id: string, attrs: object) => Command;
|
|
15
15
|
export declare const replaceExternalMedia: (pos: number, attrs: object) => Command;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { updateMediaSingleNodeAttrs, updateAllMediaSingleNodesAttrs, replaceExternalMedia, } from './helpers';
|
|
1
|
+
export { updateMediaNodeAttrs as updateMediaSingleNodeAttrs, updateAllMediaNodesAttrs as updateAllMediaSingleNodesAttrs, replaceExternalMedia, } from './helpers';
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import type { MediaADFAttrs } from '@atlaskit/adf-schema';
|
|
2
1
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
3
2
|
import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
|
|
4
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { MediaTraceContext } from '@atlaskit/media-common';
|
|
7
|
-
import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler } from '../types';
|
|
6
|
+
import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler, SupportedMediaAttributes } from '../types';
|
|
8
7
|
export type RemoteDimensions = {
|
|
9
8
|
id: string;
|
|
10
9
|
height: number;
|
|
@@ -30,7 +29,7 @@ export declare class MediaNodeUpdater {
|
|
|
30
29
|
private getNewFileAttrsForNode;
|
|
31
30
|
updateMediaSingleFileAttrs: () => Promise<void>;
|
|
32
31
|
updateNodeAttrs: (getPos: ProsemirrorGetPosHandler) => Promise<void>;
|
|
33
|
-
getAttrs: () =>
|
|
32
|
+
getAttrs: () => SupportedMediaAttributes | undefined;
|
|
34
33
|
getObjectId: () => Promise<string | null>;
|
|
35
34
|
uploadExternalMedia: (getPos: ProsemirrorGetPosHandler) => Promise<void>;
|
|
36
35
|
getNodeContextId: () => string | null;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { MediaADFAttrs, MediaInlineAttributes } from '@atlaskit/adf-schema';
|
|
1
2
|
import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
|
|
2
3
|
import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
|
|
3
4
|
import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -108,6 +109,7 @@ export type MediaDecorationSpec = {
|
|
|
108
109
|
type: 'media';
|
|
109
110
|
selected: boolean;
|
|
110
111
|
};
|
|
112
|
+
export type SupportedMediaAttributes = MediaADFAttrs | MediaInlineAttributes;
|
|
111
113
|
export type ProsemirrorGetPosHandler = getPosHandlerNode;
|
|
112
114
|
export type getPosHandler = getPosHandlerNode;
|
|
113
115
|
export type getPosHandlerNode = () => number | undefined;
|
|
@@ -6,10 +6,10 @@ import type { MediaNodeWithPosHandler, MediaPluginState } from '../pm-plugins/ty
|
|
|
6
6
|
* Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
9
|
+
export declare const findMediaNode: (mediaPluginState: MediaPluginState, id: string) => MediaNodeWithPosHandler | null;
|
|
10
|
+
export declare const findAllMediaNodes: (mediaPluginState: MediaPluginState, id: string) => MediaNodeWithPosHandler[];
|
|
11
11
|
export declare const isMediaNode: (pos: number, state: EditorState) => boolean | null;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const updateAllMediaNodesAttrs: (id: string, attrs: object) => Command;
|
|
13
13
|
export declare const updateCurrentMediaNodeAttrs: (attrs: object, mediaNode: MediaNodeWithPosHandler) => Command;
|
|
14
|
-
export declare const
|
|
14
|
+
export declare const updateMediaNodeAttrs: (id: string, attrs: object) => Command;
|
|
15
15
|
export declare const replaceExternalMedia: (pos: number, attrs: object) => Command;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { updateMediaSingleNodeAttrs, updateAllMediaSingleNodesAttrs, replaceExternalMedia, } from './helpers';
|
|
1
|
+
export { updateMediaNodeAttrs as updateMediaSingleNodeAttrs, updateAllMediaNodesAttrs as updateAllMediaSingleNodesAttrs, replaceExternalMedia, } from './helpers';
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import type { MediaADFAttrs } from '@atlaskit/adf-schema';
|
|
2
1
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
3
2
|
import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
|
|
4
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { MediaTraceContext } from '@atlaskit/media-common';
|
|
7
|
-
import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler } from '../types';
|
|
6
|
+
import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler, SupportedMediaAttributes } from '../types';
|
|
8
7
|
export type RemoteDimensions = {
|
|
9
8
|
id: string;
|
|
10
9
|
height: number;
|
|
@@ -30,7 +29,7 @@ export declare class MediaNodeUpdater {
|
|
|
30
29
|
private getNewFileAttrsForNode;
|
|
31
30
|
updateMediaSingleFileAttrs: () => Promise<void>;
|
|
32
31
|
updateNodeAttrs: (getPos: ProsemirrorGetPosHandler) => Promise<void>;
|
|
33
|
-
getAttrs: () =>
|
|
32
|
+
getAttrs: () => SupportedMediaAttributes | undefined;
|
|
34
33
|
getObjectId: () => Promise<string | null>;
|
|
35
34
|
uploadExternalMedia: (getPos: ProsemirrorGetPosHandler) => Promise<void>;
|
|
36
35
|
getNodeContextId: () => string | null;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { MediaADFAttrs, MediaInlineAttributes } from '@atlaskit/adf-schema';
|
|
1
2
|
import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
|
|
2
3
|
import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
|
|
3
4
|
import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -108,6 +109,7 @@ export type MediaDecorationSpec = {
|
|
|
108
109
|
type: 'media';
|
|
109
110
|
selected: boolean;
|
|
110
111
|
};
|
|
112
|
+
export type SupportedMediaAttributes = MediaADFAttrs | MediaInlineAttributes;
|
|
111
113
|
export type ProsemirrorGetPosHandler = getPosHandlerNode;
|
|
112
114
|
export type getPosHandler = getPosHandlerNode;
|
|
113
115
|
export type getPosHandlerNode = () => number | undefined;
|