810069 - CKEditor button to insert embed macro for a live code sample

Status: RESOLVED FIXED

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

Description

[John Karahalis [:openjck]]

This is a subtask of bug 797480.

In bug 810068, we will build a CKEditor plugin for editing live examples. This bug is about actually building the display for those examples.

Quoting Les from bug 797480:

> We ... 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.

Comment 1

[Les Orchard [:lorchard]]

Here's an example page with a sample on dev: 

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

I cheated a bit there, by creating the {{ EmbedLiveSample("id") }} template to make insertion easier.

The really important part for a complete solution on this bug, though, would be to have a CKEditor button that:

1) Lets you pick a wiki page (defaulting to the current page)
2) Lets you pick a code sample from the selected page
3) inserts an <iframe> with the URL to the page and selected sample

One caveat: #2 will require Kuma-side work to get a list of samples for a given page.

Comment 2

[Les Orchard [:lorchard]]

Creating bug 810430 as a blocker: A machine-readable (ie. the JSON view) table of contents listing sections for any given page seems a necessary prerequisite for this button to work completely.

Comment 3

[Les Orchard [:lorchard]]

Another thing that occurred to me while rambling in IRC: We should think about building a standard "widget" to wrap around the <iframe> for a code sample, not unlike JSFiddle's.

That is, an <iframe> could come along with a caption that offers a button to show sample HTML for embedding on 3rd party sites, maybe also link back to the page where the sample is defined if it's being embedded on a different page.

This "widget" could be built in kumascript, and so the button proposed in this bug could just insert something like {{ EmbedLiveSample('Sample_ID', '/page/path') }} and we build the widget in that template

But... all the above could be worth filing follow up bugs, and just getting a button to insert a plain clean <iframe> is a good initial win, IMO

Comment 4

[Les Orchard [:lorchard]]

Oh, but then again, inserting a kumascript template instead of a bare <iframe> means we can update the template in the future and change code sample embeds across the site without editing individual documents.

Comment 5

[David Walsh :davidwalsh]

Implemented in PR https://github.com/mozilla/kuma/pull/703

Comment 6

[Les Orchard [:lorchard]]

No, this is not done. This bug involves a button to insert a live sample embed into a page, from any page. Kind of like inserting a link to one page from another. This is separate from the boilerplate button.

Comment 7

[Les Orchard [:lorchard]]

In other words, this should result in a button that summons something like the link dialog, allowing the selection of a page and a sample within that page and resulting in the insertion of the appropriate {{ EmbedLiveSample }} macro. Pull #703 does not do that.

Comment 8

[[github robot]]

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

https://github.com/mozilla/kuma/commit/22869f651a4aba86e2db088af5d6067ba8199b90
fix bug 810069 - Add sample lookup
fix bug 810430 - Provide sections to json view

https://github.com/mozilla/kuma/commit/3c963bfab6ac27cb059c6d57e6a0a26eed058bb5
Merge pull request #725 from darkwing/ckeditor-embed-810069

fix bug 810069 - Add button to inject code samples

Comment 9

[David Walsh :davidwalsh]

Doesn't depend on a structured TOC, just needed a flat list of sections.