Hi all, having some issues with implementing a custom mode with defindeMode in V6 in a react app.
As the title states, I am getting an undefined error. I originally attempted this with the uiw/codemirror library, but it appears they don’t support a custom mode.
End result I want is for a token of 12312.53sddfsg.ssdjfs to have 3 separate colors based on their class / position in relation to the “.” separators
I am trying to use the editor to style a JWT token, and assign unique colors to each part of the token. From what I have read, a custom mode is required to achieve this. Here is a code snippet, any feedback would be appreciated, thanks!
import React, { useRef, useEffect, useState } from 'react'
import { EditorState, basicSetup } from '@codemirror/basic-setup'
import { EditorView } from '@codemirror/view'
export const CodeEditor = ({ setCodeEditorState }) => {
const codeEditor = useRef()
const [editorCode, setEditorCode] = useState('')
const onUpdate = EditorView.updateListener.of((v) => {
setEditorCode(v.state.doc.toString())
})
useEffect(() => {
const state = EditorState.create({
doc: '',
extensions: [
basicSetup,
onUpdate,
],
})
const view = new EditorView({ state, parent: editor.current })
return () => {
view.destroy()
}
}, [])
useEffect(() => {
// tried calling Codemirror.defineMode here, caused error
}, [codeEditor])
return <div ref={codeEditor} />
}