editorjs-image 1.0.4 → 1.0.6

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 (12) hide show
  1. package/images/center copy.txt +1 -0
  2. package/images/center.txt +1 -0
  3. package/images/floatLeft.txt +1 -0
  4. package/index.html +5 -41
  5. package/package.json +9 -1
  6. package/src/{image-tool-tune.css → index.css} +2 -0
  7. package/src/index.js +886 -2
  8. package/webpack.config.js +1 -1
  9. package/src/cropper.css +0 -305
  10. package/src/cropper.js +0 -3260
  11. package/src/image-tool-tune.js +0 -893
  12. /package/dist/{image-tool-tune.js → image.js} +0 -0
package/images/center copy.txt ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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>
package/index.html CHANGED
@@ -6,67 +6,33 @@
6
6
  <title>Image tool tune</title>
7
7
 
8
8
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27.2/dist/editorjs.umd.min.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
10
- <script src="./dist/image-tool-tune.js"></script>
11
-
9
+ <script src="./dist/image.js"></script>
12
10
  </head>
13
11
 
14
12
  <body>
15
13
 
16
- <h1 style="width:100%; text-align:center;">Exemple d'utilisation d'image tool tune</h1>
14
+ <h1 style="width:100%; text-align:center;">Image tool tune</h1>
17
15
 
18
16
  <div id="editorjs"></div>
19
17
 
20
18
  <script>
21
- console.log( window );
22
19
 
23
- //On DOM LOADED
24
20
  document.addEventListener( 'DOMContentLoaded', function () {
25
21
 
26
- //On récupère les données de l'éditeur
27
- let editorData = { "time": 1689837286273, "blocks": [ { "id": "cH5NmEDCZn", "type": "image", "data": { "file": { "url": "https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&amp;resize=1200:*" }, "caption": "", "withBorder": false, "stretched": false, "withBackground": false }, "tunes": { "imageTune": { "floatLeft": true, "floatRight": false, "center": false, "sizeSmall": false, "sizeMiddle": false, "sizeLarge": false, "resize": false, "resizeSize": 0, "crop": true, "cropperFrameHeight": 128.67734374999998, "cropperFrameWidth": 261.0781543703008, "cropperFrameLeft": -257.219020112782, "cropperFrameTop": -204.97074257812505, "cropperImageHeight": 788.0004000000001, "cropperImageWidth": 789.9753383458648 } } }, { "id": "2IlwBv5XQY", "type": "paragraph", "data": { "text": "Hello world" } } ], "version": "2.27.2" };
28
-
29
- //On initialise l'éditeur
30
- initEditorJs( editorData );
31
-
32
- } );
33
-
34
- function initEditorJs( editorData ) {
35
22
  const ImageToolTune = window.ImageToolTune;
36
23
  const ImageTool = window.ImageTool;
37
24
 
38
-
39
25
  const editor = new EditorJS( {
40
26
  holder: 'editorjs',
41
27
  tools: {
42
28
  imageTune: ImageToolTune,
43
29
  image: {
44
30
  tunes: [ 'imageTune' ],
45
- class: ImageTool,
46
- config: {
47
- uploader: {
48
- /**
49
- * Upload file to the server and return an uploaded image data
50
- * @param {File} file - file selected from the device or pasted by drag-n-drop
51
- * @return {Promise.<{success, file: {url}}>}
52
- */
53
- uploadByFile( file ) {
54
-
55
- return {
56
- success: 1,
57
- file: {
58
- url: 'https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*',
59
- // any other image data you want to store, such as width, height, color, extension, etc
60
- }
61
- };
62
-
63
- }
64
- }
65
- }
31
+ class: ImageTool
66
32
  },
67
33
  },
34
+
68
35
  logLevel: 'VERBOSE',
69
- data: editorData,
70
36
  onChange: ( api, event ) => {
71
37
  saveDataEditJs();
72
38
  }
@@ -80,10 +46,8 @@
80
46
  console.log( 'Saving failed: ', error )
81
47
  } );
82
48
  }
49
+ });
83
50
 
84
-
85
-
86
- }
87
51
  </script>
88
52
 
89
53
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "editorjs-image",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Image tool plugin for Editor.js",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -19,5 +19,13 @@
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
+ "cropperjs": "1.5.13"
22
30
  }
23
31
  }
package/src/{image-tool-tune.css → index.css} RENAMED
@@ -1,3 +1,5 @@
1
+ @import "cropperjs/src/css/cropper.scss";
2
+
1
3
  .cdx-image-tool-tune--floatLeft.ce-block__content,
2
4
  .cdx-image-tool-tune--floatRight.ce-block__content {
3
5
  min-height: 20px;