# react-draft-wysiwyg-johgeocoder

> A wysiwyg on top of DraftJS.

Latest version **0.0.10** (published 2019-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-draft-wysiwyg-johgeocoder
pnpm add react-draft-wysiwyg-johgeocoder
yarn add react-draft-wysiwyg-johgeocoder
bun add react-draft-wysiwyg-johgeocoder
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2019-09-11 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jyoti Puri |
| Maintainers | johgeocoder |

## Links

- npm: https://www.npmjs.com/package/react-draft-wysiwyg-johgeocoder
- Repository: https://github.com/nepawebsolutions/react-draft-wysiwyg
- Homepage: https://github.com/nepawebsolutions/react-draft-wysiwyg#readme
- Issues: https://github.com/nepawebsolutions/react-draft-wysiwyg/issues
- npm.io page: https://npm.io/package/react-draft-wysiwyg-johgeocoder

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [linkify-it](https://npm.io/package/linkify-it.md) ^2.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [draftjs-utils](https://npm.io/package/draftjs-utils.md) ^0.9.3
- [html-to-draftjs](https://npm.io/package/html-to-draftjs.md) ^1.4.0

## Recent versions

- 0.0.10 (latest) — 2019-09-11
- 0.0.9 — 2019-09-11
- 0.0.8 — 2019-09-11
- 0.0.7 — 2019-09-11
- 0.0.6 — 2019-09-11
- 0.0.5 — 2019-09-11
- 0.0.4 — 2019-09-11
- 0.0.3 — 2019-09-11
- 0.0.2 — 2019-09-11
- 0.0.1 — 2019-09-02

## README

# React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).

[![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)

![](http://i.imgur.com/tU7kJ6i.gif)

## Features
- Configurable toolbar with option to add/remove controls.
- Option to change the order of the controls in the toolbar.
- Option to add custom controls to the toolbar.
- Option to change styles and icons in the toolbar.
- Option to show toolbar only when editor is focused.
- Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
- Support for block types: Paragraph, H1 - H6, Blockquote, Code.
- Support for setting font-size and font-family.
- Support for ordered / unordered lists and indenting.
- Support for text-alignment.
- Support for coloring text or background.
- Support for adding / editing links
- Choice of more than 150 emojis.
- Support for mentions.
- Support for hashtags.
- Support for adding / uploading images.
- Support for aligning images, setting height, width.
- Support for Embedded links, flexibility to set height and width.
- Option provided to remove added styling.
- Option of undo and redo.
- Configurable behavior for RTL and Spellcheck.
- Support for placeholder.
- Support for WAI-ARIA Support attributes
- Using editor as controlled or un-controlled React component.
- Support to convert Editor Content to HTML, JSON, Markdown.
- Support to convert the HTML generated by the editor back to editor content.
- Support for internationalization.

## Installing
The package can be installed from npm `react-draft-wysiwyg-johgeocoder`

```
$ npm install --save react-draft-wysiwyg-johgeocoder draft-js draftjs-to-html html-to-draftjs
```

## Getting started
Editor can be used as simple React Component:
```js
import React, { useState, useEffect } from 'react';
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';
import draftToHtml from 'draftjs-to-html';
import { Editor } from 'react-draft-wysiwyg-johgeocoder';
import 'react-draft-wysiwyg-johgeocoder/dist/react-draft-wysiwyg.css';

const App = () => {

  const [editorState, setEditorState] = useState(null)

  useEffect(() => {
    const html = '<p>-- -- <br><strong>Lunes Test</strong>  |  Sales Executive<br>+1 (888) 888-8888</p><img src="https://s3.amazonaws.com/exceedbot-webchat/monday.gif" alt="undefined" style="float:left;height: auto;width: auto"/><p></p>';
    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const newEditorState = EditorState.createWithContent(contentState);
      setEditorState(newEditorState)
    }
  }, []) //run once on initial render
  
  useEffect(() => {
    if(editorState){
      var html = draftToHtml(convertToRaw(editorState.getCurrentContent()))
      console.log(html)
    }
  }) //Run every state change

  var onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState)
  }

  return <>
  <div style={{width: '600px', margin: '0 auto', border:'1px solid black'}}>
    <Editor
        editorState={editorState}
        hasHtmlEditorOption={true}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(newEditorState) => onEditorStateChange(newEditorState)}
      />
  </div>
  </>
}

export default App;
```

## Docs
For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).

## Questions Discussions
For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).

## Thanks
Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.

## License
MIT.

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