@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/src/button/buttonview.js

@@ -0,0 +1,248 @@
+/**
+ * @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/button/buttonview
+ */
+import View from '../view.js';
+import IconView from '../icon/iconview.js';
+import ButtonLabelView from './buttonlabelview.js';
+import { env, getEnvKeystrokeText, uid, delay } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/button/button.css';
+/**
+ * The button view class.
+ *
+ * ```ts
+ * const view = new ButtonView();
+ *
+ * view.set( {
+ * 	label: 'A button',
+ * 	keystroke: 'Ctrl+B',
+ * 	tooltip: true,
+ * 	withText: true
+ * } );
+ *
+ * view.render();
+ *
+ * document.body.append( view.element );
+ * ```
+ */
+export default class ButtonView extends View {
+    /**
+     * Creates an instance of the button view class.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param labelView The instance of the button's label. If not provided, an instance of
+     * {@link module:ui/button/buttonlabelview~ButtonLabelView} is used.
+     */
+    constructor(locale, labelView = new ButtonLabelView()) {
+        super(locale);
+        /**
+         * Delayed focus function for focus handling in Safari.
+         */
+        this._focusDelayed = null;
+        const bind = this.bindTemplate;
+        const ariaLabelUid = uid();
+        // Implement the Button interface.
+        this.set('_ariaPressed', false);
+        this.set('_ariaChecked', false);
+        this.set('ariaLabel', undefined);
+        this.set('ariaLabelledBy', `ck-editor__aria-label_${ariaLabelUid}`);
+        this.set('class', undefined);
+        this.set('labelStyle', undefined);
+        this.set('icon', undefined);
+        this.set('isEnabled', true);
+        this.set('isOn', false);
+        this.set('isVisible', true);
+        this.set('isToggleable', false);
+        this.set('keystroke', undefined);
+        this.set('label', undefined);
+        this.set('role', undefined);
+        this.set('tabindex', -1);
+        this.set('tooltip', false);
+        this.set('tooltipPosition', 's');
+        this.set('type', 'button');
+        this.set('withText', false);
+        this.set('withKeystroke', false);
+        this.children = this.createCollection();
+        this.labelView = this._setupLabelView(labelView);
+        this.iconView = new IconView();
+        this.iconView.extendTemplate({
+            attributes: {
+                class: 'ck-button__icon'
+            }
+        });
+        this.keystrokeView = this._createKeystrokeView();
+        this.bind('_tooltipString').to(this, 'tooltip', this, 'label', this, 'keystroke', this._getTooltipString.bind(this));
+        const template = {
+            tag: 'button',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button',
+                    bind.to('class'),
+                    bind.if('isEnabled', 'ck-disabled', value => !value),
+                    bind.if('isVisible', 'ck-hidden', value => !value),
+                    bind.to('isOn', value => value ? 'ck-on' : 'ck-off'),
+                    bind.if('withText', 'ck-button_with-text'),
+                    bind.if('withKeystroke', 'ck-button_with-keystroke')
+                ],
+                role: bind.to('role'),
+                type: bind.to('type', value => value ? value : 'button'),
+                tabindex: bind.to('tabindex'),
+                'aria-checked': bind.to('_ariaChecked'),
+                'aria-pressed': bind.to('_ariaPressed'),
+                'aria-label': bind.to('ariaLabel'),
+                'aria-labelledby': bind.to('ariaLabelledBy'),
+                'aria-disabled': bind.if('isEnabled', true, value => !value),
+                'data-cke-tooltip-text': bind.to('_tooltipString'),
+                'data-cke-tooltip-position': bind.to('tooltipPosition')
+            },
+            children: this.children,
+            on: {
+                click: bind.to(evt => {
+                    // We can't make the button disabled using the disabled attribute, because it won't be focusable.
+                    // Though, shouldn't this condition be moved to the button controller?
+                    if (this.isEnabled) {
+                        this.fire('execute');
+                    }
+                    else {
+                        // Prevent the default when button is disabled, to block e.g.
+                        // automatic form submitting. See ckeditor/ckeditor5-link#74.
+                        evt.preventDefault();
+                    }
+                })
+            }
+        };
+        this.bind('_ariaPressed').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
+            if (!isToggleable || isCheckableRole(role)) {
+                return false;
+            }
+            return String(!!isOn);
+        });
+        this.bind('_ariaChecked').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
+            if (!isToggleable || !isCheckableRole(role)) {
+                return false;
+            }
+            return String(!!isOn);
+        });
+        // On Safari we have to force the focus on a button on click as it's the only browser
+        // that doesn't do that automatically. See #12115.
+        if (env.isSafari) {
+            if (!this._focusDelayed) {
+                this._focusDelayed = delay(() => this.focus(), 0);
+            }
+            template.on.mousedown = bind.to(() => {
+                this._focusDelayed();
+            });
+            template.on.mouseup = bind.to(() => {
+                this._focusDelayed.cancel();
+            });
+        }
+        this.setTemplate(template);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this.icon) {
+            this.iconView.bind('content').to(this, 'icon');
+            this.children.add(this.iconView);
+        }
+        this.children.add(this.labelView);
+        if (this.withKeystroke && this.keystroke) {
+            this.children.add(this.keystrokeView);
+        }
+    }
+    /**
+     * Focuses the {@link #element} of the button.
+     */
+    focus() {
+        this.element.focus();
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        if (this._focusDelayed) {
+            this._focusDelayed.cancel();
+        }
+        super.destroy();
+    }
+    /**
+     * Binds the label view instance it with button attributes.
+     */
+    _setupLabelView(labelView) {
+        labelView.bind('text', 'style', 'id').to(this, 'label', 'labelStyle', 'ariaLabelledBy');
+        return labelView;
+    }
+    /**
+     * Creates a view that displays a keystroke next to a {@link #labelView label }
+     * and binds it with button attributes.
+     */
+    _createKeystrokeView() {
+        const keystrokeView = new View();
+        keystrokeView.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button__keystroke'
+                ]
+            },
+            children: [
+                {
+                    text: this.bindTemplate.to('keystroke', text => getEnvKeystrokeText(text))
+                }
+            ]
+        });
+        return keystrokeView;
+    }
+    /**
+     * Gets the text for the tooltip from the combination of
+     * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
+     *
+     * @see #tooltip
+     * @see #_tooltipString
+     * @param tooltip Button tooltip.
+     * @param label Button label.
+     * @param keystroke Button keystroke.
+     */
+    _getTooltipString(tooltip, label, keystroke) {
+        if (tooltip) {
+            if (typeof tooltip == 'string') {
+                return tooltip;
+            }
+            else {
+                if (keystroke) {
+                    keystroke = getEnvKeystrokeText(keystroke);
+                }
+                if (tooltip instanceof Function) {
+                    return tooltip(label, keystroke);
+                }
+                else {
+                    return `${label}${keystroke ? ` (${keystroke})` : ''}`;
+                }
+            }
+        }
+        return '';
+    }
+}
+/**
+ * Checks if `aria-checkbox` can be used with specified role.
+ */
+function isCheckableRole(role) {
+    switch (role) {
+        case 'radio':
+        case 'checkbox':
+        case 'option':
+        case 'switch':
+        case 'menuitemcheckbox':
+        case 'menuitemradio':
+            return true;
+        default:
+            return false;
+    }
+}

