@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,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
+ }