@webkom/lego-editor NPM

lego-editor

npm (scoped) Dependencies

Editor made for lego-webapp written with Slate.js

Installation

Add the package
```
$ yarn add @webkom/lego-editor
```

Import the component in your project

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 = () => (
  <div>
    <Editor placeholder="Let the words flow!"/>
  </div>
)

Extending the editor

Lego-editor uses Slate.js version 0.81. You can therefore add any plugins as described in this version of Slate. The <Editor /> 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<Record<string,any>>`		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