@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
158 lines • 6.25 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, showMediaInsertPopup } from './pm-plugins/actions';
import { createPlugin } from './pm-plugins/main';
import { pluginKey } from './pm-plugins/plugin-key';
import { MediaInsertPicker } from './ui/MediaInsertPicker';
export const mediaInsertPlugin = ({
api,
config
}) => {
return {
name: 'mediaInsert',
pmPlugins() {
return [{
name: 'mediaInsert',
plugin: () => createPlugin()
}];
},
getSharedState(editorState) {
if (!editorState) {
return {
isOpen: false
};
}
const {
isOpen,
mountInfo
} = pluginKey.getState(editorState) || {};
return {
isOpen,
mountInfo
};
},
commands: {
showMediaInsertPopup: mountInfo => ({
tr
}) => showMediaInsertPopup(tr, mountInfo)
},
contentComponent: ({
editorView,
dispatchAnalyticsEvent,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement
}) => {
if (!editorView) {
return null;
}
const insertMediaSingle = ({
mediaState,
inputMethod
}) => {
var _api$media$actions$in;
const {
id,
dimensions,
contextId,
scaleFactor = 1,
fileName,
collection
} = mediaState;
const {
width,
height
} = dimensions || {
height: undefined,
width: undefined
};
const scaledWidth = width && Math.round(width / scaleFactor);
const node = editorView.state.schema.nodes.media.create({
id,
type: 'file',
collection,
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;
};
const insertExternalMediaSingle = ({
url,
alt,
inputMethod
}) => {
var _api$media$actions$in2;
const node = editorView.state.schema.nodes.media.create({
type: 'external',
url,
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;
};
const insertFile = ({
mediaState,
inputMethod,
onMediaStateChanged
}) => {
var _api$media$sharedStat, _api$media$sharedStat2;
const collection = mediaState.collection;
return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 ? 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: () => 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: ({
formatMessage
}) => [{
id: 'media-insert',
title: formatMessage(messages.mediaFiles),
description: formatMessage(messages.mediaFilesDescription),
priority: 400,
keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
icon: () => /*#__PURE__*/React.createElement(IconImages, null),
isDisabledOffline: true,
action(insert) {
var _api$analytics, _api$analytics$action;
// Insert empty string to remove the typeahead raw text
// close the quick insert immediately
const tr = insert('');
api === null || api === void 0 ? void 0 : api.mediaInsert.commands.showMediaInsertPopup()({
tr
});
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.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;
}
}]
}
};
};