editorjs-image 1.0.5 → 1.0.7

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 +11 -2
  2. package/src/index.css +19 -9
  3. package/src/index.js +70 -58
  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.5",
3
+ "version": "1.0.7",
4
4
  "description": "Image tool plugin for Editor.js",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -14,10 +14,19 @@
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",
21
21
  "type": "git"
22
+ },
23
+ "devDependencies": {
24
+ "css-loader": "^6.8.1",
25
+ "style-loader": "^3.3.3",
26
+ "webpack-cli": "^5.1.4"
27
+ },
28
+ "dependencies": {
29
+ "@editorjs/image": "^2.8",
30
+ "cropperjs": "^1.5"
22
31
  }
23
32
  }
package/src/index.css CHANGED
@@ -1,13 +1,14 @@
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;
9
4
  }
10
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: 20px;
9
+ }
10
+
11
+
11
12
  .cdx-image-tool-tune--center .cdx-block {
12
13
  margin: auto;
13
14
  }
@@ -23,15 +24,15 @@
23
24
  }
24
25
 
25
26
  .cdx-image-tool-tune--sizeSmall .cdx-block {
26
- max-width: 50%;
27
+ width: 50% !important;
27
28
  }
28
29
 
29
30
  .cdx-image-tool-tune--sizeMiddle .cdx-block {
30
- max-width: 70%;
31
+ width: 70% !important;
31
32
  }
32
33
 
33
34
  .cdx-image-tool-tune--sizeLarge .cdx-block {
34
- max-width: 100%;
35
+ width: 100% !important;
35
36
  }
36
37
 
37
38
 
@@ -89,7 +90,7 @@
89
90
  .cdx-image-tool-tune--crop:hover,
90
91
  .cdx-image-tool-tune--crop.isCropping,
91
92
  .cdx-image-tool-tune--resize:hover {
92
- z-index: 1;
93
+ z-index: 2;
93
94
  }
94
95
 
95
96
  .cdx-image-tool-tune--crop .image-tool__image {
@@ -136,4 +137,13 @@
136
137
  max-width: unset !important;
137
138
  min-height: unset !important;
138
139
  max-height: unset !important;
140
+ }
141
+
142
+ .ce-block { margin: 0.8em 0; }
143
+ .ce-toolbar { z-index:3; }
144
+
145
+ .image-tool__caption { background-color:white; }
146
+ .image-tool {
147
+ position: relative;
148
+ z-index:1;
139
149
  }
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
 
@@ -366,19 +370,23 @@ export default class ImageToolTune {
366
370
 
367
371
 
368
372
  //add append crop button to image-tool__image
369
- const image = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
370
- const cropBtn = document.createElement( 'div' );
371
- cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
372
- cropBtn.innerHTML = 'Crop';
373
-
374
- cropBtn.addEventListener( 'click', e => {
375
- //remove crop button
376
- image.removeChild( cropBtn );
377
- this.appendCrop( blockContent );
378
- }
379
- );
373
+ //If editor is readOnly, do not add crop button
374
+ if ( !this.api.readOnly ) {
375
+ const image = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
376
+ const cropBtn = document.createElement( 'div' );
377
+ cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
378
+ cropBtn.innerHTML = 'Crop';
379
+
380
+ cropBtn.addEventListener( 'click', e => {
381
+ //remove crop button
382
+ image.removeChild( cropBtn );
383
+ this.appendCrop( blockContent );
384
+ }
385
+ );
380
386
 
381
- image.appendChild( cropBtn );
387
+ image.appendChild( cropBtn );
388
+
389
+ }
382
390
 
383
391
  }
384
392
 
@@ -475,20 +483,21 @@ export default class ImageToolTune {
475
483
 
476
484
 
477
485
  //add crop button
486
+ if ( !this.api.readOnly ) {
478
487
 
479
- const cropBtn = document.createElement( 'div' );
480
- cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
481
- cropBtn.innerHTML = 'Crop';
488
+ const cropBtn = document.createElement( 'div' );
489
+ cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
490
+ cropBtn.innerHTML = 'Crop';
482
491
 
483
- cropBtn.addEventListener( 'click', e => {
484
- //remove crop button
485
- blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
486
- this.appendCrop( blockContent );
487
- }
488
- );
489
-
490
- blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropBtn );
492
+ cropBtn.addEventListener( 'click', e => {
493
+ //remove crop button
494
+ blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
495
+ this.appendCrop( blockContent );
496
+ }
497
+ );
491
498
 
499
+ blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropBtn );
500
+ }
492
501
  blockContent.classList.remove( 'isCropping' );
