Keep state of the Rust Playgrounds when navigating between slides

[mgeisler]

Today, the embedded Playgrounds are reset when you navigate between slides. This has caused problems: if people navigate away from a slide to look something up, they've suddenly lost their work.

This is actually the reason why we don't make the exercises editable directly in the slides: too many people have lost work because of this.

We should be able to store the current state in the browser's local storage.

[jnovikov]

I would like to help with it.

[mgeisler]

I would like to help with it.

Hi @jnovikov, that would be awesome! I hope the idea is somewhat clear, otherwise please let me know 😄 The problem right now is that using Arrow-Left or Arrow-Right (or clicking links) navigates away from the current slide: when you navigate back, the playground is back at its initial state. The idea is to prevent this by storing the state in local storage.

I don't know much about the editor here, except that mdbook uses this one: https://ace.c9.io/.

[mani-chand]

Hey @mgeisler , I would like to give a try .If it Is still open.

[djmitche]

It's all yours! I'm not sure anyone has in mind a good way to do this, so the first step is coming up with an idea..

[mani-chand]

It's all yours! I'm not sure anyone has in mind a good way to do this, so the first step is coming up with an idea..

I looked at it there is a div which as has some child html elements in them all our code lies as innerHTML/innerText.

I will store all children's of that parent div
in an array using Arraysfrom(document.getElementsByClassName('{that parent div class name}')[0].children).

Then I will make a object with the URL as key and array of html elements as value.

I will store that array of objects (Assuming user make changes in all playgrounds) in browser local storage.

Every time loads the page, I will check the object is that url present in that key.

If present then I will display object value code.

else I will start assigning that code to new key in the object.

Process of displaying code :
Delete all children of parent div
add all childrens in object one by one using loop.

[djmitche]

That sounds like it will work -- try it out!

[mani-chand]

It's all yours! I'm not sure anyone has in mind a good way to do this, so the first step is coming up with an idea..

I looked at it there is a div which as has some child html elements in them all our code lies as innerHTML/innerText.

I will store all children's of that parent div
in an array using Arraysfrom(document.getElementsByClassName('{that parent div class name}')[0].children).

Then I will make a object with the URL as key and array of html elements as value.

I will store that array of objects (Assuming user make changes in all playgrounds) in browser local storage.

Every time loads the page, I will check the object is that url present in that key.

If present then I will display object value code.

else I will start assigning that code to new key in the object.

Process of displaying code :
Delete all children of parent div
add all childrens in object one by one using loop.

May be few steps will change. I will come up with code tommarow.

[mani-chand]

It's all yours! I'm not sure anyone has in mind a good way to do this, so the first step is coming up with an idea..

I looked at it there is a div which as has some child html elements in them all our code lies as innerHTML/innerText.

I will store all children's of that parent div
in an array using Arraysfrom(document.getElementsByClassName('{that parent div class name}')[0].children).

Then I will make a object with the URL as key and array of html elements as value.

I will store that array of objects (Assuming user make changes in all playgrounds) in browser local storage.

Every time loads the page, I will check the object is that url present in that key.

If present then I will display object value code.

else I will start assigning that code to new key in the object.

Process of displaying code :
Delete all children of parent div
add all childrens in object one by one using loop.

Is it okay to use indexedDb(Browser storage) to store data.

Because , I cannot store HTML tags in local storage.

[djmitche]

I think either IndexdDB or LocalStorage is fine. I suspect it only needs to store text (the code in the playground) and not HTML, right?