preact integration issue

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;

Actually, false alarm :slight_smile:

It is working OK, just needed the extensions inside the state obj:

new EditorView({
  parent: ed, 
  state: EditorState.create({
  	doc: "Hi there\nHello",
  	extensions: [
  		//matchBrackets(),
  		ln,
  		oneDark
  	]
  })

})