Hi,
I am playing around with the Underline example in Decorations CodeMirror Decoration Example by modifing the function underlineSelection(view) function to underline a given word and not using the undelineKeymap const. to underline selected text. When I add the modified function to the exensions: list it gives the Error: “Unrecognized extension value in extension set” because of multiple instances of @codemirror/state are loaded.
What are some ways to get around the error?
The code I am playing with to basically get a particular word to be underlined.
<template>
<div>
<h1>Codemirror 6 Example</h1>
<div id="cm-editor">
</div>
</div>
</template>
<script setup>
import {EditorState, basicSetup} from "@codemirror/basic-setup"
import {python} from "@codemirror/lang-python"
import {EditorView, Decoration, ViewPlugin} from "@codemirror/view"
import {gutter, GutterMarker} from "@codemirror/gutter"
import {StateField, StateEffect} from "@codemirror/state"
const emptyMarker = new class extends GutterMarker {
toDOM() { return document.createTextNode("ø") }
}
const emptyLineGutter = gutter({
lineMarker(view, line) {
const allText = view.state.doc.text.join('\n')
const lineText = allText.slice(line.from, line.to);
console.log("lineText", lineText)
return lineText.includes('is') ? emptyMarker : null
},
initialSpacer: () => emptyMarker
})
const addUnderline = StateEffect.define();
const underlineField = StateField.define({
create() {
return Decoration.none
},
update(underlines, tr) {
underlines = underlines.map(tr.changes)
for (let e of tr.effects)
if (e.is(addUnderline)) {
underlines = underlines.update({
add: [underlineMark.range(e.value.from, e.value.to)]
})
}
return underlines
},
provide: (f) => {
EditorView.decorations.from(f)
}
})
const underlineMark = Decoration.mark({class: "cm-underline"})
const underlineTheme = EditorView.baseTheme({
".cm-underline": { fontSize: "16pt", fontWeight:"bold" , textDecoration: "underline 3px blue" }
})
function underlineSelection(view) {
const allText = view.state.doc.text.join('\n')
const idx = allText.indexOf("is")
let effects = [addUnderline.of({from: idx, to: idx+2})]
if (!effects.length) return false
if (!view.state.field(underlineField, false))
effects.push(StateEffect.appendConfig.of([underlineField,
underlineTheme]))
view.dispatch({effects})
return true
}
new EditorView({
state: EditorState.create({
doc: `x = 10
if x == 12:
print("It is 12")
this is not python
print("The end")`,
extensions: [basicSetup, python(), emptyLineGutter ,underlineSelection ]
}),
parent: document.body
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>