React Material UI Rich Text Editor

A WYSIWYG rich text editor built with Slate using Material UI components. This project is heavily influenced by the examples provided in the Slate documentation and this article on Smashing Magazine.

Installation

npm install --save @jeremyling/react-material-ui-rich-text-editor

The following packages are peer dependencies and must be installed in your project for this package to work.

@emotion/react
@emotion/styled
@mui/icons-material
@mui/material
lodash
react-mui-color

Usage Example

import React, { useState } from "react";
import Editor from "@jeremyling/react-material-ui-rich-text-editor";

const initialHtml = "<p>Paragraph</p>";

export default function RichTextEditor(props) {
  const [html, setHtml] = useState(initialHtml);

  return <Editor html={html} updateHtml={(html) => setHtml(html)} />;
}

Props

| Prop | Type | Default | Description | | -------------- | -------- | -------------- | --------------------------------------------------------- | | html | string | undefined | HTML to be deserialized as value. | | updateHtml | func | (html) => {} | Method to update html, taking serialized html as argument | | containerProps | object | undefined | Props to pass to the Material UI Paper wrapper | | editableProps | object | undefined | Props to pass to the Slate Editable component |

If html is not set, value will default to

[
  {
    "type": "Paragraph",
    "children": [{ "text": "" }]
  }
]