@atlaskit/editor-core 188.7.5 → 188.7.6
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 +6 -0
- package/dist/cjs/plugins/date/actions.js +8 -114
- package/dist/cjs/plugins/date/commands.js +118 -0
- package/dist/cjs/plugins/date/plugin.js +13 -7
- package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js +34 -33
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/date/actions.js +3 -109
- package/dist/es2019/plugins/date/commands.js +113 -0
- package/dist/es2019/plugins/date/plugin.js +14 -8
- package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js +5 -3
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/date/actions.js +8 -114
- package/dist/esm/plugins/date/commands.js +112 -0
- package/dist/esm/plugins/date/plugin.js +14 -8
- package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js +34 -33
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/date/actions.d.ts +4 -10
- package/dist/types/plugins/date/commands.d.ts +20 -0
- package/dist/types/plugins/date/types.d.ts +4 -4
- package/dist/types-ts4.5/plugins/date/actions.d.ts +4 -10
- package/dist/types-ts4.5/plugins/date/commands.d.ts +22 -0
- package/dist/types-ts4.5/plugins/date/types.d.ts +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
5
|
+
import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { pluginKey } from './pm-plugins/plugin-key';
|
|
7
|
+
import { isToday } from './utils/internal';
|
|
8
|
+
/** Delete the date and close the datepicker */
|
|
9
|
+
export const deleteDateCommand = pluginInjectionApi => ({
|
|
10
|
+
tr
|
|
11
|
+
}) => {
|
|
12
|
+
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
13
|
+
const {
|
|
14
|
+
showDatePickerAt
|
|
15
|
+
} = (_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 : {};
|
|
16
|
+
if (!showDatePickerAt) {
|
|
17
|
+
return tr;
|
|
18
|
+
}
|
|
19
|
+
tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
|
|
20
|
+
showDatePickerAt: null,
|
|
21
|
+
isNew: false
|
|
22
|
+
});
|
|
23
|
+
return tr;
|
|
24
|
+
};
|
|
25
|
+
export const insertDateCommand = pluginInjectionApi => ({
|
|
26
|
+
date,
|
|
27
|
+
inputMethod,
|
|
28
|
+
commitMethod,
|
|
29
|
+
enterPressed = true
|
|
30
|
+
}) => ({
|
|
31
|
+
tr
|
|
32
|
+
}) => {
|
|
33
|
+
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
|
|
34
|
+
const {
|
|
35
|
+
schema
|
|
36
|
+
} = tr.doc.type;
|
|
37
|
+
let timestamp;
|
|
38
|
+
if (date) {
|
|
39
|
+
timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
|
|
40
|
+
} else {
|
|
41
|
+
timestamp = todayTimestampInUTC();
|
|
42
|
+
}
|
|
43
|
+
if (inputMethod) {
|
|
44
|
+
var _pluginInjectionApi$a, _pluginInjectionApi$a2;
|
|
45
|
+
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({
|
|
46
|
+
action: ACTION.INSERTED,
|
|
47
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
48
|
+
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
49
|
+
eventType: EVENT_TYPE.TRACK,
|
|
50
|
+
attributes: {
|
|
51
|
+
inputMethod
|
|
52
|
+
}
|
|
53
|
+
})(tr);
|
|
54
|
+
}
|
|
55
|
+
if (commitMethod) {
|
|
56
|
+
var _pluginInjectionApi$a3, _pluginInjectionApi$a4;
|
|
57
|
+
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({
|
|
58
|
+
eventType: EVENT_TYPE.TRACK,
|
|
59
|
+
action: ACTION.COMMITTED,
|
|
60
|
+
actionSubject: ACTION_SUBJECT.DATE,
|
|
61
|
+
attributes: {
|
|
62
|
+
commitMethod,
|
|
63
|
+
isValid: date !== undefined,
|
|
64
|
+
isToday: isToday(date)
|
|
65
|
+
}
|
|
66
|
+
})(tr);
|
|
67
|
+
}
|
|
68
|
+
const {
|
|
69
|
+
showDatePickerAt
|
|
70
|
+
} = (_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 : {};
|
|
71
|
+
if (!showDatePickerAt) {
|
|
72
|
+
const dateNode = schema.nodes.date.createChecked({
|
|
73
|
+
timestamp
|
|
74
|
+
});
|
|
75
|
+
const textNode = schema.text(' ');
|
|
76
|
+
const fragment = Fragment.fromArray([dateNode, textNode]);
|
|
77
|
+
const {
|
|
78
|
+
from,
|
|
79
|
+
to
|
|
80
|
+
} = tr.selection;
|
|
81
|
+
const insertable = canInsert(tr.selection.$from, fragment);
|
|
82
|
+
if (!insertable) {
|
|
83
|
+
const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
84
|
+
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
85
|
+
} else {
|
|
86
|
+
tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
|
|
87
|
+
}
|
|
88
|
+
if (tr.docChanged) {
|
|
89
|
+
tr.scrollIntoView().setMeta(pluginKey, {
|
|
90
|
+
isNew: true
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
return tr;
|
|
94
|
+
}
|
|
95
|
+
if (tr.doc.nodeAt(showDatePickerAt)) {
|
|
96
|
+
if (enterPressed) {
|
|
97
|
+
// Setting selection to outside the date node causes showDatePickerAt
|
|
98
|
+
// to be set to null by the PM plugin (onSelectionChanged), which will
|
|
99
|
+
// immediately close the datepicker once a valid date is typed in.
|
|
100
|
+
// Adding this check forces it to stay open until the user presses Enter.
|
|
101
|
+
tr = tr.setSelection(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
|
|
102
|
+
}
|
|
103
|
+
tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
|
|
104
|
+
timestamp
|
|
105
|
+
}).setMeta(pluginKey, {
|
|
106
|
+
isNew: false
|
|
107
|
+
}).scrollIntoView();
|
|
108
|
+
if (!enterPressed) {
|
|
109
|
+
tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
return tr;
|
|
113
|
+
};
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
3
|
import Loadable from 'react-loadable';
|
|
4
4
|
import { date } from '@atlaskit/adf-schema';
|
|
5
|
-
import {
|
|
5
|
+
import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './actions';
|
|
6
|
+
import { insertDateCommand, deleteDateCommand } from './commands';
|
|
6
7
|
import createDatePlugin from './pm-plugins/main';
|
|
7
8
|
import keymap from './pm-plugins/keymap';
|
|
8
9
|
import { IconDate } from '@atlaskit/editor-common/quick-insert';
|
|
@@ -49,20 +50,25 @@ function ContentComponent({
|
|
|
49
50
|
isNew: isNew,
|
|
50
51
|
autoFocus: focusDateInput,
|
|
51
52
|
onDelete: () => {
|
|
52
|
-
|
|
53
|
+
dependencyApi === null || dependencyApi === void 0 ? void 0 : dependencyApi.core.actions.execute(deleteDateCommand(dependencyApi));
|
|
53
54
|
editorView.focus();
|
|
54
|
-
return;
|
|
55
55
|
},
|
|
56
56
|
onSelect: (date, commitMethod) => {
|
|
57
57
|
// Undefined means couldn't parse date, null means invalid (out of bounds) date
|
|
58
58
|
if (date === undefined || date === null) {
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
|
-
|
|
61
|
+
dependencyApi === null || dependencyApi === void 0 ? void 0 : dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
|
|
62
|
+
date,
|
|
63
|
+
commitMethod
|
|
64
|
+
}));
|
|
62
65
|
editorView.focus();
|
|
63
66
|
},
|
|
64
67
|
onTextChanged: date => {
|
|
65
|
-
|
|
68
|
+
dependencyApi === null || dependencyApi === void 0 ? void 0 : dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
|
|
69
|
+
date,
|
|
70
|
+
enterPressed: false
|
|
71
|
+
}));
|
|
66
72
|
},
|
|
67
73
|
closeDatePicker: () => {
|
|
68
74
|
closeDatePicker()(editorView.state, dispatch);
|
|
@@ -104,9 +110,9 @@ const datePlugin = ({
|
|
|
104
110
|
focusDateInput: !!focusDateInput
|
|
105
111
|
};
|
|
106
112
|
},
|
|
107
|
-
|
|
108
|
-
insertDate,
|
|
109
|
-
deleteDate
|
|
113
|
+
commands: {
|
|
114
|
+
insertDate: insertDateCommand(api),
|
|
115
|
+
deleteDate: deleteDateCommand(api)
|
|
110
116
|
},
|
|
111
117
|
nodes() {
|
|
112
118
|
return [{
|
|
@@ -191,10 +191,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
191
191
|
_defineProperty(this, "createDate", inputMethod => {
|
|
192
192
|
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
193
193
|
const {
|
|
194
|
-
pluginInjectionApi
|
|
195
|
-
editorView
|
|
194
|
+
pluginInjectionApi
|
|
196
195
|
} = this.props;
|
|
197
|
-
|
|
196
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
|
|
197
|
+
inputMethod
|
|
198
|
+
}));
|
|
199
|
+
return true;
|
|
198
200
|
});
|
|
199
201
|
_defineProperty(this, "createPlaceholderText", () => {
|
|
200
202
|
const {
|
|
@@ -2,9 +2,8 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
5
|
-
import { ACTION, ACTION_SUBJECT,
|
|
5
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
6
|
import { isToday } from './utils/internal';
|
|
7
|
-
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
8
7
|
export var createDate = function createDate(isQuickInsertAction) {
|
|
9
8
|
return function (insert, state) {
|
|
10
9
|
var dateNode = state.schema.nodes.date.createChecked({
|
|
@@ -25,25 +24,6 @@ export var createDate = function createDate(isQuickInsertAction) {
|
|
|
25
24
|
};
|
|
26
25
|
};
|
|
27
26
|
|
|
28
|
-
/** Delete the date and close the datepicker */
|
|
29
|
-
export var deleteDate = function deleteDate() {
|
|
30
|
-
return function (state, dispatch) {
|
|
31
|
-
var pluginState = pluginKey.getState(state);
|
|
32
|
-
if (!pluginState || pluginState.showDatePickerAt === null) {
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
var showDatePickerAt = pluginState.showDatePickerAt;
|
|
36
|
-
var tr = state.tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
|
|
37
|
-
showDatePickerAt: null,
|
|
38
|
-
isNew: false
|
|
39
|
-
});
|
|
40
|
-
if (dispatch) {
|
|
41
|
-
dispatch(tr);
|
|
42
|
-
}
|
|
43
|
-
return true;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
|
|
47
27
|
/** Focus input */
|
|
48
28
|
export var focusDateInput = function focusDateInput() {
|
|
49
29
|
return function (state, dispatch) {
|
|
@@ -61,92 +41,6 @@ export var focusDateInput = function focusDateInput() {
|
|
|
61
41
|
return true;
|
|
62
42
|
};
|
|
63
43
|
};
|
|
64
|
-
export var insertDate = function insertDate(date, inputMethod, commitMethod) {
|
|
65
|
-
var enterPressed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
|
66
|
-
var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
|
|
67
|
-
return function (state, dispatch) {
|
|
68
|
-
var schema = state.schema;
|
|
69
|
-
var timestamp;
|
|
70
|
-
if (date) {
|
|
71
|
-
timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
|
|
72
|
-
} else {
|
|
73
|
-
timestamp = todayTimestampInUTC();
|
|
74
|
-
}
|
|
75
|
-
var tr = state.tr;
|
|
76
|
-
if (inputMethod) {
|
|
77
|
-
var _pluginInjectionApi$a;
|
|
78
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
|
|
79
|
-
action: ACTION.INSERTED,
|
|
80
|
-
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
81
|
-
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
82
|
-
eventType: EVENT_TYPE.TRACK,
|
|
83
|
-
attributes: {
|
|
84
|
-
inputMethod: inputMethod
|
|
85
|
-
}
|
|
86
|
-
})(tr);
|
|
87
|
-
}
|
|
88
|
-
if (commitMethod) {
|
|
89
|
-
var _pluginInjectionApi$a2;
|
|
90
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a2.actions) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.attachAnalyticsEvent({
|
|
91
|
-
eventType: EVENT_TYPE.TRACK,
|
|
92
|
-
action: ACTION.COMMITTED,
|
|
93
|
-
actionSubject: ACTION_SUBJECT.DATE,
|
|
94
|
-
attributes: {
|
|
95
|
-
commitMethod: commitMethod,
|
|
96
|
-
isValid: date !== undefined,
|
|
97
|
-
isToday: isToday(date)
|
|
98
|
-
}
|
|
99
|
-
})(tr);
|
|
100
|
-
}
|
|
101
|
-
var _ref = pluginKey.getState(state) || {},
|
|
102
|
-
showDatePickerAt = _ref.showDatePickerAt;
|
|
103
|
-
if (!showDatePickerAt) {
|
|
104
|
-
var dateNode = schema.nodes.date.createChecked({
|
|
105
|
-
timestamp: timestamp
|
|
106
|
-
});
|
|
107
|
-
var textNode = state.schema.text(' ');
|
|
108
|
-
var fragment = Fragment.fromArray([dateNode, textNode]);
|
|
109
|
-
var _state$selection = state.selection,
|
|
110
|
-
from = _state$selection.from,
|
|
111
|
-
to = _state$selection.to;
|
|
112
|
-
var insertable = canInsert(tr.selection.$from, fragment);
|
|
113
|
-
if (!insertable) {
|
|
114
|
-
var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
115
|
-
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
116
|
-
} else {
|
|
117
|
-
tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
|
|
118
|
-
}
|
|
119
|
-
if (dispatch) {
|
|
120
|
-
dispatch(tr.scrollIntoView().setMeta(pluginKey, {
|
|
121
|
-
isNew: true
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
return true;
|
|
125
|
-
}
|
|
126
|
-
if (state.doc.nodeAt(showDatePickerAt)) {
|
|
127
|
-
if (enterPressed) {
|
|
128
|
-
// Setting selection to outside the date node causes showDatePickerAt
|
|
129
|
-
// to be set to null by the PM plugin (onSelectionChanged), which will
|
|
130
|
-
// immediately close the datepicker once a valid date is typed in.
|
|
131
|
-
// Adding this check forces it to stay open until the user presses Enter.
|
|
132
|
-
tr = tr.setSelection(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
|
|
133
|
-
}
|
|
134
|
-
tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
|
|
135
|
-
timestamp: timestamp
|
|
136
|
-
}).setMeta(pluginKey, {
|
|
137
|
-
isNew: false
|
|
138
|
-
}).scrollIntoView();
|
|
139
|
-
if (!enterPressed) {
|
|
140
|
-
tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
|
|
141
|
-
}
|
|
142
|
-
if (dispatch) {
|
|
143
|
-
dispatch(tr);
|
|
144
|
-
}
|
|
145
|
-
return true;
|
|
146
|
-
}
|
|
147
|
-
return false;
|
|
148
|
-
};
|
|
149
|
-
};
|
|
150
44
|
export var setDatePickerAt = function setDatePickerAt(showDatePickerAt) {
|
|
151
45
|
return function (state, dispatch) {
|
|
152
46
|
dispatch(state.tr.setMeta(pluginKey, {
|
|
@@ -157,8 +51,8 @@ export var setDatePickerAt = function setDatePickerAt(showDatePickerAt) {
|
|
|
157
51
|
};
|
|
158
52
|
export var closeDatePicker = function closeDatePicker() {
|
|
159
53
|
return function (state, dispatch) {
|
|
160
|
-
var
|
|
161
|
-
showDatePickerAt =
|
|
54
|
+
var _ref = pluginKey.getState(state) || {},
|
|
55
|
+
showDatePickerAt = _ref.showDatePickerAt;
|
|
162
56
|
if (!dispatch) {
|
|
163
57
|
return false;
|
|
164
58
|
}
|
|
@@ -172,11 +66,11 @@ export var closeDatePicker = function closeDatePicker() {
|
|
|
172
66
|
return false;
|
|
173
67
|
};
|
|
174
68
|
};
|
|
175
|
-
export var closeDatePickerWithAnalytics = function closeDatePickerWithAnalytics(
|
|
176
|
-
var _pluginInjectionApi$
|
|
177
|
-
var date =
|
|
178
|
-
pluginInjectionApi =
|
|
179
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
69
|
+
export var closeDatePickerWithAnalytics = function closeDatePickerWithAnalytics(_ref2) {
|
|
70
|
+
var _pluginInjectionApi$a;
|
|
71
|
+
var date = _ref2.date,
|
|
72
|
+
pluginInjectionApi = _ref2.pluginInjectionApi;
|
|
73
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
|
|
180
74
|
eventType: EVENT_TYPE.TRACK,
|
|
181
75
|
action: ACTION.COMMITTED,
|
|
182
76
|
actionSubject: ACTION_SUBJECT.DATE,
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { canInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
5
|
+
import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { pluginKey } from './pm-plugins/plugin-key';
|
|
7
|
+
import { isToday } from './utils/internal';
|
|
8
|
+
/** Delete the date and close the datepicker */
|
|
9
|
+
export var deleteDateCommand = function deleteDateCommand(pluginInjectionApi) {
|
|
10
|
+
return function (_ref) {
|
|
11
|
+
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
12
|
+
var tr = _ref.tr;
|
|
13
|
+
var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.date) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState()) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
|
|
14
|
+
showDatePickerAt = _ref2.showDatePickerAt;
|
|
15
|
+
if (!showDatePickerAt) {
|
|
16
|
+
return tr;
|
|
17
|
+
}
|
|
18
|
+
tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
|
|
19
|
+
showDatePickerAt: null,
|
|
20
|
+
isNew: false
|
|
21
|
+
});
|
|
22
|
+
return tr;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export var insertDateCommand = function insertDateCommand(pluginInjectionApi) {
|
|
26
|
+
return function (_ref3) {
|
|
27
|
+
var date = _ref3.date,
|
|
28
|
+
inputMethod = _ref3.inputMethod,
|
|
29
|
+
commitMethod = _ref3.commitMethod,
|
|
30
|
+
_ref3$enterPressed = _ref3.enterPressed,
|
|
31
|
+
enterPressed = _ref3$enterPressed === void 0 ? true : _ref3$enterPressed;
|
|
32
|
+
return function (_ref4) {
|
|
33
|
+
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
|
|
34
|
+
var tr = _ref4.tr;
|
|
35
|
+
var schema = tr.doc.type.schema;
|
|
36
|
+
var timestamp;
|
|
37
|
+
if (date) {
|
|
38
|
+
timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
|
|
39
|
+
} else {
|
|
40
|
+
timestamp = todayTimestampInUTC();
|
|
41
|
+
}
|
|
42
|
+
if (inputMethod) {
|
|
43
|
+
var _pluginInjectionApi$a;
|
|
44
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
|
|
45
|
+
action: ACTION.INSERTED,
|
|
46
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
47
|
+
actionSubjectId: ACTION_SUBJECT_ID.DATE,
|
|
48
|
+
eventType: EVENT_TYPE.TRACK,
|
|
49
|
+
attributes: {
|
|
50
|
+
inputMethod: inputMethod
|
|
51
|
+
}
|
|
52
|
+
})(tr);
|
|
53
|
+
}
|
|
54
|
+
if (commitMethod) {
|
|
55
|
+
var _pluginInjectionApi$a2;
|
|
56
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a2.actions) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.attachAnalyticsEvent({
|
|
57
|
+
eventType: EVENT_TYPE.TRACK,
|
|
58
|
+
action: ACTION.COMMITTED,
|
|
59
|
+
actionSubject: ACTION_SUBJECT.DATE,
|
|
60
|
+
attributes: {
|
|
61
|
+
commitMethod: commitMethod,
|
|
62
|
+
isValid: date !== undefined,
|
|
63
|
+
isToday: isToday(date)
|
|
64
|
+
}
|
|
65
|
+
})(tr);
|
|
66
|
+
}
|
|
67
|
+
var _ref5 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.date) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.sharedState.currentState()) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
|
|
68
|
+
showDatePickerAt = _ref5.showDatePickerAt;
|
|
69
|
+
if (!showDatePickerAt) {
|
|
70
|
+
var dateNode = schema.nodes.date.createChecked({
|
|
71
|
+
timestamp: timestamp
|
|
72
|
+
});
|
|
73
|
+
var textNode = schema.text(' ');
|
|
74
|
+
var fragment = Fragment.fromArray([dateNode, textNode]);
|
|
75
|
+
var _tr$selection = tr.selection,
|
|
76
|
+
from = _tr$selection.from,
|
|
77
|
+
to = _tr$selection.to;
|
|
78
|
+
var insertable = canInsert(tr.selection.$from, fragment);
|
|
79
|
+
if (!insertable) {
|
|
80
|
+
var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
|
|
81
|
+
tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
|
|
82
|
+
} else {
|
|
83
|
+
tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
|
|
84
|
+
}
|
|
85
|
+
if (tr.docChanged) {
|
|
86
|
+
tr.scrollIntoView().setMeta(pluginKey, {
|
|
87
|
+
isNew: true
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return tr;
|
|
91
|
+
}
|
|
92
|
+
if (tr.doc.nodeAt(showDatePickerAt)) {
|
|
93
|
+
if (enterPressed) {
|
|
94
|
+
// Setting selection to outside the date node causes showDatePickerAt
|
|
95
|
+
// to be set to null by the PM plugin (onSelectionChanged), which will
|
|
96
|
+
// immediately close the datepicker once a valid date is typed in.
|
|
97
|
+
// Adding this check forces it to stay open until the user presses Enter.
|
|
98
|
+
tr = tr.setSelection(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
|
|
99
|
+
}
|
|
100
|
+
tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
|
|
101
|
+
timestamp: timestamp
|
|
102
|
+
}).setMeta(pluginKey, {
|
|
103
|
+
isNew: false
|
|
104
|
+
}).scrollIntoView();
|
|
105
|
+
if (!enterPressed) {
|
|
106
|
+
tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
return tr;
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
};
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
3
|
import Loadable from 'react-loadable';
|
|
4
4
|
import { date } from '@atlaskit/adf-schema';
|
|
5
|
-
import {
|
|
5
|
+
import { closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate } from './actions';
|
|
6
|
+
import { insertDateCommand, deleteDateCommand } from './commands';
|
|
6
7
|
import createDatePlugin from './pm-plugins/main';
|
|
7
8
|
import keymap from './pm-plugins/keymap';
|
|
8
9
|
import { IconDate } from '@atlaskit/editor-common/quick-insert';
|
|
@@ -49,20 +50,25 @@ function ContentComponent(_ref) {
|
|
|
49
50
|
isNew: isNew,
|
|
50
51
|
autoFocus: focusDateInput,
|
|
51
52
|
onDelete: function onDelete() {
|
|
52
|
-
|
|
53
|
+
dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute(deleteDateCommand(dependencyApi));
|
|
53
54
|
editorView.focus();
|
|
54
|
-
return;
|
|
55
55
|
},
|
|
56
56
|
onSelect: function onSelect(date, commitMethod) {
|
|
57
57
|
// Undefined means couldn't parse date, null means invalid (out of bounds) date
|
|
58
58
|
if (date === undefined || date === null) {
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
|
-
|
|
61
|
+
dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
|
|
62
|
+
date: date,
|
|
63
|
+
commitMethod: commitMethod
|
|
64
|
+
}));
|
|
62
65
|
editorView.focus();
|
|
63
66
|
},
|
|
64
67
|
onTextChanged: function onTextChanged(date) {
|
|
65
|
-
|
|
68
|
+
dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
|
|
69
|
+
date: date,
|
|
70
|
+
enterPressed: false
|
|
71
|
+
}));
|
|
66
72
|
},
|
|
67
73
|
closeDatePicker: function closeDatePicker() {
|
|
68
74
|
_closeDatePicker()(editorView.state, dispatch);
|
|
@@ -103,9 +109,9 @@ var datePlugin = function datePlugin(_ref3) {
|
|
|
103
109
|
focusDateInput: !!focusDateInput
|
|
104
110
|
};
|
|
105
111
|
},
|
|
106
|
-
|
|
107
|
-
insertDate:
|
|
108
|
-
deleteDate:
|
|
112
|
+
commands: {
|
|
113
|
+
insertDate: insertDateCommand(api),
|
|
114
|
+
deleteDate: deleteDateCommand(api)
|
|
109
115
|
},
|
|
110
116
|
nodes: function nodes() {
|
|
111
117
|
return [{
|
|
@@ -197,11 +197,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
197
197
|
})(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
|
|
198
198
|
});
|
|
199
199
|
_defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
|
|
200
|
-
var _pluginInjectionApi$d
|
|
201
|
-
var
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
200
|
+
var _pluginInjectionApi$d;
|
|
201
|
+
var pluginInjectionApi = _this.props.pluginInjectionApi;
|
|
202
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
|
|
203
|
+
inputMethod: inputMethod
|
|
204
|
+
}));
|
|
205
|
+
return true;
|
|
205
206
|
});
|
|
206
207
|
_defineProperty(_assertThisInitialized(_this), "createPlaceholderText", function () {
|
|
207
208
|
var editorView = _this.props.editorView;
|
|
@@ -215,15 +216,15 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
215
216
|
});
|
|
216
217
|
_defineProperty(_assertThisInitialized(_this), "createStatus", function (inputMethod) {
|
|
217
218
|
var _pluginInjectionApi$s, _pluginInjectionApi$s2;
|
|
218
|
-
var _this$
|
|
219
|
-
pluginInjectionApi = _this$
|
|
220
|
-
editorView = _this$
|
|
219
|
+
var _this$props3 = _this.props,
|
|
220
|
+
pluginInjectionApi = _this$props3.pluginInjectionApi,
|
|
221
|
+
editorView = _this$props3.editorView;
|
|
221
222
|
return (_pluginInjectionApi$s = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.status) === null || _pluginInjectionApi$s2 === void 0 || (_pluginInjectionApi$s2 = _pluginInjectionApi$s2.actions) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.updateStatus(inputMethod)(editorView.state, editorView.dispatch)) !== null && _pluginInjectionApi$s !== void 0 ? _pluginInjectionApi$s : false;
|
|
222
223
|
});
|
|
223
224
|
_defineProperty(_assertThisInitialized(_this), "openMediaPicker", function (inputMethod) {
|
|
224
|
-
var _this$
|
|
225
|
-
onShowMediaPicker = _this$
|
|
226
|
-
dispatchAnalyticsEvent = _this$
|
|
225
|
+
var _this$props4 = _this.props,
|
|
226
|
+
onShowMediaPicker = _this$props4.onShowMediaPicker,
|
|
227
|
+
dispatchAnalyticsEvent = _this$props4.dispatchAnalyticsEvent;
|
|
227
228
|
if (onShowMediaPicker) {
|
|
228
229
|
onShowMediaPicker();
|
|
229
230
|
if (dispatchAnalyticsEvent) {
|
|
@@ -251,11 +252,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
251
252
|
});
|
|
252
253
|
_defineProperty(_assertThisInitialized(_this), "insertHorizontalRule", function (inputMethod) {
|
|
253
254
|
var _pluginInjectionApi$r, _pluginInjectionApi$r2;
|
|
254
|
-
var _this$
|
|
255
|
-
_this$
|
|
256
|
-
state = _this$
|
|
257
|
-
dispatch = _this$
|
|
258
|
-
pluginInjectionApi = _this$
|
|
255
|
+
var _this$props5 = _this.props,
|
|
256
|
+
_this$props5$editorVi = _this$props5.editorView,
|
|
257
|
+
state = _this$props5$editorVi.state,
|
|
258
|
+
dispatch = _this$props5$editorVi.dispatch,
|
|
259
|
+
pluginInjectionApi = _this$props5.pluginInjectionApi;
|
|
259
260
|
return (_pluginInjectionApi$r = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$r2 = pluginInjectionApi.rule) === null || _pluginInjectionApi$r2 === void 0 ? void 0 : _pluginInjectionApi$r2.actions.insertHorizontalRule(inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$r !== void 0 ? _pluginInjectionApi$r : false;
|
|
260
261
|
});
|
|
261
262
|
_defineProperty(_assertThisInitialized(_this), "insertExpand", function () {
|
|
@@ -266,9 +267,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
266
267
|
});
|
|
267
268
|
_defineProperty(_assertThisInitialized(_this), "insertBlockType", function (itemName) {
|
|
268
269
|
return function () {
|
|
269
|
-
var _this$
|
|
270
|
-
editorView = _this$
|
|
271
|
-
onInsertBlockType = _this$
|
|
270
|
+
var _this$props6 = _this.props,
|
|
271
|
+
editorView = _this$props6.editorView,
|
|
272
|
+
onInsertBlockType = _this$props6.onInsertBlockType;
|
|
272
273
|
var state = editorView.state,
|
|
273
274
|
dispatch = editorView.dispatch;
|
|
274
275
|
onInsertBlockType(itemName)(state, dispatch);
|
|
@@ -291,11 +292,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
291
292
|
_defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref2) {
|
|
292
293
|
var item = _ref2.item,
|
|
293
294
|
inputMethod = _ref2.inputMethod;
|
|
294
|
-
var _this$
|
|
295
|
-
editorView = _this$
|
|
296
|
-
editorActions = _this$
|
|
297
|
-
handleImageUpload = _this$
|
|
298
|
-
expandEnabled = _this$
|
|
295
|
+
var _this$props7 = _this.props,
|
|
296
|
+
editorView = _this$props7.editorView,
|
|
297
|
+
editorActions = _this$props7.editorActions,
|
|
298
|
+
handleImageUpload = _this$props7.handleImageUpload,
|
|
299
|
+
expandEnabled = _this$props7.expandEnabled;
|
|
299
300
|
|
|
300
301
|
// need to do this before inserting nodes so scrollIntoView works properly
|
|
301
302
|
if (!editorView.hasFocus()) {
|
|
@@ -411,12 +412,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
411
412
|
key: "renderPopup",
|
|
412
413
|
value: function renderPopup() {
|
|
413
414
|
var emojiPickerOpen = this.state.emojiPickerOpen;
|
|
414
|
-
var _this$
|
|
415
|
-
popupsMountPoint = _this$
|
|
416
|
-
popupsBoundariesElement = _this$
|
|
417
|
-
popupsScrollableElement = _this$
|
|
418
|
-
emojiProvider = _this$
|
|
419
|
-
replacePlusMenuWithElementBrowser = _this$
|
|
415
|
+
var _this$props8 = this.props,
|
|
416
|
+
popupsMountPoint = _this$props8.popupsMountPoint,
|
|
417
|
+
popupsBoundariesElement = _this$props8.popupsBoundariesElement,
|
|
418
|
+
popupsScrollableElement = _this$props8.popupsScrollableElement,
|
|
419
|
+
emojiProvider = _this$props8.emojiProvider,
|
|
420
|
+
replacePlusMenuWithElementBrowser = _this$props8.replacePlusMenuWithElementBrowser;
|
|
420
421
|
var dropdownEmoji = this.state.dropdownItems.some(function (_ref4) {
|
|
421
422
|
var name = _ref4.value.name;
|
|
422
423
|
return name === 'emoji';
|
|
@@ -453,9 +454,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
453
454
|
buttons = _this$state.buttons,
|
|
454
455
|
dropdownItems = _this$state.dropdownItems,
|
|
455
456
|
emojiPickerOpen = _this$state.emojiPickerOpen;
|
|
456
|
-
var _this$
|
|
457
|
-
isDisabled = _this$
|
|
458
|
-
isReducedSpacing = _this$
|
|
457
|
+
var _this$props9 = this.props,
|
|
458
|
+
isDisabled = _this$props9.isDisabled,
|
|
459
|
+
isReducedSpacing = _this$props9.isReducedSpacing;
|
|
459
460
|
if (buttons.length === 0 && dropdownItems.length === 0) {
|
|
460
461
|
return null;
|
|
461
462
|
}
|