@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
309 lines (307 loc) • 14.4 kB
JavaScript
import React from 'react';
import Loadable from 'react-loadable';
import { date, dateWithLocalId } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { IconDate } from '@atlaskit/editor-common/quick-insert';
import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import CommentIcon from '@atlaskit/icon/core/comment';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
import keymap from './pm-plugins/keymap';
import createDatePlugin from './pm-plugins/main';
import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
var DatePicker = Loadable({
loader: function loader() {
return import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(function (mod) {
return mod.default;
});
},
loading: function loading() {
return null;
}
});
function getDateNode(editorView, showDatePickerAt) {
if (!editorView) {
return null;
}
var domAtPos = editorView.domAtPos.bind(editorView);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var element = findDomRefAtPos(showDatePickerAt, domAtPos);
// Resolves ED-23702 for when the date is wrapped in an inline comment
var dateNode = element !== null && element !== void 0 && element.classList.contains(DateSharedCssClassName.DATE_CONTAINER) ? element : element === null || element === void 0 ? void 0 : element.querySelector(".".concat(DateSharedCssClassName.DATE_CONTAINER));
return dateNode || element;
}
function ContentComponent(_ref) {
var editorView = _ref.editorView,
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
popupsMountPoint = _ref.popupsMountPoint,
popupsBoundariesElement = _ref.popupsBoundariesElement,
popupsScrollableElement = _ref.popupsScrollableElement,
dependencyApi = _ref.dependencyApi,
weekStartDay = _ref.weekStartDay;
var _useSharedPluginState = useSharedPluginState(dependencyApi, ['date', 'editorDisabled']),
editorDisabledState = _useSharedPluginState.editorDisabledState,
dateState = _useSharedPluginState.dateState;
if (!(dateState !== null && dateState !== void 0 && dateState.showDatePickerAt) || editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) {
return null;
}
var showDatePickerAt = dateState.showDatePickerAt,
isNew = dateState.isNew,
focusDateInput = dateState.focusDateInput;
var dateNode = getDateNode(editorView, showDatePickerAt);
return /*#__PURE__*/React.createElement(DatePicker, {
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
key: showDatePickerAt,
element: dateNode,
isNew: isNew,
autoFocus: focusDateInput
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onDelete: function onDelete() {
var _dependencyApi$core;
if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
return;
}
dependencyApi === null || dependencyApi === void 0 || (_dependencyApi$core = dependencyApi.core) === null || _dependencyApi$core === void 0 || _dependencyApi$core.actions.execute(deleteDateCommand(dependencyApi));
editorView === null || editorView === void 0 || editorView.focus();
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSelect: function onSelect(date, commitMethod) {
var _dependencyApi$core2;
// Undefined means couldn't parse date, null means invalid (out of bounds) date
if (date === undefined || date === null) {
return;
}
if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
return;
}
dependencyApi === null || dependencyApi === void 0 || (_dependencyApi$core2 = dependencyApi.core) === null || _dependencyApi$core2 === void 0 || _dependencyApi$core2.actions.execute(insertDateCommand(dependencyApi)({
date: date,
commitMethod: commitMethod
}));
editorView === null || editorView === void 0 || editorView.focus();
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onTextChanged: function onTextChanged(date) {
var _dependencyApi$core3;
dependencyApi === null || dependencyApi === void 0 || (_dependencyApi$core3 = dependencyApi.core) === null || _dependencyApi$core3 === void 0 || _dependencyApi$core3.actions.execute(insertDateCommand(dependencyApi)({
date: date,
enterPressed: false
}));
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeDatePicker: function closeDatePicker() {
if (!editorView) {
return;
}
_closeDatePicker()(editorView.state, editorView.dispatch);
editorView === null || editorView === void 0 || editorView.focus();
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeDatePickerWithAnalytics: function closeDatePickerWithAnalytics(_ref2) {
var date = _ref2.date;
if (!editorView) {
return;
}
_closeDatePickerWithAnalytics({
date: date
})(editorView.state, editorView.dispatch);
editorView.focus();
},
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
weekStartDay: weekStartDay
});
}
var datePlugin = function datePlugin(_ref3) {
var _ref3$config = _ref3.config,
config = _ref3$config === void 0 ? {} : _ref3$config,
api = _ref3.api;
return {
name: 'date',
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return {
showDatePickerAt: null,
isNew: false,
focusDateInput: false,
isInitialised: true
};
}
var _ref4 = datePluginKey.getState(editorState) || {},
showDatePickerAt = _ref4.showDatePickerAt,
isNew = _ref4.isNew,
focusDateInput = _ref4.focusDateInput,
isInitialised = _ref4.isInitialised;
return {
showDatePickerAt: showDatePickerAt,
isNew: !!isNew,
focusDateInput: !!focusDateInput,
isInitialised: !!isInitialised
};
},
commands: {
insertDate: insertDateCommand(api),
deleteDate: deleteDateCommand(api)
},
nodes: function nodes() {
return [{
name: 'date',
node: fg('platform_editor_adf_with_localid') ? dateWithLocalId : date
}];
},
pmPlugins: function pmPlugins() {
return [{
name: 'date',
plugin: function plugin(pmPluginFactoryParams) {
DatePicker.preload();
return createDatePlugin(pmPluginFactoryParams);
}
}, {
name: 'dateKeymap',
plugin: function plugin() {
DatePicker.preload();
return keymap();
}
}];
},
contentComponent: function contentComponent(_ref5) {
var editorView = _ref5.editorView,
dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
popupsMountPoint = _ref5.popupsMountPoint,
popupsBoundariesElement = _ref5.popupsBoundariesElement,
popupsScrollableElement = _ref5.popupsScrollableElement;
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(ContentComponent, {
dependencyApi: api,
editorView: editorView,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
weekStartDay: config.weekStartDay
});
},
pluginsOptions: {
quickInsert: function quickInsert(_ref6) {
var formatMessage = _ref6.formatMessage;
return [{
id: 'date',
title: formatMessage(messages.date),
description: formatMessage(messages.dateDescription),
priority: 800,
keywords: ['calendar', 'day', 'time', 'today', '/'],
keyshortcut: '//',
icon: function icon() {
return /*#__PURE__*/React.createElement(IconDate, null);
},
action: function action(insert, state, source) {
var _api$analytics, _api$analytics$attach;
var tr = createDate(true)(state);
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || (_api$analytics$attach = _api$analytics.attachAnalyticsEvent) === null || _api$analytics$attach === void 0 || _api$analytics$attach.call(_api$analytics, {
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: ACTION_SUBJECT_ID.DATE,
eventType: EVENT_TYPE.TRACK,
attributes: {
inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
}
})(tr);
return tr;
}
}];
},
floatingToolbar: function floatingToolbar(state, intl) {
var isViewMode = function isViewMode() {
var _api$editorViewMode;
return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
};
if (!isViewMode()) {
return undefined;
}
var onClick = function onClick(stateFromClickEvent, dispatch) {
var _api$analytics2, _api$annotation;
if (!(api !== null && api !== void 0 && api.annotation)) {
return true;
}
if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
var _api$analytics3;
api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BUTTON,
actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
eventType: EVENT_TYPE.UI,
attributes: {
source: 'highlightActionsMenu',
pageMode: 'edit',
sourceNode: 'date'
}
});
}
var command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.actions) === null || _api$annotation === void 0 ? void 0 : _api$annotation.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
return command(stateFromClickEvent, dispatch);
};
return {
title: 'Date floating toolbar',
nodeType: [state.schema.nodes.date],
getDomRef: function getDomRef(editorView) {
var dateState = datePluginKey.getState(state);
var datePosition = dateState === null || dateState === void 0 ? void 0 : dateState.showDatePickerAt;
if (!datePosition) {
return undefined;
}
var domAtPos = editorView.domAtPos.bind(editorView);
var domRef = findDomRefAtPos(datePosition, domAtPos);
var isHTMLElement = function isHTMLElement(element) {
return element instanceof HTMLElement;
};
if (isHTMLElement(domRef)) {
return domRef;
}
return undefined;
},
onPositionCalculated: calculateToolbarPositionAboveSelection('Date floating toolbar'),
items: function items(node) {
var _api$annotation2;
var annotationState = api === null || api === void 0 || (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
var activeCommentMark = node.marks.find(function (mark) {
return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
});
var showAnnotation = annotationState && annotationState.isVisible && isViewMode() && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
if (showAnnotation) {
return [{
type: 'button',
showTitle: true,
testId: 'add-comment-date-button',
icon: CommentIcon,
title: intl.formatMessage(annotationMessages.createComment),
onClick: onClick,
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
description: intl.formatMessage(annotationMessages.createComment)
}),
supportsViewMode: true
}];
}
return [];
}
};
}
}
};
};
export default datePlugin;