8
0
Quellcode durchsuchen

Fixed double image toolbar when ContextualToolbar plugin is loaded.

Oskar Wróbel vor 8 Jahren
Ursprung
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>]' );

+ 8 - 0
packages/ckeditor5-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>

+ 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.
+