Skip to content

๐Ÿ“ A React rich text editor written in TS with Slate.js for lego-webapp

License

Notifications You must be signed in to change notification settings

webkom/lego-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

lego-editor

Build Status npm (scoped) Dependabot 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

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