Explorar el Código

Handle ESC key on opened panel.

Maciej Gołaszewski hace 6 años
padre
commit
198fe8b82c

+ 6 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -70,6 +70,10 @@ export default class MentionUI extends Plugin {
 				if ( data.keyCode == keyCodes.enter || data.keyCode == keyCodes.tab ) {
 					this._mentionsView.executeSelected();
 				}
+
+				if ( data.keyCode == keyCodes.esc ) {
+					this._hidePanel();
+				}
 			}
 		}, { priority: 'highest' } ); // priority highest required for enter overriding.
 
@@ -343,7 +347,8 @@ function isHandledKey( keyCode ) {
 		keyCodes.arrowleft,
 		keyCodes.arrowright,
 		keyCodes.enter,
-		keyCodes.tab
+		keyCodes.tab,
+		keyCodes.esc
 	];
 	return handledKeyCodes.includes( keyCode );
 }

+ 23 - 0
packages/ckeditor5-mention/tests/mentionui.js

@@ -531,6 +531,29 @@ describe( 'MentionUI', () => {
 					} );
 			} );
 		} );
+
+		describe( 'esc', () => {
+			it( 'should close the opened panel', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '@', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+
+						fireKeyDownEvent( {
+							keyCode: keyCodes.esc,
+							preventDefault: sinon.spy(),
+							stopPropagation: sinon.spy()
+						} );
+
+						expect( panelView.isVisible ).to.be.false;
+					} );
+			} );
+		} );
 	} );
 
 	describe( 'itemRenderer', () => {