Copy share url

src/components/EditorHeader/ControlPanel.jsx

@@ -9,6 +9,7 @@ import {
   IconUndo,
   IconRedo,
   IconEdit,
+  IconShareStroked,
 } from "@douyinfe/semi-icons";
 import { Link, useNavigate } from "react-router-dom";
 import icon from "../../assets/icon_dark_64.png";
@@ -70,7 +71,6 @@ import { exportSQL } from "../../utils/exportSQL";
 import { databases } from "../../data/databases";
 import { jsonToMermaid } from "../../utils/exportAs/mermaid";
 import { isRtl } from "../../i18n/utils/rtl";
-import ShareButton from "./ShareButton";
 
 export default function ControlPanel({
   diagramId,
@@ -1363,7 +1363,15 @@ export default function ControlPanel({
         {layout.header && (
           <div className="flex justify-between items-center me-7">
             {header()}
-            <ShareButton setModal={setModal} />
+            <Button
+              type="primary"
+              className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
+              size="default"
+              icon={<IconShareStroked />}
+              onClick={() => setModal(MODAL.SHARE)}
+            >
+              {t("share")}
+            </Button>{" "}
           </div>
         )}
         {layout.toolbar && toolbar()}

src/components/EditorHeader/Modal/Share.jsx

@@ -1,38 +1,114 @@
-import { Banner } from "@douyinfe/semi-ui";
+import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
 import { MODAL } from "../../../data/constants";
+import { useCallback, useContext, useEffect, useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Octokit } from "octokit";
+import { IdContext } from "../../Workspace";
+import { IconLink } from "@douyinfe/semi-icons";
 
 export default function Share({ setModal }) {
+  const { t } = useTranslation();
+  const { gistId, setGistId } = useContext(IdContext);
+  const [loading, setLoading] = useState(false);
+
+  const userToken = localStorage.getItem("github_token");
+  const octokit = useMemo(() => {
+    return new Octokit({
+      auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+    });
+  }, [userToken]);
+  const url = useMemo(
+    () => window.location.href + "?shareId=" + gistId,
+    [gistId],
+  );
+
+  const updateGist = useCallback(async () => {
+    setLoading(true);
+    try {
+      await octokit.request(`PATCH /gists/${gistId}`, {
+        gist_id: gistId,
+        description: "drawDB diagram",
+        files: {
+          "test.json": {
+            content: '{"Hello":"SEAMAN"}',
+          },
+        },
+        headers: {
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      });
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [gistId, octokit]);
+
+  const generateLink = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await octokit.request("POST /gists", {
+        description: "drawDB diagram",
+        public: false,
+        files: {
+          "test.json": {
+            content: '{"Hello":"WORLD"}',
+          },
+        },
+        headers: {
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      });
+      setGistId(res.data.id);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [octokit, setGistId]);
+
+  useEffect(() => {
+    const updateOrGenerateLink = async () => {
+      try {
+        if (!gistId || gistId === "") {
+          await generateLink();
+        } else {
+          await updateGist();
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setModal(MODAL.SHARE);
+      }
+    };
+    updateOrGenerateLink();
+  }, [gistId, generateLink, setModal, updateGist]);
+
+  const copyLink = () => {
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        Toast.success(t("copied_to_clipboard"));
+      })
+      .catch(() => {
+        Toast.error(t("oops_smth_went_wrong"));
+      });
+  };
+
+  if (loading)
+    return (
+      <div className="text-blue-500 text-center">
+        <Spin size="middle" />
+        <div>{t("loading")}</div>
+      </div>
+    );
 
   return (
-    <div id="share" className="space-y-4">
-      <Banner
-        fullMode={false}
-        type="info"
-        icon={null}
-        closeIcon={null}
-        description={
-          <ul className="list-disc ms-4">
-            <li>
-              Generating a link will create a gist with the JSON representation
-              of the diagram.
-            </li>
-            <li>
-              You can create the gist from your account by providing your token
-              <button
-                onClick={() => setModal(MODAL.GITHUB_TOKEN)}
-                className="ms-1 text-sky-500 hover:underline font-semibold"
-              >
-                here
-              </button>
-              .
-            </li>
-            <li>
-              Sharing will not create a live real-time collaboration session.
-            </li>
-          </ul>
-        }
-      />
-     
+    <div className="flex gap-3">
+      <Input value={url} size="large" />
+      <Button size="large" theme="solid" icon={<IconLink />} onClick={copyLink}>
+        {t("copy_link")}
+      </Button>
     </div>
   );
 }

src/components/EditorHeader/ShareButton.jsx

@@ -1,97 +0,0 @@
-import { Button, Spin } from "@douyinfe/semi-ui";
-import { IconShareStroked } from "@douyinfe/semi-icons";
-import { useTranslation } from "react-i18next";
-import { Octokit } from "octokit";
-import { MODAL } from "../../data/constants";
-import { useContext, useState } from "react";
-import { IdContext } from "../Workspace";
-
-export default function ShareButton({ setModal }) {
-  const { t } = useTranslation();
-  const { gistId, setGistId } = useContext(IdContext);
-  const [loading, setLoading] = useState(false);
-
-  const updateGist = async () => {
-    setLoading(true);
-    const userToken = localStorage.getItem("github_token");
-
-    const octokit = new Octokit({
-      auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
-    });
-
-    try {
-      const res = await octokit.request(`PATCH /gists/${gistId}`, {
-        gist_id: gistId,
-        description: "drawDB diagram",
-        files: {
-          "test.json": {
-            content: '{"Hello":"SEAMAN"}',
-          },
-        },
-        headers: {
-          "X-GitHub-Api-Version": "2022-11-28",
-        },
-      });
-      console.log(res);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const generateLink = async () => {
-    setLoading(true);
-    const userToken = localStorage.getItem("github_token");
-
-    const octokit = new Octokit({
-      auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
-    });
-
-    try {
-      const res = await octokit.request("POST /gists", {
-        description: "drawDB diagram",
-        public: false,
-        files: {
-          "test.json": {
-            content: '{"Hello":"WORLD"}',
-          },
-        },
-        headers: {
-          "X-GitHub-Api-Version": "2022-11-28",
-        },
-      });
-      setGistId(res.data.id);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onShare = async () => {
-    try {
-      if (!gistId || gistId === "") {
-        await generateLink();
-      } else {
-        await updateGist();
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setModal(MODAL.SHARE);
-    }
-  };
-
-  return (
-    <Button
-      type="primary"
-      className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
-      size="default"
-      icon={loading ? <Spin /> : <IconShareStroked />}
-      onClick={onShare}
-    >
-      {t("share")}
-    </Button>
-  );
-}

src/i18n/locales/en.js

@@ -237,7 +237,7 @@ const en = {
     didnt_find_diagram: "Oops! Didn't find the diagram.",
     unsigned: "Unsigned",
     share: "Share",
-    generate_link: "Generate link",
+    copy_link: "Copy link",
     github_token: "GitHub Token",
   },
 };