Composition area: Only paste HTML that originated in Signal

Co-authored-by: Chris Svenningsen <chris@carbonfive.com>

ts/components/CompositionInput.tsx

@@ -6,10 +6,8 @@ import * as React from 'react';
 import Delta from 'quill-delta';
 import ReactQuill from 'react-quill';
 import classNames from 'classnames';
-import emojiRegex from 'emoji-regex';
 import { Manager, Reference } from 'react-popper';
 import Quill, { KeyboardStatic, RangeStatic } from 'quill';
-import Op from 'quill-delta/dist/Op';
 
 import { MentionCompletion } from '../quill/mentions/completion';
 import { EmojiBlot, EmojiCompletion } from '../quill/emoji';
@@ -22,6 +20,7 @@ import {
   matchEmojiImage,
   matchEmojiBlot,
   matchReactEmoji,
+  matchEmojiText,
 } from '../quill/emoji/matchers';
 import { matchMention } from '../quill/mentions/matchers';
 import { MemberRepository } from '../quill/memberRepository';
@@ -30,6 +29,8 @@ import {
   getTextAndMentionsFromOps,
   isMentionBlot,
   getDeltaToRestartMention,
+  insertMentionOps,
+  insertEmojiOps,
 } from '../quill/util';
 import { SignalClipboard } from '../quill/signal-clipboard';
 
@@ -117,70 +118,6 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     new MemberRepository()
   );
 
-  const insertMentionOps = (
-    incomingOps: Array<Op>,
-    bodyRanges: Array<BodyRangeType>
-  ) => {
-    const ops = [...incomingOps];
-
-    // Working backwards through bodyRanges (to avoid offsetting later mentions),
-    // Shift off the op with the text to the left of the last mention,
-    // Insert a mention based on the current bodyRange,
-    // Unshift the mention and surrounding text to leave the ops ready for the next range
-    bodyRanges
-      .sort((a, b) => b.start - a.start)
-      .forEach(({ start, length, mentionUuid, replacementText }) => {
-        const op = ops.shift();
-
-        if (op) {
-          const { insert } = op;
-
-          if (typeof insert === 'string') {
-            const left = insert.slice(0, start);
-            const right = insert.slice(start + length);
-
-            const mention = {
-              uuid: mentionUuid,
-              title: replacementText,
-            };
-
-            ops.unshift({ insert: right });
-            ops.unshift({ insert: { mention } });
-            ops.unshift({ insert: left });
-          } else {
-            ops.unshift(op);
-          }
-        }
-      });
-
-    return ops;
-  };
-
-  const insertEmojiOps = (incomingOps: Array<Op>): Array<Op> => {
-    return incomingOps.reduce((ops, op) => {
-      if (typeof op.insert === 'string') {
-        const text = op.insert;
-        const re = emojiRegex();
-        let index = 0;
-        let match: RegExpExecArray | null;
-
-        // eslint-disable-next-line no-cond-assign
-        while ((match = re.exec(text))) {
-          const [emoji] = match;
-          ops.push({ insert: text.slice(index, match.index) });
-          ops.push({ insert: { emoji } });
-          index = match.index + emoji.length;
-        }
-
-        ops.push({ insert: text.slice(index, text.length) });
-      } else {
-        ops.push(op);
-      }
-
-      return ops;
-    }, [] as Array<Op>);
-  };
-
   const generateDelta = (
     text: string,
     bodyRanges: Array<BodyRangeType>
@@ -258,7 +195,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
 
     quill.setText('');
 
-    const historyModule: HistoryStatic = quill.getModule('history');
+    const historyModule = quill.getModule('history');
 
     if (historyModule === undefined) {
       return;
@@ -544,6 +481,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
                 ['IMG', matchEmojiImage],
                 ['IMG', matchEmojiBlot],
                 ['SPAN', matchReactEmoji],
+                [Node.TEXT_NODE, matchEmojiText],
                 ['SPAN', matchMention(memberRepositoryRef)],
               ],
             },