package/src/button/filedialogbuttonview.d.ts

@@ -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
+ */
+/**
+ * @module ui/button/filedialogbuttonview
+ */
+import View from '../view.js';
+import ButtonView from './buttonview.js';
+import type { Mixed } from '@ckeditor/ckeditor5-utils';
+import ListItemButtonView from './listitembuttonview.js';
+declare const FileDialogButtonView_base: Mixed<typeof ButtonView, FileDialogButtonViewBase>;
+/**
+ * The file dialog button view.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+ * ```ts
+ * const view = new FileDialogButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogButtonView_base {
+}
+declare const FileDialogListItemButtonView_base: Mixed<typeof ListItemButtonView, FileDialogButtonViewBase>;
+/**
+ * The file dialog button view used in a lists.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+* ```ts
+ * const view = new FileDialogListItemButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export declare class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogListItemButtonView_base {
+}
+/**
+ * Represents the base view for a file dialog button component.
+ */
+type FileDialogButtonViewBase = View & {
+    /**
+     * The button view of the component.
+     *
+     * @deprecated
+     */
+    buttonView: ButtonView;
+    /**
+     * Accepted file types. Can be provided in form of file extensions, media type or one of:
+     * * `audio/*`,
+     * * `video/*`,
+     * * `image/*`.
+     *
+     * @observable
+     */
+    acceptedType: string;
+    /**
+     * Indicates if multiple files can be selected. Defaults to `true`.
+     *
+     * @observable
+     */
+    allowMultipleFiles: boolean;
+};
+/**
+ * Fired when file dialog is closed with file selected.
+ *
+ * ```ts
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of files ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * }
+ * ```
+ */
+export type FileInputViewDoneEvent = {
+    name: 'done';
+    args: [files: FileList];
+};
+export {};

