allow editing in embeds

components/Carbon.js

@@ -45,7 +45,11 @@ class Carbon extends React.PureComponent {
     }
   )
 
-  onBeforeChange = (editor, meta, code) => this.props.updateCode(code)
+  onBeforeChange = (editor, meta, code) => {
+    if (!this.props.readOnly) {
+      this.props.updateCode(code)
+    }
+  }
 
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }

lib/routing.js

@@ -31,7 +31,8 @@ const mappings = [
   { field: 'es:exportSize' },
   { field: 'wm:watermark', type: 'bool' },
   { field: 'ts:timestamp', type: 'bool' },
-  { field: 'copy', type: 'bool' }
+  { field: 'copy', type: 'bool' },
+  { field: 'readonly', type: 'bool' }
 ]
 
 const reverseMappings = mappings.map(mapping =>

pages/embed.js

@@ -43,7 +43,8 @@ class Embed extends React.Component {
   state = {
     ...DEFAULT_SETTINGS,
     code: DEFAULT_CODE,
-    mounted: false
+    mounted: false,
+    readOnly: true
   }
 
   componentDidMount() {
@@ -52,14 +53,26 @@ class Embed extends React.Component {
     const queryParams = getQueryStringState(query)
     const initialState = Object.keys(queryParams).length ? queryParams : {}
 
-    this.setState({ ...initialState, copyable: queryParams.copy !== false, mounted: true })
+    this.setState({
+      ...initialState,
+      copyable: queryParams.copy !== false,
+      readOnly: queryParams.readonly !== false,
+      mounted: true
+    })
   }
 
+  updateCode = code => this.setState({ code })
+
   render() {
     return (
       <Page theme={this.state.theme}>
         {this.state.mounted && (
-          <Carbon readOnly={true} config={this.state} copyable={this.state.copyable}>
+          <Carbon
+            config={this.state}
+            readOnly={this.state.readOnly}
+            copyable={this.state.copyable}
+            updateCode={this.updateCode}
+          >
             {this.state.code}
           </Carbon>
         )}