react-styledtexteditable
React component for styled text contenteditable element. The output is json. Currently bold, italic, code, and normal styles are supported
Install
npm install react-styledtexteditable
Usage
{ const content setContent = const selection setSelection = const useInlineStyle setUseInlineStyle = const select setSelect = const active setActive = const ref = React const onClick = { if etarget === refcurrent // end of the text } const normalClick = { if useInlineStyle && useInlineStylestyle === INLINE_NORMAL else } const boldClick = { if useInlineStyle && useInlineStylestyle === INLINE_BOLD else } const italicClick = { if useInlineStyle && useInlineStylestyle === INLINE_ITALIC else } const codeClick = { if useInlineStyle && useInlineStylestyle === INLINE_CODE else } const linkClick = { if useInlineStyle && useInlineStylestyle === INLINE_LINK else } const onChange = { console } const onNavigate = { // type: MovePrev, MoveNext, MoveUp, MoveDown, MergePrev, Enter console } const onSelection = { } const editable = <StyledTextEditable style= caretColor: '#323500' content= content selection= selection useInlineStyle= useInlineStyle select= select onUseInlineStyleDone= { } onChange= onChange onNavigate= onNavigate onSelection= onSelection onSelectDone= { } onActive= { } /> const normalBtn = <div onClick= normalClick className= useInlineStyle && useInlineStylestyle == INLINE_NORMAL ? 'btn btn-select' : 'btn'>Normal</div> const boldBtn = <div onClick= boldClick className= useInlineStyle && useInlineStylestyle == INLINE_BOLD ? 'btn btn-select' : 'btn' ><b>Bold</b></div> const italicBtn = <div onClick= italicClick className= useInlineStyle && useInlineStylestyle == INLINE_ITALIC ? 'btn btn-select' : 'btn' ><i>Italic</i></div> const codeBtn = <div onClick= codeClick className= useInlineStyle && useInlineStylestyle == INLINE_CODE ? 'btn btn-select' : 'btn' ><code style= backgroundColor: 'inherit' padding: '0' >Code</code></div> const linkBtn = <div onClick= linkClick className= useInlineStyle && useInlineStylestyle == INLINE_LINK ? 'btn btn-select' : 'btn' ><a href='#'>Link</a></div> return <> <div className='line' ref= ref onClick= onClick > editable active && <div className='toolbar'> normalBtn boldBtn italicBtn codeBtn linkBtn </div> </div> </>} ReactDOM
onChange
will be called as you type. The output of the initial content above would be as follows: