Remodel the copy link modal

src/components/EditorHeader/ControlPanel.jsx

@@ -71,6 +71,7 @@ import { exportSQL } from "../../utils/exportSQL";
 import { databases } from "../../data/databases";
 import { jsonToMermaid } from "../../utils/exportAs/mermaid";
 import { isRtl } from "../../i18n/utils/rtl";
+import Share from "./Modal/Share";
 
 export default function ControlPanel({
   diagramId,
@@ -1376,6 +1377,7 @@ export default function ControlPanel({
         )}
         {layout.toolbar && toolbar()}
       </div>
+      <Share modal={modal} setModal={setModal}/>
       <Modal
         modal={modal}
         exportData={exportData}

src/components/EditorHeader/Modal/Modal.jsx

@@ -42,7 +42,6 @@ import { useTranslation } from "react-i18next";
 import { importSQL } from "../../../utils/importSQL";
 import { databases } from "../../../data/databases";
 import { isRtl } from "../../../i18n/utils/rtl";
-import Share from "./Share";
 import GithubToken from "./GithubToken";
 
 const languageExtension = {
@@ -257,6 +256,7 @@ export default function Modal({
   };
 
   const getModalBody = () => {
+    if (modal === MODAL.SHARE) return;
     switch (modal) {
       case MODAL.IMPORT:
         return (
@@ -341,8 +341,8 @@ export default function Modal({
         return <SetTableWidth />;
       case MODAL.LANGUAGE:
         return <Language />;
-      case MODAL.SHARE:
-        return <Share setModal={setModal} />;
+      // case MODAL.SHARE:
+      //   return <Share setModal={setModal} />;
       case MODAL.GITHUB_TOKEN:
         return <GithubToken token={token} setToken={setToken} />;
       default:
@@ -354,7 +354,7 @@ export default function Modal({
     <SemiUIModal
       style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
       title={getModalTitle(modal)}
-      visible={modal !== MODAL.NONE}
+      visible={modal !== MODAL.NONE && modal !== MODAL.SHARE}
       onOk={getModalOnOk}
       afterClose={() => {
         setExportData(() => ({

src/components/EditorHeader/Modal/Share.jsx

@@ -1,13 +1,14 @@
-import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
+import { Button, Input, Modal, 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";
+import { isRtl } from "../../../i18n/utils/rtl";
 
-export default function Share({ setModal }) {
-  const { t } = useTranslation();
+export default function Share({ modal, setModal }) {
+  const { t, i18n } = useTranslation();
   const { gistId, setGistId } = useContext(IdContext);
   const [loading, setLoading] = useState(false);
 
@@ -78,7 +79,7 @@ export default function Share({ setModal }) {
       } catch (e) {
         console.error(e);
       } finally {
-        setModal(MODAL.SHARE);
+        setLoading(false);
       }
     };
     updateOrGenerateLink();
@@ -95,20 +96,48 @@ export default function Share({ setModal }) {
       });
   };
 
-  if (loading)
   return (
+    <Modal
+      visible={modal === MODAL.SHARE}
+      style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
+      title={t("share")}
+      footer={<></>}
+      onCancel={() => setModal(MODAL.NONE)}
+      centered
+      closeOnEsc={true}
+      cancelText={t("cancel")}
+      width={600}
+      bodyStyle={{
+        maxHeight: window.innerHeight - 280,
+        overflow: "auto",
+        direction: "ltr",
+      }}
+    >
+      {loading ? (
         <div className="text-blue-500 text-center">
           <Spin size="middle" />
           <div>{t("loading")}</div>
         </div>
-    );
-
-  return (
+      ) : (
+        <div>
           <div className="flex gap-3">
             <Input value={url} size="large" />
-      <Button size="large" theme="solid" icon={<IconLink />} onClick={copyLink}>
+            <Button
+              size="large"
+              theme="solid"
+              icon={<IconLink />}
+              onClick={copyLink}
+            >
               {t("copy_link")}
             </Button>
           </div>
+          <hr className="opacity-20 mt-3 mb-1" />
+          <div className="text-xs">
+            * Sharing this link will not create a live real-time collaboration
+            session
+          </div>
+        </div>
+      )}
+    </Modal>
   );
 }