defer document structure to html?

[VileTouch]

Suggestion: how difficult would it be to handle each pane (javascript, html,css and preview) in it's own div? I ask because it would be much easier to style the page if we had more than one element where everything is dumped to, as opposed to a set of divs that we can arrange in tabs, or in a quad or side by side or implement different layouts or whatever via css.

as it is, each instance of Jotted(document.querySelector('#id') is independant from each other (surprisingly)

[ghinda]

There's an easier way to get what you want. You can use separate instances of Jotted, and connect them with a simple plugin. You can have separate containers for each instance this way.

Here's a quick demo: http://jsbin.com/jifane/edit?html,js,output

[VileTouch]

thanks, that did work, but where do i call the plugins now? say...ace? i tried calling them the same way as the single instance...once for each pane. that didn't work.

var htmlEditor = new Jotted(document.querySelector('#html'), { pane: 'html', debounce: '1000', files: [{ type: 'html', content: ' ', showBlank: true, plugins: [ {name:'markdown', options:{} } , {name:'ace', options:{} } ]}]});

so i suppose they should be attached to the callback?

commonPlugin.params.content += 'referencing the plugins array here wont work.' callback(null, params);

but how?

[ghinda]

There was a bug when using content: '', but I fixed it in the latest version.

Here's a demo using Ace: http://jsbin.com/jifane/edit?html,css,js,output

[VileTouch]

hmm.. interesting. it works if i only use html and css but if i add a js pane, js works but css does not. wait, scratch that. it was my error. forgot to rename the variable. i will test some more and keep you posted of my findings. thank you :)

also, any malformed html (such as an incomplete tag) will spew this to the output: (function () { window.addEventListener('DOMContentLoaded', function () { window.parent.postMessage(JSON.stringify({ type: 'jotted-dom-ready' }), '*') }) }())

btw, regarding your example, this little snippet seems to make my linter happy ( such a small thing ): .jotted-nav-item-result:not(#result){display: none;}

[ghinda]

Thanks for reporting the malformed HTML bug. :beer:

I fixed it as released it as 1.4.2.