ghinda / jotted Goto Github PK

Hi,

I don't know why but, intermittently, Jotted is not able to load the Result tab. It happens few times and to emulate this error, I have to keep reloading my browser until I get it. I was trying to make my own solution, something like check the iframe content and if things I want are not there, force jotted to reload. Thing is the content is cached and because of cache I'm not able to:

jotted.change({ target: textAreaIWantToReload })

Oh, I use CodeMirrorPlugin.

Thanks :)

If there is an option to hide results panel that will be great. This will come in handy in scenarios if someone is just writing javascript and wants to show output in console.

It would be great to be able to display the panes side-by-side as panes, like codepen can do.

could anyone tell me how to run this after installing as per doc?

do i need run by like this node xxxx.js ? on which port it will run. ?

I'm trying to select each element (HTML, CSS, JS) separately before saving it to a file or database, so if I write the following into the HTML:

<h2>Hello World!</h2>

I want just that, nothing else. Same for CSS and JS.

Is there a way to grab these via js by element id or something similar? or a way to define it first?

If I write:
var jotted = document.getElementById("jotted_content").innerHTML
it grabs the whole thing with all the iframes and whatnot.

Thanks, great tool btw.

@ghinda,
at the moment, I'm writing an angular wrapper directive for jotted and it's working very well.
(Wrapper not on github yet.)

So my problem is that I'm loading async. data from a gist and then I'd like to re-run the code after loading to have the updated result but active play plugin isn't running the code after load. Is there a way to do this with the play plugin?

I've had a look at the source code and couldn't see anything like this. That's why I've added it to a fork of your repo. Please have a look here. (In the fork I've also changed mocha test env. a bit because Sauselab wasn't working for me.)

Is there any side effect of my added code? I'm passing a new property updatedData = { ... play: {forceRun: true}} to jotted.trigger('change', updatedData). The added test is passing and no other test is failing.

One issue I've noticed is that I can't trigger the change at every content / type and only at the last content. That's why I have something like this in my AngularJs code where I'm preparing the data for jotted:

config.files.push({
    type: curMappedLang, // mapping where needed
    content: file.content,
    play: {
        // force run on last load item, otherwise css was not loaded properly
        forceRun: (fileNames.length - 1 === i)
    }
});

Later in my angular code I'm triggering the change like this:

for (let i=0; i < config.files.length; i++) {
    jotted.trigger('change', angular.copy(config.files[i]));
}

It's OK to have that in my code and it's working but re-usability isn't good. It would be better if there would be a way to replace every jotted data at once (no looping to trigger changes for html, js, css pane) and trigger the play plugin to run the new data. Or is this already possible?

Hello, Jotted is awesome, it's simple but powerful! It will be great if I can change pane using a click event.

CSS

<style>
    .jotted-nav {
        display: none;
    }
</style>

JS

<script>
    var editor = new Jotted(document.querySelector('#editor'), {
        files: [{
            type: 'html',
            url: 'index.html'
        }]
    })

    $( ".somthing" ).on( "click", function() {
        editor.setActivePane("html");
    });
</script>

Thank you.

How about loading libs that may be used in showcases? I tried to find this feature inside the code but I couldn't. Is that something that jotted already does or should it be developed?

An example would be jQuery, but I mean a feature to load any js lib.

Thanks, the project is great.

Do you have a fullscreen version like the pen demo?
To recreate a kind of jsfiddle or codepen clone.
https://ghinda.net/jotted/demos/pen.html

{
    files: [{
      type: 'html',
      content: '<html>\n' +
                '   <head>\n' +
                '       <script src="https://fb.me/react-0.14.6.js"></script>\n' +
                '       <script src="https://fb.me/react-dom-0.14.6.js"></script>\n' +
                '       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>\n' +
                '   </head>\n' +
                '   <body>\n' +
                '       <div id="content"/>\n' +
                '   </body>\n' +
                '   <script language="javascript" type="text/babel">\n' +
                '         ReactDOM.render(\n' +
                '           <span>Hello, world!</span>,\n' +
                '           document.getElementById("content")\n' +
                '         );        \n' +
                '   </script>\n' +
                '</html>\n'
    }]
}

returns:
Uncaught SyntaxError: Unexpected token <
Same works if you copy-paste it to html file and open it in browser.

Hello @ghinda,

is it a jotted restriction being able to debug (using devtools) javascript files? By javascript files, I mean the one we pass to jotted as a parameter.

Thanks!

I am trying to use the Jotted javascript library in conjunction with a gulp-angular project. The library itself works fine, but I'm trying to include the library's Codemirror plugin and am running into issues. When I try to add the library and run gulp serve, I get this error:

Error in parsing: "js/codemirror.js", Line 4: Unexpected reserved word

The line causing the issue looks like so:

import * as util from '../util.js'

Rendering a form in the "result" iframe will navigate to a new page when submitted.

I noticed a comment about using iframe sandbox attribute when IE9 is no longer supported. Is this an option?

I'm switching over from codepen that doesn't have this issue. I think it's because they use generous sandbox, but without allow-top-navigation.

There may be an IE9 solution using onbeforeunload too.

Great work on this project - Extremely high quality!

Happy to do a PR for this once a solution is decided

I would love to see TypeScript support added as a plugin.

If there is an option to show console panel at the bottom(horizontally below) instead of side by side as panel that will be great. This way the user wont have to change tabs to be able to see console output if they are not using the bin theme. Let me know if you think it makes sense.

