Add 'maxLength' property (#85)

README.md

@@ -243,6 +243,7 @@ Object.assign(defaultTheme, {
 |inlineToolbarControls|`string[]`|optional|List of controls to display in the inline toolbar. Available values are: "bold", "italic", "underline", "strikethrough", "highlight", "link", "clear", and user defined inline controls. If not provided and `inlineToolbar` is `true` the following inline styles will be displayed: bold, italic, underline and clear.|
 |keyCommands|`TKeyCommand[]`|optional|Defines an array of `TKeyCommand` objects for adding key bindings to the editor.|
 |draftEditorProps|`TDraftEditorProps`|optional|Defines an object containing specific `draft-js` `Editor` properties.|
+|maxLength|`number`|optional|Sets the maximum characters count that can be input into the editor.|
 
 
 <br />

examples/main.tsx

@@ -13,6 +13,7 @@ import LoadHTML from './load-html'
 import ResetValue from './reset-value'
 import AtomicCustomBlock from './atomic-custom-block'
 import KeyBindings from './key-bindings'
+import MaxLength from './max-length'
 
 const App = () => {
 
@@ -38,6 +39,7 @@ const App = () => {
             <button onClick={() => setSample(<LoadHTML />)}>Load from HTML</button>
             <button onClick={() => setSample(<ResetValue />)}>Reset value</button>
             <button onClick={() => setSample(<KeyBindings />)}>Key Bindings</button>
+            <button onClick={() => setSample(<MaxLength />)}>Max length</button>
             <div style={{
                 margin: "20px 0"
             }}>

examples/max-length/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import MUIRichTextEditor from '../../'
+
+const save = (data: string) => {
+    console.log(data)
+}
+
+const MaxLength = () => {
+    return (
+        <MUIRichTextEditor 
+            label="You can only type 10 characters..."
+            maxLength={10}
+            onSave={save}
+        />
+    )
+}
+
+export default MaxLength

package.json

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

src/MUIRichTextEditor.tsx

@@ -88,8 +88,6 @@ type TKeyCommand = {
     callback: (state: EditorState) => EditorState
 }
 
-
-
 interface IMUIRichTextEditorProps extends WithStyles<typeof styles> {
     id?: string
     value?: any
@@ -106,6 +104,7 @@ interface IMUIRichTextEditorProps extends WithStyles<typeof styles> {
     inlineToolbarControls?: Array<TToolbarControl>
     draftEditorProps?: TDraftEditorProps
     keyCommands?: TKeyCommand[]
+    maxLength?: number
     onSave?: (data: string) => void
     onChange?: (state: EditorState) => void
 }
@@ -319,6 +318,16 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
         }
     }
 
+    const handleBeforeInput = (): DraftHandleValue => {
+        if (props.maxLength) {
+            const length = editorState.getCurrentContent().getPlainText('').length
+            if (length >= props.maxLength) {
+                return "handled"
+            }
+        }
+        return "not-handled"
+    }
+
     const handleFocus = () => {
         setFocus(true)
         setTimeout(() => (editorRef.current as any).focus(), 0)
@@ -752,6 +761,7 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                             onChange={handleChange}
                             readOnly={props.readOnly}
                             handleKeyCommand={handleKeyCommand}
+                            handleBeforeInput={handleBeforeInput}
                             keyBindingFn={keyBindingFn}
                             ref={editorRef}
                             {...props.draftEditorProps}