@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
150 lines (149 loc) • 5.04 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 (state, dispatch) => {
const {
tr: baseTr
} = state;
let shouldDispatch = false;
const onDispatchAction = tr => {
const selectionJSON = tr.selection.toJSON();
baseTr.setSelection(Selection.fromJSON(baseTr.doc, selectionJSON));
tr.steps.forEach(st => {
baseTr.step(st);
});
shouldDispatch = true;
};
cmds.forEach(cmd => cmd(state, onDispatchAction));
if (dispatch && shouldDispatch) {
dispatch(baseTr);
return true;
}
return false;
};
}
export const isAlignable = align => (state, dispatch) => {
const {
nodes: {
paragraph,
heading
},
marks: {
alignment
}
} = state.schema;
return toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
align
}, [paragraph, heading])(state, dispatch);
};
const changeBlockAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMethod) => (state, dispatch) => {
const {
nodes: {
paragraph,
heading
},
marks: {
alignment
}
} = state.schema;
return withAnalytics(editorAnalyticsApi, {
eventType: EVENT_TYPE.TRACK,
actionSubject: ACTION_SUBJECT.ALIGNMENT,
action: ACTION.UPDATED,
actionSubjectId: ACTION_SUBJECT_ID.TEXT,
attributes: {
alignmentType: align,
inputMethod
}
})(toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
align
}, [paragraph, heading]))(state, dispatch);
};
const changeBlockAlignmentWithAnalyticsTr = (api, align, inputMethod) => ({
tr
}) => {
const {
nodes: {
paragraph,
heading
},
marks: {
alignment
}
} = tr.doc.type.schema;
const alignmentApplied = toggleBlockMarkNext(alignment, () => !align ? undefined : align === 'start' ? false : {
align
}, [paragraph, heading])(tr);
if (alignmentApplied) {
var _api$analytics;
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? 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
}
})(tr);
}
return tr;
};
const changeImageAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMethod) => (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
}
})(changeImageAlignment(align))(state, dispatch);
};
const changeImageAlignmentWithAnalyticsTr = (api, align, inputMethod) => ({
tr
}) => {
const alignmentApplied = changeImageAlignmentNext(align)(tr);
if (alignmentApplied) {
var _api$analytics2;
api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? 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
}
})(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 const changeAlignment = (align, api, inputMethod) => (state, dispatch) => {
var _api$analytics3, _api$analytics4;
return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, align, inputMethod)])(state, dispatch);
};
export const changeAlignmentTr = (api, align, inputMethod) => ({
tr
}) => {
changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod)({
tr
});
changeImageAlignmentWithAnalyticsTr(api, align, inputMethod)({
tr
});
return tr;
};