Skip to main content

Basic Editor

note

We're using flexible playgrounds for live editing React code.

Default Editor#

Let's start with the smallest editor implementation.

import React from 'react';
import { SlatePlugins } from '@udecode/slate-plugins'
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

This looks the same than a <textarea>.

Styling#

Let's add a placeholder and some padding using editableProps props.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
note

Once you render multiple SlatePlugins, you'll need to pass unique id to each. This is optional for the first one.

Value#

Let's set the initial value of the editor to one block of text.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Change Handler#

Now we would like to listen to editor changes so we can save the value somewhere. Let's use onChange props.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
note

SlatePlugins children are rendered just before the editable component.

Now we're ready to use plugins!