Syntax highlight is broken when changing the view state

v6
1

Hello,

I’m building a simple code editor in browser with file tree support. so basically I’ve a single dom element (BTW I’m using VueJS). the page starts with the below defined view

let view = new EditorView({
    doc: primaryFile.content,
    extensions: Extensions,
    parent: editor.value, // vue reference to a div element
})

which works as expected and every thing is perfect

image
image1460×458 48.9 KB

but on any file click, I run the below code to change the state of the view

let state = EditorState.create({
        doc: file.content,
        extensions: Extensions
})

view.setState(state)

so on state change the syntax highlight gets broken

image
image1311×453 43.5 KB

my extensions are

import {basicSetup} from "codemirror"
import {php} from "@codemirror/lang-php";
import {oneDarkTheme} from '@codemirror/theme-one-dark'

const Extensions = [
    oneDarkTheme,
    basicSetup,
    php(),
]
2

If I try to set up something similar on the sandbox on the website, I don’t see this happening.

3

Thanks for the quick response. I see your example works as expected and it also works with just JS without frameworks PlayCode - Javascript Playground, but I was able to reproduce it using vuejs here PlayCode - Javascript Playground.

4

Don’t put CodeMirror data structures in your Vue data. Vue will perform weird magic operations on the stuff it is given as data, which usually breaks 3rd party classes. Just put plain JSON stuff there.

1 Like
5

Thank you so much! I see now separating codemirror from other dom manipulators helps avoid unexpected such behaviors.

with some changes. It works now with Vue PlayCode - Javascript Playground.