Playground improvements (click-to-copy, default initial code, movable panels, etc.)

[jgerigmeyer]

Opening this issue to capture a number of proposed improvements to the new Sass Playground. Feel free to split this into separate issues as you see fit.

1. Default code contents on initial Playground load (if not following a direct link with existing contents)
2. Click-to-copy input SCSS/Sass or output CSS: see design proposal
3. Link directly from code examples throughout to the site, to open the code in the Playground: see design proposal
4. Drag to expand/collapse input/output/console panel widths: see design proposal
5. Autocomplete Sass-specific keywords (e.g. @use, @debug) and in-scope variables
6. Click on line number in the Console to go to that line in the input panel
7. Convert existing input between SCSS and Sass when switching between panels

[nex3]

I'm striking through number 7 as "infeasible". We actually used to maintain a tool that could do this, but it turns out that the ongoing maintenance cost of needing to be able to produce nicely-formatted source code for every type of source AST node is substantial. I don't think it's worth the value of using it in the playground.

[ravindUwU]

Thoughts on encoding the line number into the URL state and placing the cursor at that line when the playground loads? 🤔

[nex3]

That's an interesting idea. I wonder if it would make more sense to copy the location specifically when there's highlighted text—it seems like the most likely use case is to indicate "look at this part of the code", and highlighting might be a clearer signal that the user intends the position to be meaningful.

[ravindUwU]

Oh that's way better!! I'd love to have a go at implementing this over the weekend 😄. I guess there are a few decisions to be made about 🤔,

1. The current URL state is <inputFormat><outputFormat><content> and doesn't include a content delimiter so I'm unsure if extending this format to include a selection is ideal... thoughts on making it a JSON array instead? Decoding can support both formats so that existing playground links won't break.

   type PlaygroundUrlState = [
       /* content: */ string,
       /* isScss: */ 0 | 1,
       /* isExpanded: */ 0 | 1,
       /* selection: */ [/* from: */ number, /* to: */ number] | undefined,
   };

2. Should highlights be more visually distinctive? Maybe #EFEB88?
   

3. Move this discussion to a separate, feature-specific issue?