editorjs-image 1.0.6 → 1.0.8

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.
Files changed (6) hide show
  1. package/package.json +4 -3
  2. package/src/index.css +59 -10
  3. package/src/index.js +27 -20
  4. package/images/center copy.txt +0 -1
  5. package/images/center.txt +0 -1
  6. package/images/floatLeft.txt +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "editorjs-image",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Image tool plugin for Editor.js",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -14,7 +14,7 @@
14
14
  "tool",
15
15
  "variables"
16
16
  ],
17
- "author": "xkzl",
17
+ "author": "Marco Meyer <marco.meyer@glitchr.io>",
18
18
  "license": "GPL",
19
19
  "repository": {
20
20
  "url": "ssh://git@gitlab.glitchr.dev:public-repository/javascript/editor-js/image.git",
@@ -26,6 +26,7 @@
26
26
  "webpack-cli": "^5.1.4"
27
27
  },
28
28
  "dependencies": {
29
- "cropperjs": "1.5.13"
29
+ "@editorjs/image": "^2.8",
30
+ "cropperjs": "^1.5"
30
31
  }
31
32
  }
package/src/index.css CHANGED
@@ -1,11 +1,34 @@
1
- @import "cropperjs/src/css/cropper.scss";
2
-
3
1
  .cdx-image-tool-tune--floatLeft.ce-block__content,
4
2
  .cdx-image-tool-tune--floatRight.ce-block__content {
5
3
  min-height: 20px;
6
- padding-top: 20px;
7
- margin-bottom: -20px;
8
- margin-top: -20px;
4
+ }
5
+
6
+ .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
7
+ .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
8
+ margin-top: 40px;
9
+ margin-left: 20px;
10
+ }
11
+
12
+ .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
13
+ .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input
14
+ {
15
+ margin-left: 20px;
16
+ width: calc(100% - 20px);
17
+ }
18
+
19
+ .cdx-image-tool-tune--floatLeft .cdx-block,
20
+ .cdx-image-tool-tune--center .cdx-block,
21
+ .cdx-image-tool-tune--floatRight .cdx-block,
22
+ .cdx-image-tool-tune--floatLeft .image-tool__image,
23
+ .cdx-image-tool-tune--center .image-tool__image,
24
+ .cdx-image-tool-tune--floatRight .image-tool__image,
25
+ .cdx-image-tool-tune--floatLeft .cdx-block,
26
+ .cdx-image-tool-tune--center .cdx-block,
27
+ .cdx-image-tool-tune--floatRight .cdx-block
28
+ {
29
+ display: flex;
30
+ flex-direction: column;
31
+ align-items: center;
9
32
  }
10
33
 
11
34
  .cdx-image-tool-tune--center .cdx-block {
@@ -22,19 +45,36 @@
22
45
  margin-left: 10px;
23
46
  }
24
47
 
48
+ .cdx-image-tool-tune--sizeSmall img {
49
+ max-height: 200px !important;
50
+ object-fit:cover;
51
+ }
52
+
25
53
  .cdx-image-tool-tune--sizeSmall .cdx-block {
26
- max-width: 50%;
54
+ max-width: 25% !important;
27
55
  }
28
56
 
57
+ .cdx-image-tool-tune--sizeMiddle img {
58
+ max-height: 300px !important;
59
+ object-fit:cover;
60
+ }
29
61
  .cdx-image-tool-tune--sizeMiddle .cdx-block {
30
- max-width: 70%;
62
+ max-width: 50% !important;
31
63
  }
32
64
 
65
+ .cdx-image-tool-tune--sizeLarge img {
66
+ max-height: 400px !important;
67
+ object-fit:cover;
68
+ }
33
69
  .cdx-image-tool-tune--sizeLarge .cdx-block {
34
- max-width: 100%;
70
+ max-width: 75% !important;
35
71
  }
36
72
 
37
-
73
+ .codex-editor.read-only .cdx-input.image-tool__caption:empty,
74
+ .read-only > .codex-editor .cdx-input.image-tool__caption:empty
75
+ {
76
+ display:none;
77
+ }
38
78
 
