8
0
Просмотр исходного кода

Merge branch 'master' into t/28

Szymon Kupś 9 лет назад
Родитель
Сommit
d14f67dc85

+ 1 - 2
packages/ckeditor5-image/.travis.yml

@@ -15,8 +15,7 @@ before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 install:
-  - npm install gulp mgit2 lerna codeclimate-test-reporter
-  - npm install @ckeditor/ckeditor5-dev-tests @ckeditor/ckeditor5-dev-lint
+  - npm install @ckeditor/ckeditor5-dev-tests
   - ckeditor5-dev-tests-install-dependencies
 script:
   - ckeditor5-dev-tests-travis

+ 4 - 2
packages/ckeditor5-image/lang/contexts.json

@@ -1,5 +1,7 @@
 {
 	"image widget": "Label for the image widget.",
 	"Side image": "Label for the Side image option.",
-	"Full size image": "Label for the Full size image option."
-}
+	"Full size image": "Label for the Full size image option.",
+	"Change alternate text": "Label for the Change alternate text button.",
+	"Alternate image text": "Label for the Alternate image text option."
+}

+ 1 - 1
packages/ckeditor5-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [],
   "dependencies": {

+ 7 - 0
packages/ckeditor5-image/src/imagealternatetext/imagealternatetext.js

@@ -38,6 +38,13 @@ export default class ImageAlternateText extends Plugin {
 	init() {
 		this._createButton();
 
+		// Push button to default image toolbar if the image toolbar was loaded.
+		const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
+
+		if ( defaultImageToolbarConfig ) {
+			defaultImageToolbarConfig.push( 'imageAlternateText' );
+		}
+
 		return this._createBalloonPanel().then( panel => {
 			/**
 			 * Balloon panel containing alternate text change form.

+ 18 - 0
packages/ckeditor5-image/tests/imagealternatetext/imagealternatetext.js

@@ -91,6 +91,24 @@ describe( 'ImageAlternateText', () => {
 			sinon.assert.calledOnce( spy );
 			expect( plugin.form.lebeledInput.value ).equals( '' );
 		} );
+
+		it( 'should not add button to default image toolbar if image toolbar is not present', () => {
+			expect( editor.config.get( 'image.defaultToolbar' ) ).to.be.undefined;
+		} );
+
+		it( 'should add button to default image toolbar if toolbar is present', () => {
+			const editorElement = global.document.createElement( 'div' );
+			global.document.body.appendChild( editorElement );
+
+			return ClassicTestEditor.create( editorElement, {
+				plugins: [ ImageAlternateText, ImageToolbar ]
+			} )
+			.then( newEditor => {
+				expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'imageAlternateText' ] );
+
+				newEditor.destroy();
+			} );
+		} );
 	} );
 
 	describe( 'balloon panel form', () => {

+ 11 - 1
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -43,7 +43,17 @@ describe( 'ImageToolbar', () => {
 	} );
 
 	it( 'should initialize image.defaultToolbar to an empty array', () => {
-		expect( editor.config.get( 'image.defaultToolbar' ) ).to.eql( [] );
+		const editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		return ClassicEditor.create( editorElement, {
+			plugins: [ ImageToolbar ],
+		} )
+		.then( editor => {
+			expect( editor.config.get( 'image.defaultToolbar' ) ).to.eql( [] );
+
+			return editor.destroy();
+		} );
 	} );
 
 	it( 'should not initialize if there is no configuration', () => {

+ 1 - 4
packages/ckeditor5-image/tests/manual/alternatetext.js

@@ -17,10 +17,7 @@ import ImageToolbar from '../../src/imagetoolbar';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageToolbar ],
-	toolbar: [ 'headings', 'undo', 'redo' ],
-	image: {
-		toolbar: [ 'imageAlternateText' ]
-	}
+	toolbar: [ 'headings', 'undo', 'redo' ]
 } )
 .then( editor => {
 	window.editor = editor;

+ 10 - 2
packages/ckeditor5-image/theme/theme.scss

@@ -20,14 +20,22 @@
 }
 
 // Image widget's styles.
-.ck-widget.image {
+.image {
 	text-align: center;
 	clear: both;
 	position: relative;
 
 	&.image-style-side {
-		display: inline-block;
 		float: right;
 		margin-left: 0.8em;
+		max-width: 50%;
 	}
 }
+
+.image > img {
+	// Prevent unnecessary margins caused by line-height (see #44).
+	display: block;
+
+	// Center the image if its width is smaller than content's width.
+	margin: 0 auto;
+}