@ckeditor/ckeditor5-ui 41.3.1 → 41.4.0

package/dist/types/colorselector/colorselectorview.d.ts

@@ -0,0 +1,246 @@
+/**
+ * @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
+ */
+/**
+ * @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/colorselector/colorselectorview
+ */
+import FocusCycler, { type FocusableView } from '../focuscycler.js';
+import View from '../view.js';
+import ViewCollection from '../viewcollection.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
+import type { ColorPickerViewConfig } from '../colorpicker/utils.js';
+import type { ColorDefinition } from '../colorgrid/colorgridview.js';
+import type { Model } from '@ckeditor/ckeditor5-engine';
+import ColorGridsFragmentView from './colorgridsfragmentview.js';
+import ColorPickerFragmentView from './colorpickerfragmentview.js';
+import '../../theme/components/colorselector/colorselector.css';
+/**
+ * The configurable color selector view class. It allows users to select colors from a predefined set of colors as well as from
+ * a color picker.
+ *
+ * This meta-view is is made of two components (fragments):
+ *
+ * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorGridsFragmentView},
+ * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView}.
+ *
+ * ```ts
+ * const colorDefinitions = [
+ * 	{ color: '#000', label: 'Black', options: { hasBorder: false } },
+ * 	{ color: 'rgb(255, 255, 255)', label: 'White', options: { hasBorder: true } },
+ * 	{ color: 'red', label: 'Red', options: { hasBorder: false } }
+ * ];
+ *
+ * const selectorView = new ColorSelectorView( locale, {
+ * 	colors: colorDefinitions,
+ * 	columns: 5,
+ * 	removeButtonLabel: 'Remove color',
+ * 	documentColorsLabel: 'Document colors',
+ * 	documentColorsCount: 4,
+ * 	colorPickerViewConfig: {
+ * 		format: 'hsl'
+ * 	}
+ * } );
+ *
+ * selectorView.appendUI();
+ * selectorView.selectedColor = 'red';
+ * selectorView.updateSelectedColors();
+ *
+ * selectorView.on<ColorSelectorExecuteEvent>( 'execute', ( evt, data ) => {
+ * 	console.log( 'Color changed', data.value, data.source );
+ * } );
+ *
+ * selectorView.on<ColorSelectorColorPickerShowEvent>( 'colorPicker:show', ( evt ) => {
+ * 	console.log( 'Color picker showed up', evt );
+ * } );
+ *
+ * selectorView.on<ColorSelectorColorPickerCancelEvent>( 'colorPicker:cancel', ( evt ) => {
+ * 	console.log( 'Color picker cancel', evt );
+ * } );
+ *
+ * selectorView.render();
+ *
+ * document.body.appendChild( selectorView.element );
+ * ```
+ */
+export default class ColorSelectorView extends View {
+    /**
+     * Tracks information about the DOM focus in the list.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * A collection of components.
+     */
+    readonly items: ViewCollection;
+    /**
+     * A fragment that allows users to select colors from the a predefined set and from existing document colors.
+     */
+    readonly colorGridsFragmentView: ColorGridsFragmentView;
+    /**
+     * A fragment that allows users to select a color from a color picker.
+     */
+    readonly colorPickerFragmentView: ColorPickerFragmentView;
+    /**
+     * Keeps the value of the command associated with the component for the current selection.
+     */
+    selectedColor?: string;
+    /**
+     * Reflects the visibility state of the color grids fragment.
+     *
+     * @internal
+     */
+    _isColorGridsFragmentVisible: boolean;
+    /**
+     * Reflects the visibility state of the color picker fragment.
+     *
+     * @internal
+     */
+    _isColorPickerFragmentVisible: boolean;
+    /**
+     * Helps cycling over focusable {@link #items} in the list.
+     *
+     * @readonly
+     */
+    protected _focusCycler: FocusCycler;
+    /**
+     * A collection of views that can be focused in the view.
+     *
+     * @readonly
+     */
+    protected _focusables: ViewCollection<FocusableView>;
+    /**
+     * The configuration of color picker sub-component.
+     */
+    private _colorPickerViewConfig;
+    /**
+     * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
+     *
+     * @param locale The localization services instance.
+     * @param colors An array with definitions of colors to be displayed in the table.
+     * @param columns The number of columns in the color grid.
+     * @param removeButtonLabel The label of the button responsible for removing the color.
+     * @param colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param documentColorsLabel The label for the section with the document colors.
+     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
+     */
+    constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }: {
+        colors: Array<ColorDefinition>;
+        columns: number;
+        removeButtonLabel: string;
+        documentColorsLabel?: string;
+        documentColorsCount?: number;
+        colorPickerLabel: string;
+        colorPickerViewConfig: ColorPickerViewConfig | false;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Renders the internals of the component on demand:
+     * * {@link #colorPickerFragmentView},
+     * * {@link #colorGridsFragmentView}.
+     *
+     * It allows for deferring component initialization to improve the performance.
+     *
+     * See {@link #showColorPickerFragment}, {@link #showColorGridsFragment}.
+     */
+    appendUI(): void;
+    /**
+     * Shows the {@link #colorPickerFragmentView} and hides the {@link #colorGridsFragmentView}.
+     *
+     * **Note**: It requires {@link #appendUI} to be called first.
+     *
+     * See {@link #showColorGridsFragment}, {@link ~ColorSelectorView#event:colorPicker:show}.
+     */
+    showColorPickerFragment(): void;
+    /**
+     * Shows the {@link #colorGridsFragmentView} and hides the {@link #colorPickerFragmentView}.
+     *
+     * See {@link #showColorPickerFragment}.
+     *
+     * **Note**: It requires {@link #appendUI} to be called first.
+     */
+    showColorGridsFragment(): void;
+    /**
+     * Focuses the first focusable element in {@link #items}.
+     */
+    focus(): void;
+    /**
+     * Focuses the last focusable element in {@link #items}.
+     */
+    focusLast(): void;
+    /**
+     * Scans through the editor model and searches for text node attributes with the given `attributeName`.
+     * Found entries are set as document colors in {@link #colorGridsFragmentView}.
+     *
+     * All the previously stored document colors will be lost in the process.
+     *
+     * @param model The model used as a source to obtain the document colors.
+     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
+     */
+    updateDocumentColors(model: Model, attributeName: string): void;
+    /**
+     * Refreshes the state of the selected color in one or both grids located in {@link #colorGridsFragmentView}.
+     *
+     * It guarantees that the selection will occur only in one of them.
+     */
+    updateSelectedColors(): void;
+    /**
+     * Appends the view containing static and document color grid views.
+     */
+    private _appendColorGridsFragment;
+    /**
+     * Appends the view with the color picker.
+     */
+    private _appendColorPickerFragment;
+}
+/**
+ * Fired whenever the color was changed. There are multiple sources of this event and you can distinguish them
+ * using the `source` property passed along this event.
+ *
+ * @eventName ~ColorSelectorView#execute
+ */
+export type ColorSelectorExecuteEvent = {
+    name: 'execute';
+    args: [
+        {
+            value: string;
+            source: 'staticColorsGrid' | 'documentColorsGrid' | 'removeColorButton' | 'colorPicker' | 'colorPickerSaveButton';
+        }
+    ];
+};
+/**
+ * Fired when the user pressed the "Cancel" button in the
+ * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView}.
+ *
+ * @eventName ~ColorSelectorView#colorPicker:cancel
+ */
+export type ColorSelectorColorPickerCancelEvent = {
+    name: 'colorPicker:cancel';
+    args: [];
+};
+/**
+ * Fired whenever {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView} is shown.
+ *
+ * See {@link ~ColorSelectorView#showColorPickerFragment}.
+ *
+ * @eventName ~ColorSelectorView#colorPicker:show
+ */
+export type ColorSelectorColorPickerShowEvent = {
+    name: 'colorPicker:show';
+    args: [];
+};

package/dist/types/colorselector/documentcolorcollection.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @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
+ */
+/**
+ * @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/colorselector/documentcolorcollection
+ */
+import type { ColorDefinition } from '../colorgrid/colorgridview.js';
+import { Collection, type CollectionAddEvent, type CollectionRemoveEvent, type CollectionChangeEvent } from '@ckeditor/ckeditor5-utils';
+declare const DocumentColorCollection_base: import("@ckeditor/ckeditor5-utils").Mixed<{
+    new (options?: {
+        readonly idProperty?: string | undefined;
+    } | undefined): Collection<ColorDefinition>;
+    new (initialItems: Iterable<ColorDefinition>, options?: {
+        readonly idProperty?: string | undefined;
+    } | undefined): Collection<ColorDefinition>;
+}, import("@ckeditor/ckeditor5-utils").Observable>;
+/**
+ * A collection to store document colors. It enforces colors to be unique.
+ */
+export default class DocumentColorCollection extends DocumentColorCollection_base {
+    /**
+     * Indicates whether the document color collection is empty.
+     *
+     * @observable
+     */
+    readonly isEmpty: boolean;
+    constructor(options?: any);
+    /**
+     * Adds a color to the document color collection.
+     *
+     * This method ensures that no color duplicates are inserted (compared using
+     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
+     *
+     * If the item does not have an ID, it will be automatically generated and set on the item.
+     *
+     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
+     * @fires add
+     * @fires change
+     */
+    add(item: ColorDefinition, index?: number): this;
+    /**
+     * Checks if an object with given colors is present in the document color collection.
+     */
+    hasColor(color: string): boolean;
+}
+/**
+ * Fired when the collection was changed due to adding or removing items.
+ *
+ * @eventName ~DocumentColorCollection#change
+ * @param data Changed items.
+ */
+export type DocumentColorCollectionChangeEvent = CollectionChangeEvent;
+/**
+ * Fired when an item is added to the collection.
+ *
+ * @eventName ~DocumentColorCollection#add
+ * @param item The added item.
+ * @param index An index where the addition occurred.
+ */
+export type DocumentColorCollectionAddEvent = CollectionAddEvent;
+/**
+ * Fired when an item is removed from the collection.
+ *
+ * @eventName ~DocumentColorCollection#remove
+ * @param item The removed item.
+ * @param index Index from which item was removed.
+ */
+export type DocumentColorCollectionRemoveEvent = CollectionRemoveEvent;
+export {};

package/dist/types/componentfactory.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @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
+ */
+/**
+ * @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/componentfactory
+ */
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import type View from './view.js';
+/**
+ * A helper class implementing the UI component ({@link module:ui/view~View view}) factory.
+ *
+ * It allows functions producing specific UI components to be registered under their unique names
+ * in the factory. A registered component can be then instantiated by providing its name.
+ * Note that the names are case insensitive.
+ *
+ * ```ts
+ * // The editor provides localization tools for the factory.
+ * const factory = new ComponentFactory( editor );
+ *
+ * factory.add( 'foo', locale => new FooView( locale ) );
+ * factory.add( 'bar', locale => new BarView( locale ) );
+ *
+ * // An instance of FooView.
+ * const fooInstance = factory.create( 'foo' );
+ *
+ * // Names are case insensitive so this is also allowed:
+ * const barInstance = factory.create( 'Bar' );
+ * ```
+ *
+ * The {@link module:core/editor/editor~Editor#locale editor locale} is passed to the factory
+ * function when {@link module:ui/componentfactory~ComponentFactory#create} is called.
+ */
+export default class ComponentFactory {
+    /**
+     * The editor instance that the factory belongs to.
+     */
+    readonly editor: Editor;
+    /**
+     * Registered component factories.
+     */
+    private readonly _components;
+    /**
+     * Creates an instance of the factory.
+     *
+     * @param editor The editor instance.
+     */
+    constructor(editor: Editor);
+    /**
+     * Returns an iterator of registered component names. Names are returned in lower case.
+     */
+    names(): IterableIterator<string>;
+    /**
+     * Registers a component factory function that will be used by the
+     * {@link #create create} method and called with the
+     * {@link module:core/editor/editor~Editor#locale editor locale} as an argument,
+     * allowing localization of the {@link module:ui/view~View view}.
+     *
+     * @param name The name of the component.
+     * @param callback The callback that returns the component.
+     */
+    add(name: string, callback: (locale: Locale) => View): void;
+    /**
+     * Creates an instance of a component registered in the factory under a specific name.
+     *
+     * When called, the {@link module:core/editor/editor~Editor#locale editor locale} is passed to
+     * the previously {@link #add added} factory function, allowing localization of the
+     * {@link module:ui/view~View view}.
+     *
+     * @param name The name of the component.
+     * @returns The instantiated component view.
+     */
+    create(name: string): View;
+    /**
+     * Checks if a component of a given name is registered in the factory.
+     *
+     * @param name The name of the component.
+     */
+    has(name: string): boolean;
+}

package/dist/types/dialog/dialog.d.ts

@@ -0,0 +1,277 @@
+/**
+ * @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
+ */
+/**
+ * @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/dialog/dialog
+ */
+import type View from '../view.js';
+import { type Editor, Plugin } from '@ckeditor/ckeditor5-core';
+import DialogView, { DialogViewPosition } from './dialogview.js';
+import type { DialogActionButtonDefinition } from './dialogactionsview.js';
+/**
+ * The dialog controller class. It is used to show and hide the {@link module:ui/dialog/dialogview~DialogView}.
+ */
+export default class Dialog extends Plugin {
+    /**
+     * The name of the currently visible dialog view instance.
+     *
+     * @observable
+     */
+    id: string | null;
+    /**
+     * The currently visible dialog view instance.
+     */
+    view?: DialogView;
+    /**
+     * The `Dialog` plugin instance which most recently showed the dialog.
+     *
+     * Only one dialog can be visible at once, even if there are many editor instances on the page.
+     * If an editor wants to show a dialog, it should first hide the dialog that is already opened.
+     * But only the `Dialog` instance that showed the dialog is able able to properly hide it.
+     * This is why we need to store it in a globally available space (static property).
+     * This way every `Dialog` plugin in every editor is able to correctly close any open dialog window.
+     */
+    private static _visibleDialogPlugin;
+    /**
+     * A flag indicating whether the dialog is currently visible.
+     *
+     * @observable
+     */
+    isOpen: boolean;
+    /**
+     * A configurable callback called when the dialog is hidden.
+     */
+    private _onHide;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Dialog";
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * Initiates listeners for the `show` and `hide` events emitted by this plugin.
+     *
+     * We could not simply decorate the {@link #show} and {@link #hide} methods to fire events,
+     * because they would be fired in the wrong order – first would be `show` and then `hide`
+     * (because showing the dialog actually starts with hiding the previously visible one).
+     * Hence, we added private methods {@link #_show} and {@link #_hide} which are called on events
+     * in the desired sequence.
+     */
+    private _initShowHideListeners;
+    /**
+     * Initiates keystroke handler for toggling the focus between the editor and the dialog view.
+     */
+    private _initFocusToggler;
+    /**
+     * Provides an integration between the root attaching and detaching and positioning of the view.
+     */
+    private _initMultiRootIntegration;
+    /**
+     * Displays a dialog window.
+     *
+     * This method requires a {@link ~DialogDefinition} that defines the dialog's content, title, icon, action buttons, etc.
+     *
+     * For example, the following definition will create a dialog with:
+     * * A header consisting of an icon, a title, and a "Close" button (it is added by default).
+     * * A content consisting of a view with a single paragraph.
+     * * A footer consisting of two buttons: "Yes" and "No".
+     *
+     * ```js
+     * // Create the view that will be used as the dialog's content.
+     * const textView = new View( locale );
+     *
+     * textView.setTemplate( {
+     * 	tag: 'div',
+     * 	attributes: {
+     * 		style: {
+     * 			padding: 'var(--ck-spacing-large)',
+     * 			whiteSpace: 'initial',
+     * 			width: '100%',
+     * 			maxWidth: '500px'
+     * 		},
+     * 		tabindex: -1
+     * 	},
+     * 	children: [
+     * 		'Lorem ipsum dolor sit amet...'
+     * 	]
+     * } );
+     *
+     * // Show the dialog.
+     * editor.plugins.get( 'Dialog' ).show( {
+     *	id: 'myDialog',
+     * 	icon: 'myIcon', // This should be an SVG string.
+     * 	title: 'My dialog',
+     * 	content: textView,
+     * 	actionButtons: [
+     *		{
+     *			label: t( 'Yes' ),
+     *			class: 'ck-button-action',
+     *			withText: true,
+     *			onExecute: () => dialog.hide()
+     *		},
+     *		{
+     *			label: t( 'No' ),
+     *			withText: true,
+     *			onExecute: () => dialog.hide()
+     *		}
+     *	]
+     * } );
+     * ```
+     *
+     * By specifying the {@link ~DialogDefinition#onShow} and {@link ~DialogDefinition#onHide} callbacks
+     * it is also possible to add callbacks that will be called when the dialog is shown or hidden.
+     *
+     * For example, the callbacks in the following definition:
+     * * Disable the default behavior of the <kbd>Esc</kbd> key.
+     * * Fire a custom event when the dialog gets hidden.
+     *
+     * ```js
+     * editor.plugins.get( 'Dialog' ).show( {
+     * 	// ...
+     * 	onShow: dialog => {
+     * 		dialog.view.on( 'close', ( evt, data ) => {
+     * 			// Only prevent the event from the "Esc" key - do not affect the other ways of closing the dialog.
+     * 			if ( data.source === 'escKeyPress' ) {
+     * 				evt.stop();
+     * 			}
+     * 		} );
+     * 	},
+     * 	onHide: dialog => {
+     * 		dialog.fire( 'dialogDestroyed' );
+     * 	}
+     * } );
+     * ```
+     *
+     * Internally, calling this method:
+     * 1. Hides the currently visible dialog (if any) calling the {@link #hide} method
+     * (fires the {@link ~DialogHideEvent hide event}).
+     * 2. Fires the {@link ~DialogShowEvent show event} which allows for adding callbacks that customize the
+     * behavior of the dialog.
+     * 3. Shows the dialog.
+     */
+    show(dialogDefinition: DialogDefinition): void;
+    /**
+     * Handles creating the {@link module:ui/dialog/dialogview~DialogView} instance and making it visible.
+     */
+    private _show;
+    /**
+     * Hides the dialog. This method is decorated to enable interacting on the {@link ~DialogHideEvent hide event}.
+     *
+     * See {@link #show}.
+     */
+    hide(): void;
+    /**
+     * Destroys the {@link module:ui/dialog/dialogview~DialogView} and cleans up the stored dialog state.
+     */
+    private _hide;
+}
+/**
+ * The definition that describes a dialog window and its content. Passed to the {@link module:ui/dialog/dialog~Dialog#show} method.
+ */
+export interface DialogDefinition {
+    /**
+     * A unique identifier of the dialog. It allows for distinguishing between different dialogs and their visibility.
+     * For instance, when open, the ID of the currently visible dialog is stored in {@link module:ui/dialog/dialog~Dialog#id}.
+     *
+     * The `id` is also passed along the {@link module:ui/dialog/dialog~DialogShowEvent} and {@link module:ui/dialog/dialog~DialogHideEvent}
+     * events.
+     */
+    id: string;
+    /**
+     * The SVG string of an icon displayed in dialogs's header. Used only when {@link #title} is also set
+     * and the header is displayed.
+     *
+     * See more in {@link module:ui/icon/iconview~IconView#content}.
+     */
+    icon?: string;
+    /**
+     * A title displayed in the dialogs's header. It also works as an accessible name of the dialog used by assistive technologies.
+     *
+     * When not set, the header is not displayed. Affects {@link #icon} and {@link #hasCloseButton}.
+     */
+    title?: string;
+    /**
+     * A flag indicating whether the dialog should have a close button in the header.
+     * `true` by default. Works when {@link #title} is also set and the header is displayed.
+     *
+     * **Note**: If you hide the close button, make sure that the dialog can be closed in another way.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * The content of the dialog. It can be a single {@link module:ui/view~View} or an array of views.
+     */
+    content?: View | Array<View>;
+    /**
+     * The action buttons displayed in the dialog's footer.
+     */
+    actionButtons?: Array<DialogActionButtonDefinition>;
+    /**
+     * An additional CSS class set on the outermost (`.ck.ck-dialog`) container element allowing for visual customization.
+     */
+    className?: string;
+    /**
+     * When set to `true`, the dialog will become a modal, that is, it will block the UI until it is closed.
+     */
+    isModal?: boolean;
+    /**
+     * Available dialog positions. By default `DialogViewPosition.EDITOR_CENTER` is used for {@link #isModal non-modals}
+     * and `DialogViewPosition.SCREEN_CENTER` for modals.
+     *
+     * {@link module:ui/dialog/dialogview#DialogViewPosition Learn more} about available positions.
+     */
+    position?: typeof DialogViewPosition[keyof typeof DialogViewPosition];
+    /**
+     * A callback called when the dialog shows up with a `low` priority. It allows for setting up the dialog's {@link #content}.
+     */
+    onShow?: (dialog: Dialog) => void;
+    /**
+     * A callback called when the dialog hides with a `low` priority.
+     * It allows for cleaning up (for example, resetting) the dialog's {@link #content}.
+     */
+    onHide?: (dialog: Dialog) => void;
+}
+/**
+ * An event fired after {@link module:ui/dialog/dialog~Dialog#show} is called. You can use it to customize the behavior
+ * of any dialog.
+ *
+ * ```js
+ * import { DialogViewPosition } from 'ckeditor5/src/ui.js';
+ *
+ * // ...
+ *
+ * // Changes the position of the "Find and Replace" dialog.
+ * editor.plugins.get( 'Dialog' ).on( 'show:findAndReplace', ( evt, data ) => {
+ * 	Object.assign( data, { position: DialogViewPosition.EDITOR_BOTTOM_CENTER } );
+ * }, { priority: 'high' } );
+ * ```
+ *
+ * @eventName ~Dialog#show
+ */
+export type DialogShowEvent = {
+    name: 'show' | `show:${string}`;
+    args: [dialogDefinition: DialogDefinition];
+};
+/**
+ * An event fired after {@link module:ui/dialog/dialog~Dialog#hide} is called. You can use it to customize the behavior
+ * of any dialog.
+ *
+ * ```js
+ * // Logs after the "Find and Replace" dialog gets hidden
+ * editor.plugins.get( 'Dialog' ).on( 'hide:findAndReplace', () => {
+ * 	console.log( 'The "Find and Replace" dialog was hidden.' );
+ * } );
+ * ```
+ *
+ * @eventName ~Dialog#hide
+ */
+export type DialogHideEvent = {
+    name: 'hide' | `hide:${string}`;
+    args: [];
+};