@ckeditor/ckeditor5-ui 39.0.1 → 40.0.0

package/src/editableui/editableuiview.d.ts

@@ -1,72 +1,72 @@
-/**
- * @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/editableui/editableuiview
- */
-import View from '../view';
-import type { View as EditingView } from '@ckeditor/ckeditor5-engine';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * The editable UI view class.
- */
-export default class EditableUIView extends View {
-    /**
-     * The name of the editable UI view.
-     */
-    name: string | null;
-    /**
-     * Controls whether the editable is focused, i.e. the user is typing in it.
-     *
-     * @observable
-     */
-    isFocused: boolean;
-    /**
-     * 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.
-     */
-    protected _editingView: EditingView;
-    /**
-     * The element which is the main editable element (usually the one with `contentEditable="true"`).
-     */
-    private _editableElement;
-    /**
-     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-     * the view will not render its {@link #template}.
-     */
-    private _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: Locale, editingView: EditingView, editableElement?: HTMLElement);
-    /**
-     * 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(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-     * the view will not render its {@link #template}.
-     */
-    get hasExternalElement(): boolean;
-    /**
-     * 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.
-     */
-    private _updateIsFocusedClasses;
-}
+/**
+ * @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/editableui/editableuiview
+ */
+import View from '../view';
+import type { View as EditingView } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The editable UI view class.
+ */
+export default class EditableUIView extends View {
+    /**
+     * The name of the editable UI view.
+     */
+    name: string | null;
+    /**
+     * Controls whether the editable is focused, i.e. the user is typing in it.
+     *
+     * @observable
+     */
+    isFocused: boolean;
+    /**
+     * 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.
+     */
+    protected _editingView: EditingView;
+    /**
+     * The element which is the main editable element (usually the one with `contentEditable="true"`).
+     */
+    private _editableElement;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    private _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: Locale, editingView: EditingView, editableElement?: HTMLElement);
+    /**
+     * 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(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    get hasExternalElement(): boolean;
+    /**
+     * 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.
+     */
+    private _updateIsFocusedClasses;
+}

package/src/editableui/editableuiview.js

@@ -1,112 +1,112 @@
-/**
- * @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/editableui/editableuiview
- */
-import View from '../view';
-/**
- * The editable UI view class.
- */
-export default class EditableUIView extends View {
-    /**
-     * 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);
-        /**
-         * The name of the editable UI view.
-         */
-        this.name = null;
-        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);
-                }
-            });
-        }
-    }
-}
+/**
+ * @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/editableui/editableuiview
+ */
+import View from '../view';
+/**
+ * The editable UI view class.
+ */
+export default class EditableUIView extends View {
+    /**
+     * 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);
+        /**
+         * The name of the editable UI view.
+         */
+        this.name = null;
+        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.d.ts

@@ -1,40 +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/editableui/inline/inlineeditableuiview
- */
-import EditableUIView from '../editableuiview';
-import type { View } from '@ckeditor/ckeditor5-engine';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
- */
-export default class InlineEditableUIView extends EditableUIView {
-    /**
-     * A function that gets called with the instance of this view as an argument and should return a string that
-     * represents the label of the editable for assistive technologies.
-     */
-    private readonly _generateLabel;
-    /**
-     * 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 A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
-     */
-    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement, options?: {
-        label?: (view: InlineEditableUIView) => string;
-    });
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}
+/**
+ * @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/editableui/inline/inlineeditableuiview
+ */
+import EditableUIView from '../editableuiview';
+import type { View } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
+ */
+export default class InlineEditableUIView extends EditableUIView {
+    /**
+     * A function that gets called with the instance of this view as an argument and should return a string that
+     * represents the label of the editable for assistive technologies.
+     */
+    private readonly _generateLabel;
+    /**
+     * 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 A function that gets called with the instance of this view as an argument
+     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
+     * a default label generator is used.
+     */
+    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement, options?: {
+        label?: (view: InlineEditableUIView) => string;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/editableui/inline/inlineeditableuiview.js

@@ -1,48 +1,48 @@
-/**
- * @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/editableui/inline/inlineeditableuiview
- */
-import EditableUIView from '../editableuiview';
-/**
- * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
- */
-export default class InlineEditableUIView extends EditableUIView {
-    /**
-     * 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 A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
-     */
-    constructor(locale, editingView, editableElement, options = {}) {
-        super(locale, editingView, editableElement);
-        const t = locale.t;
-        this.extendTemplate({
-            attributes: {
-                role: 'textbox',
-                class: 'ck-editor__editable_inline'
-            }
-        });
-        this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const editingView = this._editingView;
-        editingView.change(writer => {
-            const viewRoot = editingView.document.getRoot(this.name);
-            writer.setAttribute('aria-label', this._generateLabel(this), viewRoot);
-        });
-    }
-}
+/**
+ * @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/editableui/inline/inlineeditableuiview
+ */
+import EditableUIView from '../editableuiview';
+/**
+ * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
+ */
+export default class InlineEditableUIView extends EditableUIView {
+    /**
+     * 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 A function that gets called with the instance of this view as an argument
+     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
+     * a default label generator is used.
+     */
+    constructor(locale, editingView, editableElement, options = {}) {
+        super(locale, editingView, editableElement);
+        const t = locale.t;
+        this.extendTemplate({
+            attributes: {
+                role: 'textbox',
+                class: 'ck-editor__editable_inline'
+            }
+        });
+        this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        const editingView = this._editingView;
+        editingView.change(writer => {
+            const viewRoot = editingView.document.getRoot(this.name);
+            writer.setAttribute('aria-label', this._generateLabel(this), viewRoot);
+        });
+    }
+}