ready-slate

All options with hovering toolbar for text selection:

Lorem Ipsum"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
﻿
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque placerat convallis. Nullam quis pulvinar lectus. Cras suscipit ligula in bibendum condimentum. Vestibulum magna risus, finibus vel pharetra ac, tempor at erat. Phasellus placerat sagittis nisi, nec lobortis metus viverra eu. Donec in placerat arcu. Cras commodo feugiat vehicula. Integer in sem eget nulla molestie dictum sed nec diam. Sed vitae hendrerit augue. Quisque ut eros dignissim magna interdum consectetur. Duis volutpat magna at ullamcorper mollis.

Just a few options:

﻿

HTML serialization (slateToHtmlString):

Here is a list:
Item 1
Item 2

Internal state:

[{
    "type": "paragraph",
    "children": [{
        "text": "Here is a list:"
    }]
}, {
    "type": "bulletedList",
    "children": [{
        "type": "listItem",
        "children": [{
            "text": "Item 1"
        }]
    }, {
        "type": "listItem",
        "children": [{
            "text": "Item 2"
        }]
    }]
}]

Serialized to HTM (new lines and indentation are added for vlisibility):

<p>Here is a list:</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

With placeholder:

﻿

With footer (e.g. count words):

Words are counted!

SingleLine (prevent from adding new line on Enter / paste multi-lines):

﻿

Disabled:

Here a link to the package on npm

With overridden css classes:

﻿

With predefined texts (insert from dropdown):

﻿