@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -0,0 +1,107 @@
+/**
+ * @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
+ */
+/**
+ * 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 }) {
+    const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
+    keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        return uiLanguageDirection === 'rtl' ?
+            getLeftElementIndex(focusedElementIndex, gridItems.length) :
+            getRightElementIndex(focusedElementIndex, gridItems.length);
+    }));
+    keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        return uiLanguageDirection === 'rtl' ?
+            getRightElementIndex(focusedElementIndex, gridItems.length) :
+            getLeftElementIndex(focusedElementIndex, gridItems.length);
+    }));
+    keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        let nextIndex = focusedElementIndex - getNumberOfColumns();
+        if (nextIndex < 0) {
+            nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
+            if (nextIndex > gridItems.length - 1) {
+                nextIndex -= getNumberOfColumns();
+            }
+        }
+        return nextIndex;
+    }));
+    keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        let nextIndex = focusedElementIndex + getNumberOfColumns();
+        if (nextIndex > gridItems.length - 1) {
+            nextIndex = focusedElementIndex % getNumberOfColumns();
+        }
+        return nextIndex;
+    }));
+    function getGridItemFocuser(getIndexToFocus) {
+        return (evt) => {
+            const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
+            const focusedElementIndex = gridItems.getIndex(focusedElement);
+            const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
+            gridItems.get(nextIndexToFocus).focus();
+            evt.stopPropagation();
+            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 elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
+    function getRightElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === collectionLength - 1) {
+            return 0;
+        }
+        else {
+            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 elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
+    function getLeftElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === 0) {
+            return collectionLength - 1;
+        }
+        else {
+            return elementIndex - 1;
+        }
+    }
+}

package/src/bindings/clickoutsidehandler.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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/bindings/clickoutsidehandler
+ */
+import type { CallbackOptions, 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.
+ * @param options.listenerOptions Additional options for the listener (like priority).
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }: {
+    emitter: DomEmitter;
+    activator: () => boolean;
+    contextElements: Array<Element> | (() => Array<Element>);
+    callback: () => void;
+    listenerOptions?: CallbackOptions;
+}): void;

package/src/bindings/clickoutsidehandler.js

@@ -0,0 +1,37 @@
+/**
+ * @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
+ */
+/* global document */
+/**
+ * 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.
+ * @param options.listenerOptions Additional options for the listener (like priority).
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }) {
+    emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
+        if (!activator()) {
+            return;
+        }
+        // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
+        // Can be removed when all supported browsers support native shadow DOM.
+        const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
+        const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
+        for (const contextElement of contextElementsList) {
+            if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
+                return;
+            }
+        }
+        callback();
+    }, listenerOptions);
+}

package/src/bindings/csstransitiondisablermixin.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @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/bindings/csstransitiondisablermixin
+ */
+import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
+import type View from '../view.js';
+/**
+ * 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-2024, 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/draggableviewmixin.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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/bindings/draggableviewmixin
+ */
+import type View from '../view.js';
+import { type Constructor, type Mixed } from '@ckeditor/ckeditor5-utils';
+/**
+ * A mixin that brings the possibility to observe dragging of the view element.
+ * The view has to implement the {@link ~DraggableView} interface to use it:
+ *
+ * ```js
+ * export default class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
+ * 		// ...
+ * }
+ * ```
+ *
+ * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
+ * * `mousedown` and `touchstart` on the view element - starting the dragging.
+ * * `mousemove` and `touchmove` on the document - updating the view coordinates.
+ * * `mouseup` and `touchend` on the document - stopping the dragging.
+ *
+ * The mixin itself does not provide a visual feedback (that is, the dragged element does not change its position) -
+ * it is up to the developer to implement it.
+ */
+export default function DraggableViewMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, DraggableView>;
+/**
+ * An interface that should be implemented by views that want to be draggable.
+ */
+export interface DraggableView extends View {
+    get dragHandleElement(): HTMLElement | null;
+}
+/**
+ * An event data object for the {@link ~DraggableView} `drag` event. Fired when the view is dragged.
+ */
+export type DraggableViewDragEvent = {
+    name: 'drag';
+    args: [
+        {
+            deltaX: number;
+            deltaY: number;
+        }
+    ];
+};

package/src/bindings/draggableviewmixin.js

