@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
320 lines (317 loc) • 15.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = _interopRequireDefault(require("react"));
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _actions = require("./pm-plugins/actions");
var _commands = require("./pm-plugins/commands");
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
var _main = _interopRequireDefault(require("./pm-plugins/main"));
var _pluginKey = require("./pm-plugins/plugin-key");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DatePicker = (0, _reactLoadable.default)({
loader: function loader() {
return Promise.resolve().then(function () {
return _interopRequireWildcard(require( /* 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 = (0, _utils2.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(_styles.DateSharedCssClassName.DATE_CONTAINER) ? element : element === null || element === void 0 ? void 0 : element.querySelector(".".concat(_styles.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 = (0, _hooks.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.default.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 ((0, _expValEquals.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((0, _commands.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 ((0, _expValEquals.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((0, _commands.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((0, _commands.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;
}
(0, _actions.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;
}
(0, _actions.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 = _pluginKey.pluginKey.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: (0, _commands.insertDateCommand)(api),
deleteDate: (0, _commands.deleteDateCommand)(api)
},
nodes: function nodes() {
return [{
name: 'date',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.dateWithLocalId : _adfSchema.date
}];
},
pmPlugins: function pmPlugins() {
return [{
name: 'date',
plugin: function plugin(pmPluginFactoryParams) {
DatePicker.preload();
return (0, _main.default)(pmPluginFactoryParams);
}
}, {
name: 'dateKeymap',
plugin: function plugin() {
DatePicker.preload();
return (0, _keymap.default)();
}
}];
},
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.default.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.toolbarInsertBlockMessages.date),
description: formatMessage(_messages.toolbarInsertBlockMessages.dateDescription),
priority: 800,
keywords: ['calendar', 'day', 'time', 'today', '/'],
keyshortcut: '//',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconDate, null);
},
action: function action(insert, state, source) {
var _api$analytics, _api$analytics$attach;
var tr = (0, _actions.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: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
inputMethod: source !== null && source !== void 0 ? source : _analytics.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: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
eventType: _analytics.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, _analytics.INPUT_METHOD.TOOLBAR);
return command(stateFromClickEvent, dispatch);
};
return {
title: 'Date floating toolbar',
nodeType: [state.schema.nodes.date],
getDomRef: function getDomRef(editorView) {
var dateState = _pluginKey.pluginKey.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 = (0, _utils2.findDomRefAtPos)(datePosition, domAtPos);
var isHTMLElement = function isHTMLElement(element) {
return element instanceof HTMLElement;
};
if (isHTMLElement(domRef)) {
return domRef;
}
return undefined;
},
onPositionCalculated: (0, _utils.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: _comment.default,
title: intl.formatMessage(_messages.annotationMessages.createComment),
onClick: onClick,
tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
description: intl.formatMessage(_messages.annotationMessages.createComment)
}),
supportsViewMode: true
}];
}
return [];
}
};
}
}
};
};
var _default = exports.default = datePlugin;