@ckeditor/ckeditor5-ui 40.0.0 → 40.1.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor&nbsp;5 UI framework** – https://github.com/ckeditor/ckeditor5-ui <br>
-Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003–2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 
@@ -13,9 +13,9 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
-* lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+* Lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
 
 Trademarks
 ----------
 
-**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

package/lang/translations/pt-br.po

@@ -119,7 +119,7 @@ msgstr "Barra de ferramentas de bloco do Editor"
 
 msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
 msgid "Editor contextual toolbar"
-msgstr "Barra de ferramentas contextuais do Editor"
+msgstr "Barra de ferramentas contextual do Editor"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"

package/lang/translations/ug.po

@@ -23,79 +23,79 @@ msgstr "تېكىست تەھرىرلىگۈچ"
 
 msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
 msgid "Editor editing area: %0"
-msgstr ""
+msgstr "تەھرىرلىگۈچ تەھرىرلەش رايونى: %0"
 
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
-msgstr ""
+msgstr "بۆلەك تەھرىر"
 
 msgctxt "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Click to edit block"
-msgstr ""
+msgstr "چېكىلسە بۆلەك تەھرىرلىنىدۇ"
 
 msgctxt "Second part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Drag to move"
-msgstr ""
+msgstr "يۆتكەشتە سۆرىلىدۇ"
 
 msgctxt "Label for a button showing the next thing (tab, page, etc.)."
 msgid "Next"
-msgstr ""
+msgstr "كېيىنكى"
 
 msgctxt "Label for a button showing the previous thing (tab, page, etc.)."
 msgid "Previous"
-msgstr ""
+msgstr "ئالدىنقى"
 
 msgctxt "Label used by assistive technologies describing a generic editor toolbar."
 msgid "Editor toolbar"
-msgstr ""
+msgstr "تەھرىرلىگۈچ قورال بالداق"
 
 msgctxt "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
 msgid "Dropdown toolbar"
-msgstr ""
+msgstr "سىرىلما قورال بالداق"
 
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
-msgstr ""
+msgstr "قارا"
 
 msgctxt "Label of a button that applies a dim grey color in color pickers."
 msgid "Dim grey"
-msgstr ""
+msgstr "سۇس كۈلرەڭ"
 
 msgctxt "Label of a button that applies a grey color in color pickers."
 msgid "Grey"
-msgstr ""
+msgstr "كۈلرەڭ"
 
 msgctxt "Label of a button that applies a light grey color in color pickers."
 msgid "Light grey"
-msgstr ""
+msgstr "ئوچۇق كۈلرەڭ"
 
 msgctxt "Label of a button that applies a white color in color pickers."
 msgid "White"
-msgstr ""
+msgstr "ئاق"
 
 msgctxt "Label of a button that applies a red color in color pickers."
 msgid "Red"
-msgstr ""
+msgstr "قىزىل"
 
 msgctxt "Label of a button that applies a orange color in color pickers."
 msgid "Orange"
-msgstr ""
+msgstr "قىزغۇچ سېرىق"
 
 msgctxt "Label of a button that applies a yellow color in color pickers."
 msgid "Yellow"
-msgstr ""
+msgstr "سېرىق"
 
 msgctxt "Label of a button that applies a light green color in color pickers."
 msgid "Light green"
-msgstr ""
+msgstr "ئوچۇق يېشىل"
 
 msgctxt "Label of a button that applies a green color in color pickers."
 msgid "Green"
-msgstr ""
+msgstr "يېشىل"
 
 msgctxt "Label of a button that applies a aquamarine color in color pickers."
 msgid "Aquamarine"
-msgstr ""
+msgstr "دېڭىز كۆكى"
 
 msgctxt "Label of a button that applies a turquoise color in color pickers."
 msgid "Turquoise"
@@ -103,23 +103,23 @@ msgstr ""
 
 msgctxt "Label of a button that applies a light blue color in color pickers."
 msgid "Light blue"
-msgstr ""
+msgstr "ئوچۇق كۆك"
 
 msgctxt "Label of a button that applies a blue color in color pickers."
 msgid "Blue"
