stelin
March 14, 2023, 1:04pm
1
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
marijn
March 14, 2023, 1:08pm
2
Running precisely the code you show, I do see the strings being highlighted.
stelin
March 14, 2023, 1:34pm
3
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
marijn
March 14, 2023, 2:00pm
4
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.
stelin
March 14, 2023, 2:37pm
5
Perfect !
Thank you for your help Marijn !