Browser copy/paste operations not propagating correctly through webview isolation

[celeria-ai]

Issue Summary

There is a critical issue with how browser-native copy/paste operations propagate through the Electron webview isolation layer. Users report that:

1. Form interactions: Copy operations in form fields don't properly take the selected text
2. Google Docs: Right-click copy/paste context menus don't work
3. General web applications: Browser-native clipboard operations are not functioning as expected

Root Cause Analysis

After examining the WebBrowserViewer.tsx component and main.js, I've identified several potential causes:

1. Webview Clipboard Permissions

The webview is currently configured with these permissions:

allowpopups="true"
allowusermedia="true"
webpreferences="contextIsolation=no, javascript=yes, webSecurity=yes, allowRunningInsecureContent=no, spellcheck=yes, enableRemoteModule=no"

However, there's no explicit clipboard permission handling in the webview tag itself.

2. Permission Handler Configuration

In main.js, clipboard permissions are handled but may not be comprehensive:

const allowedPermissions = [
  'media',
  'mediaKeySystem',
  'geolocation',
  'notifications',
  'clipboard-read',
  'clipboard-write',
  'display-capture',
  'video-capture',
  'audio-capture',
];

3. Webview Context Isolation Impact

The webview uses contextIsolation=no which may be interfering with clipboard API access within the webview context.

4. Missing Clipboard Event Bridge

There's no explicit bridge for clipboard events between the webview content and the main Electron process.

Proposed Solutions

Solution 1: Enhanced Clipboard Permissions

Add explicit clipboard permissions to the webview configuration:

// In WebBrowserViewer.tsx
<webview
  // ... existing props
  webpreferences="contextIsolation=no, javascript=yes, webSecurity=yes, allowRunningInsecureContent=no, spellcheck=yes, enableRemoteModule=no, clipboard-read=yes, clipboard-write=yes"
/>

Solution 2: Implement Clipboard Event Bridge

Add clipboard event handling in the webview layer:

// Add to WebBrowserViewer.tsx useEffect hooks
const handleClipboardEvents = async () => {
  const webview = webviewRef.current;
  if (!webview) return;

  // Bridge clipboard-read requests
  webview.addEventListener('console-message', (event) => {
    if (event.message.includes('clipboard-read')) {
      // Handle clipboard read requests
      navigator.clipboard.readText().then(text => {
        webview.executeJavaScript(`
          window.__npcClipboardText = ${JSON.stringify(text)};
          window.dispatchEvent(new CustomEvent('npc-clipboard-text', { detail: { text: ${JSON.stringify(text)} } }));
        `);
      });
    }
  });

  // Bridge clipboard-write operations
  webview.addEventListener('ipc-message', (event) => {
    if (event.channel === 'clipboard-write') {
      const { text } = event.args[0];
      navigator.clipboard.writeText(text);
    }
  });
};

Solution 3: Fix Context Menu Integration

The current context menu implementation may not be properly integrating with webview clipboard operations:

// In the browser context menu handler
const handleWebviewContextMenu = (e) => {
  e.preventDefault();
  
  // Add clipboard operations to context menu
  const menu = [
    { role: 'cut' },
    { role: 'copy' },
    { role: 'paste' },
    { type: 'separator' },
    // ... rest of context menu items
  ];
  
  // Ensure these operations target the webview content
  Menu.buildFromTemplate(menu).popup();
};

Solution 4: Permission Request Enhancement

Enhance the permission request handler to include clipboard-specific handling:

// In main.js
session.setPermissionRequestHandler((webContents, permission, callback, details) => {
  const allowedPermissions = [
    'media',
    'mediaKeySystem',
    'geolocation',
    'notifications',
    'clipboard-read',
    'clipboard-write',
    'display-capture',
    'video-capture',
    'audio-capture',
  ];
  
  if (permission === 'clipboard-read' || permission === 'clipboard-write') {
    // Always allow clipboard operations for webviews
    callback(true);
  } else if (allowedPermissions.includes(permission)) {
    callback(true);
  } else {
    callback(false);
  }
});

Testing Strategy

1. Google Docs Test: Verify right-click copy/paste works
2. Form Field Test: Test copy operations in various form inputs
3. Cross-origin Test: Ensure clipboard works across different domains
4. Keyboard shortcuts: Verify Ctrl+C/Ctrl+V works correctly

Implementation Priority

1. High Priority: Enhanced clipboard permissions (Solution 1)
2. Medium Priority: Permission request enhancement (Solution 4)
3. Low Priority: Event bridge implementation (Solution 2)
4. Low Priority: Context menu integration (Solution 3)

Additional Context

This issue affects the core usability of the browser component, particularly for productivity applications like Google Docs, Notion, and other web-based tools that rely heavily on clipboard operations.

The problem appears to be related to Electron's webview isolation and how clipboard permissions are handled between the main process and renderer process.