@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
115 lines • 5.06 kB
JavaScript
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
import { Fragment } from '@atlaskit/editor-prosemirror/model';
import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
import { fg } from '@atlaskit/platform-feature-flags';
import { isToday } from '../ui/DatePicker/utils/internal';
import { pluginKey } from './plugin-key';
/** Delete the date and close the datepicker */
export const deleteDateCommand = pluginInjectionApi => ({
tr
}) => {
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
const {
showDatePickerAt
} = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.date) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState()) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
if (!showDatePickerAt) {
return tr;
}
tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
showDatePickerAt: null,
isNew: false
});
return tr;
};
export const insertDateCommand = pluginInjectionApi => ({
date,
inputMethod,
commitMethod,
enterPressed = true
}) => ({
tr
}) => {
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
const {
schema
} = tr.doc.type;
let timestamp;
if (date) {
timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
} else {
timestamp = todayTimestampInUTC();
}
if (inputMethod) {
var _pluginInjectionApi$a, _pluginInjectionApi$a2;
const resolvedInputMethod = fg('platform_editor_element_browser_analytic') ? inputMethod : INPUT_METHOD.QUICK_INSERT;
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.attachAnalyticsEvent({
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: ACTION_SUBJECT_ID.DATE,
eventType: EVENT_TYPE.TRACK,
attributes: {
inputMethod: resolvedInputMethod
}
})(tr);
}
if (commitMethod) {
var _pluginInjectionApi$a3, _pluginInjectionApi$a4;
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : (_pluginInjectionApi$a4 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.attachAnalyticsEvent({
eventType: EVENT_TYPE.TRACK,
action: ACTION.COMMITTED,
actionSubject: ACTION_SUBJECT.DATE,
attributes: {
commitMethod,
isValid: date !== undefined,
isToday: isToday(date)
}
})(tr);
}
const {
showDatePickerAt
} = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.date) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.sharedState.currentState()) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {};
if (!showDatePickerAt) {
const dateNode = schema.nodes.date.createChecked({
timestamp
});
const textNode = schema.text(' ');
const fragment = Fragment.fromArray([dateNode, textNode]);
const {
from,
to
} = tr.selection;
const insertable = canInsert(tr.selection.$from, fragment);
if (!insertable) {
const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
} else {
tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
}
if (tr.docChanged) {
tr.scrollIntoView().setMeta(pluginKey, {
isNew: true
});
}
return tr;
}
if (tr.doc.nodeAt(showDatePickerAt)) {
if (enterPressed) {
// Setting selection to outside the date node causes showDatePickerAt
// to be set to null by the PM plugin (onSelectionChanged), which will
// immediately close the datepicker once a valid date is typed in.
// Adding this check forces it to stay open until the user presses Enter.
tr = tr.setSelection(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
}
tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
timestamp
}).setMeta(pluginKey, {
isNew: false
}).scrollIntoView();
if (!enterPressed) {
tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
}
}
return tr;
};