Better handling of formatting in pasted text

ts/background.ts

@@ -188,6 +188,7 @@ import { setBatchingStrategy } from './util/messageBatcher';
 import { parseRemoteClientExpiration } from './util/parseRemoteClientExpiration';
 import { makeLookup } from './util/makeLookup';
 import { addGlobalKeyboardShortcuts } from './services/addGlobalKeyboardShortcuts';
+import { handleCopyEvent } from './quill/signal-clipboard/util';
 
 export function isOverHourIntoPast(timestamp: number): boolean {
   return isNumber(timestamp) && isOlderThan(timestamp, HOUR);
@@ -550,6 +551,9 @@ export async function startApp(): Promise<void> {
     false
   );
 
+  // Intercept clipboard copies to add our custom text/signal data
+  document.addEventListener('copy', handleCopyEvent);
+
   startInteractionMode();
 
   // We add this to window here because the default Node context is erased at the end

ts/components/conversation/MessageTextRenderer.tsx

@@ -15,7 +15,6 @@ import type {
   RangeNode,
 } from '../../types/BodyRange';
 import {
-  SPOILER_REPLACEMENT,
   BodyRange,
   insertRange,
   collapseRangeTree,
@@ -215,12 +214,6 @@ function renderNode({
               }
         }
       >
-        <span
-          aria-hidden
-          className="MessageTextRenderer__formatting--spoiler--copy-target"
-        >
-          {SPOILER_REPLACEMENT}
-        </span>
         <span aria-hidden>{content}</span>
       </span>
     );

ts/components/conversation/TimelineDateHeader.tsx

@@ -29,15 +29,15 @@ export function TimelineDateHeader({
   }, [i18n, timestamp]);
 
   return (
-    <Time
+    <div
       className={classNames(
         'TimelineDateHeader',
         `TimelineDateHeader--${floating ? 'floating' : 'inline'}`
       )}
-      dateOnly
-      timestamp={timestamp}
     >
-      {text}
-    </Time>
+      <Time dateOnly timestamp={timestamp}>
+        {text}
+      </Time>
+    </div>
   );
 }

ts/quill/emoji/matchers.ts

@@ -6,9 +6,8 @@ import { insertEmojiOps } from '../util';
 
 export const matchEmojiImage = (node: Element, delta: Delta): Delta => {
   if (
-    (node.classList.contains('emoji') ||
-      node.classList.contains('module-emoji__image--16px')) &&
-    !node.classList.contains('emoji--invisible')
+    node.classList.contains('emoji') ||
+    node.classList.contains('module-emoji__image--16px')
   ) {
     const emoji = node.getAttribute('aria-label');
     return new Delta().insert({ emoji });

ts/quill/formatting/matchers.ts

@@ -64,8 +64,8 @@ export const matchMonospace = (node: HTMLElement, delta: Delta): Delta => {
 export const matchSpoiler = (node: HTMLElement, delta: Delta): Delta => {
   const classes = [
     'quill--spoiler',
+    'MessageTextRenderer__formatting--spoiler',
     'MessageTextRenderer__formatting--spoiler--revealed',
-    // Note: we don't match on hidden spoilers in message body; we use copy-target text
   ];
 
   if (

ts/quill/mentions/matchers.ts

@@ -13,10 +13,7 @@ export const matchMention =
     if (memberRepository) {
       const { title } = node.dataset;
 
-      if (
-        node.classList.contains('MessageBody__at-mention') &&
-        !node.classList.contains('MessageBody__at-mention--invisible')
-      ) {
+      if (node.classList.contains('MessageBody__at-mention')) {
         const { id } = node.dataset;
         const conversation = memberRepository.getMemberById(id);
 

ts/quill/signal-clipboard/index.ts

@@ -46,17 +46,17 @@ export class SignalClipboard {
     }
 
     const text = event.clipboardData.getData('text/plain');
-    const html = event.clipboardData.getData('text/html');
+    const signal = event.clipboardData.getData('text/signal');
 
-    if (!text && !html) {
+    if (!text && !signal) {
       return;
     }
 
     event.preventDefault();
     event.stopPropagation();
 
-    const clipboardDelta = html
-      ? clipboard.convert(html)
+    const clipboardDelta = signal
+      ? clipboard.convert(signal)
       : clipboard.convert(replaceAngleBrackets(text));
 
     const { scrollTop } = this.quill.scrollingContainer;

ts/quill/signal-clipboard/util.ts

@@ -0,0 +1,64 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export function handleCopyEvent(event: ClipboardEvent): void {
+  if (!event.clipboardData) {
+    return;
+  }
+
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+
+  // Create synthetic html with the full selection we can put into clipboard
+  const container = document.createElement('div');
+  for (let i = 0, max = selection.rangeCount; i < max; i += 1) {
+    const range = selection.getRangeAt(i);
+    container.appendChild(range.cloneContents());
+  }
+
+  // Note: we can't leave text/plain alone and just add text/signal; if we update
+  //   clipboardData at all, all other data is reset.
+  const plaintext = getStringFromNode(container);
+  event.clipboardData?.setData('text/plain', plaintext);
+
+  event.clipboardData?.setData('text/signal', container.innerHTML);
+
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+function getStringFromNode(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || '';
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return '';
+  }
+
+  const element = node as Element;
+  if (element.nodeName === 'IMG' && element.classList.contains('emoji')) {
+    return element.ariaLabel || '';
+  }
+  if (element.nodeName === 'BR') {
+    return '\n';
+  }
+  if (element.childNodes.length === 0) {
+    return element.textContent || '';
+  }
+  let result = '';
+  for (const child of element.childNodes) {
+    result += getStringFromNode(child);
+  }
+  if (
+    element.nodeName === 'P' ||
+    element.nodeName === 'DIV' ||
+    element.nodeName === 'TIME'
+  ) {
+    if (result.length > 0 && !result.endsWith('\n\n')) {
+      result += '\n';
+    }
+  }
+  return result;
+}

ts/util/lint/exceptions.json

@@ -2552,6 +2552,14 @@
     "updated": "2023-04-22T00:07:56.294Z",
     "reasonDetail": "We need a persistent timer to track long-hovers"
   },
+  {
+    "rule": "DOM-innerHTML",
+    "path": "ts/quill/signal-clipboard/util.ts",
+    "line": "  event.clipboardData?.setData('text/signal', container.innerHTML);",
+    "reasonCategory": "regexMatchedSafeCode",
+    "updated": "2023-05-22T23:45:02.074Z",
+    "reasonDetail": "Reading from innerHTML, not setting it"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/state/smart/InstallScreen.tsx",