Allow editor focus with keyboard

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'
@@ -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)
@@ -252,7 +253,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)
@@ -504,14 +505,34 @@ 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 = () => {
-        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) {
@@ -623,7 +644,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 +855,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) => {
@@ -986,7 +1007,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>
@@ -1041,7 +1063,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}