@ckeditor/ckeditor5-ui 42.0.2 → 43.0.0-alpha.1

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 (85) hide show
  1. package/CHANGELOG.md +1 -539
  2. package/dist/button/button.d.ts +0 -6
  3. package/dist/button/buttonview.d.ts +16 -4
  4. package/dist/button/filedialogbuttonview.d.ts +42 -15
  5. package/dist/button/listitembuttonview.d.ts +82 -0
  6. package/dist/editorui/accessibilityhelp/accessibilityhelp.d.ts +1 -1
  7. package/dist/editorui/editorui.d.ts +57 -0
  8. package/dist/editorui/editoruiview.d.ts +5 -0
  9. package/dist/focuscycler.d.ts +53 -7
  10. package/dist/formheader/formheaderview.d.ts +1 -2
  11. package/dist/highlightedtext/buttonlabelwithhighlightview.d.ts +34 -0
  12. package/dist/highlightedtext/labelwithhighlightview.d.ts +30 -0
  13. package/dist/index-editor.css +32 -0
  14. package/dist/index.css +42 -0
  15. package/dist/index.css.map +1 -1
  16. package/dist/index.d.ts +6 -2
  17. package/dist/index.js +4934 -4291
  18. package/dist/index.js.map +1 -1
  19. package/dist/menubar/menubarmenubuttonview.d.ts +2 -2
  20. package/dist/menubar/menubarmenulistitembuttonview.d.ts +2 -2
  21. package/dist/menubar/menubarmenulistitemfiledialogbuttonview.d.ts +2 -2
  22. package/dist/menubar/menubarmenulistview.d.ts +5 -0
  23. package/dist/menubar/menubarview.d.ts +10 -1
  24. package/dist/menubar/utils.d.ts +16 -10
  25. package/dist/panel/balloon/balloonpanelview.d.ts +13 -1
  26. package/dist/search/filtergroupanditemnames.d.ts +19 -0
  27. package/dist/toolbar/block/blocktoolbar.d.ts +14 -0
  28. package/dist/tooltipmanager.d.ts +0 -7
  29. package/dist/translations/sr-latn.js +1 -1
  30. package/dist/translations/sr-latn.umd.js +1 -1
  31. package/lang/translations/sr-latn.po +17 -17
  32. package/package.json +3 -3
  33. package/src/arialiveannouncer.js +0 -1
  34. package/src/bindings/draggableviewmixin.js +1 -1
  35. package/src/button/button.d.ts +0 -6
  36. package/src/button/buttonview.d.ts +16 -4
  37. package/src/button/buttonview.js +32 -2
  38. package/src/button/filedialogbuttonview.d.ts +42 -15
  39. package/src/button/filedialogbuttonview.js +69 -27
  40. package/src/button/listitembuttonview.d.ts +78 -0
  41. package/src/button/listitembuttonview.js +129 -0
  42. package/src/colorpicker/colorpickerview.js +5 -0
  43. package/src/colorselector/colorgridsfragmentview.js +9 -5
  44. package/src/dialog/dialog.js +4 -1
  45. package/src/dialog/dialogview.js +1 -14
  46. package/src/dropdown/utils.js +23 -3
  47. package/src/editorui/accessibilityhelp/accessibilityhelp.d.ts +1 -1
  48. package/src/editorui/accessibilityhelp/accessibilityhelp.js +20 -12
  49. package/src/editorui/bodycollection.js +2 -1
  50. package/src/editorui/editorui.d.ts +57 -0
  51. package/src/editorui/editorui.js +104 -12
  52. package/src/editorui/editoruiview.d.ts +5 -0
  53. package/src/focuscycler.d.ts +53 -7
  54. package/src/focuscycler.js +79 -1
  55. package/src/formheader/formheaderview.d.ts +1 -2
  56. package/src/formheader/formheaderview.js +1 -2
  57. package/src/highlightedtext/buttonlabelwithhighlightview.d.ts +30 -0
  58. package/src/highlightedtext/buttonlabelwithhighlightview.js +31 -0
  59. package/src/highlightedtext/labelwithhighlightview.d.ts +26 -0
  60. package/src/highlightedtext/labelwithhighlightview.js +33 -0
  61. package/src/index.d.ts +6 -2
  62. package/src/index.js +6 -2
  63. package/src/menubar/menubarmenubuttonview.d.ts +2 -2
  64. package/src/menubar/menubarmenubuttonview.js +2 -2
  65. package/src/menubar/menubarmenulistitembuttonview.d.ts +2 -2
  66. package/src/menubar/menubarmenulistitembuttonview.js +2 -2
  67. package/src/menubar/menubarmenulistitemfiledialogbuttonview.d.ts +2 -2
  68. package/src/menubar/menubarmenulistitemfiledialogbuttonview.js +2 -2
  69. package/src/menubar/menubarmenulistview.d.ts +5 -0
  70. package/src/menubar/menubarmenulistview.js +49 -0
  71. package/src/menubar/menubarview.d.ts +10 -1
  72. package/src/menubar/menubarview.js +11 -4
  73. package/src/menubar/utils.d.ts +16 -10
  74. package/src/menubar/utils.js +84 -53
  75. package/src/panel/balloon/balloonpanelview.d.ts +13 -1
  76. package/src/panel/balloon/balloonpanelview.js +41 -3
  77. package/src/search/filtergroupanditemnames.d.ts +15 -0
  78. package/src/search/filtergroupanditemnames.js +38 -0
  79. package/src/search/text/searchtextview.js +1 -0
  80. package/src/toolbar/balloon/balloontoolbar.js +1 -1
  81. package/src/toolbar/block/blocktoolbar.d.ts +14 -0
  82. package/src/toolbar/block/blocktoolbar.js +83 -3
  83. package/src/tooltipmanager.d.ts +0 -7
  84. package/src/tooltipmanager.js +1 -18
  85. package/theme/components/button/listitembutton.css +38 -0
