import React , { FC , KeyboardEvent } from 'react' ; import { Editor } from 'slate' ; import { useSlate } from 'slate-react' ; import { Button } from './Button' ; interface MarkButtonProps { format : string ; icon : string ; } const isMarkActive = ( editor , format ) => { const marks = Editor . marks ( editor ) ; return marks ? marks [ format ] === true : false ; } ; export const toggleMark = ( editor , format ) => { const isActive = isMarkActive ( editor , format ) ; if ( isActive ) { Editor . removeMark ( editor , format ) ; } else { Editor . addMark ( editor , format , true ) ; } } ; export const MarkButton = ( { format , icon } ) => { const editor = useSlate ( ) ; return ( < Button icon = { icon } active = { isMarkActive ( editor , format ) } onMouseDown = { ( event ) => { event . preventDefault ( ) ; toggleMark ( editor , format ) ; } } />); } ;