Remove auto focus on load

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

src/MUIRichTextEditor.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState, useRef, 
-    forwardRef, useImperativeHandle, RefForwardingComponent, SyntheticEvent } from 'react'
+    forwardRef, useImperativeHandle, RefForwardingComponent } from 'react'
 import Immutable from 'immutable'
 import classNames from 'classnames'
 import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
@@ -8,7 +8,7 @@ import {
     Editor, EditorState, convertFromRaw, RichUtils, AtomicBlockUtils,
     CompositeDecorator, convertToRaw, DefaultDraftBlockRenderMap, DraftEditorCommand,
     DraftHandleValue, DraftStyleMap, ContentBlock, DraftDecorator, 
-    SelectionState, KeyBindingUtil, getDefaultKeyBinding, Modifier
+    SelectionState, KeyBindingUtil, getDefaultKeyBinding, Modifier, DraftBlockRenderMap
 } from 'draft-js'
 import Toolbar, { TToolbarControl, TCustomControl, TToolbarButtonSize } from './components/Toolbar'
 import Link from './components/Link'
@@ -248,10 +248,6 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     const [selectedIndex, setSelectedIndex] = useState<number>(0)
     const [editorState, setEditorState] = useState(() => useEditorState(props))
     const [focusMediaKey, setFocusMediaKey] = useState("")
-    const [customRenderers, setCustomRenderers] = useState<TCustomRenderers>({
-        style: undefined,
-        block: undefined
-    })
 
     const editorRef = useRef<Editor>(null)
     const editorId = props.id || "mui-rte"
@@ -262,6 +258,9 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     const autocompletePositionRef = useRef<TPosition | undefined>(undefined)
     const autocompleteLimit = props.autocomplete ? props.autocomplete.suggestLimit || 5 : 5
     const isFirstFocus = useRef(true)
