@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
64 lines • 3.89 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics/types/enums';
import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
import ImageIcon from '@atlaskit/icon/core/image';
var previewImageUrls = {
dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK4.png',
light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNH.png'
};
export var MediaInsertQuickInsertMenuItem = function MediaInsertQuickInsertMenuItem(_ref) {
var api = _ref.api,
config = _ref.config;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var _useQuickInsertContex = useQuickInsertContext(),
isOffline = _useQuickInsertContex.isOffline;
var preview = useMemo(function () {
return {
image: previewImageUrls,
attribution: {
name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
}
};
}, [formatMessage]);
var onSelect = useCallback(function (_ref2) {
var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _firstRegisteredTab$r;
var insert = _ref2.insert;
var tr = insert('');
api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || _api$mediaInsert.commands.showMediaInsertPopup()({
tr: tr
});
var initialBuiltInTab = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
var initialBuiltInRank = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK] : MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD];
var firstRegisteredTab = api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs().reduce(function (firstTab, tab) {
var _tab$rank, _firstTab$rank;
return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
}, undefined);
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
action: ACTION.OPENED,
actionSubject: ACTION_SUBJECT.PICKER,
actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT,
openedTab: firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank ? firstRegisteredTab.key : initialBuiltInTab
},
eventType: EVENT_TYPE.UI
})(tr);
return tr;
}, [api, config]);
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
description: formatMessage(messages.mediaFilesDescription),
iconBefore: /*#__PURE__*/React.createElement(ImageIcon, {
label: ""
}),
isDisabled: isOffline,
onSelect: onSelect,
preview: preview,
title: formatMessage(messages.mediaFiles)
});
};