@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
556 lines (553 loc) • 28.6 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.floatingToolbar = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _state2 = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
var _mediaUi = require("@atlaskit/media-ui");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _linking = require("../commands/linking");
var _styles = require("../nodeviews/styles");
var _altText = require("../pm-plugins/alt-text");
var _linking2 = require("../pm-plugins/linking");
var _pluginKey = require("../pm-plugins/plugin-key");
var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
var _PixelEntry = require("../ui/PixelEntry");
var _currentMediaNode = require("../utils/current-media-node");
var _mediaSingle2 = require("../utils/media-single");
var _altText2 = require("./alt-text");
var _commands = require("./commands");
var _filePreviewItem = require("./filePreviewItem");
var _imageBorder = require("./imageBorder");
var _layoutGroup = require("./layout-group");
var _linking3 = require("./linking");
var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
var _utils2 = require("./utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 remove = function remove(state, dispatch) {
if (dispatch) {
dispatch((0, _utils.removeSelectedNode)(state.tr));
}
return true;
};
var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
var tr = (0, _utils2.removeMediaGroupNode)(state);
if (dispatch) {
dispatch(tr);
}
return true;
};
var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
var mediaGroup = state.schema.nodes.mediaGroup;
var items = [{
id: 'editor.media.view.switcher',
type: 'dropdown',
title: intl.formatMessage(_mediaUi.messages.changeView),
options: [{
id: 'editor.media.view.switcher.inline',
title: intl.formatMessage(_messages.cardMessages.inline),
selected: false,
disabled: false,
onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI),
testId: 'inline-appearance'
}, {
id: 'editor.media.view.switcher.thumbnail',
title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
selected: true,
disabled: false,
onClick: function onClick() {
return true;
},
testId: 'thumbnail-appearance'
}]
}, {
type: 'separator'
}, {
type: 'custom',
fallback: [],
render: function render() {
return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
key: "editor.media.card.preview",
mediaPluginState: mediaPluginState,
intl: intl
});
}
}, {
type: 'separator'
}, {
id: 'editor.media.card.download',
type: 'button',
icon: _download.default,
onClick: function onClick() {
(0, _utils2.downloadMedia)(mediaPluginState);
return true;
},
title: intl.formatMessage(_mediaUi.messages.download)
}, {
type: 'separator'
}, {
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaGroup
}, {
type: 'separator'
}]
}, {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _remove.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: handleRemoveMediaGroup,
testId: 'media-toolbar-remove-button'
}];
return items;
};
var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
var mediaInline = state.schema.nodes.mediaInline;
var items = [{
id: 'editor.media.view.switcher',
type: 'dropdown',
title: intl.formatMessage(_mediaUi.messages.changeView),
options: [{
id: 'editor.media.view.switcher.inline',
title: intl.formatMessage(_messages.cardMessages.inline),
selected: true,
disabled: false,
onClick: function onClick() {
return true;
},
testId: 'inline-appearance'
}, {
id: 'editor.media.view.switcher.thumbnail',
title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
selected: false,
disabled: false,
onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
testId: 'thumbnail-appearance'
}]
}, {
type: 'separator'
}, {
type: 'custom',
fallback: [],
render: function render() {
return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
key: "editor.media.card.preview",
mediaPluginState: mediaPluginState,
intl: intl
});
}
}, {
type: 'separator'
}, {
id: 'editor.media.card.download',
type: 'button',
icon: _download.default,
onClick: function onClick() {
(0, _utils2.downloadMedia)(mediaPluginState);
return true;
},
title: intl.formatMessage(_mediaUi.messages.download)
}, {
type: 'separator'
}, {
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaInline
}, {
type: 'separator'
}]
}, {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _remove.default,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
title: intl.formatMessage(_messages.default.remove),
onClick: _commands.removeInlineCard,
testId: 'media-toolbar-remove-button'
}];
return items;
};
var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
var _pluginInjectionApi$d;
var mediaSingle = state.schema.nodes.mediaSingle;
var allowResizing = options.allowResizing,
allowLinking = options.allowLinking,
allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
allowResizingInTables = options.allowResizingInTables,
allowAltTextOnImages = options.allowAltTextOnImages;
var toolbarButtons = [];
var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
hoverDecoration = _ref.hoverDecoration;
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.currentMediaNodeBorderMark)(state);
return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
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);
},
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
});
}
});
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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
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);
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.grouped-layout') && selectedNode) {
var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)), selectedNode.node);
if (selectedLayoutIcon && layoutButtons.length) {
var _options = {
render: function render(props) {
return /*#__PURE__*/_react.default.createElement(_layoutGroup.LayoutGroup, (0, _extends2.default)({
layoutButtons: layoutButtons
}, props));
},
width: 156,
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, {
type: 'separator'
}]);
}
} else {
toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
if (layoutButtons.length) {
toolbarButtons.push({
type: 'separator'
});
}
}
// Pixel Entry Toolbar Support
var selection = state.selection;
var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing && (!isWithinTable || allowResizingInTables === true)) {
var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
var sizeInput = {
type: 'custom',
fallback: [],
render: function render(editorView) {
var _widthPlugin$sharedSt2, _pluginInjectionApi$m;
if (!editorView || !selectedMediaSingleNode) {
return null;
}
var state = editorView.state,
dispatch = editorView.dispatch;
var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
if (!selectedMediaNode) {
return null;
}
var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
mediaSingleWidth = _selectedMediaSingleN.width,
widthType = _selectedMediaSingleN.widthType,
layout = _selectedMediaSingleN.layout;
var _selectedMediaNode$at = selectedMediaNode.attrs,
mediaWidth = _selectedMediaNode$at.width,
mediaHeight = _selectedMediaNode$at.height;
var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
var isVideoFile = (0, _mediaSingle2.isVideo)(selectedMediaNode.attrs.__fileMimeType);
var minWidth = (0, _mediaSingle.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
var hasPixelType = widthType === 'pixel';
var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
// get pos of media node
mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
//hasParentNode will return falsey value if selection depth === 0
var isNested = (0, _utils.hasParentNode)(function (n) {
return n.type !== state.schema.nodes.doc;
})(state.selection);
return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
intl: intl,
width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
showMigration: !pluginState.isResizing && !hasPixelType,
mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
minWidth: minWidth,
maxWidth: maxWidth,
onChange: function onChange(valid) {
if (valid) {
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
} else {
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
}
},
onSubmit: function onSubmit(_ref2) {
var _pluginInjectionApi$a4;
var width = _ref2.width,
validation = _ref2.validation;
var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
(0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
},
onMigrate: function onMigrate() {
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
width: pixelWidthFromElement,
widthType: 'pixel'
}));
tr.setMeta('scrollIntoView', false);
tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
dispatch(tr);
}
});
}
};
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(_PixelEntry.FullWidthDisplay, {
intl: intl
});
}
};
return [fullWidthLabel];
}
return [sizeInput];
}
toolbarButtons.push(sizeInput);
toolbarButtons.push({
type: 'separator'
});
}
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$a5;
var tr = editorView.state.tr,
dispatch = editorView.dispatch;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.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
});
}
return null;
}
});
}
}
if (allowAltTextOnImages) {
var _pluginInjectionApi$a6;
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
type: 'separator'
});
}
var removeButton = {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _remove.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: remove,
testId: 'media-toolbar-remove-button'
};
var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaSingle
}, {
type: 'separator'
}]
}, removeButton]);
return items;
};
var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
var _pluginInjectionApi$d2;
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,
allowMediaInline = options.allowMediaInline,
allowResizing = options.allowResizing,
getEditorFeatureFlags = options.getEditorFeatureFlags;
var mediaPluginState = _pluginKey.stateKey.getState(state);
var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
var _ref3 = (_pluginInjectionApi$d2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d2 !== void 0 ? _pluginInjectionApi$d2 : {},
hoverDecoration = _ref3.hoverDecoration;
if (!mediaPluginState) {
return;
}
var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
var baseToolbar = {
title: 'Media floating controls',
nodeType: nodeType,
getDomRef: function getDomRef() {
return mediaPluginState.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;
}
}
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.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector
});
}
}
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$a7;
var mediaOffset = state.selection.$from.parentOffset + 1;
baseToolbar.getDomRef = function () {
var _mediaPluginState$ele;
var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
};
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
var _pluginInjectionApi$a8;
baseToolbar.getDomRef = function () {
var _mediaPluginState$ele2;
var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
return element || mediaPluginState.element;
};
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
} else {
baseToolbar.getDomRef = function () {
var _mediaPluginState$ele3;
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, getEditorFeatureFlags);
}
var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
items: items,
scrollable: true
});
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
});
}
return toolbarConfig;
};