Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webkom/lego-editor
📝 A React rich text editor written in TS with Slate.js for lego-webapp
https://github.com/webkom/lego-editor
hacktoberfest lego-webapp react slate vite wysiwyg
Last synced: 3 months ago
JSON representation
📝 A React rich text editor written in TS with Slate.js for lego-webapp
- Host: GitHub
- URL: https://github.com/webkom/lego-editor
- Owner: webkom
- License: mit
- Created: 2019-06-03T14:46:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T10:24:05.000Z (9 months ago)
- Last Synced: 2024-04-12T18:43:34.721Z (9 months ago)
- Topics: hacktoberfest, lego-webapp, react, slate, vite, wysiwyg
- Language: TypeScript
- Homepage:
- Size: 2.72 MB
- Stars: 6
- Watchers: 5
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lego-editor
[](https://ci.webkom.dev/webkom/lego-editor)  [](https://github.com/webkom/lego-editor/pulls?q=is%3Aopen+is%3Apr+label%3Adependencies) 
> Editor made for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org)
## Installation
- Add the package
```sh
$ yarn add @webkom/lego-editor
```
- Import the component in your project
```JSX
import Editor from '@webkom/lego-editor'
// Add the stylesheet
import '@webkom/lego-editor/dist/style.css'
// Also add the stylesheet from react-image-crop
import 'react-image-crop/dist/ReactCrop.css'
const YourComponent = () => (
)
```
## Extending the editor
Lego-editor uses [Slate.js](https://github.com/ianstormtaylor/slate) version [0.81](https://docs.slatejs.org/general/changelog). You can therefore add any plugins as described in this version of Slate.
The `` component accepts the prop `plugins`, which takes an array of plugins
(`plugins: (Editor => Editor)[]`).
## Props
| name | Type | Default | Description |
| ------------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | `string` | | The editors value/default value |
| `disabled` | `Boolean` | `False` | Disables the ability to edit the content |
| `simple` | `Boolean` | `False` | Removes the toolbar. |
| `onChange` | `string => void` | | Handler called when the editor value changes. Takes the serialized value |
| `onBlur` | `event => void` | | Handler called on blur |
| `onFocus` | `event => void` | | Handler called on focus |
| `autoFocus` | `Boolean` | `False` | Enables autoFocus |
| `placeholder` | `string` | | A placeholder shown when the editor is empty |
| `imageUpload` | `Blob => Promise>` | | A function for uploading images. Should contain `src` in the promise object. |
| `plugins` | `(Editor => Editor)[]` | | An array of plugins to load. The first plugin will be applied first (the last one will override any other plugins) |
| `domParser` | `string => HTMLDocument` | | Custom function that the deserializer will use to parse the input value to a HTML document. Can be useful for environments where the browser API is not available, like Node.js |
> See type definitions for more detailed types
## Example app
To test out the editor using the development application:
```sh
$ yarn dev
```
## Development
#### Installing dependencies
```sh
$ yarn
```
#### Building the module
```sh
$ yarn build
```
#### Linting & formatting
To run the linter & check formatting
```sh
$ yarn lint
```
Formatting with prettier
```sh
$ yarn prettier
```