@ckeditor/ckeditor5-ui 39.0.2 → 40.0.0

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 {};

package/src/autocomplete/autocompleteview.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @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/autocomplete/autocompleteview
+*/
+import { type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
+import SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview';
+import type SearchResultsView from '../search/searchresultsview';
+import type InputBase from '../input/inputbase';
+import '../../theme/components/autocomplete/autocomplete.css';
+/**
+ * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
+ * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
+ * the component.
+ */
+export default class AutocompleteView<TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextView<TQueryFieldView> {
+    /**
+     * The configuration of the autocomplete view.
+     */
+    protected _config: AutocompleteViewConfig<TQueryFieldView>;
+    resultsView: AutocompleteResultsView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, config: AutocompleteViewConfig<TQueryFieldView>);
+    /**
+     * Updates the position of the results view on demand.
+     */
+    private _updateResultsViewWidthAndPosition;
+    /**
+     * Updates the visibility of the results view on demand.
+     */
+    private _updateResultsVisibility;
+    /**
+     * Positions for the autocomplete results view. Two positions are defined by default:
+     * * `s` - below the search field,
+     * * `n` - above the search field.
+     */
+    static defaultResultsPositions: Array<PositioningFunction>;
+    /**
+     * A function used to calculate the optimal position for the dropdown panel.
+     */
+    private static _getOptimalPosition;
+}
+/**
+ * An interface describing additional properties of the floating search results view used by the autocomplete plugin.
+ */
+export interface AutocompleteResultsView extends SearchResultsView {
+    /**
+     * Controls the visibility of the results view.
+     *
+     * @observable
+     */
+    isVisible: boolean;
+    /**
+     * Controls the position (CSS class suffix) of the results view.
+     *
+     * @internal
+    */
+    _position?: string;
+    /**
+     * The observable property determining the CSS width of the results view.
+     *
+     * @internal
+     */
+    _width: number;
+}
+export interface AutocompleteViewConfig<TConfigInputCreator extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextViewConfig<TConfigInputCreator> {
+    /**
+     * When set `true`, the query view will be reset when the autocomplete view loses focus.
+     */
+    resetOnBlur?: boolean;
+    /**
+     * Minimum number of characters that need to be typed before the search is performed.
+     *
+     * @default 0
+     */
+    queryMinChars?: number;
+}

package/src/autocomplete/autocompleteview.js