ts/quill/emoji/matchers.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import Delta from 'quill-delta';
+import { insertEmojiOps } from '../util';
 
 export const matchEmojiImage = (node: Element): Delta => {
   if (node.classList.contains('emoji')) {
@@ -26,3 +27,9 @@ export const matchReactEmoji = (node: HTMLElement, delta: Delta): Delta => {
   }
   return delta;
 };
+
+export const matchEmojiText = (node: Text): Delta => {
+  const nodeAsInsert = { insert: node.data };
+
+  return new Delta(insertEmojiOps([nodeAsInsert]));
+};

ts/quill/signal-clipboard/index.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import Quill from 'quill';
+import Delta from 'quill-delta';
+
 import { getTextFromOps } from '../util';
 
 const getSelectionHTML = () => {
@@ -28,6 +30,7 @@ export class SignalClipboard {
 
     this.quill.root.addEventListener('copy', e => this.onCaptureCopy(e, false));
     this.quill.root.addEventListener('cut', e => this.onCaptureCopy(e, true));
+    this.quill.root.addEventListener('paste', e => this.onCapturePaste(e));
   }
 
   onCaptureCopy(event: ClipboardEvent, isCut = false): void {
@@ -59,10 +62,45 @@ export class SignalClipboard {
     const html = getSelectionHTML();
 
     event.clipboardData.setData('text/plain', text);
-    event.clipboardData.setData('text/html', html);
+    event.clipboardData.setData('text/signal', html);
 
     if (isCut) {
       this.quill.deleteText(range.index, range.length, 'user');
     }
   }
+
+  onCapturePaste(event: ClipboardEvent): void {
+    if (event.clipboardData === null) {
+      return;
+    }
+
+    this.quill.focus();
+
+    const clipboard = this.quill.getModule('clipboard');
+    const selection = this.quill.getSelection();
+
+    if (selection === null) {
+      return;
+    }
+
+    const text = event.clipboardData.getData('text/plain');
+    const html = event.clipboardData.getData('text/signal');
+
+    const { scrollTop } = this.quill.scrollingContainer;
+
+    this.quill.selection.update('silent');
+
+    if (selection) {
+      setTimeout(() => {
+        const delta = new Delta()
+          .retain(selection.index)
+          .concat(clipboard.convert(html || text));
+        this.quill.updateContents(delta, 'user');
+        this.quill.setSelection(delta.length(), 0, 'silent');
+        this.quill.scrollingContainer.scrollTop = scrollTop;
+      }, 1);
+    }
+
+    event.preventDefault();
+  }
 }

ts/quill/types.d.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import UpdatedDelta from 'quill-delta';
+import { MentionCompletion } from './mentions/completion';
+import { EmojiCompletion } from './emoji/completion';
 
 declare module 'react-quill' {
   // `react-quill` uses a different but compatible version of Delta
@@ -30,6 +32,19 @@ declare module 'quill' {
     value(): any;
   }
 
+  interface HistoryStatic {
+    undo(): void;
+    clear(): void;
+  }
+
+  interface ClipboardStatic {
+    convert(html: string): UpdatedDelta;
+  }
+
+  interface SelectionStatic {
+    update(source: string): void;
+  }
+
   interface Quill {
     updateContents(delta: UpdatedDelta, source?: Sources): UpdatedDelta;
     getContents(index?: number, length?: number): UpdatedDelta;
@@ -41,6 +56,14 @@ declare module 'quill' {
       eventName: 'text-change',
       handler: UpdatedTextChangeHandler
     ): EventEmitter;
+
+    getModule(module: 'history'): HistoryStatic;
+    getModule(module: 'clipboard'): ClipboardStatic;
+    getModule(module: 'mentionCompletion'): MentionCompletion;
+    getModule(module: 'emojiCompletion'): EmojiCompletion;
+    getModule(module: string): unknown;
+
+    selection: SelectionStatic;
   }
 
   interface KeyboardStatic {

ts/quill/util.ts

@@ -1,6 +1,7 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import emojiRegex from 'emoji-regex';
 import Delta from 'quill-delta';
 import { LeafBlot, DeltaOperation } from 'quill';
 import Op from 'quill-delta/dist/Op';
@@ -195,3 +196,67 @@ export const getDeltaToRemoveStaleMentions = (
 
   return new Delta(newOps);
 };
+
+export const insertMentionOps = (
+  incomingOps: Array<Op>,
+  bodyRanges: Array<BodyRangeType>
+): Array<Op> => {
+  const ops = [...incomingOps];
+
+  // Working backwards through bodyRanges (to avoid offsetting later mentions),
+  // Shift off the op with the text to the left of the last mention,
+  // Insert a mention based on the current bodyRange,
+  // Unshift the mention and surrounding text to leave the ops ready for the next range
+  bodyRanges
+    .sort((a, b) => b.start - a.start)
+    .forEach(({ start, length, mentionUuid, replacementText }) => {
+      const op = ops.shift();
+
+      if (op) {
+        const { insert } = op;
+
+        if (typeof insert === 'string') {
+          const left = insert.slice(0, start);
+          const right = insert.slice(start + length);
+
+          const mention = {
+            uuid: mentionUuid,
+            title: replacementText,
+          };
+
+          ops.unshift({ insert: right });
+          ops.unshift({ insert: { mention } });
+          ops.unshift({ insert: left });
+        } else {
+          ops.unshift(op);
+        }
+      }
+    });
+
+  return ops;
+};
+
+export const insertEmojiOps = (incomingOps: Array<Op>): Array<Op> => {
+  return incomingOps.reduce((ops, op) => {
+    if (typeof op.insert === 'string') {
+      const text = op.insert;
+      const re = emojiRegex();
+      let index = 0;
+      let match: RegExpExecArray | null;
+
+      // eslint-disable-next-line no-cond-assign
+      while ((match = re.exec(text))) {
+        const [emoji] = match;
+        ops.push({ insert: text.slice(index, match.index) });
+        ops.push({ insert: { emoji } });
+        index = match.index + emoji.length;
+      }
+
+      ops.push({ insert: text.slice(index, text.length) });
+    } else {
+      ops.push(op);
+    }
+
+    return ops;
+  }, [] as Array<Op>);
+};

ts/util/lint/exceptions.json

@@ -14544,7 +14544,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const emojiCompletionRef = React.useRef();",
-    "lineNumber": 45,
+    "lineNumber": 44,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14553,7 +14553,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const mentionCompletionRef = React.useRef();",
-    "lineNumber": 46,
+    "lineNumber": 45,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T23:54:34.273Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14562,7 +14562,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const quillRef = React.useRef();",
-    "lineNumber": 47,
+    "lineNumber": 46,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14571,7 +14571,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const scrollerRef = React.useRef(null);",
-    "lineNumber": 48,
+    "lineNumber": 47,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used with Quill for scrolling."
@@ -14580,7 +14580,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const propsRef = React.useRef(props);",
-    "lineNumber": 49,
+    "lineNumber": 48,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14589,7 +14589,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const memberRepositoryRef = React.useRef(new memberRepository_1.MemberRepository());",
-    "lineNumber": 50,
+    "lineNumber": 49,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T23:56:13.482Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14930,7 +14930,7 @@
     "rule": "DOM-innerHTML",
     "path": "ts/quill/signal-clipboard/index.js",
     "line": "    return div.innerHTML;",
-    "lineNumber": 15,
+    "lineNumber": 19,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-06T17:43:07.381Z",
     "reasonDetail": "used for figuring out clipboard contents"
@@ -14939,7 +14939,7 @@
     "rule": "DOM-innerHTML",
     "path": "ts/quill/signal-clipboard/index.ts",
     "line": "  return div.innerHTML;",
-    "lineNumber": 20,
+    "lineNumber": 22,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-06T17:43:07.381Z",
     "reasonDetail": "used for figuring out clipboard contents"
@@ -15176,4 +15176,4 @@
     "reasonCategory": "falseMatch",
     "updated": "2020-09-08T23:07:22.682Z"
   }
-]
+]