493
502
 
494
503
  this.block.dispatchChange();
@@ -569,48 +578,50 @@ export default class ImageToolTune {
569
578
  * */
570
579
  resize( blockContent ) {
571
580
 
581
+ if ( !this.api.readOnly ) {
572
582
 
573
- const resizable = document.createElement( 'div' );
574
- resizable.classList.add( 'resizable' );
583
+ const resizable = document.createElement( 'div' );
584
+ resizable.classList.add( 'resizable' );
575
585
 
576
- console.log( resizable );
586
+ console.log( resizable );
577
587
 
578
588
 
579
- const resizers = document.createElement( 'div' );
580
- resizers.classList.add( 'resizers' );
589
+ const resizers = document.createElement( 'div' );
590
+ resizers.classList.add( 'resizers' );
581
591
 
582
- const resizerTopLeft = document.createElement( 'div' );
583
- resizerTopLeft.classList.add( 'resizer', 'top-left' );
584
- resizerTopLeft.addEventListener( 'mousedown', e => {
585
- this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopLeft, e );
586
- } );
592
+ const resizerTopLeft = document.createElement( 'div' );
593
+ resizerTopLeft.classList.add( 'resizer', 'top-left' );
594
+ resizerTopLeft.addEventListener( 'mousedown', e => {
595
+ this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopLeft, e );
596
+ } );
587
597
 
588
598
 
589
- const resizerTopRight = document.createElement( 'div' );
590
- resizerTopRight.classList.add( 'resizer', 'top-right' );
591
- resizerTopRight.addEventListener( 'mousedown', e => {
592
- this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopRight, e );
593
- } );
599
+ const resizerTopRight = document.createElement( 'div' );
600
+ resizerTopRight.classList.add( 'resizer', 'top-right' );
601
+ resizerTopRight.addEventListener( 'mousedown', e => {
602
+ this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopRight, e );
603
+ } );
594
604
 
595
605
 
596
- const resizerBottomLeft = document.createElement( 'div' );
597
- resizerBottomLeft.classList.add( 'resizer', 'bottom-left' );
598
- resizerBottomLeft.addEventListener( 'mousedown', e => {
599
- this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomLeft, e );
600
- } );
606
+ const resizerBottomLeft = document.createElement( 'div' );
607
+ resizerBottomLeft.classList.add( 'resizer', 'bottom-left' );
608
+ resizerBottomLeft.addEventListener( 'mousedown', e => {
609
+ this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomLeft, e );
610
+ } );
601
611
 
602
- const resizerBottomRight = document.createElement( 'div' );
603
- resizerBottomRight.classList.add( 'resizer', 'bottom-right' );
604
- resizerBottomRight.addEventListener( 'mousedown', e => {
605
- this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomRight, e );
606
- } );
612
+ const resizerBottomRight = document.createElement( 'div' );
613
+ resizerBottomRight.classList.add( 'resizer', 'bottom-right' );
614
+ resizerBottomRight.addEventListener( 'mousedown', e => {
615
+ this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomRight, e );
616
+ } );
607
617
 
608
- resizers.appendChild( resizerTopLeft );
609
- resizers.appendChild( resizerTopRight );
610
- resizers.appendChild( resizerBottomLeft );
611
- resizers.appendChild( resizerBottomRight );
612
- resizable.appendChild( resizers );
613
- blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].appendChild( resizable );
618
+ resizers.appendChild( resizerTopLeft );
619
+ resizers.appendChild( resizerTopRight );
620
+ resizers.appendChild( resizerBottomLeft );
621
+ resizers.appendChild( resizerBottomRight );
622
+ resizable.appendChild( resizers );
623
+ blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].appendChild( resizable );
624
+ }
614
625
  }
615
626
 
616
627
 
@@ -883,4 +894,5 @@ export default class ImageToolTune {
883
894
  this.wrapper = null;
884
895
  this.buttons = null;
885
896
  }
886
- }
897
+
898
+ }
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>