Some improvements

ts/components/Checkbox.tsx

@@ -5,6 +5,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { Emojify } from './conversation/Emojify';
 
 export type PropsType = {
   checked?: boolean;
@@ -61,7 +62,9 @@ export const Checkbox = forwardRef(function CheckboxInner(
     <div>
       <label htmlFor={id}>
         <div>{label}</div>
-        <div className={getClassName('__description')}>{description}</div>
+        <div className={getClassName('__description')}>
+          <Emojify text={description ?? ''} />
+        </div>
       </label>
     </div>
   );

ts/components/CompositionInput.tsx

@@ -39,7 +39,9 @@ import {
   getDeltaToRemoveStaleMentions,
   getTextAndRangesFromOps,
   isMentionBlot,
+  isEmojiBlot,
   getDeltaToRestartMention,
+  getDeltaToRestartEmoji,
   insertEmojiOps,
   insertFormattingAndMentionsOps,
 } from '../quill/util';
@@ -284,7 +286,7 @@ export function CompositionInput(props: Props): React.ReactElement {
     const delta = new Delta()
       .retain(insertionRange.index)
       .delete(insertionRange.length)
-      .insert({ emoji });
+      .insert({ emoji: { value: emoji } });
 
     quill.updateContents(delta, 'user');
     quill.setSelection(insertionRange.index + 1, 0, 'user');
@@ -512,17 +514,24 @@ export function CompositionInput(props: Props): React.ReactElement {
     }
 
     const [blotToDelete] = quill.getLeaf(selection.index);
-    if (!isMentionBlot(blotToDelete)) {
-      return true;
+    if (isMentionBlot(blotToDelete)) {
+      const contents = quill.getContents(0, selection.index - 1);
+      const restartDelta = getDeltaToRestartMention(contents.ops);
+
+      quill.updateContents(restartDelta);
+      quill.setSelection(selection.index, 0);
+      return false;
     }
 
-    const contents = quill.getContents(0, selection.index - 1);
-    const restartDelta = getDeltaToRestartMention(contents.ops);
+    if (isEmojiBlot(blotToDelete)) {
+      const contents = quill.getContents(0, selection.index);
+      const restartDelta = getDeltaToRestartEmoji(contents.ops);
 
-    quill.updateContents(restartDelta);
-    quill.setSelection(selection.index, 0);
+      quill.updateContents(restartDelta);
+      return false;
+    }
 
-    return false;
+    return true;
   };
 
   const onChange = (): void => {
@@ -731,7 +740,9 @@ export function CompositionInput(props: Props): React.ReactElement {
                 callbacksRef.current.onPickEmoji(emoji),
               skinTone,
             },
-            autoSubstituteAsciiEmojis: true,
+            autoSubstituteAsciiEmojis: {
+              skinTone,
+            },
             formattingMenu: {
               i18n,
               isMenuEnabled: isFormattingEnabled,

ts/components/Preferences.stories.tsx

@@ -76,6 +76,7 @@ export default {
     defaultConversationColor: DEFAULT_CONVERSATION_COLOR,
     deviceName: 'Work Windows ME',
     hasAudioNotifications: true,
+    hasAutoConvertEmoji: true,
     hasAutoDownloadUpdate: true,
     hasAutoLaunch: true,
     hasCallNotifications: true,
@@ -133,6 +134,7 @@ export default {
     executeMenuRole: action('executeMenuRole'),
     makeSyncRequest: action('makeSyncRequest'),
     onAudioNotificationsChange: action('onAudioNotificationsChange'),
+    onAutoConvertEmojiChange: action('onAutoConvertEmojiChange'),
     onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'),
     onAutoLaunchChange: action('onAutoLaunchChange'),
     onCallNotificationsChange: action('onCallNotificationsChange'),

ts/components/Preferences.tsx

@@ -75,6 +75,7 @@ export type PropsDataType = {
   defaultConversationColor: DefaultConversationColorType;
   deviceName?: string;
   hasAudioNotifications?: boolean;
+  hasAutoConvertEmoji: boolean;
   hasAutoDownloadUpdate: boolean;
   hasAutoLaunch: boolean;
   hasCallNotifications: boolean;
@@ -159,6 +160,7 @@ type PropsFunctionType = {
 
   // Change handlers
   onAudioNotificationsChange: CheckboxChangeHandlerType;
+  onAutoConvertEmojiChange: CheckboxChangeHandlerType;
   onAutoDownloadUpdateChange: CheckboxChangeHandlerType;
   onAutoLaunchChange: CheckboxChangeHandlerType;
   onCallNotificationsChange: CheckboxChangeHandlerType;
@@ -257,6 +259,7 @@ export function Preferences({
   executeMenuRole,
   getConversationsWithCustomColor,
   hasAudioNotifications,
+  hasAutoConvertEmoji,
   hasAutoDownloadUpdate,
   hasAutoLaunch,
   hasCallNotifications,
@@ -293,6 +296,7 @@ export function Preferences({
   makeSyncRequest,
   notificationContent,
   onAudioNotificationsChange,
+  onAutoConvertEmojiChange,
   onAutoDownloadUpdateChange,
   onAutoLaunchChange,
   onCallNotificationsChange,
@@ -856,6 +860,16 @@ export function Preferences({
             name="linkPreviews"
             onChange={noop}
           />
+          <Checkbox
+            checked={hasAutoConvertEmoji}
+            description={i18n(
+              'icu:Preferences__auto-convert-emoji--description'
+            )}
+            label={i18n('icu:Preferences__auto-convert-emoji--title')}
+            moduleClassName="Preferences__checkbox"
+            name="autoConvertEmoji"
+            onChange={onAutoConvertEmojiChange}
+          />
           <Control
             left={i18n('icu:Preferences__sent-media-quality')}
             right={