Comments (14)
Unfortunately, I didn’t found a way properly detect a name of current syntax from document. So far I’, detecting syntax by checking language facet, which requires module import: https://github.com/emmetio/codemirror6-plugin/blob/main/src/lib/syntax.ts#L86-L96
Thus, it will require to import all lang modules just to detect current syntax
from codemirror6-plugin.
Tried to figure out a better approach but I haven't found anything yet. Posted on CodeMirror's forum here: https://discuss.codemirror.net/t/detect-language/5038
from codemirror6-plugin.
Finally got around to implementing snippets with the emmetConfig
facet. Worked like a charm.
What do you think about using that same emmetConfig
facet to specify which language / snippet type should be active?
emmetConfig.of({
language: 'html',
config: {
markup: {
snippets: {
'foo': 'ul.foo>li.bar+li.baz'
}
}
}
});
...then in https://github.com/emmetio/codemirror6-plugin/blob/main/src/lib/syntax.ts#L86 something like this:
export function docSyntax(state: EditorState): string {
// Check user configuration first.
const config = state.facet(emmetConfig);
if ( config.language ) return config.language;
// Fallback to standard language detection
const topLang = state.facet(language);
if (topLang === cssLanguage) {
return 'css';
}
if (topLang === htmlLanguage) {
return 'html';
}
return '';
}
from codemirror6-plugin.
Well, I guess it may work :) However, my only concern here is that there’s a hard dependency for cssLanguage
and htmlLanguage
. Also, it may not solve the issue with post-processors like Slim, Pug, SCSS etc.
from codemirror6-plugin.
What do you mean about the hard dependency? In that those languages have to be imported as a dependency and will affect the bundle size?
Considering Pug and SCSS accept plain ol' HTML & CSS, those can be allowlisted in my code based on my own language changer setup.
from codemirror6-plugin.
Yes, these languages should be imported somehow into bundle. Might lead to extra size if you have your own syntax highlighter.
from codemirror6-plugin.
Alternatively, I can remove these language bindings and leave a property, as you suggested. I think it’s OK for plugin consumers to manually set language that must be used
from codemirror6-plugin.
Alternatively, I can remove these language bindings and leave a property, as you suggested. I think it’s OK for plugin consumers to manually set language that must be used
Yes, I would be supportive of that. I do think the plug-in still relies on the HTMLLanguage
and CSSLanguage
in other parts, but I may be mistaken.
The plug-in should probably export a list of the languages it supports so that I could import that and use the right value for Emmet (e.g. 'sass' versus 'Sass')
import { emmetConfig, emmetSupportedLanguages } from '@emmetio/codemirror6-plugin';
emmetConfig.of({
language: emmetSupportedLanguages.html,
config: {
markup: {
snippets: {
'foo': 'ul.foo>li.bar+li.baz'
}
}
}
});
from codemirror6-plugin.
I think it’s OK for plugin consumers to manually set language that must be used
👍
from codemirror6-plugin.
Any thoughts on a manual language config option?
from codemirror6-plugin.
Thanks for pinging me up. Just published v0.3.0 which includes syntax
option to specify document syntax (updated README as well).
It also includes most recent Emmet version which also supports attribute override options.
from codemirror6-plugin.
Excellent to hear! Looking forward to trying it.
By the way: It looks like you've published 0.3.0 to NPM but it isn't up here on GitHub yet.
from codemirror6-plugin.
Yeah, forgot to push it :) should be available already
from codemirror6-plugin.
Thanks. Awesome work, @sergeche. Looking forward to trying that out in our setup.
from codemirror6-plugin.
Related Issues (16)
- Conditional Enabling HOT 2
- Make CSS autocomplete option position configurable/dynamic to better handle conflicts with built-in autocomplete HOT 3
- CSS autocomplete extension is not context aware HOT 1
- Populating Custom Snippets HOT 2
- Emmet does not use correct syntax highlighting HOT 5
- Set Prec to highest for Tab/Esc key Commands and export Commands
- When used in nextJS setup, it works on dev but when you build it does not work. HOT 2
- HTML should not suggest invalid tags HOT 3
- Snippet Previews
- Ignore expand abbreviation if multiple lines selected HOT 5
- Module doesn't export anything HOT 1
- console.log
- mobile support HOT 1
- Untranspiled code HOT 5
- preview rendering inside strings HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from codemirror6-plugin.