浏览代码

Show mention UI on specific selection states only.

Maciej Gołaszewski 6 年之前
父节点
当前提交
48912282ea
共有 2 个文件被更改,包括 52 次插入0 次删除
  1. 9 0
      packages/ckeditor5-mention/src/mentionui.js
  2. 43 0
      packages/ckeditor5-mention/tests/mentionui.js

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

@@ -193,6 +193,15 @@ export default class MentionUI extends Plugin {
 		watcher.on( 'matched', ( evt, data ) => {
 		watcher.on( 'matched', ( evt, data ) => {
 			const matched = data.matched;
 			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;
 			const { feedText, marker } = matched;
 
 
 			// TODO: show panel {loading: true}
 			// 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', () => {
 			it( 'should show filtered results for matched text', () => {
 				setData( model, '<paragraph>foo []</paragraph>' );
 				setData( model, '<paragraph>foo []</paragraph>' );