editorjs-image 1.0.1
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/README.md +136 -0
- package/package.json +23 -0
- package/src/cropper.css +305 -0
- package/src/cropper.js +3260 -0
- package/src/image-tool-tune.css +137 -0
- package/src/image-tool-tune.js +896 -0
- package/src/index.js +2 -0
package/README.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
# Mention Tool Plugin for Editor.js
|
|
6
|
+
## Demo
|
|
7
|
+
|
|
8
|
+
https://mention-tool-editorjs.vercel.app/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
Install with npm
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install editorjs-mention-tool
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage/Examples
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
// Here Import react with useEffect
|
|
23
|
+
import React, { useEffect } from 'react'
|
|
24
|
+
|
|
25
|
+
// Here EditorJS with some plugins
|
|
26
|
+
import { createReactEditorJS } from 'react-editor-js'
|
|
27
|
+
import Header from "@editorjs/header"
|
|
28
|
+
import Paragraph from '@editorjs/paragraph'
|
|
29
|
+
|
|
30
|
+
// Here mention module
|
|
31
|
+
import MentionTool from 'editorjs-mention-tool'
|
|
32
|
+
import "editorjs-mention-tool/src/styles.css"
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
const CustomEditor = () => {
|
|
37
|
+
|
|
38
|
+
const editorCore = React.useRef(null)
|
|
39
|
+
|
|
40
|
+
const handleInitialize = React.useCallback((instance) => {
|
|
41
|
+
editorCore.current = instance
|
|
42
|
+
}, [])
|
|
43
|
+
|
|
44
|
+
const ReactEditorJS = createReactEditorJS() // Initialize editor
|
|
45
|
+
|
|
46
|
+
const EDITOR_JS_TOOLS = {
|
|
47
|
+
paragraph: {
|
|
48
|
+
class: Paragraph,
|
|
49
|
+
inlineToolbar: true,
|
|
50
|
+
},
|
|
51
|
+
header: Header,
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
|
|
56
|
+
// Here create new MentionTool with $ accessor key to use it as variable layout
|
|
57
|
+
new MentionTool({
|
|
58
|
+
holder: 'editorHolder', // This is the editor Holder ( see below )
|
|
59
|
+
accessKey: "$", // Access key ( $ or @ )
|
|
60
|
+
allUsers: [ // The array with the data you want to show when the users type $
|
|
61
|
+
{
|
|
62
|
+
"id": "1234",
|
|
63
|
+
"name": "Variable 1",
|
|
64
|
+
"slug": "variable1"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"id": "12345",
|
|
68
|
+
"name": "Thing of v1",
|
|
69
|
+
"slug": "variable1.something"
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
baseUrl: '',
|
|
73
|
+
searchAPIUrl: ''
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
// Here create new MentionTool with @ accessor key to use it as mention layout
|
|
77
|
+
new MentionTool({
|
|
78
|
+
holder: 'editorHolder', // This is the editor Holder ( see below )
|
|
79
|
+
accessKey: "@", // Access key ( $ or @ )
|
|
80
|
+
allUsers: [ // The array with the data you want to show when the users type @
|
|
81
|
+
{
|
|
82
|
+
"id": "21029",
|
|
83
|
+
"name": "Kyle Ockford",
|
|
84
|
+
"avatar": "https://i.pravatar.cc/300",
|
|
85
|
+
"slug": "kyleockford"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "21030",
|
|
89
|
+
"name": "Paige Cortez",
|
|
90
|
+
"avatar": "https://avatars.dicebear.com/api/croodles/your-custom-seed.svg",
|
|
91
|
+
"slug": "paigecortez"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "21031",
|
|
95
|
+
"name": "Nyla Warren",
|
|
96
|
+
"slug": "nylawarren"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"id": "21032",
|
|
100
|
+
"name": "Hassan Lee",
|
|
101
|
+
"slug": "hassanlee"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"id": "21033",
|
|
105
|
+
"name": "Domas Rivas",
|
|
106
|
+
"avatar": "https://avatars.dicebear.com/api/pixel-art-neutral/kreudev.svg",
|
|
107
|
+
"slug": "domasrivas"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"id": "21034",
|
|
111
|
+
"name": "Arthur Hunt",
|
|
112
|
+
"slug": "arthurhunt"
|
|
113
|
+
},
|
|
114
|
+
],
|
|
115
|
+
baseUrl: '',
|
|
116
|
+
searchAPIUrl: ''
|
|
117
|
+
})
|
|
118
|
+
}, [])
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<ReactEditorJS onInitialize={handleInitialize} tools={EDITOR_JS_TOOLS} placeholder={`Write something here...`} holder="editorHolder">
|
|
122
|
+
<div id="editorHolder" />
|
|
123
|
+
</ReactEditorJS>
|
|
124
|
+
)
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Return the CustomEditor to use by other components.
|
|
128
|
+
|
|
129
|
+
export default CustomEditor
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
## Screenshots
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editorjs-image",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Image tool plugin for Editor.js",
|
|
5
|
+
"main": "src/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"yjs",
|
|
11
|
+
"editorjs",
|
|
12
|
+
"editor.js",
|
|
13
|
+
"plugin",
|
|
14
|
+
"tool",
|
|
15
|
+
"variables"
|
|
16
|
+
],
|
|
17
|
+
"author": "xkzl",
|
|
18
|
+
"license": "GPL",
|
|
19
|
+
"repository": {
|
|
20
|
+
"url": "ssh://git@gitlab.glitchr.dev:public-repository/javascript/editor-js/image.git",
|
|
21
|
+
"type": "git"
|
|
22
|
+
}
|
|
23
|
+
}
|
package/src/cropper.css
ADDED
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Cropper.js v1.5.13
|
|
3
|
+
* https://fengyuanchen.github.io/cropperjs
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2015-present Chen Fengyuan
|
|
6
|
+
* Released under the MIT license
|
|
7
|
+
*
|
|
8
|
+
* Date: 2022-11-20T05:30:43.444Z
|
|
9
|
+
*/
|
|
10
|
+
.cropper-container {
|
|
11
|
+
direction: ltr;
|
|
12
|
+
font-size: 0;
|
|
13
|
+
line-height: 0;
|
|
14
|
+
position: relative;
|
|
15
|
+
-ms-touch-action: none;
|
|
16
|
+
touch-action: none;
|
|
17
|
+
-webkit-user-select: none;
|
|
18
|
+
-moz-user-select: none;
|
|
19
|
+
-ms-user-select: none;
|
|
20
|
+
user-select: none
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.cropper-container img {
|
|
24
|
+
-webkit-backface-visibility: hidden;
|
|
25
|
+
backface-visibility: hidden;
|
|
26
|
+
display: block;
|
|
27
|
+
height: 100%;
|
|
28
|
+
image-orientation: 0deg;
|
|
29
|
+
max-height: none !important;
|
|
30
|
+
max-width: none !important;
|
|
31
|
+
min-height: 0 !important;
|
|
32
|
+
min-width: 0 !important;
|
|
33
|
+
width: 100%
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cropper-canvas,
|
|
37
|
+
.cropper-crop-box,
|
|
38
|
+
.cropper-drag-box,
|
|
39
|
+
.cropper-modal,
|
|
40
|
+
.cropper-wrap-box {
|
|
41
|
+
bottom: 0;
|
|
42
|
+
left: 0;
|
|
43
|
+
position: absolute;
|
|
44
|
+
right: 0;
|
|
45
|
+
top: 0
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.cropper-canvas,
|
|
49
|
+
.cropper-wrap-box {
|
|
50
|
+
overflow: hidden
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.cropper-drag-box {
|
|
54
|
+
background-color: #fff;
|
|
55
|
+
opacity: 0
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.cropper-modal {
|
|
59
|
+
background-color: #000;
|
|
60
|
+
opacity: .5
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.cropper-view-box {
|
|
64
|
+
display: block;
|
|
65
|
+
height: 100%;
|
|
66
|
+
outline: 1px solid #39f;
|
|
67
|
+
outline-color: rgba(51, 153, 255, .75);
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
width: 100%
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.cropper-dashed {
|
|
73
|
+
border: 0 dashed #eee;
|
|
74
|
+
display: block;
|
|
75
|
+
opacity: .5;
|
|
76
|
+
position: absolute
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.cropper-dashed.dashed-h {
|
|
80
|
+
border-bottom-width: 1px;
|
|
81
|
+
border-top-width: 1px;
|
|
82
|
+
height: 33.33333%;
|
|
83
|
+
left: 0;
|
|
84
|
+
top: 33.33333%;
|
|
85
|
+
width: 100%
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.cropper-dashed.dashed-v {
|
|
89
|
+
border-left-width: 1px;
|
|
90
|
+
border-right-width: 1px;
|
|
91
|
+
height: 100%;
|
|
92
|
+
left: 33.33333%;
|
|
93
|
+
top: 0;
|
|
94
|
+
width: 33.33333%
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.cropper-center {
|
|
98
|
+
display: block;
|
|
99
|
+
height: 0;
|
|
100
|
+
left: 50%;
|
|
101
|
+
opacity: .75;
|
|
102
|
+
position: absolute;
|
|
103
|
+
top: 50%;
|
|
104
|
+
width: 0
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.cropper-center:after,
|
|
108
|
+
.cropper-center:before {
|
|
109
|
+
background-color: #eee;
|
|
110
|
+
content: " ";
|
|
111
|
+
display: block;
|
|
112
|
+
position: absolute
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.cropper-center:before {
|
|
116
|
+
height: 1px;
|
|
117
|
+
left: -3px;
|
|
118
|
+
top: 0;
|
|
119
|
+
width: 7px
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.cropper-center:after {
|
|
123
|
+
height: 7px;
|
|
124
|
+
left: 0;
|
|
125
|
+
top: -3px;
|
|
126
|
+
width: 1px
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.cropper-face,
|
|
130
|
+
.cropper-line,
|
|
131
|
+
.cropper-point {
|
|
132
|
+
display: block;
|
|
133
|
+
height: 100%;
|
|
134
|
+
opacity: .1;
|
|
135
|
+
position: absolute;
|
|
136
|
+
width: 100%
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cropper-face {
|
|
140
|
+
background-color: #fff;
|
|
141
|
+
left: 0;
|
|
142
|
+
top: 0
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.cropper-line {
|
|
146
|
+
background-color: #39f
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.cropper-line.line-e {
|
|
150
|
+
cursor: ew-resize;
|
|
151
|
+
right: -3px;
|
|
152
|
+
top: 0;
|
|
153
|
+
width: 5px
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.cropper-line.line-n {
|
|
157
|
+
cursor: ns-resize;
|
|
158
|
+
height: 5px;
|
|
159
|
+
left: 0;
|
|
160
|
+
top: -3px
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.cropper-line.line-w {
|
|
164
|
+
cursor: ew-resize;
|
|
165
|
+
left: -3px;
|
|
166
|
+
top: 0;
|
|
167
|
+
width: 5px
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.cropper-line.line-s {
|
|
171
|
+
bottom: -3px;
|
|
172
|
+
cursor: ns-resize;
|
|
173
|
+
height: 5px;
|
|
174
|
+
left: 0
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.cropper-point {
|
|
178
|
+
background-color: #39f;
|
|
179
|
+
height: 5px;
|
|
180
|
+
opacity: .75;
|
|
181
|
+
width: 5px
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.cropper-point.point-e {
|
|
185
|
+
cursor: ew-resize;
|
|
186
|
+
margin-top: -3px;
|
|
187
|
+
right: -3px;
|
|
188
|
+
top: 50%
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.cropper-point.point-n {
|
|
192
|
+
cursor: ns-resize;
|
|
193
|
+
left: 50%;
|
|
194
|
+
margin-left: -3px;
|
|
195
|
+
top: -3px
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.cropper-point.point-w {
|
|
199
|
+
cursor: ew-resize;
|
|
200
|
+
left: -3px;
|
|
201
|
+
margin-top: -3px;
|
|
202
|
+
top: 50%
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.cropper-point.point-s {
|
|
206
|
+
bottom: -3px;
|
|
207
|
+
cursor: s-resize;
|
|
208
|
+
left: 50%;
|
|
209
|
+
margin-left: -3px
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.cropper-point.point-ne {
|
|
213
|
+
cursor: nesw-resize;
|
|
214
|
+
right: -3px;
|
|
215
|
+
top: -3px
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.cropper-point.point-nw {
|
|
219
|
+
cursor: nwse-resize;
|
|
220
|
+
left: -3px;
|
|
221
|
+
top: -3px
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.cropper-point.point-sw {
|
|
225
|
+
bottom: -3px;
|
|
226
|
+
cursor: nesw-resize;
|
|
227
|
+
left: -3px
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.cropper-point.point-se {
|
|
231
|
+
bottom: -3px;
|
|
232
|
+
cursor: nwse-resize;
|
|
233
|
+
height: 20px;
|
|
234
|
+
opacity: 1;
|
|
235
|
+
right: -3px;
|
|
236
|
+
width: 20px
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
@media (min-width:768px) {
|
|
240
|
+
.cropper-point.point-se {
|
|
241
|
+
height: 15px;
|
|
242
|
+
width: 15px
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
@media (min-width:992px) {
|
|
247
|
+
.cropper-point.point-se {
|
|
248
|
+
height: 10px;
|
|
249
|
+
width: 10px
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
@media (min-width:1200px) {
|
|
254
|
+
.cropper-point.point-se {
|
|
255
|
+
height: 5px;
|
|
256
|
+
opacity: .75;
|
|
257
|
+
width: 5px
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.cropper-point.point-se:before {
|
|
262
|
+
background-color: #39f;
|
|
263
|
+
bottom: -50%;
|
|
264
|
+
content: " ";
|
|
265
|
+
display: block;
|
|
266
|
+
height: 200%;
|
|
267
|
+
opacity: 0;
|
|
268
|
+
position: absolute;
|
|
269
|
+
right: -50%;
|
|
270
|
+
width: 200%
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.cropper-invisible {
|
|
274
|
+
opacity: 0
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.cropper-bg {
|
|
278
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.cropper-hide {
|
|
282
|
+
display: block;
|
|
283
|
+
height: 0;
|
|
284
|
+
position: absolute;
|
|
285
|
+
width: 0
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.cropper-hidden {
|
|
289
|
+
display: none !important
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.cropper-move {
|
|
293
|
+
cursor: move
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.cropper-crop {
|
|
297
|
+
cursor: crosshair
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.cropper-disabled .cropper-drag-box,
|
|
301
|
+
.cropper-disabled .cropper-face,
|
|
302
|
+
.cropper-disabled .cropper-line,
|
|
303
|
+
.cropper-disabled .cropper-point {
|
|
304
|
+
cursor: not-allowed
|
|
305
|
+
}
|