@@ -10,14 +10,14 @@
10
10
  * @module ui/menubar/menubarmenubuttonview
11
11
  */
12
12
  import IconView from '../icon/iconview.js';
13
- import ButtonView from '../button/buttonview.js';
13
+ import ListItemButtonView from '../button/listitembuttonview.js';
14
14
  import type { Locale } from '@ckeditor/ckeditor5-utils';
15
15
  import '../../theme/components/menubar/menubarmenubutton.css';
16
16
  /**
17
17
  * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
18
18
  * open both top-level bar menus as well as sub-menus.
19
19
  */
20
- export default class MenuBarMenuButtonView extends ButtonView {
20
+ export default class MenuBarMenuButtonView extends ListItemButtonView {
21
21
  /**
22
22
  * An icon that displays an arrow to indicate a direction of the menu.
23
23
  */
@@ -10,12 +10,12 @@
10
10
  * @module ui/menubar/menubarmenulistitembuttonview
11
11
  */
12
12
  import type { Locale } from '@ckeditor/ckeditor5-utils';
13
- import ButtonView from '../button/buttonview.js';
13
+ import ListItemButtonView from '../button/listitembuttonview.js';
14
14
  import '../../theme/components/menubar/menubarmenulistitembutton.css';
15
15
  /**
16
16
  * A menu bar list button view. Buttons like this one execute user actions.
17
17
  */
18
- export default class MenuBarMenuListItemButtonView extends ButtonView {
18
+ export default class MenuBarMenuListItemButtonView extends ListItemButtonView {
19
19
  /**
20
20
  * Creates an instance of the menu bar list button view.
21
21
  *
@@ -10,14 +10,14 @@
10
10
  * @module ui/menubar/menubarmenulistitemfiledialogbuttonview
11
11
  */
12
12
  import type { Locale } from '@ckeditor/ckeditor5-utils';
13
- import FileDialogButtonView from '../button/filedialogbuttonview.js';
13
+ import { FileDialogListItemButtonView } from '../button/filedialogbuttonview.js';
14
14
  import '../../theme/components/menubar/menubarmenulistitembutton.css';
15
15
  /**
16
16
  * A menu bar list file dialog button view. Buttons like this one execute user actions.
17
17
  *
18
18
  * This component provides a button that opens the native file selection dialog.
19
19
  */
20
- export default class MenuBarMenuListItemFileDialogButtonView extends FileDialogButtonView {
20
+ export default class MenuBarMenuListItemFileDialogButtonView extends FileDialogListItemButtonView {
21
21
  /**
22
22
  * Creates an instance of the menu bar list button view.
23
23
  *
@@ -25,4 +25,9 @@ export default class MenuBarMenuListView extends ListView {
25
25
  * @param locale The localization services instance.
26
26
  */
27
27
  constructor(locale: Locale);
28
+ /**
29
+ * This method adds empty space if there is any toggleable item in the list.
30
+ * It makes the list properly aligned.
31
+ */
32
+ private _setItemsCheckSpace;
28
33
  }
@@ -32,6 +32,15 @@ export default class MenuBarView extends View implements FocusableView {
32
32
  * @observable
33
33
  */
34
34
  isOpen: boolean;
35
+ /**
36
+ * Indicates whether the menu bar has been interacted with using the keyboard.
37
+ *
38
+ * It is useful for showing focus outlines while hovering over the menu bar when
39
+ * interaction with the keyboard was detected.
40
+ *
41
+ * @observable
42
+ */
43
+ isFocusBorderEnabled: boolean;
35
44
  /**
36
45
  * A list of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instances registered in the menu bar.
37
46
  *
@@ -51,7 +60,7 @@ export default class MenuBarView extends View implements FocusableView {
51
60
  * See the {@link module:core/editor/editorconfig~EditorConfig#menuBar menu bar} in the editor
52
61
  * configuration reference to learn how to configure the menu bar.
53
62
  */
54
- fillFromConfig(config: NormalizedMenuBarConfigObject, componentFactory: ComponentFactory): void;
63
+ fillFromConfig(config: NormalizedMenuBarConfigObject, componentFactory: ComponentFactory, extraItems?: Array<MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu>): void;
55
64
  /**
56
65
  * @inheritDoc
57
66
  */
@@ -7,9 +7,8 @@
7
7
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
8
8
  */
9
9
  import type MenuBarMenuView from './menubarmenuview.js';
10
- import type { default as MenuBarView, MenuBarConfig, MenuBarConfigObject, NormalizedMenuBarConfigObject } from './menubarview.js';
10
+ import type { default as MenuBarView, MenuBarConfig, MenuBarConfigObject, MenuBarConfigAddedGroup, MenuBarConfigAddedMenu, NormalizedMenuBarConfigObject, MenuBarConfigAddedItem } from './menubarview.js';
11
11
  import type ComponentFactory from '../componentfactory.js';
12
- import type { Editor } from '@ckeditor/ckeditor5-core';
13
12
  import { type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
14
13
  type DeepReadonly<T> = Readonly<{
15
14
  [K in keyof T]: T[K] extends string ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;
@@ -48,6 +47,11 @@ export declare const MenuBarBehaviors: {
48
47
  * Closes the bar when the user clicked outside of it (page body, editor root, etc.).
49
48
  */
50
49
  closeOnClickOutside(menuBarView: MenuBarView): void;
50
+ /**
51
+ * Tracks the keyboard focus interaction on the menu bar view. It is used to determine if the nested items
52
+ * of the menu bar should render focus rings after first interaction with the keyboard.
53
+ */
54
+ enableFocusHighlightOnInteraction(menuBarView: MenuBarView): void;
51
55
  };
52
56
  /**
53
57
  * Behaviors of the {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} component.
@@ -237,6 +241,12 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
237
241
  * ]
238
242
  * },
239
243
  * {
244
+ * groupId: 'previewMergeFields',
245
+ * items: [
246
+ * 'menuBar:previewMergeFields'
247
+ * ]
248
+ * },
249
+ * {
240
250
  * groupId: 'restrictedEditingException',
241
251
  * items: [
242
252
  * 'menuBar:restrictedEditingException'
@@ -261,7 +271,8 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
261
271
  * groupId: 'insertInline',
262
272
  * items: [
263
273
  * 'menuBar:link',
264
- * 'menuBar:comment'
274
+ * 'menuBar:comment',
275
+ * 'menuBar:insertMergeField'
265
276
  * ]
266
277
  * },
267
278
  * {
@@ -431,15 +442,10 @@ export declare function normalizeMenuBarConfig(config: Readonly<MenuBarConfig>):
431
442
  * * Purged empty menus,
432
443
  * * Localized top-level menu labels.
433
444
  */
434
- export declare function processMenuBarConfig({ normalizedConfig, locale, componentFactory }: {
445
+ export declare function processMenuBarConfig({ normalizedConfig, locale, componentFactory, extraItems }: {
435
446
  normalizedConfig: NormalizedMenuBarConfigObject;
436
447
  locale: Locale;
437
448
  componentFactory: ComponentFactory;
449
+ extraItems: Array<MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu>;
438
450
  }): NormalizedMenuBarConfigObject;
439
- /**
440
- * Initializes menu bar for given editor.
441
- *
442
- * @internal
443
- */
444
- export declare function _initMenuBar(editor: Editor, menuBarView: MenuBarView): void;
445
451
  export {};
@@ -114,10 +114,18 @@ export default class BalloonPanelView extends View {
114
114
  * @private
115
115
  */
116
116
  private _pinWhenIsVisibleCallback;
117
+ /**
118
+ * An instance of resize observer used to detect if target element is still visible.
119
+ */
120
+ private _resizeObserver;
117
121
  /**
118
122
  * @inheritDoc
119
123
  */
120
124
  constructor(locale?: Locale);
125
+ /**
126
+ * @inheritDoc
127
+ */
128
+ destroy(): void;
121
129
  /**
122
130
  * Shows the panel.
123
131
  *
@@ -161,8 +169,10 @@ export default class BalloonPanelView extends View {
161
169
  *
162
170
  * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
163
171
  * Default `positions` array is {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
172
+ * @returns Whether the balloon was shown and successfully attached or not. Attaching can fail if the target
173
+ * provided in the options is invisible (e.g. element detached from DOM).
164
174
  */
165
- attachTo(options: Partial<PositionOptions>): void;
175
+ attachTo(options: Partial<PositionOptions>): boolean;
166
176
  /**
167
177
  * Works the same way as the {@link #attachTo} method except that the position of the panel is
168
178
  * continuously updated when:
@@ -206,6 +216,8 @@ export default class BalloonPanelView extends View {
206
216
  * Starts managing the pinned state of the panel. See {@link #pin}.
207
217
  *
208
218
  * @param options Positioning options compatible with {@link module:utils/dom/position~getOptimalPosition}.
219
+ * @returns Whether the balloon was shown and successfully attached or not. Attaching can fail if the target
220
+ * provided in the options is invisible (e.g. element detached from DOM).
209
221
  */
210
222
  private _startPinning;
211
223
  /**
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2024, 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
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
7
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
8
+ */
9
+ import type ViewCollection from '../viewcollection.js';
10
+ import type ListItemGroupView from '../list/listitemgroupview.js';
11
+ import type ListItemView from '../list/listitemview.js';
12
+ import type ListSeparatorView from '../list/listseparatorview.js';
13
+ /**
14
+ * A filter function that returns matching item and group names in the list view.
15
+ */
16
+ export default function filterGroupAndItemNames(regExp: RegExp | null, items: ViewCollection<ListItemGroupView | ListItemView | ListSeparatorView>): {
17
+ resultsCount: number;
18
+ totalItemsCount: number;
19
+ };
@@ -137,12 +137,26 @@ export default class BlockToolbar extends Plugin {
137
137
  * @param focusEditable When `true`, the editable will be focused after hiding the panel.
138
138
  */
139
139
  private _hidePanel;
140
+ /**
141
+ * Repositions the button on scroll.
142
+ */
143
+ private _repositionButtonOnScroll;
140
144
  /**
141
145
  * Attaches the {@link #buttonView} to the target block of content.
142
146
  *
143
147
  * @param targetElement Target element.
144
148
  */
145
149
  private _attachButtonToElement;
150
+ /**
151
+ * Clips the button element to the viewport of the editable element.
152
+ *
153
+ * * If the button overflows the editable viewport, it is clipped to make it look like it's cut off by the editable scrollable region.
154
+ * * If the button is fully hidden by the top of the editable, it is not clickable but still visible in the DOM.
155
+ *
156
+ * @param buttonView The button view to clip.
157
+ * @param editableElement The editable element whose viewport is used for clipping.
158
+ */
159
+ private _clipButtonToViewport;
146
160
  /**
147
161
  * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.
148
162
  */
@@ -97,13 +97,6 @@ export default class TooltipManager extends /* #__PURE__ */ TooltipManager_base
97
97
  * Stores the current tooltip position. `null` when there's no tooltip in the UI.
98
98
  */
99
99
  private _currentTooltipPosition;
100
- /**
101
- * An instance of the resize observer that keeps track on target element visibility,
102
- * when it hides the tooltip should also disappear.
103
- *
104
- * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
105
- */
106
- private _resizeObserver;
107
100
  /**
108
101
  * An instance of the mutation observer that keeps track on target element attributes changes.
109
102
  */
@@ -2,4 +2,4 @@
2
2
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
- export default {"sr-latn":{"dictionary":{"Rich Text Editor":"Prošireni uređivač teksta","Editor editing area: %0":"Oblast za uređivanje urednika: %0","Edit block":"Blok uređivač","Click to edit block":"Kliknite da biste uredili blok","Drag to move":"Prevucite da biste premestili","Next":"Sledeći","Previous":"Prethodni","Editor toolbar":"Uređivač traka sa alatkama","Dropdown toolbar":"Padajuća traka sa alatkama","Black":"Crna","Dim grey":"Bledo siva","Grey":"Siva","Light grey":"Svetlo siva","White":"Bela","Red":"Crvena","Orange":"Narandžasta","Yellow":"Žuta","Light green":"Svetlo zelena","Green":"Zelena","Aquamarine":"Zelenkastoplava","Turquoise":"Tirkizna","Light blue":"Svetloplava","Blue":"Plava","Purple":"Ljubičasta","Editor block content toolbar":"Traka sa alatkama za blokiranje sadržaja uređivača","Editor contextual toolbar":"Kontekstualna traka sa alatkama Editor","HEX":"HEX","No results found":"Nije pronađen nijedan rezultat","No searchable items":"Nema stavki koje se mogu pretražiti","Editor dialog":"","Close":"","Help Contents. To close this dialog press ESC.":"","Below, you can find a list of keyboard shortcuts that can be used in the editor.":"","(may require <kbd>Fn</kbd>)":"","Accessibility":"","Accessibility help":"","Press %0 for help.":"","Move focus in and out of an active dialog window":"","MENU_BAR_MENU_FILE":"","MENU_BAR_MENU_EDIT":"Uredi","MENU_BAR_MENU_VIEW":"","MENU_BAR_MENU_INSERT":"Ubaci","MENU_BAR_MENU_FORMAT":"","MENU_BAR_MENU_TOOLS":"","MENU_BAR_MENU_HELP":"","MENU_BAR_MENU_TEXT":"Tekst","MENU_BAR_MENU_FONT":"","Editor menu bar":"","Please enter a valid color (e.g. \"ff0000\").":""},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}}
5
+ export default {"sr-latn":{"dictionary":{"Rich Text Editor":"Prošireni uređivač teksta","Editor editing area: %0":"Oblast za uređivanje urednika: %0","Edit block":"Blok uređivač","Click to edit block":"Kliknite da biste uredili blok","Drag to move":"Prevucite da biste premestili","Next":"Sledeći","Previous":"Prethodni","Editor toolbar":"Uređivač traka sa alatkama","Dropdown toolbar":"Padajuća traka sa alatkama","Black":"Crna","Dim grey":"Bledo siva","Grey":"Siva","Light grey":"Svetlo siva","White":"Bela","Red":"Crvena","Orange":"Narandžasta","Yellow":"Žuta","Light green":"Svetlo zelena","Green":"Zelena","Aquamarine":"Zelenkastoplava","Turquoise":"Tirkizna","Light blue":"Svetloplava","Blue":"Plava","Purple":"Ljubičasta","Editor block content toolbar":"Traka sa alatkama za blokiranje sadržaja uređivača","Editor contextual toolbar":"Kontekstualna traka sa alatkama Editor","HEX":"HEX","No results found":"Nije pronađen nijedan rezultat","No searchable items":"Nema stavki koje se mogu pretražiti","Editor dialog":"Editor dijalog","Close":"Blizu","Help Contents. To close this dialog press ESC.":"Sadržaj pomoći. Da biste zatvorili ovaj dijalog, pritisnite ESC.","Below, you can find a list of keyboard shortcuts that can be used in the editor.":"Ispod možete pronaći listu prečica na tastaturi koje se mogu koristiti u uređivaču.","(may require <kbd>Fn</kbd>)":"(možda zahteva Fn)","Accessibility":"Pristupačnost","Accessibility help":"Pomoć za pristupačnost","Press %0 for help.":"Pritisnite %0 za pomoć.","Move focus in and out of an active dialog window":"Pomeranje fokusa u i van aktivnog prozora dijaloga","MENU_BAR_MENU_FILE":"File","MENU_BAR_MENU_EDIT":"Uredi","MENU_BAR_MENU_VIEW":"View","MENU_BAR_MENU_INSERT":"Ubaci","MENU_BAR_MENU_FORMAT":"Format","MENU_BAR_MENU_TOOLS":"Alati","MENU_BAR_MENU_HELP":"Pomoć","MENU_BAR_MENU_TEXT":"Tekst","MENU_BAR_MENU_FONT":"Font","Editor menu bar":"Traka menija uređivača","Please enter a valid color (e.g. \"ff0000\").":"Unesite važeću boju (npr. „ff0000“)."},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}}
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  ( e => {
7
- const { [ 'sr-latn' ]: { dictionary, getPluralForm } } = {"sr-latn":{"dictionary":{"Rich Text Editor":"Prošireni uređivač teksta","Editor editing area: %0":"Oblast za uređivanje urednika: %0","Edit block":"Blok uređivač","Click to edit block":"Kliknite da biste uredili blok","Drag to move":"Prevucite da biste premestili","Next":"Sledeći","Previous":"Prethodni","Editor toolbar":"Uređivač traka sa alatkama","Dropdown toolbar":"Padajuća traka sa alatkama","Black":"Crna","Dim grey":"Bledo siva","Grey":"Siva","Light grey":"Svetlo siva","White":"Bela","Red":"Crvena","Orange":"Narandžasta","Yellow":"Žuta","Light green":"Svetlo zelena","Green":"Zelena","Aquamarine":"Zelenkastoplava","Turquoise":"Tirkizna","Light blue":"Svetloplava","Blue":"Plava","Purple":"Ljubičasta","Editor block content toolbar":"Traka sa alatkama za blokiranje sadržaja uređivača","Editor contextual toolbar":"Kontekstualna traka sa alatkama Editor","HEX":"HEX","No results found":"Nije pronađen nijedan rezultat","No searchable items":"Nema stavki koje se mogu pretražiti","Editor dialog":"","Close":"","Help Contents. To close this dialog press ESC.":"","Below, you can find a list of keyboard shortcuts that can be used in the editor.":"","(may require <kbd>Fn</kbd>)":"","Accessibility":"","Accessibility help":"","Press %0 for help.":"","Move focus in and out of an active dialog window":"","MENU_BAR_MENU_FILE":"","MENU_BAR_MENU_EDIT":"Uredi","MENU_BAR_MENU_VIEW":"","MENU_BAR_MENU_INSERT":"Ubaci","MENU_BAR_MENU_FORMAT":"","MENU_BAR_MENU_TOOLS":"","MENU_BAR_MENU_HELP":"","MENU_BAR_MENU_TEXT":"Tekst","MENU_BAR_MENU_FONT":"","Editor menu bar":"","Please enter a valid color (e.g. \"ff0000\").":""},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}};
7
+ const { [ 'sr-latn' ]: { dictionary, getPluralForm } } = {"sr-latn":{"dictionary":{"Rich Text Editor":"Prošireni uređivač teksta","Editor editing area: %0":"Oblast za uređivanje urednika: %0","Edit block":"Blok uređivač","Click to edit block":"Kliknite da biste uredili blok","Drag to move":"Prevucite da biste premestili","Next":"Sledeći","Previous":"Prethodni","Editor toolbar":"Uređivač traka sa alatkama","Dropdown toolbar":"Padajuća traka sa alatkama","Black":"Crna","Dim grey":"Bledo siva","Grey":"Siva","Light grey":"Svetlo siva","White":"Bela","Red":"Crvena","Orange":"Narandžasta","Yellow":"Žuta","Light green":"Svetlo zelena","Green":"Zelena","Aquamarine":"Zelenkastoplava","Turquoise":"Tirkizna","Light blue":"Svetloplava","Blue":"Plava","Purple":"Ljubičasta","Editor block content toolbar":"Traka sa alatkama za blokiranje sadržaja uređivača","Editor contextual toolbar":"Kontekstualna traka sa alatkama Editor","HEX":"HEX","No results found":"Nije pronađen nijedan rezultat","No searchable items":"Nema stavki koje se mogu pretražiti","Editor dialog":"Editor dijalog","Close":"Blizu","Help Contents. To close this dialog press ESC.":"Sadržaj pomoći. Da biste zatvorili ovaj dijalog, pritisnite ESC.","Below, you can find a list of keyboard shortcuts that can be used in the editor.":"Ispod možete pronaći listu prečica na tastaturi koje se mogu koristiti u uređivaču.","(may require <kbd>Fn</kbd>)":"(možda zahteva Fn)","Accessibility":"Pristupačnost","Accessibility help":"Pomoć za pristupačnost","Press %0 for help.":"Pritisnite %0 za pomoć.","Move focus in and out of an active dialog window":"Pomeranje fokusa u i van aktivnog prozora dijaloga","MENU_BAR_MENU_FILE":"File","MENU_BAR_MENU_EDIT":"Uredi","MENU_BAR_MENU_VIEW":"View","MENU_BAR_MENU_INSERT":"Ubaci","MENU_BAR_MENU_FORMAT":"Format","MENU_BAR_MENU_TOOLS":"Alati","MENU_BAR_MENU_HELP":"Pomoć","MENU_BAR_MENU_TEXT":"Tekst","MENU_BAR_MENU_FONT":"Font","Editor menu bar":"Traka menija uređivača","Please enter a valid color (e.g. \"ff0000\").":"Unesite važeću boju (npr. „ff0000“)."},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}};
8
8
  e[ 'sr-latn' ] ||= { dictionary: {}, getPluralForm: null };
9
9
  e[ 'sr-latn' ].dictionary = Object.assign( e[ 'sr-latn' ].dictionary, dictionary );
10
10
  e[ 'sr-latn' ].getPluralForm = getPluralForm;
@@ -135,43 +135,43 @@ msgstr "Nema stavki koje se mogu pretražiti"
135
135
 
136
136
  msgctxt "A default label of a dialog window displayed on top the editor."
137
137
  msgid "Editor dialog"
138
- msgstr ""
138
+ msgstr "Editor dijalog"
139
139
 
140
140
  msgctxt "The label and the tooltip for the close button in the dialog header."
141
141
  msgid "Close"
142
- msgstr ""
142
+ msgstr "Blizu"
143
143
 
144
144
  msgctxt "Accessibility help dialog assistive technologies label telling users how to exit the dialog."
145
145
  msgid "Help Contents. To close this dialog press ESC."
146
- msgstr ""
146
+ msgstr "Sadržaj pomoći. Da biste zatvorili ovaj dijalog, pritisnite ESC."
147
147
 
148
148
  msgctxt "Accessibility help dialog text explaining what can be found in that dialog."
149
149
  msgid "Below, you can find a list of keyboard shortcuts that can be used in the editor."
150
- msgstr ""
150
+ msgstr "Ispod možete pronaći listu prečica na tastaturi koje se mogu koristiti u uređivaču."
151
151
 
152
152
  msgctxt "Accessibility help dialog text displayed next to keystrokes that may require the Fn key on Mac."
153
153
  msgid "(may require <kbd>Fn</kbd>)"
154
- msgstr ""
154
+ msgstr "(možda zahteva Fn)"
155
155
 
156
156
  msgctxt "The label for the button that opens the Accessibility help dialog from the application menu bar."
157
157
  msgid "Accessibility"
158
- msgstr ""
158
+ msgstr "Pristupačnost"
159
159
 
160
160
  msgctxt "Accessibility help dialog title."
161
161
  msgid "Accessibility help"
162
- msgstr ""
162
+ msgstr "Pomoć za pristupačnost"
163
163
 
164
164
  msgctxt "Assistive technologies label added to each editor editing area informing users about the possibility of opening the accessibility help dialog."
165
165
  msgid "Press %0 for help."
166
- msgstr ""
166
+ msgstr "Pritisnite %0 za pomoć."
167
167
 
168
168
  msgctxt "Keystroke description for assistive technologies: keystroke for moving focus out of an active dialog window."
169
169
  msgid "Move focus in and out of an active dialog window"
170
- msgstr ""
170
+ msgstr "Pomeranje fokusa u i van aktivnog prozora dijaloga"
171
171
 
172
172
  msgctxt "The label of the top-level application menu bar menu containing buttons and features related to the whole document (e.g. export to PDF, import from Word, etc.)."
173
173
  msgid "MENU_BAR_MENU_FILE"
174
- msgstr ""
174
+ msgstr "File"
175
175
 
176
176
  msgctxt "The label of the top-level application menu bar menu containing buttons and features related to general editing (e.g. undo, redo, select all, etc.)."
177
177
  msgid "MENU_BAR_MENU_EDIT"
@@ -179,7 +179,7 @@ msgstr "Uredi"
179
179
 
180
180
  msgctxt "The label of the top-level application menu bar menu containing buttons and features related to the view of the editor (e.g. show source)."
181
181
  msgid "MENU_BAR_MENU_VIEW"
182
- msgstr ""
182
+ msgstr "View"
183
183
 
184
184
  msgctxt "The label of the top-level application menu bar menu containing buttons and features that insert content (e.g. insert table, insert image, etc.)."
185
185
  msgid "MENU_BAR_MENU_INSERT"
@@ -187,15 +187,15 @@ msgstr "Ubaci"
187
187
 
188
188
  msgctxt "The label of the top-level application menu bar menu containing buttons and features related to content formatting (e.g. bold, font color, heading, etc.)."
189
189
  msgid "MENU_BAR_MENU_FORMAT"
190
- msgstr ""
190
+ msgstr "Format"
191
191
 
192
192
  msgctxt "The label of the top-level application menu bar menu containing various editor tools (e.g. AI assistant, track changes, etc.)."
193
193
  msgid "MENU_BAR_MENU_TOOLS"
194
- msgstr ""
194
+ msgstr "Alati"
195
195
 
196
196
  msgctxt "The label of the top-level application menu bar menu containing buttons and features helping users to learn about the editor (e.g. accessibility help)."
197
197
  msgid "MENU_BAR_MENU_HELP"
198
- msgstr ""
198
+ msgstr "Pomoć"
199
199
 
200
200
  msgctxt "The label of the application menu bar menu containing buttons and features that apply formatting to a text (e.g. bold, italic, etc.)."
201
201
  msgid "MENU_BAR_MENU_TEXT"
@@ -203,12 +203,12 @@ msgstr "Tekst"
203
203
 
204
204
  msgctxt "The label of the application menu bar menu containing buttons and features that control the font of the edited content (e.g. font size, font color, etc.)."
205
205
  msgid "MENU_BAR_MENU_FONT"
206
- msgstr ""
206
+ msgstr "Font"
207
207
 
208
208
  msgctxt "The accessible label of the editor menu bar used by assistive technologies."
209
209
  msgid "Editor menu bar"
210
- msgstr ""
210
+ msgstr "Traka menija uređivača"
211
211
 
212
212
  msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
213
213
  msgid "Please enter a valid color (e.g. \"ff0000\")."
214
- msgstr ""
214
+ msgstr "Unesite važeću boju (npr. „ff0000“)."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-ui",
3
- "version": "42.0.2",
3
+ "version": "43.0.0-alpha.1",
4
4
  "description": "The UI framework and standard UI library of CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -12,8 +12,8 @@
12
12
  "type": "module",
13
13
  "main": "src/index.js",
14
14
  "dependencies": {
15
- "@ckeditor/ckeditor5-core": "42.0.2",
16
- "@ckeditor/ckeditor5-utils": "42.0.2",
15
+ "@ckeditor/ckeditor5-core": "43.0.0-alpha.1",
16
+ "@ckeditor/ckeditor5-utils": "43.0.0-alpha.1",
17
17
  "color-convert": "2.0.1",
18
18
  "color-parse": "1.4.2",
19
19
  "lodash-es": "4.17.21",
@@ -111,7 +111,6 @@ export class AriaLiveAnnouncerRegionView extends View {
111
111
  this.setTemplate({
112
112
  tag: 'div',
113
113
  attributes: {
114
- role: 'region',
115
114
  'aria-live': politeness,
116
115
  'aria-relevant': 'additions'
117
116
  },
@@ -24,7 +24,7 @@ import { global } from '@ckeditor/ckeditor5-utils';
24
24
  export default function DraggableViewMixin(view) {
25
25
  class DraggableMixin extends view {
26
26
  /**
27
- * @inheritdoc
27
+ * @inheritDoc
28
28
  */
29
29
  constructor(...args) {
30
30
  super(...args);
@@ -138,12 +138,6 @@ export default interface Button {
138
138
  * @observable
139
139
  */
140
140
  class: string | undefined;
141
- /**
142
- * (Optional) The ARIA property reflected by the `aria-checked` DOM attribute used by assistive technologies.
143
- *
144
- * @observable
145
- */
146
- ariaChecked?: boolean | undefined;
147
141
  /**
148
142
  * (Optional) The ARIA property reflected by the `aria-label` DOM attribute used by assistive technologies.
149
143
  *
@@ -117,10 +117,6 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
117
117
  * @inheritDoc
118
118
  */
119
119
  role: string | undefined;
120
- /**
121
- * @inheritDoc
122
- */
123
- ariaChecked: boolean | undefined;
124
120
  /**
125
121
  * @inheritDoc
126
122
  */
@@ -129,6 +125,22 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
129
125
  * @inheritDoc
130
126
  */
131
127
  ariaLabelledBy: string | undefined;
128
+ /**
129
+ * Aria-pressed attribute of element. It is calculated based on {@link #isToggleable isToggleable} and {@link #role}.
130
+ * It's set to true if the button is on and the role is not checkable.
131
+ *
132
+ * @readonly
133
+ * @internal
134
+ */
135
+ _ariaPressed: string | false;
136
+ /**
137
+ * Aria-checked attribute of element. It is calculated based on {@link #isToggleable isToggleable} and {@link #role}.
138
+ * It's set to true if the button is on and the role is checkable.
139
+ *
140
+ * @readonly
141
+ * @internal
142
+ */
143
+ _ariaChecked: string | false;
132
144
  /**
133
145
  * Tooltip of the button bound to the template.
134
146
  *
@@ -45,6 +45,8 @@ export default class ButtonView extends View {
45
45
  const bind = this.bindTemplate;
46
46
  const ariaLabelUid = uid();
47
47
  // Implement the Button interface.
48
+ this.set('_ariaPressed', false);
49
+ this.set('_ariaChecked', false);
48
50
  this.set('ariaLabel', undefined);
49
51
  this.set('ariaLabelledBy', `ck-editor__aria-label_${ariaLabelUid}`);
50
52
  this.set('class', undefined);
@@ -89,11 +91,11 @@ export default class ButtonView extends View {
89
91
  role: bind.to('role'),
90
92
  type: bind.to('type', value => value ? value : 'button'),
91
93
  tabindex: bind.to('tabindex'),
92
- 'aria-checked': bind.to('ariaChecked'),
94
+ 'aria-checked': bind.to('_ariaChecked'),
95
+ 'aria-pressed': bind.to('_ariaPressed'),
93
96
  'aria-label': bind.to('ariaLabel'),
94
97
  'aria-labelledby': bind.to('ariaLabelledBy'),
95
98
  'aria-disabled': bind.if('isEnabled', true, value => !value),
96
- 'aria-pressed': bind.to('isOn', value => this.isToggleable ? String(!!value) : false),
97
99
  'data-cke-tooltip-text': bind.to('_tooltipString'),
98
100
  'data-cke-tooltip-position': bind.to('tooltipPosition')
99
101
  },
@@ -113,6 +115,18 @@ export default class ButtonView extends View {
113
115
  })
114
116
  }
115
117
  };
118
+ this.bind('_ariaPressed').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
119
+ if (!isToggleable || isCheckableRole(role)) {
120
+ return false;
121
+ }
122
+ return String(!!isOn);
123
+ });
124
+ this.bind('_ariaChecked').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
125
+ if (!isToggleable || !isCheckableRole(role)) {
126
+ return false;
127
+ }
128
+ return String(!!isOn);
129
+ });
116
130
  // On Safari we have to force the focus on a button on click as it's the only browser
117
131
  // that doesn't do that automatically. See #12115.
118
132
  if (env.isSafari) {
@@ -216,3 +230,19 @@ export default class ButtonView extends View {
216
230
  return '';
217
231
  }
218
232
  }
233
+ /**
234
+ * Checks if `aria-checkbox` can be used with specified role.
235
+ */
236
+ function isCheckableRole(role) {
237
+ switch (role) {
238
+ case 'radio':
239
+ case 'checkbox':
240
+ case 'option':
241
+ case 'switch':
242
+ case 'menuitemcheckbox':
243
+ case 'menuitemradio':
244
+ return true;
245
+ default:
246
+ return false;
247
+ }
248
+ }
@@ -2,8 +2,14 @@
2
2
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
+ /**
6
+ * @module ui/button/filedialogbuttonview
7
+ */
8
+ import View from '../view.js';
5
9
  import ButtonView from './buttonview.js';
6
- import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ import type { Mixed } from '@ckeditor/ckeditor5-utils';
11
+ import ListItemButtonView from './listitembuttonview.js';
12
+ declare const FileDialogButtonView_base: Mixed<typeof ButtonView, FileDialogButtonViewBase>;
7
13
  /**
8
14
  * The file dialog button view.
9
15
  *
@@ -28,17 +34,45 @@ import type { Locale } from '@ckeditor/ckeditor5-utils';
28
34
  * } );
29
35
  * ```
30
36
  */
31
- export default class FileDialogButtonView extends ButtonView {
37
+ export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogButtonView_base {
38
+ }
39
+ declare const FileDialogListItemButtonView_base: Mixed<typeof ListItemButtonView, FileDialogButtonViewBase>;
40
+ /**
41
+ * The file dialog button view used in a lists.
42
+ *
43
+ * This component provides a button that opens the native file selection dialog.
44
+ * It can be used to implement the UI of a file upload feature.
45
+ *
46
+ * ```ts
47
+ * const view = new FileDialogListItemButtonView( locale );
48
+ *
49
+ * view.set( {
50
+ * acceptedType: 'image/*',
51
+ * allowMultipleFiles: true
52
+ * label: t( 'Insert image' ),
53
+ * icon: imageIcon,
54
+ * tooltip: true
55
+ * } );
56
+ *
57
+ * view.on( 'done', ( evt, files ) => {
58
+ * for ( const file of Array.from( files ) ) {
59
+ * console.log( 'Selected file', file );
60
+ * }
61
+ * } );
62
+ * ```
63
+ */
64
+ export declare class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogListItemButtonView_base {
65
+ }
66
+ /**
67
+ * Represents the base view for a file dialog button component.
68
+ */
69
+ type FileDialogButtonViewBase = View & {
32
70
  /**
33
71
  * The button view of the component.
34
72
  *
35
73
  * @deprecated
36
74
  */
37
75
  buttonView: ButtonView;
38
- /**
39
- * A hidden `<input>` view used to execute file dialog.
40
- */
41
- private _fileInputView;
42
76
  /**
43
77
  * Accepted file types. Can be provided in form of file extensions, media type or one of:
44
78
  * * `audio/*`,
@@ -54,15 +88,7 @@ export default class FileDialogButtonView extends ButtonView {
54
88
  * @observable
55
89
  */
56
90
  allowMultipleFiles: boolean;
57
- /**
58
- * @inheritDoc
59
- */
60
- constructor(locale?: Locale);
61
- /**
62
- * @inheritDoc
63
- */
64
- render(): void;
65
- }
91
+ };
66
92
  /**
67
93
  * Fired when file dialog is closed with file selected.
68
94
  *
@@ -78,3 +104,4 @@ export type FileInputViewDoneEvent = {
78
104
  name: 'done';
79
105
  args: [files: FileList];
80
106
  };
107
+ export {};