npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-draft-wysiwyg

v1.15.0

Published

A wysiwyg on top of DraftJS.

Downloads

1,109,635

Readme

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.

Build Status

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

$ npm install --save react-draft-wysiwyg draft-js

Getting started

Editor can be used as simple React Component:

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;

Docs

For more documentation check here.

Questions Discussions

For discussions join public channel #rd_wysiwyg in DraftJS Slack Organization.

Fund

You can fund project at Patreon.

Thanks

Original motivation and sponsorship for this work came from iPaoo. I am thankful to them for allowing the Editor to be open-sourced.

License

MIT.