@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,299 +1,299 @@
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/panel/balloon/contextualballoon
7
- */
8
- import BalloonPanelView from './balloonpanelview';
9
- import View from '../../view';
10
- import ButtonView from '../../button/buttonview';
11
- import type ViewCollection from '../../viewcollection';
12
- import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
13
- import { FocusTracker, type Locale, type PositionOptions } from '@ckeditor/ckeditor5-utils';
14
- import '../../../theme/components/panel/balloonrotator.css';
15
- import '../../../theme/components/panel/fakepanel.css';
16
- /**
17
- * Provides the common contextual balloon for the editor.
18
- *
19
- * The role of this plugin is to unify the contextual balloons logic, simplify views management and help
20
- * avoid the unnecessary complexity of handling multiple {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
21
- * instances in the editor.
22
- *
23
- * This plugin allows for creating single or multiple panel stacks.
24
- *
25
- * Each stack may have multiple views, with the one on the top being visible. When the visible view is removed from the stack,
26
- * the previous view becomes visible.
27
- *
28
- * It might be useful to implement nested navigation in a balloon. For instance, a toolbar view may contain a link button.
29
- * When you click it, a link view (which lets you set the URL) is created and put on top of the toolbar view, so the link panel
30
- * is displayed. When you finish editing the link and close (remove) the link view, the toolbar view is visible again.
31
- *
32
- * However, there are cases when there are multiple independent balloons to be displayed, for instance, if the selection
33
- * is inside two inline comments at the same time. For such cases, you can create two independent panel stacks.
34
- * The contextual balloon plugin will create a navigation bar to let the users switch between these panel stacks using the "Next"
35
- * and "Previous" buttons.
36
- *
37
- * If there are no views in the current stack, the balloon panel will try to switch to the next stack. If there are no
38
- * panels in any stack, the balloon panel will be hidden.
39
- *
40
- * **Note**: To force the balloon panel to show only one view, even if there are other stacks, use the `singleViewMode=true` option
41
- * when {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon#add adding} a view to a panel.
42
- *
43
- * From the implementation point of view, the contextual ballon plugin is reusing a single
44
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance to display multiple contextual balloon
45
- * panels in the editor. It also creates a special {@link module:ui/panel/balloon/contextualballoon~RotatorView rotator view},
46
- * used to manage multiple panel stacks. Rotator view is a child of the balloon panel view and the parent of the specific
47
- * view you want to display. If there is more than one panel stack to be displayed, the rotator view will add a
48
- * navigation bar. If there is only one stack, the rotator view is transparent (it does not add any UI elements).
49
- */
50
- export default class ContextualBalloon extends Plugin {
51
- /**
52
- * The {@link module:utils/dom/position~Options#limiter position limiter}
53
- * for the {@link #view balloon}, used when no `limiter` has been passed into {@link #add}
54
- * or {@link #updatePosition}.
55
- *
56
- * By default, a function that obtains the farthest DOM
57
- * {@link module:engine/view/rooteditableelement~RootEditableElement}
58
- * of the {@link module:engine/view/document~Document#selection}.
59
- */
60
- positionLimiter: PositionOptions['limiter'];
61
- visibleStack?: string;
62
- /**
63
- * The currently visible view or `null` when there are no views in any stack.
64
- *
65
- * @readonly
66
- * @observable
67
- */
68
- visibleView: View | null;
69
- /**
70
- * A total number of all stacks in the balloon.
71
- *
72
- * @private
73
- * @readonly
74
- * @observable
75
- */
76
- _numberOfStacks: number;
77
- /**
78
- * A flag that controls the single view mode.
79
- *
80
- * @private
81
- * @readonly
82
- * @observable
83
- */
84
- _singleViewMode: boolean;
85
- /**
86
- * The map of views and their stacks.
87
- */
88
- private _viewToStack;
89
- /**
90
- * The map of IDs and stacks.
91
- */
92
- private _idToStack;
93
- /**
94
- * The common balloon panel view.
95
- */
96
- private _view;
97
- /**
98
- * Rotator view embedded in the contextual balloon.
99
- * Displays the currently visible view in the balloon and provides navigation for switching stacks.
100
- */
101
- private _rotatorView;
102
- /**
103
- * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.
104
- */
105
- private _fakePanelsView;
106
- /**
107
- * @inheritDoc
108
- */
109
- static get pluginName(): "ContextualBalloon";
110
- /**
111
- * @inheritDoc
112
- */
113
- constructor(editor: Editor);
114
- /**
115
- * @inheritDoc
116
- */
117
- destroy(): void;
118
- /**
119
- * The common balloon panel view.
120
- */
121
- get view(): BalloonPanelView;
122
- /**
123
- * Returns `true` when the given view is in one of the stacks. Otherwise returns `false`.
124
- */
125
- hasView(view: View): boolean;
126
- /**
127
- * Adds a new view to the stack and makes it visible if the current stack is visible
128
- * or it is the first view in the balloon.
129
- *
130
- * @param data The configuration of the view.
131
- * @param data.stackId The ID of the stack that the view is added to. Defaults to `'main'`.
132
- * @param data.view The content of the balloon.
133
- * @param data.position Positioning options.
134
- * @param data.balloonClassName An additional CSS class added to the {@link #view balloon} when visible.
135
- * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow. Defaults to `true`.
136
- * @param data.singleViewMode Whether the view should be the only visible view even if other stacks were added. Defaults to `false`.
137
- */
138
- add(data: ViewConfiguration): void;
139
- /**
140
- * Removes the given view from the stack. If the removed view was visible,
141
- * the view preceding it in the stack will become visible instead.
142
- * When there is no view in the stack, the next stack will be displayed.
143
- * When there are no more stacks, the balloon will hide.
144
- *
145
- * @param view A view to be removed from the balloon.
146
- */
147
- remove(view: View): void;
148
- /**
149
- * Updates the position of the balloon using the position data of the first visible view in the stack.
150
- * When new position data is given, the position data of the currently visible view will be updated.
151
- *
152
- * @param position Position options.
153
- */
154
- updatePosition(position?: Partial<PositionOptions>): void;
155
- /**
156
- * Shows the last view from the stack of a given ID.
157
- */
158
- showStack(id: string): void;
159
- /**
160
- * Initializes view instances.
161
- */
162
- private _createPanelView;
163
- /**
164
- * Returns the stack of the currently visible view.
165
- */
166
- private get _visibleStack();
167
- /**
168
- * Returns the ID of the given stack.
169
- */
170
- private _getStackId;
171
- /**
172
- * Shows the last view from the next stack.
173
- */
174
- private _showNextStack;
175
- /**
176
- * Shows the last view from the previous stack.
177
- */
178
- private _showPrevStack;
179
- /**
180
- * Creates a rotator view.
181
- */
182
- private _createRotatorView;
183
- /**
184
- * Creates a fake panels view.
185
- */
186
- private _createFakePanelsView;
187
- /**
188
- * Sets the view as the content of the balloon and attaches the balloon using position
189
- * options of the first view.
190
- *
191
- * @param data Configuration.
192
- * @param data.view The view to show in the balloon.
193
- * @param data.balloonClassName Additional class name which will be added to the {@link #view balloon}.
194
- * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow.
195
- */
196
- private _showView;
197
- /**
198
- * Returns position options of the last view in the stack.
199
- * This keeps the balloon in the same position when the view is changed.
200
- */
201
- private _getBalloonPosition;
202
- }
203
- /**
204
- * The configuration of the view.
205
- */
206
- export interface ViewConfiguration {
207
- /**
208
- * The ID of the stack that the view is added to.
209
- *
210
- * @default 'main'
211
- */
212
- stackId?: string;
213
- /**
214
- * The content of the balloon.
215
- */
216
- view: View;
217
- /**
218
- * Positioning options.
219
- */
220
- position?: Partial<PositionOptions>;
221
- /**
222
- * An additional CSS class added to the {@link #view balloon} when visible.
223
- */
224
- balloonClassName?: string;
225
- /**
226
- * Whether the {@link #view balloon} should be rendered with an arrow.
227
- *
228
- * @default true
229
- */
230
- withArrow?: boolean;
231
- /**
232
- * Whether the view should be the only visible view even if other stacks were added.
233
- *
234
- * @default false
235
- */
236
- singleViewMode?: boolean;
237
- }
238
- /**
239
- * Rotator view is a helper class for the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon}.
240
- * It is used for displaying the last view from the current stack and providing navigation buttons for switching stacks.
241
- * See the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon} documentation to learn more.
242
- */
243
- export declare class RotatorView extends View {
244
- /**
245
- * Used for checking if a view is focused or not.
246
- */
247
- readonly focusTracker: FocusTracker;
248
- /**
249
- * Navigation button for switching the stack to the previous one.
250
- */
251
- readonly buttonPrevView: ButtonView;
252
- /**
253
- * Navigation button for switching the stack to the next one.
254
- */
255
- readonly buttonNextView: ButtonView;
256
- /**
257
- * A collection of the child views that creates the rotator content.
258
- */
259
- readonly content: ViewCollection;
260
- /**
261
- * Defines whether navigation is visible or not.
262
- *
263
- * @observable
264
- */
265
- isNavigationVisible: boolean;
266
- /**
267
- * @observable
268
- */
269
- counter: string;
270
- /**
271
- * @inheritDoc
272
- */
273
- constructor(locale: Locale);
274
- /**
275
- * @inheritDoc
276
- */
277
- render(): void;
278
- /**
279
- * @inheritDoc
280
- */
281
- destroy(): void;
282
- /**
283
- * Shows a given view.
284
- *
285
- * @param view The view to show.
286
- */
287
- showView(view: View): void;
288
- /**
289
- * Hides the currently displayed view.
290
- */
291
- hideView(): void;
292
- /**
293
- * Creates a navigation button view.
294
- *
295
- * @param label The button label.
296
- * @param icon The button icon.
297
- */
298
- private _createButtonView;
299
- }
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/panel/balloon/contextualballoon
7
+ */
8
+ import BalloonPanelView from './balloonpanelview';
9
+ import View from '../../view';
10
+ import ButtonView from '../../button/buttonview';
11
+ import type ViewCollection from '../../viewcollection';
12
+ import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
13
+ import { FocusTracker, type Locale, type PositionOptions } from '@ckeditor/ckeditor5-utils';
14
+ import '../../../theme/components/panel/balloonrotator.css';
15
+ import '../../../theme/components/panel/fakepanel.css';
16
+ /**
17
+ * Provides the common contextual balloon for the editor.
18
+ *
19
+ * The role of this plugin is to unify the contextual balloons logic, simplify views management and help
20
+ * avoid the unnecessary complexity of handling multiple {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
21
+ * instances in the editor.
22
+ *
23
+ * This plugin allows for creating single or multiple panel stacks.
24
+ *
25
+ * Each stack may have multiple views, with the one on the top being visible. When the visible view is removed from the stack,
26
+ * the previous view becomes visible.
27
+ *
28
+ * It might be useful to implement nested navigation in a balloon. For instance, a toolbar view may contain a link button.
29
+ * When you click it, a link view (which lets you set the URL) is created and put on top of the toolbar view, so the link panel
30
+ * is displayed. When you finish editing the link and close (remove) the link view, the toolbar view is visible again.
31
+ *
32
+ * However, there are cases when there are multiple independent balloons to be displayed, for instance, if the selection
33
+ * is inside two inline comments at the same time. For such cases, you can create two independent panel stacks.
34
+ * The contextual balloon plugin will create a navigation bar to let the users switch between these panel stacks using the "Next"
35
+ * and "Previous" buttons.
36
+ *
37
+ * If there are no views in the current stack, the balloon panel will try to switch to the next stack. If there are no
38
+ * panels in any stack, the balloon panel will be hidden.
39
+ *
40
+ * **Note**: To force the balloon panel to show only one view, even if there are other stacks, use the `singleViewMode=true` option
41
+ * when {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon#add adding} a view to a panel.
42
+ *
43
+ * From the implementation point of view, the contextual ballon plugin is reusing a single
44
+ * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance to display multiple contextual balloon
45
+ * panels in the editor. It also creates a special {@link module:ui/panel/balloon/contextualballoon~RotatorView rotator view},
46
+ * used to manage multiple panel stacks. Rotator view is a child of the balloon panel view and the parent of the specific
47
+ * view you want to display. If there is more than one panel stack to be displayed, the rotator view will add a
48
+ * navigation bar. If there is only one stack, the rotator view is transparent (it does not add any UI elements).
49
+ */
50
+ export default class ContextualBalloon extends Plugin {
51
+ /**
52
+ * The {@link module:utils/dom/position~Options#limiter position limiter}
53
+ * for the {@link #view balloon}, used when no `limiter` has been passed into {@link #add}
54
+ * or {@link #updatePosition}.
55
+ *
56
+ * By default, a function that obtains the farthest DOM
57
+ * {@link module:engine/view/rooteditableelement~RootEditableElement}
58
+ * of the {@link module:engine/view/document~Document#selection}.
59
+ */
60
+ positionLimiter: PositionOptions['limiter'];
61
+ visibleStack?: string;
62
+ /**
63
+ * The currently visible view or `null` when there are no views in any stack.
64
+ *
65
+ * @readonly
66
+ * @observable
67
+ */
68
+ visibleView: View | null;
69
+ /**
70
+ * A total number of all stacks in the balloon.
71
+ *
72
+ * @private
73
+ * @readonly
74
+ * @observable
75
+ */
76
+ _numberOfStacks: number;
77
+ /**
78
+ * A flag that controls the single view mode.
79
+ *
80
+ * @private
81
+ * @readonly
82
+ * @observable
83
+ */
84
+ _singleViewMode: boolean;
85
+ /**
86
+ * The map of views and their stacks.
87
+ */
88
+ private _viewToStack;
89
+ /**
90
+ * The map of IDs and stacks.
91
+ */
92
+ private _idToStack;
93
+ /**
94
+ * The common balloon panel view.
95
+ */
96
+ private _view;
97
+ /**
98
+ * Rotator view embedded in the contextual balloon.
99
+ * Displays the currently visible view in the balloon and provides navigation for switching stacks.
100
+ */
101
+ private _rotatorView;
102
+ /**
103
+ * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.
104
+ */
105
+ private _fakePanelsView;
106
+ /**
107
+ * @inheritDoc
108
+ */
109
+ static get pluginName(): "ContextualBalloon";
110
+ /**
111
+ * @inheritDoc
112
+ */
113
+ constructor(editor: Editor);
114
+ /**
115
+ * @inheritDoc
116
+ */
117
+ destroy(): void;
118
+ /**
119
+ * The common balloon panel view.
120
+ */
121
+ get view(): BalloonPanelView;
122
+ /**
123
+ * Returns `true` when the given view is in one of the stacks. Otherwise returns `false`.
124
+ */
125
+ hasView(view: View): boolean;
126
+ /**
127
+ * Adds a new view to the stack and makes it visible if the current stack is visible
128
+ * or it is the first view in the balloon.
129
+ *
130
+ * @param data The configuration of the view.
131
+ * @param data.stackId The ID of the stack that the view is added to. Defaults to `'main'`.
132
+ * @param data.view The content of the balloon.
133
+ * @param data.position Positioning options.
134
+ * @param data.balloonClassName An additional CSS class added to the {@link #view balloon} when visible.
135
+ * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow. Defaults to `true`.
136
+ * @param data.singleViewMode Whether the view should be the only visible view even if other stacks were added. Defaults to `false`.
137
+ */
138
+ add(data: ViewConfiguration): void;
139
+ /**
140
+ * Removes the given view from the stack. If the removed view was visible,
141
+ * the view preceding it in the stack will become visible instead.
142
+ * When there is no view in the stack, the next stack will be displayed.
143
+ * When there are no more stacks, the balloon will hide.
144
+ *
145
+ * @param view A view to be removed from the balloon.
146
+ */
147
+ remove(view: View): void;
148
+ /**
149
+ * Updates the position of the balloon using the position data of the first visible view in the stack.
150
+ * When new position data is given, the position data of the currently visible view will be updated.
151
+ *
152
+ * @param position Position options.
153
+ */
154
+ updatePosition(position?: Partial<PositionOptions>): void;
155
+ /**
156
+ * Shows the last view from the stack of a given ID.
157
+ */
158
+ showStack(id: string): void;
159
+ /**
160
+ * Initializes view instances.
161
+ */
162
+ private _createPanelView;
163
+ /**
164
+ * Returns the stack of the currently visible view.
165
+ */
166
+ private get _visibleStack();
167
+ /**
168
+ * Returns the ID of the given stack.
169
+ */
170
+ private _getStackId;
171
+ /**
172
+ * Shows the last view from the next stack.
173
+ */
174
+ private _showNextStack;
175
+ /**
176
+ * Shows the last view from the previous stack.
177
+ */
178
+ private _showPrevStack;
179
+ /**
180
+ * Creates a rotator view.
181
+ */
182
+ private _createRotatorView;
183
+ /**
184
+ * Creates a fake panels view.
185
+ */
186
+ private _createFakePanelsView;
187
+ /**
188
+ * Sets the view as the content of the balloon and attaches the balloon using position
189
+ * options of the first view.
190
+ *
191
+ * @param data Configuration.
192
+ * @param data.view The view to show in the balloon.
193
+ * @param data.balloonClassName Additional class name which will be added to the {@link #view balloon}.
194
+ * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow.
195
+ */
196
+ private _showView;
197
+ /**
198
+ * Returns position options of the last view in the stack.
199
+ * This keeps the balloon in the same position when the view is changed.
200
+ */
201
+ private _getBalloonPosition;
202
+ }
203
+ /**
204
+ * The configuration of the view.
205
+ */
206
+ export interface ViewConfiguration {
207
+ /**
208
+ * The ID of the stack that the view is added to.
209
+ *
210
+ * @default 'main'
211
+ */
212
+ stackId?: string;
213
+ /**
214
+ * The content of the balloon.
215
+ */
216
+ view: View;
217
+ /**
218
+ * Positioning options.
219
+ */
220
+ position?: Partial<PositionOptions>;
221
+ /**
222
+ * An additional CSS class added to the {@link #view balloon} when visible.
223
+ */
224
+ balloonClassName?: string;
225
+ /**
226
+ * Whether the {@link #view balloon} should be rendered with an arrow.
227
+ *
228
+ * @default true
229
+ */
230
+ withArrow?: boolean;
231
+ /**
232
+ * Whether the view should be the only visible view even if other stacks were added.
233
+ *
234
+ * @default false
235
+ */
236
+ singleViewMode?: boolean;
237
+ }
238
+ /**
239
+ * Rotator view is a helper class for the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon}.
240
+ * It is used for displaying the last view from the current stack and providing navigation buttons for switching stacks.
241
+ * See the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon} documentation to learn more.
242
+ */
243
+ export declare class RotatorView extends View {
244
+ /**
245
+ * Used for checking if a view is focused or not.
246
+ */
247
+ readonly focusTracker: FocusTracker;
248
+ /**
249
+ * Navigation button for switching the stack to the previous one.
250
+ */
251
+ readonly buttonPrevView: ButtonView;
252
+ /**
253
+ * Navigation button for switching the stack to the next one.
254
+ */
255
+ readonly buttonNextView: ButtonView;
256
+ /**
257
+ * A collection of the child views that creates the rotator content.
258
+ */
259
+ readonly content: ViewCollection;
260
+ /**
261
+ * Defines whether navigation is visible or not.
262
+ *
263
+ * @observable
264
+ */
265
+ isNavigationVisible: boolean;
266
+ /**
267
+ * @observable
268
+ */
269
+ counter: string;
270
+ /**
271
+ * @inheritDoc
272
+ */
273
+ constructor(locale: Locale);
274
+ /**
275
+ * @inheritDoc
276
+ */
277
+ render(): void;
278
+ /**
279
+ * @inheritDoc
280
+ */
281
+ destroy(): void;
282
+ /**
283
+ * Shows a given view.
284
+ *
285
+ * @param view The view to show.
286
+ */
287
+ showView(view: View): void;
288
+ /**
289
+ * Hides the currently displayed view.
290
+ */
291
+ hideView(): void;
292
+ /**
293
+ * Creates a navigation button view.
294
+ *
295
+ * @param label The button label.
296
+ * @param icon The button icon.
297
+ */
298
+ private _createButtonView;
299
+ }