# react-styledtexteditable

> react-styledtexteditable =====================

Latest version **1.0.34** (published 2019-07-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-styledtexteditable
pnpm add react-styledtexteditable
yarn add react-styledtexteditable
bun add react-styledtexteditable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.34 |
| Published | 2019-07-26 |
| First published | 2019-05-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 107.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andybau |
| Keywords | react-component, contenteditable, editable, plaintext, html, react |

## Links

- npm: https://www.npmjs.com/package/react-styledtexteditable
- Repository: https://github.com/juliuswkwk/react-styledtexteditable
- Homepage: https://github.com/juliuswkwk/react-styledtexteditable#readme
- Issues: https://github.com/juliuswkwk/react-styledtexteditable/issues
- npm.io page: https://npm.io/package/react-styledtexteditable

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.8.6

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.34 (latest) — 2019-07-26
- 1.0.33 — 2019-07-05
- 1.0.32 — 2019-05-24
- 1.0.31 — 2019-05-21
- 1.0.30 — 2019-05-17
- 1.0.29 — 2019-05-17
- 1.0.28 — 2019-05-16
- 1.0.27 — 2019-05-16
- 1.0.26 — 2019-05-16
- 1.0.25 — 2019-05-15
- 1.0.24 — 2019-05-15
- 1.0.23 — 2019-05-14
- 1.0.22 — 2019-05-12
- 1.0.21 — 2019-05-12
- 1.0.20 — 2019-05-11
- … 19 more at https://npm.io/package/react-styledtexteditable/versions

## README

react-styledtexteditable
=====================

React component for styled text contenteditable element. The output is json. Currently bold, italic, code, and normal styles are supported

## Install

```sh
npm install react-styledtexteditable
```

## Usage

```javascript
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import StyledTextEditable, {n, b, i, c, l, INLINE_NORMAL, INLINE_BOLD, INLINE_ITALIC, INLINE_CODE, INLINE_LINK} from 'react-styledtexteditable'

function Note() {
    const [content, setContent] = useState([n('Hello, '), i(''), b('World!'), i(' Welcome to '), c('react-styledtexteditable'), n(' '), l('google', 'https://www.google.com')])
    const [selection, setSelection] = useState(null)
    const [useInlineStyle, setUseInlineStyle] = useState(null)
    const [select, setSelect] = useState(null)
    const [active, setActive] = useState(false)
    const ref = React.createRef()

    const onClick = (e) => {
        if (e.target === ref.current) {
            setSelect({anchor: 1000000, focus: 1000000}) // end of the text
        }
    }

    const normalClick = () => {
        if (useInlineStyle && useInlineStyle.style === INLINE_NORMAL) {
            setUseInlineStyle(null)
        } else {
            setUseInlineStyle({style: INLINE_NORMAL})
        }
    }

    const boldClick = () => {
        if (useInlineStyle && useInlineStyle.style === INLINE_BOLD) {
            setUseInlineStyle(null)
        } else {
            setUseInlineStyle({style: INLINE_BOLD})
        }
    }

    const italicClick = () => {
        if (useInlineStyle && useInlineStyle.style === INLINE_ITALIC) {
            setUseInlineStyle(null)
        } else {
            setUseInlineStyle({style: INLINE_ITALIC})
        }
    }

    const codeClick = () => {
        if (useInlineStyle && useInlineStyle.style === INLINE_CODE) {
            setUseInlineStyle(null)
        } else {
            setUseInlineStyle({style: INLINE_CODE})
        }
    }

    const linkClick = () => {
        if (useInlineStyle && useInlineStyle.style === INLINE_LINK) {
            setUseInlineStyle(null)
        } else {
            setUseInlineStyle({style: INLINE_LINK})
        }
    }

    const onChange = (val) => {
        setContent(val)
        console.log(JSON.stringify(val))
    }

    const onNavigate = (type, position, e) => {
        // type: MovePrev, MoveNext, MoveUp, MoveDown, MergePrev, Enter

        console.log(type, position)
    }

    const onSelection = (val) => {
        setSelection(val)
    }

    const editable = <StyledTextEditable 
        style={ {caretColor: '#323500'} } 

        content={ content } 
        selection={ selection } 
        useInlineStyle={ useInlineStyle }
        select={ select }

        onUseInlineStyleDone={ () => { setUseInlineStyle(null) } }
        onChange={ onChange } 
        onNavigate={ onNavigate }
        onSelection={ onSelection } 
        onSelectDone={ () => { setSelect (null) } }
        onActive={ (val) => { setActive(val) } }
        />
    const normalBtn = <div onClick={ normalClick } className={ (useInlineStyle && useInlineStyle.style == INLINE_NORMAL) ? 'btn btn-select' : 'btn'}>Normal</div>
    const boldBtn = <div onClick={ boldClick } className={ (useInlineStyle && useInlineStyle.style == INLINE_BOLD) ? 'btn btn-select' : 'btn' }><b>Bold</b></div>
    const italicBtn = <div onClick={ italicClick } className={ (useInlineStyle && useInlineStyle.style == INLINE_ITALIC) ? 'btn btn-select' : 'btn' }><i>Italic</i></div>
    const codeBtn = <div onClick={ codeClick } className={ (useInlineStyle && useInlineStyle.style == INLINE_CODE) ? 'btn btn-select' : 'btn' }><code style={ {backgroundColor: 'inherit', padding: '0'} }>Code</code></div>
    const linkBtn = <div onClick={ linkClick } className={ (useInlineStyle && useInlineStyle.style == 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.render(<Note />, document.getElementById('note'))
```
`onChange` will be called as you type. The output of the initial content above would be as follows:

```json
[
    {"type":"normal","text":"Hello, "},
    {"type":"bold","text":"World!"},
    {"type":"italic","text":" Welcome to "},
    {"type":"code","text":"react-styledtexteditable"}
]
```

---
_Source: https://npm.io/package/react-styledtexteditable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._