@ckeditor/ckeditor5-ui 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/editableui/editableuiview.js

@@ -1,130 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editableui/editableuiview
- */
-import { View } from '../view.js';
-/**
- * The editable UI view class.
- */
-export class EditableUIView extends View {
-    /**
-     * The name of the editable UI view.
-     */
-    name = null;
-    /**
-     * The editing view instance the editable is related to. Editable uses the editing
-     * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
-     *
-     * **Note**: The DOM attributes are performed by the editing view and not UI
-     * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
-     * the editable DOM element must remain under the full control of the engine to work properly.
-     */
-    _editingView;
-    /**
-     * The element which is the main editable element (usually the one with `contentEditable="true"`).
-     */
-    _editableElement;
-    /**
-     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-     * the view will not render its {@link #template}.
-     */
-    _hasExternalElement;
-    /**
-     * Creates an instance of EditableUIView class.
-     *
-     * @param locale The locale instance.
-     * @param editingView The editing view instance the editable is related to.
-     * @param editableElement The editable element. If not specified, this view
-     * should create it. Otherwise, the existing element should be used.
-     */
-    constructor(locale, editingView, editableElement) {
-        super(locale);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-content',
-                    'ck-editor__editable',
-                    'ck-rounded-corners'
-                ],
-                lang: locale.contentLanguage,
-                dir: locale.contentLanguageDirection
-            }
-        });
-        this.set('isFocused', false);
-        this._editableElement = editableElement;
-        this._hasExternalElement = !!this._editableElement;
-        this._editingView = editingView;
-    }
-    /**
-     * Renders the view by either applying the {@link #template} to the existing
-     * {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement} or assigning {@link #element}
-     * as {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement}.
-     */
-    render() {
-        super.render();
-        if (this._hasExternalElement) {
-            this.template.apply(this.element = this._editableElement);
-        }
-        else {
-            this._editableElement = this.element;
-        }
-        this.on('change:isFocused', () => this._updateIsFocusedClasses());
-        this._updateIsFocusedClasses();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        if (this._hasExternalElement) {
-            this.template.revert(this._editableElement);
-        }
-        super.destroy();
-    }
-    /**
-     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-     * the view will not render its {@link #template}.
-     */
-    get hasExternalElement() {
-        return this._hasExternalElement;
-    }
-    /**
-     * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to
-     * the {@link #isFocused} property value using the {@link #_editingView editing view} API.
-     */
-    _updateIsFocusedClasses() {
-        const editingView = this._editingView;
-        if (editingView.isRenderingInProgress) {
-            updateAfterRender(this);
-        }
-        else {
-            update(this);
-        }
-        function update(view) {
-            editingView.change(writer => {
-                const viewRoot = editingView.document.getRoot(view.name);
-                writer.addClass(view.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot);
-                writer.removeClass(view.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot);
-            });
-        }
-        // In a case of a multi-root editor, a callback will be attached more than once (one callback for each root).
-        // While executing one callback the `isRenderingInProgress` observable is changing what causes executing another
-        // callback and render is called inside the already pending render.
-        // We need to be sure that callback is executed only when the value has changed from `true` to `false`.
-        // See https://github.com/ckeditor/ckeditor5/issues/1676.
-        function updateAfterRender(view) {
-            editingView.once('change:isRenderingInProgress', (evt, name, value) => {
-                if (!value) {
-                    update(view);
-                }
-                else {
-                    updateAfterRender(view);
-                }
-            });
-        }
-    }
-}

package/src/editableui/inline/inlineeditableuiview.js

