Embed a playpen-like editor inside the book

[japaric]

I got this working [1][2] in the editor branch and have setup a clone site for testing.

At the moment, I have two bugs to fix:

• The buttons are misplaced, they should be inside the editor area
• You need to refresh the page to see the editor
• Use the same colors when highlighting both static code and the code inside the editor.
• Height of the editor should always fit the contained source code.

I'll like to have other people test it, and let me know if you have any suggestion or if you find any other bug. (or if you know how to fix any of the bugs I have mentioned :P - here's the css and the js if you want to take a look)

Once we are sure the editor works the way we want, I'll merge this into the original site.

[1] I've reused @SergioBenitez live code editor implementation for the rust-lang.org website. Kudos to him!
[2] Implementation detail: The "{hello.play}" string in the input markdown gets expanded into the live code editor containing the hello.rs source code

cc @kud1ing @vojtechkral @vks @zslayton

---

Original description

The playpen exposes a CORS-enabled JSON API that could be used to embed a playpen-like editor in each example, this would allow the user to run the example, and see the output inline; or experiment further by editing the source code of the example.

See rust-lang/prev.rust-lang.org#26 for a reference implementation. We should try to provide a similar interface to the one provided by rust-lang.org (plus a "Reset" button to show the original example code)

[vks]

Except for the two bugs you mentioned it seems to work fine.
One thing I noted when trying a few of the examples was that there are compiler warnings because of unused variables.
I think we should prefix them with _ to silence the warnings. (Especially since the concerned lines are getting highlighted automatically.)

The syntax highlighting/look is different from the static code listings. This probably should be fixed at some point.

[kud1ing]

Except for the two bugs you mentioned it seems to work fine.

I agree, good work. It would be great, if the height of the editor would be automatically adapted to the height of its content. Currently i see quite some visual gap between those 5 lines of Hello World and its output below.

[vojtechkral]

Looks great.

The refresh is needed because the editor seems to be initialized simply in top-level code in editor.js

[japaric]

One thing I noted when trying a few of the examples was that there are compiler warnings because of unused variables.

I have opened #83 to track this.

The syntax highlighting/look is different from the static code listings. This probably should be fixed at some point.

There should be some theme common to gitbook and the ace editor, I'll switch to that theme, to make the syntax highlighting consistent.

It would be great, if the height of the editor would be automatically adapted to the height of its content.

It already adapts to the height of the source code, but I have set a minimum height for the editor, because the editor doesn't grow in height when you insert more code.

If I remove the minimum height, then, for example, the "hello" editor will have 5 lines of code, if you type more lines in the editor then you'll have to scroll to see other sections of the code, which can be a little annoying.

[SergioBenitez]

@japaric You can use the exact same resize code to resize the editor automatically when the user's code exceeds the height of the editor (so that the box is always big enough to fit the code). You can do this by adding the following line (probably at the end of the file):

editor.getSession().on('change', updateEditorHeight);

To fix the refresh issue, you'll need to figure out which function gets called when the page changes. Then, move the editor initialization code into one function (including the event handlers) and call that function from the page change function.

[vojtechkral]

@japaric I fixed the refresh bug, would you like a PR?

[I don't do this very often, not sure how this works yet :-) ]

[japaric]

@SergioBenitez Thanks for the advice, I'll try that.

I fixed the refresh bug, would you like a PR?

\o/ Sure, send a PR to the editor branch.

[I don't do this very often, not sure how this works yet :-) ]

Do you mean sending a PR? or how you fixed the refresh issue?

[vojtechkral]

I meant sending a PR while another PR from me is queued, I'm not sure what that will do. But I hope it's ok since it's on another branch...

[japaric]

@vojtechkral roughly speaking 1 PR = 1 branch, so you'll have to fetch my editor branch, then create another branch on top of the editor branch (named, for example, as fix-refresh branch), and submit a PR of your fix-refresh against my editor branch.

[vojtechkral]

Ok, will do...

EDIT: done, hope it's ok