+    const customBlockMapRef = useRef<DraftBlockRenderMap | undefined>(undefined)
+    const customStyleMapRef = useRef<DraftStyleMap | undefined>(undefined)
+    const isFocusedWithMouse = useRef(false)
     const selectionRef = useRef<TStateOffset>({
         start: 0,
         end: 0
@@ -290,31 +289,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
 
     useEffect(() => {
         const editorState = useEditorState(props)
-        const customBlockMap: any = {}
-        const customStyleMap = JSON.parse(JSON.stringify(styleRenderMap))
-        if (props.customControls) {
-            props.customControls.forEach(control => {
-                if (control.type === "inline" && control.inlineStyle) {
-                    customStyleMap[control.name.toUpperCase()] = control.inlineStyle
-                }
-                else if (control.type === "block" && control.blockWrapper) {
-                    customBlockMap[control.name.toUpperCase()] = {
-                        element: "div",
-                        wrapper: control.blockWrapper
-                    }
-                }
-            })
-        }
-        setCustomRenderers({
-            style: customStyleMap,
-            block: DefaultDraftBlockRenderMap.merge(blockRenderMap, Immutable.Map(customBlockMap))
-        })
-        const nextEditorState = EditorState.forceSelection(editorState, editorState.getSelection())
-        if (props.readOnly === true) {
-            setEditorState(nextEditorState)
-        } else {
-            setEditorState(EditorState.moveFocusToEnd(nextEditorState))
-        }
+        setEditorState(editorState)
         toggleMouseUpListener(true)
         return () => {
             toggleMouseUpListener()
@@ -505,16 +480,10 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         return isMaxLengthHandled(editorState, 1)
     }
 
-    const isSyntheticEventTriggeredByTab = (event: SyntheticEvent): boolean => {
-        if (!event.hasOwnProperty("relatedTarget") || (event as any).relatedTarget == null) {
-            return false
-        }
-        return true
-    }
-
-    const handleEditorFocus = (event: SyntheticEvent) => {
+    const handleEditorFocus = () => {
         handleFocus()
-        if (!isSyntheticEventTriggeredByTab(event)) {
+        if (isFocusedWithMouse.current === true) {
+            isFocusedWithMouse.current = false
             return
         }
         const nextEditorState = EditorState.forceSelection(editorState, editorState.getSelection())
@@ -543,6 +512,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     }
 
     const handleBlur = () => {
+        isFocusedWithMouse.current = false
         setFocus(false)
         if (props.onBlur) {
             props.onBlur()
@@ -556,8 +526,15 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         }
     }
 
+    const handleMouseDown = () => {
+        isFocusedWithMouse.current = true
+    }
+
     const handleClearFormat = () => {
-        const withoutStyles = clearInlineStyles(editorState, customRenderers.style)
+        if (customStyleMapRef.current === undefined) {
+            return
+        }
+        const withoutStyles = clearInlineStyles(editorState, customStyleMapRef.current)
         const selectionInfo = getSelectionInfo(editorState)
         const newEditorState = EditorState.push(editorState, withoutStyles, 'change-inline-style')
         setEditorState(RichUtils.toggleBlockType(newEditorState, selectionInfo.blockType))
@@ -903,6 +880,47 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         handlePromptForMedia(false, newEditorState)
     }
 
+    const getStyleMap = (): DraftStyleMap => {
+        if (customStyleMapRef.current === undefined) {
+            setupStyleMap()
+        }
+        return customStyleMapRef.current!
+    }
+
+    const setupStyleMap = () => {
+        const customStyleMap = JSON.parse(JSON.stringify(styleRenderMap))
+        if (props.customControls) {
+            props.customControls.forEach(control => {
+                if (control.type === "inline" && control.inlineStyle) {
+                    customStyleMap[control.name.toUpperCase()] = control.inlineStyle
+                }
+            })
+        }
+        customStyleMapRef.current = customStyleMap
+    }
+
+    const getBlockMap = (): DraftBlockRenderMap => {
+        if (customBlockMapRef.current === undefined) {
+            setupBlockMap()
+        }
+        return customBlockMapRef.current!
+    }
+
+    const setupBlockMap = () => {
+        const customBlockMap: any = {}
+        if (props.customControls) {
+            props.customControls.forEach(control => {
+                if (control.type === "block" && control.blockWrapper) {
+                    customBlockMap[control.name.toUpperCase()] = {
+                        element: "div",
+                        wrapper: control.blockWrapper
+                    }
+                }
+            })
+        }
+        customBlockMapRef.current = DefaultDraftBlockRenderMap.merge(blockRenderMap, Immutable.Map(customBlockMap))
+    }
+
     const blockRenderer = (contentBlock: ContentBlock) => {
         const blockType = contentBlock.getType()
         if (blockType === 'atomic') {
@@ -936,6 +954,15 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         return null
     }
 
+    const styleRenderer = (style: any, _block: ContentBlock): React.CSSProperties => {
+        const customStyleMap = getStyleMap()
+        const styleNames = style.toJS()
+        return styleNames.reduce((styles: any, styleName: string) => {
+            styles = customStyleMap[styleName]
+            return styles
+        }, {})
+    }
+
     const insertAtomicBlock = (editorState: EditorState, type: string, data: any, options?: any) => {
         const contentState = editorState.getCurrentContent()
         const contentStateWithEntity = contentState.createEntity(type, 'IMMUTABLE', data)
@@ -1060,6 +1087,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                             controls={inlineToolbarControls}
                             customControls={customControls}
                             inlineMode={true}
+                            isActive={true}
                         />
                     </Paper>
                     : null}
@@ -1073,18 +1101,19 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                         className={classes.toolbar}
                         disabled={!editable}
                         size={props.toolbarButtonSize}
+                        isActive={focus}
                     />
                     : null}
                 {placeholder}
                 <div id={`${editorId}-editor`} className={classes.editor}>
                     <div id={`${editorId}-editor-container`} className={classNames(className, classes.editorContainer, {
                         [classes.editorReadOnly]: !editable,
                         [classes.error]: props.error
-                    })} onBlur={handleBlur}>
+                    })} onMouseDown={handleMouseDown} onBlur={handleBlur}>
                         <Editor
-                            customStyleMap={customRenderers.style}
-                            blockRenderMap={customRenderers.block}
+                            blockRenderMap={getBlockMap()}
                             blockRendererFn={blockRenderer}
+                            customStyleFn={styleRenderer}
                             editorState={editorState}
                             onChange={handleChange}
                             onFocus={handleEditorFocus}

src/components/Toolbar.tsx

@@ -69,6 +69,7 @@ type TToolbarProps = {
     className?: string
     disabled?: boolean
     size?: TToolbarButtonSize
+    isActive: boolean
 }
 
 const STYLE_TYPES: TStyleType[] = [
@@ -233,7 +234,10 @@ const Toolbar: FunctionComponent<TToolbarProps> = (props) => {
                 }
                 let active = false
                 const action = props.onClick
-                if (style.type === "inline") {
+                if (!props.isActive) {
+                    active = false
+                }
+                else if (style.type === "inline") {
                     active = editorState.getCurrentInlineStyle().has(style.style)
                 }
                 else if (style.type === "block") {

test/Toolbar.test.tsx

@@ -18,6 +18,7 @@ describe('<EditorControls />', () => {
                 id="mui-rte"
                 editorState={editorState}
                 onClick={() => {}}
+                isActive={true}
             />
         )
         const result = wrapper.find(EditorButton)
@@ -41,6 +42,7 @@ describe('<EditorControls />', () => {
                 editorState={editorState}
                 controls={controls}
                 onClick={() => {}}
+                isActive={true}
             />
         )
         const result = wrapper.find(EditorButton).map(item => {
@@ -56,6 +58,7 @@ describe('<EditorControls />', () => {
                 editorState={editorState}
                 controls={[]}
                 onClick={() => {}}
+                isActive={true}
             />
         )
         const result = wrapper.find(EditorButton)