@ckeditor/ckeditor5-ui 41.3.1 → 41.4.0

package/lang/translations/tt.po

@@ -208,3 +208,7 @@ msgstr ""
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr ""
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr ""

package/lang/translations/ug.po

@@ -208,3 +208,7 @@ msgstr ""
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr ""
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr ""

package/lang/translations/uk.po

@@ -208,3 +208,7 @@ msgstr "Шрифт"
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr "Рядок меню редагування"
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr "Будь ласка, введіть дійсний колір (напр. \"ff0000\")."

package/lang/translations/ur.po

@@ -208,3 +208,7 @@ msgstr ""
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr ""
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr ""

package/lang/translations/uz.po

@@ -208,3 +208,7 @@ msgstr ""
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr ""
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr ""

package/lang/translations/vi.po

@@ -208,3 +208,7 @@ msgstr "Phông chữ"
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr "Thanh menu Trình soạn thảo"
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr "Vui lòng nhập một màu sắc hợp lệ (ví dụ: \"ff0000\")."

package/lang/translations/zh-cn.po

@@ -208,3 +208,7 @@ msgstr "字体"
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr "编辑器菜单栏"
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr "请输入有效的颜色（例如“ff0000”）。"

package/lang/translations/zh.po

@@ -208,3 +208,7 @@ msgstr "字型"
 msgctxt "The accessible label of the editor menu bar used by assistive technologies."
 msgid "Editor menu bar"
 msgstr "編輯器選單列"
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr "請輸入有效的顏色（例如「ff0000」）。"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "41.3.1",
+  "version": "41.4.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,8 +12,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "41.3.1",
-    "@ckeditor/ckeditor5-utils": "41.3.1",
+    "@ckeditor/ckeditor5-core": "41.4.0",
+    "@ckeditor/ckeditor5-utils": "41.4.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",
@@ -29,6 +29,7 @@
     "directory": "packages/ckeditor5-ui"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/arialiveannouncer.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2024, 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.js';
@@ -30,9 +27,10 @@ export declare const AriaLiveAnnouncerPoliteness: {
  * 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:
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
  * ```ts
- * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
 export default class AriaLiveAnnouncer {
@@ -49,24 +47,19 @@ export default class AriaLiveAnnouncer {
      */
     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.
+     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
      *
-     * 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.
+     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
      *
      * 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.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
      * ```
      */
-    announce(regionName: string, announcementText: string, politeness?: typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness]): void;
+    announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
 }
 /**
  * The view that aggregates all `aria-live` regions.
@@ -79,20 +72,38 @@ export declare class AriaLiveAnnouncerView extends View {
     constructor(locale: Locale);
 }
 /**
- * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ * The view that represents a single `aria-live`.
  */
 export declare class AriaLiveAnnouncerRegionView extends View {
     /**
-     * Current text of the region.
+     * Current politeness level of the region.
      */
-    text: string;
+    readonly politeness: AriaLiveAnnouncerPolitenessValue;
     /**
-     * Current politeness level of the region.
+     * DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
      */
-    politeness: typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+    private _domConverter;
     /**
-     * A unique name of the region, usually associated with a specific editor feature or system.
+     * Interval used to remove additions. It prevents accumulation of added nodes in region.
      */
-    regionName: string;
-    constructor(locale: Locale);
+    private _pruneAnnouncementsInterval;
+    constructor(editor: Editor, politeness: AriaLiveAnnouncerPolitenessValue);
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }: AriaLiveAppendContentAttributes): void;
+    /**
+     * Return current announcements list HTML element.
+     */
+    private get _listElement();
 }
+type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+type AriaLiveAppendContentAttributes = {
+    announcement: string;
+    isUnsafeHTML?: boolean;
+};
+type AriaLiveAnnounceConfig = {
+    politeness: AriaLiveAnnouncerPolitenessValue;
+    isUnsafeHTML?: boolean;
+};
+export {};

package/src/arialiveannouncer.js

