797480 - Create live samples from normal wiki editing

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Editing, defect, P1)

Description

[Les Orchard [:lorchard]]

This might mash up a few discrete things:

* From editing a wiki page, maybe as a CKEditor button, allow the creation of a live sample in a new tab. Before jsFiddle is ready, this would launch the editor proposed in bug 797479

* From editing a wiki page, allow the insertion (ie. as an <iframe>) of an existing live sample associated with the page.

Comment 1

[Jean-Yves Perrier [:teoli]]

We also need 3 macros to insert the css, js, and html of the associated sample in a wiki page. In some cases we want these to be shown.

I don't think this need to be an <iframe> as it is raw text. Maybe something like sample("name").css returning the indented string.

Comment 2

[Les Orchard [:lorchard]]

Progress: https://github.com/mozilla/kuma/pull/649

Live samples haven't been implemented as separate from document content. Instead, you'll be able to just write markup like this:

<h3 name="sample1">My live sample</h3>
<pre class="brush: html">HTML content</pre>
<pre class="brush: css">CSS content</pre>
<pre class="brush: js">JS content</pre>

Then, the live sample will appear at a URL like:

https://developer.mozilla.org/en-US/docs/MyPage$samples/sample1

And you'll be able to embed it in the page with:

<iframe src="https://developer.mozilla.org/en-US/docs/MyPage$samples/sample1"></iframe>

There's still some work that can be done in making all the above easier to author, though.

Comment 3

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/73b141fc76da15447671a13550847e7b3d0e47b4
bug 797480: Make live sample creation easier by using section extraction logic

Comment 4

[Les Orchard [:lorchard]]

Still waiting on bug 797921 for deployment to production, but this can be played with on -dev right now:

https://developer-dev.allizom.org/en-US/docs/User:lmorchard/TestCodeSample

Comment 5

[John Karahalis [:openjck]]

A little confused. How is this different from bug 797479?

Comment 6

[Les Orchard [:lorchard]]

bug 797479 is about laying the groundwork for integration with JSFiddle as an editor for code samples. But, JSFiddle is not and will not be the only way to edit code samples.

This bug (the "creation" part) is about editing live samples in normal wiki editing using CKEditor. That is also an option and will be the only initial option until/unless JSFiddle integration is achieved.

We also need a way to easily insert the <iframe> for a code sample into pages, whether it's the same page where the sample was composed or on a different page entirely. That's the "insertion" part of this bug.

Comment 7

[John Karahalis [:openjck]]

Looks like this is done.