@atlaskit/editor-plugin-media 2.2.5 → 2.3.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 +19 -0
- package/dist/cjs/ui/toolbar/index.js +24 -12
- package/dist/cjs/ui/toolbar/mediaInline.js +2 -9
- package/dist/es2019/ui/toolbar/index.js +17 -5
- package/dist/es2019/ui/toolbar/mediaInline.js +2 -9
- package/dist/esm/ui/toolbar/index.js +17 -5
- package/dist/esm/ui/toolbar/mediaInline.js +2 -9
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 2.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
|
|
8
|
+
[`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
|
|
9
|
+
ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#121822](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121822)
|
|
14
|
+
[`2316af8fbe07d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2316af8fbe07d) -
|
|
15
|
+
[ux] Updates floating toolbar of the inline and media single by moving alt text option to the
|
|
16
|
+
overflow menu.
|
|
17
|
+
- [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
|
|
18
|
+
[`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
|
|
19
|
+
Wire up the copy functionality in floating toolbar overflow menu
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 2.2.5
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
14
14
|
var _card = require("@atlaskit/editor-common/card");
|
|
15
|
+
var _media = require("@atlaskit/editor-common/media");
|
|
15
16
|
var _mediaInline = require("@atlaskit/editor-common/media-inline");
|
|
16
17
|
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
17
18
|
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
|
|
@@ -26,6 +27,7 @@ var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inl
|
|
|
26
27
|
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
|
|
27
28
|
var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
|
|
28
29
|
var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
|
|
30
|
+
var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
|
|
29
31
|
var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
|
|
30
32
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
31
33
|
var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
|
|
@@ -34,6 +36,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
34
36
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
35
37
|
var _styles = require("../../nodeviews/styles");
|
|
36
38
|
var _altText = require("../../pm-plugins/alt-text");
|
|
39
|
+
var _commands = require("../../pm-plugins/alt-text/commands");
|
|
37
40
|
var _linking = require("../../pm-plugins/commands/linking");
|
|
38
41
|
var _linking2 = require("../../pm-plugins/linking");
|
|
39
42
|
var _pluginKey = require("../../pm-plugins/plugin-key");
|
|
@@ -42,7 +45,7 @@ var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
|
|
|
42
45
|
var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
|
|
43
46
|
var _PixelEntry = require("../../ui/PixelEntry");
|
|
44
47
|
var _altText2 = require("./alt-text");
|
|
45
|
-
var
|
|
48
|
+
var _commands2 = require("./commands");
|
|
46
49
|
var _comments = require("./comments");
|
|
47
50
|
var _imageBorder = require("./imageBorder");
|
|
48
51
|
var _layoutGroup = require("./layout-group");
|
|
@@ -100,7 +103,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
100
103
|
selected: false,
|
|
101
104
|
focusEditoronEnter: true,
|
|
102
105
|
disabled: false,
|
|
103
|
-
onClick: (0,
|
|
106
|
+
onClick: (0, _commands2.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
|
|
104
107
|
title: intl.formatMessage(_messages.cardMessages.inlineTitle),
|
|
105
108
|
testId: 'inline-appearance',
|
|
106
109
|
className: 'inline-appearance' // a11y. uses to force focus on item
|
|
@@ -206,11 +209,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
206
209
|
return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
|
|
207
210
|
toggleBorder: function toggleBorder() {
|
|
208
211
|
var _pluginInjectionApi$a;
|
|
209
|
-
(0,
|
|
212
|
+
(0, _commands2.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
|
|
210
213
|
},
|
|
211
214
|
setBorder: function setBorder(attrs) {
|
|
212
215
|
var _pluginInjectionApi$a2;
|
|
213
|
-
(0,
|
|
216
|
+
(0, _commands2.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
|
|
214
217
|
},
|
|
215
218
|
borderMark: borderMark,
|
|
216
219
|
intl: intl
|
|
@@ -293,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
293
296
|
LEGACY_fallbackIcon: _card.IconInline
|
|
294
297
|
});
|
|
295
298
|
},
|
|
296
|
-
onClick: (0,
|
|
299
|
+
onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
297
300
|
testId: 'image-inline-appearance'
|
|
298
301
|
}, {
|
|
299
302
|
type: 'button',
|
|
@@ -321,7 +324,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
321
324
|
var _options2 = [{
|
|
322
325
|
id: 'editor.media.convert.mediainline',
|
|
323
326
|
title: inlineSwitcherTitle,
|
|
324
|
-
onClick: (0,
|
|
327
|
+
onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
325
328
|
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
326
329
|
color: "currentColor",
|
|
327
330
|
spacing: "spacious",
|
|
@@ -429,7 +432,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
429
432
|
var width = _ref3.width,
|
|
430
433
|
validation = _ref3.validation;
|
|
431
434
|
var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
432
|
-
(0,
|
|
435
|
+
(0, _commands2.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
|
|
433
436
|
},
|
|
434
437
|
onMigrate: function onMigrate() {
|
|
435
438
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
|
@@ -565,11 +568,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
565
568
|
supportsViewMode: true
|
|
566
569
|
});
|
|
567
570
|
}
|
|
568
|
-
if (allowAltTextOnImages) {
|
|
571
|
+
if (allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
569
572
|
var _pluginInjectionApi$a8;
|
|
570
573
|
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
|
|
571
|
-
type: 'separator'
|
|
572
|
-
fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
574
|
+
type: 'separator'
|
|
573
575
|
});
|
|
574
576
|
}
|
|
575
577
|
var removeButton = {
|
|
@@ -733,7 +735,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
733
735
|
};
|
|
734
736
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
735
737
|
}
|
|
736
|
-
if (
|
|
738
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
739
|
+
var _pluginInjectionApi$a10;
|
|
737
740
|
if (items[items.length - 1].type === 'separator') {
|
|
738
741
|
var separatorItem = items[items.length - 1];
|
|
739
742
|
separatorItem.fullHeight = true;
|
|
@@ -743,9 +746,16 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
743
746
|
fullHeight: true
|
|
744
747
|
});
|
|
745
748
|
}
|
|
749
|
+
var altTextTitle = intl.formatMessage(_media.altTextMessages.addAltText);
|
|
746
750
|
items.push({
|
|
747
751
|
type: 'overflow-dropdown',
|
|
748
752
|
options: [{
|
|
753
|
+
title: altTextTitle,
|
|
754
|
+
onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
|
|
755
|
+
icon: /*#__PURE__*/_react.default.createElement(_text.default, {
|
|
756
|
+
label: altTextTitle
|
|
757
|
+
})
|
|
758
|
+
}, {
|
|
749
759
|
title: 'Resize',
|
|
750
760
|
onClick: function onClick() {
|
|
751
761
|
// TODO open resize dialog?
|
|
@@ -759,7 +769,9 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
759
769
|
}, {
|
|
760
770
|
title: 'Copy',
|
|
761
771
|
onClick: function onClick() {
|
|
762
|
-
|
|
772
|
+
var _pluginInjectionApi$c, _pluginInjectionApi$f3;
|
|
773
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
|
|
774
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
|
|
763
775
|
return true;
|
|
764
776
|
},
|
|
765
777
|
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
|
|
@@ -298,13 +298,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
298
298
|
supportsViewMode: true
|
|
299
299
|
});
|
|
300
300
|
}
|
|
301
|
-
if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
302
|
-
var _pluginInjectionApi$a5;
|
|
303
|
-
inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
304
|
-
type: 'separator',
|
|
305
|
-
fullHeight: true
|
|
306
|
-
});
|
|
307
|
-
}
|
|
308
301
|
|
|
309
302
|
//Image Preview
|
|
310
303
|
if (options.allowImagePreview) {
|
|
@@ -346,8 +339,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
346
339
|
});
|
|
347
340
|
}
|
|
348
341
|
if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
349
|
-
var _pluginInjectionApi$
|
|
350
|
-
inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
342
|
+
var _pluginInjectionApi$a5;
|
|
343
|
+
inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
351
344
|
type: 'separator'
|
|
352
345
|
});
|
|
353
346
|
}
|
|
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
5
|
+
import { altTextMessages } from '@atlaskit/editor-common/media';
|
|
5
6
|
import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
|
|
6
7
|
import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
7
8
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
@@ -16,6 +17,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
|
16
17
|
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
17
18
|
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
18
19
|
import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
|
|
20
|
+
import TextIcon from '@atlaskit/icon/core/text';
|
|
19
21
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
20
22
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
21
23
|
import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
|
|
@@ -24,6 +26,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
24
26
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
25
27
|
import { MediaSingleNodeSelector } from '../../nodeviews/styles';
|
|
26
28
|
import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
|
|
29
|
+
import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
|
|
27
30
|
import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
|
|
28
31
|
import { getMediaLinkingState } from '../../pm-plugins/linking';
|
|
29
32
|
import { stateKey } from '../../pm-plugins/plugin-key';
|
|
@@ -567,11 +570,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
567
570
|
supportsViewMode: true
|
|
568
571
|
});
|
|
569
572
|
}
|
|
570
|
-
if (allowAltTextOnImages) {
|
|
573
|
+
if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
|
|
571
574
|
var _pluginInjectionApi$a8;
|
|
572
575
|
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
|
|
573
|
-
type: 'separator'
|
|
574
|
-
fullHeight: editorExperiment('platform_editor_controls', 'variant1')
|
|
576
|
+
type: 'separator'
|
|
575
577
|
});
|
|
576
578
|
}
|
|
577
579
|
const removeButton = {
|
|
@@ -733,7 +735,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
733
735
|
};
|
|
734
736
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
735
737
|
}
|
|
736
|
-
if (
|
|
738
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
739
|
+
var _pluginInjectionApi$a10;
|
|
737
740
|
if (items[items.length - 1].type === 'separator') {
|
|
738
741
|
const separatorItem = items[items.length - 1];
|
|
739
742
|
separatorItem.fullHeight = true;
|
|
@@ -743,9 +746,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
743
746
|
fullHeight: true
|
|
744
747
|
});
|
|
745
748
|
}
|
|
749
|
+
const altTextTitle = intl.formatMessage(altTextMessages.addAltText);
|
|
746
750
|
items.push({
|
|
747
751
|
type: 'overflow-dropdown',
|
|
748
752
|
options: [{
|
|
753
|
+
title: altTextTitle,
|
|
754
|
+
onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
|
|
755
|
+
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
756
|
+
label: altTextTitle
|
|
757
|
+
})
|
|
758
|
+
}, {
|
|
749
759
|
title: 'Resize',
|
|
750
760
|
onClick: () => {
|
|
751
761
|
// TODO open resize dialog?
|
|
@@ -759,7 +769,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
759
769
|
}, {
|
|
760
770
|
title: 'Copy',
|
|
761
771
|
onClick: () => {
|
|
762
|
-
|
|
772
|
+
var _pluginInjectionApi$c, _pluginInjectionApi$f5;
|
|
773
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute( // @ts-ignore
|
|
774
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f5 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f5 === void 0 ? void 0 : _pluginInjectionApi$f5.commands.copyNode(nodeType));
|
|
763
775
|
return true;
|
|
764
776
|
},
|
|
765
777
|
icon: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
@@ -290,13 +290,6 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
|
|
|
290
290
|
supportsViewMode: true
|
|
291
291
|
});
|
|
292
292
|
}
|
|
293
|
-
if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
294
|
-
var _pluginInjectionApi$a5;
|
|
295
|
-
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
296
|
-
type: 'separator',
|
|
297
|
-
fullHeight: true
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
293
|
|
|
301
294
|
//Image Preview
|
|
302
295
|
if (options.allowImagePreview) {
|
|
@@ -338,8 +331,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
|
|
|
338
331
|
});
|
|
339
332
|
}
|
|
340
333
|
if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
|
|
341
|
-
var _pluginInjectionApi$
|
|
342
|
-
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
334
|
+
var _pluginInjectionApi$a5;
|
|
335
|
+
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
343
336
|
type: 'separator'
|
|
344
337
|
});
|
|
345
338
|
}
|
|
@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
8
8
|
import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
9
|
+
import { altTextMessages } from '@atlaskit/editor-common/media';
|
|
9
10
|
import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
|
|
10
11
|
import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
11
12
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
@@ -20,6 +21,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
|
20
21
|
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
21
22
|
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
22
23
|
import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
|
|
24
|
+
import TextIcon from '@atlaskit/icon/core/text';
|
|
23
25
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
24
26
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
25
27
|
import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
|
|
@@ -28,6 +30,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
28
30
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
29
31
|
import { MediaSingleNodeSelector } from '../../nodeviews/styles';
|
|
30
32
|
import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
|
|
33
|
+
import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
|
|
31
34
|
import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
|
|
32
35
|
import { getMediaLinkingState } from '../../pm-plugins/linking';
|
|
33
36
|
import { stateKey } from '../../pm-plugins/plugin-key';
|
|
@@ -555,11 +558,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
555
558
|
supportsViewMode: true
|
|
556
559
|
});
|
|
557
560
|
}
|
|
558
|
-
if (allowAltTextOnImages) {
|
|
561
|
+
if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
|
|
559
562
|
var _pluginInjectionApi$a8;
|
|
560
563
|
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
|
|
561
|
-
type: 'separator'
|
|
562
|
-
fullHeight: editorExperiment('platform_editor_controls', 'variant1')
|
|
564
|
+
type: 'separator'
|
|
563
565
|
});
|
|
564
566
|
}
|
|
565
567
|
var removeButton = {
|
|
@@ -723,7 +725,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
723
725
|
};
|
|
724
726
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
725
727
|
}
|
|
726
|
-
if (
|
|
728
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
729
|
+
var _pluginInjectionApi$a10;
|
|
727
730
|
if (items[items.length - 1].type === 'separator') {
|
|
728
731
|
var separatorItem = items[items.length - 1];
|
|
729
732
|
separatorItem.fullHeight = true;
|
|
@@ -733,9 +736,16 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
733
736
|
fullHeight: true
|
|
734
737
|
});
|
|
735
738
|
}
|
|
739
|
+
var altTextTitle = intl.formatMessage(altTextMessages.addAltText);
|
|
736
740
|
items.push({
|
|
737
741
|
type: 'overflow-dropdown',
|
|
738
742
|
options: [{
|
|
743
|
+
title: altTextTitle,
|
|
744
|
+
onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
|
|
745
|
+
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
746
|
+
label: altTextTitle
|
|
747
|
+
})
|
|
748
|
+
}, {
|
|
739
749
|
title: 'Resize',
|
|
740
750
|
onClick: function onClick() {
|
|
741
751
|
// TODO open resize dialog?
|
|
@@ -749,7 +759,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
749
759
|
}, {
|
|
750
760
|
title: 'Copy',
|
|
751
761
|
onClick: function onClick() {
|
|
752
|
-
|
|
762
|
+
var _pluginInjectionApi$c, _pluginInjectionApi$f3;
|
|
763
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
|
|
764
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
|
|
753
765
|
return true;
|
|
754
766
|
},
|
|
755
767
|
icon: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
@@ -288,13 +288,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
288
288
|
supportsViewMode: true
|
|
289
289
|
});
|
|
290
290
|
}
|
|
291
|
-
if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
292
|
-
var _pluginInjectionApi$a5;
|
|
293
|
-
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
294
|
-
type: 'separator',
|
|
295
|
-
fullHeight: true
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
291
|
|
|
299
292
|
//Image Preview
|
|
300
293
|
if (options.allowImagePreview) {
|
|
@@ -336,8 +329,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
336
329
|
});
|
|
337
330
|
}
|
|
338
331
|
if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
|
|
339
|
-
var _pluginInjectionApi$
|
|
340
|
-
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
332
|
+
var _pluginInjectionApi$a5;
|
|
333
|
+
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
|
|
341
334
|
type: 'separator'
|
|
342
335
|
});
|
|
343
336
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
"./types": "./src/types/index.ts"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@atlaskit/adf-schema": "^47.
|
|
37
|
+
"@atlaskit/adf-schema": "^47.6.0",
|
|
38
38
|
"@atlaskit/analytics-namespaced-context": "^7.0.0",
|
|
39
39
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
40
40
|
"@atlaskit/button": "^21.1.0",
|
|
41
|
-
"@atlaskit/editor-common": "^100.
|
|
41
|
+
"@atlaskit/editor-common": "^100.5.0",
|
|
42
42
|
"@atlaskit/editor-palette": "2.0.0",
|
|
43
|
-
"@atlaskit/editor-plugin-analytics": "^2.
|
|
44
|
-
"@atlaskit/editor-plugin-annotation": "2.0
|
|
43
|
+
"@atlaskit/editor-plugin-analytics": "^2.1.0",
|
|
44
|
+
"@atlaskit/editor-plugin-annotation": "2.1.0",
|
|
45
45
|
"@atlaskit/editor-plugin-connectivity": "^2.0.0",
|
|
46
46
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
47
47
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
48
48
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
|
|
49
|
-
"@atlaskit/editor-plugin-floating-toolbar": "^3.
|
|
49
|
+
"@atlaskit/editor-plugin-floating-toolbar": "^3.1.0",
|
|
50
50
|
"@atlaskit/editor-plugin-focus": "^1.5.0",
|
|
51
51
|
"@atlaskit/editor-plugin-grid": "^2.0.0",
|
|
52
52
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@atlaskit/primitives": "^14.1.0",
|
|
70
70
|
"@atlaskit/textfield": "^8.0.0",
|
|
71
71
|
"@atlaskit/theme": "^17.0.0",
|
|
72
|
-
"@atlaskit/tmp-editor-statsig": "^3.
|
|
72
|
+
"@atlaskit/tmp-editor-statsig": "^3.4.0",
|
|
73
73
|
"@atlaskit/tokens": "^4.3.0",
|
|
74
74
|
"@atlaskit/tooltip": "^20.0.0",
|
|
75
75
|
"@babel/runtime": "^7.0.0",
|