diff --git a/package.json b/package.json index 6666762..9bbfb6d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mui-rte", - "version": "1.16.1", + "version": "1.16.2", "description": "Material-UI Rich Text Editor and Viewer", "keywords": [ "material-ui", diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx index 3f5482a..c8c8e8e 100644 --- a/src/MUIRichTextEditor.tsx +++ b/src/MUIRichTextEditor.tsx @@ -16,7 +16,7 @@ import Media from './components/Media' import Blockquote from './components/Blockquote' import CodeBlock from './components/CodeBlock' import UrlPopover, { TAlignment, TUrlData, TMediaType } from './components/UrlPopover' -import { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGt } from './utils' +import { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGt, clearInlineStyles } from './utils' const styles = ({ spacing, typography, palette }: Theme) => createStyles({ root: { @@ -343,15 +343,10 @@ const MUIRichTextEditor: RefForwardingComponent = } const handleClearFormat = () => { + const withoutStyles = clearInlineStyles(editorState) const selectionInfo = getSelectionInfo(editorState) - let newEditorState = editorState - selectionInfo.inlineStyle.forEach((effect) => { - if (effect) { - newEditorState = RichUtils.toggleInlineStyle(newEditorState, effect) - } - }) - newEditorState = RichUtils.toggleBlockType(newEditorState, selectionInfo.blockType) - setEditorState(newEditorState) + const newEditorState = EditorState.push(editorState, withoutStyles, 'change-inline-style'); + setEditorState(RichUtils.toggleBlockType(newEditorState, selectionInfo.blockType)) } const handleSave = () => { diff --git a/src/utils.ts b/src/utils.ts index 70472cb..2e545a2 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -89,4 +89,11 @@ const isGt = (value: number, maxValue?: number): boolean => { return value > maxValue } -export { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGt } +const clearInlineStyles = (editorState: EditorState): ContentState => { + const styles = ['BOLD', 'ITALIC', 'UNDERLINE', 'STRIKETHROUGH'] + return styles.reduce((newContentState: ContentState, style: string) => ( + Modifier.removeInlineStyle(newContentState, editorState.getSelection(), style) + ), editorState.getCurrentContent()) +} + +export { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGt, clearInlineStyles }