Explorar el Código

Fixed double image toolbar when ContextualToolbar plugin is loaded.

Oskar Wróbel hace 8 años
padre
commit
eca97d47bd

+ 21 - 0
packages/ckeditor5-image/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,24 @@ 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 we need to disable it for `Image`
+		// because `Image` has its own toolbar. See: ckeditor/ckeditor5-image#110.
+		if ( contextualToolbar ) {
+			this.listenTo( contextualToolbar, 'beforeShow', ( evt, stop ) => {
+				const selectedElement = editor.editing.view.selection.getSelectedElement();
+
+				if ( selectedElement && isImageWidget( selectedElement ) ) {
+					stop();
+				}
+			} );
+		}
+	}
 }

+ 1 - 1
packages/ckeditor5-image/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;
 

+ 1 - 1
packages/ckeditor5-image/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';

+ 43 - 2
packages/ckeditor5-image/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,39 @@ describe( 'Image', () => {
 		expect( editor.plugins.get( ImageTextAlternative ) ).to.instanceOf( ImageTextAlternative );
 	} );
 
+	it( 'should prevent ContextualToolbar of being displayed when 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>]' );
+
+			contextualToolbar._showPanel();
+
+			// 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>]' );
+
+			contextualToolbar._showPanel();
+
+			// ContextualToolbar should not be visible.
+			expect( balloon.visibleView ).to.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>]' );

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 8 - 0
packages/ckeditor5-image/tests/manual/tickets/110/1.html


+ 30 - 0
packages/ckeditor5-image/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 );
+} );

+ 6 - 0
packages/ckeditor5-image/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)
+
+Click on image:
+- balloon toolbar should appear,
+- ContextualToolbar should not appear.
+