Thanks for your project, it really great in terms of interability and api. I am building react component on top of it and it was a joy to hacking around it.

Currently I have weird and unexpected behavior when I run this:

{
    files: [{
      type: 'html',
      content: '<html>\n' +
                '   <head>\n' +
                '       <script src="https://fb.me/react-0.14.6.js"></script>\n' +
                '       <script src="https://fb.me/react-dom-0.14.6.js"></script>\n' +
                '   </head>\n' +
                '   <body>\n' +
                '       <div id="content"/>\n' +
                '   </body>\n' +
                '</html>\n'
    }, {
        type: 'js',
        content: 'ReactDOM.render(\n' +
                '           <span>Hello, world!</span>,\n' +
                '           document.getElementById("content")\n' +
                '         );'
    }],
    plugins: [{
      name: 'babel',
      options: {
        presets: ['react']
      }
    }]
}

with result ReactDOM is not defined

There is another one to show problem closely:

{
    files: [{
      type: 'html',
      content: '<html>\n' +
                '   <head>\n' +
                '       <script src="https://fb.me/react-0.14.6.js"></script>\n' +
                '   </head>\n' +
                '</html>\n'
    }, {
      type: 'js',
      content: 'console.log(<div/>);'
    }],
    plugins: [{
      name: 'babel',
      options: {
        presets: ['react']
      }
    }]
}

with result React is not defined

Apparently js is running in isolated context, but not in html iframe. I was thinking to make PR for this, but not quite get code yet. Would be great if you help me here a bit.
Cheers.

if someone need i've created sass and postCss plugins for jotted, sass is little bit useless as it havy and slow, but post css looks good, if I have some time i will fork jotted and add these plugins with PR

Can we add support for multiple files (js, css), something like thimble.mozilla.org or plnkr.co?

Currently jotted is in autorun mode. Can we have a way to turn off auto-run and a trigger to execute on some user action.

I'm not seeing if it's possible, but is there a way to allow the "result" preview to be rendered to the side of the HTML/CSS/JS instead of a separate tab? Thanks.

Currently jotted is in autorun mode. Can we have a way to turn off auto-run and a trigger to execute on some user action. Also if we could clear console on subsequent executions that will be awesome.

To emulate:

1. go to https://ghinda.net/jotted/demos/pen.html
2. remove the css pane
3. try to expand/shrink the Javascript pane

EDIT!

Finally found a way with css
So this can be closed as solved. Thank you and sorry for the inconvinience.
/*
Hello

'I have difficulties changing the height of the result pane. Or the whole pane. I tried with by adding a div with new class around the iframe and then css it to dynamic according to content. Didnt work. Or changing .jotted-pane-result did work nor any static height. So I'm lost here.
I think it is just too narrow to see the actual result. Now 150px only. Can you please help?

Hi,

Is it possible to add content between <head> and </head> tags? Actually, I want and insert CSS or JS links there. Hope there has a way.

Thanks.

Is there Any way to show change order of panes ? i want result pane to show at last not at first

From @sobanhameed:

Also if we could clear console on subsequent executions that will be awesome.

jotted is loaded fine for the first time. but suddenly the content line goes up and down when try to edit the content. it has happened after getting back from some other part of the my module. pls find the below image

1st image shows complete code with no issues

2nd images show . some line has disappear when try to edit the code

what is problem actually? where should i change it.?

i try to change "ace_content" class height dynamically from height: 490px; to height: auto; but it doesn't accept it

Thank you

I have noticed that console errors dont shown at times.

for(let i = 0; i < 10; i++) { /* … */ }
for(let i = 0; i < 10; i++) { /* … */ }
console.log(i) // ERROR: no global i declared

Error shows on browser console but not on jotted console.

Can we get the errors on jotted console?

Codepen recently launched console pane. Are you planning to do anything similar?

https://blog.codepen.io/2016/01/27/new-feature-javascript-console/

Also if jotted can provide a hook to console functions then users can build their own console view.

Currently I see that first execution happens immediately. Can we hold off execution until Run is pressed?

hi, how could be possible to make a full stack solution like a small jsfiddle up and running using jotted?
Is this just the frontend?

I have noticed this issue with Play plugin and console-autoClear set to True. When nothing has changed and I click Run it clears the console (prev result) and doesn't print the log lines. It looks that execution doesn't happen when nothing has changed. I recommend that we force Execute on run click. Thoughts? Let me know if you want me to provide jsbin for repro.

I think that splitted pane to show both code and result will be awesome as user could edit and see result at same time than.
http://joxi.ru/brR6YzNFQBj4lr.png

It would be nice to have some sort of function that allows to easily serialize an object of the editor's content into a single object which might be stored and restored in future.

Thanks a lot for this amazing tool!

I'm experiencing a strange issue with the pen plugin. You can try it yourself on the demo page of the plugin. It works fine in the example provided, but if you remove the plugin codemirror from the array list (i.e. to only have textareas, not a code editor), then clicking on any of the code textareas causes the result panel (on top) to disappear, and all the code panels shift up.

Issue happens consistently on Chrome, Firefox and IE, and also outside of the demo environment. The pen plugin doesn't seem to have any dependency on the codemirror plugin, I've had a look but was not able to fix it myself. It doesn't happen with the bin plugin.

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)

You have a great project, maybe we could chat a bit about it, what do you think about creating gitter room?