@ckeditor/ckeditor5-upload - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0-alpha.1

CHANGELOG.md

 Changelog
 =========
 
+## [1.0.0-alpha.1](https://github.com/ckeditor/ckeditor5-upload/compare/v0.2.0...v1.0.0-alpha.1) (2017-10-03)
+
+### Bug fixes
+
+* Image placeholder is now correctly displayed on Firefox and Edge. Closes [#56](https://github.com/ckeditor/ckeditor5-upload/issues/56). ([785e88b](https://github.com/ckeditor/ckeditor5-upload/commit/785e88b))
+* Upload command should not crash when upload adapter is not specified (instead, FileRepository logs an error). Closes [#59](https://github.com/ckeditor/ckeditor5-upload/issues/59). ([14b738b](https://github.com/ckeditor/ckeditor5-upload/commit/14b738b))
+
+### Other changes
+
+* `FileRepository` will automatically warn when it's initialized but no upload adapter was enabled. Closes [#58](https://github.com/ckeditor/ckeditor5-upload/issues/58). ([29aa315](https://github.com/ckeditor/ckeditor5-upload/commit/29aa315))
+* Placeholder image will now look better on wider editors. Closes [#63](https://github.com/ckeditor/ckeditor5-upload/issues/63). ([edb5e81](https://github.com/ckeditor/ckeditor5-upload/commit/edb5e81))
+
+
 ## [0.2.0](https://github.com/ckeditor/ckeditor5-upload/compare/v0.1.0...v0.2.0) (2017-09-03)
@@ -5,0 +18,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-upload",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.1",
   "description": "Upload Feature for CKEditor 5.",
-  "keywords": [],
+  "keywords": [
+    "ckeditor5",
+    "ckeditor5-lib"
+  ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^0.9.0",
-    "@ckeditor/ckeditor5-engine": "^0.11.0",
-    "@ckeditor/ckeditor5-ui": "^0.10.0",
-    "@ckeditor/ckeditor5-utils": "^0.10.0"
+    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^0.9.0",
-    "@ckeditor/ckeditor5-clipboard": "^0.7.0",
-    "@ckeditor/ckeditor5-dev-lint": "^3.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^0.8.0",
-    "@ckeditor/ckeditor5-enter": "^0.10.0",
-    "@ckeditor/ckeditor5-heading": "^0.10.0",
-    "@ckeditor/ckeditor5-image": "^0.7.0",
-    "@ckeditor/ckeditor5-list": "^0.7.0",
-    "@ckeditor/ckeditor5-paragraph": "^0.9.0",
-    "@ckeditor/ckeditor5-typing": "^0.10.0",
-    "@ckeditor/ckeditor5-undo": "^0.9.0",
-    "eslint-config-ckeditor5": "^1.0.5",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-clipboard": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-dev-lint": "^3.1.4",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.1",
+    "eslint-config-ckeditor5": "^1.0.6",
     "gulp": "^3.9.1",
@@ -39,3 +42,8 @@ "guppy-pre-commit": "^0.4.0"
     "url": "https://github.com/ckeditor/ckeditor5-upload.git"
-  }
+  },
+  "files": [
+    "lang",
+    "src",
+    "theme"
+  ]
 }

README.md

@@ -1,2 +0,2 @@
-CKEditor 5 upload feature
+CKEditor 5 file upload utilities
 ========================================
@@ -11,6 +11,10 @@
 
-Upload Feature for CKEditor 5. More information about the project can be found at the following URL: <https://github.com/ckeditor/ckeditor5-upload>.
+This package implements various file upload utilities for CKEditor 5.
 
+## Documentation
+
+See the [`@ckeditor/ckeditor5-upload` package](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/upload.html) page in [CKEditor 5 documentation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/).
+
 ## License
 
 Licensed under the GPL, LGPL and MPL licenses, at your choice. For full details about the license, please check the `LICENSE.md` file.

src/filerepository.js

@@ -23,4 +23,14 @@ /**
 /**
- * FileRepository plugin.
+ * File repository plugin. A central point for managing file upload.
  *
+ * To use it, first you need an upload adapter. Upload adapter's job is to handle communication with the server
+ * (sending the file and handling server's response). You can use one of the existing plugins introducing upload adapters
+ * (e.g. {@link module:easy-image/cloudservicesuploadadapter~CloudServicesUploadAdapter} or
+ * {@link module:adapter-ckfinder/uploadadapter~CKFinderUploadAdapter}) or write your own one
+ * (which boils down to setting the {@link ~FileRepository#createAdapter} factory function – see
+ * {@link ~Adapter `Adapter` interface} documentation).
+ *
+ * Then, you can use {@link ~FileRepository#createLoader `createLoader()`} and the returned {@link ~FileLoader} instance to
+ * load and upload files.
+ *
  * @extends module:core/plugin~Plugin
@@ -48,11 +58,11 @@ */
 		/**
-		 * Function that should be defined before using FileRepository. It should return new instance of
-		 * {@link module:upload/filerepository~Adapter Adapter} that will be used to upload files.
-		 * {@link module:upload/filerepository~FileLoader FileLoader} instance associated with the adapter
+		 * A factory function which should be defined before using `FileRepository`.
+		 *
+		 * It should return a new instance of {@link module:upload/filerepository~Adapter} that will be used to upload files.
+		 * {@link module:upload/filerepository~FileLoader} instance associated with the adapter
 		 * will be passed to that function.
-		 * For more information and example see {@link module:upload/filerepository~Adapter Adapter}.
 		 *
-		 * @abstract
-		 * @function
-		 * @name #createAdapter
+		 * For more information and example see {@link module:upload/filerepository~Adapter}.
+		 *
+		 * @member {Function} #createAdapter
 		 */
@@ -71,2 +81,3 @@
 		 * Number of total bytes to upload.
+		 *
 		 * It might be different than the file size because of headers and additional data.
@@ -96,5 +107,6 @@ * It contains `null` if value is not available yet, so it's better to use {@link #uploadedPercent} to monitor
 	 * Returns the loader associated with specified file.
+	 *
 	 * To get loader by id use `fileRepository.loaders.get( id )`.
 	 *
-	 * @param {File} file Native File object.
+	 * @param {File} file Native file handle.
 	 * @returns {module:upload/filerepository~FileLoader|null}
@@ -113,5 +125,6 @@ */
 	/**
-	 * Creates loader for specified file.
-	 * Shows console warning and returns `null` if {@link #createAdapter} method is not defined.
+	 * Creates a loader instance for the given file.
 	 *
+	 * Requires {@link #createAdapter} factory to be defined.
+	 *
 	 * @param {File} file Native File object.
@@ -122,3 +135,33 @@ * @returns {module:upload/filerepository~FileLoader|null}
 		if ( !this.createAdapter ) {
-			log.warn( 'FileRepository: no createAdapter method found. Please define it before creating a loader.' );
+			/**
+			 * You need to enable an upload adapter in order to be able to upload files.
+			 *
+			 * This warning shows up when {@link module:upload/filerepository~FileRepository} is being used
+			 * without {@link #createAdapter definining an upload adapter}.
+			 *
+			 * **If you see this warning when using one of the {@glink builds/index CKEditor 5 Builds}**
+			 * it means that you did not configure any of the upload adapters available by default in those builds.
+			 * See:
+			 *
+			 * * {@link module:core/editor/editorconfig~EditorConfig#cloudServices `config.cloudServices`} for
+			 * Easy Image with Cloud Services integration,
+			 * * {@link module:core/editor/editorconfig~EditorConfig#ckfinder `config.ckfinder`} for CKFinder
+			 * file upload integration.
+			 *
+			 * **If you see this warning when using a custom build** there is a chance that you enabled
+			 * a feature like {@link module:upload/imageupload~ImageUpload},
+			 * or {@link module:upload/imageuploadbutton~ImageUploadButton} but you did not enable any upload adapter.
+			 * You can choose one of the existing upload adapters:
+			 *
+			 * * {@link module:easy-image/cloudservicesuploadadapter~CloudServicesUploadAdapter}
+			 * (remember to {@link module:core/editor/editorconfig~EditorConfig#cloudServices configure it})
+			 * * {@link module:adapter-ckfinder/uploadadapter~CKFinderUploadAdapter}
+			 * (remember to {@link module:core/editor/editorconfig~EditorConfig#ckfinder configure it})
+			 *
+			 * You can also implement your own upload adapter (in which case, please refer
+			 * to the {@link ~Adapter `Adapter` interface} documentation).
+			 *
+			 * @error filerepository-no-adapter
+			 */
+			log.error( 'filerepository-no-adapter: Upload adapter is not defined.' );
 
@@ -159,3 +202,3 @@ return null;
 	/**
-	 * Destroys loader.
+	 * Destroys the given loader.
 	 *
@@ -182,5 +225,5 @@ * @param {File|module:upload/filerepository~FileLoader} fileOrLoader File associated with that loader or loader
 	/**
-	 * Creates instance of FileLoader.
+	 * Creates a new instance of `FileLoader`.
 	 *
-	 * @param {File} file
+	 * @param {File} file A native file instance.
 	 * @param {module:upload/filerepository~Adapter} adapter
@@ -198,3 +241,3 @@ */
 		/**
-		 * File instance associated with FileLoader.
+		 * A `File` instance associated with this file loader.
 		 *
@@ -207,3 +250,3 @@ * @readonly
 		/**
-		 * Adapter instance associated with FileLoader.
+		 * Adapter instance associated with this file loader.
 		 *
@@ -225,2 +268,3 @@ * @private
 		 * Current status of FileLoader. It can be one of the following:
+		 *
 		 * * 'idle',
@@ -233,2 +277,3 @@ * * 'reading',
 		 * When reading status can change in a following way:
+		 *
 		 * `idle` -> `reading` -> `idle`
@@ -239,2 +284,3 @@ * `idle` -> `reading -> `aborted`
 		 * When uploading status can change in a following way:
+		 *
 		 * `idle` -> `uploading` -> `idle`
@@ -291,4 +337,6 @@ * `idle` -> `uploading` -> `aborted`
 	 * Reads file using {@link module:upload/filereader~FileReader}.
+	 *
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `filerepository-read-wrong-status` when status
 	 * is different than `idle`.
+	 *
 	 * Example usage:
@@ -298,7 +346,7 @@ *
 	 *		.then( data => { ... } )
-	 *		.catch( e => {
-	 *			if ( e === 'aborted' ) {
+	 *		.catch( err => {
+	 *			if ( err === 'aborted' ) {
 	 *				console.log( 'Reading aborted.' );
 	 *			} else {
-	 *				console.log( 'Reading error.', e );
+	 *				console.log( 'Reading error.', err );
 	 *			}
@@ -335,3 +383,4 @@ *		} );
 	/**
-	 * Reads file using provided {@link module:upload/filerepository~Adapter}.
+	 * Reads file using the provided {@link module:upload/filerepository~Adapter}.
+	 *
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `filerepository-upload-wrong-status` when status
@@ -417,35 +466,36 @@ * is different than `idle`.
  * It should implement two methods:
- * * {@link module:upload/filerepository~Adapter#upload upload()},
- * * {@link module:upload/filerepository~Adapter#abort abort()}.
  *
+ * * {@link module:upload/filerepository~Adapter#upload `upload()`},
+ * * {@link module:upload/filerepository~Adapter#abort `abort()`}.
+ *
  * Example adapter implementation:
  *
- *	class Adapter {
- *		constructor( loader ) {
- *			// Save Loader instance to update upload progress.
- *			this.loader = loader;
- *		}
+ *		class Adapter {
+ *			constructor( loader ) {
+ *				// Save Loader instance to update upload progress.
+ *				this.loader = loader;
+ *			}
  *
- *		upload() {
- *			// Update loader's progress.
- *			server.onUploadProgress( data => {
- *				loader.uploadTotal = data.total;
- *				loader.uploaded = data.uploaded;
- *			} ):
+ *			upload() {
+ *				// Update loader's progress.
+ *				server.onUploadProgress( data => {
+ *					loader.uploadTotal = data.total;
+ *					loader.uploaded = data.uploaded;
+ *				} ):
  *
- *			// Return promise that will be resolved when file is uploaded.
- *			return server.upload( loader.file );
- *		}
+ *				// Return promise that will be resolved when file is uploaded.
+ *				return server.upload( loader.file );
+ *			}
  *
- *		abort() {
- *			// Reject promise returned from upload() method.
- *			server.abortUpload();
+ *			abort() {
+ *				// Reject promise returned from upload() method.
+ *				server.abortUpload();
+ *			}
  *		}
- *	}
  *
  * Then adapter can be set to be used by {@link module:upload/filerepository~FileRepository FileRepository}:
  *
- *	editor.plugins.get( 'FileRepository' ).createAdapter = function( loader ) {
- *		return new Adapter( loader );
- *	};
+ *		editor.plugins.get( 'FileRepository' ).createAdapter = function( loader ) {
+ *			return new Adapter( loader );
+ *		};
  *
@@ -460,15 +510,20 @@ * @interface Adapter
  *
- *	{
- *		default: 'http://server/default-size.image.png'
- *	}
+ *		{
+ *			default: 'http://server/default-size.image.png'
+ *		}
  *
  * Additionally, other image sizes can be provided:
  *
- *	{
- *		default: 'http://server/default-size.image.png',
- *		'160': 'http://server/size-160.image.png',
- *		'500': 'http://server/size-500.image.png',
- *		'1000': 'http://server/size-1000.image.png'
- *	}
+ *		{
+ *			default: 'http://server/default-size.image.png',
+ *			'160': 'http://server/size-160.image.png',
+ *			'500': 'http://server/size-500.image.png',
+ *			'1000': 'http://server/size-1000.image.png',
+ *			'1052': 'http://server/default-size.image.png'
+ *		}
  *
+ * NOTE: When returning multiple images, the widest returned one should equal the default one. It is essential to
+ * correctly set `width` attribute of the image. See this discussion:
+ * https://github.com/ckeditor/ckeditor5-easy-image/issues/4 for more information.
+ *
  * Take a look at {@link module:upload/filerepository~Adapter example Adapter implementation} and
@@ -475,0 +530,0 @@ * {@link module:upload/filerepository~FileRepository#createAdapter createAdapter method}.

src/imageupload.js

@@ -26,2 +26,9 @@ /**
 	 */
+	static get pluginName() {
+		return 'ImageUpload';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
 	static get requires() {
@@ -28,0 +35,0 @@ return [ ImageUploadButton, ImageUploadProgress ];

src/imageuploadcommand.js

@@ -44,4 +44,11 @@ /**
 		doc.enqueueChanges( () => {
+			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 = new ModelElement( 'image', {
-				uploadId: fileRepository.createLoader( file ).id
+				uploadId: loader.id
 			} );
@@ -48,0 +55,0 @@

src/imageuploadengine.js

@@ -67,3 +67,3 @@ /**
 
-		// Prevents from browser redirecting to drag-end-dropped image.
+		// Prevents from browser redirecting to the dropped image.
 		editor.editing.view.on( 'dragover', ( evt, data ) => {
@@ -142,6 +142,15 @@ data.preventDefault();
 					// Srcset attribute for responsive images support.
+					let maxWidth = 0;
 					const srcsetAttribute = Object.keys( data )
 						// Filter out keys that are not integers.
-						.filter( key => !isNaN( parseInt( key, 10 ) ) )
+						.filter( key => {
+							const width = parseInt( key, 10 );
 
+							if ( !isNaN( width ) ) {
+								maxWidth = Math.max( maxWidth, width );
+
+								return true;
+							}
+						} )
+
 						// Convert each key to srcset entry.
@@ -154,3 +163,6 @@ .map( key => `${ data[ key ] } ${ key }w` )
 					if ( srcsetAttribute != '' ) {
-						doc.batch( 'transparent' ).setAttribute( imageElement, 'srcset', srcsetAttribute );
+						doc.batch( 'transparent' ).setAttribute( imageElement, 'srcset', {
+							data: srcsetAttribute,
+							width: maxWidth
+						} );
 					}
@@ -157,0 +169,0 @@ } );

src/imageuploadprogress.js

@@ -42,3 +42,3 @@ /**
 		 */
-		this.placeholder = 'data:image/svg+xml;utf8,' + uploadingPlaceholder;
+		this.placeholder = 'data:image/svg+xml;utf8,' + encodeURIComponent( uploadingPlaceholder );
 	}
@@ -77,3 +77,3 @@
 		if ( status == 'reading' ) {
-			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );
+			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress', 'ck-image-upload-placeholder' );
 			const viewImg = viewFigure.getChild( 0 );
@@ -92,3 +92,3 @@ viewImg.setAttribute( 'src', placeholder );
 
-				viewFigure.removeClass( 'ck-infinite-progress' );
+				viewFigure.removeClass( 'ck-infinite-progress', 'ck-image-upload-placeholder' );
 				viewFigure.appendChildren( progressBar );
@@ -115,3 +115,3 @@
 
-		viewFigure.removeClass( 'ck-appear' );
+		viewFigure.removeClass( 'ck-appear', 'ck-image-upload-placeholder' );
 	}
@@ -118,0 +118,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

Number of lines in readme file

20

increased by25%

Worsened metrics

Total package byte prevSize

59667

decreased by-73.24%

Number of package files

40

decreased by-31.03%

Lines of code

1168

decreased by-52.19%

Dependency changes

• + Added@ckeditor/ckeditor5-core@1.0.0-beta.4(transitive)

• + Added@ckeditor/ckeditor5-engine@1.0.0-beta.4(transitive)

• + Added@ckeditor/ckeditor5-theme-lark@1.0.0-beta.4(transitive)

• + Added@ckeditor/ckeditor5-ui@1.0.0-beta.4(transitive)

• + Added@ckeditor/ckeditor5-utils@1.0.0-beta.4(transitive)

• - Removed@ckeditor/ckeditor5-core@0.9.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.11.0(transitive)

• - Removed@ckeditor/ckeditor5-theme-lark@0.9.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@0.10.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.10.0(transitive)

• Updated@ckeditor/ckeditor5-core@^1.0.0-alpha.1

• Updated@ckeditor/ckeditor5-engine@^1.0.0-alpha.1

• Updated@ckeditor/ckeditor5-ui@^1.0.0-alpha.1

• Updated@ckeditor/ckeditor5-utils@^1.0.0-alpha.1