YAML language support

[juliusv]

This is just to track that there doesn't currently seem to be any YAML language support yet, neither for lezer, nor for CodeMirror Next more generally. YAML being the de-facto standard config language for so many current cloud tools would be great to support at some point.

[marijnh]

I'm unlikely to work on this myself, so this'd be a great candidate for a 3rd party implementation.

[juliusv]

Yeah, I expect YAML to be one of the more challenging languages to add support for. For anyone interested in it, this might be of help: https://github.com/yaml/yaml-grammar

"Fully comprehending the YAML grammar is quite an undertaking for most mortals. Creating a fully compliant parser has proven almost impossible."

[marijnh]

Hah. That's what I was afraid of. Probably running the CM5 mode in stream-syntax is the least annoying option for the time being.

[amotl]

Hi there,

while searching the web for a browser-based YAML editor, I found your notes here. When looking further, I found an article outlining a Vue YAML code editor component [1], in turn based on codemirror and js-yaml. Is this something suitable?

With kind regards,
Andreas.

[1] https://www.programmersought.com/article/63575203057/

[marijnh]

There is now a stream mode for YAML in the legacy-modes package, which can be used for YAML highlighting. While it'd still be great if someone were to write and distribute a more thorough parser at some point, I don't expect to be working on this myself, so I'm going to close this issue.

[juliusv]

Btw. for anyone curious about using the legacy-modes YAML support, this is how I got it working in a minimal way:

import * as yamlMode from '@codemirror/legacy-modes/mode/yaml';
import * as streamParser from '@codemirror/stream-parser';

const yaml = new LanguageSupport(streamParser.StreamLanguage.define(yamlMode.yaml));

...and then you can use yaml as an extension.

[amotl]

Thank you @marijnh and @juliusv!

[damolaobaleke]

Hi what library is the LanguageSupport Object from ?

[marijnh]

It's from @codemirror/language.

[damolaobaleke]

Yeah, I expect YAML to be one of the more challenging languages to add support for. For anyone interested in it, this might be of help: https://github.com/yaml/yaml-grammar

"Fully comprehending the YAML grammar is quite an undertaking for most mortals. Creating a fully compliant parser has proven almost impossible."

I get the error Argument of type 'StreamLanguage<unknown >' is not assignable to parameter of type 'Language'.
When passing it as an argument in the LanguageSupport Object. So it doesn't see StreamLanguage as returning a typeof language. I tried passing the type as well like this StreamLanguage<Language>

[damolaobaleke]

@juliusv @amotl any ideas ?

[vyakhorev]

Thank you @marijnh @juliusv =)

As for me, a working solution for yml highlighting is..

Install

"codemirror": "^6.0.1",
"@codemirror/language": "^6.3.1",
"@codemirror/legacy-modes": "^6.3.1",
"@codemirror/stream-parser": "^0.19.9",

Then

import { basicSetup, EditorView } from 'codemirror'
import * as yamlMode from '@codemirror/legacy-modes/mode/yaml';
import { StreamLanguage, LanguageSupport } from "@codemirror/language"

const yaml = new LanguageSupport(StreamLanguage.define(yamlMode.yaml));

ideInput = new EditorView({
      doc: "<here goes default yaml code>",
      extensions: [
        basicSetup,
        yaml
      ],
      parent: document.getElementById("root-div");
    })

Omiting the LanguageSupport constructor (see below) works for highlighting as well.

const yaml = StreamLanguage.define(yamlMode.yaml);

[luania]

Yeah, I expect YAML to be one of the more challenging languages to add support for. For anyone interested in it, this might be of help: https://github.com/yaml/yaml-grammar
"Fully comprehending the YAML grammar is quite an undertaking for most mortals. Creating a fully compliant parser has proven almost impossible."

I get the error Argument of type 'StreamLanguage<unknown >' is not assignable to parameter of type 'Language'.我收到错误“ StreamLanguage<unknown > ”类型的参数不能分配给“语言”类型的参数。 When passing it as an argument in the LanguageSupport Object. So it doesn't see StreamLanguage as returning a typeof language. I tried passing the type as well like this StreamLanguage<Language> 将其作为 LanguageSupport 对象中的参数传递时。因此它不会将 StreamLanguage 视为返回语言类型。我也尝试像这样传递类型 StreamLanguage<Language>

import { LanguageSupport, StreamLanguage } from '@codemirror/language';

[iiian]

Question: how can we get collapses like are available for javascript? An extremely important aspect of YAML is the ability (in larger files) is the ability to check indentation? So I'd love to be able to collapse with the > & v symbols, but I don't know how to enable it and I suspect it's due to the implementation with the legacy parser or whatever. What would it take to add this ability?