Implement context menu in background side

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'
@@ -41,6 +41,9 @@ let main: BrowserWindow = null
   }
 
   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',
@@ -48,6 +51,43 @@ let main: BrowserWindow = null
           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',
@@ -55,6 +95,16 @@ let main: BrowserWindow = null
           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 })

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