8
0
Pārlūkot izejas kodu

Fix mention ui integration with other contextual balloons.

Maciej Gołaszewski 6 gadi atpakaļ
vecāks
revīzija
6349155d7c

+ 5 - 4
packages/ckeditor5-mention/src/mentionui.js

@@ -443,12 +443,13 @@ export default class MentionUI extends Plugin {
 	 * @private
 	 */
 	_hideUIAndRemoveMarker() {
-		if ( this.editor.model.markers.has( 'mention' ) ) {
-			this.editor.model.change( writer => writer.removeMarker( 'mention' ) );
+		// Remove the mention view from balloon before removing marker - it is used by balloon position target().
+		if ( this._balloon.hasView( this._mentionsView ) ) {
+			this._balloon.remove( this._mentionsView );
 		}
 
-		if ( this._isUIVisible ) {
-			this._balloon.remove( this._mentionsView );
+		if ( this.editor.model.markers.has( 'mention' ) ) {
+			this.editor.model.change( writer => writer.removeMarker( 'mention' ) );
 		}
 
 		// Make the last matched position on panel view undefined so the #_getBalloonPanelPositionData() method will return all positions

+ 61 - 1
packages/ckeditor5-mention/tests/mention-integration.js

@@ -3,18 +3,23 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global document */
+/* global document, setTimeout */
 
 import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import UndoEditing from '@ckeditor/ckeditor5-undo/src/undoediting';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { parse as parseView, getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
+import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 import MentionEditing from '../src/mentionediting';
+import Mention from '../src/mention';
+import MentionUI from '../src/mentionui';
 
 describe( 'Mention feature - integration', () => {
 	let div, editor, model, doc;
@@ -208,4 +213,59 @@ describe( 'Mention feature - integration', () => {
 				.to.equal( expectedData );
 		} );
 	} );
+
+	describe( 'with table toolbar', () => {
+		beforeEach( () => {
+			return ClassicTestEditor
+				.create( div, {
+					plugins: [ Paragraph, Table, TableToolbar, Mention ],
+					table: {
+						contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+					},
+					mention: {
+						feeds: [
+							{
+								marker: '@',
+								feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+					doc = model.document;
+				} );
+		} );
+
+		it( 'should work with table toolbar', () => {
+			editor.ui.focusTracker.isFocused = true;
+
+			setData( model, '<table><tableRow><tableCell><paragraph>foo []</paragraph></tableCell></tableRow></table>' );
+
+			const balloon = editor.plugins.get( 'ContextualBalloon' );
+			const panelView = balloon.view;
+			const mentionUI = editor.plugins.get( MentionUI );
+			const mentionsView = mentionUI._mentionsView;
+
+			return new Promise( resolve => setTimeout( resolve, 200 ) )
+				.then( () => {
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
+					} );
+				} )
+				.then( () => new Promise( resolve => setTimeout( resolve, 200 ) ) )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.true;
+					expect( balloon.visibleView === mentionsView ).to.be.true;
+
+					model.change( writer => {
+						writer.setSelection( doc.getRoot().getNodeByPath( [ 0, 0, 0, 0 ] ), '1' );
+					} );
+
+					expect( panelView.isVisible ).to.be.true;
+					expect( balloon.visibleView === mentionsView ).to.be.false;
+				} );
+		} );
+	} );
 } );