High-level design idea behind CodeMirror (JS text editor)

Hello, I’ve made a little typing game in Svelte >> Loading... • REPL • Svelte

Every letter is a simple svelte component and player-cursor jumps from one letter to next. - then change it’s inner state according to key player press.
I realized that it would have some performance issues with really long texts and it does :slight_smile:

Then I’ve started wondering - what is the design idea behind famous code editors like CodeMirror?
How are represented letters/words etc. so it’s performant while do many other tasks?

I am sorry … I am probably too big noob for understand the code on github project.

Thanks.

PS: I just found v6/guide AND older approach

CodeMirror represents its content as a tree of lines, with lines mostly just being strings, so the overhead per letter is limited. When there’s more content then fits in the viewport, it only renders the viewport to keep the DOM size under control.

1 Like