@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
167 lines (166 loc) • 7.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mediaInsertPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _actions = require("./pm-plugins/actions");
var _main = require("./pm-plugins/main");
var _pluginKey = require("./pm-plugins/plugin-key");
var _MediaInsertPicker = require("./ui/MediaInsertPicker");
var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_ref) {
var api = _ref.api,
config = _ref.config;
return {
name: 'mediaInsert',
pmPlugins: function pmPlugins() {
return [{
name: 'mediaInsert',
plugin: function plugin() {
return (0, _main.createPlugin)();
}
}];
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return {
isOpen: false
};
}
var _ref2 = _pluginKey.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 (0, _actions.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, _analytics.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, _analytics.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, _analytics.INSERT_MEDIA_VIA.LOCAL_UPLOAD)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
};
return /*#__PURE__*/_react.default.createElement(_MediaInsertPicker.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((0, _actions.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.toolbarInsertBlockMessages.mediaFiles),
description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
priority: 400,
keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.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: _analytics.ACTION.OPENED,
actionSubject: _analytics.ACTION_SUBJECT.PICKER,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
},
eventType: _analytics.EVENT_TYPE.UI
})(tr);
return tr;
}
}];
}
}
};
};