Fix (image): Insert image via url dialog can now be submitted by pres…

…sing "enter" key. Closes #16902.

* Allow closing dialog on enter click

* Add test for image insert via url to check if can be closed by clicking enter

* Add new parameter to dialog to indicate if should have form tag.

* Change insert image via url dialog submit on enter

* Fix comments in image insert via url tests

* fix tests

packages/ckeditor5-image/src/imageinsert/ui/imageinserturlview.ts

@@ -11,6 +11,7 @@ import {
 	View,
 	LabeledFieldView,
 	createLabeledInputText,
+	submitHandler,
 	type InputTextView
 } from 'ckeditor5/src/ui.js';
 import { KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
@@ -69,13 +70,14 @@ export default class ImageInsertUrlView extends View {
 		this.urlInputView = this._createUrlInputView();
 
 		this.setTemplate( {
-			tag: 'div',
+			tag: 'form',
 
 			attributes: {
 				class: [
 					'ck',
 					'ck-image-insert-url'
-				]
+				],
+				tabindex: '-1'
 			},
 
 			children: [
@@ -99,6 +101,10 @@ export default class ImageInsertUrlView extends View {
 	public override render(): void {
 		super.render();
 
+		submitHandler( {
+			view: this
+		} );
+
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element! );
 	}

packages/ckeditor5-image/tests/imageinsert/imageinsertviaurlui.js

@@ -120,6 +120,10 @@ describe( 'ImageInsertViaUrlUI', () => {
 			expect( dialog.view.actionsView.children.get( 1 ).label ).to.equal( 'Accept' );
 		} );
 
+		it( 'has submittable form', () => {
+			expect( dialog.view.element.querySelector( 'form.ck-image-insert-url' ) ).to.exist;
+		} );
+
 		it( 'should bind #isImageSelected', () => {
 			expect( urlView.isImageSelected ).to.be.false;
 
@@ -186,6 +190,7 @@ describe( 'ImageInsertViaUrlUI', () => {
 
 		testSubmit( 'accept button', () => acceptButton.fire( 'execute' ) );
 
+		// Browsers handle pressing Enter on forms natively by submitting it. We fire a form submit event to simulate that behavior.
 		testSubmit( 'form submit (enter key)', () => {
 			const form = dialog.view.contentView.children.get( 0 );
 

packages/ckeditor5-image/tests/imageinsert/ui/imageinserturlview.js

@@ -50,7 +50,7 @@ describe( 'ImageInsertUrlView', () => {
 
 	describe( 'template', () => {
 		it( 'should create element from the template', () => {
-			expect( view.element.tagName ).to.equal( 'DIV' );
+			expect( view.element.tagName ).to.equal( 'FORM' );
 			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-image-insert-url' ) ).to.true;