/
PickerHandler.ts
131 lines (112 loc) · 3.43 KB
/
PickerHandler.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import type { PickerHelper } from './PickerHelper';
import type { DOMInsertPoint } from 'roosterjs-content-model-types';
/**
* Direction option for picker
*/
export type PickerDirection =
/**
* Show options horizontally
*/
| 'horizontal'
/**
* Show options vertically
*/
| 'vertical'
/**
* Show options in both direction (2-D picker)
*/
| 'both';
/**
* Change mode that PickerPlugin will pass to child class
*/
export type PickerSelectionChangMode =
/**
* When user press Right ("horizontal" mode or "both" mode) (Left in RTL) or Down ("vertical" mode),
* select the next option
*/
| 'next'
/**
* When user press Left ("horizontal" mode or "both" mode) (Right in RTL) or Up ("vertical" mode),
* select the previous option
*/
| 'previous'
/**
* When user press Down ("both" mode),
* select the next row
*/
| 'nextRow'
/**
* When user press Up ("both" mode),
* select the previous row
*/
| 'previousRow'
/**
* When user press PageDown,
* switch to next page
*/
| 'nextPage'
/**
* When user press PageUp,
* switch to previous page
*/
| 'previousPage'
/**
* When user press Home,
* Select the first item in current row
*/
| 'firstInRow'
/**
* When user press End,
* Select the last item in current row
*/
| 'lastInRow'
/**
* When user press CTRL (or META on Mac) + Home,
* Select the very first item
*/
| 'first'
/**
* When user press CTRL (or META on Mac) + End,
* Select the very last item
*/
| 'last';
/**
* Represents the interface a handler for picker plugin. Developer need to implement this interface to create a new type of picker
*/
export interface PickerHandler {
/**
* Initialize the picker handler, pass in editor and PickerPlugin instance so that the handler can save them
* @param editor The editor instance
* @param pickerPlugin The PickerPlugin instance
*/
onInitialize: (helper: PickerHelper) => void;
/**
* Dispose the picker handler
*/
onDispose: () => void;
/**
* Notify the picker handler that user has typed trigger character so handler should show picker now
* @param queryString Current query string
* @param insertPoint Insert point where user is typing, can be used for calculating picker position
* @returns A picker direction to let picker plugin know what kind of picker is opened. Picker plugin will use this value
* to decide how to handle keyboard event to change selection. Return null means picker is not actually opened
*/
onTrigger: (queryString: string, insertPoint: DOMInsertPoint) => PickerDirection | null;
/**
* Notify the picker handler that picker should be closed now
*/
onClosePicker?(): void;
/**
* Notify the picker handler that user has changed current typed query string
*/
onQueryStringChanged?(queryString: string): void;
/**
* Notify the picker handler that user has decide to select the current option in picker
*/
onSelect?(): void;
/**
* Notify the picker handler that user is using keyboard to change current selection
* @param mode The moving mode. Handler code can use this value to decide which item need to be selected
*/
onSelectionChanged?(mode: PickerSelectionChangMode): void;
}