Multi-line input for DevTools Console #454
Conversation
| type Props = { | ||
| evaluateConsole: (command: string) => void, | ||
| const monacoOptions = { | ||
| // language: 'javascript', |
There was a problem hiding this comment.
Why did you comment this line?
There was a problem hiding this comment.
Thanks @CompuIves ! Pleasure to help.
Do you want syntax highlighting and autosuggestion as well 😃 ? (if we uncomment the line)
But it looks that in Monaco all editors share only one theme, and if it's not specified it will be the default theme. (microsoft/monaco-editor#338) In code mirror mode the theme is not defined.
We would need to detect if we are in CodeMirror mode from the user preference. We would need to define theme like how Monaco.js did if we are in code mirror mode, or fall back to single line input for simplicity.
Edit: Alternative approach is to extract defineTheme logic from Monaco.js into MonacoReactComponent/a separate file and have a guard that prevents the theme from being defined twice. That way even in code mirror mode we shall still have the theme available. (defining theme on input component mounting will sometimes result in text re-colorized briefly in other Monaco editors so it's best that theme is only defined once).
There was a problem hiding this comment.
The above changes (extracted to a separate file): xyc@8b4f76d. Please let me know what you think @CompuIves
There was a problem hiding this comment.
Edit: Alternative approach is to extract defineTheme logic from Monaco.js into MonacoReactComponent/a separate file and have a guard that prevents the theme from being defined twice. That way even in code mirror mode we shall still have the theme available. (defining theme on input component mounting will sometimes result in text re-colorized briefly in other Monaco editors so it's best that theme is only defined once).
I like this approach, sounds good!
Syntax Highlighting and autosuggest are reaaally cool. Makes it a lot easier to work with the console!
extract define theme, remove unused state command
…eSandbox theme styles
|
Cool I've merged in the syntax highlighting changes and merged with |
|
Maaan you deserve all the thanks! I love this feature, and the amount of polish you've added is impressive. Thanks for your contribution! |
|
Thanks for the opportunity to contribute! Love what you've been doing with CodeSandbox! |
What kind of change does this PR introduce?
Multi-line input support for DevTools Console like VSCode console / Chrome console. It's implemented using Monaco (similar to VSCode implementation).
Also fixes issues where
What is the current behavior?
Console input cannot have multiple lines.
What is the new behavior?
Console input has multi-line support. Shift + Enter goes to the next line. Enter evaluates the command. Up and Down arrow works as expected. You can paste multiple lines into the prompt as well.
Checklist: