Merge pull request #10409 from ckeditor/ck/10012-hit-enter-to-find-next

Feature (find-and-replace): Made it possible to cycle find results by using <kbd>Enter</kbd> and <kbd>Shift</kbd>+<kbd>Enter</kbd> keystrokes. Closes #10012.

Author: oleq

packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js

@@ -719,14 +719,35 @@ export default class FindAndReplaceFormView extends View {
 			const target = event.target;
 
 			if ( target === this._findInputView.fieldView.element ) {
-				this._findButtonView.fire( 'execute' );
+				if ( this._areCommandsEnabled.findNext ) {
+					this._findNextButtonView.fire( 'execute' );
+				} else {
+					this._findButtonView.fire( 'execute' );
+				}
 				stopPropagationAndPreventDefault( event );
 			} else if ( target === this._replaceInputView.fieldView.element ) {
 				this._replaceButtonView.fire( 'execute' );
 				stopPropagationAndPreventDefault( event );
 			}
 		} );
 
+		// Find previous upon pressing Shift+Enter in the find field.
+		this._keystrokes.set( 'shift+enter', event => {
+			const target = event.target;
+
+			if ( target !== this._findInputView.fieldView.element ) {
+				return;
+			}
+
+			if ( this._areCommandsEnabled.findPrevious ) {
+				this._findPrevButtonView.fire( 'execute' );
+			} else {
+				this._findButtonView.fire( 'execute' );
+			}
+
+			stopPropagationAndPreventDefault( event );
+		} );
+
 		// Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
 		// keystroke handler would take over the key management in the URL input.
 		// We need to prevent this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.

packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js

@@ -556,6 +556,69 @@ describe( 'FindAndReplaceFormView', () => {
 				sinon.assert.calledOnceWithExactly( spy, 'execute' );
 			} );
 
+			it( 'handles "enter" when pressed in the find input and goes to the next result', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.enter,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy(),
+					target: view._findInputView.fieldView.element
+				};
+
+				view._areCommandsEnabled = { findNext: true };
+
+				const spy = sinon.spy( view._findNextButtonView, 'fire' );
+
+				view._keystrokes.press( keyEvtData );
+
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnceWithExactly( spy, 'execute' );
+			} );
+
+			it( 'handles "shift+enter" when pressed in the find input and performs a search', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.enter,
+					shiftKey: true,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy(),
+					target: view._findInputView.fieldView.element
+				};
+
+				const spy = sinon.spy( view._findButtonView, 'fire' );
+
+				view._keystrokes.press( keyEvtData );
+
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnceWithExactly( spy, 'execute' );
+			} );
+
+			it( 'handles "shift+enter" when pressed in the find input and goes to the previous result', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.enter,
+					shiftKey: true,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy(),
+					target: view._findInputView.fieldView.element
+				};
+
+				view._areCommandsEnabled = { findPrevious: true };
+
+				const spy = sinon.spy( view._findPrevButtonView, 'fire' );
+
+				view._keystrokes.press( keyEvtData );
+
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledOnceWithExactly( spy, 'execute' );
+			} );
+
 			it( 'handles "enter" when pressed in the replace input and performs a replacement', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.enter,
@@ -590,6 +653,23 @@ describe( 'FindAndReplaceFormView', () => {
 				sinon.assert.notCalled( keyEvtData.stopPropagation );
 				sinon.assert.notCalled( spy );
 			} );
+
+			it( 'ignores "shift+enter" when pressed somewhere else', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.enter,
+					shiftKey: true,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				const spy = sinon.spy( view._replaceButtonView, 'fire' );
+
+				view._keystrokes.press( keyEvtData );
+
+				sinon.assert.notCalled( keyEvtData.preventDefault );
+				sinon.assert.notCalled( keyEvtData.stopPropagation );
+				sinon.assert.notCalled( spy );
+			} );
 		} );
 	} );