Prototype - Create PRs directly from Markdoc Sandbox

components/Document.js

@@ -7,13 +7,49 @@ function EditPage({ source: initialDocument }) {
   const [doc, setDoc] = React.useState(initialDocument);
   const { content, config, errors } = useMarkdocCode(doc);
 
+  const [docChanged, setDocChanged] = React.useState(false);
+
+  const [prNumber, setPrNumber] = React.useState(null);
+
+  const createPR = async () => {
+    const filename = window.CURRENT_FILENAME;
+
+    const files = {
+      [filename]: doc
+    };
+
+    console.log(files);
+
+    const body = JSON.stringify({ files });
+
+    const response = await fetch('/api/create-pr', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body
+    });
+
+    const prNumber = await response.json();
+    setPrNumber(prNumber);
+
+    return prNumber;
+  };
+
   return (
     <>
       {Markdoc.renderers.react(content.children, React, {
         components: config.components
       })}
-      <EditPagePanel>
-        <Editor code={doc} onChange={setDoc} errors={errors} />
+      <EditPagePanel docChanged={docChanged} createPR={createPR}>
+        <Editor
+          code={doc}
+          onChange={(...args) => {
+            setDocChanged(true);
+            setDoc(...args);
+          }}
+          errors={errors}
+        />
       </EditPagePanel>
     </>
   );

components/EditPagePanel.js

@@ -3,7 +3,49 @@ import React from 'react';
 const PATTERN = Buffer.from('NDI0Mg==', 'base64').toString();
 const WIDTH = 55;
 
-export function EditPagePanel({ children }) {
+const MARKDOC_CLIENT_ID = '3a8716adbaa6294da1ec';
+function CreatePRButton({ createPR }) {
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <div>
+      <button
+        className="create-pr-btn"
+        onClick={async () => {
+          // TODO: oauth is so annoying. We have to auth this and then get the code back, pass that to the server, but
+          // it makes the UX annoying
+          window.open(
+            `https://github.com/login/oauth/authorize?client_id=${MARKDOC_CLIENT_ID}&redirect_uri=${window.location.href}`
+          );
+          setLoading(true);
+          const prNumber = await createPR();
+          window.open(
+            `https://github.com/markdoc/docs/pull/${prNumber}`,
+            '_blank'
+          );
+          setLoading(false);
+        }}
+      >
+        {loading ? 'Creating...' : 'Create PR'}
+      </button>
+      <style jsx>
+        {`
+          .create-pr-btn {
+            position: absolute;
+            bottom: 0.8rem;
+            right: 1rem;
+            top: inherit;
+            background: #ffd849;
+            font-size: 12px;
+            padding: 5px 12px;
+          }
+        `}
+      </style>
+    </div>
+  );
+}
+
+export function EditPagePanel({ docChanged, children, createPR }) {
   const [showEditor, setShowEditor] = React.useState(false);
   const [mouseOver, setMouseOver] = React.useState(false);
   const [keystrokes, setCount] = React.useState(0);
@@ -71,6 +113,7 @@ export function EditPagePanel({ children }) {
         <button onClick={() => setShowEditor(false)}>
           <kbd>CMD + J / Esc</kbd>
         </button>
+        {docChanged && <CreatePRButton createPR={createPR} />}
       </section>
       <style jsx>
         {`
@@ -88,6 +131,7 @@ export function EditPagePanel({ children }) {
             width: ${100 - WIDTH}%;
             height: 100%;
           }
+
           section {
             width: ${WIDTH}%;
             height: 100%;