refs #5097 Add context menu

main/background.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { app, ipcMain, shell, IpcMainInvokeEvent, BrowserWindow, Menu } from 'electron'
+import { app, ipcMain, shell, IpcMainInvokeEvent, BrowserWindow, Menu, clipboard } from 'electron'
 import serve from 'electron-serve'
 import { createWindow } from './helpers'
 import { menu } from './menu'
@@ -39,6 +39,76 @@ let main: BrowserWindow = null
     await mainWindow.loadURL(`http://localhost:${port}/`)
     mainWindow.webContents.openDevTools()
   }
+
+  mainWindow.webContents.on('context-menu', (_event, properties) => {
+    const { editFlags } = properties
+    const hasText = properties.selectionText.length > 0
+    const can = (type: string) => editFlags[`can${type}`] && hasText
+    const contextMenu = Menu.buildFromTemplate([
+      {
+        label: 'Select All',
+        click: () => {
+          mainWindow.webContents.selectAll()
+        }
+      },
+      {
+        label: 'Copy',
+        enabled: can('Copy'),
+        visible: properties.isEditable || hasText,
+        click: () => {
+          const target = mainWindow.webContents
+          if (target) {
+            target.copy()
+          } else {
+            clipboard.writeText(properties.selectionText)
+          }
+        }
+      },
+      {
+        label: 'Cut',
+        enabled: can('Cut'),
+        visible: properties.isEditable || hasText,
+        click: () => {
+          const target = mainWindow.webContents
+          if (target) {
+            target.cut()
+          } else {
+            clipboard.writeText(properties.selectionText)
+          }
+        }
+      },
+      {
+        label: 'Paste',
+        enabled: editFlags.canPaste,
+        visible: properties.isEditable,
+        click: () => {
+          const target = mainWindow.webContents
+          if (target) {
+            target.paste()
+          }
+        }
+      },
+      {
+        label: 'Save Image As',
+        visible: properties.mediaType === 'image',
+        click: () => {
+          console.log(properties.srcURL)
+          mainWindow.webContents.downloadURL(properties.srcURL)
+        }
+      },
+      {
+        label: 'Copy Link',
+        visible: properties.linkURL.length > 0 && properties.mediaType === 'none',
+        click: () => {
+          clipboard.write({
+            bookmark: properties.linkText,
+            text: properties.linkURL
+          })
+        }
+      }
+    ])
+    contextMenu.popup({ window: mainWindow })
+  })
 })()
 
 app.on('window-all-closed', () => {

renderer/components/timelines/FollowRequests.tsx

@@ -54,17 +54,15 @@ export default function FollowRequests(props: Props) {
           </div>
           <div className="timeline overflow-y-auto w-full overflow-x-hidden" style={{ height: 'calc(100% - 44px)' }}>
             {requests.map(r => (
-              <>
-                <User
-                  key={r.id}
-                  user={r}
-                  client={props.client}
-                  refresh={async () => {
-                    const data = await refreshRequests()
-                    updateUnreads(data.length)
-                  }}
-                />
-              </>
+              <User
+                key={r.id}
+                user={r}
+                client={props.client}
+                refresh={async () => {
+                  const data = await refreshRequests()
+                  updateUnreads(data.length)
+                }}
+              />
             ))}
           </div>
         </section>

renderer/components/timelines/status/Status.tsx

@@ -88,29 +88,6 @@ export default function Status(props: Props) {
     )
   }
 
-  const onContextMenu: MouseEventHandler<HTMLDivElement> = e => {
-    e.preventDefault()
-    hideOthers()
-    const context = document.getElementById(`context-${props.status.id}`)
-    if (context) {
-      context.style.left = `${e.clientX}px`
-      context.style.top = `${e.clientY}px`
-      context.style.display = 'block'
-    }
-  }
-
-  const onClick: MouseEventHandler<HTMLDivElement> = e => {
-    e.preventDefault()
-    hideOthers()
-  }
-
-  const hideOthers = () => {
-    const menu = document.getElementsByClassName('context-menu')
-    for (let i = 0; i < menu.length; i++) {
-      ;(menu[i] as HTMLElement).style.display = 'none'
-    }
-  }
-
   const copyLink = () => {
     navigator.clipboard.writeText(status.url)
   }
@@ -141,12 +118,7 @@ export default function Status(props: Props) {
             )}
           />
         </div>
-        <div
-          className="text-gray-950 dark:text-gray-300 break-all overflow-hidden"
-          style={{ width: 'calc(100% - 56px)' }}
-          onContextMenu={onContextMenu}
-          onClick={onClick}
-        >
+        <div className="text-gray-950 dark:text-gray-300 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
           <div className="flex justify-between">
             <div className="flex cursor-pointer hover:underline" onClick={() => openUser(status.account.id)}>
               <span