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.

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 );
+ } );
  } );
  } );