How do I make a specific word uneditable in Slate.js?

Question

I'm creating a rich text editor for my application. The content, is generated automatically from a template which may contain variables. What I am trying to achieve here is, I want to be able to make a specific word uneditable in the editor. To be clear, allow me to describe my situation in detail:

Say there's a template:

Hello {name}, welcome to {location}!

And the data looks like this:

{
    "name": "John Doe",
    "location": "Bangi Wonderland",
}

As result of parsing the template with the data above, it should look like this:

Hello John Doe, welcome to Bangi Wonderland!

Now, I'm trying to make the content above editable, but user should not be allowed to update the substituted variables such as John Doe and Bangi Wonderland directly in the editor. The idea is to wrap those words in a <span> and make it uneditable, but I don't exactly know how to.

How can I achieve this in Slate.js?

Answer 1

Use property: contentEditable={false} in element renderer

Source

Slate Examples with this props