Bladeren bron

Fix balloon position target function to not operate on graveyard ranges.

Maciej Gołaszewski 6 jaren geleden
bovenliggende
commit
71fa10fd18

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

@@ -450,14 +450,22 @@ export default class MentionUI extends Plugin {
 	 * @private
 	 */
 	_getBalloonPanelPositionData( mentionMarker, preferredPosition ) {
+		const editor = this.editor;
 		const editing = this.editor.editing;
 		const domConverter = editing.view.domConverter;
 		const mapper = editing.mapper;
 
 		return {
 			target: () => {
-				const viewRange = mapper.toViewRange( mentionMarker.getRange() );
+				let modelRange = mentionMarker.getRange();
+
+				// Target the UI to the model selection range - the marker has been removed so probably the UI will not be shown anyway.
+				// The logic is used by ContextualBalloon to display another panel in the same place.
+				if ( modelRange.start.root.rootName == '$graveyard' ) {
+					modelRange = editor.model.document.selection.getFirstRange();
+				}
 
+				const viewRange = mapper.toViewRange( modelRange );
 				const rangeRects = Rect.getDomRangeRects( domConverter.viewRangeToDom( viewRange ) );
 
 				return rangeRects.pop();

+ 58 - 0
packages/ckeditor5-mention/tests/mention-integration.js

@@ -11,6 +11,8 @@ 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 Link from '@ckeditor/ckeditor5-link/src/link';
+import Delete from '@ckeditor/ckeditor5-typing/src/delete';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
@@ -268,4 +270,60 @@ describe( 'Mention feature - integration', () => {
 				} );
 		} );
 	} );
+
+	describe( 'with link toolbar', () => {
+		beforeEach( () => {
+			return ClassicTestEditor
+				.create( div, {
+					plugins: [ Paragraph, Link, Delete, Mention ],
+					mention: {
+						feeds: [
+							{
+								marker: '@',
+								feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+					doc = model.document;
+				} );
+		} );
+
+		it( 'should work with link toolbar', () => {
+			editor.ui.focusTracker.isFocused = true;
+
+			setData( model, '<paragraph>[]</paragraph>' );
+
+			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( () => {
+					// Show link UI
+					editor.execute( 'link', '@' );
+					editor.editing.view.document.fire( 'click' );
+
+					expect( panelView.isVisible ).to.be.true;
+					expect( balloon.visibleView === mentionsView ).to.be.false; // LinkUI
+
+					model.change( writer => {
+						writer.setSelection( doc.getRoot().getChild( 0 ), 'end' );
+					} );
+				} )
+				.then( () => new Promise( resolve => setTimeout( resolve, 200 ) ) )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.true;
+					expect( balloon.visibleView === mentionsView ).to.be.true;
+
+					editor.execute( 'delete' );
+
+					expect( panelView.isVisible ).to.be.false;
+				} );
+		} );
+	} );
 } );