To get started, use the following command in whatever directory you want to initialise the project in:Ĭonst handleChange = (value : Node ) : void =>, ) Ī few notes: cloneRange() returns a new Range object so that we can alter the start of it without affecting our current selection. We’ll be using the excellent Create-React-App for initialising this project. Updates to the tutorial will be reflected here. This tutorial uses Slate 0.57.1, I recommend that this is the version that you use when following along. This has stabilised somewhat since the start of 2020, but it is not possible to guarantee that this will remain the case forever until version 1.0.0. Slate is still in beta and has undergone a number of breaking changes over the past few months. A quick note on Slate.js beta and breaking changes I would also expect that you’ve run through the Slate.js walkthrough as it gives a good overview of styling nodes and applying custom formatting - which we do not touch on here. I like this tutorial project because it should give you the necessary skills to build upon it to create something pretty cool!īefore we begin, this tutorial expects that you have a basic knowledge of React, ES6 and Typescript syntax (we keep the TS pretty simple here though, as it’s more for the developer experience). On top of that, there isn’t any typescript documentation for Slate as it stands, so this can also act as a primer if you want to use Slate with TS in your future projects. We’ll do it all in Typescript to take advantage of Slate.js’ excellent type definitions.

Allow the user to change the current word for one in the list either with the mouse or keyboard.

Take the first 10 words returned and display them in a drop down modal window that follows the cursor.

Building a simple editor that saves the current word to state and then runs a thesaurus request on that word.

This tutorial aims to pick up where the walkthrough leaves off.

However, once you’ve completed that, you’re pretty much on your own. Slate.js has a comprehensive walkthrough for getting up and running. It mirrors the DOM: Slate.js saves nodes as a nested structure, which means they are familiar to deal with and style.Slate accepts deeply nested structures without complaint and allows you to specify how they are rendered. There’s no hardcoded schema: at Tr33llion, we are using an n-ary tree structure for our documents.It’s built in React: so no need to use a completely different view layer to the rest of your site or worry about stale state in components (that isn’t your fault at least 😉).

The pros of using Slate over, say, Draft.js or ProseMirror are many: Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs-which are becoming table stakes for applications on the web-without your codebase getting mired in complexity. Slate is a completely customizable framework for building rich text editors. The current best of these (IMHO) is Slate.js:

Luckily, there are frameworks out there that take much of the hassle out of using contentEditable whilst keeping the things that make it good. Dealing with contentEditable directly though is… horrible. After extensive testing though I can confirm that it’s the best way to go for dynamic, rich user input. You could always set the component to contentEditable='true' but I could write a whole essay on why contentEditable is broken (I just might one day…). A simple case of this are blog comments: where leaves a lot to be desired from a UX point of view. Other times, however, this input is much more dynamic. In these cases forms are ideal as they let you specifically state what you need from the user and then save it in a server-friendly format.

Maybe we should try to answer this by looking at the type of input you want to get? Often, it is well-structured and relatively static. What’s the best way of getting user input into your application? This isn’t an easy question.

Rich text editor react