@ckeditor/ckeditor5-ui 39.0.1 → 40.0.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 (229) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/LICENSE.md +1 -1
  3. package/README.md +4 -4
  4. package/lang/contexts.json +5 -1
  5. package/lang/translations/ar.po +17 -0
  6. package/lang/translations/ast.po +17 -0
  7. package/lang/translations/az.po +17 -0
  8. package/lang/translations/bg.po +17 -0
  9. package/lang/translations/bn.po +17 -0
  10. package/lang/translations/ca.po +17 -0
  11. package/lang/translations/cs.po +17 -0
  12. package/lang/translations/da.po +17 -0
  13. package/lang/translations/de-ch.po +17 -0
  14. package/lang/translations/de.po +17 -0
  15. package/lang/translations/el.po +17 -0
  16. package/lang/translations/en-au.po +17 -0
  17. package/lang/translations/en-gb.po +17 -0
  18. package/lang/translations/en.po +17 -0
  19. package/lang/translations/eo.po +17 -0
  20. package/lang/translations/es.po +17 -0
  21. package/lang/translations/et.po +17 -0
  22. package/lang/translations/eu.po +17 -0
  23. package/lang/translations/fa.po +17 -0
  24. package/lang/translations/fi.po +17 -0
  25. package/lang/translations/fr.po +17 -0
  26. package/lang/translations/gl.po +17 -0
  27. package/lang/translations/he.po +17 -0
  28. package/lang/translations/hi.po +17 -0
  29. package/lang/translations/hr.po +17 -0
  30. package/lang/translations/hu.po +17 -0
  31. package/lang/translations/id.po +17 -0
  32. package/lang/translations/it.po +17 -0
  33. package/lang/translations/ja.po +17 -0
  34. package/lang/translations/km.po +17 -0
  35. package/lang/translations/kn.po +17 -0
  36. package/lang/translations/ko.po +17 -0
  37. package/lang/translations/ku.po +17 -0
  38. package/lang/translations/lt.po +17 -0
  39. package/lang/translations/lv.po +17 -0
  40. package/lang/translations/ms.po +17 -0
  41. package/lang/translations/nb.po +17 -0
  42. package/lang/translations/ne.po +17 -0
  43. package/lang/translations/nl.po +17 -0
  44. package/lang/translations/no.po +17 -0
  45. package/lang/translations/pl.po +17 -0
  46. package/lang/translations/pt-br.po +17 -0
  47. package/lang/translations/pt.po +17 -0
  48. package/lang/translations/ro.po +17 -0
  49. package/lang/translations/ru.po +17 -0
  50. package/lang/translations/sk.po +17 -0
  51. package/lang/translations/sl.po +17 -0
  52. package/lang/translations/sq.po +17 -0
  53. package/lang/translations/sr-latn.po +17 -0
  54. package/lang/translations/sr.po +17 -0
  55. package/lang/translations/sv.po +17 -0
  56. package/lang/translations/th.po +17 -0
  57. package/lang/translations/tk.po +17 -0
  58. package/lang/translations/tr.po +17 -0
  59. package/lang/translations/tt.po +17 -0
  60. package/lang/translations/ug.po +17 -0
  61. package/lang/translations/uk.po +17 -0
  62. package/lang/translations/ur.po +17 -0
  63. package/lang/translations/uz.po +17 -0
  64. package/lang/translations/vi.po +17 -0
  65. package/lang/translations/zh-cn.po +17 -0
  66. package/lang/translations/zh.po +17 -0
  67. package/package.json +3 -7
  68. package/src/augmentation.d.ts +86 -86
  69. package/src/augmentation.js +5 -5
  70. package/src/autocomplete/autocompleteview.d.ts +81 -0
  71. package/src/autocomplete/autocompleteview.js +146 -0
  72. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  73. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  74. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  75. package/src/bindings/clickoutsidehandler.js +36 -36
  76. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  77. package/src/bindings/csstransitiondisablermixin.js +55 -55
  78. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  79. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  80. package/src/bindings/preventdefault.d.ts +33 -33
  81. package/src/bindings/preventdefault.js +34 -34
  82. package/src/bindings/submithandler.d.ts +57 -57
  83. package/src/bindings/submithandler.js +47 -47
  84. package/src/button/button.d.ts +178 -178
  85. package/src/button/button.js +5 -5
  86. package/src/button/buttonlabel.d.ts +34 -0
  87. package/src/button/buttonlabel.js +5 -0
  88. package/src/button/buttonlabelview.d.ts +31 -0
  89. package/src/button/buttonlabelview.js +42 -0
  90. package/src/button/buttonview.d.ts +185 -177
  91. package/src/button/buttonview.js +219 -231
  92. package/src/button/switchbuttonview.d.ts +45 -45
  93. package/src/button/switchbuttonview.js +75 -75
  94. package/src/colorgrid/colorgridview.d.ts +132 -132
  95. package/src/colorgrid/colorgridview.js +124 -124
  96. package/src/colorgrid/colortileview.d.ts +28 -28
  97. package/src/colorgrid/colortileview.js +40 -40
  98. package/src/colorgrid/utils.d.ts +47 -47
  99. package/src/colorgrid/utils.js +84 -84
  100. package/src/colorpicker/colorpickerview.d.ts +137 -137
  101. package/src/colorpicker/colorpickerview.js +270 -270
  102. package/src/colorpicker/utils.d.ts +43 -43
  103. package/src/colorpicker/utils.js +99 -99
  104. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  105. package/src/colorselector/colorgridsfragmentview.js +289 -289
  106. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  107. package/src/colorselector/colorpickerfragmentview.js +205 -205
  108. package/src/colorselector/colorselectorview.d.ts +242 -242
  109. package/src/colorselector/colorselectorview.js +256 -256
  110. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  111. package/src/colorselector/documentcolorcollection.js +42 -42
  112. package/src/componentfactory.d.ts +81 -81
  113. package/src/componentfactory.js +104 -104
  114. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  115. package/src/dropdown/button/dropdownbutton.js +5 -5
  116. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  117. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  118. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  119. package/src/dropdown/button/splitbuttonview.js +152 -152
  120. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  121. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  122. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  123. package/src/dropdown/dropdownpanelview.js +97 -97
  124. package/src/dropdown/dropdownview.d.ts +315 -315
  125. package/src/dropdown/dropdownview.js +379 -378
  126. package/src/dropdown/utils.d.ts +235 -221
  127. package/src/dropdown/utils.js +458 -437
  128. package/src/editableui/editableuiview.d.ts +72 -72
  129. package/src/editableui/editableuiview.js +112 -112
  130. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  131. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  132. package/src/editorui/bodycollection.d.ts +55 -55
  133. package/src/editorui/bodycollection.js +84 -84
  134. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  135. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  136. package/src/editorui/editorui.d.ts +282 -282
  137. package/src/editorui/editorui.js +410 -410
  138. package/src/editorui/editoruiview.d.ts +39 -39
  139. package/src/editorui/editoruiview.js +38 -38
  140. package/src/editorui/poweredby.d.ts +71 -71
  141. package/src/editorui/poweredby.js +276 -299
  142. package/src/focuscycler.d.ts +226 -183
  143. package/src/focuscycler.js +245 -220
  144. package/src/formheader/formheaderview.d.ts +59 -53
  145. package/src/formheader/formheaderview.js +69 -63
  146. package/src/highlightedtext/highlightedtextview.d.ts +38 -0
  147. package/src/highlightedtext/highlightedtextview.js +102 -0
  148. package/src/icon/iconview.d.ts +85 -78
  149. package/src/icon/iconview.js +114 -112
  150. package/src/iframe/iframeview.d.ts +50 -50
  151. package/src/iframe/iframeview.js +63 -63
  152. package/src/index.d.ts +73 -63
  153. package/src/index.js +70 -62
  154. package/src/input/inputbase.d.ts +107 -0
  155. package/src/input/inputbase.js +110 -0
  156. package/src/input/inputview.d.ts +36 -121
  157. package/src/input/inputview.js +24 -106
  158. package/src/inputnumber/inputnumberview.d.ts +49 -49
  159. package/src/inputnumber/inputnumberview.js +40 -40
  160. package/src/inputtext/inputtextview.d.ts +18 -18
  161. package/src/inputtext/inputtextview.js +27 -27
  162. package/src/label/labelview.d.ts +36 -36
  163. package/src/label/labelview.js +41 -41
  164. package/src/labeledfield/labeledfieldview.d.ts +187 -182
  165. package/src/labeledfield/labeledfieldview.js +157 -157
  166. package/src/labeledfield/utils.d.ts +123 -93
  167. package/src/labeledfield/utils.js +176 -131
  168. package/src/labeledinput/labeledinputview.d.ts +125 -125
  169. package/src/labeledinput/labeledinputview.js +125 -125
  170. package/src/list/listitemgroupview.d.ts +51 -0
  171. package/src/list/listitemgroupview.js +75 -0
  172. package/src/list/listitemview.d.ts +36 -35
  173. package/src/list/listitemview.js +42 -40
  174. package/src/list/listseparatorview.d.ts +18 -18
  175. package/src/list/listseparatorview.js +28 -28
  176. package/src/list/listview.d.ts +122 -65
  177. package/src/list/listview.js +187 -90
  178. package/src/model.d.ts +22 -22
  179. package/src/model.js +31 -31
  180. package/src/notification/notification.d.ts +211 -211
  181. package/src/notification/notification.js +187 -187
  182. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  183. package/src/panel/balloon/balloonpanelview.js +1010 -988
  184. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  185. package/src/panel/balloon/contextualballoon.js +572 -572
  186. package/src/panel/sticky/stickypanelview.d.ts +156 -158
  187. package/src/panel/sticky/stickypanelview.js +234 -231
  188. package/src/search/filteredview.d.ts +31 -0
  189. package/src/search/filteredview.js +5 -0
  190. package/src/search/searchinfoview.d.ts +45 -0
  191. package/src/search/searchinfoview.js +59 -0
  192. package/src/search/searchresultsview.d.ts +54 -0
  193. package/src/search/searchresultsview.js +65 -0
  194. package/src/search/text/searchtextqueryview.d.ts +76 -0
  195. package/src/search/text/searchtextqueryview.js +75 -0
  196. package/src/search/text/searchtextview.d.ts +219 -0
  197. package/src/search/text/searchtextview.js +201 -0
  198. package/src/spinner/spinnerview.d.ts +25 -0
  199. package/src/spinner/spinnerview.js +38 -0
  200. package/src/template.d.ts +942 -942
  201. package/src/template.js +1294 -1294
  202. package/src/textarea/textareaview.d.ts +88 -0
  203. package/src/textarea/textareaview.js +140 -0
  204. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  205. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  206. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  207. package/src/toolbar/block/blockbuttonview.js +41 -41
  208. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  209. package/src/toolbar/block/blocktoolbar.js +395 -391
  210. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -39
  211. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  212. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  213. package/src/toolbar/toolbarlinebreakview.js +28 -28
  214. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  215. package/src/toolbar/toolbarseparatorview.js +28 -28
  216. package/src/toolbar/toolbarview.d.ts +266 -265
  217. package/src/toolbar/toolbarview.js +719 -717
  218. package/src/tooltipmanager.d.ts +180 -180
  219. package/src/tooltipmanager.js +353 -353
  220. package/src/view.d.ts +422 -422
  221. package/src/view.js +396 -396
  222. package/src/viewcollection.d.ts +139 -139
  223. package/src/viewcollection.js +206 -206
  224. package/theme/components/autocomplete/autocomplete.css +22 -0
  225. package/theme/components/formheader/formheader.css +8 -0
  226. package/theme/components/highlightedtext/highlightedtext.css +12 -0
  227. package/theme/components/search/search.css +43 -0
  228. package/theme/components/spinner/spinner.css +23 -0
  229. package/theme/components/textarea/textarea.css +10 -0
