editorjs-image 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-image",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Image tool plugin for Editor.js",
   "main": "src/index.js",
   "scripts": {

package/src/index.css

@@ -1,20 +1,15 @@
 .cdx-image-tool-tune--floatLeft.ce-block__content,
-.cdx-image-tool-tune--floatRight.ce-block__content {
-    min-height: 20px;
-}
+.cdx-image-tool-tune--floatRight.ce-block__content { min-height: 20px; }
 
 .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
-.cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
-    margin-top: 40px;
-    margin-left: 20px;
-}
+.cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-top: 40px; }
+.cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image  { margin-left: 20px; }
+.cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-right: 20px; }
 
 .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
-.cdx-image-tool-tune--floatRight.ce-block__content .cdx-input
-{
-    margin-left: 20px;
-    width: calc(100% - 20px);
-}
+.cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { width: calc(100% - 20px); }
+.cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input  { margin-left: 20px; }
+.cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { margin-right: 20px; }
 
 .cdx-image-tool-tune--floatLeft .cdx-block,
 .cdx-image-tool-tune--center .cdx-block,
@@ -31,9 +26,7 @@
     align-items: center;
 }
 
-.cdx-image-tool-tune--center .cdx-block {
-    margin: auto;
-}
+.cdx-image-tool-tune--center .cdx-block { margin: auto; }
 
 .cdx-image-tool-tune--floatLeft .cdx-block {
     float: left;
@@ -45,6 +38,8 @@
     margin-left: 10px;
 }
 
+
+
 .cdx-image-tool-tune--sizeSmall img {
     max-height: 200px !important;
     object-fit:cover;
@@ -123,9 +118,6 @@
     cursor: nwse-resize;
 }
 
-
-
-
 .cdx-image-tool-tune--crop:hover,
 .cdx-image-tool-tune--crop.isCropping,
 .cdx-image-tool-tune--resize:hover {

package/src/index.js

@@ -348,10 +348,6 @@ export class ImageToolTune {
             blockContent.classList.remove( this.CSS.isCrop );
             this.uncrop( blockContent );
         }
-
-
-
-
     }
 
 
@@ -390,19 +386,22 @@ export class ImageToolTune {
         if ( this.api.readOnly.isEnabled ) return;
 
         this.uncrop( blockContent );
-        const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.add( 'isCropping' );
-        this.cropperInterface = new Cropper( image, {
-            crop( event ) {
-                // console.log( event.detail.x );
-                // console.log( event.detail.y );
-                // console.log( event.detail.width );
-                // console.log( event.detail.height );
-                // console.log( event.detail.scaleX );
-                // console.log( event.detail.scaleY );
-            },
-        } );
 
+        var element = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ];
+        const image = element.getElementsByTagName( 'img' )[ 0 ];
+        if(image && element) {
+            element.classList.add( 'isCropping' );
+            this.cropperInterface = new Cropper( image, {
+                crop( event ) {
+                    // console.log( event.detail.x );
+                    // console.log( event.detail.y );
+                    // console.log( event.detail.width );
+                    // console.log( event.detail.height );
+                    // console.log( event.detail.scaleX );
+                    // console.log( event.detail.scaleY );
+                },
+            } );
+        }
 
         //append save crop button
         const cropSaveBtn = document.createElement( 'div' );
@@ -412,11 +411,6 @@ export class ImageToolTune {
 
         cropSaveBtn.addEventListener( 'click', e => {
 
-            console.log( this.cropperInterface.getCropBoxData() );
-            console.log( this.cropperInterface.getImageData() );
-            console.log( this.cropperInterface.getCanvasData() );
-
-
             this.data.cropperFrameHeight = this.cropperInterface.getCropBoxData().height;
             this.data.cropperFrameWidth = this.cropperInterface.getCropBoxData().width;
             this.data.cropperFrameLeft = this.cropperInterface.getCanvasData().left - this.cropperInterface.getCropBoxData().left;
@@ -425,9 +419,7 @@ export class ImageToolTune {
             this.data.cropperImageWidth = this.cropperInterface.getImageData().width;
 
             this.applyCrop( blockContent );
-
-        }
-        );
+        });
 
         blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropSaveBtn );
 
@@ -576,13 +568,11 @@ export class ImageToolTune {
      * */
     resize( blockContent ) {
 
-
         const resizable = document.createElement( 'div' );
         resizable.classList.add( 'resizable' );
 
         // console.log( resizable );
 
-
         const resizers = document.createElement( 'div' );
         resizers.classList.add( 'resizers' );
 
@@ -712,7 +702,7 @@ export class ImageToolTune {
      * @return {HTMLElement}
      */
     unwrap( blockContent ) {
-        console.log( 'unwrap' );
+        
         //remove tunes from block
         this.buttons.forEach( button => {
             button.classList.remove( this.CSS.buttonActive );