@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
229 lines (228 loc) • 10.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { Fragment } from '@atlaskit/editor-prosemirror/model';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
import { currentMediaNodeWithPos } from '../utils/current-media-node';
import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
export var DEFAULT_BORDER_COLOR = '#091e4224';
export var DEFAULT_BORDER_SIZE = 2;
export var 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 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 = removeSelectedNode(tr);
tr = safeInsert(group, nodePos, true)(tr);
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.CHANGED_TYPE,
actionSubject: ACTION_SUBJECT.MEDIA,
eventType: EVENT_TYPE.TRACK,
attributes: {
newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
}
})(tr);
dispatch(tr);
}
return true;
};
};
export var 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 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 = Fragment.from([mediaInlineNode, space]);
var node = paragraph.createChecked({}, content);
var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
var tr = removeMediaGroupNode(state);
tr = safeInsert(node, nodePos, false)(tr);
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.CHANGED_TYPE,
actionSubject: ACTION_SUBJECT.MEDIA,
eventType: EVENT_TYPE.TRACK,
attributes: {
newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
}
})(tr);
dispatch(tr);
}
return true;
};
};
export var removeInlineCard = function removeInlineCard(state, dispatch) {
if (isNodeSelection(state.selection)) {
if (dispatch) {
dispatch(removeSelectedNode(state.tr));
}
return true;
}
return false;
};
export var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
return function (state, dispatch) {
var nodeWithPos = 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 NodeSelection) {
if (state.selection.$anchor.pos === state.selection.from) {
tr.setSelection(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: ACTION.DELETED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
eventType: EVENT_TYPE.TRACK,
attributes: {
previousColor: borderMark.attrs.color,
previousSize: borderMark.attrs.size
}
})(tr);
} else {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.ADDED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
eventType: EVENT_TYPE.TRACK,
attributes: {
color: DEFAULT_BORDER_COLOR,
size: DEFAULT_BORDER_SIZE
}
})(tr);
}
dispatch(tr);
}
return true;
};
};
export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
return function (attrs) {
return function (state, dispatch) {
var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
var nodeWithPos = 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 NodeSelection) {
if (state.selection.$anchor.pos === state.selection.from) {
tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
}
}
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.UPDATED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
eventType: 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;
};
};
};
export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
return function (width, validation, layout) {
return function (state, dispatch) {
var selectedMediaSingleNode = 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(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
var parentNodeType = $pos ? $pos.parent.type.name : undefined;
var payload = 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;
};
};
};