@@ -1,282 +1,282 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/editorui/editorui
7
- */
8
- import ComponentFactory from '../componentfactory';
9
- import TooltipManager from '../tooltipmanager';
10
- import PoweredBy from './poweredby';
11
- import type EditorUIView from './editoruiview';
12
- import type ToolbarView from '../toolbar/toolbarview';
13
- import { FocusTracker } from '@ckeditor/ckeditor5-utils';
14
- import type { Editor } from '@ckeditor/ckeditor5-core';
15
- declare const EditorUI_base: {
16
- new (): import("@ckeditor/ckeditor5-utils").Observable;
17
- prototype: import("@ckeditor/ckeditor5-utils").Observable;
18
- };
19
- /**
20
- * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
21
- */
22
- export default abstract class EditorUI extends EditorUI_base {
23
- /**
24
- * The editor that the UI belongs to.
25
- */
26
- readonly editor: Editor;
27
- /**
28
- * An instance of the {@link module:ui/componentfactory~ComponentFactory}, a registry used by plugins
29
- * to register factories of specific UI components.
30
- */
31
- readonly componentFactory: ComponentFactory;
32
- /**
33
- * Stores the information about the editor UI focus and propagates it so various plugins and components
34
- * are unified as a focus group.
35
- */
36
- readonly focusTracker: FocusTracker;
37
- /**
38
- * Manages the tooltips displayed on mouseover and focus across the UI.
39
- */
40
- readonly tooltipManager: TooltipManager;
41
- /**
42
- * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
43
- */
44
- readonly poweredBy: PoweredBy;
45
- /**
46
- * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
47
- *
48
- * @readonly
49
- * @default false
50
- */
51
- isReady: boolean;
52
- abstract get view(): EditorUIView;
53
- /**
54
- * Stores viewport offsets from every direction.
55
- *
56
- * Viewport offset can be used to constrain balloons or other UI elements into an element smaller than the viewport.
57
- * This can be useful if there are any other absolutely positioned elements that may interfere with editor UI.
58
- *
59
- * Example `editor.ui.viewportOffset` returns:
60
- *
61
- * ```js
62
- * {
63
- * top: 50,
64
- * right: 50,
65
- * bottom: 50,
66
- * left: 50
67
- * }
68
- * ```
69
- *
70
- * This property can be overriden after editor already being initialized:
71
- *
72
- * ```js
73
- * editor.ui.viewportOffset = {
74
- * top: 100,
75
- * right: 0,
76
- * bottom: 0,
77
- * left: 0
78
- * };
79
- * ```
80
- *
81
- * @observable
82
- */
83
- viewportOffset: {
84
- left?: number;
85
- right?: number;
86
- top?: number;
87
- bottom?: number;
88
- };
89
- /**
90
- * Stores all editable elements used by the editor instance.
91
- */
92
- private _editableElementsMap;
93
- /**
94
- * All available & focusable toolbars.
95
- */
96
- private _focusableToolbarDefinitions;
97
- /**
98
- * Creates an instance of the editor UI class.
99
- *
100
- * @param editor The editor instance.
101
- */
102
- constructor(editor: Editor);
103
- /**
104
- * The main (outermost) DOM element of the editor UI.
105
- *
106
- * For example, in {@link module:editor-classic/classiceditor~ClassicEditor} it is a `<div>` which
107
- * wraps the editable element and the toolbar. In {@link module:editor-inline/inlineeditor~InlineEditor}
108
- * it is the editable element itself (as there is no other wrapper). However, in
109
- * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} it is set to `null` because this editor does not
110
- * come with a single "main" HTML element (its editable element and toolbar are separate).
111
- *
112
- * This property can be understood as a shorthand for retrieving the element that a specific editor integration
113
- * considers to be its main DOM element.
114
- */
115
- get element(): HTMLElement | null;
116
- /**
117
- * Fires the {@link module:ui/editorui/editorui~EditorUI#event:update `update`} event.
118
- *
119
- * This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to
120
- * some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).
121
- */
122
- update(): void;
123
- /**
124
- * Destroys the UI.
125
- */
126
- destroy(): void;
127
- /**
128
- * Stores the native DOM editable element used by the editor under a unique name.
129
- *
130
- * Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable
131
- * editable area, they can use the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke to navigate over editor toolbars. See {@link #addToolbar}.
132
- *
133
- * @param rootName The unique name of the editable element.
134
- * @param domElement The native DOM editable element.
135
- */
136
- setEditableElement(rootName: string, domElement: HTMLElement): void;
137
- /**
138
- * Removes the editable from the editor UI. Removes all handlers added by {@link #setEditableElement}.
139
- *
140
- * @param rootName The name of the editable element to remove.
141
- */
142
- removeEditableElement(rootName: string): void;
143
- /**
144
- * Returns the editable editor element with the given name or null if editable does not exist.
145
- *
146
- * @param rootName The editable name.
147
- */
148
- getEditableElement(rootName?: string): HTMLElement | undefined;
149
- /**
150
- * Returns array of names of all editor editable elements.
151
- */
152
- getEditableElementsNames(): IterableIterator<string>;
153
- /**
154
- * Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.
155
- *
156
- * Focusable toolbars can be accessed (focused) by users by pressing the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
157
- * Successive keystroke presses navigate over available toolbars.
158
- *
159
- * @param toolbarView A instance of the toolbar to be registered.
160
- */
161
- addToolbar(toolbarView: ToolbarView, options?: FocusableToolbarOptions): void;
162
- /**
163
- * Stores all editable elements used by the editor instance.
164
- *
165
- * @deprecated
166
- */
167
- protected get _editableElements(): unknown;
168
- /**
169
- * Returns viewport offsets object:
170
- *
171
- * ```js
172
- * {
173
- * top: Number,
174
- * right: Number,
175
- * bottom: Number,
176
- * left: Number
177
- * }
178
- * ```
179
- *
180
- * Only top property is currently supported.
181
- */
182
- private _readViewportOffsetFromConfig;
183
- /**
184
- * Starts listening for <kbd>Alt</kbd> + <kbd>F10</kbd> and <kbd>Esc</kbd> keystrokes in the context of focusable
185
- * {@link #setEditableElement editable elements} and {@link #addToolbar toolbars}
186
- * to allow users navigate across the UI.
187
- */
188
- private _initFocusTracking;
189
- /**
190
- * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
191
- *
192
- * Focusable toolbars candidates are either:
193
- * * already visible,
194
- * * have `beforeFocus()` set in their {@link module:ui/editorui/editorui~FocusableToolbarDefinition definition} that suggests that
195
- * they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible
196
- * at this stage because it depends on its implementation, that in turn depends on the editing context (selection).
197
- *
198
- * **Note**: Contextual toolbars take precedence over regular toolbars.
199
- */
200
- private _getFocusableCandidateToolbarDefinitions;
201
- /**
202
- * Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).
203
- *
204
- * `null` is returned when no toolbar is currently focused.
205
- */
206
- private _getCurrentFocusedToolbarDefinition;
207
- /**
208
- * Focuses a focusable toolbar candidate using its definition.
209
- *
210
- * @param candidateToolbarDefinition A definition of the toolbar to focus.
211
- * @returns `true` when the toolbar candidate was focused. `false` otherwise.
212
- */
213
- private _focusFocusableCandidateToolbar;
214
- /**
215
- * Provides an integration between {@link #viewportOffset} and {@link module:utils/dom/scroll~scrollViewportToShowTarget}.
216
- * It allows the UI-agnostic engine method to consider user-configured viewport offsets specific for the integration.
217
- *
218
- * @param evt The `scrollToTheSelection` event info.
219
- * @param data The payload carried by the `scrollToTheSelection` event.
220
- */
221
- private _handleScrollToTheSelection;
222
- }
223
- /**
224
- * Fired when the editor UI is ready.
225
- *
226
- * Fired before {@link module:engine/controller/datacontroller~DataController#event:ready}.
227
- *
228
- * @eventName ~EditorUI#ready
229
- */
230
- export type EditorUIReadyEvent = {
231
- name: 'ready';
232
- args: [];
233
- };
234
- /**
235
- * Fired whenever the UI (all related components) should be refreshed.
236
- *
237
- * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.
238
- * It can also be fired manually via the {@link module:ui/editorui/editorui~EditorUI#update} method.
239
- *
240
- * @eventName ~EditorUI#update
241
- */
242
- export type EditorUIUpdateEvent = {
243
- name: 'update';
244
- args: [];
245
- };
246
- /**
247
- * A definition of a focusable toolbar. Used by {@link module:ui/editorui/editorui~EditorUI#addToolbar}.
248
- */
249
- export interface FocusableToolbarDefinition {
250
- /**
251
- * An instance of a focusable toolbar view.
252
- */
253
- toolbarView: ToolbarView;
254
- /**
255
- * Options of a focusable toolbar view:
256
- *
257
- * * `isContextual`: Marks the higher priority toolbar. For example when there are 2 visible toolbars,
258
- * it allows to distinguish which toolbar should be focused first after the `alt+f10` keystroke
259
- * * `beforeFocus`: A callback executed before the `ToolbarView` gains focus upon the `Alt+F10` keystroke.
260
- * * `afterBlur`: A callback executed after `ToolbarView` loses focus upon `Esc` keystroke but before
261
- * the focus goes back to the `origin`.
262
- */
263
- options: FocusableToolbarOptions;
264
- }
265
- export interface FocusableToolbarOptions {
266
- /**
267
- * Set `true` if the toolbar is attached to the content of the editor. Such toolbar takes
268
- * a precedence over other toolbars when a user pressed <kbd>Alt</kbd> + <kbd>F10</kbd>.
269
- */
270
- isContextual?: boolean;
271
- /**
272
- * Specify a callback executed before the toolbar instance DOM element gains focus
273
- * upon the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
274
- */
275
- beforeFocus?: () => void;
276
- /**
277
- * Specify a callback executed after the toolbar instance DOM element loses focus upon
278
- * <kbd>Esc</kbd> keystroke but before the focus goes back to the {@link ~EditorUI#setEditableElement editable element}.
279
- */
280
- afterBlur?: () => void;
281
- }
282
- export {};
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/editorui/editorui
7
+ */
8
+ import ComponentFactory from '../componentfactory';
9
+ import TooltipManager from '../tooltipmanager';
10
+ import PoweredBy from './poweredby';
11
+ import type EditorUIView from './editoruiview';
12
+ import type ToolbarView from '../toolbar/toolbarview';
13
+ import { FocusTracker } from '@ckeditor/ckeditor5-utils';
14
+ import type { Editor } from '@ckeditor/ckeditor5-core';
15
+ declare const EditorUI_base: {
16
+ new (): import("@ckeditor/ckeditor5-utils").Observable;
17
+ prototype: import("@ckeditor/ckeditor5-utils").Observable;
18
+ };
19
+ /**
20
+ * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
21
+ */
22
+ export default abstract class EditorUI extends EditorUI_base {
23
+ /**
24
+ * The editor that the UI belongs to.
25
+ */
26
+ readonly editor: Editor;
27
+ /**
28
+ * An instance of the {@link module:ui/componentfactory~ComponentFactory}, a registry used by plugins
29
+ * to register factories of specific UI components.
30
+ */
31
+ readonly componentFactory: ComponentFactory;
32
+ /**
33
+ * Stores the information about the editor UI focus and propagates it so various plugins and components
34
+ * are unified as a focus group.
35
+ */
36
+ readonly focusTracker: FocusTracker;
37
+ /**
38
+ * Manages the tooltips displayed on mouseover and focus across the UI.
39
+ */
40
+ readonly tooltipManager: TooltipManager;
41
+ /**
42
+ * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
43
+ */
44
+ readonly poweredBy: PoweredBy;
45
+ /**
46
+ * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
47
+ *
48
+ * @readonly
49
+ * @default false
50
+ */
51
+ isReady: boolean;
52
+ abstract get view(): EditorUIView;
53
+ /**
54
+ * Stores viewport offsets from every direction.
55
+ *
56
+ * Viewport offset can be used to constrain balloons or other UI elements into an element smaller than the viewport.
57
+ * This can be useful if there are any other absolutely positioned elements that may interfere with editor UI.
58
+ *
59
+ * Example `editor.ui.viewportOffset` returns:
60
+ *
61
+ * ```js
62
+ * {
63
+ * top: 50,
64
+ * right: 50,
65
+ * bottom: 50,
66
+ * left: 50
67
+ * }
68
+ * ```
69
+ *
70
+ * This property can be overriden after editor already being initialized:
71
+ *
72
+ * ```js
73
+ * editor.ui.viewportOffset = {
74
+ * top: 100,
75
+ * right: 0,
76
+ * bottom: 0,
77
+ * left: 0
78
+ * };
79
+ * ```
80
+ *
81
+ * @observable
82
+ */
83
+ viewportOffset: {
84
+ left?: number;
85
+ right?: number;
86
+ top?: number;
87
+ bottom?: number;
88
+ };
89
+ /**
90
+ * Stores all editable elements used by the editor instance.
91
+ */
92
+ private _editableElementsMap;
93
+ /**
94
+ * All available & focusable toolbars.
95
+ */
96
+ private _focusableToolbarDefinitions;
97
+ /**
98
+ * Creates an instance of the editor UI class.
99
+ *
100
+ * @param editor The editor instance.
101
+ */
102
+ constructor(editor: Editor);
103
+ /**
104
+ * The main (outermost) DOM element of the editor UI.
105
+ *
106
+ * For example, in {@link module:editor-classic/classiceditor~ClassicEditor} it is a `<div>` which
107
+ * wraps the editable element and the toolbar. In {@link module:editor-inline/inlineeditor~InlineEditor}
108
+ * it is the editable element itself (as there is no other wrapper). However, in
109
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} it is set to `null` because this editor does not
110
+ * come with a single "main" HTML element (its editable element and toolbar are separate).
111
+ *
112
+ * This property can be understood as a shorthand for retrieving the element that a specific editor integration
113
+ * considers to be its main DOM element.
114
+ */
115
+ get element(): HTMLElement | null;
116
+ /**
117
+ * Fires the {@link module:ui/editorui/editorui~EditorUI#event:update `update`} event.
118
+ *
119
+ * This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to
120
+ * some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).
121
+ */
122
+ update(): void;
123
+ /**
124
+ * Destroys the UI.
125
+ */
126
+ destroy(): void;
127
+ /**
128
+ * Stores the native DOM editable element used by the editor under a unique name.
129
+ *
130
+ * Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable
131
+ * editable area, they can use the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke to navigate over editor toolbars. See {@link #addToolbar}.
132
+ *
133
+ * @param rootName The unique name of the editable element.
134
+ * @param domElement The native DOM editable element.
135
+ */
136
+ setEditableElement(rootName: string, domElement: HTMLElement): void;
137
+ /**
138
+ * Removes the editable from the editor UI. Removes all handlers added by {@link #setEditableElement}.
139
+ *
140
+ * @param rootName The name of the editable element to remove.
141
+ */
142
+ removeEditableElement(rootName: string): void;
143
+ /**
144
+ * Returns the editable editor element with the given name or null if editable does not exist.
145
+ *
146
+ * @param rootName The editable name.
147
+ */
148
+ getEditableElement(rootName?: string): HTMLElement | undefined;
149
+ /**
150
+ * Returns array of names of all editor editable elements.
151
+ */
152
+ getEditableElementsNames(): IterableIterator<string>;
153
+ /**
154
+ * Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.
155
+ *
156
+ * Focusable toolbars can be accessed (focused) by users by pressing the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
157
+ * Successive keystroke presses navigate over available toolbars.
158
+ *
159
+ * @param toolbarView A instance of the toolbar to be registered.
160
+ */
161
+ addToolbar(toolbarView: ToolbarView, options?: FocusableToolbarOptions): void;
162
+ /**
163
+ * Stores all editable elements used by the editor instance.
164
+ *
165
+ * @deprecated
166
+ */
167
+ protected get _editableElements(): unknown;
168
+ /**
169
+ * Returns viewport offsets object:
170
+ *
171
+ * ```js
172
+ * {
173
+ * top: Number,
174
+ * right: Number,
175
+ * bottom: Number,
176
+ * left: Number
177
+ * }
178
+ * ```
179
+ *
180
+ * Only top property is currently supported.
181
+ */
182
+ private _readViewportOffsetFromConfig;
183
+ /**
184
+ * Starts listening for <kbd>Alt</kbd> + <kbd>F10</kbd> and <kbd>Esc</kbd> keystrokes in the context of focusable
185
+ * {@link #setEditableElement editable elements} and {@link #addToolbar toolbars}
186
+ * to allow users navigate across the UI.
187
+ */
188
+ private _initFocusTracking;
189
+ /**
190
+ * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
191
+ *
192
+ * Focusable toolbars candidates are either:
193
+ * * already visible,
194
+ * * have `beforeFocus()` set in their {@link module:ui/editorui/editorui~FocusableToolbarDefinition definition} that suggests that
195
+ * they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible
196
+ * at this stage because it depends on its implementation, that in turn depends on the editing context (selection).
197
+ *
198
+ * **Note**: Contextual toolbars take precedence over regular toolbars.
199
+ */
200
+ private _getFocusableCandidateToolbarDefinitions;
201
+ /**
202
+ * Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).
203
+ *
204
+ * `null` is returned when no toolbar is currently focused.
205
+ */
206
+ private _getCurrentFocusedToolbarDefinition;
207
+ /**
208
+ * Focuses a focusable toolbar candidate using its definition.
209
+ *
210
+ * @param candidateToolbarDefinition A definition of the toolbar to focus.
211
+ * @returns `true` when the toolbar candidate was focused. `false` otherwise.
212
+ */
213
+ private _focusFocusableCandidateToolbar;
214
+ /**
215
+ * Provides an integration between {@link #viewportOffset} and {@link module:utils/dom/scroll~scrollViewportToShowTarget}.
216
+ * It allows the UI-agnostic engine method to consider user-configured viewport offsets specific for the integration.
217
+ *
218
+ * @param evt The `scrollToTheSelection` event info.
219
+ * @param data The payload carried by the `scrollToTheSelection` event.
220
+ */
221
+ private _handleScrollToTheSelection;
222
+ }
223
+ /**
224
+ * Fired when the editor UI is ready.
225
+ *
226
+ * Fired before {@link module:engine/controller/datacontroller~DataController#event:ready}.
227
+ *
228
+ * @eventName ~EditorUI#ready
229
+ */
230
+ export type EditorUIReadyEvent = {
231
+ name: 'ready';
232
+ args: [];
233
+ };
234
+ /**
235
+ * Fired whenever the UI (all related components) should be refreshed.
236
+ *
237
+ * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.
238
+ * It can also be fired manually via the {@link module:ui/editorui/editorui~EditorUI#update} method.
239
+ *
240
+ * @eventName ~EditorUI#update
241
+ */
242
+ export type EditorUIUpdateEvent = {
243
+ name: 'update';
244
+ args: [];
245
+ };
246
+ /**
247
+ * A definition of a focusable toolbar. Used by {@link module:ui/editorui/editorui~EditorUI#addToolbar}.
248
+ */
249
+ export interface FocusableToolbarDefinition {
250
+ /**
251
+ * An instance of a focusable toolbar view.
252
+ */
253
+ toolbarView: ToolbarView;
254
+ /**
255
+ * Options of a focusable toolbar view:
256
+ *
257
+ * * `isContextual`: Marks the higher priority toolbar. For example when there are 2 visible toolbars,
258
+ * it allows to distinguish which toolbar should be focused first after the `alt+f10` keystroke
259
+ * * `beforeFocus`: A callback executed before the `ToolbarView` gains focus upon the `Alt+F10` keystroke.
260
+ * * `afterBlur`: A callback executed after `ToolbarView` loses focus upon `Esc` keystroke but before
261
+ * the focus goes back to the `origin`.
262
+ */
263
+ options: FocusableToolbarOptions;
264
+ }
265
+ export interface FocusableToolbarOptions {
266
+ /**
267
+ * Set `true` if the toolbar is attached to the content of the editor. Such toolbar takes
268
+ * a precedence over other toolbars when a user pressed <kbd>Alt</kbd> + <kbd>F10</kbd>.
269
+ */
270
+ isContextual?: boolean;
271
+ /**
272
+ * Specify a callback executed before the toolbar instance DOM element gains focus
273
+ * upon the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
274
+ */
275
+ beforeFocus?: () => void;
276
+ /**
277
+ * Specify a callback executed after the toolbar instance DOM element loses focus upon
278
+ * <kbd>Esc</kbd> keystroke but before the focus goes back to the {@link ~EditorUI#setEditableElement editable element}.
279
+ */
280
+ afterBlur?: () => void;
281
+ }
282
+ export {};