A React Minimal Rich Text Editor based on Slate.

Slate but Less. Demo

Dealing with Slate can be a very tedious task for most of us. So here is a plug and play Editor and a Renderer.

The idea is simple:
- input a state
- outputs a result (save it somewhere)
- render where you need it

Usage

Import components:

import { SlateEditor, SlateContent } from "slateless";

Create a State and OnChange handler:

const [value, setValueChange] = useState("");
const onValueChange = (val: string) => {
    setValueChange(val);
};

Bind the state and handler into the Editor:

<SlateEditor value={value} onChange={onValueChange} />

Bind the state into the Content Renderer:

It's completely up to you when you want to re-render this component.

Let's assume you want to render this everytime you are editing the editor.
code:

<SlateContent value={value} key={Date.now()} />

Customizing Toolbars:

<SlateEditor
    value={value}
    onChange={onValueChange}
    toolbar={[
        "heading-1",
        "heading-2",
        "heading-3",
        "heading-4",
        "heading-5",
        "heading-6",
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "link",
        "numbered-list",
        "bulleted-list",
        "left",
        "center",
        "right",
        "image"
    ]}
/>