Add style option to custom controls

README.md

@@ -315,6 +315,7 @@ Object.assign(defaultTheme, {
 |---|---|---|---|
 |id|`string`|optional|The HTML id attribute for the control|
 |name|`string`|required|The name of the custom control. For rendering the control this name should be added to the `MUIRichTextEditor` `controls` property.|
+|style|`string`|optional|The optional style of the custom control. If omitted the `name` will be used. E.g. "header-one".|
 |icon|`JSX.Element`|optional|The `@material-ui/icons` icon for the control. For "atomic" control type, the icon is not required. [Check this](https://material.io/resources/icons/?style=baseline) for available icons.|
 |component|`React.FunctionComponent<TToolbarComponentProps>`|optional|The custom function component for the control. The icon has priority over the component, so if the icon is set the component will be ignored. For "atomic" control type, the component is not required.|
 |type|`string`|required|Either "inline", "block", "atomic" or "callback"|

examples/custom-controls/index.tsx

@@ -1,6 +1,9 @@
 import React, { FunctionComponent } from 'react'
 import { Chip, Avatar, Button } from '@material-ui/core'
 import InvertColorsIcon from '@material-ui/icons/InvertColors'
+import LooksOneIcon from '@material-ui/icons/LooksOne'
+import LooksTwoIcon from '@material-ui/icons/LooksTwo'
+import Looks3Icon from '@material-ui/icons/Looks3'
 import MUIRichTextEditor from '../../'
 import { TToolbarComponentProps } from '../../src/components/Toolbar'
 import { EditorState } from 'draft-js'
@@ -63,8 +66,26 @@ const CustomControls = () => {
         <MUIRichTextEditor 
             label="Type something here..."
             onSave={save}
-            controls={["title", "bold", "my-block", "my-style", "clear", "my-callback", "clear-callback", "save"]}
+            controls={["h1", "h2", "h3", "bold", "my-block", "my-style", "clear", "my-callback", "clear-callback", "save"]}
             customControls={[
+                {
+                    name: "h1",
+                    style: "header-one",
+                    icon: <LooksOneIcon />,
+                    type: "block"
+                },
+                {
+                    name: "h2",
+                    style: "header-two",
+                    icon: <LooksTwoIcon />,
+                    type: "block"
+                },
+                {
+                    name: "h3",
+                    style: "header-three",
+                    icon: <Looks3Icon />,
+                    type: "block"
+                },
                 {
                     name: "my-style",
                     icon: <InvertColorsIcon />,

src/MUIRichTextEditor.tsx

@@ -622,26 +622,23 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         if (!props.customControls) {
             return
         }
-        for (let control of props.customControls) {
-            if (control.name.toUpperCase() === style) {
-                if (control.onClick) {
-                    setTimeout(() => editorRef.current?.blur(), 0)
-                    const newState = control.onClick(editorState, control.name, document.getElementById(id))
-                    if (newState) {
-                        if (newState.getSelection().isCollapsed()) {
-                            setEditorState(newState)
-                        }
-                        else {
-                            updateStateForPopover(newState)
-                        }
-                    }
-                    else {
-                        if (!editorState.getSelection().isCollapsed()) {
-                            refocus()
-                        }
-                    }
+
+        const control = props.customControls?.find(c => (c.style ?? c.name) === style)
+        if (control?.onClick) {
+            setTimeout(() => editorRef.current?.blur(), 0)
+            const newState = control.onClick(editorState, control.name, document.getElementById(id))
+            if (newState) {
+                if (newState.getSelection().isCollapsed()) {
+                    setEditorState(newState)
+                }
+                else {
+                    updateStateForPopover(newState)
+                }
+            }
+            else {
+                if (!editorState.getSelection().isCollapsed()) {
+                    refocus()
                 }
-                break
             }
         }
     }

src/components/Toolbar.tsx

@@ -38,6 +38,7 @@ export type TToolbarComponentProps = {
 export type TCustomControl = {
     id?: string
     name: string
+    style?: string
     icon?: JSX.Element
     type: TControlType
     component?: FunctionComponent<TToolbarComponentProps>
@@ -213,7 +214,7 @@ const Toolbar: FunctionComponent<TToolbarProps> = (props) => {
                         id: customControl.id || (customControl.name + "Id"),
                         name: customControl.name,
                         label: customControl.name,
-                        style: customControl.name.toUpperCase(),
+                        style: customControl.style ?? customControl.name,
                         icon: customControl.icon,
                         component: customControl.component,
                         type: customControl.type,