fix: Deleting all code in the JS Console editor fills in the default code (#2558)

Author: devbymak

src/components/CodeEditor/CodeEditor.example.js

@@ -13,6 +13,6 @@ export const component = CodeEditor;
 export const demos = [
   {
     name: 'Simple code editor (only JS support)',
-    render: () => <CodeEditor placeHolder={'//I am editable, try change me!'} id="example1" />,
+    render: () => <CodeEditor defaultValue={'//I am editable, try change me!'} id="example1" />,
   },
 ];

src/components/CodeEditor/CodeEditor.react.js

@@ -18,19 +18,21 @@ export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { code: '' };
+    this.state = {
+      code: this.props.defaultValue || '',
+    };
   }
 
   get value() {
-    return this.state.code || this.props.placeHolder;
+    return this.state.code;
   }
 
   set value(code) {
     this.setState({ code });
   }
 
   render() {
-    const { placeHolder, fontSize = 18 } = this.props;
+    const { fontSize = 18 } = this.props;
     const { code } = this.state;
 
     return (
@@ -43,7 +45,7 @@ export default class CodeEditor extends React.Component {
         showGutter={true}
         highlightActiveLine={true}
         width="100%"
-        value={code || placeHolder}
+        value={code}
         enableBasicAutocompletion={true}
         enableLiveAutocompletion={true}
         enableSnippets={false}
@@ -56,5 +58,5 @@ export default class CodeEditor extends React.Component {
 
 CodeEditor.propTypes = {
   fontSize: PropTypes.number.describe('Font size of the editor'),
-  placeHolder: PropTypes.string.describe('Code place holder'),
+  defaultValue: PropTypes.string.describe('Default Code'),
 };

src/dashboard/Data/Playground/Playground.react.js

@@ -10,6 +10,11 @@ import { CurrentApp } from 'context/currentApp';
 
 import styles from './Playground.scss';
 
+const DEFAULT_CODE_EDITOR_VALUE = `const myObj = new Parse.Object('MyClass');
+myObj.set('myField', 'Hello World!')
+await myObj.save();
+console.log(myObj);`;
+
 export default class Playground extends Component {
   static contextType = CurrentApp;
   constructor() {
@@ -141,10 +146,7 @@ export default class Playground extends Component {
         <Toolbar section={this.section} subsection={this.subsection} />
         <div style={{ minHeight: '25vh' }}>
           <CodeEditor
-            placeHolder={`const myObj = new Parse.Object('MyClass');
-myObj.set('myField', 'Hello World!')
-await myObj.save();
-console.log(myObj);`}
+            defaultValue={DEFAULT_CODE_EDITOR_VALUE}
             ref={editor => (this.editor = editor)}
           />
           <div className={styles['console-ctn']}>