Merge pull request #111 from ckeditor/t/110

Fix: The image toolbar should not be doubled when the `ContextualToolbar` plugin is in use. Closes #110.

src/image.js

@@ -11,6 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageEngine from './image/imageengine';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import ImageTextAlternative from './imagetextalternative';
+import { isImageWidget } from './image/utils';
 
 import '../theme/theme.scss';
 
@@ -35,4 +36,25 @@ export default class Image extends Plugin {
 	static get pluginName() {
 		return 'image/image';
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const contextualToolbar = editor.plugins.get( 'ui/contextualtoolbar' );
+
+		// If `ContextualToolbar` plugin is loaded, it should be disabled for images
+		// which have their own toolbar to avoid duplication.
+		// https://github.com/ckeditor/ckeditor5-image/issues/110
+		if ( contextualToolbar ) {
+			this.listenTo( contextualToolbar, 'beforeShow', ( evt, stop ) => {
+				const selectedElement = editor.editing.view.selection.getSelectedElement();
+
+				if ( selectedElement && isImageWidget( selectedElement ) ) {
+					stop();
+				}
+			} );
+		}
+	}
 }

src/imagetextalternative.js

@@ -49,7 +49,7 @@ export default class ImageTextAlternative extends Plugin {
 			/**
 			 * Balloon panel containing text alternative change form.
 			 *
-			 * @member {module:image/ui/imageballoonpanel~ImageBalloonPanelView} #baloonPanel
+			 * @member {module:image/image/ui/imageballoonpanel~ImageBalloonPanelView} #baloonPanel
 			 */
 			this.balloonPanel = panel;
 

src/imagetextalternative/ui/textalternativeformview.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module image/imagetextalternative/ui/imagetextalternativeformview
+ * @module image/imagetextalternative/ui/textalternativeformview
  */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';

tests/image.js

@@ -13,12 +13,14 @@ import ImageTextAlternative from '../src/imagetextalternative';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
+import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 describe( 'Image', () => {
-	let editor, document, viewDocument;
+	let editorElement, editor, document, viewDocument;
 
 	beforeEach( () => {
-		const editorElement = window.document.createElement( 'div' );
+		editorElement = window.document.createElement( 'div' );
 		window.document.body.appendChild( editorElement );
 
 		return ClassicTestEditor.create( editorElement, {
@@ -31,6 +33,12 @@ describe( 'Image', () => {
 		} );
 	} );
 
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
 	it( 'should be loaded', () => {
 		expect( editor.plugins.get( Image ) ).to.instanceOf( Image );
 	} );
@@ -47,6 +55,41 @@ describe( 'Image', () => {
 		expect( editor.plugins.get( ImageTextAlternative ) ).to.instanceOf( ImageTextAlternative );
 	} );
 
+	it( 'should prevent the ContextualToolbar from being displayed when an image is selected', () => {
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ Image, ContextualToolbar, Paragraph ]
+		} )
+		.then( newEditor => {
+			const balloon = newEditor.plugins.get( 'ui/contextualballoon' );
+			const contextualToolbar = newEditor.plugins.get( 'ui/contextualtoolbar' );
+
+			newEditor.editing.view.isFocused = true;
+
+			// When image is selected along with text.
+			setModelData( newEditor.document, '<paragraph>fo[o</paragraph><image alt="alt text" src="foo.png"></image>]' );
+
+			return contextualToolbar._showPanel()
+				.then( () => {
+					// ContextualToolbar should be visible.
+					expect( balloon.visibleView ).to.equal( contextualToolbar.toolbarView );
+
+					// When only image is selected.
+					setModelData( newEditor.document, '<paragraph>foo</paragraph>[<image alt="alt text" src="foo.png"></image>]' );
+
+					return contextualToolbar._showPanel()
+						.then( () => {
+							// ContextualToolbar should not be visible.
+							expect( balloon.visibleView ).to.be.null;
+
+							// Cleaning up.
+							editorElement.remove();
+
+							return newEditor.destroy();
+						} );
+				} );
+		} );
+	} );
+
 	describe( 'selection', () => {
 		it( 'should create fake selection', () => {
 			setModelData( document, '[<image alt="alt text" src="foo.png"></image>]' );

tests/manual/tickets/110/1.html

@@ -0,0 +1,8 @@
+<div id="editor">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<figure class="image">
+		<img src="../../sample.jpg" alt="CKEditor logo" />
+	</figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+</div>

tests/manual/tickets/110/1.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import EnterPlugin from '@ckeditor/ckeditor5-enter/src/enter';
+import TypingPlugin from '@ckeditor/ckeditor5-typing/src/typing';
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
+import ImagePlugin from '../../../../src/image';
+import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
+import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import ImageToolbar from '../../../../src/imagetoolbar';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ImageToolbar, ContextualToolbar ],
+	contextualToolbar: [ 'headings', 'undo', 'redo' ],
+	image: {
+		toolbar: [ 'imageTextAlternative' ]
+	}
+} )
+.then( editor => {
+	window.editor = editor;
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

tests/manual/tickets/110/1.md

@@ -0,0 +1,6 @@
+### Double image toolbar when ContextualToolbar plugin is loaded [#110](https://github.com/ckeditor/ckeditor5-image/issues/110)
+
+1. When selecting a text, the `ContextualToolbar` should appear.
+2. Click on image:
+   1. The image toolbar in a balloon should show up,
+   2. The ContextualToolbar should not be visible.