How to use legacy-modes in CodeMirror6

Hi,

I have to migrate from CodeMirror5 to CodeMirror6, everything seems to work so far
so good, but I don’t understand how modes are supposed to work now.

I’m trying to use the solr mode.

Here’s what I am doing

import {solr} from "@codemirror/legacy-modes/mode/solr"
import {EditorView} from "codemirror"

import {
  StreamLanguage,
  defaultHighlightStyle,
  syntaxHighlighting
} from '@codemirror/language'

let view = new EditorView({
  extensions: [
    StreamLanguage.define(solr),
    syntaxHighlighting(defaultHighlightStyle, {fallback: true})
  ]
})

In CM5, for the following input ‘“test” OR “prod” AND 1’ the DOM

<span class="cm-string">"test"</span> 
<span class="cm-operator">OR</span> 
<span class="cm-string">"prod"</span> 
<span class="cm-operator">AND</span> 
<span class="cm-number">1</span></span>

In CM6, the DOM looks like this

<div class="cm-line">"test" OR "prod" AND <span class="ͼe">1</span></div>

I did some debugging, and it looks like the mode is doing its job. For the above
input the mode will emit : string, operator, string, operator, number

What I am missing here ?

Thanks

Running precisely the code you show, I do see the strings being highlighted.

Thank you for your answer.

I did a clean reinstall, and now I achieve to have the same result as in your test.
The code didn’t change, so I have no idea of what happened there.

The DOM looks like this now

<div class="cm-line">
<span class="ͼe">"test"</span> OR <span class="ͼe">"prod"</span> AND <span class="ͼd">1</span
</div>

My understanding is that the ͼe class is replacing the cm-string class and ͼd is replacing the cm-number class. Am I right ?

Why there is no class for the operators (.cm-operator) ? Without a class I can’t apply a style.

Thanks

You probably had some duplicated dependencies (multiple versions installed and loaded), which tends to mess up the functioning of the library.

Those are generated classes from highlighting styles, and not something you should target. Look into classHighlighter from @lezer/highlight if you want to do syntax highlighting via external CSS.

Perfect !

Thank you for your help Marijn !