Add open with processing to examples

src/components/CopyButton.module.css

@@ -1,6 +1,4 @@
 .root {
-  position: absolute;
-  right: var(--gutter);
   height: 32px;
   padding: 6px 12px;
   font-size: var(--text-small);

src/components/OpenWithButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import ProcessingIcon from '../images/logo-processing.svg';
+
+import * as css from './CopyButton.module.css';
+
+const OpenWithButton = ({ text }) => {
+    return (
+        <a
+            href={`pde://sketch/base64/${stringToBase64(text)}`}
+            type="button"
+            className={classnames(css.root)}
+        >
+            <ProcessingIcon /> {'Open With Processing'}
+        </a>
+    )
+}
+
+export default OpenWithButton;
+
+function stringToBase64(str) {
+    if (typeof Buffer !== 'undefined') {
+        return Buffer.from(str).toString('base64');
+    }
+    return btoa(str);
+}

src/components/OpenWithButton.module.css

@@ -0,0 +1,24 @@
+.root {
+  height: 32px;
+  padding: 6px 12px;
+  font-size: var(--text-small);
+  font-weight: bold;
+  color: var(--darkgray);
+  cursor: pointer;
+  fill: var(--darkgray);
+
+  & svg {
+    height: 12px;
+    width: auto;
+  }
+}
+
+.root:hover {
+  color: var(--darkergray);
+  fill: var(--darkergray);
+}
+
+.root:active {
+  color: var(--processing-blue-mid);
+  fill: var(--processing-blue-mid);
+}

src/components/Tabs.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 
 import Button from './Button';
 import CopyButton from './CopyButton';
+import OpenWithButton from './OpenWithButton';
 
 import { useHighlight } from '../hooks';
 import { escapeHtml } from '../utils';
@@ -40,7 +41,10 @@ const Tabs = ({ pdes, className }) => {
             [css.activeCode]: pde.name === active
           })}
           key={key}>
-          <CopyButton text={pde.code} />
+          <div className={css.actions}>
+            <CopyButton text={pde.code} />
+            <OpenWithButton text={pde.code} />
+          </div>
           <pre className={css.codeBlock}>
             <code
               dangerouslySetInnerHTML={{

src/components/Tabs.module.css

@@ -37,3 +37,8 @@
   padding-bottom: var(--gutter-double);
   white-space: break-spaces;
 }
+
+.actions{
+  position: absolute;
+  right: var(--gutter);
+}