Merge pull request #246 from ckeditor/i/6193

Other: Implemented lazy loading for the table dropdown. This will reduce editor initialization time. Closes ckeditor/ckeditor5#6193.

Author: Reinmar

src/tableui.js

@@ -54,21 +54,29 @@ export default class TableUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Prepare custom view for dropdown's panel.
-			const insertTableView = new InsertTableView( locale );
-			dropdownView.panelView.children.add( insertTableView );
+			let insertTableView;
 
-			insertTableView.delegate( 'execute' ).to( dropdownView );
+			dropdownView.on( 'change:isOpen', () => {
+				if ( insertTableView ) {
+					return;
+				}
 
-			dropdownView.buttonView.on( 'open', () => {
-				// Reset the chooser before showing it to the user.
-				insertTableView.rows = 0;
-				insertTableView.columns = 0;
-			} );
+				// Prepare custom view for dropdown's panel.
+				insertTableView = new InsertTableView( locale );
+				dropdownView.panelView.children.add( insertTableView );
+
+				insertTableView.delegate( 'execute' ).to( dropdownView );
+
+				dropdownView.buttonView.on( 'open', () => {
+					// Reset the chooser before showing it to the user.
+					insertTableView.rows = 0;
+					insertTableView.columns = 0;
+				} );
 
-			dropdownView.on( 'execute', () => {
-				editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
-				editor.editing.view.focus();
+				dropdownView.on( 'execute', () => {
+					editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
+					editor.editing.view.focus();
+				} );
 			} );
 
 			return dropdownView;

tests/tableui.js

@@ -11,6 +11,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 import TableEditing from '../src/tableediting';
 import TableUI from '../src/tableui';
+import InsertTableView from '../src/ui/inserttableview';
 import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
@@ -53,6 +54,7 @@ describe( 'TableUI', () => {
 
 		beforeEach( () => {
 			insertTable = editor.ui.componentFactory.create( 'insertTable' );
+			insertTable.isOpen = true; // Dropdown is lazy loaded, so make sure its open (#6193).
 		} );
 
 		it( 'should register insertTable button', () => {
@@ -65,7 +67,7 @@ describe( 'TableUI', () => {
 			const command = editor.commands.get( 'insertTable' );
 
 			command.isEnabled = true;
-			expect( insertTable.buttonView.isOn ).to.be.false;
+			expect( insertTable.buttonView.isOn ).to.be.true;
 			expect( insertTable.buttonView.isEnabled ).to.be.true;
 
 			command.isEnabled = false;
@@ -87,6 +89,8 @@ describe( 'TableUI', () => {
 		} );
 
 		it( 'should reset rows & columns on dropdown open', () => {
+			insertTable.isOpen = true;
+
 			const tableSizeView = insertTable.panelView.children.first;
 
 			expect( tableSizeView.rows ).to.equal( 0 );
@@ -100,6 +104,14 @@ describe( 'TableUI', () => {
 			expect( tableSizeView.rows ).to.equal( 0 );
 			expect( tableSizeView.columns ).to.equal( 0 );
 		} );
+
+		it( 'is not fully initialized when not open', () => {
+			const dropdown = editor.ui.componentFactory.create( 'insertTable' );
+
+			for ( const childView of dropdown.panelView.children ) {
+				expect( childView ).not.to.be.instanceOf( InsertTableView );
+			}
+		} );
 	} );
 
 	describe( 'tableRow dropdown', () => {