feat(playground): use real code sample (#4770)

* feat(playground): double click to insert example

* fix: correct condition

* feat: real code sample

* fix: remove unnecessary updateValue

* feat: auto-select on focus

website/playground/Playground.js

@@ -42,17 +42,17 @@ class Playground extends React.Component {
   constructor(props) {
     super();
 
-    const { content, options } = urlHash.read();
+    const original = urlHash.read();
 
     const defaultOptions = util.getDefaults(
       props.availableOptions,
       ENABLED_OPTIONS
     );
 
-    this.state = {
-      content: content || "",
-      options: Object.assign(defaultOptions, options)
-    };
+    const options = Object.assign(defaultOptions, original.options);
+    const content = original.content || getCodeSample(options.parser);
+
+    this.state = { content, options };
 
     this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
 
@@ -82,12 +82,20 @@ class Playground extends React.Component {
   handleOptionValueChange(option, value) {
     this.setState(state => {
       const options = Object.assign({}, state.options);
+
       if (option.type === "int" && isNaN(value)) {
         delete options[option.name];
       } else {
         options[option.name] = value;
       }
-      return { options };
+
+      const content =
+        state.content === "" ||
+        state.content === getCodeSample(state.options.parser)
+          ? getCodeSample(options.parser)
+          : state.content;
+
+      return { options, content };
     });
   }
 
@@ -96,7 +104,7 @@ class Playground extends React.Component {
     const { availableOptions, version } = this.props;
 
     return formatMarkdown(
-      content || getCodeSample(options.parser),
+      content,
       formatted,
       reformatted || "",
       version,
@@ -116,7 +124,7 @@ class Playground extends React.Component {
         {editorState => (
           <PrettierFormat
             worker={worker}
-            code={content || getCodeSample(options.parser)}
+            code={content}
             options={options}
             debugAst={editorState.showAst}
             debugDoc={editorState.showDoc}
@@ -177,7 +185,7 @@ class Playground extends React.Component {
                       mode={util.getCodemirrorMode(options.parser)}
                       ruler={options.printWidth}
                       value={content}
-                      placeholder={getCodeSample(options.parser)}
+                      codeSample={getCodeSample(options.parser)}
                       overlayStart={options.rangeStart}
                       overlayEnd={options.rangeEnd}
                       onChange={this.setContent}

website/playground/panels.js

@@ -9,6 +9,7 @@ class CodeMirrorPanel extends React.Component {
     this._cached = "";
     this._overlay = null;
     this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
   }
 
   componentDidMount() {
@@ -25,6 +26,7 @@ class CodeMirrorPanel extends React.Component {
       options
     );
     this._codeMirror.on("change", this.handleChange);
+    this._codeMirror.on("focus", this.handleFocus);
 
     this.updateValue(this.props.value || "");
     this.updateOverlay();
@@ -35,7 +37,7 @@ class CodeMirrorPanel extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.readOnly && this.props.value !== this._cached) {
+    if (this.props.value !== this._cached) {
       this.updateValue(this.props.value);
     }
     if (
@@ -47,9 +49,6 @@ class CodeMirrorPanel extends React.Component {
     if (this.props.mode !== prevProps.mode) {
       this._codeMirror.setOption("mode", this.props.mode);
     }
-    if (this.props.placeholder !== prevProps.placeholder) {
-      this._codeMirror.setOption("placeholder", this.props.placeholder);
-    }
     if (this.props.ruler !== prevProps.ruler) {
       this._codeMirror.setOption("rulers", [makeRuler(this.props)]);
     }
@@ -74,6 +73,12 @@ class CodeMirrorPanel extends React.Component {
     }
   }
 
+  handleFocus(/* codeMirror, event */) {
+    if (this._codeMirror.getValue() === this.props.codeSample) {
+      this._codeMirror.execCommand("selectAll");
+    }
+  }
+
   handleChange(doc, change) {
     if (change.origin !== "setValue") {
       this._cached = doc.getValue();
@@ -150,7 +155,7 @@ export function InputPanel(props) {
       autoCloseBrackets={true}
       matchBrackets={true}
       showCursorWhenSelecting={true}
-      tabWidth={2}
+      tabSize={4}
       rulerColor="#eeeeee"
       {...props}
     />

website/static/separate-css/playground.css

@@ -141,10 +141,6 @@ header h1 {
   line-height: 1.6;
 }
 
-pre.CodeMirror-placeholder {
-  color: #888888;
-}
-
 .bottom-bar {
   position: relative;
 }

website/static/service-worker.js

@@ -28,7 +28,6 @@ toolbox.precache([
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/jsx/jsx.js",
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.js",
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/markdown/markdown.js",
-  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/placeholder.js",
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/rulers.js",
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/search/searchcursor.js",
   "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/edit/matchbrackets.js",