Replace Draft with Quill for composition area

Co-authored-by: Sidney Keese <sidney@carbonfive.com>

ts/components/CompositionArea.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import 'draft-js/dist/Draft.css';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
@@ -32,7 +31,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   onChooseAttachment: action('onChooseAttachment'),
   // CompositionInput
   onSubmit: action('onSubmit'),
-  onEditorSizeChange: action('onEditorSizeChange'),
   onEditorStateChange: action('onEditorStateChange'),
   onTextTooLong: action('onTextTooLong'),
   startingText: overrideProps.startingText || undefined,

ts/components/CompositionArea.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Editor } from 'draft-js';
 import { get, noop } from 'lodash';
 import classNames from 'classnames';
 import { EmojiButton, Props as EmojiButtonProps } from './emoji/EmojiButton';
@@ -47,7 +46,6 @@ export type OwnProps = {
 export type Props = Pick<
   CompositionInputProps,
   | 'onSubmit'
-  | 'onEditorSizeChange'
   | 'onEditorStateChange'
   | 'onTextTooLong'
   | 'startingText'
@@ -90,7 +88,6 @@ export const CompositionArea = ({
   // CompositionInput
   onSubmit,
   compositionApi,
-  onEditorSizeChange,
   onEditorStateChange,
   onTextTooLong,
   startingText,
@@ -137,7 +134,6 @@ export const CompositionArea = ({
   const [micActive, setMicActive] = React.useState(false);
   const [dirty, setDirty] = React.useState(false);
   const [large, setLarge] = React.useState(false);
-  const editorRef = React.useRef<Editor>(null);
   const inputApiRef = React.useRef<InputApi | undefined>();
 
   const handleForceSend = React.useCallback(() => {
@@ -156,10 +152,10 @@ export const CompositionArea = ({
   );
 
   const focusInput = React.useCallback(() => {
-    if (editorRef.current) {
-      editorRef.current.focus();
+    if (inputApiRef.current) {
+      inputApiRef.current.focus();
     }
-  }, [editorRef]);
+  }, [inputApiRef]);
 
   const withStickers =
     countStickers({
@@ -413,11 +409,9 @@ export const CompositionArea = ({
             i18n={i18n}
             disabled={disabled}
             large={large}
-            editorRef={editorRef}
             inputApi={inputApiRef}
             onPickEmoji={onPickEmoji}
             onSubmit={handleSubmit}
-            onEditorSizeChange={onEditorSizeChange}
             onEditorStateChange={onEditorStateChange}
             onTextTooLong={onTextTooLong}
             onDirtyChange={setDirty}

ts/components/CompositionInput.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import 'draft-js/dist/Draft.css';
+import 'react-quill/dist/quill.core.css';
 import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
@@ -17,7 +17,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   disabled: boolean('disabled', overrideProps.disabled || false),
   onSubmit: action('onSubmit'),
-  onEditorSizeChange: action('onEditorSizeChange'),
   onEditorStateChange: action('onEditorStateChange'),
   onTextTooLong: action('onTextTooLong'),
   startingText: overrideProps.startingText || undefined,

ts/components/ConversationListItem.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import 'draft-js/dist/Draft.css';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, date, select, text } from '@storybook/addon-knobs';

ts/components/emoji/Emoji.tsx

@@ -56,7 +56,7 @@ export const Emoji = React.memo(
           style={{ ...style, ...backgroundStyle }}
         >
           {inline ? (
-            // When using this component as a draft.js decorator it is very
+            // When using this component as in a CompositionInput it is very
             // important that these children are the only elements to render
             children
           ) : (

ts/components/emoji/EmojiPicker.tsx

@@ -20,7 +20,10 @@ import { dataByCategory, search } from './lib';
 import { useRestoreFocus } from '../../util/hooks';
 import { LocalizerType } from '../../types/Util';
 
-export type EmojiPickDataType = { skinTone?: number; shortName: string };
+export type EmojiPickDataType = {
+  skinTone?: number;
+  shortName: string;
+};
 
 export type OwnProps = {
   readonly i18n: LocalizerType;

ts/components/emoji/lib.ts

@@ -240,14 +240,14 @@ export function unifiedToEmoji(unified: string): string {
     .join('');
 }
 
-export function convertShortName(
+export function convertShortNameToData(
   shortName: string,
   skinTone: number | SkinToneKey = 0
-): string {
+): EmojiData | undefined {
   const base = dataByShortName[shortName];
 
   if (!base) {
-    return '';
+    return undefined;
   }
 
   const toneKey = is.number(skinTone) ? skinTones[skinTone - 1] : skinTone;
@@ -255,11 +255,27 @@ export function convertShortName(
   if (skinTone && base.skin_variations) {
     const variation = base.skin_variations[toneKey];
     if (variation) {
-      return unifiedToEmoji(variation.unified);
+      return {
+        ...base,
+        ...variation,
+      };
     }
   }
 
-  return unifiedToEmoji(base.unified);
+  return base;
+}
+
+export function convertShortName(
+  shortName: string,
+  skinTone: number | SkinToneKey = 0
+): string {
+  const emojiData = convertShortNameToData(shortName, skinTone);
+
+  if (!emojiData) {
+    return '';
+  }
+
+  return unifiedToEmoji(emojiData.unified);
 }
 
 export function emojiToImage(emoji: string): string | undefined {