@atlaskit/editor-plugin-date 15.0.1 → 15.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/datePlugin.js +16 -3
- package/dist/cjs/pm-plugins/actions.js +33 -1
- package/dist/cjs/ui/quick-insert/DateQuickInsertMenuItem.js +42 -0
- package/dist/cjs/ui/quick-insert/getDateQuickInsertComponents.js +28 -0
- package/dist/es2019/datePlugin.js +174 -161
- package/dist/es2019/pm-plugins/actions.js +30 -0
- package/dist/es2019/ui/quick-insert/DateQuickInsertMenuItem.js +37 -0
- package/dist/es2019/ui/quick-insert/getDateQuickInsertComponents.js +18 -0
- package/dist/esm/datePlugin.js +16 -3
- package/dist/esm/pm-plugins/actions.js +32 -0
- package/dist/esm/ui/quick-insert/DateQuickInsertMenuItem.js +34 -0
- package/dist/esm/ui/quick-insert/getDateQuickInsertComponents.js +21 -0
- package/dist/types/datePluginType.d.ts +3 -1
- package/dist/types/pm-plugins/actions.d.ts +7 -0
- package/dist/types/types/index.d.ts +3 -1
- package/dist/types/ui/quick-insert/DateQuickInsertMenuItem.d.ts +6 -0
- package/dist/types/ui/quick-insert/getDateQuickInsertComponents.d.ts +6 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-date
|
|
2
2
|
|
|
3
|
+
## 15.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 15.0.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`7087f393ec725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7087f393ec725) -
|
|
14
|
+
Add the categorized registered Quick Insert browse experience with representative native elements
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 15.0.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/cjs/datePlugin.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
|
|
11
12
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
@@ -18,12 +19,16 @@ var _styles = require("@atlaskit/editor-common/styles");
|
|
|
18
19
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
19
20
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
20
21
|
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
|
|
22
|
+
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
21
23
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
24
|
var _actions = require("./pm-plugins/actions");
|
|
23
25
|
var _commands = require("./pm-plugins/commands");
|
|
24
26
|
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
|
|
25
27
|
var _main = _interopRequireDefault(require("./pm-plugins/main"));
|
|
26
28
|
var _pluginKey = require("./pm-plugins/plugin-key");
|
|
29
|
+
var _getDateQuickInsertComponents = require("./ui/quick-insert/getDateQuickInsertComponents");
|
|
30
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
31
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
32
|
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); }
|
|
28
33
|
var DatePicker = (0, _reactLoadable.default)({
|
|
29
34
|
loader: function loader() {
|
|
@@ -142,6 +147,13 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
142
147
|
var _ref3$config = _ref3.config,
|
|
143
148
|
config = _ref3$config === void 0 ? {} : _ref3$config,
|
|
144
149
|
api = _ref3.api;
|
|
150
|
+
var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
|
|
151
|
+
if (isRegisteredSlashCommandEnabled) {
|
|
152
|
+
var _api$uiControlRegistr;
|
|
153
|
+
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getDateQuickInsertComponents.getDateQuickInsertComponents)({
|
|
154
|
+
api: api
|
|
155
|
+
}));
|
|
156
|
+
}
|
|
145
157
|
return {
|
|
146
158
|
name: 'date',
|
|
147
159
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -209,7 +221,7 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
209
221
|
weekStartDay: config.weekStartDay
|
|
210
222
|
});
|
|
211
223
|
},
|
|
212
|
-
pluginsOptions: {
|
|
224
|
+
pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
|
|
213
225
|
quickInsert: function quickInsert(_ref6) {
|
|
214
226
|
var formatMessage = _ref6.formatMessage;
|
|
215
227
|
return [{
|
|
@@ -237,7 +249,8 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
237
249
|
return tr;
|
|
238
250
|
}
|
|
239
251
|
}];
|
|
240
|
-
}
|
|
252
|
+
}
|
|
253
|
+
}), {}, {
|
|
241
254
|
floatingToolbar: function floatingToolbar(state, intl) {
|
|
242
255
|
var isViewMode = function isViewMode() {
|
|
243
256
|
var _api$editorViewMode;
|
|
@@ -313,7 +326,7 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
313
326
|
}
|
|
314
327
|
};
|
|
315
328
|
}
|
|
316
|
-
}
|
|
329
|
+
})
|
|
317
330
|
};
|
|
318
331
|
};
|
|
319
332
|
var _default = exports.default = datePlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.setDatePickerAt = exports.openDatePicker = exports.focusDateInput = exports.createDate = exports.closeDatePickerWithAnalytics = exports.closeDatePicker = void 0;
|
|
6
|
+
exports.setDatePickerAt = exports.openDatePicker = exports.focusDateInput = exports.createDateAtTransaction = exports.createDate = exports.closeDatePickerWithAnalytics = exports.closeDatePicker = void 0;
|
|
7
7
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
8
8
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
9
9
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
@@ -11,6 +11,12 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
11
11
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
12
12
|
var _internal = require("../ui/DatePicker/utils/internal");
|
|
13
13
|
var _pluginKey = require("./plugin-key");
|
|
14
|
+
/**
|
|
15
|
+
* Creates a date using a new transaction from the editor state.
|
|
16
|
+
*
|
|
17
|
+
* @private
|
|
18
|
+
* @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
|
|
19
|
+
*/
|
|
14
20
|
var createDate = exports.createDate = function createDate(isQuickInsertAction) {
|
|
15
21
|
return function (state) {
|
|
16
22
|
var tr = state.tr;
|
|
@@ -37,6 +43,32 @@ var createDate = exports.createDate = function createDate(isQuickInsertAction) {
|
|
|
37
43
|
return tr.setMeta(_pluginKey.pluginKey, newPluginState);
|
|
38
44
|
};
|
|
39
45
|
};
|
|
46
|
+
var createDateAtTransaction = exports.createDateAtTransaction = function createDateAtTransaction(isQuickInsertAction) {
|
|
47
|
+
return function (tr) {
|
|
48
|
+
var schema = tr.doc.type.schema;
|
|
49
|
+
var annotationMarksForPos = (0, _utils.getAnnotationMarksForPos)(tr.selection.$head);
|
|
50
|
+
var dateNode = schema.nodes.date.createChecked({
|
|
51
|
+
timestamp: (0, _utils.todayTimestampInUTC)()
|
|
52
|
+
}, null, annotationMarksForPos);
|
|
53
|
+
var fragment = _model.Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
|
|
54
|
+
var insertable = (0, _utils2.canInsert)(tr.selection.$from, fragment);
|
|
55
|
+
if (!insertable) {
|
|
56
|
+
var parentSelection = _state.NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
57
|
+
tr.insert(parentSelection.to, fragment).setSelection(_state.NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
58
|
+
} else {
|
|
59
|
+
tr.insert(tr.selection.from, fragment).setSelection(_state.NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
|
|
60
|
+
}
|
|
61
|
+
var newPluginState = {
|
|
62
|
+
isQuickInsertAction: isQuickInsertAction,
|
|
63
|
+
showDatePickerAt: tr.selection.from,
|
|
64
|
+
isNew: true,
|
|
65
|
+
isDateEmpty: false,
|
|
66
|
+
focusDateInput: false,
|
|
67
|
+
isInitialised: true
|
|
68
|
+
};
|
|
69
|
+
return tr.setMeta(_pluginKey.pluginKey, newPluginState);
|
|
70
|
+
};
|
|
71
|
+
};
|
|
40
72
|
|
|
41
73
|
/** Focus input */
|
|
42
74
|
var focusDateInput = exports.focusDateInput = function focusDateInput() {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DateQuickInsertMenuItem = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactIntl = require("react-intl");
|
|
10
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
|
+
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
|
|
13
|
+
var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
|
|
14
|
+
var _actions = require("../../pm-plugins/actions");
|
|
15
|
+
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" != _typeof(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); }
|
|
16
|
+
var DateQuickInsertMenuItem = exports.DateQuickInsertMenuItem = function DateQuickInsertMenuItem(_ref) {
|
|
17
|
+
var api = _ref.api;
|
|
18
|
+
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
19
|
+
formatMessage = _useIntl.formatMessage;
|
|
20
|
+
var onSelect = (0, _react.useCallback)(function (_ref2) {
|
|
21
|
+
var _api$analytics, _api$analytics$attach;
|
|
22
|
+
var insert = _ref2.insert,
|
|
23
|
+
source = _ref2.source;
|
|
24
|
+
var tr = (0, _actions.createDateAtTransaction)(true)(insert(undefined));
|
|
25
|
+
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, {
|
|
26
|
+
action: _analytics.ACTION.INSERTED,
|
|
27
|
+
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
28
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
|
|
29
|
+
attributes: {
|
|
30
|
+
inputMethod: source !== null && source !== void 0 ? source : _analytics.INPUT_METHOD.QUICK_INSERT
|
|
31
|
+
},
|
|
32
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
33
|
+
})(tr);
|
|
34
|
+
return tr;
|
|
35
|
+
}, [api]);
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
|
|
37
|
+
iconBefore: /*#__PURE__*/_react.default.createElement(_quickInsert.IconDate, null),
|
|
38
|
+
onSelect: onSelect,
|
|
39
|
+
shortcut: "//",
|
|
40
|
+
title: formatMessage(_messages.toolbarInsertBlockMessages.date)
|
|
41
|
+
});
|
|
42
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.getDateQuickInsertComponents = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
|
|
10
|
+
var _rank = require("@atlaskit/editor-common/quick-insert/rank");
|
|
11
|
+
var _DateQuickInsertMenuItem = require("./DateQuickInsertMenuItem");
|
|
12
|
+
var getDateQuickInsertComponents = exports.getDateQuickInsertComponents = function getDateQuickInsertComponents(_ref) {
|
|
13
|
+
var api = _ref.api;
|
|
14
|
+
return [{
|
|
15
|
+
key: _keys.DATE_MENU_ITEM.key,
|
|
16
|
+
type: _keys.DATE_MENU_ITEM.type,
|
|
17
|
+
parents: [{
|
|
18
|
+
key: _keys.STRUCTURE_SECTION.key,
|
|
19
|
+
type: _keys.STRUCTURE_SECTION.type,
|
|
20
|
+
rank: _rank.STRUCTURE_SECTION_RANK[_keys.DATE_MENU_ITEM.key]
|
|
21
|
+
}],
|
|
22
|
+
component: function component() {
|
|
23
|
+
return /*#__PURE__*/_react.default.createElement(_DateQuickInsertMenuItem.DateQuickInsertMenuItem, {
|
|
24
|
+
api: api
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
}];
|
|
28
|
+
};
|
|
@@ -10,12 +10,14 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
|
10
10
|
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
|
|
11
11
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
12
12
|
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
13
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
13
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
15
|
import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
|
|
15
16
|
import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
|
|
16
17
|
import keymap from './pm-plugins/keymap';
|
|
17
18
|
import createDatePlugin from './pm-plugins/main';
|
|
18
19
|
import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
|
|
20
|
+
import { getDateQuickInsertComponents } from './ui/quick-insert/getDateQuickInsertComponents';
|
|
19
21
|
const DatePicker = Loadable({
|
|
20
22
|
loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(mod => mod.default),
|
|
21
23
|
loading: () => null
|
|
@@ -129,174 +131,185 @@ function ContentComponent({
|
|
|
129
131
|
const datePlugin = ({
|
|
130
132
|
config = {},
|
|
131
133
|
api
|
|
132
|
-
}) =>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
134
|
+
}) => {
|
|
135
|
+
const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
|
|
136
|
+
if (isRegisteredSlashCommandEnabled) {
|
|
137
|
+
var _api$uiControlRegistr;
|
|
138
|
+
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getDateQuickInsertComponents({
|
|
139
|
+
api
|
|
140
|
+
}));
|
|
141
|
+
}
|
|
142
|
+
return {
|
|
143
|
+
name: 'date',
|
|
144
|
+
getSharedState(editorState) {
|
|
145
|
+
if (!editorState) {
|
|
146
|
+
return {
|
|
147
|
+
showDatePickerAt: null,
|
|
148
|
+
isNew: false,
|
|
149
|
+
focusDateInput: false,
|
|
150
|
+
isInitialised: true
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
const {
|
|
154
|
+
showDatePickerAt,
|
|
155
|
+
isNew,
|
|
156
|
+
focusDateInput,
|
|
157
|
+
isInitialised
|
|
158
|
+
} = datePluginKey.getState(editorState) || {};
|
|
136
159
|
return {
|
|
137
|
-
showDatePickerAt
|
|
138
|
-
isNew:
|
|
139
|
-
focusDateInput:
|
|
140
|
-
isInitialised:
|
|
160
|
+
showDatePickerAt,
|
|
161
|
+
isNew: !!isNew,
|
|
162
|
+
focusDateInput: !!focusDateInput,
|
|
163
|
+
isInitialised: !!isInitialised
|
|
141
164
|
};
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
return keymap();
|
|
165
|
+
},
|
|
166
|
+
commands: {
|
|
167
|
+
insertDate: insertDateCommand(api),
|
|
168
|
+
deleteDate: deleteDateCommand(api)
|
|
169
|
+
},
|
|
170
|
+
nodes() {
|
|
171
|
+
return [{
|
|
172
|
+
name: 'date',
|
|
173
|
+
node: fg('platform_editor_adf_with_localid') ? dateWithLocalId : date
|
|
174
|
+
}];
|
|
175
|
+
},
|
|
176
|
+
pmPlugins() {
|
|
177
|
+
return [{
|
|
178
|
+
name: 'date',
|
|
179
|
+
plugin: pmPluginFactoryParams => {
|
|
180
|
+
DatePicker.preload();
|
|
181
|
+
return createDatePlugin(pmPluginFactoryParams);
|
|
182
|
+
}
|
|
183
|
+
}, {
|
|
184
|
+
name: 'dateKeymap',
|
|
185
|
+
plugin: () => {
|
|
186
|
+
DatePicker.preload();
|
|
187
|
+
return keymap();
|
|
188
|
+
}
|
|
189
|
+
}];
|
|
190
|
+
},
|
|
191
|
+
contentComponent({
|
|
192
|
+
editorView,
|
|
193
|
+
dispatchAnalyticsEvent,
|
|
194
|
+
popupsMountPoint,
|
|
195
|
+
popupsBoundariesElement,
|
|
196
|
+
popupsScrollableElement
|
|
197
|
+
}) {
|
|
198
|
+
if (!editorView) {
|
|
199
|
+
return null;
|
|
178
200
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
const tr = createDate(true)(state);
|
|
215
|
-
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
|
|
216
|
-
action: ACTION.INSERTED,
|
|
217
|
-
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
218
|
-
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
219
|
-
eventType: EVENT_TYPE.TRACK,
|
|
220
|
-
attributes: {
|
|
221
|
-
inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
|
|
201
|
+
return /*#__PURE__*/React.createElement(ContentComponent, {
|
|
202
|
+
dependencyApi: api,
|
|
203
|
+
editorView: editorView,
|
|
204
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
205
|
+
popupsMountPoint: popupsMountPoint,
|
|
206
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
207
|
+
popupsScrollableElement: popupsScrollableElement,
|
|
208
|
+
weekStartDay: config.weekStartDay
|
|
209
|
+
});
|
|
210
|
+
},
|
|
211
|
+
pluginsOptions: {
|
|
212
|
+
...(isRegisteredSlashCommandEnabled ? {} : {
|
|
213
|
+
quickInsert: ({
|
|
214
|
+
formatMessage
|
|
215
|
+
}) => [{
|
|
216
|
+
id: 'date',
|
|
217
|
+
title: formatMessage(messages.date),
|
|
218
|
+
description: formatMessage(messages.dateDescription),
|
|
219
|
+
priority: 800,
|
|
220
|
+
keywords: ['calendar', 'day', 'time', 'today', '/'],
|
|
221
|
+
keyshortcut: '//',
|
|
222
|
+
icon: () => /*#__PURE__*/React.createElement(IconDate, null),
|
|
223
|
+
action(insert, state, source) {
|
|
224
|
+
var _api$analytics, _api$analytics$action, _api$analytics$action2;
|
|
225
|
+
const tr = createDate(true)(state);
|
|
226
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
|
|
227
|
+
action: ACTION.INSERTED,
|
|
228
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
229
|
+
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
230
|
+
eventType: EVENT_TYPE.TRACK,
|
|
231
|
+
attributes: {
|
|
232
|
+
inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
|
|
233
|
+
}
|
|
234
|
+
})(tr);
|
|
235
|
+
return tr;
|
|
222
236
|
}
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
if (!isViewMode()) {
|
|
233
|
-
return undefined;
|
|
234
|
-
}
|
|
235
|
-
const onClick = (stateFromClickEvent, dispatch) => {
|
|
236
|
-
var _api$analytics2, _api$annotation, _api$annotation$actio;
|
|
237
|
-
if (!(api !== null && api !== void 0 && api.annotation)) {
|
|
238
|
-
return true;
|
|
239
|
-
}
|
|
240
|
-
if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
|
|
241
|
-
var _api$analytics3, _api$analytics3$actio;
|
|
242
|
-
api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
|
|
243
|
-
action: ACTION.CLICKED,
|
|
244
|
-
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
245
|
-
actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
|
|
246
|
-
eventType: EVENT_TYPE.UI,
|
|
247
|
-
attributes: {
|
|
248
|
-
source: 'highlightActionsMenu',
|
|
249
|
-
pageMode: 'edit',
|
|
250
|
-
sourceNode: 'date'
|
|
251
|
-
}
|
|
252
|
-
});
|
|
237
|
+
}]
|
|
238
|
+
}),
|
|
239
|
+
floatingToolbar: (state, intl) => {
|
|
240
|
+
const isViewMode = () => {
|
|
241
|
+
var _api$editorViewMode, _api$editorViewMode$s;
|
|
242
|
+
return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
|
|
243
|
+
};
|
|
244
|
+
if (!isViewMode()) {
|
|
245
|
+
return undefined;
|
|
253
246
|
}
|
|
254
|
-
const
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
title: 'Date floating toolbar',
|
|
259
|
-
nodeType: [state.schema.nodes.date],
|
|
260
|
-
getDomRef: editorView => {
|
|
261
|
-
const dateState = datePluginKey.getState(state);
|
|
262
|
-
const datePosition = dateState === null || dateState === void 0 ? void 0 : dateState.showDatePickerAt;
|
|
263
|
-
if (!datePosition) {
|
|
264
|
-
return undefined;
|
|
247
|
+
const onClick = (stateFromClickEvent, dispatch) => {
|
|
248
|
+
var _api$analytics2, _api$annotation, _api$annotation$actio;
|
|
249
|
+
if (!(api !== null && api !== void 0 && api.annotation)) {
|
|
250
|
+
return true;
|
|
265
251
|
}
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
252
|
+
if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
|
|
253
|
+
var _api$analytics3, _api$analytics3$actio;
|
|
254
|
+
api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
|
|
255
|
+
action: ACTION.CLICKED,
|
|
256
|
+
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
257
|
+
actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
|
|
258
|
+
eventType: EVENT_TYPE.UI,
|
|
259
|
+
attributes: {
|
|
260
|
+
source: 'highlightActionsMenu',
|
|
261
|
+
pageMode: 'edit',
|
|
262
|
+
sourceNode: 'date'
|
|
263
|
+
}
|
|
264
|
+
});
|
|
273
265
|
}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
266
|
+
const command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$actio = _api$annotation.actions) === null || _api$annotation$actio === void 0 ? void 0 : _api$annotation$actio.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
|
|
267
|
+
return command(stateFromClickEvent, dispatch);
|
|
268
|
+
};
|
|
269
|
+
return {
|
|
270
|
+
title: 'Date floating toolbar',
|
|
271
|
+
nodeType: [state.schema.nodes.date],
|
|
272
|
+
getDomRef: editorView => {
|
|
273
|
+
const dateState = datePluginKey.getState(state);
|
|
274
|
+
const datePosition = dateState === null || dateState === void 0 ? void 0 : dateState.showDatePickerAt;
|
|
275
|
+
if (!datePosition) {
|
|
276
|
+
return undefined;
|
|
277
|
+
}
|
|
278
|
+
const domAtPos = editorView.domAtPos.bind(editorView);
|
|
279
|
+
const domRef = findDomRefAtPos(datePosition, domAtPos);
|
|
280
|
+
const isHTMLElement = element => {
|
|
281
|
+
return element instanceof HTMLElement;
|
|
282
|
+
};
|
|
283
|
+
if (isHTMLElement(domRef)) {
|
|
284
|
+
return domRef;
|
|
285
|
+
}
|
|
286
|
+
return undefined;
|
|
287
|
+
},
|
|
288
|
+
onPositionCalculated: calculateToolbarPositionAboveSelection('Date floating toolbar'),
|
|
289
|
+
items: node => {
|
|
290
|
+
var _api$annotation2;
|
|
291
|
+
const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
|
|
292
|
+
const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
|
|
293
|
+
const showAnnotation = annotationState && annotationState.isVisible && isViewMode() && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
|
|
294
|
+
if (showAnnotation) {
|
|
295
|
+
return [{
|
|
296
|
+
type: 'button',
|
|
297
|
+
showTitle: true,
|
|
298
|
+
testId: 'add-comment-date-button',
|
|
299
|
+
icon: CommentIcon,
|
|
300
|
+
title: intl.formatMessage(annotationMessages.createComment),
|
|
301
|
+
onClick,
|
|
302
|
+
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
|
|
303
|
+
description: intl.formatMessage(annotationMessages.createComment)
|
|
304
|
+
}),
|
|
305
|
+
supportsViewMode: true
|
|
306
|
+
}];
|
|
307
|
+
}
|
|
308
|
+
return [];
|
|
295
309
|
}
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
};
|
|
310
|
+
};
|
|
311
|
+
}
|
|
299
312
|
}
|
|
300
|
-
}
|
|
301
|
-
}
|
|
313
|
+
};
|
|
314
|
+
};
|
|
302
315
|
export default datePlugin;
|
|
@@ -5,6 +5,12 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
|
5
5
|
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
6
6
|
import { isToday } from '../ui/DatePicker/utils/internal';
|
|
7
7
|
import { pluginKey } from './plugin-key';
|
|
8
|
+
/**
|
|
9
|
+
* Creates a date using a new transaction from the editor state.
|
|
10
|
+
*
|
|
11
|
+
* @private
|
|
12
|
+
* @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
|
|
13
|
+
*/
|
|
8
14
|
export const createDate = isQuickInsertAction => state => {
|
|
9
15
|
const tr = state.tr;
|
|
10
16
|
const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
|
|
@@ -29,6 +35,30 @@ export const createDate = isQuickInsertAction => state => {
|
|
|
29
35
|
};
|
|
30
36
|
return tr.setMeta(pluginKey, newPluginState);
|
|
31
37
|
};
|
|
38
|
+
export const createDateAtTransaction = isQuickInsertAction => tr => {
|
|
39
|
+
const schema = tr.doc.type.schema;
|
|
40
|
+
const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
|
|
41
|
+
const dateNode = schema.nodes.date.createChecked({
|
|
42
|
+
timestamp: todayTimestampInUTC()
|
|
43
|
+
}, null, annotationMarksForPos);
|
|
44
|
+
const fragment = Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
|
|
45
|
+
const insertable = canInsert(tr.selection.$from, fragment);
|
|
46
|
+
if (!insertable) {
|
|
47
|
+
const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
48
|
+
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
49
|
+
} else {
|
|
50
|
+
tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
|
|
51
|
+
}
|
|
52
|
+
const newPluginState = {
|
|
53
|
+
isQuickInsertAction,
|
|
54
|
+
showDatePickerAt: tr.selection.from,
|
|
55
|
+
isNew: true,
|
|
56
|
+
isDateEmpty: false,
|
|
57
|
+
focusDateInput: false,
|
|
58
|
+
isInitialised: true
|
|
59
|
+
};
|
|
60
|
+
return tr.setMeta(pluginKey, newPluginState);
|
|
61
|
+
};
|
|
32
62
|
|
|
33
63
|
/** Focus input */
|
|
34
64
|
export const focusDateInput = () => (state, dispatch) => {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import { IconDate } from '@atlaskit/editor-common/quick-insert';
|
|
6
|
+
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
7
|
+
import { createDateAtTransaction } from '../../pm-plugins/actions';
|
|
8
|
+
export const DateQuickInsertMenuItem = ({
|
|
9
|
+
api
|
|
10
|
+
}) => {
|
|
11
|
+
const {
|
|
12
|
+
formatMessage
|
|
13
|
+
} = useIntl();
|
|
14
|
+
const onSelect = useCallback(({
|
|
15
|
+
insert,
|
|
16
|
+
source
|
|
17
|
+
}) => {
|
|
18
|
+
var _api$analytics, _api$analytics$action, _api$analytics$action2;
|
|
19
|
+
const tr = createDateAtTransaction(true)(insert(undefined));
|
|
20
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
|
|
21
|
+
action: ACTION.INSERTED,
|
|
22
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
23
|
+
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
24
|
+
attributes: {
|
|
25
|
+
inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
|
|
26
|
+
},
|
|
27
|
+
eventType: EVENT_TYPE.TRACK
|
|
28
|
+
})(tr);
|
|
29
|
+
return tr;
|
|
30
|
+
}, [api]);
|
|
31
|
+
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
|
|
32
|
+
iconBefore: /*#__PURE__*/React.createElement(IconDate, null),
|
|
33
|
+
onSelect: onSelect,
|
|
34
|
+
shortcut: "//",
|
|
35
|
+
title: formatMessage(messages.date)
|
|
36
|
+
});
|
|
37
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DATE_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
|
|
3
|
+
import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
|
|
4
|
+
import { DateQuickInsertMenuItem } from './DateQuickInsertMenuItem';
|
|
5
|
+
export const getDateQuickInsertComponents = ({
|
|
6
|
+
api
|
|
7
|
+
}) => [{
|
|
8
|
+
key: DATE_MENU_ITEM.key,
|
|
9
|
+
type: DATE_MENU_ITEM.type,
|
|
10
|
+
parents: [{
|
|
11
|
+
key: STRUCTURE_SECTION.key,
|
|
12
|
+
type: STRUCTURE_SECTION.type,
|
|
13
|
+
rank: STRUCTURE_SECTION_RANK[DATE_MENU_ITEM.key]
|
|
14
|
+
}],
|
|
15
|
+
component: () => /*#__PURE__*/React.createElement(DateQuickInsertMenuItem, {
|
|
16
|
+
api: api
|
|
17
|
+
})
|
|
18
|
+
}];
|
package/dist/esm/datePlugin.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1
4
|
import React from 'react';
|
|
2
5
|
import Loadable from 'react-loadable';
|
|
3
6
|
import { date, dateWithLocalId } from '@atlaskit/adf-schema';
|
|
@@ -10,12 +13,14 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
|
10
13
|
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
|
|
11
14
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
12
15
|
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
16
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
13
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
18
|
import { closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
|
|
15
19
|
import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
|
|
16
20
|
import keymap from './pm-plugins/keymap';
|
|
17
21
|
import createDatePlugin from './pm-plugins/main';
|
|
18
22
|
import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
|
|
23
|
+
import { getDateQuickInsertComponents } from './ui/quick-insert/getDateQuickInsertComponents';
|
|
19
24
|
var DatePicker = Loadable({
|
|
20
25
|
loader: function loader() {
|
|
21
26
|
return import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(function (mod) {
|
|
@@ -131,6 +136,13 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
131
136
|
var _ref3$config = _ref3.config,
|
|
132
137
|
config = _ref3$config === void 0 ? {} : _ref3$config,
|
|
133
138
|
api = _ref3.api;
|
|
139
|
+
var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
|
|
140
|
+
if (isRegisteredSlashCommandEnabled) {
|
|
141
|
+
var _api$uiControlRegistr;
|
|
142
|
+
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getDateQuickInsertComponents({
|
|
143
|
+
api: api
|
|
144
|
+
}));
|
|
145
|
+
}
|
|
134
146
|
return {
|
|
135
147
|
name: 'date',
|
|
136
148
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -198,7 +210,7 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
198
210
|
weekStartDay: config.weekStartDay
|
|
199
211
|
});
|
|
200
212
|
},
|
|
201
|
-
pluginsOptions: {
|
|
213
|
+
pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
|
|
202
214
|
quickInsert: function quickInsert(_ref6) {
|
|
203
215
|
var formatMessage = _ref6.formatMessage;
|
|
204
216
|
return [{
|
|
@@ -226,7 +238,8 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
226
238
|
return tr;
|
|
227
239
|
}
|
|
228
240
|
}];
|
|
229
|
-
}
|
|
241
|
+
}
|
|
242
|
+
}), {}, {
|
|
230
243
|
floatingToolbar: function floatingToolbar(state, intl) {
|
|
231
244
|
var isViewMode = function isViewMode() {
|
|
232
245
|
var _api$editorViewMode;
|
|
@@ -302,7 +315,7 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
302
315
|
}
|
|
303
316
|
};
|
|
304
317
|
}
|
|
305
|
-
}
|
|
318
|
+
})
|
|
306
319
|
};
|
|
307
320
|
};
|
|
308
321
|
export default datePlugin;
|
|
@@ -5,6 +5,12 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
|
5
5
|
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
6
6
|
import { isToday } from '../ui/DatePicker/utils/internal';
|
|
7
7
|
import { pluginKey } from './plugin-key';
|
|
8
|
+
/**
|
|
9
|
+
* Creates a date using a new transaction from the editor state.
|
|
10
|
+
*
|
|
11
|
+
* @private
|
|
12
|
+
* @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
|
|
13
|
+
*/
|
|
8
14
|
export var createDate = function createDate(isQuickInsertAction) {
|
|
9
15
|
return function (state) {
|
|
10
16
|
var tr = state.tr;
|
|
@@ -31,6 +37,32 @@ export var createDate = function createDate(isQuickInsertAction) {
|
|
|
31
37
|
return tr.setMeta(pluginKey, newPluginState);
|
|
32
38
|
};
|
|
33
39
|
};
|
|
40
|
+
export var createDateAtTransaction = function createDateAtTransaction(isQuickInsertAction) {
|
|
41
|
+
return function (tr) {
|
|
42
|
+
var schema = tr.doc.type.schema;
|
|
43
|
+
var annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
|
|
44
|
+
var dateNode = schema.nodes.date.createChecked({
|
|
45
|
+
timestamp: todayTimestampInUTC()
|
|
46
|
+
}, null, annotationMarksForPos);
|
|
47
|
+
var fragment = Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
|
|
48
|
+
var insertable = canInsert(tr.selection.$from, fragment);
|
|
49
|
+
if (!insertable) {
|
|
50
|
+
var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
51
|
+
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
52
|
+
} else {
|
|
53
|
+
tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
|
|
54
|
+
}
|
|
55
|
+
var newPluginState = {
|
|
56
|
+
isQuickInsertAction: isQuickInsertAction,
|
|
57
|
+
showDatePickerAt: tr.selection.from,
|
|
58
|
+
isNew: true,
|
|
59
|
+
isDateEmpty: false,
|
|
60
|
+
focusDateInput: false,
|
|
61
|
+
isInitialised: true
|
|
62
|
+
};
|
|
63
|
+
return tr.setMeta(pluginKey, newPluginState);
|
|
64
|
+
};
|
|
65
|
+
};
|
|
34
66
|
|
|
35
67
|
/** Focus input */
|
|
36
68
|
export var focusDateInput = function focusDateInput() {
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import { IconDate } from '@atlaskit/editor-common/quick-insert';
|
|
6
|
+
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
7
|
+
import { createDateAtTransaction } from '../../pm-plugins/actions';
|
|
8
|
+
export var DateQuickInsertMenuItem = function DateQuickInsertMenuItem(_ref) {
|
|
9
|
+
var api = _ref.api;
|
|
10
|
+
var _useIntl = useIntl(),
|
|
11
|
+
formatMessage = _useIntl.formatMessage;
|
|
12
|
+
var onSelect = useCallback(function (_ref2) {
|
|
13
|
+
var _api$analytics, _api$analytics$attach;
|
|
14
|
+
var insert = _ref2.insert,
|
|
15
|
+
source = _ref2.source;
|
|
16
|
+
var tr = createDateAtTransaction(true)(insert(undefined));
|
|
17
|
+
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, {
|
|
18
|
+
action: ACTION.INSERTED,
|
|
19
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
20
|
+
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
21
|
+
attributes: {
|
|
22
|
+
inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
|
|
23
|
+
},
|
|
24
|
+
eventType: EVENT_TYPE.TRACK
|
|
25
|
+
})(tr);
|
|
26
|
+
return tr;
|
|
27
|
+
}, [api]);
|
|
28
|
+
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
|
|
29
|
+
iconBefore: /*#__PURE__*/React.createElement(IconDate, null),
|
|
30
|
+
onSelect: onSelect,
|
|
31
|
+
shortcut: "//",
|
|
32
|
+
title: formatMessage(messages.date)
|
|
33
|
+
});
|
|
34
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DATE_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
|
|
3
|
+
import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
|
|
4
|
+
import { DateQuickInsertMenuItem } from './DateQuickInsertMenuItem';
|
|
5
|
+
export var getDateQuickInsertComponents = function getDateQuickInsertComponents(_ref) {
|
|
6
|
+
var api = _ref.api;
|
|
7
|
+
return [{
|
|
8
|
+
key: DATE_MENU_ITEM.key,
|
|
9
|
+
type: DATE_MENU_ITEM.type,
|
|
10
|
+
parents: [{
|
|
11
|
+
key: STRUCTURE_SECTION.key,
|
|
12
|
+
type: STRUCTURE_SECTION.type,
|
|
13
|
+
rank: STRUCTURE_SECTION_RANK[DATE_MENU_ITEM.key]
|
|
14
|
+
}],
|
|
15
|
+
component: function component() {
|
|
16
|
+
return /*#__PURE__*/React.createElement(DateQuickInsertMenuItem, {
|
|
17
|
+
api: api
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}];
|
|
21
|
+
};
|
|
@@ -3,12 +3,14 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
|
3
3
|
import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
|
|
4
4
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
5
5
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
6
|
+
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
|
|
6
7
|
import type { DatePluginOptions, DatePluginSharedState, DeleteDate, InsertDate } from './types';
|
|
7
8
|
export type DatePluginDependencies = [
|
|
8
9
|
typeof analyticsPlugin,
|
|
9
10
|
EditorDisabledPlugin,
|
|
10
11
|
OptionalPlugin<AnnotationPlugin>,
|
|
11
|
-
OptionalPlugin<EditorViewModePlugin
|
|
12
|
+
OptionalPlugin<EditorViewModePlugin>,
|
|
13
|
+
OptionalPlugin<UiControlRegistryPlugin>
|
|
12
14
|
];
|
|
13
15
|
export type DatePlugin = NextEditorPlugin<'date', {
|
|
14
16
|
commands: {
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import type { Command, CommandDispatch, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import type { DatePlugin, DateType } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Creates a date using a new transaction from the editor state.
|
|
6
|
+
*
|
|
7
|
+
* @private
|
|
8
|
+
* @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
|
|
9
|
+
*/
|
|
4
10
|
export declare const createDate: (isQuickInsertAction?: boolean) => (state: EditorState) => Transaction;
|
|
11
|
+
export declare const createDateAtTransaction: (isQuickInsertAction?: boolean) => (tr: Transaction) => Transaction;
|
|
5
12
|
/** Focus input */
|
|
6
13
|
export declare const focusDateInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
|
|
7
14
|
export declare const setDatePickerAt: (showDatePickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
|
|
@@ -5,6 +5,7 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
|
5
5
|
import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
|
|
6
6
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
7
7
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
8
|
+
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
|
|
8
9
|
export type DateSegment = 'day' | 'month' | 'year';
|
|
9
10
|
export type DateType = {
|
|
10
11
|
day?: number;
|
|
@@ -42,7 +43,8 @@ export type DatePlugin = NextEditorPlugin<'date', {
|
|
|
42
43
|
typeof analyticsPlugin,
|
|
43
44
|
EditorDisabledPlugin,
|
|
44
45
|
OptionalPlugin<AnnotationPlugin>,
|
|
45
|
-
OptionalPlugin<EditorViewModePlugin
|
|
46
|
+
OptionalPlugin<EditorViewModePlugin>,
|
|
47
|
+
OptionalPlugin<UiControlRegistryPlugin>
|
|
46
48
|
];
|
|
47
49
|
pluginConfiguration: DatePluginOptions | undefined;
|
|
48
50
|
sharedState: DatePluginSharedState;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { DatePlugin } from '../../datePluginType';
|
|
4
|
+
export declare const DateQuickInsertMenuItem: ({ api, }: {
|
|
5
|
+
api: ExtractInjectionAPI<DatePlugin> | undefined;
|
|
6
|
+
}) => React.JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
|
|
3
|
+
import type { DatePlugin } from '../../datePluginType';
|
|
4
|
+
export declare const getDateQuickInsertComponents: ({ api, }: {
|
|
5
|
+
api: ExtractInjectionAPI<DatePlugin> | undefined;
|
|
6
|
+
}) => RegisterMenuItem[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-date",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.3",
|
|
4
4
|
"description": "Date plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,14 +28,17 @@
|
|
|
28
28
|
"@atlaskit/editor-plugin-annotation": "^13.0.0",
|
|
29
29
|
"@atlaskit/editor-plugin-editor-disabled": "^13.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
|
|
31
32
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
32
33
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
34
|
+
"@atlaskit/editor-ui-control-model": "^2.4.0",
|
|
33
35
|
"@atlaskit/form": "^16.1.0",
|
|
34
|
-
"@atlaskit/icon": "^37.
|
|
36
|
+
"@atlaskit/icon": "^37.3.0",
|
|
35
37
|
"@atlaskit/locale": "^5.0.0",
|
|
38
|
+
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
36
39
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
37
40
|
"@atlaskit/textfield": "^10.0.0",
|
|
38
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
41
|
+
"@atlaskit/tmp-editor-statsig": "^140.0.0",
|
|
39
42
|
"@atlaskit/tokens": "^16.3.0",
|
|
40
43
|
"@atlaskit/visually-hidden": "^4.2.0",
|
|
41
44
|
"@babel/runtime": "^7.0.0",
|
|
@@ -50,7 +53,7 @@
|
|
|
50
53
|
"react-intl": "^7.0.0"
|
|
51
54
|
},
|
|
52
55
|
"peerDependencies": {
|
|
53
|
-
"@atlaskit/editor-common": "^117.
|
|
56
|
+
"@atlaskit/editor-common": "^117.2.0",
|
|
54
57
|
"react": "^18.2.0 || ^19.2.0",
|
|
55
58
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
56
59
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|