Integrating experiments on playground

Summary: Integrating experiments on playground - Allowing playground to load experiments Closes #1687 Differential Revision: D7259337 fbshipit-source-id: 2200c55d31f4fc8a52c2ecb72b26365cc70034f6
facebookarchive · Mar 13, 2018 · b6ae887 · b6ae887
1 parent 28cb4a3
commit b6ae887
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 11 deletions.
diff --git a/examples/draft-0-10-0/playground/src/App.css b/examples/draft-0-10-0/playground/src/App.css
@@ -19,6 +19,7 @@
 }
 
 .playground-main select {
+  width: 100px;
   background: #843131;
 }
 
@@ -102,6 +103,21 @@
   color: #C15757;
 }
 
+.nav-main .nav-experiment-selector option,
+.nav-main .nav-experiment-selector {
+  background: transparent;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  text-align-last: right;
+}
+
+.nav-main .nav-experiment-selector option {
+  color: #000;
+  padding: 10px 0px;
+}
+
 .nav-home img {
   vertical-align: -17px;
   margin-right: 4px;
@@ -140,3 +156,14 @@
   /** sad :( but seems to not be a way to overwrite that by configuration */
   background: var(--main-background) !important;
 }
+
+.RichEditor-editor {
+  padding: 10px 20px;
+}
+
+/**
+ * basic style for handling nested lists
+ */
+.RichEditor-editor li[data-block] li[data-block] {
+  margin-left: 20px;
+}
diff --git a/examples/draft-0-10-0/playground/src/App.js b/examples/draft-0-10-0/playground/src/App.js
@@ -17,15 +17,21 @@ import DraftJsRichEditorExample from './DraftJsRichEditorExample';
 import JSONTree from 'react-json-tree';
 import {convertToHTML} from 'draft-convert';
 import PanelGroup from 'react-panelgroup';
+import gkx from 'draft-js/lib/gkx';
+import convertFromHTMLModern from 'draft-js/lib/convertFromHTMLToContentBlocks2';
 
 import {
   ContentState,
   EditorState,
-  convertFromHTML,
+  convertFromHTML as convertFromHTMLClassic,
   convertToRaw,
   convertFromRaw,
 } from 'draft-js';
 
+const fromHTML = gkx('draft_refactored_html_importer')
+  ? convertFromHTMLModern
+  : convertFromHTMLClassic;
+
 const theme = {
   scheme: 'monokai',
   author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -58,9 +64,18 @@ const baseRawContent = {
   entityMap: {},
 };
 
-const baseHtmlContent = `
-<h1>heading inside blockquote</h1>
-<p>paragraph inside blockquote</p>
+const baseHtmlContent = `<ol>
+  <li>one</li>
+  <li>
+    <ul>
+      <li>
+        <h1>2a</h1>
+      </li>
+      <li>2b</li>
+    </ul>
+   </li>
+   <li>three</li>
+</ol>
 `;
 
 const BASE_CONTENT = {
@@ -108,7 +123,7 @@ class DraftJsPlaygroundContainer extends Component {
   };
 
   _setHTMLContent(html) {
-    const parsedHtml = convertFromHTML(html);
+    const parsedHtml = fromHTML(html);
 
     if (!parsedHtml) {
       return;
@@ -145,10 +160,13 @@ class DraftJsPlaygroundContainer extends Component {
   };
 
   onSelectChange = ({target: {value: mode}}) => {
-    this.setState({mode});
+    this.setState({
+      mode,
+      codeMirrorValue: BASE_CONTENT[mode],
+    });
   };
 
-  updateCodeMirror = (editor, data, codeMirrorValue) => {
+  updateCodeMirror = codeMirrorValue => {
     this.setState({codeMirrorValue});
   };
 
@@ -158,6 +176,12 @@ class DraftJsPlaygroundContainer extends Component {
     );
   };
 
+  onExperimentChange = ({target: {value: experimentFlags}}) => {
+    if (experimentFlags) {
+      window.location.search = `gk_enable=${experimentFlags}`;
+    }
+  };
+
   render() {
     const {editorState, mode, codeMirrorValue} = this.state;
 
@@ -173,6 +197,20 @@ class DraftJsPlaygroundContainer extends Component {
               Draft.js
             </a>
             <ul className="nav-site">
+              <li>
+                <select
+                  className="nav-experiment-selector"
+                  name="experiment"
+                  onChange={this.onExperimentChange}>
+                  <option value="">Try an experiment..</option>
+                  <option value="draft_refactored_html_importer">
+                    Modern HTML importer
+                  </option>
+                  <option value="draft_tree_data_support,draft_refactored_html_importer">
+                    Tree data structure
+                  </option>
+                </select>
+              </li>
               <li>
                 <a
                   target="_blank"
@@ -228,7 +266,9 @@ class DraftJsPlaygroundContainer extends Component {
                   </section>
                 </div>
                 <CodeMirror
-                  onBeforeChange={this.updateCodeMirror}
+                  onBeforeChange={(editor, data, codeMirrorValue) =>
+                    this.updateCodeMirror(codeMirrorValue)
+                  }
                   ref={input => {
                     this.markupinput = input;
                   }}

diff --git a/examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.js b/examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.js
@@ -5,7 +5,6 @@
  * @flow
  * @format
  */
-'use strict';
 
 import React, {Component} from 'react';
 

diff --git a/src/stubs/DraftEditorContents.react.js b/src/stubs/DraftEditorContents.react.js
@@ -13,6 +13,10 @@
 
 'use strict';
 
-const DraftEditorContents = require('DraftEditorContents-core.react');
+const gkx = require('gkx');
 
-module.exports = DraftEditorContents;
+const experimentalTreeDataSupport = gkx('draft_tree_data_support');
+
+module.exports = experimentalTreeDataSupport
+  ? require('DraftEditorContentsExperimental.react')
+  : require('DraftEditorContents-core.react');