Focus RTE when opening reply

src/core/client/stream/components/RTE.tsx

@@ -1,6 +1,6 @@
 import { Blockquote, Bold, CoralRTE, Italic } from "@coralproject/rte";
 import { Localized as LocalizedOriginal } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { Ref, StatelessComponent } from "react";
 
 import { Icon } from "talk-ui/components";
 
@@ -47,6 +47,8 @@ export interface RTEProps {
   onChange?: (data: { html: string; text: string }) => void;
 
   disabled?: boolean;
+
+  forwardRef?: Ref<CoralRTE>;
 }
 
 // tslint:disable:jsx-wrap-multiline
@@ -83,6 +85,7 @@ const RTE: StatelessComponent<RTEProps> = props => {
     onChange,
     disabled,
     defaultValue,
+    forwardRef,
     ...rest
   } = props;
   return (
@@ -97,6 +100,7 @@ const RTE: StatelessComponent<RTEProps> = props => {
         disabled={disabled}
         placeholder={placeholder}
         features={features}
+        ref={forwardRef}
         {...rest}
       />
     </div>

src/core/client/stream/components/ReplyCommentForm.tsx

@@ -1,6 +1,12 @@
+import { CoralRTE } from "@coralproject/rte";
 import { FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
-import React, { EventHandler, MouseEvent, StatelessComponent } from "react";
+import React, {
+  EventHandler,
+  MouseEvent,
+  Ref,
+  StatelessComponent,
+} from "react";
 import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
@@ -26,6 +32,7 @@ export interface ReplyCommentFormProps {
   onCancel?: EventHandler<MouseEvent<any>>;
   onChange?: (state: FormState) => void;
   initialValues?: FormProps;
+  rteRef?: Ref<CoralRTE>;
 }
 
 const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => {
@@ -58,6 +65,7 @@ const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => {
                       onChange={({ html }) => input.onChange(html)}
                       value={input.value}
                       placeholder="Write a reply"
+                      forwardRef={props.rteRef}
                     />
                   </Localized>
                   {meta.touched &&