Support injection from multiple files from tabs

[chalin]

DartPad inject feature supports injecting single-file examples from fenced code like this:

```dart:run-dartpad
main() => print("Hello, World!");
```

Multifile support currently uses special markers within the same code block like this:

```dart:run-dartpad
{$ begin main.dart $}
String message = 'Hello, World!';
{$ end main.dart $}

{$ begin solution.dart $}
String message = 'delete your code';
{$ end solution.dart $}
```

A nice thing about supporting injection from regular code blocks is that is that if injection fails then the user still sees the regular code block.

It would be great if the injector would get multi-file content from different tabs that could be rendered in the page like this:

• 
• 

There are different ways to encode tabbed content like this, including Bootstrap tabs; essentially having code blocks in separate <div> elements. This would make it much easier to extra code excerpts using current toolsing. /cc @kwalrath @legalcodes

[chalin]

In case you are wondering, here is the HTML that I quickly put together to create the sample used in the opening comment:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="exercise1-dart-tab" data-toggle="tab" href="#exercise1-dart" role="tab" aria-controls="exercise1-dart" aria-selected="true">Dart</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="exercise1-solution-tab" data-toggle="tab" href="#exercise1-solution" role="tab" aria-controls="exercise1-solution" aria-selected="false">Solution</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="exercise1-dart" role="tabpanel" aria-labelledby="exercise1-dart-tab" markdown="1">

```dart
// Part 1
//You can call the provided async function getRole to return the user role
Future<String> reportUserRole() async {
  // your implementation here
}

// Part 2
// Implement reportLogins here
// You can call the provided async function getLoginAmount to return the number of times that the user has logged in.
reportLogins(){}
```
</div>

<div class="tab-pane" id="exercise1-solution" role="tabpanel" aria-labelledby="exercise1-solution-tab" markdown="1">

```dart
Future<String> reportUserRole() async {
  var username = await getRole();
  return 'User role: $username';
}

Future<String> reportLogins() async {
  var logins = await getLoginAmount();
  return 'Total number of logins: $logins';
}
```
</div>
</div>

It should be easy enough to create a Liquid tag to make creation of these tabbed structures easier and less error prone in markdown files.

[RedBrogdon]

@chalin, is this request primarily about how code is rendered when the inject script fails to replace the correct elements with a DartPad iframe?

If so, how often is that happening?

[chalin]

No, the main reason is that it is easier to use the current code-excerpt tooling to separately extract individual files of a multifile example, and place each file in a div-separated code block, than it is to create a single code block with files separated by custom {$ ... $} markers.

Also, it would nicely support #1390.

[leecommamichael]

I'm working on adding interactive examples to the flutter_hooks repo and this would help tremendously.

Here's the solution without this feature: We have a script that pulls the library into one file, we hide that in the test.dart file of a gist, and put the example code in the main.dart so the person exploring the package with DartPad can focus. Right now, to realize this, we need to make a separate gist for each example, even though they should all use the same version of the library code. This means generating a gist out of an example and keeping it up to date.

If we could pre-load the main.dart with whatever docstring-code-block we want, and use the body of a @macro or @tool output for the test.dart we'd have something a bit tighter.

Let me know if I'm making this too complicated.

[parlough]

With #2808, it was decided to not support the multi-file use case to focus on what DartPad does best. If anyone is still interested in this, please open a new issue for discussion, thanks!