@@ -0,0 +1,146 @@
+/**
+ * @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/autocomplete/autocompleteview
+*/
+import { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
+import SearchTextView from '../search/text/searchtextview';
+import '../../theme/components/autocomplete/autocomplete.css';
+/**
+ * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
+ * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
+ * the component.
+ */
+export default class AutocompleteView extends SearchTextView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, config) {
+        super(locale, config);
+        this._config = config;
+        const toPx = toUnit('px');
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-autocomplete']
+            }
+        });
+        const bindResultsView = this.resultsView.bindTemplate;
+        this.resultsView.set('isVisible', false);
+        this.resultsView.set('_position', 's');
+        this.resultsView.set('_width', 0);
+        this.resultsView.extendTemplate({
+            attributes: {
+                class: [
+                    bindResultsView.if('isVisible', 'ck-hidden', value => !value),
+                    bindResultsView.to('_position', value => `ck-search__results_${value}`)
+                ],
+                style: {
+                    width: bindResultsView.to('_width', toPx)
+                }
+            }
+        });
+        // Update the visibility of the results view when the user focuses or blurs the component.
+        // This is also integration for the `resetOnBlur` configuration.
+        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
+            this._updateResultsVisibility();
+            if (isFocused) {
+                // Reset the scroll position of the results view whenever the autocomplete reopens.
+                this.resultsView.element.scrollTop = 0;
+            }
+            else if (config.resetOnBlur) {
+                this.queryView.reset();
+            }
+        });
+        // Update the visibility of the results view when the user types in the query field.
+        // This is an integration for `queryMinChars` configuration.
+        // This is an integration for search results changing length and the #resultsView requiring to be repositioned.
+        this.on('search', () => {
+            this._updateResultsVisibility();
+            this._updateResultsViewWidthAndPosition();
+        });
+        // Hide the results view when the user presses the ESC key.
+        this.keystrokes.set('esc', (evt, cancel) => {
+            this.resultsView.isVisible = false;
+            cancel();
+        });
+        // Update the position of the results view when the user scrolls the page.
+        // TODO: This needs to be debounced down the road.
+        this.listenTo(global.document, 'scroll', () => {
+            this._updateResultsViewWidthAndPosition();
+        });
+        // Hide the results when the component becomes disabled.
+        this.on('change:isEnabled', () => {
+            this._updateResultsVisibility();
+        });
+        // Update the value of the query field when the user selects a result.
+        this.filteredView.on('execute', (evt, { value }) => {
+            // Focus the query view first to avoid losing the focus.
+            this.focus();
+            // Resetting the view will ensure that the #queryView will update its empty state correctly.
+            // This prevents bugs related to dynamic labels or auto-grow when re-setting the same value
+            // to #queryView.fieldView.value (which does not trigger empty state change) to an
+            // #queryView.fieldView.element that has been changed by the user.
+            this.reset();
+            // Update the value of the query field.
+            this.queryView.fieldView.value = this.queryView.fieldView.element.value = value;
+            // Finally, hide the results view. The focus has been moved earlier so this is safe.
+            this.resultsView.isVisible = false;
+        });
+        // Update the position and width of the results view when it becomes visible.
+        this.resultsView.on('change:isVisible', () => {
+            this._updateResultsViewWidthAndPosition();
+        });
+    }
+    /**
+     * Updates the position of the results view on demand.
+     */
+    _updateResultsViewWidthAndPosition() {
+        if (!this.resultsView.isVisible) {
+            return;
+        }
+        this.resultsView._width = new Rect(this.queryView.fieldView.element).width;
+        const optimalResultsPosition = AutocompleteView._getOptimalPosition({
+            element: this.resultsView.element,
+            target: this.queryView.element,
+            fitInViewport: true,
+            positions: AutocompleteView.defaultResultsPositions
+        });
+        // _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
+        this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';
+    }
+    /**
+     * Updates the visibility of the results view on demand.
+     */
+    _updateResultsVisibility() {
+        const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
+        const queryLength = this.queryView.fieldView.element.value.length;
+        this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
+    }
+}
+/**
+ * Positions for the autocomplete results view. Two positions are defined by default:
+ * * `s` - below the search field,
+ * * `n` - above the search field.
+ */
+AutocompleteView.defaultResultsPositions = [
+    (fieldRect => {
+        return {
+            top: fieldRect.bottom,
+            left: fieldRect.left,
+            name: 's'
+        };
+    }),
+    ((fieldRect, resultsRect) => {
+        return {
+            top: fieldRect.top - resultsRect.height,
+            left: fieldRect.left,
+            name: 'n'
+        };
+    })
+];
+/**
+ * A function used to calculate the optimal position for the dropdown panel.
+ */
+AutocompleteView._getOptimalPosition = getOptimalPosition;

package/src/bindings/addkeyboardhandlingforgrid.d.ts

@@ -1,27 +1,27 @@
-/**
- * @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/bindings/addkeyboardhandlingforgrid
- */
-import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import type ViewCollection from '../viewcollection';
-/**
- * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
- *
- * @param options Configuration options.
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
- * @param options.focusTracker A focus tracker for grid elements.
- * @param options.gridItems A collection of grid items.
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
- * the number (e.g. for responsive grids).
- * @param options.uiLanguageDirection String of ui language direction.
- */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
-    keystrokeHandler: KeystrokeHandler;
-    focusTracker: FocusTracker;
-    gridItems: ViewCollection;
-    numberOfColumns: number | (() => number);
-    uiLanguageDirection?: string;
-}): void;
+/**
+ * @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/bindings/addkeyboardhandlingforgrid
+ */
+import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from '../viewcollection';
+/**
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
+ *
+ * @param options Configuration options.
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
+ * @param options.focusTracker A focus tracker for grid elements.
+ * @param options.gridItems A collection of grid items.
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * the number (e.g. for responsive grids).
+ * @param options.uiLanguageDirection String of ui language direction.
+ */
+export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
+    keystrokeHandler: KeystrokeHandler;
+    focusTracker: FocusTracker;
+    gridItems: ViewCollection;
+    numberOfColumns: number | (() => number);
+    uiLanguageDirection?: string;
+}): void;