Description

Currently the code that gets displayed in the playground's editor is the same as the one passed to the playground as its children. But because of issue #904, I had to be able to pass a simple component to the playground, while still showing the actual code of that component in the playground's editor.

This PR allows to pass an additional prop to the Playground component, called editorCode, which is the actual code (as a string) that will be shown in the editor, regardless of the code passed to the playground as its children.

For example :

• This caused issues :

<Playground>
  {() => {
    type Name = string;

    interface Person {
      name: Name;
    }

    const person: Person = {
      name: "John Doe"
    };

    return <div>{person.name}</div>
  }}
</Playground>

• This didn't :

// Examples.tsx
type Name = string;

interface Person {
  name: Name;
}

const person: Person = {
  name: "John Doe"
};

export const Example = () => <div>{person.name}</div>

import { Example } from "./Examples.tsx"

<Playground>
  <Example />
</Playground>

But doing so makes the playground's editor only show <Example />, which forces the user to open the Examples.tsx file to actually see the code used.

With this PR, I can do the following and have the expected result :

import { Example } from "./Examples.tsx"
const exampleCode =  "<The example's code (the actual way to get it can vary and is beyond the scope of this PR).>"

<Playground editorCode={exampleCode}>
  <Example />
</Playground>

Edit : This PR revealed an expected but undesirable effect of the playground for my use cases, which I described and fixed in #907.