@ckeditor/ckeditor5-ui 36.0.1 → 37.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.1",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,29 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
-    "@ckeditor/ckeditor5-core": "^36.0.1",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.1",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^36.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^36.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.1",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-essentials": "^36.0.1",
-    "@ckeditor/ckeditor5-font": "^36.0.1",
-    "@ckeditor/ckeditor5-find-and-replace": "^36.0.1",
-    "@ckeditor/ckeditor5-heading": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-link": "^36.0.1",
-    "@ckeditor/ckeditor5-list": "^36.0.1",
-    "@ckeditor/ckeditor5-mention": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^36.0.1",
-    "@ckeditor/ckeditor5-table": "^36.0.1",
-    "@ckeditor/ckeditor5-typing": "^36.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-editor-balloon": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-essentials": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-font": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-find-and-replace": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-link": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-list": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-mention": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-horizontal-line": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-table": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.1",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -60,7 +60,8 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "tsc -p ./tsconfig.release.json",
+    "build": "tsc -p ./tsconfig.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/augmentation.d.ts

@@ -0,0 +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;
+    }
+}

package/src/augmentation.js

@@ -0,0 +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 {};

package/src/bindings/addkeyboardhandlingforgrid.d.ts

@@ -0,0 +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;

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -2,20 +2,16 @@
  * @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
- */
 /**
  * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
  *
- * @param {Object} options Configuration options.
- * @param {module:utils/keystrokehandler~KeystrokeHandler} options.keystrokeHandler Keystroke handler to register navigation with arrow
- * keys.
- * @param {module:utils/focustracker~FocusTracker} options.focusTracker A focus tracker for grid elements.
- * @param {module:ui/viewcollection~ViewCollection} options.gridItems A collection of grid items.
- * @param {Number|Function} options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * @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 {String|undefined} options.uiLanguageDirection String of ui language direction.
+ * @param options.uiLanguageDirection String of ui language direction.
  */
 export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
     const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
@@ -56,18 +52,24 @@ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTrac
             evt.preventDefault();
         };
     }