@@ -0,0 +1,144 @@
+/**
+ * @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
+ */
+import { global } from '@ckeditor/ckeditor5-utils';
+/**
+ * A mixin that brings the possibility to observe dragging of the view element.
+ * The view has to implement the {@link ~DraggableView} interface to use it:
+ *
+ * ```js
+ * export default class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
+ * 		// ...
+ * }
+ * ```
+ *
+ * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
+ * * `mousedown` and `touchstart` on the view element - starting the dragging.
+ * * `mousemove` and `touchmove` on the document - updating the view coordinates.
+ * * `mouseup` and `touchend` on the document - stopping the dragging.
+ *
+ * The mixin itself does not provide a visual feedback (that is, the dragged element does not change its position) -
+ * it is up to the developer to implement it.
+ */
+export default function DraggableViewMixin(view) {
+    class DraggableMixin extends view {
+        /**
+         * @inheritDoc
+         */
+        constructor(...args) {
+            super(...args);
+            /**
+             * A bound version of {@link #_onDrag}.
+             */
+            this._onDragBound = this._onDrag.bind(this);
+            /**
+             * A bound version of {@link #_onDragEnd}.
+             */
+            this._onDragEndBound = this._onDragEnd.bind(this);
+            /**
+             * The last coordinates of the view. It is updated on every mouse move.
+             */
+            this._lastDraggingCoordinates = { x: 0, y: 0 };
+            this.on('render', () => {
+                this._attachListeners();
+            });
+            this.set('isDragging', false);
+        }
+        /**
+         * Attaches the listeners for the drag start.
+         */
+        _attachListeners() {
+            this.listenTo(this.element, 'mousedown', this._onDragStart.bind(this));
+            this.listenTo(this.element, 'touchstart', this._onDragStart.bind(this));
+        }
+        /**
+         * Attaches the listeners for the dragging and drag end.
+         */
+        _attachDragListeners() {
+            this.listenTo(global.document, 'mouseup', this._onDragEndBound);
+            this.listenTo(global.document, 'touchend', this._onDragEndBound);
+            this.listenTo(global.document, 'mousemove', this._onDragBound);
+            this.listenTo(global.document, 'touchmove', this._onDragBound);
+        }
+        /**
+         * Detaches the listeners after the drag end.
+         */
+        _detachDragListeners() {
+            this.stopListening(global.document, 'mouseup', this._onDragEndBound);
+            this.stopListening(global.document, 'touchend', this._onDragEndBound);
+            this.stopListening(global.document, 'mousemove', this._onDragBound);
+            this.stopListening(global.document, 'touchmove', this._onDragBound);
+        }
+        /**
+         * Starts the dragging listeners and sets the initial view coordinates.
+         */
+        _onDragStart(evt, domEvt) {
+            if (!this._isHandleElementPressed(domEvt)) {
+                return;
+            }
+            this._attachDragListeners();
+            let x = 0;
+            let y = 0;
+            // If dragging is performed with a mouse, there is only one set of coordinates available.
+            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
+            if (domEvt instanceof MouseEvent) {
+                x = domEvt.clientX;
+                y = domEvt.clientY;
+            }
+            else {
+                x = domEvt.touches[0].clientX;
+                y = domEvt.touches[0].clientY;
+            }
+            this._lastDraggingCoordinates = { x, y };
+            this.isDragging = true;
+        }
+        /**
+         * Updates the view coordinates and fires the `drag` event.
+         */
+        _onDrag(evt, domEvt) {
+            // If dragging was stopped by some external intervention, stop listening.
+            if (!this.isDragging) {
+                this._detachDragListeners();
+                return;
+            }
+            let newX = 0;
+            let newY = 0;
+            // If dragging is performed with a mouse, there is only one set of coordinates available.
+            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
+            if (domEvt instanceof MouseEvent) {
+                newX = domEvt.clientX;
+                newY = domEvt.clientY;
+            }
+            else {
+                newX = domEvt.touches[0].clientX;
+                newY = domEvt.touches[0].clientY;
+            }
+            // Prevents selection of text while dragging on Safari.
+            domEvt.preventDefault();
+            this.fire('drag', {
+                deltaX: Math.round(newX - this._lastDraggingCoordinates.x),
+                deltaY: Math.round(newY - this._lastDraggingCoordinates.y)
+            });
+            this._lastDraggingCoordinates = { x: newX, y: newY };
+        }
+        /**
+         * Stops the dragging and detaches the listeners.
+         */
+        _onDragEnd() {
+            this._detachDragListeners();
+            this.isDragging = false;
+        }
+        /**
+         * Checks if the drag handle element was pressed.
+         */
+        _isHandleElementPressed(domEvt) {
+            if (!this.dragHandleElement) {
+                return false;
+            }
+            return this.dragHandleElement === domEvt.target ||
+                (domEvt.target instanceof HTMLElement && this.dragHandleElement.contains(domEvt.target));
+        }
+    }
+    return DraggableMixin;
+}

package/src/bindings/injectcsstransitiondisabler.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @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/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

@@ -0,0 +1,71 @@
+/**
+ * @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
+ */
+/**
+ * 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')
+            ]
+        }
+    });
+}

package/src/bindings/preventdefault.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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/bindings/preventdefault
+ */
+import type { ListenerBinding } from '../template.js';
+import type View from '../view.js';
+/**
+ * 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

@@ -0,0 +1,34 @@
+/**
+ * @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
+ */
+/**
+ * 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) {
+    return view.bindTemplate.to(evt => {
+        if (evt.target === view.element) {
+            evt.preventDefault();
+        }
+    });
+}