[Task]: Playground state preservation on SDK switch

[alexeyinkin]

What needs to happen?

Currently Playground maintains a single state of a document. When SDK changes, the code in the editor is lost, and the default example for the given SDK is loaded.

Need to maintain a separate state for each SDK so that:

1. The Playground is started with language A.
2. The Playground loads the snippet for A.
3. The user modifies the snippet code.
4. The user switches the language to B.
5. The Playground loads the snippet for B.
6. The user switches the language back to A.
7. The in-memory snippet for A preserves the earlier modification by the user.

Issue Priority

Priority: 3

Issue Component

Component: beam-playground

[alexeyinkin]

.take-issue

[alexeyinkin]

{{< playground height="700px" >}}
{{< playground_snippet language="java" example="SDK_JAVA/PRECOMPILED_OBJECT_TYPE_KATA/AggregationCount" >}}
{{< playground_snippet language="py" example="SDK_PYTHON/PRECOMPILED_OBJECT_TYPE_KATA/AggregationCount" >}}
{{< playground_snippet language="go" example="SDK_GO/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" >}}
{{< /playground >}}

Here:

• playground is our custom tag to use Playground rather than the ordinary highlighting.
• playground_snippet is our custom tag that adds a tab with a specific example in specific language.