ConverationView.onPaste: Better handling of clipboard contents

Co-authored-by: Scott Nonnenberg <scott@signal.org>

stylesheets/_global.scss

@@ -34,6 +34,10 @@ body {
   }
 }
 
+[contenteditable] {
+  -webkit-user-modify: read-write-plaintext-only;
+}
+
 ::-webkit-scrollbar {
   // For vertical scrollbars
   width: 9px;

ts/components/conversation/ConversationView.tsx

@@ -57,14 +57,15 @@ export function ConversationView({
 
   const onPaste = React.useCallback(
     (event: React.ClipboardEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-      event.preventDefault();
-
       if (!event.clipboardData) {
         return;
       }
       const { items } = event.clipboardData;
+
       const fileItems = [...items].filter(item => item.kind === 'file');
+      if (fileItems.length === 0) {
+        return;
+      }
 
       const allVisual = fileItems.every(item => {
         const type = item.type.split('/')[0];
@@ -84,6 +85,9 @@ export function ConversationView({
           files,
         });
 
+        event.stopPropagation();
+        event.preventDefault();
+
         return;
       }
 
@@ -93,6 +97,9 @@ export function ConversationView({
           conversationId,
           files: [firstAttachment],
         });
+
+        event.stopPropagation();
+        event.preventDefault();
       }
     },
     [conversationId, processAttachments]

ts/quill/signal-clipboard/util.ts

@@ -16,7 +16,7 @@ export function createEventHandler({
       if (
         !activeElement ||
         activeElement.matches('input, textarea') ||
-        !activeElement.closest('[contenteditable=true]')
+        !activeElement.closest('[contenteditable=plaintext-only]')
       ) {
         return;
       }

ts/windows/main/start.ts

@@ -27,7 +27,7 @@ window.addEventListener('contextmenu', e => {
   const node = e.target as Element | null;
 
   const isEditable = Boolean(
-    node?.closest('textarea, input, [contenteditable="true"]')
+    node?.closest('textarea, input, [contenteditable="plaintext-only"]')
   );
   const isLink = Boolean(node?.closest('a'));
   const isImage = Boolean(node?.closest('.Lightbox img'));