lego-editor

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

See type definitions for more detailed types

Example app

To test out the editor using the development application:

$ yarn dev

Development

Installing dependencies

$ yarn

Building the module

$ yarn build

Linting & formatting

To run the linter & check formatting

$ yarn lint

Formatting with prettier

$ yarn prettier