Merge pull request #148 from ckeditor/t/52

Other: Removed the "Unlink" button. Closes #52.

See https://github.com/ckeditor/ckeditor5-link/issues/31#issuecomment-316992952 and https://github.com/ckeditor/ckeditor5-link/issues/149 for plans how unlinking will be exposed in the future.

BREAKING CHANGES: The `unlink'` UI component was removed from the component factory.

src/link.js

@@ -20,8 +20,6 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import LinkFormView from './ui/linkformview';
 
 import linkIcon from '../theme/icons/link.svg';
-import unlinkIcon from '../theme/icons/unlink.svg';
-
 import '../theme/theme.scss';
 
 const linkKeystroke = 'Ctrl+K';
@@ -74,7 +72,6 @@ export default class Link extends Plugin {
 
 		// Create toolbar buttons.
 		this._createToolbarLinkButton();
-		this._createToolbarUnlinkButton();
 
 		// Attach lifecycle actions to the the balloon.
 		this._attachActions();
@@ -160,35 +157,6 @@ export default class Link extends Plugin {
 		} );
 	}
 
-	/**
-	 * Creates a toolbar Unlink button. Clicking this button will unlink
-	 * the selected link.
-	 *
-	 * @private
-	 */
-	_createToolbarUnlinkButton() {
-		const editor = this.editor;
-		const t = editor.t;
-		const unlinkCommand = editor.commands.get( 'unlink' );
-
-		editor.ui.componentFactory.add( 'unlink', locale => {
-			const button = new ButtonView( locale );
-
-			button.isEnabled = false;
-			button.label = t( 'Unlink' );
-			button.icon = unlinkIcon;
-			button.tooltip = true;
-
-			// Bind button to the command.
-			button.bind( 'isEnabled' ).to( unlinkCommand, 'isEnabled' );
-
-			// Execute unlink command and hide panel, if open on button click.
-			this.listenTo( button, 'execute', () => editor.execute( 'unlink' ) );
-
-			return button;
-		} );
-	}
-
 	/**
 	 * Attaches actions that control whether the balloon panel containing the
 	 * {@link #formView} is visible or not.

tests/link.js

@@ -22,7 +22,7 @@ import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobs
 testUtils.createSinonSandbox();
 
 describe( 'Link', () => {
-	let editor, linkFeature, linkButton, unlinkButton, balloon, formView, editorElement;
+	let editor, linkFeature, linkButton, balloon, formView, editorElement;
 
 	beforeEach( () => {
 		editorElement = document.createElement( 'div' );
@@ -39,7 +39,6 @@ describe( 'Link', () => {
 
 				linkFeature = editor.plugins.get( Link );
 				linkButton = editor.ui.componentFactory.create( 'link' );
-				unlinkButton = editor.ui.componentFactory.create( 'unlink' );
 				balloon = editor.plugins.get( ContextualBalloon );
 				formView = linkFeature.formView;
 
@@ -437,31 +436,6 @@ describe( 'Link', () => {
 		} );
 	} );
 
-	describe( 'unlink toolbar button', () => {
-		it( 'should register unlink button', () => {
-			expect( unlinkButton ).to.instanceOf( ButtonView );
-		} );
-
-		it( 'should bind unlinkButtonView to unlink command', () => {
-			const command = editor.commands.get( 'unlink' );
-
-			command.isEnabled = true;
-			expect( unlinkButton.isEnabled ).to.be.true;
-
-			command.isEnabled = false;
-			expect( unlinkButton.isEnabled ).to.be.false;
-		} );
-
-		it( 'should execute unlink command on unlinkButtonView execute event', () => {
-			const executeSpy = testUtils.sinon.spy( editor, 'execute' );
-
-			unlinkButton.fire( 'execute' );
-
-			expect( executeSpy.calledOnce ).to.true;
-			expect( executeSpy.calledWithExactly( 'unlink' ) ).to.true;
-		} );
-	} );
-
 	describe( 'keyboard support', () => {
 		it( 'should show the #_balloon with selected #formView on Ctrl+K keystroke', () => {
 			const spy = testUtils.sinon.stub( linkFeature, '_showPanel' ).returns( {} );

tests/manual/link.js

@@ -15,7 +15,7 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Link, Typing, Paragraph, Undo, Enter ],
-		toolbar: [ 'link', 'unlink', 'undo', 'redo' ]
+		toolbar: [ 'link', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

tests/manual/link.md

@@ -33,8 +33,9 @@
 ### Unlink link fragment
 
 1. Select link fragment.
-2. Click toolbar unlink button.
-3. Check if selected text has been converted into a regular text.
+2. Click the toolbar link button.
+3. Click the "Unlink" button.
+4. Check if selected text has been converted into a regular text.
 
 ### Unlink whole link