Collaborative Editing in CodeMirror (2020)

Posted by luu 6 days ago

Collaborative Editing in CodeMirror (2020)(marijnhaverbeke.nl)

60 points | 10 comments

jazzypants 4 days ago|

I'm a huge fan of this guy's work. His code is really easy to read, and I learn a lot every time I dig in. I think that Lezer [0] is underappreciated considering how flexible and performant it is.

Edit: I just realized I didn't even mention his most famous work, Eloquent JavaScript [1]! This book is incredible. I couldn't finish it the first time, so I'm not sure if it's the best book for beginners, but I learned so much when I picked it back up a few years later that I think that every JavaScript programmer should read through it and do the exercises at least once.

[0] https://lezer.codemirror.net/

[1] https://eloquentjavascript.net/

eliasdejong 4 days ago||

CodeMirror is great, but still requires a lot of clientside JavaScript. I wonder if it would be possible to create a code editor in the same style OverType[0], where the editor is basically just an HTML textarea. You would need 70% less JavaScript code to do exactly the same thing, and it supports syntax highlighting out of the box[1].

[0]: https://github.com/panphora/overtype

[1]: https://github.com/panphora/overtype/pull/35

bikeshaving 4 days ago|

I’ve tried to create the minimalist version of this with Revise.js. The main surface area is a custom element called a `<content-area>`. The OverType library you linked to uses a time-old technique where you essentially put a duplicate copy of the content over a `<textarea>` to highlight it but this doesn’t really work in mobile and it messes with the selection. I’ve tried to grapple with `contenteditable` directly with my solution, but it does try to use less JavaScript and it does try to be more minimal.

https://github.com/bikeshaving/revise https://revise.js.org https://revise.js.org/blog/introducing-revise/

lioeters 4 days ago|||

Just wanted to say, I enjoyed the article and your minimal rich text editor library looks great! I've been working with heavily customized code editors (mostly CodeMirror from previous major versions to current) and rich text editors (Quill, etc.) for years now, off and on. For various reasons I keep coming back to building a new editor, sometimes in the terminal for a REPL with syntax highlight, or a Markdown editor in the browser, other times attempting a content editor with media blocks. CodeMirror and ProseMirror are impressive works and my current go-to libraries, but I'd love to try a light-weight approach from the bottom up, small enough to be able to understand it completely.

eliasdejong 4 days ago|||

Read your blogpost, I will need a code editor soon so I might have a stab at hacking something together.

> but this doesn’t really work in mobile and it messes with the selection

I haven't tested it personally, but on the OverType they claim "excellect mobile support".

sheepy 4 days ago||

Marijn Haverbeke and Fabrice Bellard are my heroes

ejohansson 4 days ago||

Happy to see the love for Marijn. Goat.

qu8n 4 days ago||

Found out about CodeMirror recently and I was marveled at what it could do. Huge props to Marijn.

sbruchmann 4 days ago||

(2020)

aniceperson 4 days ago|

blessed