This guide extends upon the Basic Tutorial
Previously, we saw how we could serialize the entire state of
Nodes in our editor into JSON. Of course, you probably will not want to store the JSON in your server or database, for obvious reasons. Instead, you should first employ a text compression technique of your choice to compress the serialized JSON Nodes.
In this guide, we'll be mainly modifying the previous tutorial's Topbar component. We'll add 2 new features
- Copy the compressed output of the serialized Nodes to the user's clipboard
- Load the editor state from a compressed output of serialized Nodes.
We'll be using 2 external libraries -
lzutf8 (for compression) and
copy-to-clipboard (you know)
lzutf8 to compress our serialised JSON Nodes, and additionally transform it into base64.
When you click on the button now, it should copy the compressed base64 string to the clipboard.
Now let's implement the Load State button in our Topbar component. We will display a Dialog box when the button is clicked, and our users will be able to paste the compressed base64 string there.
Then, we will need to work in reverse to obtain the original JSON provided by our editor. Finally, we'll call the
deserialize action which will result in the editor replacing all the current Nodes in the editor with the deserialized output.
Of course, what if we wanted our editor to load a serialized output on page load? For this, we will need to take a step back and revisit the
<Frame /> component which we encountered when we first set up Craft.js.
By default, it constructs the editor state based on what was initially rendered in its
children. But, we could also specifiy the serialized JSON nodes to its
json prop which would cause it to load the state from the JSON string instead.
Now, play with the editor and press the
Copy Current State button when you are done. Refresh the page so the editor returns to its default state, then press the
Load State button and paste the copied output - you should see the editor displaying the elements in the state from the time you copied.