@@ -24,9 +24,10 @@ export const AriaLiveAnnouncerPoliteness = {
  * 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:
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
  * ```ts
- * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
 export default class AriaLiveAnnouncer {
@@ -35,40 +36,50 @@ export default class AriaLiveAnnouncer {
      */
     constructor(editor) {
         this.editor = editor;
+        /**
+         * Some screen readers only look at changes in the aria-live region.
+         * They might not read a region that already has content when it is added.
+         * To stop this problem, make sure to set up regions for all politeness settings when the editor starts.
+         */
+        editor.once('ready', () => {
+            for (const politeness of Object.values(AriaLiveAnnouncerPoliteness)) {
+                this.announce('', politeness);
+            }
+        });
     }
     /**
-     * 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.
+     * Sets an announcement text to an aria region that 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.
+     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
      *
      * 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.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
      * ```
      */
-    announce(regionName, announcementText, politeness = AriaLiveAnnouncerPoliteness.POLITE) {
+    announce(announcement, attributes = AriaLiveAnnouncerPoliteness.POLITE) {
         const editor = this.editor;
+        if (!editor.ui.view) {
+            return;
+        }
         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);
+        const { politeness, isUnsafeHTML } = typeof attributes === 'string' ? {
+            politeness: attributes
+        } : attributes;
+        let politenessRegionView = this.view.regionViews.find(view => view.politeness === politeness);
+        if (!politenessRegionView) {
+            politenessRegionView = new AriaLiveAnnouncerRegionView(editor, politeness);
+            this.view.regionViews.add(politenessRegionView);
         }
-        regionView.set({
-            regionName,
-            text: announcementText,
-            politeness
+        politenessRegionView.announce({
+            announcement,
+            isUnsafeHTML
         });
     }
 }
@@ -92,25 +103,64 @@ export class AriaLiveAnnouncerView extends View {
     }
 }
 /**
- * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ * The view that represents a single `aria-live`.
  */
 export class AriaLiveAnnouncerRegionView extends View {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('regionName', '');
-        this.set('text', '');
-        this.set('politeness', AriaLiveAnnouncerPoliteness.POLITE);
+    constructor(editor, politeness) {
+        super(editor.locale);
         this.setTemplate({
             tag: 'div',
             attributes: {
                 role: 'region',
-                'data-region': bind.to('regionName'),
-                'aria-live': bind.to('politeness')
+                'aria-live': politeness,
+                'aria-relevant': 'additions'
             },
             children: [
-                { text: bind.to('text') }
+                {
+                    tag: 'ul',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-aria-live-region-list'
+                        ]
+                    }
+                }
             ]
         });
+        editor.on('destroy', () => {
+            if (this._pruneAnnouncementsInterval !== null) {
+                clearInterval(this._pruneAnnouncementsInterval);
+                this._pruneAnnouncementsInterval = null;
+            }
+        });
+        this.politeness = politeness;
+        this._domConverter = editor.data.htmlProcessor.domConverter;
+        this._pruneAnnouncementsInterval = setInterval(() => {
+            if (this.element && this._listElement.firstChild) {
+                this._listElement.firstChild.remove();
+            }
+        }, 5000);
+    }
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }) {
+        if (!announcement.trim().length) {
+            return;
+        }
+        const messageListItem = document.createElement('li');
+        if (isUnsafeHTML) {
+            this._domConverter.setContentOf(messageListItem, announcement);
+        }
+        else {
+            messageListItem.innerText = announcement;
+        }
+        this._listElement.appendChild(messageListItem);
+    }
+    /**
+     * Return current announcements list HTML element.
+     */
+    get _listElement() {
+        return this.element.querySelector('ul');
     }
 }

package/src/colorgrid/colortileview.d.ts

@@ -6,7 +6,7 @@
  * @module ui/colorgrid/colortileview
  */
 import ButtonView from '../button/buttonview.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
  */

package/src/colorgrid/colortileview.js

@@ -6,6 +6,7 @@
  * @module ui/colorgrid/colortileview
  */
 import ButtonView from '../button/buttonview.js';
+import { env } from '@ckeditor/ckeditor5-utils';
 import checkIcon from '../../theme/icons/color-tile-check.svg';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
