@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
981 lines • 55.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.overflowDropdwonBtnTriggerTestId = exports.handleShowMediaViewer = exports.handleShowImageEditor = exports.floatingToolbar = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
var _mediaInline = require("@atlaskit/editor-common/media-inline");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _state2 = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _imageCrop = _interopRequireDefault(require("@atlaskit/icon-lab/core/image-crop"));
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
var _upload = _interopRequireDefault(require("@atlaskit/icon/core/upload"));
var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
var _messages2 = require("@atlaskit/media-ui/messages");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _styles = require("../../nodeviews/styles");
var _altText = require("../../pm-plugins/alt-text");
var _linking = require("../../pm-plugins/commands/linking");
var _linking2 = require("../../pm-plugins/linking");
var _pixelResizing = require("../../pm-plugins/pixel-resizing");
var _ui = require("../../pm-plugins/pixel-resizing/ui");
var _pluginKey = require("../../pm-plugins/plugin-key");
var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
var _mediaSingle = require("../../pm-plugins/utils/media-single");
var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
var _altText2 = require("./alt-text");
var _commands = require("./commands");
var _comments = require("./comments");
var _imageBorder = require("./imageBorder");
var _layoutGroup = require("./layout-group");
var _linking3 = require("./linking");
var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
var _mediaInline2 = require("./mediaInline");
var _pixelResizing2 = require("./pixel-resizing");
var _utils2 = require("./utils");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
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; }
var mediaTypeMessages = {
image: _messages2.messages.file_image_is_selected,
video: _messages2.messages.file_video_is_selected,
audio: _messages2.messages.file_audio_is_selected,
doc: _messages2.messages.file_doc_is_selected,
archive: _messages2.messages.file_archive_is_selected,
unknown: _messages2.messages.file_unknown_is_selected
};
var getMediaActionSubject = function getMediaActionSubject(nodeType) {
switch (nodeType.name) {
case 'mediaSingle':
return _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
case 'mediaInline':
return _analytics.ACTION_SUBJECT.MEDIA_INLINE;
case 'mediaGroup':
return _analytics.ACTION_SUBJECT.MEDIA_GROUP;
default:
return _analytics.ACTION_SUBJECT.MEDIA;
}
};
var removeWithAnalytics = function removeWithAnalytics(editorAnalyticsApi, nodeType) {
if (!nodeType) {
return remove;
}
var mediaType = getMediaActionSubject(nodeType);
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
action: _analytics.ACTION.DELETED,
actionSubject: mediaType,
attributes: {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
},
eventType: _analytics.EVENT_TYPE.TRACK
})(remove);
};
var remove = function remove(state, dispatch) {
if (dispatch) {
dispatch((0, _utils.removeSelectedNode)(state.tr));
}
return true;
};
var handleRemoveMediaGroupWithAnalytics = function handleRemoveMediaGroupWithAnalytics(editorAnalyticsApi) {
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
action: _analytics.ACTION.DELETED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA_GROUP,
attributes: {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
},
eventType: _analytics.EVENT_TYPE.TRACK
})(handleRemoveMediaGroup);
};
var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
var tr = (0, _utils2.removeMediaGroupNode)(state);
if (dispatch) {
dispatch(tr);
}
return true;
};
var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowMediaViewer(_ref) {
var api = _ref.api,
mediaPluginState = _ref.mediaPluginState;
var selectedNodeAttrs = (0, _utils2.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
if (!selectedNodeAttrs) {
return false;
}
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
};
var handleShowImageEditor = exports.handleShowImageEditor = function handleShowImageEditor(_ref2) {
var _api$mediaEditing;
var api = _ref2.api,
mediaPluginState = _ref2.mediaPluginState;
var selectedNodeAttrs = (0, _utils2.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
if (!selectedNodeAttrs) {
return false;
}
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$mediaEditing = api.mediaEditing) === null || _api$mediaEditing === void 0 ? void 0 : _api$mediaEditing.commands.showImageEditor(selectedNodeAttrs));
};
var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
var _pluginInjectionApi$c;
var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(mediaPluginState);
var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var preview = {
id: 'editor.media.viewer',
testId: 'file-preview-toolbar-button',
type: 'button',
icon: areAnyNewToolbarFlagsEnabled ? _growDiagonal.default : _maximize.default,
title: intl.formatMessage(_messages2.messages.expand),
onClick: function onClick() {
var _handleShowMediaViewe;
return (_handleShowMediaViewe = handleShowMediaViewer({
mediaPluginState: mediaPluginState,
api: pluginInjectionApi
})) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
},
disabled: (0, _editorPluginConnectivity.isOfflineMode)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode),
supportsViewMode: true
};
var download = _objectSpread({
id: 'editor.media.card.download',
type: 'button',
icon: _download.default,
onClick: function onClick() {
(0, _utils2.downloadMedia)(mediaPluginState);
return true;
},
title: intl.formatMessage(_messages2.messages.download),
disabled: disableDownloadButton
}, areAnyNewToolbarFlagsEnabled && {
supportsViewMode: true
});
if (isViewOnly && !areAnyNewToolbarFlagsEnabled) {
return [];
}
var mediaGroup = state.schema.nodes.mediaGroup;
var items = [];
if (!areAnyNewToolbarFlagsEnabled) {
items.push({
id: 'editor.media.view.switcher.inline',
type: 'button',
icon: _imageInline.default,
selected: false,
focusEditoronEnter: true,
disabled: false,
onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
title: intl.formatMessage(_messages.cardMessages.inlineTitle),
testId: 'inline-appearance',
className: 'inline-appearance' // a11y. uses to force focus on item
}, {
id: 'editor.media.view.switcher.thumbnail',
type: 'button',
icon: _smartLinkCard.default,
selected: true,
disabled: false,
focusEditoronEnter: true,
onClick: function onClick() {
return true;
},
title: intl.formatMessage(_messages.cardMessages.blockTitle),
testId: 'thumbnail-appearance',
className: 'thumbnail-appearance' // a11y. uses to force focus on item
}, {
type: 'separator'
}, preview, {
type: 'separator'
}, download, {
type: 'separator'
}, {
type: 'copy-button',
supportsViewMode: true,
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaGroup
}]
}, {
type: 'separator'
}, {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _delete.default,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
title: intl.formatMessage(_messages.default.remove),
onClick: handleRemoveMediaGroupWithAnalytics(editorAnalyticsAPI),
testId: 'media-toolbar-remove-button'
});
} else {
var options = [{
id: 'editor.media.view.switcher.inline',
title: intl.formatMessage(_messages.cardMessages.inlineTitle),
onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
label: "",
spacing: "spacious"
})
}, {
id: 'editor.media.view.switcher.thumbnail',
title: intl.formatMessage(_messages.cardMessages.blockTitle),
selected: true,
onClick: function onClick() {
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
label: "",
spacing: "spacious"
})
}];
var switcherDropdown = {
title: intl.formatMessage(_messages2.messages.fileDisplayOptions),
id: 'media-group-inline-switcher-toolbar-item',
testId: 'media-group-inline-switcher-dropdown',
type: 'dropdown',
options: options,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
label: "",
spacing: "spacious"
});
}
};
items.push(switcherDropdown, {
type: 'separator',
fullHeight: true
}, download, {
type: 'separator',
supportsViewMode: true
}, preview, {
type: 'separator',
fullHeight: true
});
}
return items;
};
var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi) {
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
var mediaSingle = state.schema.nodes.mediaSingle;
var allowResizing = options.allowResizing,
allowLinking = options.allowLinking,
allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
allowCommentsOnMedia = options.allowCommentsOnMedia,
allowResizingInTables = options.allowResizingInTables,
allowAltTextOnImages = options.allowAltTextOnImages,
allowMediaInline = options.allowMediaInline,
allowMediaInlineImages = options.allowMediaInlineImages,
allowImageEditing = options.allowImageEditing,
allowImagePreview = options.allowImagePreview,
isViewOnly = options.isViewOnly,
allowPixelResizing = options.allowPixelResizing,
onCommentButtonMount = options.onCommentButtonMount,
createCommentExperience = options.createCommentExperience;
var toolbarButtons = [];
var _ref3 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
hoverDecoration = _ref3.hoverDecoration;
var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(pluginState);
var mauiToolbarSeparatorsUpdateEnabled = (0, _fg.fg)('cc-maui-toolbar-separators-update') && areAnyNewToolbarFlagsEnabled;
if ((0, _imageBorder.shouldShowImageBorder)(state)) {
toolbarButtons.push({
type: 'custom',
fallback: [],
render: function render(editorView) {
if (!editorView) {
return null;
}
var dispatch = editorView.dispatch,
state = editorView.state;
var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
return /*#__PURE__*/_react.default.createElement(_ImageBorder.default
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
toggleBorder: function toggleBorder() {
var _pluginInjectionApi$a;
(0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
setBorder: function setBorder(attrs) {
var _pluginInjectionApi$a2;
(0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
},
borderMark: borderMark,
intl: intl
});
}
});
if (!areAnyNewToolbarFlagsEnabled) {
toolbarButtons.push({
type: 'separator'
});
}
}
if (allowAdvancedToolBarOptions) {
var _pluginInjectionApi$a3;
var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
var isChangingLayoutDisabled = false;
var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
if (allowPixelResizing) {
var _widthPlugin$sharedSt;
var contentWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
isChangingLayoutDisabled = true;
}
}
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);
var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
if (areAnyNewToolbarFlagsEnabled) {
var _pluginInjectionApi$a4;
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);
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutDropdown));
} else {
var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)),
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
selectedNode.node);
if (selectedLayoutIcon && layoutButtons.length) {
var _options = {
render: function render(props) {
return /*#__PURE__*/_react.default.createElement(_layoutGroup.LayoutGroup, (0, _extends2.default)({
layoutButtons: layoutButtons
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
},
width: 188,
height: 32
};
var trigger = {
id: 'media-single-layout',
testId: 'media-single-layout-dropdown-trigger',
type: 'dropdown',
options: _options,
title: intl.formatMessage(_card.layoutToMessages[selectedLayoutIcon.value]),
icon: selectedLayoutIcon.icon
};
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger], (0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [{
type: 'separator'
}]));
}
}
};
if ((0, _fg.fg)('platform_editor_remove_media_inline_feature_flag')) {
if (allowMediaInlineImages && selectedNode) {
addLayoutDropdownToToolbar();
} else {
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
if (layoutButtons.length && !mauiToolbarSeparatorsUpdateEnabled) {
toolbarButtons.push({
type: 'separator'
});
}
}
} else {
if ((0, _mediaInline.mediaInlineImagesEnabled)(allowMediaInline, allowMediaInlineImages) && selectedNode) {
addLayoutDropdownToToolbar();
} else {
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
if (layoutButtons.length && !areAnyNewToolbarFlagsEnabled) {
toolbarButtons.push({
type: 'separator'
});
}
}
}
// floating and inline switcher
if (pluginState.allowInlineImages && selectedNode && (0, _utils2.canShowSwitchButtons)(selectedNode.node)) {
var _selectedNode$node$fi;
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
if (!areAnyNewToolbarFlagsEnabled) {
var _pluginInjectionApi$a5;
toolbarButtons.push({
type: 'button',
id: 'editor.media.image.view.switcher.inline',
title: inlineSwitcherTitle,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
color: "currentColor",
spacing: "spacious",
label: inlineSwitcherTitle
});
},
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
testId: 'image-inline-appearance',
selected: false
}, {
type: 'button',
id: 'editor.media.image.view.switcher.floating',
title: floatingSwitcherTitle,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
color: "currentColor",
spacing: "spacious",
label: floatingSwitcherTitle
});
},
onClick: function onClick() {
return true;
},
testId: 'image-floating-appearance',
selected: true
}, {
type: 'separator'
});
} else {
var _toolbarButtons;
var switchFromBlockToInline = (0, _utils2.getMediaSingleAndMediaInlineSwitcherDropdown)('block', intl, pluginInjectionApi, hasCaption);
(_toolbarButtons = toolbarButtons).push.apply(_toolbarButtons, [switchFromBlockToInline].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
fullHeight: true
}])));
}
}
}
// A separator is needed regardless switcher is enabled or not
if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && !mauiToolbarSeparatorsUpdateEnabled) {
toolbarButtons.push({
type: 'separator',
fullHeight: true
});
}
// Pixel Entry Toolbar Support
var selection = state.selection;
var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
if (allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing) {
var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
var sizeInput = {
type: 'custom',
fallback: [],
render: function render(editorView) {
if (!editorView || !selectedMediaSingleNode) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_ui.PixelEntry, {
editorView: editorView,
intl: intl,
selectedMediaSingleNode: selectedMediaSingleNode,
pluginInjectionApi: pluginInjectionApi,
pluginState: pluginState,
hoverDecoration: hoverDecoration,
isEditorFullWidthEnabled: options.fullWidthEnabled
});
}
};
if (pluginState.isResizing) {
// If the image is resizing
// then return pixel entry component or full width label as the only toolbar item
if (!selectedMediaSingleNode) {
return [];
}
var layout = selectedMediaSingleNode.node.attrs.layout;
if (layout === 'full-width') {
var fullWidthLabel = {
type: 'custom',
fallback: [],
render: function render() {
return /*#__PURE__*/_react.default.createElement(_ui.FullWidthDisplay, {
intl: intl
});
}
};
return [fullWidthLabel];
}
return [sizeInput];
}
if (!areAnyNewToolbarFlagsEnabled) {
toolbarButtons.push(sizeInput);
toolbarButtons.push({
type: 'separator'
});
}
}
if (!areAnyNewToolbarFlagsEnabled) {
if (allowCommentsOnMedia) {
toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience), {
type: 'separator',
supportsViewMode: true
});
}
if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
toolbarButtons.push({
type: 'custom',
fallback: [],
render: function render(editorView, idx) {
if (editorView !== null && editorView !== void 0 && editorView.state) {
var editLink = function editLink() {
if (editorView) {
var _state = editorView.state,
dispatch = editorView.dispatch;
(0, _linking.showLinkingToolbar)(_state, dispatch);
}
};
var openLink = function openLink() {
if (editorView) {
var _pluginInjectionApi$a6;
var tr = editorView.state.tr,
dispatch = editorView.dispatch;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.VISITED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
})(tr);
dispatch(tr);
return true;
}
};
return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
key: idx,
editorState: editorView.state,
intl: intl,
mediaLinkingState: mediaLinkingState,
onAddLink: editLink,
onEditLink: editLink,
onOpenLink: openLink,
isViewOnly: isViewOnly,
areAnyNewToolbarFlagsEnabled: false
});
}
return null;
},
supportsViewMode: true
});
}
// Image Editing Support
if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_add_image_editing')) {
var _mediaNode$attrs, _mediaNode$attrs2, _mediaNode$attrs3;
var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
// Disable image editing for external media, as we cannot save changes to external images per CORS policy
var isExternal = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
// Disable image editing for gifs as CropperJS does not support gif editing
var isGif = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) === 'image/gif';
if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType) && !isExternal && !isGif) {
toolbarButtons.push({
id: 'editor.media.edit',
testId: 'image-edit-toolbar-button',
type: 'button',
icon: _imageCrop.default,
title: intl.formatMessage(_messages.default.imageEdit),
onClick: function onClick() {
var _handleShowImageEdito;
return (_handleShowImageEdito = handleShowImageEditor({
api: pluginInjectionApi,
mediaPluginState: pluginState
})) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
},
// Making the button more accessible
supportsViewMode: false,
isRadioButton: true,
selected: false
});
}
}
// Preview Support
if (allowImagePreview) {
var _mediaNode$attrs4;
var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs4 = _mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
var _pluginInjectionApi$c2;
toolbarButtons.push({
id: 'editor.media.viewer',
testId: 'file-preview-toolbar-button',
type: 'button',
icon: _maximize.default,
title: intl.formatMessage(_messages2.messages.expand),
onClick: function onClick() {
var _handleShowMediaViewe2;
return (_handleShowMediaViewe2 = handleShowMediaViewer({
api: pluginInjectionApi,
mediaPluginState: pluginState
})) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
},
disabled: (0, _editorPluginConnectivity.isOfflineMode)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c2 === void 0 || (_pluginInjectionApi$c2 = _pluginInjectionApi$c2.sharedState) === null || _pluginInjectionApi$c2 === void 0 || (_pluginInjectionApi$c2 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.mode),
supportsViewMode: true
}, {
type: 'separator',
supportsViewMode: true
});
}
}
}
}
if (isViewOnly) {
var _toolbarButtons2;
(_toolbarButtons2 = toolbarButtons).push.apply(_toolbarButtons2, [{
id: 'editor.media.image.download',
type: 'button',
icon: _download.default,
onClick: function onClick() {
(0, _utils2.downloadMedia)(pluginState, isViewOnly);
return true;
},
disabled: disableDownloadButton,
title: intl.formatMessage(_messages2.messages.download),
supportsViewMode: true
}].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
supportsViewMode: true
}])));
}
if (!areAnyNewToolbarFlagsEnabled) {
var _pluginInjectionApi$a8;
if (allowAltTextOnImages) {
var _pluginInjectionApi$a7;
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
type: 'separator'
});
}
var removeButton = {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _delete.default,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
title: intl.formatMessage(_messages.default.remove),
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions),
testId: 'media-toolbar-remove-button',
supportsViewMode: false
};
var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaSingle
}],
supportsViewMode: true
}]);
items.push({
type: 'separator',
supportsViewMode: false
});
items.push(removeButton);
return items;
} else {
var _toolbarButtons6;
// Preview Support
if (allowAdvancedToolBarOptions && allowImagePreview) {
var _mediaNode2$attrs;
var _selectedMediaSingleNode3 = (0, _utils2.getSelectedMediaSingle)(state);
var _mediaNode2 = _selectedMediaSingleNode3 === null || _selectedMediaSingleNode3 === void 0 ? void 0 : _selectedMediaSingleNode3.node.content.firstChild;
if (!(0, _mediaSingle.isVideo)(_mediaNode2 === null || _mediaNode2 === void 0 || (_mediaNode2$attrs = _mediaNode2.attrs) === null || _mediaNode2$attrs === void 0 ? void 0 : _mediaNode2$attrs.__fileMimeType)) {
var _toolbarButtons3, _pluginInjectionApi$c3;
(_toolbarButtons3 = toolbarButtons).push.apply(_toolbarButtons3, [{
id: 'editor.media.viewer',
testId: 'file-preview-toolbar-button',
type: 'button',
icon: _growDiagonal.default,
title: intl.formatMessage(_messages2.messages.expand),
onClick: function onClick() {
var _handleShowMediaViewe3;
return (_handleShowMediaViewe3 = handleShowMediaViewer({
api: pluginInjectionApi,
mediaPluginState: pluginState
})) !== null && _handleShowMediaViewe3 !== void 0 ? _handleShowMediaViewe3 : false;
},
disabled: (0, _editorPluginConnectivity.isOfflineMode)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c3 === void 0 || (_pluginInjectionApi$c3 = _pluginInjectionApi$c3.sharedState) === null || _pluginInjectionApi$c3 === void 0 || (_pluginInjectionApi$c3 = _pluginInjectionApi$c3.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode),
supportsViewMode: true
}].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
supportsViewMode: true
}])));
}
}
if (allowAdvancedToolBarOptions && allowImageEditing && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_add_image_editing')) {
var _mediaNode3$attrs, _mediaNode3$attrs2, _mediaNode3$attrs3;
var _selectedMediaSingleNode4 = (0, _utils2.getSelectedMediaSingle)(state);
var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
// Disable image editing for external media, as we cannot save changes to external images per CORS policy
var _isExternal = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.type) === 'external';
// Disable image editing for gifs as CropperJS does not support gif editing
var _isGif = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs2 = _mediaNode3.attrs) === null || _mediaNode3$attrs2 === void 0 ? void 0 : _mediaNode3$attrs2.__fileMimeType) === 'image/gif';
if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs3 = _mediaNode3.attrs) === null || _mediaNode3$attrs3 === void 0 ? void 0 : _mediaNode3$attrs3.__fileMimeType) && !_isExternal && !_isGif) {
var _toolbarButtons4;
(_toolbarButtons4 = toolbarButtons).push.apply(_toolbarButtons4, [{
id: 'editor.media.edit',
testId: 'image-edit-toolbar-button',
type: 'button',
icon: _imageCrop.default,
title: intl.formatMessage(_messages.default.imageEdit),
onClick: function onClick() {
var _handleShowImageEdito2;
return (_handleShowImageEdito2 = handleShowImageEditor({
api: pluginInjectionApi,
mediaPluginState: pluginState
})) !== null && _handleShowImageEdito2 !== void 0 ? _handleShowImageEdito2 : false;
},
supportsViewMode: false
}].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
supportsViewMode: false
}])));
}
}
// open link
if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state) && mediaLinkingState && mediaLinkingState.editable) {
var _toolbarButtons5;
(_toolbarButtons5 = toolbarButtons).push.apply(_toolbarButtons5, [(0, _linking3.getOpenLinkToolbarButtonOption)(intl, mediaLinkingState, pluginInjectionApi)].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
supportsViewMode: true
}])));
}
isViewOnly && (_toolbarButtons6 = toolbarButtons).push.apply(_toolbarButtons6, [{
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaSingle
}],
supportsViewMode: true
}].concat((0, _toConsumableArray2.default)(mauiToolbarSeparatorsUpdateEnabled ? [] : [{
type: 'separator',
supportsViewMode: true
}])));
if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
if (!mauiToolbarSeparatorsUpdateEnabled) {
(0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
}
toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience));
}
return toolbarButtons;
}
};
var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
var mediaType = Object.keys(mediaTypeMessages).find(function (key) {
return selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key);
});
return mediaType ? mediaTypeMessages[mediaType] : _messages2.messages.file_unknown_is_selected;
};
var overflowDropdwonBtnTriggerTestId = exports.overflowDropdwonBtnTriggerTestId = 'media-overflow-dropdown-trigger';
var isMediaSelection = function isMediaSelection(selection, nodeType) {
if (selection instanceof _state2.NodeSelection) {
return nodeType.includes(selection.node.type);
}
return false;
};
var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
var _state$schema$nodes = state.schema.nodes,
media = _state$schema$nodes.media,
mediaInline = _state$schema$nodes.mediaInline,
mediaSingle = _state$schema$nodes.mediaSingle,
mediaGroup = _state$schema$nodes.mediaGroup;
var altTextValidator = options.altTextValidator,
allowLinking = options.allowLinking,
allowAltTextOnImages = options.allowAltTextOnImages,
providerFactory = options.providerFactory,
allowMediaInlineImages = options.allowMediaInlineImages,
allowResizing = options.allowResizing,
isViewOnly = options.isViewOnly,
allowResizingInTables = options.allowResizingInTables,
allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
allowPixelResizing = options.allowPixelResizing;
var allowMediaInline = options.allowMediaInline;
allowMediaInline = (0, _fg.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
var mediaPluginState = _pluginKey.stateKey.getState(state);
var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
var _ref4 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
hoverDecoration = _ref4.hoverDecoration;
if (!mediaPluginState) {
return;
}
var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
var isSelectedNodeMediaSingle = state.selection instanceof _state2.NodeSelection && state.selection.node.type === mediaSingle;
if (!isMediaSelection(state.selection, nodeType)) {
return;
}
var baseToolbar = {
title: 'Media floating controls',
nodeType: nodeType,
getDomRef: function getDomRef() {
var _mediaPluginState$ele;
var element = isSelectedNodeMediaSingle ? ((_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(".".concat(_styles.MediaSingleNodeSelector))) || mediaPluginState.element : mediaPluginState.element;
return element;
}
};
if (allowLinking && mediaLinkingState && mediaLinkingState.visible && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
var linkingToolbar = (0, _linking3.getLinkingToolbar)(baseToolbar, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory);
if (linkingToolbar) {
return linkingToolbar;
}
}
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var overflowButtonSelector = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
if (allowAltTextOnImages) {
var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
if (mediaAltTextPluginState.isAltTextEditorOpen) {
var _pluginInjectionApi$f;
return (0, _altText2.getAltTextToolbar)(baseToolbar, {
altTextValidator: altTextValidator,
forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector,
triggerButtonSelector: overflowButtonSelector,
areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
});
}
}
var selection = state.selection;
var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
var mediaPixelResizingPluginState = (0, _pixelResizing.getPluginState)(state);
if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
return (0, _pixelResizing2.getPixelResizingToolbar)(baseToolbar, {
intl: intl,
pluginInjectionApi: pluginInjectionApi,
pluginState: mediaPluginState,
hoverDecoration: hoverDecoration,
isEditorFullWidthEnabled: options.fullWidthEnabled,
triggerButtonSelector: overflowButtonSelector
});
}
}
var items = [];
var parentMediaGroupNode = (0, _utils.findParentNodeOfType)(mediaGroup)(state.selection);
var selectedNodeType;
if (state.selection instanceof _state2.NodeSelection) {
selectedNodeType = state.selection.node.type;
}
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
var mediaOffset = state.selection.$from.parentOffset + 1;
baseToolbar.getDomRef = function () {
var _mediaPluginState$ele2;
var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
};
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);
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
} else {
baseToolbar.getDomRef = function () {
var _mediaPluginState$ele3;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
return element || mediaPluginState.element;
};
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
}
if (!mediaPluginState.isResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
var _pluginInjectionApi$a0, _pluginInjectionApi$a1, _pluginInjectionApi$a10;
if (!(0, _fg.fg)('cc-maui-toolbar-separators-update')) {
(0, _utils2.updateToFullHeightSeparator)(items);
}
var showReplaceOption = !isViewOnly && mediaPluginState.allowsUploads && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_inline_media_replacement') && selectedNodeType === mediaSingle;
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$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions)), (0, _toConsumableArray2.default)((0, _pixelResizing2.getResizeDropdownOption)(options, state, intl.formatMessage, selectedNodeType)));
if (customOptions.length) {
customOptions.push({
type: 'separator'
});
}
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
return {
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
};
};
items.push({
type: 'overflow-dropdown',
id: 'media',
testId: overflowDropdwonBtnTriggerTestId,
options: [].concat((0, _toConsumableArray2.default)(customOptions), (0, _toConsumableArray2.default)(showReplaceOption ? [{
title: intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.replaceMedia),
onClick: function onClick() {
mediaPluginState.showMediaPickerForReplace();
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_upload.default, {
label: ""
}),
testId: 'media-replace-toolbar-button'
}] : []), [_objectSpread({
title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.default.copyToClipboard),
onClick: function onClick() {
var _pluginInjectionApi$c4, _pluginInjectionApi$f3;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType, _analytics.INPUT_METHOD.FLOATING_TB));
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
label: ""
})
}, hoverDecorationProps(nodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.default.delete),
onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
label: ""
})
}, hoverDecorationProps(nodeType))])
});
}
// Ignored via go/ees005
// eslint-disable-next-line no-var
var assistiveMessage = '';
var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
if (selectedMediaSingleNode) {
var selectedMediaNodeView = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content;
if (selectedMediaNodeView) {
var selectedMediaNode = selectedMediaNodeView.firstChild;
var selectedNodeTypeSingle = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.__fileMimeType;
var selectedMediaAlt = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.alt;
assistiveMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(getMediaTypeMessage(selectedNodeTypeSingle), {
name: selectedMediaAlt
});
}
}
var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
items: items,
scrollable: true,
mediaAssistiveMessage: assistiveMessage
});
if (allowResizing && allowPixelResizing) {
return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
});
}
return toolbarConfig;
};