How to render JSON output from Rich-text-editor like (plate) in react js

[yadavmurari111]

Description
In a sample project , i want to use a rich-text editor using (plate, slate, tiptap or any other popular text editor)
from plate editor getting output in form of Json like this

[ { type: 'p', children: [ { text: 'This is editable plain text with react and history plugins, just like a !', }, ], }, ]

Now ,I want to send this data to backend (using API) after that want to retrieve same data from backend to consume at frontend , this much I'm able to done.
Problem I'm facing is about rendering part of this data. getting this json data through api but not able to render in correct format . can anyone please suggest me how to render it in a different page and what are the best ways to handle this type of scenerio.

Sandbox

https://codesandbox.io/s/github/udecode/plate-playground

Expectation

Environment

• slate: "^0.88.1"
• slate-react: "^0.89.0"
• browser: chrome

[12joan]

Hi, I converted your issue to a discussion since it doesn't seem to be a bug in Plate.

If what you want to do is initialize a Plate editor with a value from a JSON string, you can do that by parsing the JSON to a JS object and passing it to the initialValue prop of the Plate editor. Something like this:

<Plate
  ...
  initialValue={JSON.parse(data)}
/>

[yadavmurari111]

Thanks man it helped me.
can you please help on 2 things further

1. I'm able to render the text properly , but how to make it un-editable (on tapping text should not be editable)
2. I want to implement exact multiple editor(this) which is mentioned in documentation. But i can see there are many dependent things

<BasicElementToolbarButtons />  
<BasicMarkToolbarButtons />
basicNodesPlugins 
basicElementsValue
imagePlugins
etc...

My doubt is do I need to manually copy -paste these files from documentation or
there is any direct way to import those thing . please give some light on this @12joan

[12joan]

To make the editor uneditabe, try adding readOnly: true to the editableProps object on the Plate component.

<Plate
  ...
  editableProps={{ readOnly: true }}
/>

[12joan]

If the page you want to display the Plate document on is separate from the page you want to edit it on (e.g. separate edit and show pages on a blog), it might be a better idea not to bundle the entirety of Plate, Slate and (possibly) React on the show page. If that's your use case, you might have better luck storing the serialized HTML of the Plate editor on the server, which you can then render without using Plate. (Be sure to perform sanitization on the HTML if end users have access to the edit page.)

If you just want to make your Plate editor toggle between editable and read-only, the approach you're using is fine.

[12joan]

Regarding your second question, don't worry too much about those imports. The Plate examples split things into files so that code can be reused between multiple examples. You probably won't want to do this in your own code.

For each file in an example, open the file and see what it's importing from Plate (in the case of imagePlugins.ts, it's importing four plugins related to images) and what it does with them (e.g. passing them to createMyPlugins, which is itself a thin wrapper around createPlugins). If you're not sure whether you need something (a plugin or an option to a plugin), remove it and see what happens.

Most examples are extremely simple once you get past the complexity of the imports. All of the code that makes the multiple editors example unique can be found in App.tsx. (I believe the nested PlateProviders are to ensure that all editors share the same toolbar. If you don't care about that, you can probably just use multiple independent Plate components.)

[yadavmurari111]

thank you sooo much❤️ @12joan . it helped me alot.
Really appreciate the efforts you have putted.