@ckeditor/ckeditor5-ui 39.0.2 → 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 (226) hide show
  1. package/lang/contexts.json +5 -1
  2. package/lang/translations/ar.po +16 -0
  3. package/lang/translations/ast.po +16 -0
  4. package/lang/translations/az.po +16 -0
  5. package/lang/translations/bg.po +16 -0
  6. package/lang/translations/bn.po +16 -0
  7. package/lang/translations/ca.po +16 -0
  8. package/lang/translations/cs.po +16 -0
  9. package/lang/translations/da.po +16 -0
  10. package/lang/translations/de-ch.po +16 -0
  11. package/lang/translations/de.po +16 -0
  12. package/lang/translations/el.po +16 -0
  13. package/lang/translations/en-au.po +16 -0
  14. package/lang/translations/en-gb.po +16 -0
  15. package/lang/translations/en.po +16 -0
  16. package/lang/translations/eo.po +16 -0
  17. package/lang/translations/es.po +16 -0
  18. package/lang/translations/et.po +16 -0
  19. package/lang/translations/eu.po +16 -0
  20. package/lang/translations/fa.po +16 -0
  21. package/lang/translations/fi.po +16 -0
  22. package/lang/translations/fr.po +16 -0
  23. package/lang/translations/gl.po +16 -0
  24. package/lang/translations/he.po +16 -0
  25. package/lang/translations/hi.po +16 -0
  26. package/lang/translations/hr.po +16 -0
  27. package/lang/translations/hu.po +16 -0
  28. package/lang/translations/id.po +16 -0
  29. package/lang/translations/it.po +16 -0
  30. package/lang/translations/ja.po +16 -0
  31. package/lang/translations/km.po +16 -0
  32. package/lang/translations/kn.po +16 -0
  33. package/lang/translations/ko.po +16 -0
  34. package/lang/translations/ku.po +16 -0
  35. package/lang/translations/lt.po +16 -0
  36. package/lang/translations/lv.po +16 -0
  37. package/lang/translations/ms.po +16 -0
  38. package/lang/translations/nb.po +16 -0
  39. package/lang/translations/ne.po +16 -0
  40. package/lang/translations/nl.po +16 -0
  41. package/lang/translations/no.po +16 -0
  42. package/lang/translations/pl.po +16 -0
  43. package/lang/translations/pt-br.po +16 -0
  44. package/lang/translations/pt.po +16 -0
  45. package/lang/translations/ro.po +16 -0
  46. package/lang/translations/ru.po +16 -0
  47. package/lang/translations/sk.po +16 -0
  48. package/lang/translations/sl.po +16 -0
  49. package/lang/translations/sq.po +16 -0
  50. package/lang/translations/sr-latn.po +16 -0
  51. package/lang/translations/sr.po +16 -0
  52. package/lang/translations/sv.po +16 -0
  53. package/lang/translations/th.po +16 -0
  54. package/lang/translations/tk.po +16 -0
  55. package/lang/translations/tr.po +16 -0
  56. package/lang/translations/tt.po +16 -0
  57. package/lang/translations/ug.po +16 -0
  58. package/lang/translations/uk.po +16 -0
  59. package/lang/translations/ur.po +16 -0
  60. package/lang/translations/uz.po +16 -0
  61. package/lang/translations/vi.po +16 -0
  62. package/lang/translations/zh-cn.po +16 -0
  63. package/lang/translations/zh.po +16 -0
  64. package/package.json +3 -3
  65. package/src/augmentation.d.ts +86 -86
  66. package/src/augmentation.js +5 -5
  67. package/src/autocomplete/autocompleteview.d.ts +81 -0
  68. package/src/autocomplete/autocompleteview.js +146 -0
  69. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  70. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  71. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  72. package/src/bindings/clickoutsidehandler.js +36 -36
  73. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  74. package/src/bindings/csstransitiondisablermixin.js +55 -55
  75. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  76. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  77. package/src/bindings/preventdefault.d.ts +33 -33
  78. package/src/bindings/preventdefault.js +34 -34
  79. package/src/bindings/submithandler.d.ts +57 -57
  80. package/src/bindings/submithandler.js +47 -47
  81. package/src/button/button.d.ts +178 -178
  82. package/src/button/button.js +5 -5
  83. package/src/button/buttonlabel.d.ts +34 -0
  84. package/src/button/buttonlabel.js +5 -0
  85. package/src/button/buttonlabelview.d.ts +31 -0
  86. package/src/button/buttonlabelview.js +42 -0
  87. package/src/button/buttonview.d.ts +185 -177
  88. package/src/button/buttonview.js +219 -231
  89. package/src/button/switchbuttonview.d.ts +45 -45
  90. package/src/button/switchbuttonview.js +75 -75
  91. package/src/colorgrid/colorgridview.d.ts +132 -132
  92. package/src/colorgrid/colorgridview.js +124 -124
  93. package/src/colorgrid/colortileview.d.ts +28 -28
  94. package/src/colorgrid/colortileview.js +40 -40
  95. package/src/colorgrid/utils.d.ts +47 -47
  96. package/src/colorgrid/utils.js +84 -84
  97. package/src/colorpicker/colorpickerview.d.ts +137 -137
  98. package/src/colorpicker/colorpickerview.js +270 -270
  99. package/src/colorpicker/utils.d.ts +43 -43
  100. package/src/colorpicker/utils.js +99 -99
  101. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  102. package/src/colorselector/colorgridsfragmentview.js +289 -289
  103. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  104. package/src/colorselector/colorpickerfragmentview.js +205 -205
  105. package/src/colorselector/colorselectorview.d.ts +242 -242
  106. package/src/colorselector/colorselectorview.js +256 -256
  107. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  108. package/src/colorselector/documentcolorcollection.js +42 -42
  109. package/src/componentfactory.d.ts +81 -81
  110. package/src/componentfactory.js +104 -104
  111. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  112. package/src/dropdown/button/dropdownbutton.js +5 -5
  113. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  114. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  115. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  116. package/src/dropdown/button/splitbuttonview.js +152 -152
  117. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  118. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  119. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  120. package/src/dropdown/dropdownpanelview.js +97 -97
  121. package/src/dropdown/dropdownview.d.ts +315 -315
  122. package/src/dropdown/dropdownview.js +379 -378
  123. package/src/dropdown/utils.d.ts +235 -221
  124. package/src/dropdown/utils.js +458 -437
  125. package/src/editableui/editableuiview.d.ts +72 -72
  126. package/src/editableui/editableuiview.js +112 -112
  127. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  128. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  129. package/src/editorui/bodycollection.d.ts +55 -55
  130. package/src/editorui/bodycollection.js +84 -84
  131. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  132. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  133. package/src/editorui/editorui.d.ts +282 -282
  134. package/src/editorui/editorui.js +410 -410
  135. package/src/editorui/editoruiview.d.ts +39 -39
  136. package/src/editorui/editoruiview.js +38 -38
  137. package/src/editorui/poweredby.d.ts +71 -71
  138. package/src/editorui/poweredby.js +276 -299
  139. package/src/focuscycler.d.ts +226 -183
  140. package/src/focuscycler.js +245 -220
  141. package/src/formheader/formheaderview.d.ts +59 -53
  142. package/src/formheader/formheaderview.js +69 -63
  143. package/src/highlightedtext/highlightedtextview.d.ts +38 -0
  144. package/src/highlightedtext/highlightedtextview.js +102 -0
  145. package/src/icon/iconview.d.ts +85 -78
  146. package/src/icon/iconview.js +114 -112
  147. package/src/iframe/iframeview.d.ts +50 -50
  148. package/src/iframe/iframeview.js +63 -63
  149. package/src/index.d.ts +73 -63
  150. package/src/index.js +70 -62
  151. package/src/input/inputbase.d.ts +107 -0
  152. package/src/input/inputbase.js +110 -0
  153. package/src/input/inputview.d.ts +36 -121
  154. package/src/input/inputview.js +24 -106
  155. package/src/inputnumber/inputnumberview.d.ts +49 -49
  156. package/src/inputnumber/inputnumberview.js +40 -40
  157. package/src/inputtext/inputtextview.d.ts +18 -18
  158. package/src/inputtext/inputtextview.js +27 -27
  159. package/src/label/labelview.d.ts +36 -36
  160. package/src/label/labelview.js +41 -41
  161. package/src/labeledfield/labeledfieldview.d.ts +187 -182
  162. package/src/labeledfield/labeledfieldview.js +157 -157
  163. package/src/labeledfield/utils.d.ts +123 -93
  164. package/src/labeledfield/utils.js +176 -131
  165. package/src/labeledinput/labeledinputview.d.ts +125 -125
  166. package/src/labeledinput/labeledinputview.js +125 -125
  167. package/src/list/listitemgroupview.d.ts +51 -0
  168. package/src/list/listitemgroupview.js +75 -0
  169. package/src/list/listitemview.d.ts +36 -35
  170. package/src/list/listitemview.js +42 -40
  171. package/src/list/listseparatorview.d.ts +18 -18
  172. package/src/list/listseparatorview.js +28 -28
  173. package/src/list/listview.d.ts +122 -65
  174. package/src/list/listview.js +187 -90
  175. package/src/model.d.ts +22 -22
  176. package/src/model.js +31 -31
  177. package/src/notification/notification.d.ts +211 -211
  178. package/src/notification/notification.js +187 -187
  179. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  180. package/src/panel/balloon/balloonpanelview.js +1010 -988
  181. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  182. package/src/panel/balloon/contextualballoon.js +572 -572
  183. package/src/panel/sticky/stickypanelview.d.ts +156 -158
  184. package/src/panel/sticky/stickypanelview.js +234 -231
  185. package/src/search/filteredview.d.ts +31 -0
  186. package/src/search/filteredview.js +5 -0
  187. package/src/search/searchinfoview.d.ts +45 -0
  188. package/src/search/searchinfoview.js +59 -0
  189. package/src/search/searchresultsview.d.ts +54 -0
  190. package/src/search/searchresultsview.js +65 -0
  191. package/src/search/text/searchtextqueryview.d.ts +76 -0
  192. package/src/search/text/searchtextqueryview.js +75 -0
  193. package/src/search/text/searchtextview.d.ts +219 -0
  194. package/src/search/text/searchtextview.js +201 -0
  195. package/src/spinner/spinnerview.d.ts +25 -0
  196. package/src/spinner/spinnerview.js +38 -0
  197. package/src/template.d.ts +942 -942
  198. package/src/template.js +1294 -1294
  199. package/src/textarea/textareaview.d.ts +88 -0
  200. package/src/textarea/textareaview.js +140 -0
  201. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  202. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  203. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  204. package/src/toolbar/block/blockbuttonview.js +41 -41
  205. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  206. package/src/toolbar/block/blocktoolbar.js +395 -391
  207. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -39
  208. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  209. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  210. package/src/toolbar/toolbarlinebreakview.js +28 -28
  211. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  212. package/src/toolbar/toolbarseparatorview.js +28 -28
  213. package/src/toolbar/toolbarview.d.ts +266 -265
  214. package/src/toolbar/toolbarview.js +719 -717
  215. package/src/tooltipmanager.d.ts +180 -180
  216. package/src/tooltipmanager.js +353 -353
  217. package/src/view.d.ts +422 -422
  218. package/src/view.js +396 -396
  219. package/src/viewcollection.d.ts +139 -139
  220. package/src/viewcollection.js +206 -206
  221. package/theme/components/autocomplete/autocomplete.css +22 -0
  222. package/theme/components/formheader/formheader.css +8 -0
  223. package/theme/components/highlightedtext/highlightedtext.css +12 -0
  224. package/theme/components/search/search.css +43 -0
  225. package/theme/components/spinner/spinner.css +23 -0
  226. 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 {};