@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
182 lines (179 loc) • 9.09 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
exports.isCaptionNode = isCaptionNode;
exports.isVideo = exports.isMediaSingle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _insert = require("@atlaskit/editor-common/insert");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _selection = require("@atlaskit/editor-common/selection");
var _utils = require("@atlaskit/editor-common/utils");
var _model = require("@atlaskit/editor-prosemirror/model");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _mediaCommon = require("../utils/media-common");
var _isType = require("./is-type");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
return {
action: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
attributes: {
inputMethod: inputMethod,
fileExtension: fileExtension,
type: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE
},
eventType: _analytics.EVENT_TYPE.TRACK
};
};
function shouldAddParagraph(state) {
return (0, _selection.atTheBeginningOfBlock)(state) && !(0, _utils.checkNodeDown)(state.selection, state.doc, _utils.isEmptyParagraph);
}
function insertNodesWithOptionalParagraph(nodes) {
var analyticsAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var editorAnalyticsAPI = arguments.length > 2 ? arguments[2] : undefined;
return function (state, dispatch) {
var tr = state.tr,
schema = state.schema;
var paragraph = schema.nodes.paragraph;
var inputMethod = analyticsAttributes.inputMethod,
fileExtension = analyticsAttributes.fileExtension;
var openEnd = 0;
if (shouldAddParagraph(state)) {
nodes.push(paragraph.create());
openEnd = 1;
}
tr.replaceSelection(new _model.Slice(_model.Fragment.from(nodes), 0, openEnd));
if (inputMethod) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
}
if (dispatch) {
dispatch(tr);
}
return true;
};
}
var isMediaSingle = exports.isMediaSingle = function isMediaSingle(schema, fileMimeType) {
return !!schema.nodes.mediaSingle && (0, _isType.isImage)(fileMimeType);
};
var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI) {
var state = view.state,
dispatch = view.dispatch;
var _state$schema$nodes = state.schema.nodes,
mediaSingle = _state$schema$nodes.mediaSingle,
media = _state$schema$nodes.media;
if (!mediaSingle) {
return false;
}
// if not an image type media node
if (node.type !== media || !(0, _isType.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
return false;
}
var mediaSingleNode = mediaSingle.create({}, node);
var nodes = [mediaSingleNode];
var analyticsAttributes = {
inputMethod: inputMethod,
fileExtension: node.attrs.__fileMimeType
};
return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
};
var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) {
var _state$selection$$fro;
if (collection === undefined) {
return false;
}
var state = view.state,
dispatch = view.dispatch;
var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
var parentNodeType = state.selection.$from.parent.type;
// add undefined as fallback as we don't want media single width to have upper limit as 0
// if widthPluginState.width is 0, default 760 will be used
var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
var fileExtension;
if (mediaState.fileName) {
var extensionIdx = mediaState.fileName.lastIndexOf('.');
fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
}
// should split if media is valid content for the grandparent of the selected node
// and the parent node is a paragraph
if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)({
parentNodeType: parentNodeType,
grandParentNodeType: grandParentNodeType,
content: node
})) {
insertNodesWithOptionalParagraph([node], {
fileExtension: fileExtension,
inputMethod: inputMethod
}, editorAnalyticsAPI)(state, dispatch);
} else {
var tr = null;
if (newInsertionBehaviour) {
tr = (0, _insert.safeInsert)(node, state.selection.from)(state.tr);
}
if (!tr) {
var content = shouldAddParagraph(view.state) ? _model.Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
tr = (0, _utils2.safeInsert)(content, undefined, true)(state.tr);
}
if (inputMethod) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
}
dispatch(tr);
}
return true;
};
var createMediaSingleNode = exports.createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
return function (mediaState) {
var id = mediaState.id,
dimensions = mediaState.dimensions,
contextId = mediaState.contextId,
_mediaState$scaleFact = mediaState.scaleFactor,
scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
var _ref = dimensions || {
height: undefined,
width: undefined
},
width = _ref.width,
height = _ref.height;
var _schema$nodes = schema.nodes,
media = _schema$nodes.media,
mediaSingle = _schema$nodes.mediaSingle;
var scaledWidth = width && Math.round(width / scaleFactor);
var mediaNode = media.create({
id: id,
type: 'file',
collection: collection,
contextId: contextId,
width: scaledWidth,
height: height && Math.round(height / scaleFactor)
});
var mediaSingleAttrs = alignLeftOnInsert ? {
layout: 'align-start'
} : {};
var extendedMediaSingleAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
width: (0, _mediaSingle.getMediaSingleInitialWidth)(scaledWidth, maxWidth, minWidth),
// TODO: change to use enum
widthType: 'pixel'
}) : mediaSingleAttrs;
(0, _mediaCommon.copyOptionalAttrsFromMediaState)(mediaState, mediaNode);
return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
};
};
function isCaptionNode(editorView) {
var $from = editorView.state.selection.$from;
var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));
if (immediateWrapperParentNode && immediateWrapperParentNode.type.name === 'caption') {
return true;
}
return false;
}
var isVideo = exports.isVideo = (0, _memoizeOne.default)(function (fileType) {
return !!fileType && fileType.includes('video');
});