Merge branch 'develop' into feature/improve-atocomplete-popup-position

* develop: Bump lodash from 4.17.15 to 4.17.20 (niuware#197) Update package.json (niuware#196) Update editor focus call (niuware#195) Fix max length on return (niuware#194) Allow editor focus with keyboard (niuware#192) update version
agavrilov · Oct 29, 2020 · f1caec4 · f1caec4
2 parents 506d5a9 + 7369777
commit f1caec4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.24.0",
+  "version": "1.25.0-1.0.1",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -1,7 +1,5 @@
-import React, {
-    FunctionComponent, useEffect, useState, useRef,
-    forwardRef, useImperativeHandle, RefForwardingComponent, SyntheticEvent
-} from 'react'
+import React, { FunctionComponent, useEffect, useState, useRef,
+    forwardRef, useImperativeHandle, RefForwardingComponent, SyntheticEvent } from 'react'
 import Immutable from 'immutable'
 import classNames from 'classnames'
 import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
@@ -161,7 +159,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)
@@ -267,14 +266,15 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
     })
     const [showAutocompletePopup, setShowAutocompletePopup] = useState(false);
 
-    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)
     const autocompleteRef = useRef<TAutocompleteStrategy | undefined>(undefined)
     const autocompleteSelectionStateRef = useRef<SelectionState | undefined>(undefined)
     const autocompletePositionRef = useRef<TPosition | undefined>(undefined)
     const autocompleteLimit = props.autocomplete ? props.autocomplete.suggestLimit || 5 : 5
+    const isFirstFocus = useRef(true)
     const selectionRef = useRef<TStateOffset>({
         start: 0,
         end: 0
@@ -549,19 +549,46 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                 autocompleteSelectionStateRef.current = editorStateRef.current!.getSelection()
             }
         }
+        return isMaxLengthHandled(editorState, 1)
+    }
 
-        const currentLength = editorState.getCurrentContent().getPlainText('').length
-        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 handlePlaceholderFocus = () => {
+        if (isFirstFocus.current === false) {
+            focusEditor()
+            return
+        }
+        handleFocus()
+        isFirstFocus.current = false
     }
 
     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) {
@@ -673,7 +700,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()) {
@@ -773,9 +800,17 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         }
     }
 
-    const handlePastedText = (text: string, _html: string | undefined, editorState: EditorState): DraftHandleValue => {
+    const handlePastedText = (text: string, _html: string|undefined, editorState: EditorState): DraftHandleValue => {
+        return isMaxLengthHandled(editorState, text.length)
+    }
+
+    const handleReturn = (_e: any, editorState: EditorState): DraftHandleValue => {
+        return isMaxLengthHandled(editorState, 1)
+    }
+
+    const isMaxLengthHandled = (editorState: EditorState, nextLength: number): DraftHandleValue => {
         const currentLength = editorState.getCurrentContent().getPlainText('').length
-        return isGreaterThan(currentLength + text.length, props.maxLength) ? "handled" : "not-handled"
+        return isGreaterThan(currentLength + nextLength, props.maxLength) ? "handled" : "not-handled"
     }
 
     const handleOnTab = (ev: React.KeyboardEvent<{}>) => {
@@ -891,8 +926,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) => {
@@ -1048,7 +1083,8 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                     className={classNames(classes.editorContainer, classes.placeHolder, {
                         [classes.error]: props.error
                     })}
-                    onClick={handleFocus}
+                    tabIndex={0}
+                    onFocus={handlePlaceholderFocus}
                 >
                     {props.label || ""}
                 </div>
@@ -1107,18 +1143,20 @@ 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}>
+                    })} onBlur={handleBlur}>
                         <Editor
                             customStyleMap={customRenderers.style}
                             blockRenderMap={customRenderers.block}
                             blockRendererFn={blockRenderer}
                             editorState={editorState}
                             onChange={handleChange}
                             onTab={handleOnTab}
+                            onFocus={handleEditorFocus}
                             readOnly={props.readOnly}
                             handleKeyCommand={handleKeyCommand}
                             handleBeforeInput={handleBeforeInput}
                             handlePastedText={handlePastedText}
+                            handleReturn={handleReturn}
                             keyBindingFn={keyBindingFn}
                             ref={editorRef}
                             {...props.draftEditorProps}