@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
338 lines (337 loc) • 16.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, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
import { Fragment } from '@atlaskit/editor-prosemirror/model';
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { findParentNodeClosestToPos, isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
import { currentMediaInlineNodeWithPos } from '../../pm-plugins/utils/current-media-node';
import { isSelectionMediaSingleNode } from '../../pm-plugins/utils/media-common';
import { changeFromMediaInlineToMediaSingleNode } from '../../pm-plugins/utils/media-single';
import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
export var DEFAULT_BORDER_COLOR = '#091e4224';
export var DEFAULT_BORDER_SIZE = 2;
export var getNodeType = function getNodeType(state) {
var _state$schema$nodes = state.schema.nodes,
mediaSingle = _state$schema$nodes.mediaSingle,
mediaInline = _state$schema$nodes.mediaInline;
return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
};
export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
return function (state, dispatch) {
var _findParentNodeCloses, _parent$content$first, _parent$content$lastC, _parent$content$lastC2;
var _state$schema$nodes2 = state.schema.nodes,
media = _state$schema$nodes2.media,
mediaInline = _state$schema$nodes2.mediaInline,
mediaGroup = _state$schema$nodes2.mediaGroup,
paragraph = _state$schema$nodes2.paragraph,
heading = _state$schema$nodes2.heading;
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 parent = (_findParentNodeCloses = findParentNodeClosestToPos(state.selection.$from, function (node) {
return node.type === paragraph || node.type === heading;
})) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
var tr = state.tr;
var insertPos;
if (!!parent && parent.content.size === 2 && ((_parent$content$first = parent.content.firstChild) === null || _parent$content$first === void 0 ? void 0 : _parent$content$first.type.name) === 'mediaInline' && ((_parent$content$lastC = parent.content.lastChild) === null || _parent$content$lastC === void 0 ? void 0 : _parent$content$lastC.type.name) === 'text' && ((_parent$content$lastC2 = parent.content.lastChild) === null || _parent$content$lastC2 === void 0 || (_parent$content$lastC2 = _parent$content$lastC2.text) === null || _parent$content$lastC2 === void 0 ? void 0 : _parent$content$lastC2.trim()) === '') {
/// Empty paragraph or empty heading
/// Drop the corresponding card on the current line
insertPos = state.tr.doc.resolve(state.selection.from).start() - 1;
if (insertPos < 0) {
return false;
}
tr = tr.delete(insertPos, insertPos + parent.nodeSize);
tr = safeInsert(group, insertPos, false)(tr);
} else {
/// Non-empty paragraph, non-empty heading, or other nodes (e.g., action, list)
/// Drop the corresponding card underneath the current line
insertPos = state.tr.doc.resolve(state.selection.from).end();
tr = removeSelectedNode(tr);
tr = safeInsert(group, insertPos, 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_GROUP,
previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
}
})(tr);
var $endOfNode = tr.doc.resolve(insertPos + 1);
var newSelection = new NodeSelection($endOfNode);
tr.setSelection(newSelection);
forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
dispatch(tr);
}
return true;
};
};
export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
return function (state, dispatch) {
var _state$schema$nodes3 = state.schema.nodes,
media = _state$schema$nodes3.media,
mediaInline = _state$schema$nodes3.mediaInline,
paragraph = _state$schema$nodes3.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();
var tr = removeMediaGroupNode(state);
// Minus 1 to insert the node before the media group
tr = safeInsert(node, nodePos - 1, 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);
var newSelection = NodeSelection.create(tr.doc, nodePos);
tr.setSelection(newSelection);
forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
dispatch(tr);
}
return true;
};
};
export var changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, allowPixelResizing) {
return function (state, dispatch, view) {
var mediaInline = state.schema.nodes.mediaInline;
var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
if (!selectedNode) {
return false;
}
if (view) {
return changeFromMediaInlineToMediaSingleNode(view, selectedNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing);
}
return true;
};
};
export var removeInlineCardWithAnalytics = function removeInlineCardWithAnalytics(editorAnalyticsAPI) {
return withAnalytics(editorAnalyticsAPI, {
action: ACTION.DELETED,
actionSubject: ACTION_SUBJECT.MEDIA_INLINE,
attributes: {
inputMethod: INPUT_METHOD.FLOATING_TB
},
eventType: EVENT_TYPE.TRACK
})(removeInlineCard);
};
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) || currentMediaInlineNodeWithPos(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) {
var type = getNodeType(state);
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: {
type: type,
previousColor: borderMark.attrs.color,
previousSize: borderMark.attrs.size,
mediaType: node.attrs.type
}
})(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: {
type: type,
color: DEFAULT_BORDER_COLOR,
size: DEFAULT_BORDER_SIZE,
mediaType: node.attrs.type
}
})(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) || currentMediaInlineNodeWithPos(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: {
type: getNodeType(state),
mediaType: node.attrs.type,
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 updateMediaSingleWidthTr = function updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout) {
var selectedMediaSingleNode = getSelectedMediaSingle(state);
if (!selectedMediaSingleNode) {
return null;
}
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,
inputMethod: inputMethod,
parentNode: parentNodeType
});
if (payload) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
}
return tr;
};
export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
return function (width, validation, inputMethod, layout) {
return function (state, dispatch) {
var tr = updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout);
if (!tr) {
return false;
}
if (dispatch) {
dispatch(tr);
}
return true;
};
};
};
export var changeMediaSingleToMediaInline = function changeMediaSingleToMediaInline(editorAnalyticsAPI) {
return function (state, dispatch) {
var selectedNodeWithPos = getSelectedMediaSingle(state);
var _state$schema$nodes4 = state.schema.nodes,
mediaInline = _state$schema$nodes4.mediaInline,
paragraph = _state$schema$nodes4.paragraph;
if (!selectedNodeWithPos) {
return false;
}
var mediaSingleNode = selectedNodeWithPos.node;
var mediaNode = mediaSingleNode.firstChild;
if (!mediaNode) {
return false;
}
var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
type: 'image'
}), null, mediaNode.marks);
var space = state.schema.text(' ');
var content = Fragment.from([mediaInlineNode, space]);
var node = paragraph.createChecked({}, content);
var from = state.selection.from;
var tr = state.tr;
tr = removeSelectedNode(tr);
tr = safeInsert(node, from, false)(tr);
// 3 accounts for paragraph 1 + mediaInline size 1 + space 1
tr.setSelection(TextSelection.create(tr.doc, from + 3));
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getChangeMediaAnalytics(ACTION_SUBJECT_ID.MEDIA_SINGLE, ACTION_SUBJECT_ID.MEDIA_INLINE, findChangeFromLocation(state.selection)))(tr);
dispatch(tr);
}
return true;
};
};