Syntax highlight is broken when changing the view state


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

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


so on state change the syntax highlight gets broken

my extensions are

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

const Extensions = [

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

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.

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

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.