Codesandbox-client: Add emmet support

[kenyk7]

[lbogdan]

There is already support for emmet in the (default) Monaco editor, you can access it with Ctrl+F10.

[kenyk7]

You can change the keys to use the key tab :)

[CompuIves]

Initially I tried binding it to the Tab character, but it overrode the existing behaviour (autocomplete, indent, insert tab characters). Maybe there is a way to retain existing functionality and add emmet behind the Tab press, we need to look into this. Would be possible if we can call the functionality behind Tab manually.

[viankakrisna]

Ctrl+E would be the alternative, at least on sublime that's the default :D

[kenyk7]

For css or sass in vue files: Ctrl + F10 it works badly :(

[HamedPour]

Hi Van, have to agree with kenyk7 there. I've been trying to us use Ctrl+F10 but its exceptionally cumbersome. Which is a shame coz I really like codesandbox. I'd be much happier with something that can be done with one hand. Crtl + E or even Ctrl + Alt + A etc

[CompuIves]

I completely agree, this is too cumbersome right now. I'll experiment with CTRL+E/CMD+E a bit!

[CompuIves]

Some updates on this! I've been experimenting a bit and got it working with Tab, will deploy that today. It only works for HTML now, but I'm working on an vscode like implementation:

[dfsq]

However Emmer seems to have stopped working for anything else but HTML. For example in JSX I'm no longer able to use abbreviations, nor in CSS.

[CompuIves]

I'll deploy the old functionality for in JSX as well to fix that!

On Wed, Feb 21, 2018 at 11:24 AM Aliaksandr Astashenkau <
[email protected]> wrote:

However Emmer seems to have stopped working for anything else but HTML.
For example in JSX I'm no longer able to use abbreviations, nor in CSS.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/194#issuecomment-367279436,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CG0qiwN6bwfySNhL-bzXWjVVQKe7ks5tW-7bgaJpZM4PSbQH
.

[lbogdan]

@CompuIves Is this deployed?

[CompuIves]

Deployed!

On Thu, May 10, 2018, 17:17 Bogdan Luca [e-mail] wrote:

@CompuIves https://github.com/CompuIves Is this deployed?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/194#issuecomment-388085604,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CNYZ9mAOzoKBpwzG0lonBjx4Jp7dks5txFolgaJpZM4PSbQH
.

[cloud-walker]

Emmet keybinding is broken until last release, pressing cmd + E it opens the find component instead 🙈

[CompuIves]

This probably happened because of our move to the new Monaco. The functionality is still there, it just needs to be connected again. Reopened the issue for this!

[satyarohith]

@CompuIves I'm interested! anything helpful to look into? :)

[CompuIves]

Emmet is back!

[mrmurphy]

I can't seem to get it to work with either ctrl-e or command-e (editing an HTML file). And control-F10 isn't possible to test on my current keyboard :D, any tips?

https://codesandbox.io/s/7zoozjw4w0
Brave Browser.

[CompuIves]

Ahh, it seems like I haven't enabled it in the HTML templates yet. I'll enable that either this or next week with the new VSCode deploy.

[mrmurphy]

Thanks!
On Nov 20, 2018, 1:54 PM -0700, Ives van Hoorne [e-mail], wrote:

Ahh, it seems like I haven't enabled it in the HTML templates yet. I'll enable that either this or next week with the new VSCode deploy.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[samsch]

ctrl-e also doesn't work in js(x) contexts, though it will expand with tab if it recognizes an html element name. Meaning emmet doesn't work at all for React components right now.

[pamcy]

Anything new this week? Without emmet tab function in HTML is really painful :(

[quangv]

Assuming Emmet isn't working atm on Monaco? as well as VSCode & CodeMirror too, correct?