Slate: Best strategy in producing a "read-only" output?

[ctrlplusb]

Great project!

Might be a silly question here, but what is the best strategy in rendering a read only view? Should I be considering a serialize call using the Html serializer?

Thanks!

[ctrlplusb]

ReactDOMServer.renderToString? :-)

[ianstormtaylor]

Hey @ctrlplusb, good question! I think it depends on the use case.

I think there's a definite use case for having the Slate editor itself render in "readonly" mode, for example when a user should be able to see an existing document in the editing environment, but not edit it (like in Google Docs). For that, I just opened a new issue here: https://github.com/ianstormtaylor/slate/issues/108

And then there's another use case, which is rendering content created in an editor elsewhere (like you'd do in a CMS). In this case, the editor is really "creating" the read-only output, so you'd want to use one of the serializers to save it somewhere, and then render that serialized state however. (The Html serializer would be a good option here.)

Hope that makes sense! I'll look into adding the read-only mode soon.

[mathieudutour]

I'm facing a related use-case where I want some "read-only" islands in the middle of the editor.

Right now I'm using react-portal to put the div out the content-editable div but it feels like a hack.
Not sure what's the right solution though

[ianstormtaylor]

Ah interesting @mathieudutour! What do the islands contain? I'm down to discuss it in another issue and see if there's a nice solution.

I've just added a readOnly property to editor that renders it in read-only mode. (Released in 0.1.14!)

[mathieudutour]

I'm having fun rewriting https://github.com/mathieudutour/kayero using slate. So the islands are the results of the code blocks.

It's kind of a special case, not sure it should be in the core.

[ianstormtaylor]

Ah sweet!

[hmontes]

What about the comments? I need to put a many and not a custom div)

Maybe you need to update the docs. It's very frustrating don't know the use cases

[folkj]

A little late to the party, but on the onChange function, maybe you can add an attribute to each block that you want it to be readOnly, and then compare new state + old state to see if there are any changes to readOnly blocks-- if so, return early?

[dmitrizzle]

You may want to consider using something like this: https://github.com/roast-cms/french-press-editor/blob/develop/src/components/vignettes/Reader.js