diff --git a/package.json b/package.json
index 357bbed..442da3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mui-rte",
- "version": "1.9.3",
+ "version": "1.10.0",
"description": "Material-UI Rich Text Editor and Viewer",
"keywords": [
"material-ui",
diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 7667392..f535dd8 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -8,7 +8,7 @@ import {
Editor, EditorState, convertFromRaw, RichUtils, AtomicBlockUtils,
CompositeDecorator, convertToRaw, DefaultDraftBlockRenderMap, DraftEditorCommand,
DraftHandleValue, DraftStyleMap, ContentBlock, DraftDecorator, getVisibleSelectionRect,
- SelectionState
+ SelectionState, KeyBindingUtil, getDefaultKeyBinding
} from 'draft-js'
import Toolbar, { TToolbarControl, TCustomControl } from './components/Toolbar'
import Link from './components/Link'
@@ -77,6 +77,17 @@ export type TDecorator = {
regex: RegExp
}
+type TDraftEditorProps = {
+ spellCheck?: boolean
+ stripPastedStyles?: boolean
+}
+
+type TKeyCommand = {
+ key: number
+ name: string
+ callback: (state: EditorState) => EditorState
+}
+
interface IMUIRichTextEditorProps extends WithStyles
{
id?: string
value?: any
@@ -85,13 +96,15 @@ interface IMUIRichTextEditorProps extends WithStyles {
inheritFontSize?: boolean
error?: boolean
controls?: Array
- onSave?: (data: string) => void
- onChange?: (state: EditorState) => void
- customControls?: TCustomControl[],
+ customControls?: TCustomControl[]
decorators?: TDecorator[]
toolbar?: boolean
inlineToolbar?: boolean
inlineToolbarControls?: Array
+ draftEditorProps?: TDraftEditorProps
+ keyCommands?: TKeyCommand[]
+ onSave?: (data: string) => void
+ onChange?: (state: EditorState) => void
}
type IMUIRichTextEditorState = {
@@ -136,6 +149,8 @@ const styleRenderMap: DraftStyleMap = {
}
}
+const { hasCommandModifier } = KeyBindingUtil
+
const findLinkEntities = (contentBlock: any, callback: any, contentState: any) => {
contentBlock.findEntityRanges(
(character: any) => {
@@ -351,6 +366,16 @@ const MUIRichTextEditor: RefForwardingComponent =
handleChange(newState)
return "handled"
}
+ else {
+ if (props.keyCommands) {
+ const keyCommand = props.keyCommands.find(comm => comm.name === command)
+ if (keyCommand) {
+ const newState = keyCommand.callback(editorState)
+ handleChange(newState)
+ return "handled"
+ }
+ }
+ }
return "not-handled"
}
@@ -372,7 +397,9 @@ const MUIRichTextEditor: RefForwardingComponent =
}
}
else {
- refocus()
+ if (!editorState.getSelection().isCollapsed()) {
+ refocus()
+ }
}
}
break
@@ -643,6 +670,16 @@ const MUIRichTextEditor: RefForwardingComponent =
return AtomicBlockUtils.insertAtomicBlock(newEditorStateRaw, entityKey, ' ')
}
+ const keyBindingFn = (e: React.KeyboardEvent<{}>): string | null => {
+ if (hasCommandModifier(e) && props.keyCommands) {
+ const comm = props.keyCommands.find(comm => comm.key === e.keyCode)
+ if (comm) {
+ return comm.name
+ }
+ }
+ return getDefaultKeyBinding(e)
+ }
+
const renderToolbar = props.toolbar === undefined || props.toolbar
const inlineToolbarControls = props.inlineToolbarControls || ["bold", "italic", "underline", "clear"]
const editable = props.readOnly === undefined || !props.readOnly
@@ -711,7 +748,9 @@ const MUIRichTextEditor: RefForwardingComponent =
onChange={handleChange}
readOnly={props.readOnly}
handleKeyCommand={handleKeyCommand}
+ keyBindingFn={keyBindingFn}
ref={editorRef}
+ {...props.draftEditorProps}
/>