import React , { MouseEvent , ReactNode } from 'react' ; import { RichUtils } from 'draft-js' ; import clsx from 'clsx' ; import { DraftJsStyleButtonType } from '..' ; interface CreateInlineStyleButtonProp { style : string ; children : ReactNode ; } export default function createInlineStyleButton ( { style , children , } ) { return function InlineStyleButton ( props ) { const toggleStyle = ( event ) : void => { event . preventDefault ( ) ; props . setEditorState ( RichUtils . toggleInlineStyle ( props . getEditorState ( ) , style ) ) ; } ; const preventBubblingUp = ( event ) : void => { event . preventDefault ( ) ; } ; const styleIsActive = ( ) : boolean => props . getEditorState && props . getEditorState ( ) . getCurrentInlineStyle ( ) . has ( style ) ; const { theme } = props ; const className = styleIsActive ( ) ? clsx ( theme . button , theme . active ) : theme . button ; return ( < div className = { theme . buttonWrapper } onMouseDown = { preventBubblingUp } > < button className = { className } onClick = { toggleStyle } type = "button" children = { children } / > < /div>); } ; }