Merge pull request #10904 from ckeditor/ck/10877-list-properties-ui

Feature (list): Implemented the numbered list properties UI. Closes #10877. Other (ui): `FocusCycler` should skip elements that are invisible to the user (see #10877). Feature (ui): Introduced the `InputView` class for other inputs such as `InputTextView` to inherit from (see #10877). Feature (utils): Introduced the `isVisible()` helper to detect whether DOM elements are visible to the user in DOM (see #10877).
ckeditor · Dec 16, 2021 · 9be585f · 9be585f · Tyler-Washington888 · Dec 17, 2021
2 parents d080639 + d3bf610
commit 9be585f
Show file tree

Hide file tree

Showing 49 changed files with 3,201 additions and 546 deletions.
diff --git a/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js b/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js
@@ -28,7 +28,8 @@ import {
 	FocusTracker,
 	KeystrokeHandler,
 	Collection,
-	Rect
+	Rect,
+	isVisible
 } from 'ckeditor5/src/utils';
 
 // See: #8833.
@@ -513,7 +514,7 @@ export default class FindAndReplaceFormView extends View {
 			const inputElement = this._findInputView.fieldView.element;
 
 			// Don't adjust the padding if the input (also: counter) were not rendered or not inserted into DOM yet.
-			if ( !inputElement || !inputElement.offsetParent ) {
+			if ( !inputElement || !isVisible( inputElement ) ) {
 				return;
 			}
 

diff --git a/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js b/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js
@@ -44,9 +44,11 @@ describe( 'FindAndReplaceFormView', () => {
 	beforeEach( () => {
 		view = new FindAndReplaceFormView( { t: val => val } );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
 		view.destroy();
 	} );
 
@@ -385,7 +387,7 @@ describe( 'FindAndReplaceFormView', () => {
 			} );
 
 			it( 'should register child views\' #element in #focusTracker', () => {
-				view = new FindAndReplaceFormView( { t: val => val } );
+				const view = new FindAndReplaceFormView( { t: val => val } );
 
 				const spy = testUtils.sinon.spy( view._focusTracker, 'add' );
 
@@ -399,16 +401,20 @@ describe( 'FindAndReplaceFormView', () => {
 				sinon.assert.calledWithExactly( spy.getCall( 5 ), view._optionsDropdown.element );
 				sinon.assert.calledWithExactly( spy.getCall( 6 ), view._replaceButtonView.element );
 				sinon.assert.calledWithExactly( spy.getCall( 7 ), view._replaceAllButtonView.element );
+
+				view.destroy();
 			} );
 
 			it( 'starts listening for #keystrokes coming from #element', () => {
-				view = new FindAndReplaceFormView( { t: val => val } );
+				const view = new FindAndReplaceFormView( { t: val => val } );
 
 				const spy = sinon.spy( view._keystrokes, 'listenTo' );
 
 				view.render();
 				sinon.assert.calledOnce( spy );
 				sinon.assert.calledWithExactly( spy, view.element );
+
+				view.destroy();
 			} );
 
 			describe( 'activates keyboard navigation in the form', () => {

diff --git a/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js b/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document, Event */
 
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
@@ -33,9 +33,12 @@ describe( 'ImageUploadPanelView', () => {
 			'insertImageViaUrl': createLabeledInputView( { t: val => val } )
 		} );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
+		view.destroy();
 		sinon.restore();
 	} );
 
@@ -161,17 +164,19 @@ describe( 'ImageUploadPanelView', () => {
 		} );
 
 		it( 'should register child views\' #element in #focusTracker with no integrations', () => {
-			view = new ImageUploadPanelView( { t: () => {} } );
+			const view = new ImageUploadPanelView( { t: () => {} } );
 
 			const spy = testUtils.sinon.spy( view.focusTracker, 'add' );
 			view.render();
 
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.insertButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'should register child views\' #element in #focusTracker with "insertImageViaUrl" integration', () => {
-			view = new ImageUploadPanelView( { t: () => {} }, {
+			const view = new ImageUploadPanelView( { t: () => {} }, {
 				'insertImageViaUrl': createLabeledInputView( { t: val => val } )
 			} );
 
@@ -182,16 +187,20 @@ describe( 'ImageUploadPanelView', () => {
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.getIntegration( 'insertImageViaUrl' ).element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.insertButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new ImageUploadPanelView( { t: () => {} } );
+			const view = new ImageUploadPanelView( { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {

diff --git a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
+/* global document, Event */
 
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import TextAlternativeFormView from '../../../src/imagetextalternative/ui/textalternativeformview';
@@ -106,6 +106,12 @@ describe( 'TextAlternativeFormView', () => {
 			describe( 'activates keyboard navigation in the form', () => {
 				beforeEach( () => {
 					view.render();
+					document.body.appendChild( view.element );
+				} );
+
+				afterEach( () => {
+					view.element.remove();
+					view.destroy();
 				} );
 
 				it( 'so "tab" focuses the next focusable item', () => {

diff --git a/packages/ckeditor5-link/tests/ui/linkactionsview.js b/packages/ckeditor5-link/tests/ui/linkactionsview.js
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* globals document */
+
 import LinkActionsView from '../../src/ui/linkactionsview';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -20,6 +22,12 @@ describe( 'LinkActionsView', () => {
 	beforeEach( () => {
 		view = new LinkActionsView( { t: val => val } );
 		view.render();
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -139,22 +147,26 @@ describe( 'LinkActionsView', () => {
 		it( 'should register child views\' #element in #focusTracker', () => {
 			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
 
-			view = new LinkActionsView( { t: () => {} } );
+			const view = new LinkActionsView( { t: () => {} } );
 			view.render();
 
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.previewButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.editButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.unlinkButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new LinkActionsView( { t: () => {} } );
+			const view = new LinkActionsView( { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {

diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js
@@ -29,9 +29,11 @@ describe( 'LinkFormView', () => {
 	beforeEach( () => {
 		view = new LinkFormView( { t: val => val }, { manualDecorators: [] } );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
 		view.destroy();
 	} );
 
@@ -108,7 +110,7 @@ describe( 'LinkFormView', () => {
 		} );
 
 		it( 'should register child views\' #element in #focusTracker', () => {
-			view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
+			const view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
 
 			const spy = testUtils.sinon.spy( view.focusTracker, 'add' );
 
@@ -117,16 +119,20 @@ describe( 'LinkFormView', () => {
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
+			const view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {
@@ -214,6 +220,7 @@ describe( 'LinkFormView', () => {
 
 	describe( 'manual decorators', () => {
 		let view, collection, linkCommand;
+
 		beforeEach( () => {
 			collection = new Collection();
 			collection.add( new ManualDecorator( {

diff --git a/packages/ckeditor5-list/lang/contexts.json b/packages/ckeditor5-list/lang/contexts.json
@@ -21,5 +21,9 @@
 	"Lower–roman": "The tooltip text of the button that toggles the \"lower–roman\" list style.",
 	"Upper-roman": "The tooltip text of the button that toggles the \"upper–roman\" list style.",
 	"Lower-latin": "The tooltip text of the button that toggles the \"lower–latin\" list style.",
-	"Upper-latin": "The tooltip text of the button that toggles the \"upper–latin\" list style."
+	"Upper-latin": "The tooltip text of the button that toggles the \"upper–latin\" list style.",
+	"List properties": "The label of the button that toggles the visibility of additional numbered list property UI fields.",
+	"Start at": "The label of the input allowing to change the start index of a numbered list.",
+	"Start index must be greater than 0.": "The error message displayed when the numbered list start index input value is invalid.",
+	"Reversed order": "The label of the switch button that reverses the order of the numbered list."
 }
diff --git a/packages/ckeditor5-list/package.json b/packages/ckeditor5-list/package.json
@@ -12,7 +12,8 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^31.1.0"
+    "ckeditor5": "^31.1.0",
+    "@ckeditor/ckeditor5-ui": "^31.1.0"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^31.1.0",
@@ -34,7 +35,6 @@
     "@ckeditor/ckeditor5-table": "^31.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^31.1.0",
     "@ckeditor/ckeditor5-typing": "^31.1.0",
-    "@ckeditor/ckeditor5-ui": "^31.1.0",
     "@ckeditor/ckeditor5-undo": "^31.1.0",
     "@ckeditor/ckeditor5-utils": "^31.1.0",
     "webpack": "^5.58.1",