-    // Function returning the next index.
-    //
-    // before: [ ][x][ ]	after: [ ][ ][x]
-    // index = 1            index = 2
-    //
-    // If current index is last, function returns first index.
-    //
-    // before: [ ][ ][x]	after: [x][ ][ ]
-    // index = 2            index = 0
-    //
-    // @param {number} [elementIndex] Number of current index.
-    // @param {number} [collectionLength] A count of collection items.
+    /**
+     * Function returning the next index.
+     *
+     * ```
+     * before: [ ][x][ ]	after: [ ][ ][x]
+     * index = 1            index = 2
+     * ```
+     *
+     * If current index is last, function returns first index.
+     *
+     * ```
+     * before: [ ][ ][x]	after: [x][ ][ ]
+     * index = 2            index = 0
+     * ```
+     *
+     * @param elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
     function getRightElementIndex(elementIndex, collectionLength) {
         if (elementIndex === collectionLength - 1) {
             return 0;
@@ -76,18 +78,24 @@ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTrac
             return elementIndex + 1;
         }
     }
-    // Function returning the previous index.
-    //
-    // before: [ ][x][ ]	after: [x][ ][ ]
-    // index = 1            index = 0
-    //
-    // If current index is first, function returns last index.
-    //
-    // before: [x][ ][ ]	after: [ ][ ][x]
-    // index = 0            index = 2
-    //
-    // @param {number} [elementIndex] Number of current index.
-    // @param {number} [collectionLength] A count of collection items.
+    /**
+     * Function returning the previous index.
+     *
+     * ```
+     * before: [ ][x][ ]	after: [x][ ][ ]
+     * index = 1            index = 0
+     * ```
+     *
+     * If current index is first, function returns last index.
+     *
+     * ```
+     * before: [x][ ][ ]	after: [ ][ ][x]
+     * index = 0            index = 2
+     * ```
+     *
+     * @param elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
     function getLeftElementIndex(elementIndex, collectionLength) {
         if (elementIndex === 0) {
             return collectionLength - 1;

package/src/bindings/clickoutsidehandler.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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/clickoutsidehandler
+ */
+import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
+/**
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
+ *
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
+ * properly.
+ *
+ * @param options Configuration options.
+ * @param options.emitter The emitter to which this behavior should be added.
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
+ * @param options.callback An action executed by the handler.
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
+    emitter: DomEmitter;
+    activator: () => boolean;
+    contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
+    callback: () => void;
+}): void;

package/src/bindings/clickoutsidehandler.js

@@ -10,13 +10,12 @@
  * certain issues when the user keeps holding the mouse button and the UI cannot react
  * properly.
  *
- * @param {Object} options Configuration options.
- * @param {module:utils/dom/emittermixin~Emitter} options.emitter The emitter to which this behavior
- * should be added.
- * @param {Function} options.activator Function returning a `Boolean`, to determine whether the handler is active.
- * @param {Array.<HTMLElement>} options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * @param options Configuration options.
+ * @param options.emitter The emitter to which this behavior should be added.
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
  * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
- * @param {Function} options.callback An action executed by the handler.
+ * @param options.callback An action executed by the handler.
  */
 export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
     emitter.listenTo(document, 'mousedown', (evt, domEvt) => {

package/src/bindings/csstransitiondisablermixin.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @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/csstransitiondisablermixin
+ */
+import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
+import type View from '../view';
+/**
+ * A mixin 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}.
+ *
+ * The usage comes down to:
+ *
+ * ```ts
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
+ * const view = new MyViewWithCssTransitionDisabler();
+ *
+ * // ...
+ *
+ * view.disableCssTransitions();
+ * view.show();
+ * view.enableCssTransitions();
+ * ```
+ *
+ * @param view View instance that should get this functionality.
+ */
+export default function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
+export type ViewWithCssTransitionDisabler = View & {
+    disableCssTransitions(): void;
+    enableCssTransitions(): void;
+};

package/src/bindings/csstransitiondisablermixin.js

@@ -0,0 +1,55 @@
+/**
+ * @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
+ */
+/**
+ * A mixin 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}.
+ *
+ * The usage comes down to:
+ *
+ * ```ts
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
+ * const view = new MyViewWithCssTransitionDisabler();
+ *
+ * // ...
+ *
+ * view.disableCssTransitions();
+ * view.show();
+ * view.enableCssTransitions();
+ * ```
+ *
+ * @param view View instance that should get this functionality.
+ */
+export default function CssTransitionDisablerMixin(view) {
+    class Mixin extends view {
+        disableCssTransitions() {
+            this._isCssTransitionsDisabled = true;
+        }
+        enableCssTransitions() {
+            this._isCssTransitionsDisabled = false;
+        }
+        constructor(...args) {
+            super(...args);
+            this.set('_isCssTransitionsDisabled', false);
+            this.initializeCssTransitionDisablerMixin();
+        }
+        initializeCssTransitionDisablerMixin() {
+            this.extendTemplate({
+                attributes: {
+                    class: [
+                        this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
+                    ]
+                }
+            });
+        }
+    }
+    return Mixin;
+}

package/src/bindings/injectcsstransitiondisabler.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @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/injectcsstransitiondisabler
+ */
+import type View from '../view';
+/**
+ * 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

@@ -2,9 +2,6 @@
  * @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/injectcsstransitiondisabler
- */
 /**
  * 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
@@ -19,35 +16,41 @@
  * **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:
  *
- *		import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
+ * ```ts
+ * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
  *
- *		class MyView extends View {
- *			constructor() {
- *				super();
+ * class MyView extends View {
+ * 	constructor() {
+ * 		super();
  *
- *				// ...
+ * 		// ...
  *
- *				this.setTemplate( { ... } );
+ * 		this.setTemplate( { ... } );
  *
- *				// ...
+ * 		// ...
  *
- *				injectCssTransitionDisabler( this );
+ * 		injectCssTransitionDisabler( this );
  *
- *				// ...
- *			}
- *		}
+ * 		// ...
+ * 	}
+ * }
+ * ```
  *
  * The usage comes down to:
  *
- *		const view = new MyView();
+ * ```ts
+ * const view = new MyView();
  *
- *		// ...
+ * // ...
  *
- *		view.disableCssTransitions();
- *		view.show();
- *		view.enableCssTransitions();
+ * view.disableCssTransitions();
+ * view.show();
+ * view.enableCssTransitions();
+ * ```
  *
- * @param {module:ui/view~View} view View instance that should get this functionality.
+ * @deprecated
+ * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
+ * @param view View instance that should get this functionality.
  */
 export default function injectCssTransitionDisabler(view) {
     const decorated = view;

package/src/bindings/preventdefault.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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/preventdefault
+ */
+import type { ListenerBinding } from '../template';
+import type View from '../view';
+/**
+ * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
+ * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
+ * {@link module:ui/view~View#template template}.
+ *
+ * ```ts
+ * // In a class extending View.
+ * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
+ *
+ * // ...
+ *
+ * this.setTemplate( {
+ * 	tag: 'div',
+ *
+ * 	on: {
+ * 		// Prevent the default mousedown action on this view.
+ * 		mousedown: preventDefault( this )
+ * 	}
+ * } );
+ * ```
+ *
+ * @param view View instance that defines the template.
+ */
+export default function preventDefault(view: View): ListenerBinding;

package/src/bindings/preventdefault.js

@@ -2,30 +2,28 @@
  * @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/preventdefault
- */
 /**
  * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
  * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
  * {@link module:ui/view~View#template template}.
  *
- *		// In a class extending View.
- *		import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
+ * ```ts
+ * // In a class extending View.
+ * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
  *
- *		// ...
+ * // ...
  *
- *		this.setTemplate( {
- *			tag: 'div',
+ * this.setTemplate( {
+ * 	tag: 'div',
  *
- *			on: {
- *				// Prevent the default mousedown action on this view.
- *				mousedown: preventDefault( this )
- *			}
- *		} );
+ * 	on: {
+ * 		// Prevent the default mousedown action on this view.
+ * 		mousedown: preventDefault( this )
+ * 	}
+ * } );
+ * ```
  *
- * @param {module:ui/view~View} view View instance that defines the template.
- * @returns {module:ui/template~TemplateToBinding}
+ * @param view View instance that defines the template.
  */
 export default function preventDefault(view) {
     return view.bindTemplate.to(evt => {