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
facebookarchive · Mar 7, 2018 · 227d125 · 227d125
1 parent 73e5a9c
commit 227d125
Show file tree

Hide file tree

Showing 6 changed files with 514 additions and 65 deletions.
diff --git a/examples/draft-0-10-0/playground/public/index.html b/examples/draft-0-10-0/playground/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Draft.js - Playground</title>
   </head>
   <body>
     <noscript>

diff --git a/examples/draft-0-10-0/playground/public/manifest.json b/examples/draft-0-10-0/playground/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Draft.js Playground",
+  "name": "Draft.js Playground example",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/examples/draft-0-10-0/playground/src/App.css b/examples/draft-0-10-0/playground/src/App.css
@@ -1,28 +1,142 @@
+:root {
+  --nav-main-height: 50px;
+  --main-background: #f7f7f7;
+}
+
 .App {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.playground-main select,
+.playground-main button {
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  border: none;
+  padding: 0px 10px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+.playground-main select {
+  background: #843131;
+}
+
+.playground-main button {
+  background: #3B3738;
+  margin-left: 10px;
+}
+
+.playground-main button:hover {
+  background: #843131;
+}
+
+.playground-main select:hover,
+.playground-main button:hover {
+  cursor: pointer;
+}
+
+.nav-main {
+  *zoom: 1;
+  background: #3B3738;
+  color: #fafafa;
+  position: fixed;
+  top: 0;
+  height: var(--nav-main-height);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  z-index: 100;
+  padding: 0 15px;
+}
+
+.nav-main:before, .nav-main:after {
+  content: " ";
+  display: table;
+}
+
+.nav-main:after {
+  clear: both;
+}
+
+.nav-main a {
+  color: #e9e9e9;
+  text-decoration: none;
+}
+
+.nav-main .nav-site {
+  float: right;
+  margin: 0 20px 0 0;
+}
+
+.nav-main .nav-site li {
+  margin: 0;
+}
+
+.nav-main .nav-site a {
+  padding: 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  line-height: 50px;
+  display: inline-block;
+  height: 50px;
+  color: #aaa;
+}
+
+.nav-main .nav-site a:hover {
+  color: #fafafa;
+}
+
+.nav-main .nav-site a.active {
+  color: #fafafa;
+  border-bottom: 3px solid #C15757;
+  background: #333;
+}
+
+.nav-main .nav-home {
+  color: #fafafa;
+  font-size: 24px;
+  line-height: 50px;
+}
+
+.nav-home a {
+  color: #C15757;
+}
+
+.nav-home img {
+  vertical-align: -17px;
+  margin-right: 4px;
+  width: 50px;
+  height: 50px;
+}
+
+.nav-main ul {
+  display: inline;
+}
+
+.nav-main li {
+  display: inline;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.playground-main {
+  background: var(--main-background);
+  margin-top: var(--nav-main-height);
+  display: flex;
+  height: calc(100vh - var(--nav-main-height));
+  display: flex;
 }
 
-.App-title {
-  font-size: 1.5em;
+.playground-raw-preview {
+  padding: 10px 20px;
 }
 
-.App-intro {
-  font-size: large;
+/**
+ * Third-party style overwrites
+ */
+.panelWrapper {
+  overflow-y: auto !important;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.playground-raw-preview ul {
+  /** sad :( but seems to not be a way to overwrite that by configuration */
+  background: var(--main-background) !important;
 }
diff --git a/examples/draft-0-10-0/playground/src/App.js b/examples/draft-0-10-0/playground/src/App.js
@@ -12,24 +12,20 @@ import {Controlled as CodeMirror} from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/javascript/javascript';
 import 'draft-js/dist/Draft.css';
+import './App.css';
+import DraftJsRichEditorExample from './DraftJsRichEditorExample';
 import JSONTree from 'react-json-tree';
 import {convertToHTML} from 'draft-convert';
 import PanelGroup from 'react-panelgroup';
 
 import {
   ContentState,
-  Editor,
   EditorState,
   convertFromHTML,
   convertToRaw,
   convertFromRaw,
 } from 'draft-js';
 
-// const SomeCodeMirror = require('SomeCodeMirror.react');
-// const SomeButton = require('SomeButton.react');
-// const SomeSelector = require('SomeSelector.react');
-// const SomeSelectorOption = require('SomeSelectorOption.react');
-
 const theme = {
   scheme: 'monokai',
   author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -56,6 +52,7 @@ const baseRawContent = {
     {
       key: 'A',
       text: 'Hello world',
+      type: 'header-one',
     },
   ],
   entityMap: {},
@@ -165,48 +162,97 @@ class DraftJsPlaygroundContainer extends Component {
     const {editorState, mode, codeMirrorValue} = this.state;
 
     return (
-      <PanelGroup borderColor="grey">
-        <PanelGroup direction="column" borderColor="grey">
-          <div className="DraftJsPlaygroundContainer-raw">
-            <div className={'DraftJsPlaygroundContainer-controls'}>
-              <select onChange={this.onSelectChange} value={mode}>
-                <option value="rawContent">Raw Content</option>
-                <option value="html">HTML</option>
-              </select>
-              <button onClick={this.setContent}>Update draft content</button>
-              <button onClick={this.importEditorState}>
-                Import draft content
-              </button>
-            </div>
-            <CodeMirror
-              onBeforeChange={this.updateCodeMirror}
-              ref={input => {
-                this.markupinput = input;
-              }}
-              options={{
-                mode: 'application/ld+json',
-                matchBrackets: true,
-                lineWrapping: true,
-                autoCloseBrackets: true,
-              }}
-              value={codeMirrorValue}
-            />
+      <div className="container">
+        <div className="nav-main">
+          <div className="wrap">
+            <a
+              className="nav-home"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://draftjs.org/">
+              Draft.js
+            </a>
+            <ul className="nav-site">
+              <li>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://draftjs.org/docs/overview.html#content">
+                  Docs
+                </a>
+              </li>
+              <li>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://github.com/facebook/draft-js">
+                  GitHub
+                </a>
+              </li>
+            </ul>
           </div>
-          <div className={'DraftJsPlaygroundContainer-editor'}>
-            <Editor
-              className={'DraftEditor-root'}
-              editorState={editorState}
-              onChange={this.onChange}
-              placeholder="Editor content is empty..."
-            />
-          </div>
-        </PanelGroup>
-        <JSONTree
-          shouldExpandNode={this.shouldExpandNode}
-          theme={theme}
-          data={editorState.getCurrentContent()}
-        />
-      </PanelGroup>
+        </div>
+        <div className="playground-main">
+          <PanelGroup borderColor="grey">
+            <PanelGroup direction="column" borderColor="grey">
+              <div className="DraftJsPlaygroundContainer-editor">
+                <DraftJsRichEditorExample
+                  className="DraftEditor-root"
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  placeholder="Editor content is empty..."
+                />
+              </div>
+              <div className="DraftJsPlaygroundContainer-raw">
+                <div className="DraftJsPlaygroundContainer-controls">
+                  <section className="contentControls">
+                    <select
+                      title="Draft.js content type switch"
+                      onChange={this.onSelectChange}
+                      value={mode}>
+                      <option value="rawContent">Raw</option>
+                      <option value="html">HTML</option>
+                    </select>
+                  </section>
+                  <section className="contentControls">
+                    <button
+                      title="Import content type from the editor"
+                      onClick={this.importEditorState}>
+                      Import
+                    </button>
+                    <button
+                      title="Update the editor with content type"
+                      onClick={this.setContent}>
+                      Update
+                    </button>
+                  </section>
+                </div>
+                <CodeMirror
+                  onBeforeChange={this.updateCodeMirror}
+                  ref={input => {
+                    this.markupinput = input;
+                  }}
+                  options={{
+                    mode: 'application/ld+json',
+                    matchBrackets: true,
+                    lineNumbers: true,
+                    lineWrapping: true,
+                    autoCloseBrackets: true,
+                  }}
+                  value={codeMirrorValue}
+                />
+              </div>
+            </PanelGroup>
+            <div className="playground-raw-preview">
+              <JSONTree
+                shouldExpandNode={this.shouldExpandNode}
+                theme={theme}
+                data={editorState.getCurrentContent()}
+              />
+            </div>
+          </PanelGroup>
+        </div>
+      </div>
     );
   }
 }