@atlaskit/editor-plugin-media 2.6.3 → 2.6.4
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 +9 -0
- package/dist/cjs/ui/toolbar/index.js +44 -38
- package/dist/es2019/ui/toolbar/index.js +45 -39
- package/dist/esm/ui/toolbar/index.js +45 -39
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 2.6.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#144829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144829)
|
|
8
|
+
[`14b488c2295de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14b488c2295de) -
|
|
9
|
+
[ux] ED27537 Update alignment dropdown in media and embed card floating toolbar
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 2.6.3
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -291,32 +291,38 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
291
291
|
}
|
|
292
292
|
var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
293
293
|
var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
294
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
|
|
295
|
+
var _pluginInjectionApi$a4;
|
|
296
|
+
var layoutDropdown = (0, _card.buildLayoutDropdown)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
297
|
+
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutDropdown));
|
|
298
|
+
} else {
|
|
299
|
+
var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)),
|
|
300
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
301
|
+
selectedNode.node);
|
|
302
|
+
if (selectedLayoutIcon && layoutButtons.length) {
|
|
303
|
+
var _options = {
|
|
304
|
+
render: function render(props) {
|
|
305
|
+
return /*#__PURE__*/_react.default.createElement(_layoutGroup.LayoutGroup, (0, _extends2.default)({
|
|
306
|
+
layoutButtons: layoutButtons
|
|
307
|
+
// Ignored via go/ees005
|
|
308
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
309
|
+
}, props));
|
|
310
|
+
},
|
|
311
|
+
width: 188,
|
|
312
|
+
height: 32
|
|
313
|
+
};
|
|
314
|
+
var trigger = {
|
|
315
|
+
id: 'media-single-layout',
|
|
316
|
+
testId: 'media-single-layout-dropdown-trigger',
|
|
317
|
+
type: 'dropdown',
|
|
318
|
+
options: _options,
|
|
319
|
+
title: intl.formatMessage(_card.layoutToMessages[selectedLayoutIcon.value]),
|
|
320
|
+
icon: selectedLayoutIcon.icon
|
|
321
|
+
};
|
|
322
|
+
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger, {
|
|
323
|
+
type: 'separator'
|
|
324
|
+
}]);
|
|
325
|
+
}
|
|
320
326
|
}
|
|
321
327
|
};
|
|
322
328
|
if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
|
|
@@ -352,7 +358,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
352
358
|
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
353
359
|
var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
354
360
|
if (!isEditorControlsEnabled) {
|
|
355
|
-
var _pluginInjectionApi$
|
|
361
|
+
var _pluginInjectionApi$a5;
|
|
356
362
|
toolbarButtons.push({
|
|
357
363
|
type: 'button',
|
|
358
364
|
id: 'editor.media.image.view.switcher.inline',
|
|
@@ -366,7 +372,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
366
372
|
LEGACY_fallbackIcon: _card.IconInline
|
|
367
373
|
});
|
|
368
374
|
},
|
|
369
|
-
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
375
|
+
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
370
376
|
testId: 'image-inline-appearance'
|
|
371
377
|
}, {
|
|
372
378
|
type: 'button',
|
|
@@ -390,12 +396,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
390
396
|
type: 'separator'
|
|
391
397
|
});
|
|
392
398
|
} else {
|
|
393
|
-
var _pluginInjectionApi$
|
|
399
|
+
var _pluginInjectionApi$a6;
|
|
394
400
|
var inlineTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
395
401
|
var _options2 = [{
|
|
396
402
|
id: 'editor.media.convert.mediainline',
|
|
397
403
|
title: inlineTitle,
|
|
398
|
-
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
404
|
+
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
399
405
|
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
400
406
|
color: "currentColor",
|
|
401
407
|
spacing: "spacious",
|
|
@@ -516,10 +522,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
516
522
|
};
|
|
517
523
|
var openLink = function openLink() {
|
|
518
524
|
if (editorView) {
|
|
519
|
-
var _pluginInjectionApi$
|
|
525
|
+
var _pluginInjectionApi$a7;
|
|
520
526
|
var tr = editorView.state.tr,
|
|
521
527
|
dispatch = editorView.dispatch;
|
|
522
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
528
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
523
529
|
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
524
530
|
action: _analytics.ACTION.VISITED,
|
|
525
531
|
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
|
|
@@ -594,8 +600,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
594
600
|
}
|
|
595
601
|
if (!isEditorControlsEnabled) {
|
|
596
602
|
if (allowAltTextOnImages) {
|
|
597
|
-
var _pluginInjectionApi$
|
|
598
|
-
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
603
|
+
var _pluginInjectionApi$a8;
|
|
604
|
+
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), {
|
|
599
605
|
type: 'separator'
|
|
600
606
|
});
|
|
601
607
|
}
|
|
@@ -769,7 +775,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
769
775
|
selectedNodeType = state.selection.node.type;
|
|
770
776
|
}
|
|
771
777
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
772
|
-
var _pluginInjectionApi$
|
|
778
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
773
779
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
774
780
|
baseToolbar.getDomRef = function () {
|
|
775
781
|
var _mediaPluginState$ele2;
|
|
@@ -778,7 +784,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
778
784
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
779
785
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
780
786
|
};
|
|
781
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
787
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
|
|
782
788
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
783
789
|
items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
784
790
|
} else {
|
|
@@ -792,9 +798,9 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
792
798
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
793
799
|
}
|
|
794
800
|
if (!mediaPluginState.isResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
795
|
-
var _pluginInjectionApi$
|
|
801
|
+
var _pluginInjectionApi$a10;
|
|
796
802
|
(0, _utils2.updateToFullHeightSeparator)(items);
|
|
797
|
-
var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
803
|
+
var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions)), (0, _toConsumableArray2.default)((0, _pixelResizing2.getResizeDropdownOption)(options, state, intl.formatMessage, selectedNodeType)));
|
|
798
804
|
if (customOptions.length) {
|
|
799
805
|
customOptions.push({
|
|
800
806
|
type: 'separator'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
|
-
import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
4
|
+
import { alignmentIcons, buildLayoutButtons, buildLayoutDropdown, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
5
5
|
import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
|
|
6
6
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
7
7
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -282,32 +282,38 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
282
282
|
}
|
|
283
283
|
const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
284
284
|
const addLayoutDropdownToToolbar = () => {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
285
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
|
|
286
|
+
var _pluginInjectionApi$a4;
|
|
287
|
+
const layoutDropdown = buildLayoutDropdown(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
288
|
+
toolbarButtons = [...toolbarButtons, ...layoutDropdown];
|
|
289
|
+
} else {
|
|
290
|
+
const selectedLayoutIcon = getSelectedLayoutIcon([...alignmentIcons, ...wrappingIcons],
|
|
291
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
292
|
+
selectedNode.node);
|
|
293
|
+
if (selectedLayoutIcon && layoutButtons.length) {
|
|
294
|
+
const options = {
|
|
295
|
+
render: props => {
|
|
296
|
+
return /*#__PURE__*/React.createElement(LayoutGroup, _extends({
|
|
297
|
+
layoutButtons: layoutButtons
|
|
298
|
+
// Ignored via go/ees005
|
|
299
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
300
|
+
}, props));
|
|
301
|
+
},
|
|
302
|
+
width: 188,
|
|
303
|
+
height: 32
|
|
304
|
+
};
|
|
305
|
+
const trigger = {
|
|
306
|
+
id: 'media-single-layout',
|
|
307
|
+
testId: 'media-single-layout-dropdown-trigger',
|
|
308
|
+
type: 'dropdown',
|
|
309
|
+
options: options,
|
|
310
|
+
title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
|
|
311
|
+
icon: selectedLayoutIcon.icon
|
|
312
|
+
};
|
|
313
|
+
toolbarButtons = [...toolbarButtons, trigger, {
|
|
314
|
+
type: 'separator'
|
|
315
|
+
}];
|
|
316
|
+
}
|
|
311
317
|
}
|
|
312
318
|
};
|
|
313
319
|
if (fg('platform_editor_remove_media_inline_feature_flag')) {
|
|
@@ -343,7 +349,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
343
349
|
const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
344
350
|
const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
345
351
|
if (!isEditorControlsEnabled) {
|
|
346
|
-
var _pluginInjectionApi$
|
|
352
|
+
var _pluginInjectionApi$a5;
|
|
347
353
|
toolbarButtons.push({
|
|
348
354
|
type: 'button',
|
|
349
355
|
id: 'editor.media.image.view.switcher.inline',
|
|
@@ -355,7 +361,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
355
361
|
LEGACY_size: "medium",
|
|
356
362
|
LEGACY_fallbackIcon: IconInline
|
|
357
363
|
}),
|
|
358
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
364
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
359
365
|
testId: 'image-inline-appearance'
|
|
360
366
|
}, {
|
|
361
367
|
type: 'button',
|
|
@@ -377,12 +383,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
377
383
|
type: 'separator'
|
|
378
384
|
});
|
|
379
385
|
} else {
|
|
380
|
-
var _pluginInjectionApi$
|
|
386
|
+
var _pluginInjectionApi$a6;
|
|
381
387
|
const inlineTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
382
388
|
const options = [{
|
|
383
389
|
id: 'editor.media.convert.mediainline',
|
|
384
390
|
title: inlineTitle,
|
|
385
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
391
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
386
392
|
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
387
393
|
color: "currentColor",
|
|
388
394
|
spacing: "spacious",
|
|
@@ -507,14 +513,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
507
513
|
};
|
|
508
514
|
const openLink = () => {
|
|
509
515
|
if (editorView) {
|
|
510
|
-
var _pluginInjectionApi$
|
|
516
|
+
var _pluginInjectionApi$a7;
|
|
511
517
|
const {
|
|
512
518
|
state: {
|
|
513
519
|
tr
|
|
514
520
|
},
|
|
515
521
|
dispatch
|
|
516
522
|
} = editorView;
|
|
517
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
523
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
518
524
|
eventType: EVENT_TYPE.TRACK,
|
|
519
525
|
action: ACTION.VISITED,
|
|
520
526
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -589,8 +595,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
589
595
|
}
|
|
590
596
|
if (!isEditorControlsEnabled) {
|
|
591
597
|
if (allowAltTextOnImages) {
|
|
592
|
-
var _pluginInjectionApi$
|
|
593
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
598
|
+
var _pluginInjectionApi$a8;
|
|
599
|
+
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), {
|
|
594
600
|
type: 'separator'
|
|
595
601
|
});
|
|
596
602
|
}
|
|
@@ -768,7 +774,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
768
774
|
selectedNodeType = state.selection.node.type;
|
|
769
775
|
}
|
|
770
776
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
771
|
-
var _pluginInjectionApi$
|
|
777
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
|
|
772
778
|
const mediaOffset = state.selection.$from.parentOffset + 1;
|
|
773
779
|
baseToolbar.getDomRef = () => {
|
|
774
780
|
var _mediaPluginState$ele2;
|
|
@@ -777,7 +783,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
777
783
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
778
784
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
779
785
|
};
|
|
780
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
786
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
|
|
781
787
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
782
788
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
783
789
|
} else {
|
|
@@ -791,9 +797,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
791
797
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
792
798
|
}
|
|
793
799
|
if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
794
|
-
var _pluginInjectionApi$
|
|
800
|
+
var _pluginInjectionApi$a10;
|
|
795
801
|
updateToFullHeightSeparator(items);
|
|
796
|
-
const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
802
|
+
const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions), ...getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)];
|
|
797
803
|
if (customOptions.length) {
|
|
798
804
|
customOptions.push({
|
|
799
805
|
type: 'separator'
|
|
@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
8
|
-
import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
8
|
+
import { alignmentIcons, buildLayoutButtons, buildLayoutDropdown, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
|
|
9
9
|
import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
|
|
10
10
|
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
11
11
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -281,32 +281,38 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
281
281
|
}
|
|
282
282
|
var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
283
283
|
var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
284
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
|
|
285
|
+
var _pluginInjectionApi$a4;
|
|
286
|
+
var layoutDropdown = buildLayoutDropdown(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
|
|
287
|
+
toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutDropdown));
|
|
288
|
+
} else {
|
|
289
|
+
var selectedLayoutIcon = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)),
|
|
290
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
291
|
+
selectedNode.node);
|
|
292
|
+
if (selectedLayoutIcon && layoutButtons.length) {
|
|
293
|
+
var _options = {
|
|
294
|
+
render: function render(props) {
|
|
295
|
+
return /*#__PURE__*/React.createElement(LayoutGroup, _extends({
|
|
296
|
+
layoutButtons: layoutButtons
|
|
297
|
+
// Ignored via go/ees005
|
|
298
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
299
|
+
}, props));
|
|
300
|
+
},
|
|
301
|
+
width: 188,
|
|
302
|
+
height: 32
|
|
303
|
+
};
|
|
304
|
+
var trigger = {
|
|
305
|
+
id: 'media-single-layout',
|
|
306
|
+
testId: 'media-single-layout-dropdown-trigger',
|
|
307
|
+
type: 'dropdown',
|
|
308
|
+
options: _options,
|
|
309
|
+
title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
|
|
310
|
+
icon: selectedLayoutIcon.icon
|
|
311
|
+
};
|
|
312
|
+
toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger, {
|
|
313
|
+
type: 'separator'
|
|
314
|
+
}]);
|
|
315
|
+
}
|
|
310
316
|
}
|
|
311
317
|
};
|
|
312
318
|
if (fg('platform_editor_remove_media_inline_feature_flag')) {
|
|
@@ -342,7 +348,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
342
348
|
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
343
349
|
var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
344
350
|
if (!isEditorControlsEnabled) {
|
|
345
|
-
var _pluginInjectionApi$
|
|
351
|
+
var _pluginInjectionApi$a5;
|
|
346
352
|
toolbarButtons.push({
|
|
347
353
|
type: 'button',
|
|
348
354
|
id: 'editor.media.image.view.switcher.inline',
|
|
@@ -356,7 +362,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
356
362
|
LEGACY_fallbackIcon: IconInline
|
|
357
363
|
});
|
|
358
364
|
},
|
|
359
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
365
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
360
366
|
testId: 'image-inline-appearance'
|
|
361
367
|
}, {
|
|
362
368
|
type: 'button',
|
|
@@ -380,12 +386,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
380
386
|
type: 'separator'
|
|
381
387
|
});
|
|
382
388
|
} else {
|
|
383
|
-
var _pluginInjectionApi$
|
|
389
|
+
var _pluginInjectionApi$a6;
|
|
384
390
|
var inlineTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
385
391
|
var _options2 = [{
|
|
386
392
|
id: 'editor.media.convert.mediainline',
|
|
387
393
|
title: inlineTitle,
|
|
388
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
394
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
389
395
|
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
390
396
|
color: "currentColor",
|
|
391
397
|
spacing: "spacious",
|
|
@@ -506,10 +512,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
506
512
|
};
|
|
507
513
|
var openLink = function openLink() {
|
|
508
514
|
if (editorView) {
|
|
509
|
-
var _pluginInjectionApi$
|
|
515
|
+
var _pluginInjectionApi$a7;
|
|
510
516
|
var tr = editorView.state.tr,
|
|
511
517
|
dispatch = editorView.dispatch;
|
|
512
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
518
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
513
519
|
eventType: EVENT_TYPE.TRACK,
|
|
514
520
|
action: ACTION.VISITED,
|
|
515
521
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -584,8 +590,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
584
590
|
}
|
|
585
591
|
if (!isEditorControlsEnabled) {
|
|
586
592
|
if (allowAltTextOnImages) {
|
|
587
|
-
var _pluginInjectionApi$
|
|
588
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
593
|
+
var _pluginInjectionApi$a8;
|
|
594
|
+
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
|
|
589
595
|
type: 'separator'
|
|
590
596
|
});
|
|
591
597
|
}
|
|
@@ -759,7 +765,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
759
765
|
selectedNodeType = state.selection.node.type;
|
|
760
766
|
}
|
|
761
767
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
762
|
-
var _pluginInjectionApi$
|
|
768
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
763
769
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
764
770
|
baseToolbar.getDomRef = function () {
|
|
765
771
|
var _mediaPluginState$ele2;
|
|
@@ -768,7 +774,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
768
774
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
769
775
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
770
776
|
};
|
|
771
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
777
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
|
|
772
778
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
773
779
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
774
780
|
} else {
|
|
@@ -782,9 +788,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
782
788
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
783
789
|
}
|
|
784
790
|
if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
785
|
-
var _pluginInjectionApi$
|
|
791
|
+
var _pluginInjectionApi$a10;
|
|
786
792
|
updateToFullHeightSeparator(items);
|
|
787
|
-
var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
793
|
+
var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions)), _toConsumableArray(getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)));
|
|
788
794
|
if (customOptions.length) {
|
|
789
795
|
customOptions.push({
|
|
790
796
|
type: 'separator'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.4",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@atlaskit/analytics-namespaced-context": "^7.0.0",
|
|
39
39
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
40
40
|
"@atlaskit/button": "^23.0.0",
|
|
41
|
-
"@atlaskit/editor-common": "^103.
|
|
41
|
+
"@atlaskit/editor-common": "^103.13.0",
|
|
42
42
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
43
43
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
44
44
|
"@atlaskit/editor-plugin-annotation": "^2.7.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@atlaskit/primitives": "^14.4.0",
|
|
71
71
|
"@atlaskit/textfield": "^8.0.0",
|
|
72
72
|
"@atlaskit/theme": "^18.0.0",
|
|
73
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
73
|
+
"@atlaskit/tmp-editor-statsig": "^4.13.0",
|
|
74
74
|
"@atlaskit/tokens": "^4.8.0",
|
|
75
75
|
"@atlaskit/tooltip": "^20.0.0",
|
|
76
76
|
"@babel/runtime": "^7.0.0",
|
|
@@ -178,6 +178,9 @@
|
|
|
178
178
|
"platform_editor_media_single_toolbar_target": {
|
|
179
179
|
"type": "boolean"
|
|
180
180
|
},
|
|
181
|
+
"platform_editor_controls_patch_6": {
|
|
182
|
+
"type": "boolean"
|
|
183
|
+
},
|
|
181
184
|
"platform_editor_ssr_media": {
|
|
182
185
|
"type": "boolean"
|
|
183
186
|
},
|