-msgstr ""
+msgstr "كۆك"
 
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
-msgstr ""
+msgstr "بىنەپشە"
 
 msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
 msgid "Editor block content toolbar"
-msgstr ""
+msgstr "تەھرىرلىگۈچ بۆلىكى مەزمۇن قورال بالداق"
 
 msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
 msgid "Editor contextual toolbar"
-msgstr ""
+msgstr "تەھرىرلىگۈچ مەزمۇن قورال بالداق"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
@@ -131,8 +131,8 @@ msgstr "قوشۇل"
 
 msgctxt "The main text of the message shown to the user when given query does not match any results."
 msgid "No results found"
-msgstr ""
+msgstr "ھېچقانداق نەتىجە تېپىلمىدى"
 
 msgctxt "The main text of the message shown to the user when no results are available."
 msgid "No searchable items"
-msgstr ""
+msgstr "ئىزدىگۈدەك تۈر يوق"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "40.0.0",
+  "version": "40.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,8 +11,8 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "40.0.0",
-    "@ckeditor/ckeditor5-utils": "40.0.0",
+    "@ckeditor/ckeditor5-core": "40.1.0",
+    "@ckeditor/ckeditor5-utils": "40.1.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",

package/src/arialiveannouncer.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/arialiveannouncer
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from './viewcollection';
+import View from './view';
+import '../theme/components/arialiveannouncer/arialiveannouncer.css';
+/**
+ * The politeness level of an `aria-live` announcement.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels
+ */
+export declare enum AriaLiveAnnouncerPoliteness {
+    POLITE = "polite",
+    ASSERTIVE = "assertive"
+}
+/**
+ * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+ * to the state of the editor features.
+ *
+ * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+ * state of the editor.
+ *
+ * To announce a state change to an editor feature named `'Some feature'`, use the {@link #announce} method:
+ * ```ts
+ * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * ```
+ */
+export default class AriaLiveAnnouncer {
+    /**
+     * The editor instance.
+     */
+    readonly editor: Editor;
+    /**
+     * The view that aggregates all `aria-live` regions.
+     */
+    view?: AriaLiveAnnouncerView;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * Sets an announcement text to an aria region associated with a specific editor feature. The text is then
+     * announced by a screen reader to the user.
+     *
+     * If the aria region of a given name does not exist, it will be created and can be re-used later. The name of the region
+     * groups announcements originating from a specific editor feature and does not get announced by a screen reader.
+     *
+     * Using multiple regions allows for many announcements to be emitted in a short period of time. Changes to ARIA-live announcements
+     * are captured by a screen reader and read out in the order they were emitted.
+     *
+     * The default announcement politeness level is `'polite'`.
+     *
+     * ```ts
+     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+     * editor.ui.ariaLiveAnnouncer.announce( 'image', 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'network', 'Connection lost. Reconnecting.' );
+     * ```
+     */
+    announce(regionName: string, announcementText: string, politeness?: AriaLiveAnnouncerPoliteness): void;
+}
+/**
+ * The view that aggregates all `aria-live` regions.
+ */
+export declare class AriaLiveAnnouncerView extends View {
+    /**
+     * A collection of all views that represent individual `aria-live` regions.
+     */
+    readonly regionViews: ViewCollection<AriaLiveAnnouncerRegionView>;
+    constructor(locale: Locale);
+}
+/**
+ * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ */
+export declare class AriaLiveAnnouncerRegionView extends View {
+    /**
+     * Current text of the region.
+     */
+    text: string;
+    /**
+     * Current politeness level of the region.
+     */
+    politeness: AriaLiveAnnouncerPoliteness;
+    /**
+     * A unique name of the region, usually associated with a specific editor feature or system.
+     */
+    regionName: string;
+    constructor(locale: Locale);
+}

