diff --git a/README.md b/README.md index 99511d3..d11a590 100644 --- a/README.md +++ b/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.|
diff --git a/examples/main.tsx b/examples/main.tsx index b3b7f56..311878a 100644 --- a/examples/main.tsx +++ b/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 = () => { +
diff --git a/examples/max-length/index.tsx b/examples/max-length/index.tsx new file mode 100644 index 0000000..8d8c9d1 --- /dev/null +++ b/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 ( + + ) +} + +export default MaxLength \ No newline at end of file diff --git a/package.json b/package.json index 095e115..be1bad7 100644 --- a/package.json +++ b/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", diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx index 4b913b5..c4f6244 100644 --- a/src/MUIRichTextEditor.tsx +++ b/src/MUIRichTextEditor.tsx @@ -88,8 +88,6 @@ type TKeyCommand = { callback: (state: EditorState) => EditorState } - - interface IMUIRichTextEditorProps extends WithStyles { id?: string value?: any @@ -106,6 +104,7 @@ interface IMUIRichTextEditorProps extends WithStyles { inlineToolbarControls?: Array draftEditorProps?: TDraftEditorProps keyCommands?: TKeyCommand[] + maxLength?: number onSave?: (data: string) => void onChange?: (state: EditorState) => void } @@ -319,6 +318,16 @@ const MUIRichTextEditor: RefForwardingComponent = } } + 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 = onChange={handleChange} readOnly={props.readOnly} handleKeyCommand={handleKeyCommand} + handleBeforeInput={handleBeforeInput} keyBindingFn={keyBindingFn} ref={editorRef} {...props.draftEditorProps}