@ckeditor/ckeditor5-ui 35.2.1 → 35.3.0

package/src/editableui/editableuiview.js

@@ -2,155 +2,139 @@
  * @license Copyright (c) 2003-2022, 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.
  *
  * @extends module:ui/view~View
  */
 export default class EditableUIView extends View {
-	/**
-	 * Creates an instance of EditableUIView class.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The locale instance.
-	 * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
-	 * @param {HTMLElement} [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
-			}
-		} );
-
-		/**
-		 * The name of the editable UI view.
-		 *
-		 * @member {String} #name
-		 */
-		this.name = null;
-
-		/**
-		 * Controls whether the editable is focused, i.e. the user is typing in it.
-		 *
-		 * @observable
-		 * @member {Boolean} #isFocused
-		 */
-		this.set( 'isFocused', false );
-
-		/**
-		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
-		 *
-		 * @private
-		 * @type {HTMLElement}
-		 */
-		this._editableElement = editableElement;
-
-		/**
-		 * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-		 * the view will not render its {@link #template}.
-		 *
-		 * @private
-		 * @type {Boolean}
-		 */
-		this._hasExternalElement = !!this._editableElement;
-
-		/**
-		 * 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
-		 * @type {module:engine/view/view~View}
-		 */
-		this._editingView = editingView;
-	}
-
-	/**
-	 * Renders the view by either applying the {@link #template} to the existing
-	 * {@link #_editableElement} or assigning {@link #element} as {@link #_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();
-	}
-
-	/**
-	 * 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() {
-		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 );
-				}
-			} );
-		}
-	}
+    /**
+     * Creates an instance of EditableUIView class.
+     *
+     * @param {module:utils/locale~Locale} [locale] The locale instance.
+     * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
+     * @param {HTMLElement} [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
+            }
+        });
+        /**
+         * The name of the editable UI view.
+         *
+         * @member {String} #name
+         */
+        this.name = null;
+        /**
+         * Controls whether the editable is focused, i.e. the user is typing in it.
+         *
+         * @observable
+         * @member {Boolean} #isFocused
+         */
+        this.set('isFocused', false);
+        /**
+         * The element which is the main editable element (usually the one with `contentEditable="true"`).
+         *
+         * @private
+         * @type {HTMLElement}
+         */
+        this._editableElement = editableElement;
+        /**
+         * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+         * the view will not render its {@link #template}.
+         *
+         * @private
+         * @type {Boolean}
+         */
+        this._hasExternalElement = !!this._editableElement;
+        /**
+         * 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
+         * @type {module:engine/view/view~View}
+         */
+        this._editingView = editingView;
+    }
+    /**
+     * Renders the view by either applying the {@link #template} to the existing
+     * {@link #_editableElement} or assigning {@link #element} as {@link #_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();
+    }
+    /**
+     * 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() {
+        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

@@ -2,67 +2,57 @@
  * @license Copyright (c) 2003-2022, 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 '../../editableui/editableuiview';
-
+import EditableUIView from '../editableuiview';
 /**
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  *
  * @extends module:ui/editableui/editableuiview~EditableUIView
  */
 export default class InlineEditableUIView extends EditableUIView {
-	/**
-	 * Creates an instance of the InlineEditableUIView class.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The locale instance.
-	 * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
-	 * @param {HTMLElement} [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 {Object} [options] Additional configuration of the view.
-	 * @param {Function} [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'
-			}
-		} );
-
-		/**
-		 * 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
-		 * @param {Function}
-		 */
-		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 );
-		} );
-	}
+    /**
+     * Creates an instance of the InlineEditableUIView class.
+     *
+     * @param {module:utils/locale~Locale} [locale] The locale instance.
+     * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
+     * @param {HTMLElement} [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 {Object} [options] Additional configuration of the view.
+     * @param {Function} [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'
+            }
+        });
+        /**
+         * 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
+         * @param {Function}
+         */
+        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);
+        });
+    }
 }

package/src/editorui/bodycollection.js

@@ -2,18 +2,13 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module ui/editorui/bodycollection
  */
-
 /* globals document */
-
 import Template from '../template';
 import ViewCollection from '../viewcollection';
-
 import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
-
 /**
  * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
  * from the DOM structure of the editor, like panels, icons, etc.
@@ -33,74 +28,65 @@ import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
  * @extends module:ui/viewcollection~ViewCollection
  */
 export default class BodyCollection extends ViewCollection {
-	/**
-	 * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
-	 *
-	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor editor's locale} instance.
-	 * @param {Iterable.<module:ui/view~View>} [initialItems] The initial items of the collection.
-	 */
-	constructor( locale, initialItems = [] ) {
-		super( initialItems );
-
-		/**
-		 * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
-		 * See the view {@link module:ui/view~View#locale locale} property.
-		 *
-		 * @member {module:utils/locale~Locale}
-		 */
-		this.locale = locale;
-	}
-
-	/**
-	 * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
-	 * the body collection.
-	 */
-	attachToDom() {
-		/**
-		 * The element holding elements of the body region.
-		 *
-		 * @protected
-		 * @member {HTMLElement} #_bodyCollectionContainer
-		 */
-		this._bodyCollectionContainer = new Template( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-reset_all',
-					'ck-body',
-					'ck-rounded-corners'
-				],
-				dir: this.locale.uiLanguageDirection
-			},
-			children: this
-		} ).render();
-
-		let wrapper = document.querySelector( '.ck-body-wrapper' );
-
-		if ( !wrapper ) {
-			wrapper = createElement( document, 'div', { class: 'ck-body-wrapper' } );
-			document.body.appendChild( wrapper );
-		}
-
-		wrapper.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();
-		}
-
-		const wrapper = document.querySelector( '.ck-body-wrapper' );
-
-		if ( wrapper && wrapper.childElementCount == 0 ) {
-			wrapper.remove();
-		}
-	}
+    /**
+     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
+     *
+     * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor editor's locale} instance.
+     * @param {Iterable.<module:ui/view~View>} [initialItems] The initial items of the collection.
+     */
+    constructor(locale, initialItems = []) {
+        super(initialItems);
+        /**
+         * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
+         * See the view {@link module:ui/view~View#locale locale} property.
+         *
+         * @member {module:utils/locale~Locale}
+         */
+        this.locale = locale;
+    }
+    /**
+     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
+     * the body collection.
+     */
+    attachToDom() {
+        /**
+         * The element holding elements of the body region.
+         *
+         * @protected
+         * @member {HTMLElement} #_bodyCollectionContainer
+         */
+        this._bodyCollectionContainer = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset_all',
+                    'ck-body',
+                    'ck-rounded-corners'
+                ],
+                dir: this.locale.uiLanguageDirection
+            },
+            children: this
+        }).render();
+        let wrapper = document.querySelector('.ck-body-wrapper');
+        if (!wrapper) {
+            wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
+            document.body.appendChild(wrapper);
+        }
+        wrapper.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();
+        }
+        const wrapper = document.querySelector('.ck-body-wrapper');
+        if (wrapper && wrapper.childElementCount == 0) {
+            wrapper.remove();
+        }
+    }
 }