@atlaskit/editor-core 188.7.5 → 188.8.0

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.
Files changed (45) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/plugins/date/actions.js +8 -114
  3. package/dist/cjs/plugins/date/commands.js +118 -0
  4. package/dist/cjs/plugins/date/plugin.js +13 -7
  5. package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js +34 -33
  6. package/dist/cjs/plugins/type-ahead/index.js +4 -372
  7. package/dist/cjs/plugins/type-ahead/plugin.js +382 -0
  8. package/dist/cjs/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +17 -8
  9. package/dist/cjs/version-wrapper.js +1 -1
  10. package/dist/es2019/plugins/date/actions.js +3 -109
  11. package/dist/es2019/plugins/date/commands.js +113 -0
  12. package/dist/es2019/plugins/date/plugin.js +14 -8
  13. package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js +5 -3
  14. package/dist/es2019/plugins/type-ahead/index.js +2 -375
  15. package/dist/es2019/plugins/type-ahead/plugin.js +381 -0
  16. package/dist/es2019/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +17 -8
  17. package/dist/es2019/version-wrapper.js +1 -1
  18. package/dist/esm/plugins/date/actions.js +8 -114
  19. package/dist/esm/plugins/date/commands.js +112 -0
  20. package/dist/esm/plugins/date/plugin.js +14 -8
  21. package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js +34 -33
  22. package/dist/esm/plugins/type-ahead/index.js +2 -368
  23. package/dist/esm/plugins/type-ahead/plugin.js +374 -0
  24. package/dist/esm/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +17 -8
  25. package/dist/esm/version-wrapper.js +1 -1
  26. package/dist/types/labs/next/presets/default.d.ts +30 -12
  27. package/dist/types/plugins/date/actions.d.ts +4 -10
  28. package/dist/types/plugins/date/commands.d.ts +20 -0
  29. package/dist/types/plugins/date/types.d.ts +4 -4
  30. package/dist/types/plugins/type-ahead/index.d.ts +3 -14
  31. package/dist/types/plugins/type-ahead/plugin.d.ts +10 -0
  32. package/dist/types/plugins/type-ahead/types.d.ts +51 -6
  33. package/dist/types-ts4.5/labs/next/presets/default.d.ts +30 -12
  34. package/dist/types-ts4.5/plugins/date/actions.d.ts +4 -10
  35. package/dist/types-ts4.5/plugins/date/commands.d.ts +22 -0
  36. package/dist/types-ts4.5/plugins/date/types.d.ts +4 -4
  37. package/dist/types-ts4.5/plugins/type-ahead/index.d.ts +3 -14
  38. package/dist/types-ts4.5/plugins/type-ahead/plugin.d.ts +10 -0
  39. package/dist/types-ts4.5/plugins/type-ahead/types.d.ts +53 -6
  40. package/package.json +2 -2
  41. package/dist/cjs/plugins/view-update-subscription/subscribe/type-ahead-updates.js +0 -33
  42. package/dist/es2019/plugins/view-update-subscription/subscribe/type-ahead-updates.js +0 -28
  43. package/dist/esm/plugins/view-update-subscription/subscribe/type-ahead-updates.js +0 -27
  44. package/dist/types/plugins/view-update-subscription/subscribe/type-ahead-updates.d.ts +0 -9
  45. package/dist/types-ts4.5/plugins/view-update-subscription/subscribe/type-ahead-updates.d.ts +0 -9
