add menu

src/client/js/components/Page/CopyDropdown.jsx

@@ -73,6 +73,11 @@ class CopyDropdown extends React.Component {
     return decodeURI(`${origin}/${pageId}${this.uriParams}`);
   }
 
+  generateShareLink() {
+    const { shareLink } = this.props;
+    return `http://localhost:3000/share/${shareLink._id}`;
+  }
+
   generateMarkdownLink() {
     const { pagePath } = this.props;
 
@@ -82,6 +87,10 @@ class CopyDropdown extends React.Component {
     return `[${label}](${permalink})`;
   }
 
+  generateMarkdownShareLink() {
+    return `[share link path](${this.generateShareLink()})`;
+  }
+
   DropdownItemContents = ({ title, contents }) => (
     <>
       <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
@@ -144,20 +153,23 @@ class CopyDropdown extends React.Component {
                     <DropdownItemContents title={t('copy_to_clipboard.Page path')} contents={pagePathWithParams} />
                   </DropdownItem>
                 </CopyToClipboard>
-
                 <DropdownItem divider className="my-0"></DropdownItem>
+              </>
+            )}
 
-                {/* Page path URL */}
+            {/* Page path URL */}
+            { pageId && (
+              <>
                 <CopyToClipboard text={pagePathUrl} onCopy={this.showToolTip}>
                   <DropdownItem className="px-3">
                     <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl} />
                   </DropdownItem>
                 </CopyToClipboard>
-
                 <DropdownItem divider className="my-0"></DropdownItem>
               </>
             )}
 
+
             {/* Parmanent Link */}
             { pageId && (
               <CopyToClipboard text={permalink} onCopy={this.showToolTip}>
@@ -191,9 +203,18 @@ class CopyDropdown extends React.Component {
 
             {/* Share Link Copy */}
             { isShareLinkMode && (
-              <CopyToClipboard text={shareLink._id} onCopy={this.showToolTip}>
+              <CopyToClipboard text={this.generateShareLink()} onCopy={this.showToolTip}>
+                <DropdownItem className="px-3 text-wrap">
+                  <DropdownItemContents title="share link" contents={this.generateShareLink()} isContentsWrap />
+                </DropdownItem>
+              </CopyToClipboard>
+            )}
+
+            {/* Markdown Link */}
+            { isShareLinkMode && (
+              <CopyToClipboard text={this.generateMarkdownShareLink()} onCopy={this.showToolTip}>
                 <DropdownItem className="px-3 text-wrap">
-                  {shareLink._id}
+                  <DropdownItemContents title="Markdown share link" contents={this.generateMarkdownShareLink()} isContentsWrap />
                 </DropdownItem>
               </CopyToClipboard>
             )}

src/client/js/components/ShareLinkList.jsx

@@ -45,8 +45,8 @@ const ShareLinkList = (props) => {
       <>
         {shareLinks.map(shareLink => (
           <tr>
-            <td>
-              {shareLink.link}
+            <td className="d-flex justify-content-between align-items-center">
+              <div>{shareLink.link}</div>
               <CopyDropdown isShareLinkMode="true" shareLink={shareLink} />
             </td>
             <td>{shareLink.expiration}</td>