In the last few months we’ve been working on an “interactive editor” feature for CSS and JavaScript reference pages on MDN. This will show the effect of some JS, or a CSS property, and let the reader edit the code and see the result directly, without having to open CodePen or JSFiddle in a new tab.
We’re close to starting a beta test for this thing, but before that I’d love it if a few people could try the editor out and file bugs.
I get an error in the FF56 console which is to do with the test domain
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://developer.mozilla.org’) does not match the recipient window’s origin (‘https://interactive-examples.mdn.mozilla.net’).
I get the same error on Firefox Nightly 57.
Also I tried to add a console.log(123) but wasn’t working, only when I cleaned all the code and left this one I got the console.log
Yeah, the CSS ones don’t work. They spit the postMessage error to console and nothing happens when you try to press keys, either. In fact, I can’t even use browser keyboard shortcuts like Cmd-W to close the tab.
Hi all. I’m helping with MDN docs and was asked to test the Interactive Editor by @wbamberg.
I’m playing around with the editor; testing out exisiting code examples etc and in general l really like it! Great work
While using it to try out some of the MDN examples I stumbled on what I think is a bug:
It seems to be a little intermittent, but on Firefox 55 and Chrome 61 (Mac OS) - when copying all text within the editor (Command/Ctrl+A) and pasting text from the clipboard in, I sometimes lose the line numbers on the left of the editor window. This leads to unexpected behaviour when deleting from the first character position on the line. I don’t imagine this is a big deal, but thought I woudl mention.
I grabbed the latest version from github (https://github.com/mdn/interactive-examples) and was trying out the recently added multiple console.log support locally - a worthy addition I think, as it will give us more flexibility with examples.
I tried out the following code:
var fruits = ['Apple', 'Banana'];
console.log(fruits);
fruits.push('Orange');
console.log(fruits);
which when run, comes back with:
Apple,Banana,Orange
Apple,Banana,Orange
I was expecting output more like:
["Apple", "Banana"]
["Apple", "Banana", "Orange"]
So there’s a couple of things here:
It looks like multiple console logs can produce unexpected results.
(A question) When we output the contents of an array should the editor output show square brackets and quotes?
Hope this is helping and that I am posting in the right place.
That is interesting behaviour. Thanks for testing Mark. I would say, go ahead and create a bug for this, as well as the previous comment regarding the line numbers. Prismjs is not really meant to be an editor so, we are running into some edge cases here where it does not always behave as we would want/expect.