@@ -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 { insertDate, closeDatePicker, closeDatePickerWithAnalytics, createDate, deleteDate } from './actions';
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
- deleteDate()(editorView.state, dispatch);
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
- insertDate(date, undefined, commitMethod)(editorView.state, dispatch);
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
- insertDate(date, undefined, undefined, false)(editorView.state, dispatch);
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
- actions: {
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
- return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.date) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.insertDate(undefined, inputMethod)(editorView.state, editorView.dispatch)) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
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 {
@@ -1,376 +1,3 @@
1
- /**
2
- *
3
- * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
4
- *
5
- * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
6
- *
7
- *
8
- */
9
- import React from 'react';
10
- import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
11
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
12
- import { createPlugin } from './pm-plugins/main';
13
- import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
14
- import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
15
- import { typeAheadQuery } from '@atlaskit/adf-schema';
16
- import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
17
- import { inputRulePlugin } from './pm-plugins/input-rules';
18
- import { TypeAheadPopup } from './ui/TypeAheadPopup';
19
- import { findHandler, getPluginState, isTypeAheadOpen, isTypeAheadAllowed, getTypeAheadQuery, getTypeAheadHandler } from './utils';
20
- import { useItemInsert } from './ui/hooks/use-item-insert';
21
- import { updateSelectedIndex } from './commands/update-selected-index';
22
- import { StatsModifier } from './stats-modifier';
23
- import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
24
- import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
25
- import { closeTypeAhead } from './transforms/close-type-ahead';
26
- import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
27
- const TypeAheadMenu = /*#__PURE__*/React.memo(({
28
- editorView,
29
- popupMountRef,
30
- typeAheadState,
31
- fireAnalyticsCallback
32
- }) => {
33
- var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
34
- const isOpen = typeAheadState.decorationSet.find().length > 0;
35
- const {
36
- triggerHandler,
37
- items,
38
- selectedIndex,
39
- decorationElement,
40
- decorationSet,
41
- query
42
- } = typeAheadState;
43
- const [onItemInsert, onTextInsert, onItemMatch] = useItemInsert(triggerHandler, editorView, items);
44
- const setSelectedItem = React.useCallback(({
45
- index: nextIndex
46
- }) => {
47
- queueMicrotask(() => {
48
- updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
49
- });
50
- }, [editorView]);
51
- const insertItem = React.useCallback((mode = SelectItemMode.SELECTED, index) => {
52
- queueMicrotask(() => {
53
- onItemInsert({
54
- mode,
55
- index,
56
- query
57
- });
58
- });
59
- }, [onItemInsert, query]);
60
- const cancel = React.useCallback(({
61
- setSelectionAt,
62
- addPrefixTrigger,
63
- forceFocusOnEditor
64
- }) => {
65
- const fullQuery = addPrefixTrigger ? `${triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger}${query}` : query;
66
- onTextInsert({
67
- forceFocusOnEditor,
68
- setSelectionAt,
69
- text: fullQuery
70
- });
71
- }, [triggerHandler, onTextInsert, query]);
72
- React.useEffect(() => {
73
- if (!isOpen || !query) {
74
- return;
75
- }
76
- const isLastCharSpace = query[query.length - 1] === ' ';
77
- if (!isLastCharSpace) {
78
- return;
79
- }
80
- const result = onItemMatch({
81
- mode: SelectItemMode.SPACE,
82
- query: query.trim()
83
- });
84
- if (!result) {
85
- return;
86
- }
87
- }, [isOpen, query, onItemMatch]);
88
- if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
89
- return null;
90
- }
91
- return /*#__PURE__*/React.createElement(TypeAheadPopup, {
92
- editorView: editorView,
93
- popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
94
- popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
95
- popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
96
- anchorElement: decorationElement,
97
- triggerHandler: triggerHandler,
98
- fireAnalyticsCallback: fireAnalyticsCallback,
99
- items: items,
100
- selectedIndex: selectedIndex,
101
- setSelectedItem: setSelectedItem,
102
- onItemInsert: insertItem,
103
- decorationSet: decorationSet,
104
- isEmptyQuery: !query,
105
- cancel: cancel
106
- });
107
- });
108
- const createOpenAtTransaction = editorAnalyticsAPI => props => tr => {
109
- const {
110
- triggerHandler,
111
- inputMethod
112
- } = props;
113
- openTypeAheadAtCursor({
114
- triggerHandler,
115
- inputMethod
116
- })({
117
- tr
118
- });
119
- editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
120
- action: ACTION.INVOKED,
121
- actionSubject: ACTION_SUBJECT.TYPEAHEAD,
122
- actionSubjectId: triggerHandler.id,
123
- attributes: {
124
- inputMethod
125
- },
126
- eventType: EVENT_TYPE.UI
127
- })(tr);
128
- return true;
129
- };
130
- const createOpenTypeAhead = (editorViewRef, editorAnalyticsAPI) => props => {
131
- if (!editorViewRef.current) {
132
- return false;
133
- }
134
- const {
135
- current: view
136
- } = editorViewRef;
137
- const {
138
- tr
139
- } = view.state;
140
- createOpenAtTransaction(editorAnalyticsAPI)(props)(tr);
141
- view.dispatch(tr);
142
- return true;
143
- };
144
- const createInsertTypeAheadItem = editorViewRef => props => {
145
- if (!editorViewRef.current) {
146
- return false;
147
- }
148
- const {
149
- current: view
150
- } = editorViewRef;
151
- const {
152
- triggerHandler,
153
- contentItem,
154
- query,
155
- sourceListItem,
156
- mode
157
- } = props;
158
- insertTypeAheadItem(view)({
159
- handler: triggerHandler,
160
- item: contentItem,
161
- mode: mode || SelectItemMode.SELECTED,
162
- query,
163
- sourceListItem
164
- });
165
- return true;
166
- };
167
- const createFindHandlerByTrigger = editorViewRef => trigger => {
168
- if (!editorViewRef.current) {
169
- return null;
170
- }
171
- const {
172
- current: view
173
- } = editorViewRef;
174
- return findHandler(trigger, view.state);
175
- };
176
- const createCloseTypeAhead = editorViewRef => options => {
177
- if (!editorViewRef.current) {
178
- return false;
179
- }
180
- const {
181
- current: view
182
- } = editorViewRef;
183
- const currentQuery = getTypeAheadQuery(view.state) || '';
184
- const {
185
- state
186
- } = view;
187
- let tr = state.tr;
188
- if (options.attachCommand) {
189
- const fakeDispatch = customTr => {
190
- tr = customTr;
191
- };
192
- options.attachCommand(state, fakeDispatch);
193
- }
194
- closeTypeAhead(tr);
195
- if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
196
- const handler = getTypeAheadHandler(state);
197
- if (!handler) {
198
- return false;
199
- }
200
- const text = handler.trigger.concat(currentQuery);
201
- tr.replaceSelectionWith(state.schema.text(text));
202
- }
203
- view.dispatch(tr);
204
- if (!view.hasFocus()) {
205
- view.focus();
206
- }
207
- return true;
208
- };
209
-
210
- /**
211
- *
212
- * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
213
- *
214
- * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
215
- *
216
- *
217
- */
218
- const typeAheadPlugin = ({
219
- config: options,
220
- api
221
- }) => {
222
- var _api$analytics, _api$analytics2;
223
- const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
224
- const popupMountRef = {
225
- current: null
226
- };
227
- const editorViewRef = {
228
- current: null
229
- };
230
- return {
231
- name: 'typeAhead',
232
- marks() {
233
- // We need to keep this to make sure
234
- // All documents with typeahead marks will be loaded normally
235
- return [{
236
- name: 'typeAheadQuery',
237
- mark: typeAheadQuery
238
- }];
239
- },
240
- pmPlugins(typeAhead = []) {
241
- return [{
242
- name: 'typeAhead',
243
- plugin: ({
244
- dispatch,
245
- getIntl
246
- }) => createPlugin({
247
- getIntl,
248
- popupMountRef,
249
- reactDispatch: dispatch,
250
- typeAheadHandlers: typeAhead,
251
- createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
252
- })
253
- }, {
254
- name: 'typeAheadEditorViewRef',
255
- plugin: () => {
256
- return new SafePlugin({
257
- view(view) {
258
- editorViewRef.current = view;
259
- return {
260
- destroy() {
261
- editorViewRef.current = null;
262
- }
263
- };
264
- }
265
- });
266
- }
267
- }, {
268
- name: 'typeAheadInsertItem',
269
- plugin: createInsertItemPlugin
270
- }, {
271
- name: 'typeAheadInputRule',
272
- plugin: ({
273
- schema,
274
- featureFlags
275
- }) => inputRulePlugin(schema, typeAhead, featureFlags)
276
- }];
277
- },
278
- getSharedState(editorState) {
279
- if (!editorState) {
280
- return {
281
- query: ''
282
- };
283
- }
284
- return {
285
- query: getTypeAheadQuery(editorState) || ''
286
- };
287
- },
288
- actions: {
289
- isOpen: isTypeAheadOpen,
290
- isAllowed: isTypeAheadAllowed,
291
- open: createOpenTypeAhead(editorViewRef, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions),
292
- openAtTransaction: createOpenAtTransaction(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
293
- findHandlerByTrigger: createFindHandlerByTrigger(editorViewRef),
294
- insert: createInsertTypeAheadItem(editorViewRef),
295
- close: createCloseTypeAhead(editorViewRef)
296
- },
297
- contentComponent({
298
- editorView,
299
- containerElement,
300
- popupsMountPoint,
301
- popupsBoundariesElement,
302
- popupsScrollableElement,
303
- wrapperElement
304
- }) {
305
- popupMountRef.current = {
306
- popupsMountPoint: popupsMountPoint || wrapperElement || undefined,
307
- popupsBoundariesElement,
308
- popupsScrollableElement: popupsScrollableElement || containerElement || undefined
309
- };
310
- return /*#__PURE__*/React.createElement(WithPluginState, {
311
- plugins: {
312
- typeAheadState: typeAheadPluginKey
313
- },
314
- render: ({
315
- typeAheadState
316
- }) => {
317
- if (!typeAheadState) {
318
- return null;
319
- }
320
- return /*#__PURE__*/React.createElement(TypeAheadMenu, {
321
- editorView: editorView,
322
- popupMountRef: popupMountRef,
323
- typeAheadState: typeAheadState,
324
- fireAnalyticsCallback: fireAnalyticsCallback
325
- });
326
- }
327
- });
328
- },
329
- onEditorViewStateUpdated({
330
- originalTransaction,
331
- oldEditorState,
332
- newEditorState
333
- }) {
334
- const oldPluginState = getPluginState(oldEditorState);
335
- const newPluginState = getPluginState(newEditorState);
336
- if (!oldPluginState || !newPluginState) {
337
- return;
338
- }
339
- const {
340
- triggerHandler: oldTriggerHandler
341
- } = oldPluginState;
342
- const {
343
- triggerHandler: newTriggerHandler
344
- } = newPluginState;
345
- const isANewHandler = oldTriggerHandler !== newTriggerHandler;
346
- if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
347
- const typeAheadMessage = originalTransaction.getMeta(typeAheadPluginKey);
348
- const wasItemInserted = typeAheadMessage && typeAheadMessage.action === 'INSERT_RAW_QUERY';
349
- oldTriggerHandler.dismiss({
350
- editorState: newEditorState,
351
- query: oldPluginState.query,
352
- stats: (oldPluginState.stats || new StatsModifier()).serialize(),
353
- wasItemInserted
354
- });
355
- }
356
- if (newTriggerHandler !== null && newTriggerHandler !== void 0 && newTriggerHandler.onOpen && isANewHandler) {
357
- newTriggerHandler.onOpen(newEditorState);
358
- }
359
- if (newTriggerHandler && isANewHandler && options !== null && options !== void 0 && options.createAnalyticsEvent) {
360
- fireAnalyticsCallback({
361
- payload: {
362
- action: ACTION.INVOKED,
363
- actionSubject: ACTION_SUBJECT.TYPEAHEAD,
364
- actionSubjectId: newTriggerHandler.id || 'not_set',
365
- attributes: {
366
- inputMethod: newPluginState.inputMethod || INPUT_METHOD.KEYBOARD
367
- },
368
- eventType: EVENT_TYPE.UI
369
- }
370
- });
371
- }
372
- }
373
- };
374
- };
1
+ import { typeAheadPlugin } from './plugin';
375
2
  export default typeAheadPlugin;
376
- export { typeAheadPluginKey };
3
+ export { typeAheadPlugin };