@@ -20,7 +21,8 @@ export default class ColorTileView extends ButtonView {
         this.extendTemplate({
             attributes: {
                 style: {
-                    backgroundColor: bind.to('color')
+                    // https://github.com/ckeditor/ckeditor5/issues/14907
+                    backgroundColor: bind.to('color', color => env.isMediaForcedColors ? null : color)
                 },
                 class: [
                     'ck',

package/src/colorpicker/colorpickerview.d.ts

@@ -6,9 +6,12 @@
  * @module ui/colorpicker/colorpickerview
  */
 import { type ColorPickerViewConfig } from './utils.js';
+import type { HexColor } from '@ckeditor/ckeditor5-core';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
+import type InputTextView from '../inputtext/inputtextview.js';
 import type ViewCollection from '../viewcollection.js';
+import LabeledFieldView from '../labeledfield/labeledfieldview.js';
 import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
 import '../../theme/components/colorpicker/colorpicker.css';
 declare global {
@@ -98,6 +101,17 @@ export default class ColorPickerView extends View {
      * @private
      */
     private _createColorInput;
+    /**
+     * Validates the view and returns `false` when some fields are invalid.
+     */
+    isValid(): boolean;
+    /**
+     * Cleans up the supplementary error and information text of input inside the {@link #hexInputRow}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetValidationStatus(): void;
 }
 declare class SliderView extends View {
     /**
@@ -114,12 +128,21 @@ declare class ColorPickerInputRowView extends View {
      * A collection of row items (buttons, dropdowns, etc.).
      */
     readonly children: ViewCollection;
+    /**
+     * Hex input view element.
+     */
+    readonly inputView: LabeledFieldView<InputTextView>;
     /**
      * Creates an instance of the form row class.
      *
      * @param locale The locale instance.
+     * @param inputView Hex color input element.
+     */
+    constructor(locale: Locale, inputView: LabeledFieldView<InputTextView>);
+    /**
+     * Returns false if color input value is not in hex format.
      */
-    constructor(locale: Locale, children?: Array<View>);
+    getParsedColor(): HexColor | null;
 }
 /**
  * An event fired whenever the color was selected through the color picker palette
@@ -139,4 +162,12 @@ export type ColorPickerColorSelectedEvent = {
         }
     ];
 };
+/**
+ * Trim spaces from provided color and check if hex is valid.
+ *
+ * @param color Unsafe color string.
+ * @returns Null if provided color is not hex value.
+ * @export
+ */
+export declare function tryParseHexColor<S extends string>(color: S | null | undefined): HexColor<S> | null;
 export {};

package/src/colorpicker/colorpickerview.js

@@ -150,9 +150,8 @@ export default class ColorPickerView extends View {
      * @private
      */
     _createInputRow() {
-        const hashView = new HashView();
         const colorInput = this._createColorInput();
-        return new ColorPickerInputRowView(this.locale, [hashView, colorInput]);
+        return new ColorPickerInputRowView(this.locale, colorInput);
     }
     /**
      * Creates the input where user can type or paste the color in hex format.
@@ -180,22 +179,39 @@ export default class ColorPickerView extends View {
         labeledInput.fieldView.on('input', () => {
             const inputValue = labeledInput.fieldView.element.value;
             if (inputValue) {
-                // Trim the whitespace.
-                const trimmedValue = inputValue.trim();
-                // Drop the `#` from the beginning if present.
-                const hashlessInput = trimmedValue.startsWith('#') ? trimmedValue.substring(1) : trimmedValue;
-                // Check if it's a hex color (3,4,6 or 8 chars long and with proper characters).
-                const isValidHexColor = [3, 4, 6, 8].includes(hashlessInput.length) &&
-                    /(([0-9a-fA-F]{2}){3,4}|([0-9a-fA-F]){3,4})/.test(hashlessInput);
-                if (isValidHexColor) {
+                const maybeHexColor = tryParseHexColor(inputValue);
+                if (maybeHexColor) {
                     // If so, set the color.
                     // Otherwise, do nothing.
-                    this._debounceColorPickerEvent('#' + hashlessInput);
+                    this._debounceColorPickerEvent(maybeHexColor);
                 }
             }
         });
         return labeledInput;
     }
+    /**
+     * Validates the view and returns `false` when some fields are invalid.
+     */
+    isValid() {
+        const { t } = this.locale;
+        this.resetValidationStatus();
+        // One error per field is enough.
+        if (!this.hexInputRow.getParsedColor()) {
+            // Apply updated error.
+            this.hexInputRow.inputView.errorText = t('Please enter a valid color (e.g. "ff0000").');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Cleans up the supplementary error and information text of input inside the {@link #hexInputRow}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetValidationStatus() {
+        this.hexInputRow.inputView.errorText = null;
+    }
 }
 // Converts any color format to a unified hex format.
 //
@@ -254,10 +270,15 @@ class ColorPickerInputRowView extends View {
      * Creates an instance of the form row class.
      *
      * @param locale The locale instance.
+     * @param inputView Hex color input element.
      */
-    constructor(locale, children) {
+    constructor(locale, inputView) {
         super(locale);
-        this.children = this.createCollection(children);
+        this.inputView = inputView;
+        this.children = this.createCollection([
+            new HashView(),
+            this.inputView
+        ]);
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -269,4 +290,32 @@ class ColorPickerInputRowView extends View {
             children: this.children
         });
     }
+    /**
+     * Returns false if color input value is not in hex format.
+     */
+    getParsedColor() {
+        return tryParseHexColor(this.inputView.fieldView.element.value);
+    }
+}
+/**
+ * Trim spaces from provided color and check if hex is valid.
+ *
+ * @param color Unsafe color string.
+ * @returns Null if provided color is not hex value.
+ * @export
+ */
+export function tryParseHexColor(color) {
+    if (!color) {
+        return null;
+    }
+    const hashLessColor = color.trim().replace(/^#/, '');
+    // Incorrect length.
+    if (![3, 4, 6, 8].includes(hashLessColor.length)) {
+        return null;
+    }
+    // Incorrect characters.
+    if (!/^(([0-9a-fA-F]{2}){3,4}|([0-9a-fA-F]){3,4})$/.test(hashLessColor)) {
+        return null;
+    }
+    return `#${hashLessColor}`;
 }

package/src/colorselector/colorpickerfragmentview.d.ts

@@ -101,6 +101,10 @@ export default class ColorPickerFragmentView extends View {
      * Focuses the color picker.
      */
     focus(): void;
+    /**
+     * Reset validation messages.
+     */
+    resetValidationStatus(): void;
     /**
      * When color picker is focused and "enter" is pressed it executes command.
      */

package/src/colorselector/colorpickerfragmentview.js

@@ -91,12 +91,18 @@ export default class ColorPickerFragmentView extends View {
     focus() {
         this.colorPickerView.focus();
     }
+    /**
+     * Reset validation messages.
+     */
+    resetValidationStatus() {
+        this.colorPickerView.resetValidationStatus();
+    }
     /**
      * When color picker is focused and "enter" is pressed it executes command.
      */
     _executeOnEnterPress() {
         this.keystrokes.set('enter', evt => {
-            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element) {
+            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element && this.colorPickerView.isValid()) {
                 this.fire('execute', {
                     value: this.selectedColor
                 });
@@ -176,10 +182,12 @@ export default class ColorPickerFragmentView extends View {
             label: t('Cancel')
         });
         saveButtonView.on('execute', () => {
-            this.fire('execute', {
-                source: 'colorPickerSaveButton',
-                value: this.selectedColor
-            });
+            if (this.colorPickerView.isValid()) {
+                this.fire('execute', {
+                    source: 'colorPickerSaveButton',
+                    value: this.selectedColor
+                });
+            }
         });
         cancelButtonView.on('execute', () => {
             this.fire('colorPicker:cancel');

package/src/colorselector/colorselectorview.js

@@ -176,6 +176,7 @@ export default class ColorSelectorView extends View {
         }
         this._isColorPickerFragmentVisible = true;
         this.colorPickerFragmentView.focus();
+        this.colorPickerFragmentView.resetValidationStatus();
         this._isColorGridsFragmentVisible = false;
     }
     /**