editorjs-image 1.0.11 → 1.0.12

package/package.json

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

package/src/index.css

@@ -39,7 +39,7 @@
 }
 
 
-
+.cdx-image-tool-tune--sizeSmall .image-tool__caption { max-height: 200px; }
 .cdx-image-tool-tune--sizeSmall img {
     max-height: 200px !important;
     object-fit:cover;
@@ -49,6 +49,7 @@
     max-width: 25% !important;
 }
 
+.cdx-image-tool-tune--sizeMiddle .image-tool__caption { max-height: 300px; }
 .cdx-image-tool-tune--sizeMiddle img {
     max-height: 300px !important;
     object-fit:cover;
@@ -56,9 +57,8 @@
 .cdx-image-tool-tune--sizeMiddle .cdx-block {
     max-width: 50% !important;
 }
-
-.image-tool__image-picture { max-height:500px; }
-
+ 
+.cdx-image-tool-tune--sizeLarge .image-tool__caption { max-height: 400px; }
 .cdx-image-tool-tune--sizeLarge img {
     max-height: 400px !important;
     object-fit:cover;
@@ -67,6 +67,22 @@
     max-width: 75% !important;
 }
 
+.cdx-image-tool-tune--sizeLarge img,
+.cdx-image-tool-tune--sizeMiddle img,
+.cdx-image-tool-tune--sizeSmall img,
+.cdx-image-tool-tune--floatLeft img,
+.cdx-image-tool-tune--floatRight img
+ { max-height:500px; }
+
+ .cdx-image-tool-tune--sizeLarge .image-tool__caption,
+ .cdx-image-tool-tune--sizeMiddle .image-tool__caption,
+ .cdx-image-tool-tune--sizeSmall .image-tool__caption,
+ .cdx-image-tool-tune--floatLeft .image-tool__caption,
+ .cdx-image-tool-tune--floatRight .image-tool__caption
+ {
+    max-height:500px;
+ }
+
 .codex-editor.read-only .cdx-input.image-tool__caption:empty,
 .read-only > .codex-editor .cdx-input.image-tool__caption:empty
 {
@@ -141,10 +157,9 @@
 .cdx-image-tool-tune--crop .image-tool__image .crop-save {
     position: absolute;
     top: 0;
-    right: 0;
-    padding: 5px;
+    left: 0;
+    padding: 7px;
     background: #4286f4;
-    border-radius: 5px;
     color: white;
     text-align: center;
     line-height: 20px;

package/src/index.js

@@ -271,9 +271,6 @@ export class ImageToolTune {
         this.apply( blockContent );
 
         this.block.dispatchChange();
-
-
-
     }
 
 
@@ -512,7 +509,8 @@ export class ImageToolTune {
 
         //remove isCropped class
 
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].classList.remove( 'isCropped' );
+        var img = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ]?.getElementsByTagName( 'img' )[ 0 ] || undefined;
+        if(img) img.classList.remove( 'isCropped' );
 
         //remove isCropping class
         blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.remove( 'isCropping' );
@@ -522,38 +520,42 @@ export class ImageToolTune {
         blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.maxWidth = '';
 
         //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.width = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.height = '';
+        var imgBlockEl = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
+        if (imgBlockEl) {
+            imgBlockEl.style.width = '';
+            imgBlockEl.style.height = '';
+        }
 
-        //remove image left and top
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.left = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.top = '';
+        var imgEl = imgBlockEl?.getElementsByTagName( 'img' )[ 0 ] || undefined;
+        if(imgEl) {
 
-        //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.width = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.height = '';
+            //remove image left and top
+            imgEl.style.left = '';
+            imgEl.style.top = '';
 
+            //remove image width and height
+            imgEl.style.width = '';
+            imgEl.style.height = '';
+        }
 
 
         blockContent.classList.remove( 'isCropping' );
 
-
-
         //remove cropper interface
+        
         if ( this.cropperInterface ) {
             this.cropperInterface.destroy();
-        }
 
-        //remove crop data
-        this.data.cropperFrameHeight = 0;
-        this.data.cropperFrameWidth = 0;
-        this.data.cropperFrameLeft = 0;
-        this.data.cropperFrameTop = 0;
-        this.data.cropperImageHeight = 0;
-        this.data.cropperImageWidth = 0;
-
-        this.block.dispatchChange();
+            //remove crop data
+            this.data.cropperFrameHeight = 0;
+            this.data.cropperFrameWidth = 0;
+            this.data.cropperFrameLeft = 0;
+            this.data.cropperFrameTop = 0;
+            this.data.cropperImageHeight = 0;
+            this.data.cropperImageWidth = 0;
 
+            this.block.dispatchChange();
+        }
     }
 
 
@@ -708,6 +710,8 @@ export class ImageToolTune {
             button.classList.remove( this.CSS.buttonActive );
         } );
 
+        blockContent.classList.remove( this.CSS.wrapper );
+
         //remove isFloatLeft class
         blockContent.classList.remove( this.CSS.isFloatLeft );
 
@@ -802,6 +806,7 @@ export class ImageToolTune {
             this.wrapper = this.createView();
         }
 
+        blockContent.classList.add( this.CSS.wrapper );
 
         this.apply( blockContent );