@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
287 lines (285 loc) • 12.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "insertMediaSingleNode", {
enumerable: true,
get: function get() {
return _mediaSingle2.insertMediaSingleNode;
}
});
exports.mediaPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _state = require("@atlaskit/editor-prosemirror/state");
var _mediaCommon = require("@atlaskit/media-common");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _mediaGroup = require("./nodeviews/mediaGroup");
var _mediaInline = require("./nodeviews/mediaInline");
var _mediaNodeView = require("./nodeviews/mediaNodeView");
var _mediaSingle = require("./nodeviews/mediaSingle");
var _altText = require("./pm-plugins/alt-text");
var _keymap = _interopRequireDefault(require("./pm-plugins/alt-text/keymap"));
var _keymap2 = _interopRequireDefault(require("./pm-plugins/keymap"));
var _keymapMediaSingle = _interopRequireDefault(require("./pm-plugins/keymap-media-single"));
var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
var _keymap3 = _interopRequireDefault(require("./pm-plugins/linking/keymap"));
var _main = require("./pm-plugins/main");
var _toolbar = require("./toolbar");
var _MediaPicker = require("./ui/MediaPicker");
var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
var _mediaSingle2 = require("./utils/media-single");
var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
var api = _ref.api,
editorDomElement = _ref.editorDomElement,
appearance = _ref.appearance;
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
mediaState = _useSharedPluginState.mediaState;
if (!mediaState) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
editorDomElement: editorDomElement,
mediaState: mediaState,
appearance: appearance,
api: api
});
};
var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
var _api$featureFlags;
var _ref2$config = _ref2.config,
options = _ref2$config === void 0 ? {} : _ref2$config,
api = _ref2.api;
var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
return {
name: 'media',
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return null;
}
return _main.stateKey.getState(editorState) || null;
},
actions: {
insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod) {
var _api$analytics;
return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
}
},
nodes: function nodes() {
var _ref3 = options || {},
_ref3$allowMediaGroup = _ref3.allowMediaGroup,
allowMediaGroup = _ref3$allowMediaGroup === void 0 ? true : _ref3$allowMediaGroup,
_ref3$allowMediaSingl = _ref3.allowMediaSingle,
allowMediaSingle = _ref3$allowMediaSingl === void 0 ? false : _ref3$allowMediaSingl,
allowCaptions = _ref3.allowCaptions,
mediaFeatureFlags = _ref3.featureFlags;
var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
withCaption: allowCaptions,
withExtendedWidthTypes: true
} : {
withCaption: allowCaptions,
withExtendedWidthTypes: false
};
var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
return [{
name: 'mediaGroup',
node: _adfSchema.mediaGroup
}, {
name: 'mediaSingle',
node: mediaSingleNode
}, {
name: 'media',
node: _adfSchema.media
}, {
name: 'mediaInline',
node: _adfSchema.mediaInline
}].filter(function (node) {
if (node.name === 'mediaGroup') {
return allowMediaGroup;
}
if (node.name === 'mediaSingle') {
return allowMediaSingle;
}
if (node.name === 'mediaInline') {
return allowMediaInline;
}
return true;
});
},
pmPlugins: function pmPlugins() {
var pmPlugins = [{
name: 'media',
plugin: function plugin(_ref4) {
var schema = _ref4.schema,
dispatch = _ref4.dispatch,
getIntl = _ref4.getIntl,
eventDispatcher = _ref4.eventDispatcher,
providerFactory = _ref4.providerFactory,
errorReporter = _ref4.errorReporter,
portalProviderAPI = _ref4.portalProviderAPI,
reactContext = _ref4.reactContext,
dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
return (0, _main.createPlugin)(schema, {
providerFactory: providerFactory,
nodeViews: {
mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
},
errorReporter: errorReporter,
uploadErrorHandler: options && options.uploadErrorHandler,
waitForMediaUpload: options && options.waitForMediaUpload,
customDropzoneContainer: options && options.customDropzoneContainer,
customMediaPicker: options && options.customMediaPicker,
allowResizing: !!(options && options.allowResizing)
}, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
}
}, {
name: 'mediaKeymap',
plugin: function plugin() {
var _api$analytics2;
return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
}
}];
if (options && options.allowMediaSingle) {
pmPlugins.push({
name: 'mediaSingleKeymap',
plugin: function plugin(_ref5) {
var schema = _ref5.schema;
return (0, _keymapMediaSingle.default)(schema);
}
});
}
if (options && options.allowAltTextOnImages) {
pmPlugins.push({
name: 'mediaAltText',
plugin: _altText.createPlugin
});
pmPlugins.push({
name: 'mediaAltTextKeymap',
plugin: function plugin(_ref6) {
var _api$analytics3;
var schema = _ref6.schema;
return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
}
});
}
if (options && options.allowLinking) {
pmPlugins.push({
name: 'mediaLinking',
plugin: function plugin(_ref7) {
var dispatch = _ref7.dispatch;
return (0, _linking.default)(dispatch);
}
});
pmPlugins.push({
name: 'mediaLinkingKeymap',
plugin: function plugin(_ref8) {
var schema = _ref8.schema;
return (0, _keymap3.default)(schema);
}
});
}
pmPlugins.push({
name: 'mediaSelectionHandler',
plugin: function plugin() {
var mediaSelectionHandlerPlugin = new _safePlugin.SafePlugin({
key: new _state.PluginKey('mediaSelectionHandlerPlugin'),
props: {
handleScrollToSelection: function handleScrollToSelection(view) {
var selection = view.state.selection;
if (!(selection instanceof _state.NodeSelection) || selection.node.type.name !== 'media') {
return false;
}
var _view$domAtPos = view.domAtPos(selection.from),
node = _view$domAtPos.node,
offset = _view$domAtPos.offset;
if (
// Is the media element mounted already?
offset === node.childNodes.length) {
// Media is not ready, so stop the scroll request
return true;
}
// Media is ready, keep the scrolling request
return false;
}
}
});
return mediaSelectionHandlerPlugin;
}
});
return pmPlugins;
},
contentComponent: function contentComponent(_ref9) {
var editorView = _ref9.editorView,
appearance = _ref9.appearance;
return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
editorDomElement: editorView.dom,
appearance: appearance,
api: api
});
},
secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
var editorView = _ref10.editorView,
eventDispatcher = _ref10.eventDispatcher,
disabled = _ref10.disabled;
return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
isDisabled: disabled,
isReducedSpacing: true,
api: api
});
},
pluginsOptions: {
quickInsert: function quickInsert(_ref11) {
var formatMessage = _ref11.formatMessage;
return [{
id: 'media',
title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
priority: 400,
keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconImages, null);
},
action: function action(insert, state) {
var _api$analytics4;
var pluginState = _main.stateKey.getState(state);
pluginState === null || pluginState === void 0 || pluginState.showMediaPicker();
var tr = insert('');
api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || _api$analytics4.actions.attachAnalyticsEvent({
action: _analytics.ACTION.OPENED,
actionSubject: _analytics.ACTION_SUBJECT.PICKER,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
},
eventType: _analytics.EVENT_TYPE.UI
})(tr);
return tr;
}
}];
},
floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
return (0, _toolbar.floatingToolbar)(state, intl, {
providerFactory: providerFactory,
allowMediaInline: options && (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', options.featureFlags),
allowResizing: options && options.allowResizing,
allowResizingInTables: options && options.allowResizingInTables,
allowLinking: options && options.allowLinking,
allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
allowAltTextOnImages: options && options.allowAltTextOnImages,
altTextValidator: options && options.altTextValidator,
fullWidthEnabled: options && options.fullWidthEnabled
}, api);
}
}
};
};