Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commita91646f

Browse files
committed
feat(editor): rm plugin deps & update global styles
1 parente7336a4 commita91646f

File tree

7 files changed

+220
-217
lines changed

7 files changed

+220
-217
lines changed

‎package.json‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,25 +40,10 @@
4040
}
4141
},
4242
"dependencies": {
43-
"@editorjs/checklist":"^1.1.0",
44-
"@editorjs/code":"^2.4.1",
45-
"@editorjs/delimiter":"^1.1.0",
46-
"@editorjs/editorjs":"^2.15.1",
47-
"@editorjs/header":"^2.3.0",
48-
"@editorjs/inline-code":"^1.3.0",
49-
"@editorjs/list":"^1.4.0",
50-
"@editorjs/marker":"^1.2.1",
51-
"@groupher/editor-code":"^1.0.0",
52-
"@groupher/editor-embed":"1.0.2",
53-
"@groupher/editor-header":"^2.3.0",
54-
"@groupher/editor-image":"^1.0.0",
55-
"@groupher/editor-link":"^2.1.3",
56-
"@groupher/editor-quote":"2.3.2",
57-
"@groupher/react-editor":"1.0.45",
43+
"@groupher/react-editor":"1.0.55",
5844
"@next/bundle-analyzer":"^9.0.0",
5945
"@sentry/browser":"^4.6.4",
6046
"@sentry/node":"^4.6.4",
61-
"@stfy/react-editor.js":"^1.0.3",
6247
"@tippy.js/react":"^2.2.1",
6348
"@zeit/next-css":"^1.0.1",
6449
"@zeit/next-source-maps":"0.0.4-canary.1",

‎src/containers/RichEditor/index.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
*/
66

77
importReactfrom'react'
8-
// import Editor from '@stfy/react-editor.js'
98
importEditorfrom'@groupher/react-editor'
109

1110
import{connectStore,buildLog}from'@utils'
1211
import{useScript}from'@hooks'
1312

14-
import{useInit}from'./logic'
13+
import{useInit,onChange}from'./logic'
1514
// import * as logic from './logic'
1615

1716
import{Wrapper}from'./styles'
@@ -28,9 +27,7 @@ const RichEditorContainer = ({ richEditor }) => {
2827

2928
return(
3029
<Wrapper>
31-
<divid="codex-editor"/>
32-
<divid="editorjs-container"/>
33-
<Editorholder="editorjs-container"/>
30+
<EditoronData={onChange}/>
3431
</Wrapper>
3532
)
3633
}
Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
// import R from 'ramda'
2+
import{useEffect}from'react'
3+
4+
// import EditorJS from '@editorjs/editorjs'
5+
importEditorJSfrom'@groupher/editor'
6+
// import List from '@editorjs/list'
7+
// import Marker from '@editorjs/marker'
8+
// import Checklist from '@editorjs/checklist'
9+
// import Delimiter from '@editorjs/delimiter'
10+
importInlineCodefrom'@editorjs/inline-code'
11+
12+
importHeaderfrom'@groupher/editor-header'
13+
importQuotefrom'@groupher/editor-quote'
14+
importLinkToolfrom'@groupher/editor-link'
15+
importCodefrom'@groupher/editor-code'
16+
importImageToolfrom'@groupher/editor-image'
17+
18+
// import Prism from 'mastani-codehighlight'
19+
20+
// import { TYPE, EVENT, ERR } from '@constant'
21+
import{buildLog}from'@utils'
22+
23+
import{initUploaderClient,uploadFile}from'./uploader'
24+
25+
letstore=null
26+
27+
/* eslint-disable-next-line */
28+
constlog=buildLog('L:RichEditor')
29+
30+
exportconstsomeMethod=()=>{}
31+
32+
// ###############################
33+
// init & uninit
34+
// ###############################
35+
36+
exportconstuseInit=(_store,uploaderLoaded)=>{
37+
useEffect(()=>{
38+
store=_store
39+
log('effect init: ',store)
40+
41+
if(uploaderLoaded){
42+
// eslint-disable-next-line
43+
consteditor=newEditorJS({
44+
/**
45+
* Id of Element that should contain Editor instance
46+
*/
47+
holderId:'codex-editor',
48+
tools:{
49+
header:{
50+
class:Header,
51+
inlineToolbar:false,
52+
},
53+
quote:Quote,
54+
// list: {
55+
// class: List,
56+
// inlineToolbar: true,
57+
// },
58+
// marker: {
59+
// class: Marker,
60+
// },
61+
// checklist: {
62+
// class: Checklist,
63+
// inlineToolbar: true,
64+
// },
65+
// delimiter: Delimiter,
66+
inlineCode:InlineCode,
67+
linkTool:{
68+
class:LinkTool,
69+
config:{
70+
endpoint:'http://localhost:4001/api/og-info',
71+
},
72+
},
73+
code:{
74+
class:Code,
75+
inlineToolbar:false,
76+
},
77+
image:{
78+
class:ImageTool,
79+
config:{
80+
endpoints:{
81+
byFile:'http://localhost:8008/uploadFile',// Your backend file uploader endpoint
82+
byUrl:'http://localhost:8008/fetchUrl',// Your endpoint that provides uploading by Url
83+
},
84+
ossKeys:{
85+
ALI_OSS_RESION:'ALI_OSS_RESION',
86+
// region: process.env.ALI_OSS_RESION,
87+
ALI_ACCESS_KEY:'ALI_ACCESS_KEY',
88+
// accessKeyId: process.env.ALI_ACCESS_KEY,
89+
ALI_ACCESS_SECRET:'ALI_ACCESS_SECRET',
90+
// accessKeySecret: process.env.ALI_ACCESS_SECRET,
91+
ALI_OSS_BUCKET:'ALI_OSS_BUCKET',
92+
// bucket: process.env.ALI_OSS_BUCKET,
93+
94+
// region: process.env.ALI_OSS_RESION,
95+
// accessKeyId: process.env.ALI_ACCESS_KEY,
96+
// accessKeySecret: process.env.ALI_ACCESS_SECRET,
97+
// bucket: process.env.ALI_OSS_BUCKET,
98+
},
99+
uploader:{
100+
/**
101+
* Upload file to the server and return an uploaded image data
102+
*@param {File} file - file selected from the device or pasted by drag-n-drop
103+
*@return {Promise.<{success, file: {url}}>}
104+
*/
105+
uploadByFile(file){
106+
// your own uploading logic here
107+
returnuploadFile(file)
108+
// return MyAjax.upload(file).then(() => {
109+
// return {
110+
// success: 1,
111+
// file: {
112+
// url:
113+
// 'https://codex.so/upload/redactor_images/o_80beea670e49f04931ce9e3b2122ac70.jpg',
114+
// // any other image data you want to store, such as width, height, color, extension, etc
115+
// },
116+
// }
117+
// })
118+
},
119+
},
120+
},
121+
},
122+
},
123+
data:{
124+
time:1552744582955,
125+
blocks:[
126+
{
127+
type:'paragraph',
128+
data:{
129+
text:'this is @',
130+
},
131+
},
132+
{
133+
type:'code',
134+
data:{
135+
lang:'css',
136+
text:
137+
'body {\n color: tomato;\n margin-left: 20px;\n};\n\nconsole.log("hello fuck")',
138+
},
139+
},
140+
],
141+
version:'2.15.1',
142+
},
143+
onChange:()=>{
144+
editor.save().then(data=>{
145+
console.log('onChange data: ',data)
146+
// Prism.highlightAll()
147+
})
148+
},
149+
})
150+
initUploaderClient(store)
151+
}
152+
153+
return()=>{
154+
// log('effect uninit')
155+
}
156+
},[_store,uploaderLoaded])
157+
}

‎src/containers/RichEditor/logic/index.js‎

Lines changed: 4 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,21 @@
11
// import R from 'ramda'
22
import{useEffect}from'react'
33

4-
// import EditorJS from '@editorjs/editorjs'
5-
importEditorJSfrom'@groupher/editor'
6-
importListfrom'@editorjs/list'
7-
importMarkerfrom'@editorjs/marker'
8-
importChecklistfrom'@editorjs/checklist'
9-
importDelimiterfrom'@editorjs/delimiter'
10-
importInlineCodefrom'@editorjs/inline-code'
11-
12-
importHeaderfrom'@groupher/editor-header'
13-
importQuotefrom'@groupher/editor-quote'
14-
importLinkToolfrom'@groupher/editor-link'
15-
importCodefrom'@groupher/editor-code'
16-
importImageToolfrom'@groupher/editor-image'
17-
184
// import Prism from 'mastani-codehighlight'
195

206
// import { TYPE, EVENT, ERR } from '@constant'
217
import{buildLog}from'@utils'
228

23-
import{initUploaderClient,uploadFile}from'./uploader'
9+
//import { initUploaderClient, uploadFile } from './uploader'
2410

2511
letstore=null
2612

2713
/* eslint-disable-next-line */
2814
constlog=buildLog('L:RichEditor')
2915

30-
exportconstsomeMethod=()=>{}
16+
exportconstonChange=data=>{
17+
log('editor onChange: ',data)
18+
}
3119

3220
// ###############################
3321
// init & uninit
@@ -37,119 +25,6 @@ export const useInit = (_store, uploaderLoaded) => {
3725
useEffect(()=>{
3826
store=_store
3927
log('effect init: ',store)
40-
41-
if(uploaderLoaded){
42-
// eslint-disable-next-line
43-
consteditor=newEditorJS({
44-
/**
45-
* Id of Element that should contain Editor instance
46-
*/
47-
holderId:'codex-editor',
48-
tools:{
49-
header:{
50-
class:Header,
51-
inlineToolbar:false,
52-
},
53-
quote:Quote,
54-
list:{
55-
class:List,
56-
inlineToolbar:true,
57-
},
58-
marker:{
59-
class:Marker,
60-
},
61-
checklist:{
62-
class:Checklist,
63-
inlineToolbar:true,
64-
},
65-
delimiter:Delimiter,
66-
inlineCode:InlineCode,
67-
linkTool:{
68-
class:LinkTool,
69-
config:{
70-
endpoint:'http://localhost:4001/api/og-info',
71-
},
72-
},
73-
code:{
74-
class:Code,
75-
inlineToolbar:false,
76-
},
77-
image:{
78-
class:ImageTool,
79-
config:{
80-
endpoints:{
81-
byFile:'http://localhost:8008/uploadFile',// Your backend file uploader endpoint
82-
byUrl:'http://localhost:8008/fetchUrl',// Your endpoint that provides uploading by Url
83-
},
84-
ossKeys:{
85-
ALI_OSS_RESION:'ALI_OSS_RESION',
86-
// region: process.env.ALI_OSS_RESION,
87-
ALI_ACCESS_KEY:'ALI_ACCESS_KEY',
88-
// accessKeyId: process.env.ALI_ACCESS_KEY,
89-
ALI_ACCESS_SECRET:'ALI_ACCESS_SECRET',
90-
// accessKeySecret: process.env.ALI_ACCESS_SECRET,
91-
ALI_OSS_BUCKET:'ALI_OSS_BUCKET',
92-
// bucket: process.env.ALI_OSS_BUCKET,
93-
94-
// region: process.env.ALI_OSS_RESION,
95-
// accessKeyId: process.env.ALI_ACCESS_KEY,
96-
// accessKeySecret: process.env.ALI_ACCESS_SECRET,
97-
// bucket: process.env.ALI_OSS_BUCKET,
98-
},
99-
uploader:{
100-
/**
101-
* Upload file to the server and return an uploaded image data
102-
*@param {File} file - file selected from the device or pasted by drag-n-drop
103-
*@return {Promise.<{success, file: {url}}>}
104-
*/
105-
uploadByFile(file){
106-
// your own uploading logic here
107-
returnuploadFile(file)
108-
// return MyAjax.upload(file).then(() => {
109-
// return {
110-
// success: 1,
111-
// file: {
112-
// url:
113-
// 'https://codex.so/upload/redactor_images/o_80beea670e49f04931ce9e3b2122ac70.jpg',
114-
// // any other image data you want to store, such as width, height, color, extension, etc
115-
// },
116-
// }
117-
// })
118-
},
119-
},
120-
},
121-
},
122-
},
123-
data:{
124-
time:1552744582955,
125-
blocks:[
126-
{
127-
type:'paragraph',
128-
data:{
129-
text:'this is @',
130-
},
131-
},
132-
{
133-
type:'code',
134-
data:{
135-
lang:'css',
136-
text:
137-
'body {\n color: tomato;\n margin-left: 20px;\n};\n\nconsole.log("hello fuck")',
138-
},
139-
},
140-
],
141-
version:'2.15.1',
142-
},
143-
onChange:()=>{
144-
editor.save().then(data=>{
145-
console.log('onChange data: ',data)
146-
// Prism.highlightAll()
147-
})
148-
},
149-
})
150-
initUploaderClient(store)
151-
}
152-
15328
return()=>{
15429
// log('effect uninit')
15530
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp