implement 'get from clipboard' button

demo/ClipboardImporter.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled from '../src/styled-components';
+
+const Button = styled.button`
+  background-color: #fff;
+  color: #333;
+  padding: 2px 10px;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  font-size: 16px;
+  height: 28px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1;
+  outline: none;
+  white-space: nowrap;
+`;
+
+export interface ClipboardImporterProps {
+  onPaste?: (val: any) => void;
+}
+
+export default class ClipboardImporter extends React.Component<any, any> {
+  render() {
+    return <Button title='Get spec from clipboard' onClick={() => this.import()}>📋</Button>;
+  }
+
+  private import() {
+    navigator.clipboard.readText()
+      .then(text => {
+        if (!text) {
+          return;
+        }
+        const asJson = JSON.parse(text);
+        if (asJson) {
+          this.props.onPaste(asJson);
+        }
+      })
+      .catch(() => {
+        console.error('Failed to get spec from clipboard')
+      })
+  }
+}

demo/index.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { resolve as urlResolve } from 'url';
 import { RedocStandalone } from '../src';
 import ComboBox from './ComboBox';
+import ClipboardImporter from './ClipboardImporter';
 
 const demos = [
   { value: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', label: 'Instagram' },
@@ -20,7 +21,7 @@ const DEFAULT_SPEC = 'openapi.yaml';
 
 class DemoApp extends React.Component<
   {},
-  { specUrl: string; dropdownOpen: boolean; cors: boolean }
+  { spec?: object; specUrl: string; dropdownOpen: boolean; cors: boolean }
 > {
   constructor(props) {
     super(props);
@@ -38,14 +39,23 @@ class DemoApp extends React.Component<
     }
 
     this.state = {
+      spec: undefined,
       specUrl: url,
       dropdownOpen: false,
       cors,
     };
   }
 
+  handlePaste = (spec: object) => {
+    this.setState({
+      spec,
+      specUrl: '',
+    });
+  };
+
   handleChange = (url: string) => {
     this.setState({
+      spec: undefined,
       specUrl: url,
     });
     window.history.pushState(
@@ -85,6 +95,7 @@ class DemoApp extends React.Component<
             />
           </a>
           <ControlsContainer>
+            <ClipboardImporter onPaste={this.handlePaste}/>
             <ComboBox
               placeholder={'URL to a spec to try'}
               options={demos}
@@ -105,6 +116,7 @@ class DemoApp extends React.Component<
           />
         </Heading>
         <RedocStandalone
+          spec={this.state.spec}
           specUrl={proxiedUrl}
           options={{ scrollYOffset: 'nav', untrustedSpec: true }}
         />