Collaborative Editing in CodeMirror (2020)

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

60 points by luu 17 days ago | 10 comments

jazzypants 15 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 15 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 15 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 15 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 15 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 15 days ago |

Marijn Haverbeke and Fabrice Bellard are my heroes

ejohansson 15 days ago |

Happy to see the love for Marijn. Goat.

qu8n 15 days ago |

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

sbruchmann 15 days ago |

(2020)

aniceperson 15 days ago |

blessed