Fix clear function (niuware#106)

* Add clear inline styles function

* Implement clearInlineStyles function

* Update package version

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",

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<any, IMUIRichTextEditorProps> =
     }
 
     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 = () => {

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 }