@@ -1,75 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editableui/inline/inlineeditableuiview
- */
-import { EditableUIView } from '../editableuiview.js';
-/**
- * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
- */
-export class InlineEditableUIView extends EditableUIView {
-    /**
-     * The cached options object passed to the constructor.
-     */
-    _options;
-    /**
-     * Creates an instance of the InlineEditableUIView class.
-     *
-     * @param locale The locale instance.
-     * @param editingView The editing view instance the editable is related to.
-     * @param editableElement The editable element. If not specified, the
-     * {@link module:ui/editableui/editableuiview~EditableUIView}
-     * will create it. Otherwise, the existing element will be used.
-     * @param options Additional configuration of the view.
-     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
-     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
-     */
-    constructor(locale, editingView, editableElement, options = {}) {
-        super(locale, editingView, editableElement);
-        this._options = options;
-        this.extendTemplate({
-            attributes: {
-                role: 'textbox',
-                class: 'ck-editor__editable_inline'
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const editingView = this._editingView;
-        editingView.change(writer => {
-            const viewRoot = editingView.document.getRoot(this.name);
-            writer.setAttribute('aria-label', this.getEditableAriaLabel(), viewRoot);
-        });
-    }
-    /**
-     * Returns a normalized label for the editable view based on the environment.
-     */
-    getEditableAriaLabel() {
-        const t = this.locale.t;
-        const label = this._options.label;
-        const editableElement = this._editableElement;
-        const editableName = this.name;
-        if (typeof label == 'string') {
-            return label;
-        }
-        else if (typeof label === 'object') {
-            return label[editableName];
-        }
-        else if (typeof label === 'function') {
-            return label(this);
-        }
-        else if (editableElement) {
-            const existingLabel = editableElement.getAttribute('aria-label');
-            if (existingLabel) {
-                return existingLabel;
-            }
-        }
-        return t('Rich Text Editor. Editing area: %0', editableName);
-    }
-}

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -1,142 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editorui/accessibilityhelp/accessibilityhelp
- */
-import { Plugin } from '@ckeditor/ckeditor5-core';
-import { IconAccessibility } from '@ckeditor/ckeditor5-icons';
-import { ButtonView } from '../../button/buttonview.js';
-import { Dialog } from '../../dialog/dialog.js';
-import { MenuBarMenuListItemButtonView } from '../../menubar/menubarmenulistitembuttonview.js';
-import { AccessibilityHelpContentView } from './accessibilityhelpcontentview.js';
-import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils';
-import '../../../theme/components/editorui/accessibilityhelp.css';
-/**
- * A plugin that brings the accessibility help dialog to the editor available under the <kbd>Alt</kbd>+<kbd>0</kbd>
- * keystroke and via the "Accessibility help" toolbar button. The dialog displays a list of keystrokes that can be used
- * by the user to perform various actions in the editor.
- *
- * Keystroke information is loaded from {@link module:core/accessibility~Accessibility#keystrokeInfos}. New entries can be
- * added using the API provided by the {@link module:core/accessibility~Accessibility} class.
- */
-export class AccessibilityHelp extends Plugin {
-    /**
-     * The view that displays the dialog content (list of keystrokes).
-     * Created when the dialog is opened for the first time.
-     */
-    contentView = null;
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [Dialog];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'AccessibilityHelp';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.locale.t;
-        editor.ui.componentFactory.add('accessibilityHelp', () => {
-            const button = this._createButton(ButtonView);
-            button.set({
-                tooltip: true,
-                withText: false,
-                label: t('Accessibility help')
-            });
-            return button;
-        });
-        editor.ui.componentFactory.add('menuBar:accessibilityHelp', () => {
-            const button = this._createButton(MenuBarMenuListItemButtonView);
-            button.label = t('Accessibility');
-            return button;
-        });
-        editor.keystrokes.set('Alt+0', (evt, cancel) => {
-            this._toggleDialog();
-            cancel();
-        });
-        this._setupRootLabels();
-    }
-    /**
-     * Creates a button to show accessibility help dialog, for use either in toolbar or in menu bar.
-     */
-    _createButton(ButtonClass) {
-        const editor = this.editor;
-        const dialog = editor.plugins.get('Dialog');
-        const locale = editor.locale;
-        const view = new ButtonClass(locale);
-        view.set({
-            keystroke: 'Alt+0',
-            icon: IconAccessibility,
-            isToggleable: true
-        });
-        view.on('execute', () => this._toggleDialog());
-        view.bind('isOn').to(dialog, 'id', id => id === 'accessibilityHelp');
-        return view;
-    }
-    /**
-     * Injects a help text into each editing root's `aria-label` attribute allowing assistive technology users
-     * to discover the availability of the Accessibility help dialog.
-     */
-    _setupRootLabels() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const t = editor.t;
-        editor.ui.on('ready', () => {
-            editingView.change(writer => {
-                for (const root of editingView.document.roots) {
-                    addAriaLabelTextToRoot(writer, root);
-                }
-            });
-            editor.on('addRoot', (evt, modelRoot) => {
-                const viewRoot = editor.editing.view.document.getRoot(modelRoot.rootName);
-                editingView.change(writer => addAriaLabelTextToRoot(writer, viewRoot));
-            }, { priority: 'low' });
-        });
-        function addAriaLabelTextToRoot(writer, viewRoot) {
-            const currentAriaLabel = viewRoot.getAttribute('aria-label');
-            const newAriaLabel = [currentAriaLabel, t('Press %0 for help.', [getEnvKeystrokeText('Alt+0')])]
-                .filter(segment => segment)
-                .join('. ');
-            writer.setAttribute('aria-label', newAriaLabel, viewRoot);
-        }
-    }
-    /**
-     * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
-     */
-    _toggleDialog() {
-        const editor = this.editor;
-        const dialog = editor.plugins.get('Dialog');
-        const t = editor.locale.t;
-        if (!this.contentView) {
-            this.contentView = new AccessibilityHelpContentView(editor.locale, editor.accessibility.keystrokeInfos);
-        }
-        if (dialog.id === 'accessibilityHelp') {
-            dialog.hide();
-        }
-        else {
-            dialog.show({
-                id: 'accessibilityHelp',
-                className: 'ck-accessibility-help-dialog',
-                title: t('Accessibility help'),
-                icon: IconAccessibility,
-                hasCloseButton: true,
-                content: this.contentView
-            });
-        }
-    }
-}

package/src/editorui/accessibilityhelp/accessibilityhelpcontentview.js

@@ -1,112 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editorui/accessibilityhelp/accessibilityhelpcontentview
- */
-import { createElement, env, getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils';
-import { View } from '../../view.js';
-import { LabelView } from '../../label/labelview.js';
-/**
- * The view displaying keystrokes in the Accessibility help dialog.
- */
-export class AccessibilityHelpContentView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, keystrokes) {
-        super(locale);
-        const t = locale.t;
-        const helpLabel = new LabelView();
-        helpLabel.text = t('Help Contents. To close this dialog press ESC.');
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: ['ck', 'ck-accessibility-help-dialog__content'],
-                'aria-labelledby': helpLabel.id,
-                role: 'document',
-                tabindex: -1
-            },
-            children: [
-                createElement(document, 'p', {}, t('Below, you can find a list of keyboard shortcuts that can be used in the editor.')),
-                ...this._createCategories(Array.from(keystrokes.values())),
-                helpLabel
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    focus() {
-        this.element.focus();
-    }
-    /**
-     * Creates `<section><h3>Category label</h3>...</section>` elements for each category of keystrokes.
-     */
-    _createCategories(categories) {
-        return categories.map(categoryDefinition => {
-            const elements = [
-                // Category header.
-                createElement(document, 'h3', {}, categoryDefinition.label),
-                // Category definitions (<dl>) and their optional headers (<h4>).
-                ...Array.from(categoryDefinition.groups.values())
-                    .map(groupDefinition => this._createGroup(groupDefinition))
-                    .flat()
-            ];
-            // Category description (<p>).
-            if (categoryDefinition.description) {
-                elements.splice(1, 0, createElement(document, 'p', {}, categoryDefinition.description));
-            }
-            return createElement(document, 'section', {}, elements);
-        });
-    }
-    /**
-     * Creates `[<h4>Optional label</h4>]<dl>...</dl>` elements for each group of keystrokes in a category.
-     */
-    _createGroup(groupDefinition) {
-        const definitionAndDescriptionElements = groupDefinition.keystrokes
-            .sort((a, b) => a.label.localeCompare(b.label))
-            .map(keystrokeDefinition => this._createGroupRow(keystrokeDefinition))
-            .flat();
-        const elements = [
-            createElement(document, 'dl', {}, definitionAndDescriptionElements)
-        ];
-        if (groupDefinition.label) {
-            elements.unshift(createElement(document, 'h4', {}, groupDefinition.label));
-        }
-        return elements;
-    }
-    /**
-     * Creates `<dt>Keystroke label</dt><dd>Keystroke definition</dd>` elements for each keystroke in a group.
-     */
-    _createGroupRow(keystrokeDefinition) {
-        const t = this.locale.t;
-        const dt = createElement(document, 'dt');
-        const dd = createElement(document, 'dd');
-        const normalizedKeystrokeDefinition = normalizeKeystrokeDefinition(keystrokeDefinition.keystroke);
-        const keystrokeAlternativeHTMLs = [];
-        for (const keystrokeAlternative of normalizedKeystrokeDefinition) {
-            keystrokeAlternativeHTMLs.push(keystrokeAlternative.map(keystrokeToEnvKbd).join(''));
-        }
-        dt.innerHTML = keystrokeDefinition.label;
-        dd.innerHTML = keystrokeAlternativeHTMLs.join(', ') +
-            (keystrokeDefinition.mayRequireFn && env.isMac ? ` ${t('(may require <kbd>Fn</kbd>)')}` : '');
-        return [dt, dd];
-    }
-}
-function keystrokeToEnvKbd(keystroke) {
-    return getEnvKeystrokeText(keystroke)
-        .split('+')
-        .map(part => `<kbd>${part}</kbd>`)
-        .join('+');
-}
-function normalizeKeystrokeDefinition(definition) {
-    if (typeof definition === 'string') {
-        return [[definition]];
-    }
-    if (typeof definition[0] === 'string') {
-        return [definition];
-    }
-    return definition;
-}

package/src/editorui/bodycollection.js

@@ -1,128 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editorui/bodycollection
- */
-import { Template } from '../template.js';
-import { ViewCollection } from '../viewcollection.js';
-import { createElement } from '@ckeditor/ckeditor5-utils';
-/**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached from the DOM structure of
- * the editor, like floating panels, floating toolbars, dialogs, etc.
- *
- * The body collection is available under the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
- * Any plugin can add a {@link module:ui/view~View view} to this collection.
- *
- * All views added to a body collection render in a dedicated DOM container (`<div class="ck ck-body ...">...</div>`). All body collection
- * containers render in a common shared (`<div class="ck-body-wrapper">...</div>`) in the DOM to limit the pollution of
- * the `<body>` element. The resulting DOM structure is as follows:
- *
- * ```html
- * <body>
- * 	<!-- Content of the webpage... -->
- *
- * 	<!-- The shared wrapper for all body collection containers. -->
- * 	<div class="ck-body-wrapper">
- * 		<!-- The container of the first body collection instance. -->
- * 		<div class="ck ck-body ...">
- * 			<!-- View elements belonging to the first body collection -->
- * 		</div>
- *
- * 		<!-- The container of the second body collection instance. -->
- * 		<div class="ck ck-body ...">...</div>
- *
- * 		<!-- More body collection containers for the rest of instances... -->
- * 	</div>
- * </body>
- * ```
- *
- * By default, the {@link module:ui/editorui/editoruiview~EditorUIView `editor.ui.view`} manages the life cycle of the
- * {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} collection, attaching and detaching it
- * when the editor gets created or {@link module:core/editor/editor~Editor#destroy destroyed}.
- *
- * # Custom body collection instances
- *
- * Even though most editor instances come with a built-in body collection
- * ({@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`}), you can create your own instance of this
- * class if you need to control their life cycle.
- *
- * The life cycle of a custom body collection must be handled manually by the developer using the dedicated API:
- * * A body collection will render itself automatically in the DOM as soon as you call {@link ~BodyCollection#attachToDom}.
- * * Calling {@link ~BodyCollection#detachFromDom} will remove the collection from the DOM.
- *
- * **Note**: The shared collection wrapper (`<div class="ck-body-wrapper">...</div>`) gets automatically removed from DOM when the
- * last body collection is {@link ~BodyCollection#detachFromDom detached} and does not require any special handling.
- */
-export class BodyCollection extends ViewCollection {
-    /**
-     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
-     * See the view {@link module:ui/view~View#locale locale} property.
-     */
-    locale;
-    /**
-     * The element holding elements of the body collection.
-     */
-    _bodyCollectionContainer;
-    /**
-     * The wrapper element that holds all of the {@link #_bodyCollectionContainer} elements.
-     */
-    static _bodyWrapper;
-    /**
-     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
-     * @param initialItems The initial items of the collection.
-     */
-    constructor(locale, initialItems = []) {
-        super(initialItems);
-        this.locale = locale;
-    }
-    /**
-     * The element holding elements of the body collection.
-     */
-    get bodyCollectionContainer() {
-        return this._bodyCollectionContainer;
-    }
-    /**
-     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
-     * the body collection.
-     */
-    attachToDom() {
-        this._bodyCollectionContainer = new Template({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset_all',
-                    'ck-body',
-                    'ck-rounded-corners'
-                ],
-                dir: this.locale.uiLanguageDirection,
-                role: 'application'
-            },
-            children: this
-        }).render();
-        // Create a shared wrapper if there were none or the previous one got disconnected from DOM.
-        if (!BodyCollection._bodyWrapper || !BodyCollection._bodyWrapper.isConnected) {
-            BodyCollection._bodyWrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
-            document.body.appendChild(BodyCollection._bodyWrapper);
-        }
-        BodyCollection._bodyWrapper.appendChild(this._bodyCollectionContainer);
-    }
-    /**
-     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
-     * anymore to clean-up the DOM structure.
-     */
-    detachFromDom() {
-        super.destroy();
-        if (this._bodyCollectionContainer) {
-            this._bodyCollectionContainer.remove();
-        }
-        if (BodyCollection._bodyWrapper && !BodyCollection._bodyWrapper.childElementCount) {
-            BodyCollection._bodyWrapper.remove();
-            delete BodyCollection._bodyWrapper;
-        }
-    }
-}