package/src/arialiveannouncer.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import View from './view';
+import '../theme/components/arialiveannouncer/arialiveannouncer.css';
+/**
+ * The politeness level of an `aria-live` announcement.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels
+ */
+export var AriaLiveAnnouncerPoliteness;
+(function (AriaLiveAnnouncerPoliteness) {
+    AriaLiveAnnouncerPoliteness["POLITE"] = "polite";
+    AriaLiveAnnouncerPoliteness["ASSERTIVE"] = "assertive";
+})(AriaLiveAnnouncerPoliteness || (AriaLiveAnnouncerPoliteness = {}));
+/**
+ * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+ * to the state of the editor features.
+ *
+ * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+ * state of the editor.
+ *
+ * To announce a state change to an editor feature named `'Some feature'`, use the {@link #announce} method:
+ * ```ts
+ * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * ```
+ */
+export default class AriaLiveAnnouncer {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        this.editor = editor;
+    }
+    /**
+     * Sets an announcement text to an aria region associated with a specific editor feature. The text is then
+     * announced by a screen reader to the user.
+     *
+     * If the aria region of a given name does not exist, it will be created and can be re-used later. The name of the region
+     * groups announcements originating from a specific editor feature and does not get announced by a screen reader.
+     *
+     * Using multiple regions allows for many announcements to be emitted in a short period of time. Changes to ARIA-live announcements
+     * are captured by a screen reader and read out in the order they were emitted.
+     *
+     * The default announcement politeness level is `'polite'`.
+     *
+     * ```ts
+     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+     * editor.ui.ariaLiveAnnouncer.announce( 'image', 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'network', 'Connection lost. Reconnecting.' );
+     * ```
+     */
+    announce(regionName, announcementText, politeness = AriaLiveAnnouncerPoliteness.POLITE) {
+        const editor = this.editor;
+        if (!this.view) {
+            this.view = new AriaLiveAnnouncerView(editor.locale);
+            editor.ui.view.body.add(this.view);
+        }
+        let regionView = this.view.regionViews.find(view => view.regionName === regionName);
+        if (!regionView) {
+            regionView = new AriaLiveAnnouncerRegionView(this.view.locale);
+            this.view.regionViews.add(regionView);
+        }
+        regionView.set({
+            regionName,
+            text: announcementText,
+            politeness
+        });
+    }
+}
+/**
+ * The view that aggregates all `aria-live` regions.
+ */
+export class AriaLiveAnnouncerView extends View {
+    constructor(locale) {
+        super(locale);
+        this.regionViews = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-aria-live-announcer'
+                ]
+            },
+            children: this.regionViews
+        });
+    }
+}
+/**
+ * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ */
+export class AriaLiveAnnouncerRegionView extends View {
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('regionName', '');
+        this.set('text', '');
+        this.set('politeness', AriaLiveAnnouncerPoliteness.POLITE);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                role: 'region',
+                'data-region': bind.to('regionName'),
+                'aria-live': bind.to('politeness')
+            },
+            children: [
+                { text: bind.to('text') }
+            ]
+        });
+    }
+}

package/src/augmentation.d.ts

@@ -1,86 +1,86 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index';
-import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
-         * feature.
-         *
-         * ## Configuring toolbar items
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: {
-         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         */
-        balloonToolbar?: ToolbarConfig;
-        /**
-         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
-         * feature.
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: {
-         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         *
-         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         */
-        blockToolbar?: ToolbarConfig;
-    }
-    interface PluginsMap {
-        [BalloonToolbar.pluginName]: BalloonToolbar;
-        [BlockToolbar.pluginName]: BlockToolbar;
-        [ContextualBalloon.pluginName]: ContextualBalloon;
-        [Notification.pluginName]: Notification;
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index';
+import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
+         * feature.
+         *
+         * ## Configuring toolbar items
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: {
+         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         */
+        balloonToolbar?: ToolbarConfig;
+        /**
+         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
+         * feature.
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: {
+         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         *
+         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         */
+        blockToolbar?: ToolbarConfig;
+    }
+    interface PluginsMap {
+        [BalloonToolbar.pluginName]: BalloonToolbar;
+        [BlockToolbar.pluginName]: BlockToolbar;
+        [ContextualBalloon.pluginName]: ContextualBalloon;
+        [Notification.pluginName]: Notification;
+    }
+}

package/src/augmentation.js

@@ -1,5 +1,5 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-export {};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};