Hello,
I am assessing CodeMirror and as part of our new codebase we decided to go build free for JS libs, by either focusing on vanilla libs when suitable or leveraging native browser support of JS modules. The code below runs correctly as an npm package but fails when imported as a browser JS module.
Would there be anything that would prevent the use of CodeMirror in this context? And any idea how to fix this issue?
Thanks
Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded
Like to the online sandbox
The code as an HTML/JS module
<script type="module">
import {
basicSetup,
EditorView
} from 'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm'
import {
autocompletion
} from 'https://cdn.jsdelivr.net/npm/@codemirror/autocomplete@6.18.6/+esm'
import {
schemaCompletionSource,
sql
} from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-sql@6.8.0/+esm'
const mySchema = {
'my_table': [
'id',
'name',
'email'
],
'another_table': [
'id',
'description'
]
};
const sqlConfig = {
defaultSchema: 'my_schema',
defaultTable: 'another_table',
schema: mySchema,
};
function myCompletions(context) {
return schemaCompletionSource(sqlConfig)(context)
}
let myView = new EditorView({
doc: `select * from users where age > 20`,
extensions: [basicSetup, autocompletion({
override: [myCompletions]
}), sql(sqlConfig)],
parent: document.getElementById('editor')
})
</script>