@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
395 lines (392 loc) • 17.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _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; }
import React from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import DeleteIcon from '@atlaskit/icon/core/delete';
import DownloadIcon from '@atlaskit/icon/core/download';
import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
import MaximizeIcon from '@atlaskit/icon/core/maximize';
import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
import { messages } from '@atlaskit/media-ui';
import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
import { getMediaLinkingState } from '../../pm-plugins/linking';
import { currentMediaOrInlineNodeBorderMark } from '../../pm-plugins/utils/current-media-node';
import { isImage } from '../../pm-plugins/utils/is-type';
import ImageBorderItem from '../../ui/ImageBorder';
import { altTextButton } from './alt-text';
import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCardWithAnalytics, setBorderMark, toggleBorderMark } from './commands';
import { shouldShowImageBorder } from './imageBorder';
import { getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
import { LinkToolbarAppearance } from './linking-toolbar-appearance';
import { downloadMedia, getIsDownloadDisabledByDataSecurityPolicy, getMediaSingleAndMediaInlineSwitcherDropdown } from './utils';
import { handleShowMediaViewer } from './index';
export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
var _pluginInjectionApi$a, _pluginInjectionApi$f;
var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
var 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;
var mediaInline = state.schema.nodes.mediaInline;
var mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
var mediaLinkingState = getMediaLinkingState(state);
if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
}
var items = [];
var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var preview = _objectSpread({
id: 'editor.media.viewer',
testId: 'file-preview-toolbar-button',
type: 'button',
icon: areAnyNewToolbarFlagsEnabled ? GrowDiagonalIcon : MaximizeIcon,
title: intl.formatMessage(messages.preview),
onClick: function onClick() {
var _handleShowMediaViewe;
return (_handleShowMediaViewe = handleShowMediaViewer({
mediaPluginState: mediaPluginState,
api: pluginInjectionApi
})) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
}
}, areAnyNewToolbarFlagsEnabled && {
supportsViewMode: true
});
var disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState);
var download = _objectSpread({
id: 'editor.media.card.download',
type: 'button',
icon: DownloadIcon,
onClick: function onClick() {
downloadMedia(mediaPluginState);
return true;
},
disabled: disableDownloadButton,
title: intl.formatMessage(messages.download)
}, areAnyNewToolbarFlagsEnabled && {
supportsViewMode: true
});
if (!areAnyNewToolbarFlagsEnabled) {
items.push({
id: 'editor.media.view.switcher.inline',
type: 'button',
icon: ImageInlineIcon,
selected: true,
disabled: false,
focusEditoronEnter: true,
onClick: function onClick() {
return true;
},
title: intl.formatMessage(cardMessages.inlineTitle),
testId: 'inline-appearance',
className: 'inline-appearance' // a11y. uses to force focus on item
}, {
id: 'editor.media.view.switcher.thumbnail',
type: 'button',
icon: SmartLinkCardIcon,
selected: false,
disabled: false,
focusEditoronEnter: true,
onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
title: intl.formatMessage(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: mediaInline
}]
}, {
type: 'separator'
}, {
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: DeleteIcon,
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(commonMessages.remove),
onClick: removeInlineCardWithAnalytics(editorAnalyticsAPI),
testId: 'media-toolbar-remove-button'
});
} else {
var _options = [{
id: 'editor.media.view.switcher.inline',
title: intl.formatMessage(cardMessages.inlineTitle),
onClick: function onClick() {
return true;
},
selected: true,
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
label: "",
spacing: "spacious"
})
}, {
id: 'editor.media.view.switcher.thumbnail',
title: intl.formatMessage(cardMessages.blockTitle),
onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
icon: /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
label: "",
spacing: "spacious"
})
}];
var switcherDropdown = {
title: intl.formatMessage(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.createElement(ImageInlineIcon, {
label: "",
spacing: "spacious"
});
}
};
items.push(switcherDropdown, {
type: 'separator',
fullHeight: true
}, download, {
type: 'separator',
supportsViewMode: true
}, preview, {
type: 'separator',
fullHeight: true
});
}
return items;
};
var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
var _pluginInjectionApi$w;
var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
var mediaInline = state.schema.nodes.mediaInline;
var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
var inlineImageItems = [];
var isEditorControlsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var isViewOnly = options.isViewOnly,
allowAltTextOnImages = options.allowAltTextOnImages,
allowLinking = options.allowLinking,
allowImagePreview = options.allowImagePreview;
if (shouldShowImageBorder(state)) {
inlineImageItems.push({
type: 'custom',
fallback: [],
render: function render(editorView) {
if (!editorView) {
return null;
}
var dispatch = editorView.dispatch,
state = editorView.state;
var borderMark = currentMediaOrInlineNodeBorderMark(state);
return /*#__PURE__*/React.createElement(ImageBorderItem
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
toggleBorder: function toggleBorder() {
var _pluginInjectionApi$a2;
toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.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$a3;
setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
},
borderMark: borderMark,
intl: intl
});
}
});
if (!isEditorControlsEnabled) {
inlineImageItems.push({
type: 'separator'
});
}
}
var download = {
id: 'editor.media.image.download',
type: 'button',
icon: DownloadIcon,
onClick: function onClick() {
downloadMedia(mediaPluginState, options.isViewOnly);
return true;
},
title: intl.formatMessage(messages.download),
supportsViewMode: true
};
// For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
if (!isEditorControlsEnabled) {
inlineImageItems.push({
id: 'editor.media.convert.mediainline',
type: 'button',
title: mediaInlineImageTitle,
icon: function icon() {
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
color: "currentColor",
spacing: "spacious",
label: mediaInlineImageTitle
});
},
onClick: function onClick() {
return true;
},
selected: true
}, {
id: 'editor.media.convert.mediasingle',
type: 'button',
title: mediaSingleTitle,
icon: function icon() {
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
color: "currentColor",
spacing: "spacious",
label: mediaSingleTitle
});
},
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
}, {
type: 'separator'
}, {
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;
showLinkingToolbar(_state, dispatch);
}
};
var openLink = function openLink() {
if (editorView) {
var _pluginInjectionApi$a4;
var tr = editorView.state.tr,
dispatch = editorView.dispatch;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
eventType: EVENT_TYPE.TRACK,
action: ACTION.VISITED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.LINK
})(tr);
dispatch(tr);
return true;
}
};
return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
key: idx,
editorState: editorView.state,
intl: intl,
mediaLinkingState: mediaLinkingState,
onAddLink: editLink,
onEditLink: editLink,
onOpenLink: openLink,
isInlineNode: true,
isViewOnly: options.isViewOnly,
areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
});
}
return null;
},
supportsViewMode: true
});
} else {
var switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
inlineImageItems.push(switchFromInlineToBlock, {
type: 'separator',
fullHeight: true
});
if (isViewOnly) {
inlineImageItems.push(download, {
type: 'separator',
supportsViewMode: true
});
}
}
//Image Preview
if (allowImagePreview) {
inlineImageItems.push({
id: 'editor.media.viewer',
testId: 'file-preview-toolbar-button',
type: 'button',
icon: isEditorControlsEnabled ? GrowDiagonalIcon : MaximizeIcon,
title: intl.formatMessage(messages.preview),
onClick: function onClick() {
var _handleShowMediaViewe2;
return (_handleShowMediaViewe2 = handleShowMediaViewer({
mediaPluginState: mediaPluginState,
api: pluginInjectionApi
})) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
},
supportsViewMode: true
}, {
type: 'separator',
supportsViewMode: true
});
}
// open link
if (allowLinking && shouldShowMediaLinkToolbar(state) && mediaLinkingState && mediaLinkingState.editable && isEditorControlsEnabled) {
inlineImageItems.push(getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi), {
type: 'separator',
supportsViewMode: true
});
}
if (isViewOnly && !isEditorControlsEnabled) {
inlineImageItems.push(download, {
type: 'separator',
supportsViewMode: true
});
}
if (allowAltTextOnImages && !isEditorControlsEnabled) {
var _pluginInjectionApi$a5;
inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
type: 'separator'
});
}
if (isViewOnly || !isEditorControlsEnabled) {
inlineImageItems.push({
type: 'copy-button',
supportsViewMode: true,
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: mediaInline
}]
});
}
if (!isEditorControlsEnabled) {
inlineImageItems.push({
type: 'separator'
});
inlineImageItems.push({
id: 'editor.media.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: DeleteIcon,
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(commonMessages.remove),
onClick: removeInlineCardWithAnalytics(editorAnalyticsAPI),
testId: 'media-toolbar-remove-button'
});
}
return inlineImageItems;
};