package/src/button/filedialogbuttonview.js

@@ -0,0 +1,145 @@
+/**
+ * @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/button/filedialogbuttonview
+ */
+import View from '../view.js';
+import ButtonView from './buttonview.js';
+import ListItemButtonView from './listitembuttonview.js';
+/**
+ * The file dialog button view.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+ * ```ts
+ * const view = new FileDialogButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogViewMixin(ButtonView) {
+}
+/**
+ * The file dialog button view used in a lists.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+* ```ts
+ * const view = new FileDialogListItemButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogViewMixin(ListItemButtonView) {
+}
+/**
+ * Mixin function that enhances a base button view class with file dialog functionality. It is used
+ * to create a button view class that opens the native select file dialog when clicked.
+ *
+ * The enhanced view includes a button and a hidden file input. When the button is clicked, the file dialog is opened.
+ * The mixin adds properties and methods to the base class to handle the file selection.
+ *
+ * @param view The base class to be enhanced with file dialog functionality.
+ * @returns A new class that extends the base class and includes the file dialog functionality.
+ */
+function FileDialogViewMixin(view) {
+    class FileDialogView extends view {
+        /**
+         * @inheritDoc
+         */
+        constructor(...args) {
+            super(...args);
+            // For backward compatibility.
+            this.buttonView = this;
+            this._fileInputView = new FileInputView(this.locale);
+            this._fileInputView.bind('acceptedType').to(this);
+            this._fileInputView.bind('allowMultipleFiles').to(this);
+            this._fileInputView.delegate('done').to(this);
+            this.on('execute', () => {
+                this._fileInputView.open();
+            });
+            this.extendTemplate({
+                attributes: {
+                    class: 'ck-file-dialog-button'
+                }
+            });
+        }
+        /**
+         * @inheritDoc
+         */
+        render() {
+            super.render();
+            this.children.add(this._fileInputView);
+        }
+    }
+    return FileDialogView;
+}
+/**
+ * The hidden file input view class.
+ */
+class FileInputView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.set('acceptedType', undefined);
+        this.set('allowMultipleFiles', false);
+        const bind = this.bindTemplate;
+        this.setTemplate({
+            tag: 'input',
+            attributes: {
+                class: [
+                    'ck-hidden'
+                ],
+                type: 'file',
+                tabindex: '-1',
+                accept: bind.to('acceptedType'),
+                multiple: bind.to('allowMultipleFiles')
+            },
+            on: {
+                // Removing from code coverage since we cannot programmatically set input element files.
+                change: bind.to(/* istanbul ignore next -- @preserve */ () => {
+                    if (this.element && this.element.files && this.element.files.length) {
+                        this.fire('done', this.element.files);
+                    }
+                    this.element.value = '';
+                })
+            }
+        });
+    }
+    /**
+     * Opens file dialog.
+     */
+    open() {
+        this.element.click();
+    }
+}

