# editordraft

> ``` import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from "react" import { DraftEditor, DraftViewer } from "editordraft"

Latest version **1.0.36** (published 2022-05-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install editordraft
pnpm add editordraft
yarn add editordraft
bun add editordraft
```

## 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.36 |
| Published | 2022-05-15 |
| First published | 2022-05-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 25 |
| Unpacked size | 585.1 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | cr7cr8 |

## Links

- npm: https://www.npmjs.com/package/editordraft
- Repository: https://github.com/cr7cr8/editorDraft
- Homepage: https://github.com/cr7cr8/editorDraft#readme
- Issues: https://github.com/cr7cr8/editorDraft/issues
- npm.io page: https://npm.io/package/editordraft

## Dependencies (25)

- [axios](https://npm.io/package/axios.md) ^0.26.1
- [react](https://npm.io/package/react.md) ^18.0.0
- [draft-js](https://npm.io/package/draft-js.md) ^0.11.7
- [immutable](https://npm.io/package/immutable.md) ^3.8.2
- [react-dom](https://npm.io/package/react-dom.md) 18.0.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.17.10
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.10
- [emoji-regex](https://npm.io/package/emoji-regex.md) ^10.1.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.6.2
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.9.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.8.1
- [react-countdown](https://npm.io/package/react-countdown.md) ^2.3.2
- [react-easy-crop](https://npm.io/package/react-easy-crop.md) ^4.1.5
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.17.10
- [html-react-parser](https://npm.io/package/html-react-parser.md) ^1.4.12
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.7
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.6.2
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^2.2.2
- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^5.3.1
- [draft-js-export-html](https://npm.io/package/draft-js-export-html.md) ^1.4.1
- [draft-js-import-html](https://npm.io/package/draft-js-import-html.md) ^1.4.1
- [react-image-lightbox](https://npm.io/package/react-image-lightbox.md) ^5.1.4
- [@draft-js-plugins/editor](https://npm.io/package/@draft-js-plugins/editor.md) ^4.1.3
- [@multiavatar/multiavatar](https://npm.io/package/@multiavatar/multiavatar.md) ^1.0.7
- [react-element-to-jsx-string](https://npm.io/package/react-element-to-jsx-string.md) ^15.0.0

## Recent versions

- 1.0.36 (latest) — 2022-05-15
- 1.0.35 — 2022-05-15
- 1.0.34 — 2022-05-15
- 1.0.33 — 2022-05-15
- 1.0.32 — 2022-05-15
- 1.0.31 — 2022-05-15
- 1.0.30 — 2022-05-15
- 1.0.29 — 2022-05-15
- 1.0.28 — 2022-05-15
- 1.0.27 — 2022-05-15
- 1.0.26 — 2022-05-15
- 1.0.25 — 2022-05-15
- 1.0.24 — 2022-05-15
- 1.0.23 — 2022-05-15
- 1.0.22 — 2022-05-15
- … 21 more at https://npm.io/package/editordraft/versions

## README

### editordraft
```
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from "react"
import { DraftEditor, DraftViewer } from "editordraft"



function App() {


  const [preHtml, setPreHtml] = useState("")
  const [themeMode, setThemeMode] = useState("light")
  const [colorIndex, setColorIndex] = useState(2)

  useEffect(function () {
    console.log(themeMode)
    console.log(colorIndex)
  })

  return (
    <>

      <div>
        <button onClick={function () {
          setThemeMode(pre => pre === "light" ? "dark" : "light")
        }}>mode</button>

        <button onClick={function () {
          setColorIndex(pre => pre + 1)
        }}>color</button>

      </div>
      <DraftEditor
        colorIndex={colorIndex}
        themeMode={themeMode}
        peopleList={["UweF23", "UweF22", "TonyCerl", "JimWil", "大发发", "Jimberg", "m大Gsd哈"]}
        avatarPeopleList={["UweF23", "TonyCerl", "大发发", "m大Gsd哈"]}
        downloadAvatarUrl={`https://picsum.photos/200`}
        genAvatarLink={function (downloadAvatarUrl, personName) {
          return downloadAvatarUrl// + personName
        }}

        onSubmit={function (preHtmlObj, { editorState, theme, voteArr, voteTopic, pollDuration, voteId, imageObj, imageBlockNum, setDisableSubmit, clearState }) {

          console.log(preHtmlObj)
          setPreHtml(preHtmlObj.content)
          clearState()
          setDisableSubmit(false)
          // const promiseArr = [
          //     ...uploadPreHtml(preHtmlObj),  // commentOut when local
          //     ...uploadImage(imageObj), // commentOut when local
          //     ...uploadVote({ voteArr, voteTopic, pollDuration, voteId }) // commentOut when local
          // ]

          // Promise.allSettled(promiseArr).then((arr) => {
          //     setDisableSubmit(false)
          //     clearState()
          //     setPostArr(pre => [preHtmlObj, ...pre])
          // })
        }}


      />

      <DraftViewer
        colorIndex={colorIndex}
        themeMode={themeMode}
        preHtml={preHtml}
        downloadImageUrl=""
        downloadVoteUrl=""
      />

    </>
  );


}

export default App;

```


git push -f origin master
npm version patch
npm publish

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