@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
160 lines • 7.4 kB
JavaScript
import React from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA } from '@atlaskit/editor-common/analytics';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { IconImages } from '@atlaskit/editor-common/quick-insert';
import { closeMediaInsertPicker as _closeMediaInsertPicker, showMediaInsertPopup as _showMediaInsertPopup } from './pm-plugins/actions';
import { createPlugin } from './pm-plugins/main';
import { pluginKey } from './pm-plugins/plugin-key';
import { MediaInsertPicker } from './ui/MediaInsertPicker';
export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
var api = _ref.api,
config = _ref.config;
return {
name: 'mediaInsert',
pmPlugins: function pmPlugins() {
return [{
name: 'mediaInsert',
plugin: function plugin() {
return createPlugin();
}
}];
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return {
isOpen: false
};
}
var _ref2 = pluginKey.getState(editorState) || {},
isOpen = _ref2.isOpen,
mountInfo = _ref2.mountInfo;
return {
isOpen: isOpen,
mountInfo: mountInfo
};
},
commands: {
showMediaInsertPopup: function showMediaInsertPopup(mountInfo) {
return function (_ref3) {
var tr = _ref3.tr;
return _showMediaInsertPopup(tr, mountInfo);
};
}
},
contentComponent: function contentComponent(_ref4) {
var editorView = _ref4.editorView,
dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
popupsMountPoint = _ref4.popupsMountPoint,
popupsBoundariesElement = _ref4.popupsBoundariesElement,
popupsScrollableElement = _ref4.popupsScrollableElement;
if (!editorView) {
return null;
}
var insertMediaSingle = function insertMediaSingle(_ref5) {
var _api$media$actions$in;
var mediaState = _ref5.mediaState,
inputMethod = _ref5.inputMethod;
var id = mediaState.id,
dimensions = mediaState.dimensions,
contextId = mediaState.contextId,
_mediaState$scaleFact = mediaState.scaleFactor,
scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
fileName = mediaState.fileName,
collection = mediaState.collection;
var _ref6 = dimensions || {
height: undefined,
width: undefined
},
width = _ref6.width,
height = _ref6.height;
var scaledWidth = width && Math.round(width / scaleFactor);
var node = editorView.state.schema.nodes.media.create({
id: id,
type: 'file',
collection: collection,
contextId: contextId,
width: scaledWidth,
height: height && Math.round(height / scaleFactor),
alt: fileName,
__fileMimeType: mediaState.fileMimeType
});
return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
};
var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
var _api$media$actions$in2;
var url = _ref7.url,
alt = _ref7.alt,
inputMethod = _ref7.inputMethod;
var node = editorView.state.schema.nodes.media.create({
type: 'external',
url: url,
alt: alt,
__external: true
});
return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, INSERT_MEDIA_VIA.EXTERNAL_URL)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
};
var insertFile = function insertFile(_ref8) {
var _api$media$sharedStat, _api$media$sharedStat2;
var mediaState = _ref8.mediaState,
inputMethod = _ref8.inputMethod,
onMediaStateChanged = _ref8.onMediaStateChanged;
var collection = mediaState.collection;
return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod, INSERT_MEDIA_VIA.LOCAL_UPLOAD)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
};
return /*#__PURE__*/React.createElement(MediaInsertPicker, {
api: api,
editorView: editorView,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeMediaInsertPicker: function closeMediaInsertPicker() {
return editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
},
insertMediaSingle: insertMediaSingle,
insertExternalMediaSingle: insertExternalMediaSingle,
insertFile: insertFile,
isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks,
customizedUrlValidation: config === null || config === void 0 ? void 0 : config.customizedUrlValidation,
customizedHelperMessage: config === null || config === void 0 ? void 0 : config.customizedHelperMessage
});
},
pluginsOptions: {
quickInsert: function quickInsert(_ref9) {
var formatMessage = _ref9.formatMessage;
return [{
id: 'media-insert',
title: formatMessage(messages.mediaFiles),
description: formatMessage(messages.mediaFilesDescription),
priority: 400,
keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
icon: function icon() {
return /*#__PURE__*/React.createElement(IconImages, null);
},
isDisabledOffline: true,
action: function action(insert) {
var _api$analytics;
// Insert empty string to remove the typeahead raw text
// close the quick insert immediately
var tr = insert('');
api === null || api === void 0 || api.mediaInsert.commands.showMediaInsertPopup()({
tr: tr
});
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
},
eventType: EVENT_TYPE.UI
})(tr);
return tr;
}
}];
}
}
};
};