Hi
I’m trying to integrate CodeMirror 6 in a preact app like below.
However, the linenumbers don’t show up and I’ve spent several hours debugging but can’t figure out why.
Could you please help? It currently looks like this: https://pasteboard.co/JvVDJu9.png
Thanks!
import {EditorView} from "@codemirror/next/view"
import {EditorState} from "@codemirror/next/state"
import {lineNumbers} from "@codemirror/next/gutter"
import {gutter} from "@codemirror/next/gutter"
import {oneDark} from "@codemirror/next/theme-one-dark"
import {search} from "@codemirror/next/search"
import {useEffect, useRef} from "react"
const createEditor = (ed) => {
const ln = lineNumbers();
new EditorView({
parent: ed,
state: EditorState.create({
doc: "Hi there\nHello"
}),
extensions: [
gutter(),
ln,
oneDark
]
})
}
const CodeMirror = () => {
const s = {
height: '100%'
}
const ed = useRef();
useEffect(() => {
createEditor(ed.current);
})
return (
<div id="cm" ref={ed} style={s}></div>
);
}
export default CodeMirror;