package/src/editorui/boxed/boxededitoruiview.js

@@ -1,95 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/editorui/boxed/boxededitoruiview
- */
-import { EditorUIView } from '../editoruiview.js';
-import { LabelView } from '../../label/labelview.js';
-/**
- * The boxed editor UI view class. This class represents an editor interface
- * consisting of a toolbar and an editable area, enclosed within a box.
- */
-export class BoxedEditorUIView extends EditorUIView {
-    /**
-     * Collection of the child views located in the top (`.ck-editor__top`)
-     * area of the UI.
-     */
-    top;
-    /**
-     * Collection of the child views located in the main (`.ck-editor__main`)
-     * area of the UI.
-     */
-    main;
-    /**
-     * Voice label of the UI.
-     */
-    _voiceLabelView;
-    /**
-     * Creates an instance of the boxed editor UI view class.
-     *
-     * @param locale The locale instance..
-     */
-    constructor(locale) {
-        super(locale);
-        this.top = this.createCollection();
-        this.main = this.createCollection();
-        this._voiceLabelView = this._createVoiceLabel();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset',
-                    'ck-editor',
-                    'ck-rounded-corners'
-                ],
-                role: 'application',
-                dir: locale.uiLanguageDirection,
-                lang: locale.uiLanguage,
-                'aria-labelledby': this._voiceLabelView.id
-            },
-            children: [
-                this._voiceLabelView,
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-editor__top',
-                            'ck-reset_all'
-                        ],
-                        role: 'presentation'
-                    },
-                    children: this.top
-                },
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-editor__main'
-                        ],
-                        role: 'presentation'
-                    },
-                    children: this.main
-                }
-            ]
-        });
-    }
-    /**
-     * Creates a voice label view instance.
-     */
-    _createVoiceLabel() {
-        const t = this.t;
-        const voiceLabel = new LabelView();
-        voiceLabel.text = t('Rich Text Editor');
-        voiceLabel.extendTemplate({
-            attributes: {
-                class: 'ck-voice-label'
-            }
-        });
-        return voiceLabel;
-    }
-}