# mui-editor

> Made with create-react-library

Latest version **2.3.1** (published 2020-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install mui-editor
pnpm add mui-editor
yarn add mui-editor
bun add mui-editor
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2020-09-28 |
| First published | 2020-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 394 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | https://github.com/grumpyTofu |
| Maintainers | grumpytofu |

## Links

- npm: https://www.npmjs.com/package/mui-editor
- Repository: https://github.com/grumpyTofu/mui-editor
- npm.io page: https://npm.io/package/mui-editor

## Recent versions

- 2.3.1 (latest) — 2020-09-28
- 2.3.0 — 2020-09-23
- 2.2.9 — 2020-09-23
- 2.2.8 — 2020-09-23
- 2.2.7 — 2020-09-22
- 2.2.6 — 2020-09-18
- 2.2.5 — 2020-09-18
- 2.2.4 — 2020-09-17
- 2.2.3 — 2020-09-04
- 2.2.2 — 2020-09-02
- 2.2.1 — 2020-09-02
- 2.2.0 — 2020-09-02
- 2.1.1 — 2020-08-29
- 2.1.0 — 2020-08-29
- 2.0.0 — 2020-08-26
- … 4 more at https://npm.io/package/mui-editor/versions

## README

# mui-editor

> A library with a minimal layout editor built on Material-UI and a rich text editor built on quill.js for Material-UI design framework

[![NPM](https://img.shields.io/npm/v/mui-editor.svg)](https://www.npmjs.com/package/mui-editor) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install mui-editor @material-ui/core@4.11.0 @material-ui/icons react-quill@1.3.5
```

or

```bash
yarn add mui-editor @material-ui/core@4.11.0 @material-ui/icons react-quill@1.3.5
```

## Styling

Make sure to add the following script tag to ensure editor output is styled correctly

```html
<!-- Production Material-UI Library -->
<script
	src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"
	crossorigin="anonymous"
></script>
<!-- Fonts to support Material Design -->
<link
	rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
```

## Layout Editor Usage

```jsx
import React, { useState, useEffect } from 'react';
import MuiEditor from 'mui-editor';

export default props => {
	const [state, setState] = useState({
		sectionIdCount: null,
		dataFromDB: [],
	});
	useEffect(() => {
		fetch('/api/endpoint/goes/here')
			.then(res => res.json())
			.then(res => {
				setState({
					sectionIdCount: res.highestIdFromDB,
					dataFromDB: res.editorConfig,
				}); // Output data will contain the following: (html, editorConfig)
			})
			.catch(error => {
				console.error(error);
			});
	}, []);

	return (
		<MuiEditor
			output={data => console.log(data)}
			data={state.dataFromDB}
			sectionIdCount={state.sectionIdCount}
		/>
	);
};
```

## Additional Styling
Should any styling inconsistencies occur between the editor and output html of the editor, try using the following css in the index.html file to force styling.
```css
        /* Custom CSS for mui-editor */
        a[class*="mui-editor"] {
            color: #3f51b5;
            border: 1px solid rgba(63, 81, 181, 0.5);
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-weight: 500;
            line-height: 1.75;
            border-radius: 4px;
            letter-spacing: 0.02857em;
            text-transform: uppercase;
            cursor: pointer;
            padding: 3px 9px;
        }

        a[class*="mui-editor"]:hover {
            text-decoration: none;
            border: 1px solid #3f51b5;
            color: #3f51b5;
            background-color: rgba(63, 81, 181, 0.04);
        }

        div.MuiListItemText-root.MuiListItemText-multiline {
            border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
            padding-bottom: .75rem;
        }
```

## Text Editor Usage

```jsx
import React from 'react';
import { MuiTextEditor } from 'mui-editor';

export default props => {
	return <MuiTextEditor transparent output={data => console.log(data)} />;
};
```

## License

MIT © [https://github.com/grumpyTofu](https://github.com/https://github.com/grumpyTofu)

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