UNPKG

@atlaskit/editor-plugin-alignment

Version:

Alignment plugin for @atlaskit/editor-core

150 lines (149 loc) 5.04 kB
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; };