# @slate-editor/utils
> Utils for slate-editor.
Latest version **5.1.0** (published 2018-10-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install @slate-editor/utils
pnpm add @slate-editor/utils
yarn add @slate-editor/utils
bun add @slate-editor/utils
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 5.1.0 |
| Published | 2018-10-25 |
| First published | 2018-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 266 |
| Author | Nossas |
| Maintainers | gabrielrtakeda, nossas |
| Keywords | slate, rich-text, editor, react, slate-plugins |
## Links
- npm: https://www.npmjs.com/package/@slate-editor/utils
- Repository: https://github.com/nossas/slate-editor
- Issues: https://github.com/nossas/slate-editor/issues
- npm.io page: https://npm.io/package/@slate-editor/utils
## Dependencies (1)
- [react](https://npm.io/package/react.md) ^16.2.0
## Alternatives
- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads
## Recent versions
- 5.1.0 (latest) — 2018-10-25
- 5.0.0-alpha.9e6f4feb (canary) — 2018-04-20
- 5.0.0 — 2018-05-08
- 5.0.0-alpha.f4219f70 — 2018-04-20
- 5.0.0-alpha.03550d1c — 2018-04-20
- 5.0.0-alpha.c75189d0 — 2018-04-20
- 5.0.0-alpha.19a19572 — 2018-04-20
- 5.0.0-alpha.f2d763f7 — 2018-04-20
- 5.0.0-alpha.f7181996 — 2018-04-20
- 5.0.0-alpha.dbf50702 — 2018-04-20
- 5.0.0-alpha.ecf4264b — 2018-04-20
## README
slate-editor
A complete rich text editor based on [SlateJS](https://github.com/ianstormtaylor/slate) framework
[](https://www.npmjs.com/package/slate-editor)
[](https://www.npmjs.com/package/slate-editor)
[](https://github.com/nossas/slate-editor/blob/master/LICENSE)
## Installation
The slate-editor is available as an [npm package](https://www.npmjs.com/package/slate-editor).
```sh
yarn add slate-editor
```
## Usage
You can use which plugin you want. No need to use [all plugins available](./packages).
In the example below we only add the **[bold](./packages/slate-editor-bold-plugin)** plugin with its button in the toolbar.
**Basic example**
```jsx
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { BoldPlugin, BoldButton } from '@slate-editor/bold-plugin'
const plugins = [BoldPlugin()]
const SlateRichTextEditor = () => (
)
export default SlateRichTextEditor
```
**Advanced example**
- Take a look at the [full working example](./packages/slate-editor-example/src/example/pages/Home.js).
## Plugins
The slate-editor plugins can be installed individually. Check the list below:
| **Docs** | **Package** |
|:--------------------------------------------------------------|:-------------------------------------|
| [Alignment](./packages/slate-editor-alignment-plugin) | `@slate-editor/alignment-plugin` |
| [Bold](./packages/slate-editor-bold-plugin) | `@slate-editor/bold-plugin` |
| [Color](./packages/slate-editor-color-plugin) | `@slate-editor/color-plugin` |
| [Embed](./packages/slate-editor-embed-plugin) | `@slate-editor/embed-plugin` |
| [FontFamily](./packages/slate-editor-font-family-plugin) | `@slate-editor/font-family-plugin` |
| [FontSize](./packages/slate-editor-font-size-plugin) | `@slate-editor/font-size-plugin` |
| [Grid](./packages/slate-editor-grid-plugin) | `@slate-editor/grid-plugin` |
| [Image](./packages/slate-editor-image-plugin) | `@slate-editor/image-plugin` |
| [Italic](./packages/slate-editor-italic-plugin) | `@slate-editor/italic-plugin` |
| [Link](./packages/slate-editor-link-plugin) | `@slate-editor/link-plugin` |
| [List](./packages/slate-editor-list-plugin) | `@slate-editor/list-plugin` |
| [StateLogger](./packages/slate-editor-state-logger) | `@slate-editor/state-logger` |
| [Strikethrough](./packages/slate-editor-strikethrough-plugin) | `@slate-editor/strikethrough-plugin` |
| [ToggleReadonly](./packages/slate-editor-toggle-readonly) | `@slate-editor/toggle-readonly` |
| [Underline](./packages/slate-editor-underline-plugin) | `@slate-editor/underline-plugin` |
## Contributing
To help us develop new features or fix bugs, to setup your development environment is too simple. Just follow the steps:
- Clone the project
```
git clone git@github.com:nossas/slate-editor.git
```
- Start the example
```
yarn dev
```
And it's done! Easy, isn't?!
---
To get the **ImagePlugin** working in 100% of its functionality, you need to define the
environment variables below in .env file:
- **REACT_APP_API_URL**: e.g. https://api.bonde.org
- The URL of the API
- **REACT_APP_SIGNING_URL_ENDPOINT**: e.g. `/uploads`
- The endpoint that will sign the URL to upload the image to AWS S3.
- To sign the URL on your API, you can check an example with RoR [here](https://github.com/nossas/bonde-server/blob/master/app/controllers/uploads_controller.rb).
## References
- [SlateJS](https://github.com/ianstormtaylor/slate) - A completely customizable framework for building rich text editors.
---
_Source: https://npm.io/package/@slate-editor/utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._