Collaborative Editing in CodeMirror (2020) (opens in new tab)

(marijnhaverbeke.nl)

52 pointsluu8d ago7 comments

7 comments

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/

eliasdejong6d 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

bikeshaving6d 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/

lioeters5d 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.

eliasdejong5d 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".

sheepy6d ago

Marijn Haverbeke and Fabrice Bellard are my heroes

ejohansson6d ago

Happy to see the love for Marijn. Goat.

sbruchmann6d ago

(2020)

aniceperson6d ago

blessed

j / k navigate · click thread line to collapse