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.

Commit526104e

Browse files
committed
Merge branch 'editor-js' ofhttps://github.com/coderplanets/coderplanets_web into editor-js
2 parents41d74b6 +128c2b3 commit526104e

File tree

7 files changed

+137
-25
lines changed

7 files changed

+137
-25
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@
5353
"@groupher/editor-image":"^1.0.0",
5454
"@groupher/editor-link":"^2.1.3",
5555
"@groupher/editor-quote":"^2.3.0",
56+
"@groupher/react-editor":"1.0.21",
5657
"@next/bundle-analyzer":"^9.0.0",
5758
"@sentry/browser":"^4.6.4",
5859
"@sentry/node":"^4.6.4",
60+
"@stfy/react-editor.js":"^1.0.3",
5961
"@tippy.js/react":"^2.2.1",
6062
"@zeit/next-css":"^1.0.1",
6163
"@zeit/next-source-maps":"0.0.4-canary.1",

‎pages/editor.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import initRootStore from '@stores/init'
66
importThemeWrapperfrom'@containers/ThemeWrapper'
77
// import EditorJS from '@editorjs/editorjs'
88

9+
// eslint-disable-next-line no-unused-vars
910
consthtml=
1011
'<div class="cps-viewer"><h2 class="cps-viewer-header">Editor.js</h2><p class="cps-viewer-paragraph">Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.</p><h3 class="cps-viewer-header">Key features</h3><ul><li>It is a block-styled editor</li><li>It returns clean data output in JSON</li><li>Designed to be extendable and pluggable with a simple API</li></ul><h3 class="cps-viewer-header">Key features</h3><ol><li>It is a block-styled editor</li><li>It returns clean data output in JSON</li><li>Designed to be extendable and pluggable with a simple API</li></ol><h3 class="cps-viewer-header">What does it mean «block-styled editor»</h3><div class="cps-viewer-checklist"><div>This is a block-styled editor</div><div>Clean output data</div><div>Simple and powerful API</div></div><p class="cps-viewer-paragraph">Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class="cdx-marker">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.</p><p class="cps-viewer-paragraph">There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.</p><h3 class="cps-viewer-header">What does it mean clean data output</h3><p class="cps-viewer-paragraph">Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below</p><p class="cps-viewer-paragraph">Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.</p><p class="cps-viewer-paragraph">Clean data is useful to sanitize, validate and process on the backend.</p><div class="cps-viewer-delimiter"></div><p class="cps-viewer-paragraph">We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it\'s core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏</p><div class="cps-viewer-image"><img src="https://codex.so/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg" /></div><div class="cps-viewer-linker"><a href="https://www.github.com">https://www.github.com</a></div><div class="cps-viewer-quote">quote demo text</div><div>'
1112

@@ -29,14 +30,14 @@ const Editor = () => {
2930
height:'100%',
3031
}}
3132
>
32-
<div
33+
<br/>
34+
<DynamicRichEditor/>
35+
{/* <div
3336
dangerouslySetInnerHTML={{
3437
__html: html,
3538
}}
36-
/>
39+
/> */}
3740
<hr/>
38-
<br/>
39-
<DynamicRichEditor/>
4041
</div>
4142
</ThemeWrapper>
4243
</Provider>

‎src/containers/RichEditor/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
*/
66

77
importReactfrom'react'
8+
// import Editor from '@stfy/react-editor.js'
9+
importEditorfrom'@groupher/react-editor'
810

