@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
155 lines (154 loc) • 6.13 kB
JavaScript
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { changeImageAlignment, changeImageAlignmentNext, toggleBlockMark, toggleBlockMarkNext } from '@atlaskit/editor-common/commands';
import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
import { Selection } from '@atlaskit/editor-prosemirror/state';
/**
* Iterates over the commands one after the other,
* passes the tr through and dispatches the cumulated transaction
*/
function cascadeCommands(cmds) {
return function (state, dispatch) {
var baseTr = state.tr;
var shouldDispatch = false;
var onDispatchAction = function onDispatchAction(tr) {
var selectionJSON = tr.selection.toJSON();
baseTr.setSelection(Selection.fromJSON(baseTr.doc, selectionJSON));
tr.steps.forEach(function (st) {
baseTr.step(st);
});
shouldDispatch = true;
};
cmds.forEach(function (cmd) {
return cmd(state, onDispatchAction);
});
if (dispatch && shouldDispatch) {
dispatch(baseTr);
return true;
}
return false;
};
}
export var isAlignable = function isAlignable(align) {
return function (state, dispatch) {
var _state$schema = state.schema,
_state$schema$nodes = _state$schema.nodes,
paragraph = _state$schema$nodes.paragraph,
heading = _state$schema$nodes.heading,
alignment = _state$schema.marks.alignment;
return toggleBlockMark(alignment, function () {
return !align ? undefined : align === 'start' ? false : {
align: align
};
}, [paragraph, heading])(state, dispatch);
};
};
var changeBlockAlignmentWithAnalytics = function changeBlockAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
return function (state, dispatch) {
var _state$schema2 = state.schema,
_state$schema2$nodes = _state$schema2.nodes,
paragraph = _state$schema2$nodes.paragraph,
heading = _state$schema2$nodes.heading,
alignment = _state$schema2.marks.alignment;
return withAnalytics(editorAnalyticsApi, {
eventType: EVENT_TYPE.TRACK,
actionSubject: ACTION_SUBJECT.ALIGNMENT,
action: ACTION.UPDATED,
actionSubjectId: ACTION_SUBJECT_ID.TEXT,
attributes: {
alignmentType: align,
inputMethod: inputMethod
}
})(toggleBlockMark(alignment, function () {
return !align ? undefined : align === 'start' ? false : {
align: align
};
}, [paragraph, heading]))(state, dispatch);
};
};
var changeBlockAlignmentWithAnalyticsTr = function changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod) {
return function (_ref) {
var tr = _ref.tr;
var _tr$doc$type$schema = tr.doc.type.schema,
_tr$doc$type$schema$n = _tr$doc$type$schema.nodes,
paragraph = _tr$doc$type$schema$n.paragraph,
heading = _tr$doc$type$schema$n.heading,
alignment = _tr$doc$type$schema.marks.alignment;
var alignmentApplied = toggleBlockMarkNext(alignment, function () {
return !align ? undefined : align === 'start' ? false : {
align: align
};
}, [paragraph, heading])(tr);
if (alignmentApplied) {
var _api$analytics;
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
eventType: EVENT_TYPE.TRACK,
actionSubject: ACTION_SUBJECT.ALIGNMENT,
action: ACTION.UPDATED,
actionSubjectId: ACTION_SUBJECT_ID.TEXT,
attributes: {
alignmentType: align,
inputMethod: inputMethod
}
})(tr);
}
return tr;
};
};
var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
return function (state, dispatch) {
return withAnalytics(editorAnalyticsApi, {
eventType: EVENT_TYPE.TRACK,
actionSubject: ACTION_SUBJECT.ALIGNMENT,
action: ACTION.UPDATED,
actionSubjectId: ACTION_SUBJECT_ID.MEDIA_SINGLE,
attributes: {
alignmentType: align,
inputMethod: inputMethod
}
})(changeImageAlignment(align))(state, dispatch);
};
};
var changeImageAlignmentWithAnalyticsTr = function changeImageAlignmentWithAnalyticsTr(api, align, inputMethod) {
return function (_ref2) {
var tr = _ref2.tr;
var alignmentApplied = changeImageAlignmentNext(align)(tr);
if (alignmentApplied) {
var _api$analytics2;
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
eventType: EVENT_TYPE.TRACK,
actionSubject: ACTION_SUBJECT.ALIGNMENT,
action: ACTION.UPDATED,
actionSubjectId: ACTION_SUBJECT_ID.MEDIA_SINGLE,
attributes: {
alignmentType: align,
inputMethod: inputMethod
}
})(tr);
}
return tr;
};
};
// Remove this when cleaning up platform_editor_toolbar_aifc
// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
/**
*
* @deprecated use changeAlignmentTr instead
*/
export var changeAlignment = function changeAlignment(align, api, inputMethod) {
return function (state, dispatch) {
var _api$analytics3, _api$analytics4;
return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, align, inputMethod)])(state, dispatch);
};
};
export var changeAlignmentTr = function changeAlignmentTr(api, align, inputMethod) {
return function (_ref3) {
var tr = _ref3.tr;
changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod)({
tr: tr
});
changeImageAlignmentWithAnalyticsTr(api, align, inputMethod)({
tr: tr
});
return tr;
};
};