@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
236 lines (234 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _model = require("@atlaskit/editor-prosemirror/model");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _analytics2 = require("../utils/analytics");
var _currentMediaNode = require("../utils/current-media-node");
var _utils2 = require("./utils");
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 DEFAULT_BORDER_COLOR = exports.DEFAULT_BORDER_COLOR = '#091e4224';
var DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_SIZE = 2;
var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
return function (state, dispatch) {
var _state$schema$nodes = state.schema.nodes,
media = _state$schema$nodes.media,
mediaInline = _state$schema$nodes.mediaInline,
mediaGroup = _state$schema$nodes.mediaGroup;
var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
if (!selectedNode) {
return false;
}
var _selectedNode$attrs = selectedNode.attrs,
id = _selectedNode$attrs.id,
type = _selectedNode$attrs.type,
collection = _selectedNode$attrs.collection;
var mediaNode = media.createChecked({
id: id,
type: type,
collection: collection
});
var group = mediaGroup.createChecked({}, mediaNode);
var nodePos = state.tr.doc.resolve(state.selection.from).end();
var tr = state.tr;
tr = (0, _utils.removeSelectedNode)(tr);
tr = (0, _utils.safeInsert)(group, nodePos, true)(tr);
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.CHANGED_TYPE,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
}
})(tr);
dispatch(tr);
}
return true;
};
};
var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
return function (state, dispatch) {
var _state$schema$nodes2 = state.schema.nodes,
media = _state$schema$nodes2.media,
mediaInline = _state$schema$nodes2.mediaInline,
paragraph = _state$schema$nodes2.paragraph;
var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node;
// @ts-ignore - [unblock prosemirror bump] redundant check comparing boolean to media
if (!selectedNode || !selectedNode.type === media) {
return false;
}
var mediaInlineNode = mediaInline.create({
id: selectedNode.attrs.id,
collection: selectedNode.attrs.collection
});
var space = state.schema.text(' ');
var content = _model.Fragment.from([mediaInlineNode, space]);
var node = paragraph.createChecked({}, content);
var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
var tr = (0, _utils2.removeMediaGroupNode)(state);
tr = (0, _utils.safeInsert)(node, nodePos, false)(tr);
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.CHANGED_TYPE,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
}
})(tr);
dispatch(tr);
}
return true;
};
};
var removeInlineCard = exports.removeInlineCard = function removeInlineCard(state, dispatch) {
if ((0, _utils.isNodeSelection)(state.selection)) {
if (dispatch) {
dispatch((0, _utils.removeSelectedNode)(state.tr));
}
return true;
}
return false;
};
var toggleBorderMark = exports.toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
return function (state, dispatch) {
var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
if (!nodeWithPos) {
return false;
}
var node = nodeWithPos.node,
pos = nodeWithPos.pos;
var borderMark = node.marks.find(function (m) {
return m.type.name === 'border';
});
var marks = node.marks.filter(function (m) {
return m.type.name !== 'border';
}).concat(borderMark ? [] : state.schema.marks.border.create({
color: DEFAULT_BORDER_COLOR,
size: DEFAULT_BORDER_SIZE
}));
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
tr.setMeta('scrollIntoView', false);
if (state.selection instanceof _state.NodeSelection) {
if (state.selection.$anchor.pos === state.selection.from) {
tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
}
}
if (dispatch) {
if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.DELETED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
previousColor: borderMark.attrs.color,
previousSize: borderMark.attrs.size
}
})(tr);
} else {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.ADDED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
color: DEFAULT_BORDER_COLOR,
size: DEFAULT_BORDER_SIZE
}
})(tr);
}
dispatch(tr);
}
return true;
};
};
var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyticsAPI) {
return function (attrs) {
return function (state, dispatch) {
var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
if (!nodeWithPos) {
return false;
}
var node = nodeWithPos.node,
pos = nodeWithPos.pos;
var borderMark = (_node$marks$find = node.marks.find(function (m) {
return m.type.name === 'border';
})) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
var marks = node.marks.filter(function (m) {
return m.type.name !== 'border';
}).concat(state.schema.marks.border.create({
color: color,
size: size
}));
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
tr.setMeta('scrollIntoView', false);
if (state.selection instanceof _state.NodeSelection) {
if (state.selection.$anchor.pos === state.selection.from) {
tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
}
}
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.UPDATED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
newColor: color,
newSize: size
}
})(tr);
dispatch(tr);
}
return true;
};
};
};
var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
return function (width, validation, layout) {
return function (state, dispatch) {
var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
if (!selectedMediaSingleNode) {
return false;
}
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
width: width,
widthType: 'pixel',
layout: layout
}));
tr.setMeta('scrollIntoView', false);
tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
var parentNodeType = $pos ? $pos.parent.type.name : undefined;
var payload = (0, _analytics2.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
width: width,
layout: layout,
validation: validation,
parentNode: parentNodeType
});
if (payload) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
}
if (dispatch) {
dispatch(tr);
}
return true;
};
};
};