@ckeditor/ckeditor5-image - npm Package Compare versions

Comparing version 10.0.0 to 10.1.0

CHANGELOG.md

 Changelog
 =========
 
+## [10.1.0](https://github.com/ckeditor/ckeditor5-image/compare/v10.0.0...v10.1.0) (2018-06-21)
+
+### Features
+
+* Added "upload completed" icon. Closes [#204](https://github.com/ckeditor/ckeditor5-image/issues/204). ([004eda7](https://github.com/ckeditor/ckeditor5-image/commit/004eda7))
+
+### Bug fixes
+
+* Made image upload by drag&drop work when the `ImageUploadCommand` is disabled. Closes [#208](https://github.com/ckeditor/ckeditor5-image/issues/208). ([6908ec6](https://github.com/ckeditor/ckeditor5-image/commit/6908ec6))
+
+### Other changes
+
+* Updated translations. ([bfc9456](https://github.com/ckeditor/ckeditor5-image/commit/bfc9456))
+
+
 ## [10.0.0](https://github.com/ckeditor/ckeditor5-image/compare/v1.0.0-beta.4...v10.0.0) (2018-04-25)
@@ -5,0 +20,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "Image feature for CKEditor 5.",
@@ -12,22 +12,22 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^10.0.0",
-    "@ckeditor/ckeditor5-engine": "^10.0.0",
-    "@ckeditor/ckeditor5-ui": "^10.0.0",
-    "@ckeditor/ckeditor5-utils": "^10.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^10.0.0",
-    "@ckeditor/ckeditor5-upload": "^10.0.0",
-    "@ckeditor/ckeditor5-widget": "^10.0.0"
+    "@ckeditor/ckeditor5-core": "^10.1.0",
+    "@ckeditor/ckeditor5-engine": "^10.1.0",
+    "@ckeditor/ckeditor5-ui": "^10.1.0",
+    "@ckeditor/ckeditor5-utils": "^10.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^10.1.0",
+    "@ckeditor/ckeditor5-upload": "^10.0.1",
+    "@ckeditor/ckeditor5-widget": "^10.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^10.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^10.0.0",
-    "@ckeditor/ckeditor5-enter": "^10.0.0",
-    "@ckeditor/ckeditor5-essentials": "^10.0.0",
-    "@ckeditor/ckeditor5-heading": "^10.0.0",
-    "@ckeditor/ckeditor5-link": "^10.0.0",
-    "@ckeditor/ckeditor5-list": "^10.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.0",
-    "@ckeditor/ckeditor5-typing": "^10.0.0",
-    "@ckeditor/ckeditor5-undo": "^10.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.1",
+    "@ckeditor/ckeditor5-clipboard": "^10.0.1",
+    "@ckeditor/ckeditor5-editor-classic": "^10.0.1",
+    "@ckeditor/ckeditor5-enter": "^10.1.0",
+    "@ckeditor/ckeditor5-essentials": "^10.1.0",
+    "@ckeditor/ckeditor5-heading": "^10.0.1",
+    "@ckeditor/ckeditor5-link": "^10.0.2",
+    "@ckeditor/ckeditor5-list": "^11.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.1",
+    "@ckeditor/ckeditor5-typing": "^10.0.1",
+    "@ckeditor/ckeditor5-undo": "^10.0.1",
     "eslint": "^4.15.0",
@@ -34,0 +34,0 @@ "eslint-config-ckeditor5": "^1.0.7",

README.md

@@ -6,4 +6,4 @@ CKEditor 5 image feature
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-image.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-image)
-[![Build Status](https://travis-ci.org/ckeditor/ckeditor5-image.svg)](https://travis-ci.org/ckeditor/ckeditor5-image)
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://www.browserstack.com/automate/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
+[![Build Status](https://travis-ci.org/ckeditor/ckeditor5-image.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-image)
+[![BrowserStack Status](https://automate.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://automate.browserstack.com/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-image/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-image?branch=master)
@@ -10,0 +10,0 @@ <br>

src/image/converters.js

@@ -71,3 +71,3 @@ /**
  *
- * @return {Function}
+ * @returns {Function}
  */
@@ -74,0 +74,0 @@ export function srcsetAttributeConverter() {

src/image/imageediting.js

@@ -114,3 +114,3 @@ /**
 // @param {module:engine/view/writer~Writer} writer
-// @return {module:engine/view/containerelement~ContainerElement}
+// @returns {module:engine/view/containerelement~ContainerElement}
 export function createImageViewElement( writer ) {
@@ -117,0 +117,0 @@ const emptyElement = writer.createEmptyElement( 'img' );

src/imagecaption/imagecaptionediting.js

@@ -206,3 +206,3 @@ /**
 // @param {Boolean} [hide=true] When set to `false` view element will not be inserted when it's empty.
-// @return {Function}
+// @returns {Function}
 function captionModelToView( elementCreator, hide = true ) {
@@ -209,0 +209,0 @@ return ( evt, data, conversionApi ) => {

src/imagecaption/utils.js

@@ -21,3 +21,3 @@ /**
  * @param {String} placeholderText The text to be displayed when the caption is empty.
- * @return {Function}
+ * @returns {Function}
  */
@@ -38,3 +38,3 @@ export function captionElementCreator( view, placeholderText ) {
  * @param {module:engine/view/element~Element} viewElement
- * @return {Boolean}
+ * @returns {Boolean}
  */
@@ -49,3 +49,3 @@ export function isCaption( viewElement ) {
  * @param {module:engine/model/element~Element} imageModelElement
- * @return {module:engine/model/element~Element|null}
+ * @returns {module:engine/model/element~Element|null}
  */
@@ -52,0 +52,0 @@ export function getCaptionFromImage( imageModelElement ) {

src/imagestyle/converters.js

@@ -80,3 +80,3 @@ /**
 // @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat> } styles
-// @return {module:image/imagestyle/imagestyleediting~ImageStyleFormat|undefined}
+// @returns {module:image/imagestyle/imagestyleediting~ImageStyleFormat|undefined}
 function getStyleByName( name, styles ) {
@@ -83,0 +83,0 @@ for ( const style of styles ) {

src/imagetextalternative/ui/textalternativeformview.js

@@ -184,3 +184,3 @@ /**
 	 * @private
-	 * @return {module:ui/labeledinput/labeledinputview~LabeledInputView}
+	 * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView}
 	 */
@@ -187,0 +187,0 @@ _createLabeledInputView() {

src/imageupload/imageuploadcommand.js

@@ -6,3 +6,2 @@ /**
 
-import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
@@ -48,3 +47,3 @@ import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
 
-			const imageElement = new ModelElement( 'image', {
+			const imageElement = writer.createElement( 'image', {
 				uploadId: loader.id
@@ -65,3 +64,3 @@ } );
 			if ( imageElement.parent ) {
-				writer.setSelection( ModelRange.createOn( imageElement ) );
+				writer.setSelection( imageElement, 'on' );
 			}
@@ -68,0 +67,0 @@ } );

src/imageupload/imageuploadediting.js

@@ -15,2 +15,3 @@ /**
 import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
+import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
 import { isImageType, findOptimalInsertionPosition } from '../../src/imageupload/utils';
@@ -49,3 +50,3 @@
 		// Execute imageUpload command when image is dropped or pasted.
-		editor.editing.view.document.on( 'clipboardInput', ( evt, data ) => {
+		this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
 			// Skip if non empty HTML data is included.
@@ -62,6 +63,24 @@ // https://github.com/ckeditor/ckeditor5-upload/issues/68
 			for ( const file of data.dataTransfer.files ) {
-				const insertAt = findOptimalInsertionPosition( targetModelSelection );
+				if ( isImageType( file ) ) {
+					const insertAt = findOptimalInsertionPosition( targetModelSelection );
 
-				if ( isImageType( file ) ) {
-					editor.execute( 'imageUpload', { file, insertAt } );
+					editor.model.change( writer => {
+						const loader = fileRepository.createLoader( file );
+
+						// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
+						if ( !loader ) {
+							return;
+						}
+
+						const imageElement = writer.createElement( 'image', { uploadId: loader.id } );
+						const targetSelection = new ModelSelection( [ new ModelRange( insertAt ) ] );
+
+						editor.model.insertContent( imageElement, targetSelection );
+
+						// Inserting an image might've failed due to schema regulations.
+						if ( imageElement.parent ) {
+							writer.setSelection( imageElement, 'on' );
+						}
+					} );
+
 					evt.stop();
@@ -68,0 +87,0 @@ }

src/imageupload/imageuploadprogress.js

@@ -10,5 +10,8 @@ /**
 
+/* globals setTimeout */
+
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
+import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
@@ -18,2 +21,3 @@ import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import '../../theme/imageuploadprogress.css';
+import '../../theme/imageuploadicon.css';
 
@@ -105,2 +109,6 @@ /**
 
+		if ( status == 'complete' && fileRepository.loaders.get( uploadId ) ) {
+			_showCompleteIcon( viewFigure, viewWriter, editor.editing.view );
+		}
+
 		// Clean up.
@@ -199,2 +207,17 @@ _hideProgressBar( viewFigure, viewWriter );
 
+// Shows complete icon and hides after a certain amount of time.
+//
+// @param {module:engine/view/containerelement~ContainerElement} viewFigure
+// @param {module:engine/view/writer~Writer} writer
+// @param {module:engine/view/view~View} view
+function _showCompleteIcon( viewFigure, writer, view ) {
+	const completeIcon = new UIElement( 'div', { class: 'ck-image-upload-complete-icon' } );
+
+	writer.insert( ViewPosition.createAt( viewFigure, 'end' ), completeIcon );
+
+	setTimeout( () => {
+		view.change( writer => writer.remove( ViewRange.createOn( completeIcon ) ) );
+	}, 3000 );
+}
+
 // Create progress bar element using {@link module:engine/view/uielement~UIElement}.
@@ -201,0 +224,0 @@ //

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171056

increased by2.9%

Number of package files

78

increased by2.63%

Lines of code

2631

increased by1.78%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^10.1.0

• Updated@ckeditor/ckeditor5-engine@^10.1.0

• Updated@ckeditor/ckeditor5-theme-lark@^10.1.0

• Updated@ckeditor/ckeditor5-ui@^10.1.0

• Updated@ckeditor/ckeditor5-upload@^10.0.1

• Updated@ckeditor/ckeditor5-utils@^10.1.0

• Updated@ckeditor/ckeditor5-widget@^10.1.0