Fixes @mention draft changes

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>

ts/components/CompositionArea.tsx

@@ -369,16 +369,16 @@ export function CompositionArea({
   const previousConversationId = usePrevious(conversationId, conversationId);
   useEffect(() => {
     if (!draftText) {
-      inputApiRef.current?.setText('');
+      inputApiRef.current?.setContents('');
       return;
     }
 
     if (conversationId === previousConversationId) {
       return;
     }
 
-    inputApiRef.current?.setText(draftText, true);
-  }, [conversationId, draftText, previousConversationId]);
+    inputApiRef.current?.setContents(draftText, draftBodyRanges, true);
+  }, [conversationId, draftBodyRanges, draftText, previousConversationId]);
 
   const handleToggleLarge = useCallback(() => {
     setLarge(l => !l);

ts/components/CompositionInput.tsx

@@ -7,7 +7,7 @@ import Delta from 'quill-delta';
 import ReactQuill from 'react-quill';
 import classNames from 'classnames';
 import { Manager, Reference } from 'react-popper';
-import type { KeyboardStatic, RangeStatic } from 'quill';
+import type { DeltaStatic, KeyboardStatic, RangeStatic } from 'quill';
 import Quill from 'quill';
 
 import { MentionCompletion } from '../quill/mentions/completion';
@@ -60,7 +60,11 @@ type HistoryStatic = {
 export type InputApi = {
   focus: () => void;
   insertEmoji: (e: EmojiPickDataType) => void;
-  setText: (text: string, cursorToEnd?: boolean) => void;
+  setContents: (
+    text: string,
+    draftBodyRanges?: DraftBodyRangesType,
+    cursorToEnd?: boolean
+  ) => void;
   reset: () => void;
   submit: () => void;
 };
@@ -234,15 +238,25 @@ export function CompositionInput(props: Props): React.ReactElement {
     historyModule.clear();
   };
 
-  const setText = (text: string, cursorToEnd?: boolean) => {
+  const setContents = (
+    text: string,
+    bodyRanges?: DraftBodyRangesType,
+    cursorToEnd?: boolean
+  ) => {
     const quill = quillRef.current;
 
     if (quill === undefined) {
       return;
     }
 
+    const delta = generateDelta(text || '', bodyRanges || []);
+
     canSendRef.current = true;
-    quill.setText(text);
+    // We need to cast here because we use @types/quill@1.3.10 which has types
+    // for quill-delta even though quill-delta is written in TS and has its own
+    // types. @types/quill@2.0.0 fixes the issue but react-quill has a peer-dep
+    // on the older quill types.
+    quill.setContents(delta as unknown as DeltaStatic);
     if (cursorToEnd) {
       quill.setSelection(quill.getLength(), 0);
     }
@@ -276,7 +290,7 @@ export function CompositionInput(props: Props): React.ReactElement {
     inputApi.current = {
       focus,
       insertEmoji,
-      setText,
+      setContents,
       reset,
       submit,
     };

ts/components/CompositionTextArea.tsx

@@ -112,7 +112,7 @@ export function CompositionTextArea({
           // was modifying text in the middle of the editor
           // a better solution would be to prevent the change to begin with, but
           // quill makes this VERY difficult
-          inputEl.setText(newValueSized, true);
+          inputEl.setContents(newValueSized, bodyRanges, true);
         }
       }
       setCharacterCount(newCharacterCount);