Tutorials: Merge editor and preview area in tutorials?

[kepper]

This is a discussion about a potential improvement for the tutorials. It has been mentioned in the discussion of #57 already. Right now, the preview area duplicates the code the user enters in the editor, and usually adds additional context before and after the user's content. It is not possible to edit within the preview area. I think this is confusing. Instead, I'd like to find a way to merge this into one editor box, in which the user may change only parts of the content.

According to https://jsfiddle.net/tripflex/y0huvc1b/, it should be quite simple to restrict editing at the begin and end of the editor box. The benefit here is that the user may enter as many new lines in the middle as he needs – we could, for example, prevent editing in the first three and last five lines, as they provide the content we want the user to see. This solution still allows code-folding in readonly lines, which might be helpful in larger examples.

When making selected lines readonly, we should render them differently, so that the user immediately understands the difference between editable and non-editable lines. According to https://stackoverflow.com/a/27548260, it should be quite simple to add CSS classes to selected lines. With those, we could probably change the background color of the "context lines", and set syntax highlighting to different gray values (or something along these lines).

Before implementing these changes, I'd like to get some opinions about this. @musicEnfanthen, @soniawronkowska, @margrethesb, @ahankinson, anyone?

[ahankinson]

Should we merge @musicEnfanthen 's PR first, and then work to improve it?

[lpugin]

Sounds good to me.

[kepper]

yes, since this is in a separate branch anyway, I believe this simplifies everything a bit.

…

Am 07.12.2018 um 09:38 schrieb Laurent Pugin ***@***.***>: Sounds good to me. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or mute the thread.

[musicEnfanthen]

Really like your idea of having something like a "combined" editor, this would greatly reduce some confusion potential as you already mentioned and convinced me ;)

Would not see any conflict with #57 . I did not touch the tutorial's main js or html file. If the changes you have in mind for the editor box break anything in the existing tutorials (what I can't imagine as long as the preview/edit snippet logic stays the same, but even if not), I can adjust these things afterwards in another PR. So don't mind about breaking everything if necessary. As long all of this is not on master branch, we can still figure out the best possible way.

[margrethesb]

Go ahead!