39
79
  .cdx-image-tool-tune--resize .cdx-block {
40
80
  position: relative;
@@ -89,7 +129,7 @@
89
129
  .cdx-image-tool-tune--crop:hover,
90
130
  .cdx-image-tool-tune--crop.isCropping,
91
131
  .cdx-image-tool-tune--resize:hover {
92
- z-index: 1;
132
+ z-index: 2;
93
133
  }
94
134
 
95
135
  .cdx-image-tool-tune--crop .image-tool__image {
@@ -136,4 +176,13 @@
136
176
  max-width: unset !important;
137
177
  min-height: unset !important;
138
178
  max-height: unset !important;
179
+ }
180
+
181
+ .ce-block { margin: 0.8em 0; }
182
+ .ce-toolbar { z-index:3; }
183
+
184
+ .image-tool__caption { background-color:white; }
185
+ .image-tool {
186
+ position: relative;
187
+ z-index:1;
139
188
  }
package/src/index.js CHANGED
@@ -1,8 +1,12 @@
1
- import ImageTool from '@editorjs/image';
2
- export default ImageTool;
1
+
2
+ import ImageTool from "@editorjs/image";
3
+ export {ImageTool};
3
4
 
4
5
  import Cropper from 'cropperjs';
5
- export default class ImageToolTune {
6
+ import './index.css';
7
+ import "cropperjs/dist/cropper.css";
8
+
9
+ export class ImageToolTune {
6
10
 
7
11
  constructor( { api, data, config, block } ) {
8
12
 
@@ -26,17 +30,17 @@ export default class ImageToolTune {
26
30
  {
27
31
  name: 'sizeSmall',
28
32
  icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
29
- label: '50%',
33
+ label: '25%',
30
34
  group: 'size',
31
35
  }, {
32
36
  name: 'sizeMiddle',
33
37
  icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
34
- label: '70%',
38
+ label: '50%',
35
39
  group: 'size',
36
40
  }, {
37
41
  name: 'sizeLarge',
38
42
  icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
39
- label: '100%',
43
+ label: '75%',
40
44
  group: 'size',
41
45
  }, {
42
46
  name: 'resize',
@@ -361,11 +365,10 @@ export default class ImageToolTune {
361
365
  */
362
366
  crop( blockContent ) {
363
367
 
364
- //this.appendCrop( blockContent );
365
-
366
-
367
-
368
368
  //add append crop button to image-tool__image
369
+ //If editor is readOnly, do not add crop button
370
+ if ( this.api.readOnly.isEnabled ) return;
371
+
369
372
  const image = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
370
373
  const cropBtn = document.createElement( 'div' );
371
374
  cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
@@ -379,24 +382,24 @@ export default class ImageToolTune {
379
382
  );
380
383
 
381
384
  image.appendChild( cropBtn );
382
-
383
385
  }
384
386
 
385
387
 
386
388
  appendCrop( blockContent ) {
389
+
390
+ if ( this.api.readOnly.isEnabled ) return;
391
+
387
392
  this.uncrop( blockContent );
388
393
  const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
389
394
  blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.add( 'isCropping' );
390
395
  this.cropperInterface = new Cropper( image, {
391
396
  crop( event ) {
392
- console.log( event.detail.x );
393
- console.log( event.detail.y );
394
- console.log( event.detail.width );
395
- console.log( event.detail.height );
396
- console.log( event.detail.scaleX );
397
- console.log( event.detail.scaleY );
398
-
399
-
397
+ // console.log( event.detail.x );
398
+ // console.log( event.detail.y );
399
+ // console.log( event.detail.width );
400
+ // console.log( event.detail.height );
401
+ // console.log( event.detail.scaleX );
402
+ // console.log( event.detail.scaleY );
400
403
  },
401
404
  } );
402
405
 
@@ -436,6 +439,8 @@ export default class ImageToolTune {
436
439
 
437
440
  applyCrop( blockContent ) {
438
441
 
442
+ if ( this.api.readOnly.isEnabled ) return;
443
+
439
444
  //apply data to image and remove cropper interface and save button, add crop button
440
445
 
441
446
  const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
@@ -498,6 +503,8 @@ export default class ImageToolTune {
498
503
 
499
504
  uncrop( blockContent ) {
500
505
 
506
+ if ( this.api.readOnly.isEnabled ) return;
507
+
501
508
  //remove crop and save button
502
509
  const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
503
510
  if ( cropSaveBtn ) {
@@ -573,7 +580,7 @@ export default class ImageToolTune {
573
580
  const resizable = document.createElement( 'div' );
574
581
  resizable.classList.add( 'resizable' );
575
582
 
576
- console.log( resizable );
583
+ // console.log( resizable );
577
584
 
578
585
 
579
586
  const resizers = document.createElement( 'div' );
package/images/center copy.txt DELETED
@@ -1 +0,0 @@
1
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM848 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H176c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h672zM232 436h560v152H232V436z"></path></svg>
package/images/center.txt DELETED
@@ -1 +0,0 @@
1
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM848 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H176c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h672zM232 436h560v152H232V436z"></path></svg>
package/images/floatLeft.txt DELETED
@@ -1 +0,0 @@
1
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM608 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H96c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM152 436h400v152H152V436zm552 210c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path></svg>