Procházet zdrojové kódy

Show mention UI on specific selection states only.

Maciej Gołaszewski před 6 roky
rodič
revize
48912282ea

+ 9 - 0
packages/ckeditor5-mention/src/mentionui.js

@@ -193,6 +193,15 @@ export default class MentionUI extends Plugin {
 		watcher.on( 'matched', ( evt, data ) => {
 			const matched = data.matched;
 
+			const selection = editor.model.document.selection;
+
+			const hasMention = selection.hasAttribute( 'mention' );
+			const nodeBefore = selection.focus.nodeBefore;
+
+			if ( hasMention || nodeBefore && nodeBefore.is( 'text' ) && nodeBefore.hasAttribute( 'mention' ) ) {
+				return;
+			}
+
 			const { feedText, marker } = matched;
 
 			// TODO: show panel {loading: true}

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

@@ -224,6 +224,49 @@ describe( 'MentionUI', () => {
 					} );
 			} );
 
+			it( 'should not show panel when selection is inside a mention', () => {
+				setData( model, '<paragraph>foo <$text mention="{\'name\':\'John\'}">@John</$text> bar</paragraph>' );
+
+				model.change( writer => {
+					writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.false;
+					} );
+			} );
+
+			it( 'should not show panel when selection is at the end of a mention', () => {
+				setData( model, '<paragraph>foo <$text mention="{\'name\':\'John\'}">@John</$text> bar</paragraph>' );
+
+				model.change( writer => {
+					writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.false;
+					} );
+			} );
+
+			it( 'should not show panel when selection is not collapsed', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '@', doc.selection.getFirstPosition() );
+				} );
+
+				model.change( () => {
+					model.modifySelection( doc.selection, { direction: 'backward', unit: 'codePoint' } );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.false;
+					} );
+			} );
+
 			it( 'should show filtered results for matched text', () => {
 				setData( model, '<paragraph>foo []</paragraph>' );