Merge pull request #1167 from ckeditor/t/932-3177

link command in easy image context menu

plugins/imagebase/plugin.js

@@ -54,13 +54,32 @@
 			parts: {
 				link: 'a'
 			},
+			init: function() {
+				if ( this.editor.plugins.link && this.editor.contextMenu ) {
+					this.on( 'contextMenu', function( evt ) {
+						if ( this.parts.link ) {
+							evt.data.link = evt.data.unlink = CKEDITOR.TRISTATE_OFF;
+						}
+					} );
+				}
+			},
 
 			setUp: function( editor ) {
 				if ( !editor.plugins.link ) {
 					// All of listeners registered later on make only sense when link plugin is loaded.
 					return;
 				}
 
+				if ( editor.contextMenu ) {
+					editor.addMenuGroup( 'imagebase', 10 );
+
+					editor.addMenuItem( 'imagebase', {
+						label: editor.lang.link.menu,
+						command: 'link',
+						group: 'imagebase'
+					} );
+				}
+
 				editor.on( 'dialogShow', function( evt ) {
 					var widget = getFocusedWidget( editor ),
 						dialog = evt.data,

tests/plugins/imagebase/features/link.js

@@ -1,5 +1,5 @@
 /* bender-tags: editor,widget */
-/* bender-ckeditor-plugins: imagebase,link,toolbar */
+/* bender-ckeditor-plugins: imagebase,link,toolbar,contextmenu */
 /* bender-include: ../../widget/_helpers/tools.js */
 /* global widgetTestsTools */
 
@@ -146,6 +146,26 @@
 		} );
 	}
 
+	function testLinkOptionInContextMenu( editor, bot, data, testCase, cb ) {
+		addTestWidget( editor );
+		bot.setData( data, function() {
+			var widget = editor.widgets.getByElement( editor.editable().findOne( 'figure' ) );
+
+			widget.focus();
+			editor.contextMenu.open( editor.editable() );
+			var itemsExist = 0;
+			for ( var i = 0; i < editor.contextMenu.items.length; ++i ) {
+				if ( testCase( editor, i ) ) {
+					itemsExist += 1;
+				}
+			}
+
+			editor.contextMenu.hide();
+
+			cb( itemsExist );
+		} );
+	}
+
 	var tests = {
 		'test adding image widget with link feature': function( editor ) {
 			var expectedParts = {
@@ -389,6 +409,27 @@
 					} );
 				}
 			} );
+		},
+		'test link option in context menu': function( editor, bot ) {
+			testLinkOptionInContextMenu( editor, bot, '<figure><a href="http://foo"><img src="%BASE_PATH%_assets/logo.png"></a></figure>', function( editor, index ) {
+				return editor.contextMenu.items[ index ].command == 'link';
+			}, function( itemsExist ) {
+				assert.areSame( 1, itemsExist, 'there is one link item in context menu' );
+			} );
+		},
+		'test unlink option in context menu': function( editor, bot ) {
+			testLinkOptionInContextMenu( editor, bot, '<figure><a href="http://foo"><img src="%BASE_PATH%_assets/logo.png"></a></figure>', function( editor, index ) {
+				return editor.contextMenu.items[ index ].command == 'unlink';
+			}, function( itemsExist ) {
+				assert.areSame( 1, itemsExist, 'there is one unlink item in context menu' );
+			} );
+		},
+		'test no link option in context menu': function( editor, bot ) {
+			testLinkOptionInContextMenu( editor, bot, '<figure><img src="%BASE_PATH%_assets/logo.png"></figure>', function( editor, index ) {
+				return editor.contextMenu.items[ index ].command == 'unlink' || editor.contextMenu.items[ index ].command == 'link';
+			}, function( itemsExist ) {
+				assert.areSame( 0, itemsExist, 'there is one link item in context menu' );
+			} );
 		}
 	};
 

tests/plugins/imagebase/features/manual/linkcontextmenu.html

@@ -0,0 +1,29 @@
+
+<div id="classic">
+	<p>Widget with no link:</p>
+	<figure>
+		<img src="../../../image2/_assets/foo.png" alt="foo">
+		<figcaption>Test image</figcaption>
+	</figure>
+	<p>Widget with predefined link:</p>
+	<figure>
+		<a href="https://cksource.com">
+			<img src="../../../image2/_assets/foo.png" alt="foo">
+		</a>
+		<figcaption>Test image</figcaption>
+	</figure>
+</div>
+
+<script>
+	CKEDITOR.replace( 'classic', {
+		on: {
+			pluginsLoaded: function( evt ) {
+				var editor = evt.editor,
+					plugin = CKEDITOR.plugins.imagebase;
+
+				plugin.addImageWidget( editor, 'testWidget', plugin.addFeature( editor, 'link', {} ) );
+			}
+		},
+		height: 500
+	} );
+</script>

tests/plugins/imagebase/features/manual/linkcontextmenu.md

@@ -0,0 +1,31 @@
+@bender-tags: 4.9.0, feature, 932
+@bender-ui: collapsed
+@bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, imagebase, link, htmlwriter, elementspath, contextmenu
+
+## Scenario 1
+
+1. Right-click the first image to show the context menu.
+
+### Expected
+
+* There are no link connected options in the menu.
+
+## Scenario 2
+
+1. Add link to the first image in the editor.
+2. Right click on it to show the context menu.
+3. Click "Edit Link" and change URL of the link.
+
+### Excepted
+
+* There are link connected options in the menu.
+* Editing link's URL actually changes link's URL.
+
+## Scenario 3
+
+1. Right-click the second image in the editor to show the context menu.
+2. Choose "Unlink".
+
+### Expected
+
+* Link is removed.