911
import{connectStore,buildLog}from'@utils'
1012
import{useScript}from'@hooks'
@@ -27,6 +29,8 @@ const RichEditorContainer = ({ richEditor }) => {
2729
return(
2830
<Wrapper>
2931
<divid="codex-editor"/>
32+
<divid="editorjs-container"/>
33+
<Editorholder="editorjs-container"/>
3034
</Wrapper>
3135
)
3236
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// import R from 'ramda'
22
import{useEffect}from'react'
33

4-
importEditorJSfrom'@editorjs/editorjs'
4+
// import EditorJS from '@editorjs/editorjs'
5+
importEditorJSfrom'@groupher/editor'
56
importListfrom'@editorjs/list'
67
importMarkerfrom'@editorjs/marker'
78
importChecklistfrom'@editorjs/checklist'

‎src/containers/ThemeWrapper/RichEditorStyle.js‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,51 @@ import { theme } from '@utils'
77
// marker see: https://github.com/editor-js/marker
88

99
constRichEditorStyle=createGlobalStyle`
10+
.ce-toolbox__button--active {
11+
-webkit-animation: bounceIn .35s .5;
12+
animation: bounceIn .35s .5;
13+
}
14+
.ce-toolbar__plus--active, .ce-toolbar__plus:hover {
15+
color:${theme('richEditor.iconActive')};
16+
}
17+
.ce-inline-tool--active, .ce-inline-tool:hover {
18+
color:${theme('richEditor.iconActive')};
19+
background-color:${theme('richEditor.iconActiveBg')};
20+
}
21+
.ce-inline-tool {
22+
color:${theme('richEditor.icon')};
23+
}
24+
25+
.ce-toolbox__button--active, .ce-toolbox__button:hover {
26+
color:${theme('richEditor.iconActive')};
27+
background-color:${theme('richEditor.iconActiveBg')};
28+
border-radius: 6px;
29+
}
30+
31+
.ce-conversion-toolbar, .ce-inline-toolbar {
32+
background-color:${theme('richEditor.toolbarBg')};
33+
border: 1px solid;
34+
border-color:${theme('richEditor.borderColor')};
35+
}
36+
37+
.ce-conversion-toolbar:before, .ce-inline-toolbar:before {
38+
border-top: 1px solid;
39+
border-right: 1px solid;
40+
border-top-color:${theme('richEditor.borderColor')};
41+
border-right-color:${theme('richEditor.borderColor')};
42+
43+
border-top-right-radius: 3px;
44+
width: 10px;
45+
height: 10px;
46+
background-color:${theme('richEditor.arrowBg')};
47+
border-radius: 100%;
48+
}
49+
50+
.ce-delimiter:before {
51+
border-bottom: 1px solid;
52+
border-bottom-color:${theme('richEditor.delimiter')};
53+
}
54+
1055
// tmp
1156
.link-tool__input {
1257
border: 1px solid #e6e3e3 !important;
@@ -63,16 +108,6 @@ const RichEditorStyle = createGlobalStyle`
63108
}
64109
}
65110
66-
.ce-delimiter:before {
67-
display: inline-block;
68-
content: " " !important;
69-
font-size: 15px;
70-
width: 150px;
71-
border-bottom: 1px solid;
72-
border-bottom-color: lightgrey;
73-
margin-top: 50px;
74-
margin-bottom: 50px;
75-
}
76111
77112
.cps-viewer {
78113
padding: 10px;

‎utils/themes/skins/cyan.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,15 @@ const cyan = {
232232
br:'#e8e8e8',
233233
},
234234
richEditor:{
235+
icon:'#898989',
236+
iconActive:'#32A198 !important',
237+
iconActiveBg:'#E8F4F4',
238+
239+
toolbarBg:'#fff',
240+
borderColor:'#c5d7d8',
241+
delimiter:'lightgrey',
242+
arrowBg:'#70b0b5',
243+
//
235244
title:primaryColor,
236245
fg:markdownFont,
237246
titleBottom:lighten(0.3,primaryColor),

‎yarn.lock‎

Lines changed: 70 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -987,7 +987,7 @@
987987
version "1.1.0"
988988
resolved "https://registry.npmjs.org/@editorjs/delimiter/-/delimiter-1.1.0.tgz#f61808ea92e4e289607d54441964f1cb8605410a"
989989

990-
"@editorjs/editorjs@^2.15.1":
990+
"@editorjs/editorjs@^2.12.4", "@editorjs/editorjs@^2.15.1":
991991
version "2.15.1"
992992
resolved "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.15.1.tgz#7e55640a46ca25f6992ad571a5c3302eb3f9b9e6"
993993
dependencies:
@@ -1059,12 +1059,16 @@
10591059
version "2.5.2"
10601060
resolved "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-2.5.2.tgz#4d00198b411688a2ee128a7df92ddb3b741779d6"
10611061

1062-
"@groupher/editor-code@^1.0.0":
1062+
"@groupher/editor-code@^1.0.0", "@groupher/editor-code@^1.0.17":
10631063
version "1.0.17"
10641064
resolved "https://registry.npmjs.org/@groupher/editor-code/-/editor-code-1.0.17.tgz#5915b571a854ac391678950a0cd9999345d9389c"
10651065
dependencies:
10661066
prismjs "^1.17.1"
10671067

1068+
"@groupher/editor-delimiter@1.1.4":
1069+
version "1.1.4"
1070+
resolved "https://registry.npm.taobao.org/@groupher/editor-delimiter/download/@groupher/editor-delimiter-1.1.4.tgz#b4c72b9f9c8da70f6fd479aa70740b25db2d0783"
1071+
10681072
"@groupher/editor-header@^2.3.0":
10691073
version "2.3.0"
10701074
resolved "https://registry.npmjs.org/@groupher/editor-header/-/editor-header-2.3.0.tgz#6dfc73c6dea000ccfa7a0979655d2480d0114a40"
@@ -1073,16 +1077,22 @@
10731077
version "1.0.6"
10741078
resolved "https://registry.npmjs.org/@groupher/editor-image/-/editor-image-1.0.6.tgz#4391f24194c96d0967451a945c75b854fbbaeba2"
10751079

1076-
"@groupher/editor-link@^2.1.3":
1080+
"@groupher/editor-link@^2.1.3", "@groupher/editor-link@^2.1.4":
10771081
version "2.1.4"
10781082
resolved "https://registry.npmjs.org/@groupher/editor-link/-/editor-link-2.1.4.tgz#79758ef5689a98a0aee903e5aca3a5189ace5b26"
10791083
dependencies:
10801084
"@babel/runtime""^7.3.1"
10811085

1082-
"@groupher/editor-quote@^2.3.0":
1086+
"@groupher/editor-quote@^2.3.0", "@groupher/editor-quote@^2.3.1":
10831087
version "2.3.1"
10841088
resolved "https://registry.npmjs.org/@groupher/editor-quote/-/editor-quote-2.3.1.tgz#bf64b0ae5293fc60ffa4b934da7380f6d1ece296"
10851089

1090+
"@groupher/editor@^2.15.2":
1091+
version "2.15.2"
1092+
resolved "https://registry.npm.taobao.org/@groupher/editor/download/@groupher/editor-2.15.2.tgz#c92887b44acd9003d599482b2866d0fe8a519565"
1093+
dependencies:
1094+
codex-notifier "^1.1.2"
1095+
10861096
"@groupher/eslint-config-web@1.1.1":
10871097
version "1.1.1"
10881098
resolved "https://registry.npmjs.org/@groupher/eslint-config-web/-/eslint-config-web-1.1.1.tgz#69372fedc3d68560546f1618f973483b3d0cd413"
@@ -1099,6 +1109,20 @@
10991109
eslint-plugin-react-hooks "^1.6.0"
11001110
prettier "^1.18.2"
11011111

1112+
"@groupher/react-editor@1.0.21":
1113+
version "1.0.21"
1114+
resolved "https://registry.npm.taobao.org/@groupher/react-editor/download/@groupher/react-editor-1.0.21.tgz#a644fba0a5fe5b878dea85c36ad5859ad9ae9a44"
1115+
dependencies:
1116+
"@editorjs/inline-code""^1.3.0"
1117+
"@groupher/editor""^2.15.2"
1118+
"@groupher/editor-code""^1.0.17"
1119+
"@groupher/editor-delimiter""1.1.4"
1120+
"@groupher/editor-header""^2.3.0"
1121+
"@groupher/editor-link""^2.1.4"
1122+
"@groupher/editor-quote""^2.3.1"
1123+
react "^16.8.6"
1124+
react-dom "^16.8.6"
1125+
11021126
"@hapi/address@2.x.x":
11031127
version "2.0.0"
11041128
resolved "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@@ -1289,6 +1313,14 @@
12891313
version "0.3.2"
12901314
resolved "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
12911315

1316+
"@stfy/react-editor.js@^1.0.3":
1317+
version "1.0.3"
1318+
resolved "https://registry.npm.taobao.org/@stfy/react-editor.js/download/@stfy/react-editor.js-1.0.3.tgz#1b004b88983771a796d181a5350eae237fd3aaee"
1319+
dependencies:
1320+
"@editorjs/editorjs""^2.12.4"
1321+
react "^16.8.6"
1322+
react-dom "^16.8.6"
1323+
12921324
"@tanem/svg-injector@^7.0.6":
12931325
version "7.0.17"
12941326
resolved "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-7.0.17.tgz#f7433ec5e1cbaa4ad4d2a3c13cfca7149a3a3b2d"
@@ -3087,7 +3119,7 @@ code-point-at@^1.0.0:
30873119

30883120
codex-notifier@^1.1.2:
30893121
version "1.1.2"
3090-
resolved "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz#a733079185f4c927fa296f1d71eb8753fe080895"
3122+
resolved "https://registry.npm.taobao.org/codex-notifier/download/codex-notifier-1.1.2.tgz#a733079185f4c927fa296f1d71eb8753fe080895"
30913123

30923124
collection-visit@^1.0.0:
30933125
version "1.0.0"
@@ -6959,7 +6991,7 @@ js-levenshtein@^1.1.3:
69596991

69606992
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
69616993
version "4.0.0"
6962-
resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
6994+
resolved "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
69636995

69646996
js-tokens@^3.0.2:
69656997
version "3.0.2"
@@ -7475,7 +7507,7 @@ longest@^2.0.1:
74757507

74767508
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
74777509
version "1.4.0"
7478-
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
7510+
resolved "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
74797511
dependencies:
74807512
js-tokens "^3.0.0 || ^4.0.0"
74817513

@@ -8328,7 +8360,7 @@ oauth-sign@~0.9.0:
83288360

83298361
object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
83308362
version "4.1.1"
8331-
resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
8363+
resolved "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
83328364

83338365
object-copy@^0.1.0:
83348366
version "0.1.0"
@@ -9104,7 +9136,7 @@ prop-types-exact@1.2.0, prop-types-exact@^1.2.0:
91049136

91059137
prop-types@15.7.2, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
91069138
version "15.7.2"
9107-
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
9139+
resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
91089140
dependencies:
91099141
loose-envify "^1.4.0"
91109142
object-assign "^4.1.1"
@@ -9680,6 +9712,15 @@ react-dom@16.9.0:
96809712
prop-types "^15.6.2"
96819713
scheduler "^0.15.0"
96829714

9715+
react-dom@^16.8.6:
9716+
version "16.10.2"
9717+
resolved "https://registry.npm.taobao.org/react-dom/download/react-dom-16.10.2.tgz?cache=0&sync_timestamp=1570138169163&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dom%2Fdownload%2Freact-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
9718+
dependencies:
9719+
loose-envify "^1.1.0"
9720+
object-assign "^4.1.1"
9721+
prop-types "^15.6.2"
9722+
scheduler "^0.16.2"
9723+
96839724
react-error-overlay@5.1.6:
96849725
version "5.1.6"
96859726
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
@@ -9730,10 +9771,14 @@ react-intl@3.0.0:
97309771
react "^16.3.0"
97319772
shallow-equal "^1.1.0"
97329773

9733-
react-is@16.8.6, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
9774+
react-is@16.8.6, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.4, react-is@^16.8.6:
97349775
version "16.8.6"
97359776
resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
97369777

9778+
react-is@^16.8.1:
9779+
version "16.10.2"
9780+
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.10.2.tgz?cache=0&sync_timestamp=1570137696201&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-is%2Fdownload%2Freact-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
9781+
97379782
react-is@^16.9.0:
97389783
version "16.9.0"
97399784
resolved "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@@ -9902,6 +9947,14 @@ react@^16.3.0:
99029947
prop-types "^15.6.2"
99039948
scheduler "^0.13.6"
99049949

9950+
react@^16.8.6:
9951+
version "16.10.2"
9952+
resolved "https://registry.npm.taobao.org/react/download/react-16.10.2.tgz?cache=0&sync_timestamp=1570138167819&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
9953+
dependencies:
9954+
loose-envify "^1.1.0"
9955+
object-assign "^4.1.1"
9956+
prop-types "^15.6.2"
9957+
99059958
read-pkg-up@^1.0.1:
99069959
version "1.0.1"
99079960
resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -10424,6 +10477,13 @@ scheduler@^0.15.0:
1042410477
loose-envify "^1.1.0"
1042510478
object-assign "^4.1.1"
1042610479

10480+
scheduler@^0.16.2:
10481+
version "0.16.2"
10482+
resolved "https://registry.npm.taobao.org/scheduler/download/scheduler-0.16.2.tgz?cache=0&sync_timestamp=1570138179212&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fscheduler%2Fdownload%2Fscheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"
10483+
dependencies:
10484+
loose-envify "^1.1.0"
10485+
object-assign "^4.1.1"
10486+
1042710487
schema-utils@^1.0.0:
1042810488
version "1.0.0"
1042910489
resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

0 commit comments

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