From e40a38e4cde256e228f3f8831a465c756e2cb774 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Sat, 28 Oct 2023 20:01:07 -0700
Subject: [PATCH] In Hub, optional button to save draft to clipboard

---
 .../[slug]/SquiggleSnippetDraftDialog.tsx     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/hub/src/app/models/[owner]/[slug]/SquiggleSnippetDraftDialog.tsx b/packages/hub/src/app/models/[owner]/[slug]/SquiggleSnippetDraftDialog.tsx
index 7dfb238810..ab5cc99e10 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/SquiggleSnippetDraftDialog.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/SquiggleSnippetDraftDialog.tsx
@@ -25,6 +25,33 @@ function localStorageExists() {
   return Boolean(typeof window !== "undefined" && window.localStorage);
 }
 
+const CopyToClipboardButton: FC<{ draftLocator: DraftLocator }> = ({
+  draftLocator,
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyClick = async () => {
+    const draft = draftUtils.load(draftLocator);
+    if (draft) {
+      try {
+        await navigator.clipboard.writeText(draft.formState.code);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+      }
+    } else {
+      console.error("Draft not found");
+    }
+  };
+
+  return (
+    <Button onClick={handleCopyClick}>
+      {isCopied ? "Copied!" : "Copy to Clipboard"}
+    </Button>
+  );
+};
+
 export const draftUtils = {
   exists(locator: DraftLocator): boolean {
     if (!localStorageExists()) {
@@ -125,6 +152,11 @@ export const SquiggleSnippetDraftDialog: FC<Props> = ({
               <Button onClick={discard}>Discard</Button>
             </div>
           </TextTooltip>
+          <TextTooltip text="Draft will be copied to clipboard.">
+            <div>
+              <CopyToClipboardButton draftLocator={draftLocator} />
+            </div>
+          </TextTooltip>
           <TextTooltip text="Code and version will be replaced by draft version. You'll still need to save it manually.">
             <div>
               <Button theme="primary" onClick={_restore}>