editorjs-image 1.0.14 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "editorjs-image",
3
- "version": "1.0.14",
3
+ "version": "1.0.17",
4
4
  "description": "Image tool plugin for Editor.js",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/index.css CHANGED
@@ -1,16 +1,3 @@
1
- .cdx-image-tool-tune--floatLeft.ce-block__content,
2
- .cdx-image-tool-tune--floatRight.ce-block__content { min-height: 20px; }
3
-
4
- .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
5
- .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-top: 40px; }
6
- .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image { margin-left: 20px; }
7
- .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-right: 20px; }
8
-
9
- .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
10
- .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { width: calc(100% - 20px); }
11
- .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input { margin-left: 20px; }
12
- .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { margin-right: 20px; }
13
-
14
1
  .cdx-image-tool-tune--floatLeft .cdx-block,
15
2
  .cdx-image-tool-tune--center .cdx-block,
16
3
  .cdx-image-tool-tune--floatRight .cdx-block,
@@ -28,42 +15,39 @@
28
15
 
29
16
  .cdx-image-tool-tune--center .cdx-block { margin: auto; }
30
17
 
31
- .cdx-image-tool-tune--floatLeft .cdx-block {
32
- float: left;
33
- margin-right: 10px;
34
- }
35
-
36
- .cdx-image-tool-tune--floatRight .cdx-block {
37
- float: right;
38
- margin-left: 10px;
39
- }
18
+ @media all and (min-width: 470px)
19
+ {
20
+ .cdx-image-tool-tune--floatLeft.ce-block__content,
21
+ .cdx-image-tool-tune--floatRight.ce-block__content { min-height: 20px; }
40
22
 
23
+ .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
24
+ .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-top: 40px; }
25
+ .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image { margin-left: 20px; }
26
+ .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image { margin-right: 20px; }
41
27
 
28
+ .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
29
+ .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { width: calc(100% - 20px); }
30
+ .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input { margin-left: 20px; }
31
+ .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input { margin-right: 20px; }
42
32
 
43
- .cdx-image-tool-tune--sizeSmall img {
44
- max-height: 200px !important;
45
- object-fit:cover;
46
- }
33
+ .cdx-image-tool-tune--floatLeft .cdx-block {
34
+ float: left;
35
+ margin-right: 10px;
36
+ }
47
37
 
48
- .cdx-image-tool-tune--sizeSmall .cdx-block {
49
- max-width: 25% !important;
50
- }
38
+ .cdx-image-tool-tune--floatRight .cdx-block {
39
+ float: right;
40
+ margin-left: 10px;
41
+ }
51
42
 
52
- .cdx-image-tool-tune--sizeMiddle img {
53
- max-height: 300px !important;
54
- object-fit:cover;
55
- }
56
- .cdx-image-tool-tune--sizeMiddle .cdx-block {
57
- max-width: 50% !important;
43
+ .cdx-image-tool-tune--sizeSmall .cdx-block { max-width: 25% !important; }
44
+ .cdx-image-tool-tune--sizeMiddle .cdx-block { max-width: 50% !important; }
45
+ .cdx-image-tool-tune--sizeLarge .cdx-block { max-width: 75% !important; }
58
46
  }
59
47
 
60
- .cdx-image-tool-tune--sizeLarge img {
61
- max-height: 400px !important;
62
- object-fit:cover;
63
- }
64
- .cdx-image-tool-tune--sizeLarge .cdx-block {
65
- max-width: 75% !important;
66
- }
48
+ .cdx-image-tool-tune--sizeLarge img { object-fit:cover; max-width: 100%; }
49
+ .cdx-image-tool-tune--sizeSmall img { object-fit:cover; max-width: 100%; }
50
+ .cdx-image-tool-tune--sizeMiddle img { object-fit:cover; max-width: 100%; }
67
51
 
68
52
  .codex-editor.read-only .cdx-input.image-tool__caption:empty,
69
53
  .read-only > .codex-editor .cdx-input.image-tool__caption:empty
package/src/index.js CHANGED
@@ -435,10 +435,7 @@ export class ImageToolTune {
435
435
 
436
436
  }
437
437
 
438
-
439
438
  applyCrop( blockContent ) {
440
-
441
- if ( this.api.readOnly.isEnabled ) return;
442
439
 
443
440
  //apply data to image and remove cropper interface and save button, add crop button
444
441
  var blockEl = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ];
@@ -500,7 +497,7 @@ export class ImageToolTune {
500
497
  }
501
498
 
502
499
  blockContent.classList.remove( 'isCropping' );
503
-
500
+
504
501
  this.block.dispatchChange();
505
502
 
506
503
  }
@@ -821,7 +818,6 @@ export class ImageToolTune {
821
818
  this.wrapper = this.createView();
822
819
  }
823
820
 
824
-
825
821
  this.apply( blockContent );
826
822
 
827
823