Update deps for and cleanup playground example (#2368)

Summary:
**Summary**

The "playground" example needed some work: there were unused files, the link to the docs was out of date, the dependencies were out of date, and there were some CSS improvements to make panel resizing better. I apply said improvements in this change.

**Test Plan**

`yarn && yarn start` + play with the example.
Pull Request resolved: #2368

Reviewed By: claudiopro

Differential Revision: D20680357

Pulled By: mrkev

fbshipit-source-id: 305271e7bb6d4fa0f7cb1135827256fc2fafdcb0

examples/draft-0-10-0/playground/package.json

@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "codemirror": "^5.32.0",
-    "draft-convert": "^2.0.1",
+    "codemirror": "^5.52.2",
+    "draft-convert": "^2.1.8",
     "draft-js": "file:../../..",
     "immutable": "^3.8.2",
-    "react": "^16.2.0",
-    "react-app-polyfill": "^1.0.4",
-    "react-codemirror2": "^3.0.7",
-    "react-dom": "^16.2.0",
-    "react-json-tree": "^0.11.0",
-    "react-panelgroup": "^1.0.5",
-    "react-scripts": "3.2.0"
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-codemirror2": "^7.1.0",
+    "react-dom": "^16.13.1",
+    "react-json-tree": "^0.11.2",
+    "react-panelgroup": "^1.0.10",
+    "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

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

@@ -171,10 +171,6 @@
   background: var(--main-background) !important;
 }
 
-.RichEditor-editor {
-  padding: 10px 20px;
-}
-
 /**
  * basic style for handling nested lists
  */

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

@@ -15,7 +15,7 @@
  * @format
  */
 
-import React, {Component} from 'react';
+import React from 'react';
 import './DraftJsPlaygroundContainer.css';
 import {Controlled as CodeMirror} from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
@@ -92,7 +92,7 @@ const BASE_CONTENT = {
   html: baseHtmlContent,
 };
 
-class DraftJsPlaygroundContainer extends Component {
+class DraftJsPlaygroundContainer extends React.Component {
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -133,13 +133,11 @@ class DraftJsPlaygroundContainer extends Component {
 
   _setHTMLContent(html) {
     const parsedHtml = fromHTML(html);
-
     if (!parsedHtml) {
       return;
     }
 
     const {contentBlocks, entityMap} = parsedHtml;
-
     if (!contentBlocks) {
       return;
     }
@@ -160,7 +158,6 @@ class DraftJsPlaygroundContainer extends Component {
 
   setContent = () => {
     const {mode, codeMirrorValue} = this.state;
-
     if (mode === 'html') {
       this._setHTMLContent(codeMirrorValue);
     } else {
@@ -224,7 +221,7 @@ class DraftJsPlaygroundContainer extends Component {
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  href="https://draftjs.org/docs/overview.html#content">
+                  href="https://draftjs.org/docs/getting-started">
                   Docs
                 </a>
               </li>

examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.css

@@ -15,7 +15,6 @@
 .DraftJsPlaygroundContainer-editor {
   padding: 0;
   background: #fff;
-  padding-top: 30px;
   height: auto;
 }
 
@@ -29,7 +28,6 @@
 .RichEditor-editor {
   cursor: text;
   font-size: 16px;
-  margin-top: 10px;
 }
 
 .RichEditor-editor .public-DraftEditorPlaceholder-root,
@@ -63,9 +61,6 @@
 }
 
 .RichEditor-controls-container {
-  position: fixed;
-  top: 50px;
-  padding: 20px 0 0;
   border-bottom: 1px solid #ccc;
   background: #fff;
   z-index: 10;