@ckeditor/ckeditor5-ui 45.2.1 → 46.0.0-alpha.0

package/src/toolbar/block/blockbuttonview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/toolbar/block/blockbuttonview
  */
-import ButtonView from '../../button/buttonview.js';
+import { ButtonView } from '../../button/buttonview.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/toolbar/blocktoolbar.css';
 /**
@@ -15,7 +15,7 @@ import '../../../theme/components/toolbar/blocktoolbar.css';
  *
  * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
  */
-export default class BlockButtonView extends ButtonView {
+export declare class BlockButtonView extends ButtonView {
     /**
      * Top offset.
      *

package/src/toolbar/block/blockbuttonview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/toolbar/block/blockbuttonview
  */
-import ButtonView from '../../button/buttonview.js';
+import { ButtonView } from '../../button/buttonview.js';
 import { toUnit } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/toolbar/blocktoolbar.css';
 const toPx = /* #__PURE__ */ toUnit('px');
@@ -16,7 +16,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
  *
  * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
  */
-export default class BlockButtonView extends ButtonView {
+export class BlockButtonView extends ButtonView {
     /**
      * @inheritDoc
      */

package/src/toolbar/block/blocktoolbar.d.ts

@@ -6,9 +6,9 @@
  * @module ui/toolbar/block/blocktoolbar
  */
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import BlockButtonView from './blockbuttonview.js';
-import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
-import ToolbarView from '../toolbarview.js';
+import { BlockButtonView } from './blockbuttonview.js';
+import { BalloonPanelView } from '../../panel/balloon/balloonpanelview.js';
+import { ToolbarView } from '../toolbarview.js';
 /**
  * The block toolbar plugin.
  *
@@ -16,11 +16,11 @@ import ToolbarView from '../toolbarview.js';
  * Upon clicking the button, a dropdown providing access to editor features shows up, as configured in
  * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.
  *
- * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}
+ * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~ModelSchema}
  * as `$block` for which the toolbar provides at least one option.
  *
  * By default, the button is attached so its right boundary is touching the
- * {@link module:engine/view/editableelement~EditableElement}:
+ * {@link module:engine/view/editableelement~ViewEditableElement}:
  *
  * ```
  *  __ |
@@ -56,7 +56,7 @@ import ToolbarView from '../toolbarview.js';
  * }
  * ```
  */
-export default class BlockToolbar extends Plugin {
+export declare class BlockToolbar extends Plugin {
     /**
      * The toolbar view.
      */

package/src/toolbar/block/blocktoolbar.js

@@ -7,11 +7,11 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { getAncestors, global, Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';
-import BlockButtonView from './blockbuttonview.js';
-import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
-import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview.js';
-import clickOutsideHandler from '../../bindings/clickoutsidehandler.js';
-import normalizeToolbarConfig from '../normalizetoolbarconfig.js';
+import { BlockButtonView } from './blockbuttonview.js';
+import { BalloonPanelView } from '../../panel/balloon/balloonpanelview.js';
+import { ToolbarView, NESTED_TOOLBAR_ICONS } from '../toolbarview.js';
+import { clickOutsideHandler } from '../../bindings/clickoutsidehandler.js';
+import { normalizeToolbarConfig } from '../normalizetoolbarconfig.js';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The block toolbar plugin.
@@ -20,11 +20,11 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * Upon clicking the button, a dropdown providing access to editor features shows up, as configured in
  * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.
  *
- * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}
+ * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~ModelSchema}
  * as `$block` for which the toolbar provides at least one option.
  *
  * By default, the button is attached so its right boundary is touching the
- * {@link module:engine/view/editableelement~EditableElement}:
+ * {@link module:engine/view/editableelement~ViewEditableElement}:
  *
  * ```
  *  __ |
@@ -60,7 +60,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * }
  * ```
  */
-export default class BlockToolbar extends Plugin {
+export class BlockToolbar extends Plugin {
     /**
      * The toolbar view.
      */

package/src/toolbar/normalizetoolbarconfig.d.ts

@@ -32,7 +32,7 @@ import type { ToolbarConfig, ToolbarConfigItem } from '@ckeditor/ckeditor5-core'
  * @param config The value of `config.toolbar`.
  * @returns A normalized toolbar config object.
  */
-export default function normalizeToolbarConfig(config: ToolbarConfig | undefined): {
+export declare function normalizeToolbarConfig(config: ToolbarConfig | undefined): {
     items: Array<ToolbarConfigItem>;
     removeItems: Array<string>;
     shouldNotGroupWhenFull?: boolean;

package/src/toolbar/normalizetoolbarconfig.js

@@ -31,7 +31,7 @@
  * @param config The value of `config.toolbar`.
  * @returns A normalized toolbar config object.
  */
-export default function normalizeToolbarConfig(config) {
+export function normalizeToolbarConfig(config) {
     if (Array.isArray(config)) {
         return {
             items: config,

package/src/toolbar/toolbarlinebreakview.d.ts

@@ -5,12 +5,12 @@
 /**
  * @module ui/toolbar/toolbarlinebreakview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The toolbar line break view class.
  */
-export default class ToolbarLineBreakView extends View {
+export declare class ToolbarLineBreakView extends View {
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarlinebreakview.js

@@ -5,11 +5,11 @@
 /**
  * @module ui/toolbar/toolbarlinebreakview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 /**
  * The toolbar line break view class.
  */
-export default class ToolbarLineBreakView extends View {
+export class ToolbarLineBreakView extends View {
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarseparatorview.d.ts

@@ -5,12 +5,12 @@
 /**
  * @module ui/toolbar/toolbarseparatorview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The toolbar separator view class.
  */
-export default class ToolbarSeparatorView extends View {
+export declare class ToolbarSeparatorView extends View {
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarseparatorview.js

@@ -5,11 +5,11 @@
 /**
  * @module ui/toolbar/toolbarseparatorview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 /**
  * The toolbar separator view class.
  */
-export default class ToolbarSeparatorView extends View {
+export class ToolbarSeparatorView extends View {
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarview.d.ts

@@ -5,19 +5,22 @@
 /**
  * @module ui/toolbar/toolbarview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 import { type FocusableView } from '../focuscycler.js';
-import type ComponentFactory from '../componentfactory.js';
-import type ViewCollection from '../viewcollection.js';
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable.js';
+import { type ComponentFactory } from '../componentfactory.js';
+import { type ViewCollection } from '../viewcollection.js';
+import { type DropdownPanelFocusable } from '../dropdown/dropdownpanelfocusable.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
 import '../../theme/components/toolbar/toolbar.css';
+/**
+ * @internal
+ */
 export declare const NESTED_TOOLBAR_ICONS: Record<string, string | undefined>;
 /**
  * The toolbar view class.
  */
-export default class ToolbarView extends View implements DropdownPanelFocusable {
+export declare class ToolbarView extends View implements DropdownPanelFocusable {
     /**
      * A reference to the options object passed to the constructor.
      */
@@ -223,7 +226,7 @@ export type ToolbarViewGroupedItemsUpdateEvent = {
  * An inner block of the {@link module:ui/toolbar/toolbarview~ToolbarView} hosting its
  * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
  */
-declare class ItemsView extends View {
+export declare class ItemsView extends View {
     /**
      * A collection of items (buttons, dropdowns, etc.).
      */
@@ -262,6 +265,7 @@ export interface ToolbarOptions {
  * {@link module:ui/toolbar/toolbarview~ToolbarView#element} template or
  * {@link module:ui/toolbar/toolbarview~ToolbarView#render rendering}. They can be enabled
  * conditionally, e.g. depending on the configuration of the toolbar.
+ * @internal
  */
 export interface ToolbarBehavior {
     /**
@@ -284,4 +288,3 @@ export interface ToolbarBehavior {
      */
     type: 'dynamic' | 'static';
 }
-export {};

package/src/toolbar/toolbarview.js

@@ -5,17 +5,20 @@
 /**
  * @module ui/toolbar/toolbarview
  */
-import View from '../view.js';
-import FocusCycler, { isFocusable } from '../focuscycler.js';
-import ToolbarSeparatorView from './toolbarseparatorview.js';
-import ToolbarLineBreakView from './toolbarlinebreakview.js';
-import preventDefault from '../bindings/preventdefault.js';
+import { View } from '../view.js';
+import { FocusCycler, isFocusable } from '../focuscycler.js';
+import { ToolbarSeparatorView } from './toolbarseparatorview.js';
+import { ToolbarLineBreakView } from './toolbarlinebreakview.js';
+import { preventDefault } from '../bindings/preventdefault.js';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils.js';
-import normalizeToolbarConfig from './normalizetoolbarconfig.js';
+import { normalizeToolbarConfig } from './normalizetoolbarconfig.js';
 import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible, logWarning } from '@ckeditor/ckeditor5-utils';
 import { IconAlignLeft, IconBold, IconImportExport, IconParagraph, IconPlus, IconText, IconThreeVerticalDots, IconPilcrow, IconDragIndicator } from '@ckeditor/ckeditor5-icons';
 import { isObject } from 'es-toolkit/compat';
 import '../../theme/components/toolbar/toolbar.css';
+/**
+ * @internal
+ */
 export const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (() => ({
     alignLeft: IconAlignLeft,
     bold: IconBold,
@@ -30,7 +33,7 @@ export const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (() => ({
 /**
  * The toolbar view class.
  */
-export default class ToolbarView extends View {
+export class ToolbarView extends View {
     /**
      * A reference to the options object passed to the constructor.
      */
@@ -429,7 +432,7 @@ export default class ToolbarView extends View {
  * An inner block of the {@link module:ui/toolbar/toolbarview~ToolbarView} hosting its
  * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
  */
-class ItemsView extends View {
+export class ItemsView extends View {
     /**
      * A collection of items (buttons, dropdowns, etc.).
      */

package/src/tooltipmanager.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module ui/tooltipmanager
  */
-import View from './view.js';
-import BalloonPanelView from './panel/balloon/balloonpanelview.js';
+import { View } from './view.js';
+import { BalloonPanelView } from './panel/balloon/balloonpanelview.js';
 import { type PositioningFunction } from '@ckeditor/ckeditor5-utils';
 import type { Editor } from '@ckeditor/ckeditor5-core';
 import '../theme/components/tooltip/tooltip.css';
@@ -76,7 +76,7 @@ declare const TooltipManager_base: {
  * **Note**: This class is a singleton. All editor instances re-use the same instance loaded by
  * {@link module:ui/editorui/editorui~EditorUI} of the first editor.
  */
-export default class TooltipManager extends /* #__PURE__ */ TooltipManager_base {
+export declare class TooltipManager extends /* #__PURE__ */ TooltipManager_base {
     /**
      * The view rendering text of the tooltip.
      */

package/src/tooltipmanager.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/tooltipmanager
  */
-import View from './view.js';
-import BalloonPanelView from './panel/balloon/balloonpanelview.js';
+import { View } from './view.js';
+import { BalloonPanelView } from './panel/balloon/balloonpanelview.js';
 import { DomEmitterMixin, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
 import { isElement, debounce } from 'es-toolkit/compat';
 import '../theme/components/tooltip/tooltip.css';
@@ -421,7 +421,7 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
         });
     }
 }
-export default TooltipManager;
+export { TooltipManager };
 function getDescendantWithTooltip(element) {
     if (!isElement(element)) {
         return null;

package/src/view.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module ui/view
  */
-import ViewCollection from './viewcollection.js';
-import Template, { type BindChain, type TemplateDefinition } from './template.js';
+import { ViewCollection } from './viewcollection.js';
+import { Template, type BindChain, type TemplateDefinition } from './template.js';
 import { Collection, type DecoratedMethodEvent, type Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import '../theme/globals/globals.css';
 declare const View_base: import("@ckeditor/ckeditor5-utils").Mixed<{
@@ -78,7 +78,7 @@ declare const View_base: import("@ckeditor/ckeditor5-utils").Mixed<{
  * } );
  * ```
  */
-export default class View<TElement extends HTMLElement = HTMLElement> extends /* #__PURE__ */ View_base {
+export declare class View<TElement extends HTMLElement = HTMLElement> extends /* #__PURE__ */ View_base {
     /**
      * An HTML element of the view. `null` until {@link #render rendered}
      * from the {@link #template}.

package/src/view.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/view
  */
-import ViewCollection from './viewcollection.js';
-import Template from './template.js';
+import { ViewCollection } from './viewcollection.js';
+import { Template } from './template.js';
 import { CKEditorError, Collection, DomEmitterMixin, ObservableMixin, isIterable } from '@ckeditor/ckeditor5-utils';
 import '../theme/globals/globals.css';
 /**
@@ -74,7 +74,7 @@ import '../theme/globals/globals.css';
  * } );
  * ```
  */
-export default class View extends /* #__PURE__ */ DomEmitterMixin(/* #__PURE__ */ ObservableMixin()) {
+export class View extends /* #__PURE__ */ DomEmitterMixin(/* #__PURE__ */ ObservableMixin()) {
     /**
      * An HTML element of the view. `null` until {@link #render rendered}
      * from the {@link #template}.

package/src/viewcollection.d.ts

@@ -6,7 +6,7 @@
  * @module ui/viewcollection
  */
 import { Collection, type EmitterMixinDelegateChain } from '@ckeditor/ckeditor5-utils';
-import type View from './view.js';
+import { type View } from './view.js';
 /**
  * Collects {@link module:ui/view~View} instances.
  *
@@ -47,7 +47,7 @@ import type View from './view.js';
  * **Note**: A view collection can be used directly in the {@link module:ui/template~TemplateDefinition definition}
  * of a {@link module:ui/template~Template template}.
  */
-export default class ViewCollection<TView extends View = View> extends Collection<TView> {
+export declare class ViewCollection<TView extends View = View> extends Collection<TView> {
     id?: string;
     /**
      * A parent element within which child views are rendered and managed in DOM.

package/src/viewcollection.js

@@ -46,7 +46,7 @@ import { CKEditorError, Collection } from '@ckeditor/ckeditor5-utils';
  * **Note**: A view collection can be used directly in the {@link module:ui/template~TemplateDefinition definition}
  * of a {@link module:ui/template~Template template}.
  */
-export default class ViewCollection extends Collection {
+export class ViewCollection extends Collection {
     /**
      * A parent element within which child views are rendered and managed in DOM.
      */

package/src/bindings/injectcsstransitiondisabler.d.ts

@@ -1,59 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/bindings/injectcsstransitiondisabler
- */
-import type View from '../view.js';
-/**
- * A decorator that brings the possibility to temporarily disable CSS transitions using
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
- * when the view is first displayed but they should work normal in other cases.
- *
- * The methods to control the CSS transitions are:
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
- * {@link module:ui/view~View#element view element}.
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
- * {@link module:ui/view~View#element view element}.
- *
- * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
- * {@link module:ui/view~View#setTemplate} is called:
- *
- * ```ts
- * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
- *
- * class MyView extends View {
- * 	constructor() {
- * 		super();
- *
- * 		// ...
- *
- * 		this.setTemplate( { ... } );
- *
- * 		// ...
- *
- * 		injectCssTransitionDisabler( this );
- *
- * 		// ...
- * 	}
- * }
- * ```
- *
- * The usage comes down to:
- *
- * ```ts
- * const view = new MyView();
- *
- * // ...
- *
- * view.disableCssTransitions();
- * view.show();
- * view.enableCssTransitions();
- * ```
- *
- * @deprecated
- * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
- * @param view View instance that should get this functionality.
- */
-export default function injectCssTransitionDisabler(view: View): void;

package/src/bindings/injectcsstransitiondisabler.js

@@ -1,71 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * A decorator that brings the possibility to temporarily disable CSS transitions using
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
- * when the view is first displayed but they should work normal in other cases.
- *
- * The methods to control the CSS transitions are:
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
- * {@link module:ui/view~View#element view element}.
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
- * {@link module:ui/view~View#element view element}.
- *
- * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
- * {@link module:ui/view~View#setTemplate} is called:
- *
- * ```ts
- * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
- *
- * class MyView extends View {
- * 	constructor() {
- * 		super();
- *
- * 		// ...
- *
- * 		this.setTemplate( { ... } );
- *
- * 		// ...
- *
- * 		injectCssTransitionDisabler( this );
- *
- * 		// ...
- * 	}
- * }
- * ```
- *
- * The usage comes down to:
- *
- * ```ts
- * const view = new MyView();
- *
- * // ...
- *
- * view.disableCssTransitions();
- * view.show();
- * view.enableCssTransitions();
- * ```
- *
- * @deprecated
- * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
- * @param view View instance that should get this functionality.
- */
-export default function injectCssTransitionDisabler(view) {
-    const decorated = view;
-    decorated.set('_isCssTransitionsDisabled', false);
-    decorated.disableCssTransitions = () => {
-        decorated._isCssTransitionsDisabled = true;
-    };
-    decorated.enableCssTransitions = () => {
-        decorated._isCssTransitionsDisabled = false;
-    };
-    decorated.extendTemplate({
-        attributes: {
-            class: [
-                decorated.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
-            ]
-        }
-    });
-}