From 1c39bddec8b3c1a1702e8f333589565f90cf9354 Mon Sep 17 00:00:00 2001
From: Erik Lopez <maileks@gmail.com>
Date: Wed, 7 Oct 2020 16:53:27 +0900
Subject: [PATCH 1/5] Add type to editorRef property

---
 src/MUIRichTextEditor.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 0cdc7f6..6acb44a 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -252,7 +252,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         block: undefined
     })
 
-    const editorRef = useRef(null)
+    const editorRef = useRef<Editor>(null)
     const editorId = props.id || "mui-rte"
     const toolbarPositionRef = useRef<TPosition | undefined>(undefined)
     const editorStateRef = useRef<EditorState | null>(editorState)
@@ -623,7 +623,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         for (let control of props.customControls) {
             if (control.name.toUpperCase() === style) {
                 if (control.onClick) {
-                    setTimeout(() => (editorRef.current as any).blur(), 0)
+                    setTimeout(() => editorRef.current?.blur(), 0)
                     const newState = control.onClick(editorState, control.name, document.getElementById(id))
                     if (newState) {
                         if (newState.getSelection().isCollapsed()) {
@@ -834,8 +834,8 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     }
 
     const refocus = () => {
-        setTimeout(() => (editorRef.current as any).blur(), 0)
-        setTimeout(() => (editorRef.current as any).focus(), 1)
+        setTimeout(() => editorRef.current?.blur(), 0)
+        setTimeout(() => editorRef.current?.focus(), 1)
     }
 
     const toggleBlockType = (blockType: string) => {

From 5e8f70cf75f5ba63ec8c65248ac75168b627da2a Mon Sep 17 00:00:00 2001
From: Erik Lopez <maileks@gmail.com>
Date: Wed, 7 Oct 2020 16:54:09 +0900
Subject: [PATCH 2/5] Extract logic to focus editor

---
 src/MUIRichTextEditor.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 6acb44a..83144d7 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -505,13 +505,17 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     }
 
     const handleFocus = () => {
-        setFocus(true)
-        setTimeout(() => (editorRef.current as any).focus(), 0)
+        focusEditor()
         if (props.onFocus) {
             props.onFocus()
         }
     }
 
+    const focusEditor = () => {
+        setFocus(true)
+        setTimeout(() => editorRef.current?.focus(), 0)
+    }
+
     const handleBlur = () => {
         setFocus(false)
         if (props.onBlur) {

From 16e681a689c3fdb93f76ac55735b5c50246123e0 Mon Sep 17 00:00:00 2001
From: Erik Lopez <maileks@gmail.com>
Date: Wed, 7 Oct 2020 16:54:23 +0900
Subject: [PATCH 3/5] Enable focus editor with keyboard

---
 src/MUIRichTextEditor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 83144d7..5b3631c 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -990,7 +990,8 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                     className={classNames(classes.editorContainer, classes.placeHolder, {
                         [classes.error]: props.error
                     })}
-                    onClick={handleFocus}
+                    tabIndex={0}
+                    onFocus={focusEditor}
                 >
                     {props.label || ""}
                 </div>

From bb56aa4b036e4d5edc3278798378eec8b8eff137 Mon Sep 17 00:00:00 2001
From: Erik Lopez <maileks@gmail.com>
Date: Wed, 7 Oct 2020 17:05:06 +0900
Subject: [PATCH 4/5] Set cursor position after keyboard focused

---
 src/MUIRichTextEditor.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 5b3631c..3c879b9 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState, useRef, 
-    forwardRef, useImperativeHandle, RefForwardingComponent } from 'react'
+    forwardRef, useImperativeHandle, RefForwardingComponent, SyntheticEvent } from 'react'
 import Immutable from 'immutable'
 import classNames from 'classnames'
 import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
@@ -504,6 +504,22 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         return isGreaterThan(currentLength + 1, props.maxLength) ? "handled" : "not-handled"
     }
 
+    const isSyntheticEventTriggeredByTab = (event: SyntheticEvent): boolean => {
+        if (!event.hasOwnProperty("relatedTarget") || (event as any).relatedTarget == null) {
+            return false
+        }
+        return true
+    }
+
+    const handleEditorFocus = (event: SyntheticEvent) => {
+        handleFocus()
+        if (!isSyntheticEventTriggeredByTab(event)) {
+            return
+        }
+        const nextEditorState = EditorState.forceSelection(editorState, editorState.getSelection())
+        setTimeout(() => (setEditorState(EditorState.moveFocusToEnd(nextEditorState))), 0)
+    }
+
     const handleFocus = () => {
         focusEditor()
         if (props.onFocus) {
@@ -1046,7 +1062,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                     <div id={`${editorId}-editor-container`} className={classNames(className, classes.editorContainer, {
                         [classes.editorReadOnly]: !editable,
                         [classes.error]: props.error
-                    })} onClick={handleFocus} onBlur={handleBlur}>
+                    })} onFocus={handleEditorFocus} onBlur={handleBlur}>
                         <Editor
                             customStyleMap={customRenderers.style}
                             blockRenderMap={customRenderers.block}

From fcde1c278f71c2e18fa3ac674608cf8b3bd9444a Mon Sep 17 00:00:00 2001
From: Erik Lopez <maileks@gmail.com>
Date: Wed, 7 Oct 2020 17:05:18 +0900
Subject: [PATCH 5/5] Update placeholder style

---
 src/MUIRichTextEditor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 3c879b9..6f87b7b 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -150,7 +150,8 @@ const styles = ({ spacing, typography, palette }: Theme) => createStyles({
     },
     placeHolder: {
         color: palette.grey[600],
-        position: "absolute"
+        position: "absolute",
+        outline: "none"
     },
     linkPopover: {
         padding: spacing(2, 2, 2, 2)