editorjs-image 1.0.13 → 1.0.16

package/package.json

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

package/src/index.css

@@ -38,50 +38,12 @@
     margin-left: 10px;
 }
 
-
-.cdx-image-tool-tune--sizeSmall .image-tool__caption { max-height: 200px; }
-.cdx-image-tool-tune--sizeSmall img {
-    max-height: 200px !important;
-    object-fit:cover;
-}
-
-.cdx-image-tool-tune--sizeSmall .cdx-block {
-    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;
-}
-.cdx-image-tool-tune--sizeMiddle .cdx-block {
-    max-width: 50% !important;
-}
- 
-.cdx-image-tool-tune--sizeLarge .image-tool__caption { max-height: 400px; }
-.cdx-image-tool-tune--sizeLarge img {
-    max-height: 400px !important;
-    object-fit:cover;
-}
-.cdx-image-tool-tune--sizeLarge .cdx-block {
-    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;
- }
+.cdx-image-tool-tune--sizeSmall .cdx-block { max-width: 25% !important; }
+.cdx-image-tool-tune--sizeMiddle .cdx-block { max-width: 50% !important; }
+.cdx-image-tool-tune--sizeLarge .cdx-block { max-width: 75% !important; }
+.cdx-image-tool-tune--sizeLarge img { object-fit:cover; }
+.cdx-image-tool-tune--sizeSmall img { object-fit:cover; }
+.cdx-image-tool-tune--sizeMiddle img { object-fit:cover; }
 
 .codex-editor.read-only .cdx-input.image-tool__caption:empty,
 .read-only > .codex-editor .cdx-input.image-tool__caption:empty

package/src/index.js

@@ -390,9 +390,8 @@ export class ImageToolTune {
         if ( this.api.readOnly.isEnabled ) return;
 
         this.uncrop( blockContent );
-        var imageBlock = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ];
-        const image = imageBlock.getElementsByTagName( 'img' )[ 0 ];
-        imageBlock.classList.add( 'isCropping' );
+        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 );
@@ -413,6 +412,10 @@ 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;
@@ -432,37 +435,36 @@ export class ImageToolTune {
 
     }
 
-
     applyCrop( blockContent ) {
-
-        if ( this.api.readOnly.isEnabled ) return;
         
         //apply data to image and remove cropper interface and save button, add crop button
+        var blockEl = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ];
+        if(blockEl) {
+
+            blockEl.style.minWidth = this.data.cropperFrameWidth + 'px';
+            blockEl.style.maxWidth = this.data.cropperFrameWidth + 'px';
+            
+            const image = blockEl.getElementsByTagName( 'img' )[ 0 ];
+                  image.style.width = this.data.cropperImageWidth + 'px';
+                  image.style.height = this.data.cropperImageHeight + 'px';
+
+            var blockImg = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
+                blockImg.style.width = this.data.cropperFrameWidth + 'px';
+                blockImg.style.height = this.data.cropperFrameHeight + 'px';
+        
+            var imageEl = blockImg.getElementsByTagName( 'img' )[ 0 ];
+            if(imageEl) {
+                imageEl.style.left = this.data.cropperFrameLeft + 'px';
+                imageEl.style.top = this.data.cropperFrameTop + 'px';
+                imageEl.classList.add( 'isCropped' );
+            }
 
-        const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
-
-
-
-
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.minWidth = this.data.cropperFrameWidth + 'px';
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.maxWidth = this.data.cropperFrameWidth + 'px';
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.width = this.data.cropperFrameWidth + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.height = this.data.cropperFrameHeight + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.left = this.data.cropperFrameLeft + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.top = this.data.cropperFrameTop + 'px';
-
-        image.style.width = this.data.cropperImageWidth + 'px';
-        image.style.height = this.data.cropperImageHeight + 'px';
-
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].classList.add( 'isCropped' );
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.remove( 'isCropping' );
-
+            blockEl.classList.remove( 'isCropping' );
 
-        const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
-        if ( cropSaveBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropSaveBtn );
+            const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
+            if ( cropSaveBtn ) {
+                blockImg.removeChild( cropSaveBtn );
+            }
         }
 
 
@@ -481,17 +483,21 @@ export class ImageToolTune {
         cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
         cropBtn.innerHTML = 'Crop';
 
-        cropBtn.addEventListener( 'click', e => {
-            //remove crop button
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
-            this.appendCrop( blockContent );
-        }
-        );
+        var imageEl = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
+        if(imageEl) {
+            
+            cropBtn.addEventListener( 'click', e => {
+                //remove crop button
+                imageEl.removeChild( cropBtn );
+                this.appendCrop( blockContent );
+            }
+            );
 
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropBtn );
+            imageEl.appendChild( cropBtn );
+        }
 
         blockContent.classList.remove( 'isCropping' );
-
+        
         this.block.dispatchChange();
 
     }
@@ -501,25 +507,25 @@ export class ImageToolTune {
 
         if ( this.api.readOnly.isEnabled ) return;
 
+        var imageEl = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
+
         //remove crop and save button
-        const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ] ?? undefined
-        if ( cropSaveBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropSaveBtn );
+        const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
+        if ( cropSaveBtn && imageEl) {
+            imageEl.removeChild( cropSaveBtn );
         }
 
-
         //remove crop button
-        const cropBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ] ?? undefined
-        if ( cropBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
+        const cropBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
+        if ( cropBtn && imageEl) {
+            imageEl.removeChild( cropBtn );
         }
 
         //remove isCropped class
-        var blockEl = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ] ?? undefined
-        if (blockEl) {
- 
-            var img = blockEl.getElementsByTagName( 'img' )[ 0 ] || undefined;
-            if (img) img.classList.remove( 'isCropped' );
+        var blockEl = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ];
+        if(blockEl) {
+            var image = blockEl.getElementsByTagName( 'img' )[ 0 ];
+            if (image) image.classList.remove( 'isCropped' );
 
             //remove isCropping class
             blockEl.classList.remove( 'isCropping' );
@@ -529,25 +535,25 @@ export class ImageToolTune {
             blockEl.style.maxWidth = '';
         }
 
-        //remove image width and height
-        var imgEl = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ] ?? undefined;
-        if (imgEl) {
-            imgEl.style.width = '';
-            imgEl.style.height = '';
+        if(imageEl) {
+
+            //remove image width and height
+            imageEl.style.width = '';
+            imageEl.style.height = '';
 
             //remove image left and top
-            var img = imgEl.getElementsByTagName( 'img' )[ 0 ] ?? undefined;
-            if (img) {
-                img.style.left = '';
-                img.style.top = '';
+            var image = imageEl.getElementsByTagName( 'img' )[ 0 ];
+            if(image) 
+            {
+                image.style.left = '';
+                image.style.top = '';
 
                 //remove image width and height
-                img.style.width = '';
-                img.style.height = '';
+                image.style.width = '';
+                image.style.height = '';
             }
         }
 
-
         blockContent.classList.remove( 'isCropping' );
 
 
@@ -580,13 +586,9 @@ 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' );
 
@@ -816,7 +818,6 @@ export class ImageToolTune {
             this.wrapper = this.createView();
         }
 
-
         this.apply( blockContent );