emmetio / codemirror6-plugin Goto Github PK

If you have Tab mapped to expand abbreviation and indent, most of the time it seems to work fine, but occasionally if your cursor is inside of some text and you tab to indent, Emmet tries to expand that first word as an abbreviation.

Example: if you have the cursor on <p>, Emmet ignores and indent works properly.

Example: If you have your cursor inside on some text, it expands strangely.

Perhaps the Emmet expansion should not run if the selection includes a range > 0?

CSS snippets seem to be working in Vue, but Markup snippets don't. Am I missing something or is this a bug?

I'm currently using @codemirror/theme-one-dark on Codemirror 6 alongside Emmet (implemented using the abbreviationTracker extension) and I've noticed that the syntax highlighting is incorrect. See below for images.

How it should look:

How it looks:

Thanks.

How do you add custom snippets to Emmet in CodeMirror 6?

In the past, we would pass through an emmet property on the CodeMirror config that would contain all the snippets. Obviously we can't do that directly in CodeMirror 6. Would it be a Facet or something?

Currently the tab key for the abbreviationTracker has no precedence, but this should probably be set to highest given that the tab key might also be assigned to indentation.

Also please export the key commands, that way I can assign tabKeyHandler to Enter.

Preview should not render when cursor is inside a string

See below for example from replit.com which uses this plugin

See below video for examples. The plugin currently suggests invalid HTML tags, and seems to just match any given string. In VSCode, it does not do this. It only suggests Emmet Autocomplete when there is a valid HTML tag.

CodeMirror:

VSCode:

Should Emmet only be enabled for HTML / CSS compatible languages?
Is there a good way to limit Emmet activation based on the active language in a CodeMirror 6 instance?

Hey Sergey, we noticed that there's untranspiled code in the published package and was wondering if you can publish a non-esnext target https://github.com/emmetio/codemirror6-plugin/blob/main/vite.config.ts#L7?

We use codemirror's cm-buildhelper for prod builds and works well for us, for example: https://github.com/replit/codemirror-vscode-keymap/blob/master/package.json#L22. We still use vite for local development (you can click run on replit and you can see how it runs on replit with vite https://github.com/replit/codemirror-vscode-keymap).

codemirror 6 has great support for mobile devices.

the current implementation for emmet plugin makes it difficult to use on mobile devices (where most mobile keyboards do not have Tab or Cmd keys to trigger expanding abbreviations).

I suggest allowing click/tap on abbreviation preview to expand abbreviation (this is the behavior implemented in emmet-monaco-es for monaco editor).

It would also help to allow always showing the abbreviation preview (not just when it becomes complex), so that users know that emmet is available. May be this can be exposed as a configuration option.

great work!
Thank you

I believe there this a missed console.log (probably not removed after debugging)

Are there any ways to ensure Emmet is active for CodeMirror 6 legacy modes, such as Sass, Scss and LESS? Based on my reading of the source, it seems like the language has to be cssLanguage or htmlLanguage.

Related: Per #10, you recommended manually adding/removing Emmet based on if the language is supported, but as I look at all the Emmet source, it seems like you have a lot of code around if the syntax is supported ( such as

It seems that the Emmet extension currently conflicts with the built-in CSS autocomplete results and is always rendered at the top no matter how relevant it is.

I did some digging into the code and found that Emmet's CSS completion source always sets the filter flag to false and returns a boost of 99 for autocomplete options which causes them to be weighted above all other autocomplete options that may be present (e.g. the default ones).

It would be nice if this was configurable so that Emmet does not always render above other autocomplete options, especially when it may not be the most relevant.

See below gif for some examples. Typing in h1 at the top level results in height: 1px being inserted which is unexpected in this context (since h1 is a valid tag that can be selected and not inside a section). In the other case, typing in div.class {} results in div: .class; {} which is also unexpected and can be frustrating since it renders that selector impossible to complete on its own.

Currently, there are 3 known contexts for CSS in Emmet:

• global: typing something outside any section or property. In this case, Emmet should provide completions for snippets only. Snippets are code blocks of arbitrary content (like @k for @keyframe { … }.
• inside section: should provide completions for snippets and properties like p10 → padding: 10px
• inside property value: should provide value-specific completions, like #f.5 → rgba(255, 255, 255, 0.5)

The CM6 extension should respect these contexts to match what's expected and what the equivalent extensions in other editors (e.g. Sublime do).

For reasons we have to mount CodeMirror 6 in ShadowDOM (which CodeMirror 6 supports via the root property of EditorView.

Emmet overall works fine, but theme styles don't work in Emmet in the ShadowDOM since the Emmet Preview's EditorView is using the parent document instead of the ShadowDOM root.

A couple of ideas on how to solve the problem:

1. Use the parent EditorView's root property when creating the preview EditorView, though it doesn't seem like createPreview gets the parent EditorView which could be referenced.
2. Give an API to retrieve the preview EditorView to allow setting the root manually with setRoot

Could the EmmetKnownSyntax list be converted to an enum and exported so those values can be referenced?

Right now in my codebase I'm matching up the CodeMirror 6 Editor's language to an EmmetKnownSyntax but I'm just using a string. Having that value as an enum would ensure matching the exact values and allow authors to know which syntaxes are supported just by referencing the enum.

I basically copied the source and used it in a page in next js based app. when on dev (yarn dev in nextjs) it works fine, but when you build it you get the following error. Do you know what the problem is?

Im doing expandAbbreviation. Same code as yours.

Cannot read properties of undefined (reading '0')
at i (abbreviation.es.js:12:1)
at l (abbreviation.es.js:24:1)
at abbreviation.es.js:282:1
at abbreviation.es.js:290:1
at e (abbreviation.es.js:136:1)
at abbreviation.es.js:79:1
at F (abbreviation.es.js:47:1)
at emmet.es.js:1443:16
at t5 (emmet.es.js:1457:1)
at et (emmet.ts:48:12)

Related to #14: I have the new syntax setup in place. Snippets work correctly, but the snippet autocompletions are not showing up for Sass and SCSS. CSS still shows them fine.

Sass:
https://user-images.githubusercontent.com/777155/233471378-15fb816b-5caf-4134-b67c-871e7b37dd9b.mov

Regular CSS:

I haven't tested the other languages, but I'll provide more details if I do.

Worth noting that I'm using the just released https://github.com/codemirror/lang-sass package via the latest version of https://github.com/codemirror/language-data

Hey @sergeche! Thanks so much for getting this published.

However, when I tried to install the package and follow the usage instructions in the README, I discovered that abbreviationTracker isn't a valid export. Digging deeper, I found that nothing is actually getting exported via the following code:

import * as emmet from '@emmetio/codemirror6-plugin';

console.log(Object.keys(emmet));

Indeed, when I opened up the bundle (under dist/plugin.js) and grepped for export nothing came up. Possibly an issue with the Vite config's rollup options?

Created a repl with a minimal repro here: https://replit.com/@SergeiChestakov/cm-emmet-exports

Which is hosted here: https://cm-emmet-exports.sergeichestakov.repl.co/

You can visit that URL and check the logs to see that logging the module's exports produces an empty array