React Material WYSIWYG Editor

A Material-UI based WYSIWYG editor for React.

• Built using DraftJs.
• Material UI design for the editor toolbar buttons.
• Light & Dark themes for the editor.

Light Theme:

Dark Theme:

The editor is customizable and I have already added some options to customize. If you'd like to have more customization ability, let me know by making a feature request.

Installation

The package is avaiable via npm - react-material-wysiwyg. To install, run the following command (You need to have node or npm or yarn installed):

// with npm
npm install react-material-wysiwyg

// with yarn
yarn add react-material-wysiwyg

Usage

After installation, you can just import the MaterialEditor component as follows:

import { MaterialEditor } from "react-material-wysiwyg";

<MaterialEditor />;

See the example (App.js) in Github repo, on how to customize the editor.

More details on how to customize, will be added soon.

Upcoming Features

0.1.0 Initial set of changes

0.2.0

• Fixed the bug with input props.
• Addressed the "key" issue with theme toggler.
• Changed theme colors and styling.
• Changed CssBaseline to ScopedCssBaseline to restrict theming to the child components.
• Added a button style for typography due to poor alignment with dropdown selection. (Will fix the alignment in later versions)
• Added an option to accept custom colors for the theme.
• Added code comments wherever possible.
• Added snapshots to this documentation.
• Rewritten some parts of the code to simplify the package structure.

Current Version: 0.2.1

• Changed images in documentation (The light image border isn't visible in previous ones)

0.3.0

• Add/Remove Hyperlinks
• Text alignment
• Output HTML

0.4.0

• Add/Remove Images
• Undo/Redo
• Change default RichUtils styling

0.5.0

• Fix Dropdown alignment issue
• Text & highlight color
• Subscript and Superscript

0.6.0

• Code refactoring & bug fixes
• New feature requests

Help/Feature requests

• Use the Github "Discussion" section for help.
• Bug reports or feature/enhancement requests can be made through "Issues" section.