Преглед на файлове

Hide panel on selection change when unmatched selection.

Maciej Gołaszewski преди 6 години
родител
ревизия
385762a3ea
променени са 2 файла, в които са добавени 46 реда и са изтрити 22 реда
  1. 7 3
      packages/ckeditor5-mention/src/textwatcher.js
  2. 39 19
      packages/ckeditor5-mention/tests/mentionui.js

+ 7 - 3
packages/ckeditor5-mention/src/textwatcher.js

@@ -40,8 +40,12 @@ export default class TextWatcher {
 			const entry = changes[ 0 ];
 
 			// Typing is represented by only a single change.
-			if ( changes.length != 1 || entry.name != '$text' || entry.length != 1 ) {
-				return undefined;
+			const isTypingChange = changes.length == 1 && entry.name == '$text' && entry.length == 1;
+			// Selection is represented by empty changes.
+			const isSelectionChange = changes.length == 0;
+
+			if ( !isTypingChange && !isSelectionChange ) {
+				return;
 			}
 
 			const text = this._getText();
@@ -68,7 +72,7 @@ export default class TextWatcher {
 
 		// Do nothing if selection is not collapsed.
 		if ( !selection.isCollapsed ) {
-			return undefined;
+			return;
 		}
 
 		const block = selection.focus.parent;

+ 39 - 19
packages/ckeditor5-mention/tests/mentionui.js

@@ -368,29 +368,49 @@ describe( 'MentionUI', () => {
 	} );
 
 	describe( 'panel behavior', () => {
-		describe( 'on esc', () => {
-			it( 'should close the opened panel', () => {
-				return createClassicTestEditor( staticConfig )
-					.then( () => {
-						setData( model, '<paragraph>foo []</paragraph>' );
+		it( 'should close the opened panel on esc', () => {
+			return createClassicTestEditor( staticConfig )
+				.then( () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
 
-						model.change( writer => {
-							writer.insertText( '@', doc.selection.getFirstPosition() );
-						} );
-					} )
-					.then( waitForDebounce )
-					.then( () => {
-						expect( panelView.isVisible ).to.be.true;
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
+					} );
+				} )
+				.then( waitForDebounce )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.true;
 
-						fireKeyDownEvent( {
-							keyCode: keyCodes.esc,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
-						} );
+					fireKeyDownEvent( {
+						keyCode: keyCodes.esc,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					} );
 
-						expect( panelView.isVisible ).to.be.false;
+					expect( panelView.isVisible ).to.be.false;
+				} );
+		} );
+
+		it( 'should hide the panel when click outside', () => {
+			return createClassicTestEditor( staticConfig )
+				.then( () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
 					} );
-			} );
+				} )
+				.then( waitForDebounce )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.true;
+
+					model.change( writer => {
+						// Place position at the begging of a paragraph.
+						writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
+					} );
+
+					expect( panelView.isVisible ).to.be.false;
+				} );
 		} );
 
 		describe( 'default list item', () => {