Make console interactive

[shinytang6]

Before your pull request is reviewed and merged, please ensure that:

• there are no linting errors -- npm run lint
• your code is in a uniquely-named feature branch and has been rebased on top of the latest master. If you're asked to make more changes, make sure you rebase onto master then too!
• your pull request is descriptively named and links to an issue number, i.e. Fixes #123

Thank you!

[shinytang6]

Hey @catarak, The console now supports basic interaction. There are still some small bugs I haven’t gone deeper into yet.

I think the main problem is related to eval() used here. e.g.

eval("{id: 1}")  => 1   // The first one

@catarak Any advice? Is it the right way to go?

[catarak]

This is looking great. I've been digging into the CodeSandbox code to figure out how to fix the eval thing and yeah, I think the code you pulled from popcode works pretty well but isn't perfect. I think the magic is this line of code: https://github.com/CompuIves/codesandbox-client/blob/cd5fa7bfd9698e981f9202f4c1bd8faf8face33e/packages/app/src/sandbox/index.js#L81 (Also notice https://github.com/CompuIves/codesandbox-client/blob/cd5fa7bfd9698e981f9202f4c1bd8faf8face33e/packages/app/src/sandbox/index.js#L74 to validate the JS). Also check out the MDN page on eval (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) which breaks down this weird "indirect call" syntax to eval.

[catarak]

@shinytang6 any update on this? do you need any help or guidance?

[shinytang6]

Sorry for the delay @catarak, I’ve been a little busy in recent weeks,but I will come back to finish it in next week!

[catarak]

no worries! just wanted to make sure you weren't waiting on anything from me 😄

[catarak]

it's working, this is so cool!!!! anything you still have yet to solve?

one thing i noticed is that the cursor appears if the sketch is not running, and you can execute code. i assume it's running within the context of the web editor itself, but i think this should be disabled if the sketch is not running.

i will also do an in-depth review of the design and give feedback in that area.

[shinytang6]

I referred to the chrome console, so I made the cursor focused when the page is ready, but that is easy to change:)
There are some things about shortcuts, I have not disabled any shortcuts now if the cursor is focused on the console, I think maybe we should disable some shortcuts? e.g. comment Line, start sketch shortcut?

[catarak]

Comment line actually works in Chrome developer tools, so maybe it's fine to leave? I also think the start sketch shortcut is fine to leave, if you think about it more like a "refresh sketch" shortcut. But yes, I think it's important to consider all of the shortcuts and make sure it makes sense to leave the all.

Also I noticed that there's no syntax highlighting—is this because you haven't implemented it yet or do you need help with that?

[shinytang6]

I haven't implemented the syntax highlighting yet, I tried to configure the auto-completion and syntax highlight before but failed lol. @catarak Have you ever configured that before?

[catarak]

the syntax highlighting is implemented in the web editor—see https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Editor.jsx for reference, but basically you just need to include the syntax highlight file, which is already part of the web editor repo.

i don't know how to do autocomplete—@kaganjd and i had worked on it but we got stuck, and maybe we weren't taking the right approach. we can always come back to it later!

[marshalhayes]

👍 for this!

[shinytang6]

@catarak l found the autocomplete that the codemirror provides is a bit annoying. There are some bugs l haven't solved if autocomplete is enabled. Do you think it's necessary for us to support it now? If necessary, I will continue to explore

[catarak]

@shinytang6 i don't think you need to support autocomplete, and we can leave that for later!

[catarak]

@shinytang6 I noticed that the syntax highlighting is working for the interactive input, but then, once you hit "enter", the syntax highlighting disappears.

[shinytang6]

@catarak I took CodeSandBox as the reference, maybe the color of output should keep the same?

[catarak]

got it! i was looking at the chrome developer tools for reference. upon thinking about it, keeping the syntax highlighting when entering code would be difficult to implement.

one thing i see right now that's left to fix is disabling the console input if the sketch isn't running.

the other thing is the position/styling of the input. since there's not a design for this, i would use codesandbox as reference. i like that the input is fixed to the bottom, and i like that it has a different background color from the console to differentiate it. let me know if you need more help with these design specifics!

[catarak]

@shinytang6 do you need any help with these design changes?

[shinytang6]

one thing i see right now that's left to fix is disabling the console input if the sketch isn't running.

@catarak do you mean collapsing the console as default?

And l met some trouble implementing the different background color of console, could you help me if you are free?

[catarak]

one thing i see right now that's left to fix is disabling the console input if the sketch isn't running.

@catarak do you mean collapsing the console as default?

I mean hiding the 'ConsoleInput' component if the sketch is not running. You can do this in React like (this is approximate code)

{{ this.props.isPlaying &&
  <ConsoleInput />
}}

And l met some trouble implementing the different background color of console, could you help me if you are free?

Yes! So the background color of this input should be the same color as in the code editor, i.e. looking at the client/styles/components/_p5-<theme>-codemirror-theme.scss files:

.cm-s-p5-<theme> {
  background-color: <this color!!!!>
}

In the SCSS theme map, I would change the variable console-background-color, so you can leave the code

.console__editor .CodeMirror {
  ...
  @include themify() {
    background-color: getThemifyVariable('console-background-color');
  }
  ...
} 

And .console__input needs this same background color

.console__input {
  ...
  @include themify() {
    background-color: getThemifyVariable('console-background-color');
  }
  ...
} 

[shinytang6]

@catarak how about the current style?

[catarak]

looking great! a couple things:

1. i think in the light theme the background color for the console input should be the same as the code editor (which is white or almost white)
2. I think the '>' and '<' icons are slightly vertically misaligned, as in, slightly too high with respect to the text:

3. i'm trying to decide if it's weird that the console input just appears when you hit play. maybe it's fine and i'm just overthink it. probably best to just leave it for now and see what the user feedback is.

[catarak]

i've been really slowly working on this, and i think it's finally ready to be merged! woohoo!