Merge pull request #94 from ckeditor/i/5958

Fix: Mention UI is no longer appearing when mention command is disabled. Closes ckeditor/ckeditor5#5958.

src/mentionui.js

@@ -406,6 +406,9 @@ export default class MentionUI extends Plugin {
 			this._hideUIAndRemoveMarker();
 		} );
 
+		const mentionCommand = editor.commands.get( 'mention' );
+		watcher.bind( 'isEnabled' ).to( mentionCommand );
+
 		return watcher;
 	}
 

tests/manual/mention.js

@@ -106,15 +106,44 @@ class InlineWidget extends Plugin {
 	}
 }
 
+class MentionCommandSwitcher extends Plugin {
+	init() {
+		const editor = this.editor;
+		const mentionCommand = editor.commands.get( 'mention' );
+
+		editor.ui.componentFactory.add( 'toggleMentionCommand', locale => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: 'Mentions',
+				withText: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn' ).to( mentionCommand, 'isEnabled' );
+
+			this.listenTo( view, 'execute', () => {
+				if ( mentionCommand.isEnabled ) {
+					mentionCommand.forceDisabled( 'mentionCommandSwitcher' );
+				} else {
+					mentionCommand.clearForceDisabled( 'mentionCommandSwitcher' );
+				}
+			} );
+
+			return view;
+		} );
+	}
+}
+
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Underline, Font, Mention, InlineWidget ],
+		plugins: [ ArticlePluginSet, Underline, Font, Mention, InlineWidget, MentionCommandSwitcher ],
 		toolbar: [
 			'heading',
 			'|', 'bulletedList', 'numberedList', 'blockQuote',
 			'|', 'bold', 'italic', 'underline', 'link',
 			'|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
-			'|', 'insertTable', 'placeholder',
+			'|', 'insertTable', 'placeholder', 'toggleMentionCommand',
 			'|', 'undo', 'redo'
 		],
 		image: {

tests/manual/mention.md

@@ -26,7 +26,7 @@ The feeds:
 You can interact with mention panel with keyboard:
 
 - Move arrows up/down to select an item.
-- Use <kbd>enter</kbd> or <kbd>tab</kbd> to insert a mention into the documentation. 
+- Use <kbd>enter</kbd> or <kbd>tab</kbd> to insert a mention into the documentation.
 - The <kbd>esc</kbd> should close the panel.
 
 Mention panel should be closed on:
@@ -41,3 +41,5 @@ The mention should be removed from the text when:
 - removing characters from a mention
 - breaking the mention (<kbd>enter</kbd>)
 - pasting part of a mention
+
+Mention UI should not appear when mention command is disabled (**Mentions** toggle in toolbar).

tests/mentionui.js

@@ -351,6 +351,25 @@ describe( 'MentionUI', () => {
 				} );
 		} );
 
+		it( 'should not show panel when command is disabled', () => {
+			return createClassicTestEditor( staticConfig )
+				.then( () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					const mentionCommand = editor.commands.get( 'mention' );
+					mentionCommand.forceDisabled( 'mentionCommandDisableTest' );
+
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
+					} );
+				} )
+				.then( waitForDebounce )
+				.then( () => {
+					expect( panelView.isVisible ).to.be.false;
+					expect( editor.model.markers.has( 'mention' ) ).to.be.false;
+				} );
+		} );
+
 		describe( 'static list with large set of results', () => {
 			const bigList = {
 				marker: '@',