package/src/button/listitembuttonview.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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/button/listitembuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ButtonLabel from './buttonlabel.js';
+import type ViewCollection from '../viewcollection.js';
+import ButtonView from './buttonview.js';
+import View from '../view.js';
+import '../../theme/components/button/listitembutton.css';
+/**
+ * Button that is used as dropdown list item entry.
+ */
+export default class ListItemButtonView extends ButtonView {
+    /**
+     * Indicates whether the button view has reserved space for a check holder.
+     *
+     * @observable
+     */
+    hasCheckSpace: boolean;
+    /**
+     * The flag that indicates if the button should render a check holder.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _hasCheck: boolean;
+    /**
+     * Holds the view for the check icon of a button list item.
+     */
+    private readonly _checkIconHolderView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale, labelView?: ButtonLabel);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconHolderMount;
+}
+export declare class CheckIconHolderView extends View {
+    /**
+     * Collection of child views.
+     */
+    readonly children: ViewCollection<View>;
+    /**
+     * Indicates whether the button is in the "on" state.
+     */
+    isOn: boolean;
+    /**
+     * The view for the check icon of the button list item.
+     */
+    private readonly _checkIconView;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconMount;
+    /**
+     * Creates a check icon view.
+     */
+    private _createCheckIconView;
+}

package/src/button/listitembuttonview.js

@@ -0,0 +1,129 @@
+/**
+ * @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 { icons } from '@ckeditor/ckeditor5-core';
+import ButtonView from './buttonview.js';
+import ButtonLabelView from './buttonlabelview.js';
+import IconView from '../icon/iconview.js';
+import View from '../view.js';
+import '../../theme/components/button/listitembutton.css';
+/**
+ * Button that is used as dropdown list item entry.
+ */
+export default class ListItemButtonView extends ButtonView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, labelView = new ButtonLabelView()) {
+        super(locale, labelView);
+        /**
+         * Holds the view for the check icon of a button list item.
+         */
+        this._checkIconHolderView = new CheckIconHolderView();
+        this.set({
+            hasCheckSpace: false,
+            _hasCheck: this.isToggleable
+        });
+        const bind = this.bindTemplate;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-list-item-button',
+                    bind.if('isToggleable', 'ck-list-item-button_toggleable')
+                ]
+            }
+        });
+        this.bind('_hasCheck').to(this, 'hasCheckSpace', this, 'isToggleable', (hasCheckSpace, isToggleable) => hasCheckSpace || isToggleable);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this._hasCheck) {
+            this.children.add(this._checkIconHolderView, 0);
+        }
+        this._watchCheckIconHolderMount();
+    }
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    _watchCheckIconHolderMount() {
+        this._checkIconHolderView
+            .bind('isOn')
+            .to(this, 'isOn', value => this.isToggleable && value);
+        this.on('change:_hasCheck', (evt, propertyName, hasCheck) => {
+            const { children, _checkIconHolderView } = this;
+            if (hasCheck) {
+                children.add(_checkIconHolderView, 0);
+            }
+            else {
+                children.remove(_checkIconHolderView);
+            }
+        });
+    }
+}
+export class CheckIconHolderView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        /**
+         * The view for the check icon of the button list item.
+         */
+        this._checkIconView = this._createCheckIconView();
+        const bind = this.bindTemplate;
+        this.children = this.createCollection();
+        this.set('isOn', false);
+        this.setTemplate({
+            tag: 'span',
+            children: this.children,
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-list-item-button__check-holder',
+                    bind.to('isOn', isOn => isOn ? 'ck-on' : 'ck-off')
+                ]
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this.isOn) {
+            this.children.add(this._checkIconView, 0);
+        }
+        this._watchCheckIconMount();
+    }
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    _watchCheckIconMount() {
+        this.on('change:isOn', (evt, propertyName, isOn) => {
+            const { children, _checkIconView } = this;
+            if (isOn && !children.has(_checkIconView)) {
+                children.add(_checkIconView);
+            }
+            else if (!isOn && children.has(_checkIconView)) {
+                children.remove(_checkIconView);
+            }
+        });
+    }
+    /**
+     * Creates a check icon view.
+     */
+    _createCheckIconView() {
+        const iconView = new IconView();
+        iconView.content = icons.check;
+        iconView.extendTemplate({
+            attributes: {
+                class: 'ck-list-item-button__check-icon'
+            }
+        });
+        return iconView;
+    }
+}