Skip to content
This repository was archived by the owner on Feb 6, 2023. It is now read-only.

Commit 227d125

Browse files
mitermayerfacebook-github-bot
mitermayer
authored and
facebook-github-bot
committed
Adding Rich Editor to the playground
Summary: This PR brings Rich editor to the playground - Integrated Rich Editor on the playground - Adding some basic styling ![draft-playground](https://user-images.githubusercontent.com/1042131/37007830-28ccc696-2094-11e8-8ee8-23ba18f333c5.png) Closes #1680 Differential Revision: D7174440 fbshipit-source-id: 5e0a76200c5499f45602b6b70157ad2f74b34950
1 parent 73e5a9c commit 227d125

File tree

6 files changed

+514
-65
lines changed

6 files changed

+514
-65
lines changed

‎examples/draft-0-10-0/playground/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Draft.js - Playground</title>
2323
</head>
2424
<body>
2525
<noscript>

‎examples/draft-0-10-0/playground/public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Draft.js Playground",
3+
"name": "Draft.js Playground example",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎examples/draft-0-10-0/playground/src/App.css

+129-15
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,142 @@
1+
:root {
2+
--nav-main-height: 50px;
3+
--main-background: #f7f7f7;
4+
}
5+
16
.App {
27
text-align: center;
38
}
49

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
10+
.playground-main select,
11+
.playground-main button {
12+
color: #fff;
13+
font-size: 12px;
14+
font-weight: bold;
15+
border: none;
16+
padding: 0px 10px;
17+
height: 24px;
18+
border-radius: 4px;
19+
}
20+
21+
.playground-main select {
22+
background: #843131;
23+
}
24+
25+
.playground-main button {
26+
background: #3B3738;
27+
margin-left: 10px;
28+
}
29+
30+
.playground-main button:hover {
31+
background: #843131;
32+
}
33+
34+
.playground-main select:hover,
35+
.playground-main button:hover {
36+
cursor: pointer;
37+
}
38+
39+
.nav-main {
40+
*zoom: 1;
41+
background: #3B3738;
42+
color: #fafafa;
43+
position: fixed;
44+
top: 0;
45+
height: var(--nav-main-height);
46+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
47+
width: 100%;
48+
z-index: 100;
49+
padding: 0 15px;
50+
}
51+
52+
.nav-main:before, .nav-main:after {
53+
content: " ";
54+
display: table;
55+
}
56+
57+
.nav-main:after {
58+
clear: both;
59+
}
60+
61+
.nav-main a {
62+
color: #e9e9e9;
63+
text-decoration: none;
64+
}
65+
66+
.nav-main .nav-site {
67+
float: right;
68+
margin: 0 20px 0 0;
69+
}
70+
71+
.nav-main .nav-site li {
72+
margin: 0;
73+
}
74+
75+
.nav-main .nav-site a {
76+
padding: 0 8px;
77+
text-transform: uppercase;
78+
letter-spacing: 1px;
79+
line-height: 50px;
80+
display: inline-block;
81+
height: 50px;
82+
color: #aaa;
83+
}
84+
85+
.nav-main .nav-site a:hover {
86+
color: #fafafa;
87+
}
88+
89+
.nav-main .nav-site a.active {
90+
color: #fafafa;
91+
border-bottom: 3px solid #C15757;
92+
background: #333;
93+
}
94+
95+
.nav-main .nav-home {
96+
color: #fafafa;
97+
font-size: 24px;
98+
line-height: 50px;
99+
}
100+
101+
.nav-home a {
102+
color: #C15757;
103+
}
104+
105+
.nav-home img {
106+
vertical-align: -17px;
107+
margin-right: 4px;
108+
width: 50px;
109+
height: 50px;
110+
}
111+
112+
.nav-main ul {
113+
display: inline;
114+
}
115+
116+
.nav-main li {
117+
display: inline;
8118
}
9119

10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
120+
.playground-main {
121+
background: var(--main-background);
122+
margin-top: var(--nav-main-height);
123+
display: flex;
124+
height: calc(100vh - var(--nav-main-height));
125+
display: flex;
15126
}
16127

17-
.App-title {
18-
font-size: 1.5em;
128+
.playground-raw-preview {
129+
padding: 10px 20px;
19130
}
20131

21-
.App-intro {
22-
font-size: large;
132+
/**
133+
* Third-party style overwrites
134+
*/
135+
.panelWrapper {
136+
overflow-y: auto !important;
23137
}
24138

25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
139+
.playground-raw-preview ul {
140+
/** sad :( but seems to not be a way to overwrite that by configuration */
141+
background: var(--main-background) !important;
28142
}

‎examples/draft-0-10-0/playground/src/App.js

+93-47
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,20 @@ import {Controlled as CodeMirror} from 'react-codemirror2';
1212
import 'codemirror/lib/codemirror.css';
1313
import 'codemirror/mode/javascript/javascript';
1414
import 'draft-js/dist/Draft.css';
15+
import './App.css';
16+
import DraftJsRichEditorExample from './DraftJsRichEditorExample';
1517
import JSONTree from 'react-json-tree';
1618
import {convertToHTML} from 'draft-convert';
1719
import PanelGroup from 'react-panelgroup';
1820

1921
import {
2022
ContentState,
21-
Editor,
2223
EditorState,
2324
convertFromHTML,
2425
convertToRaw,
2526
convertFromRaw,
2627
} from 'draft-js';
2728

28-
// const SomeCodeMirror = require('SomeCodeMirror.react');
29-
// const SomeButton = require('SomeButton.react');
30-
// const SomeSelector = require('SomeSelector.react');
31-
// const SomeSelectorOption = require('SomeSelectorOption.react');
32-
3329
const theme = {
3430
scheme: 'monokai',
3531
author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -56,6 +52,7 @@ const baseRawContent = {
5652
{
5753
key: 'A',
5854
text: 'Hello world',
55+
type: 'header-one',
5956
},
6057
],
6158
entityMap: {},
@@ -165,48 +162,97 @@ class DraftJsPlaygroundContainer extends Component {
165162
const {editorState, mode, codeMirrorValue} = this.state;
166163

167164
return (
168-
<PanelGroup borderColor="grey">
169-
<PanelGroup direction="column" borderColor="grey">
170-
<div className="DraftJsPlaygroundContainer-raw">
171-
<div className={'DraftJsPlaygroundContainer-controls'}>
172-
<select onChange={this.onSelectChange} value={mode}>
173-
<option value="rawContent">Raw Content</option>
174-
<option value="html">HTML</option>
175-
</select>
176-
<button onClick={this.setContent}>Update draft content</button>
177-
<button onClick={this.importEditorState}>
178-
Import draft content
179-
</button>
180-
</div>
181-
<CodeMirror
182-
onBeforeChange={this.updateCodeMirror}
183-
ref={input => {
184-
this.markupinput = input;
185-
}}
186-
options={{
187-
mode: 'application/ld+json',
188-
matchBrackets: true,
189-
lineWrapping: true,
190-
autoCloseBrackets: true,
191-
}}
192-
value={codeMirrorValue}
193-
/>
165+
<div className="container">
166+
<div className="nav-main">
167+
<div className="wrap">
168+
<a
169+
className="nav-home"
170+
target="_blank"
171+
rel="noopener noreferrer"
172+
href="https://draftjs.org/">
173+
Draft.js
174+
</a>
175+
<ul className="nav-site">
176+
<li>
177+
<a
178+
target="_blank"
179+
rel="noopener noreferrer"
180+
href="https://draftjs.org/docs/overview.html#content">
181+
Docs
182+
</a>
183+
</li>
184+
<li>
185+
<a
186+
target="_blank"
187+
rel="noopener noreferrer"
188+
href="https://github.com/facebook/draft-js">
189+
GitHub
190+
</a>
191+
</li>
192+
</ul>
194193
</div>
195-
<div className={'DraftJsPlaygroundContainer-editor'}>
196-
<Editor
197-
className={'DraftEditor-root'}
198-
editorState={editorState}
199-
onChange={this.onChange}
200-
placeholder="Editor content is empty..."
201-
/>
202-
</div>
203-
</PanelGroup>
204-
<JSONTree
205-
shouldExpandNode={this.shouldExpandNode}
206-
theme={theme}
207-
data={editorState.getCurrentContent()}
208-
/>
209-
</PanelGroup>
194+
</div>
195+
<div className="playground-main">
196+
<PanelGroup borderColor="grey">
197+
<PanelGroup direction="column" borderColor="grey">
198+
<div className="DraftJsPlaygroundContainer-editor">
199+
<DraftJsRichEditorExample
200+
className="DraftEditor-root"
201+
editorState={editorState}
202+
onChange={this.onChange}
203+
placeholder="Editor content is empty..."
204+
/>
205+
</div>
206+
<div className="DraftJsPlaygroundContainer-raw">
207+
<div className="DraftJsPlaygroundContainer-controls">
208+
<section className="contentControls">
209+
<select
210+
title="Draft.js content type switch"
211+
onChange={this.onSelectChange}
212+
value={mode}>
213+
<option value="rawContent">Raw</option>
214+
<option value="html">HTML</option>
215+
</select>
216+
</section>
217+
<section className="contentControls">
218+
<button
219+
title="Import content type from the editor"
220+
onClick={this.importEditorState}>
221+
Import
222+
</button>
223+
<button
224+
title="Update the editor with content type"
225+
onClick={this.setContent}>
226+
Update
227+
</button>
228+
</section>
229+
</div>
230+
<CodeMirror
231+
onBeforeChange={this.updateCodeMirror}
232+
ref={input => {
233+
this.markupinput = input;
234+
}}
235+
options={{
236+
mode: 'application/ld+json',
237+
matchBrackets: true,
238+
lineNumbers: true,
239+
lineWrapping: true,
240+
autoCloseBrackets: true,
241+
}}
242+
value={codeMirrorValue}
243+
/>
244+
</div>
245+
</PanelGroup>
246+
<div className="playground-raw-preview">
247+
<JSONTree
248+
shouldExpandNode={this.shouldExpandNode}
249+
theme={theme}
250+
data={editorState.getCurrentContent()}
251+
/>
252+
</div>
253+
</PanelGroup>
254+
</div>
255+
</div>
210256
);
211257
}
212258
}

0 commit comments

Comments
 (0)