Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Collaborative Editing in CodeMirror (2020)

marijnhaverbeke.nl

Post reply on HN
Print view View original

1–10 of 11 posts

Re: Collaborative Editing in CodeMirror (2020)

#2

Post by jazzypants »

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/

Re: Collaborative Editing in CodeMirror (2020)

#7

Post by eliasdejong »

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

Re: Collaborative Editing in CodeMirror (2020)

#8

Post by bikeshaving »

eliasdejong wrote: post #7

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/overtyp…

I’ve tried to create the minimalist version of this with Revise.js. The main surface area is a custom element called a ``. The OverType library you linked to uses a time-old technique where you essentially put a duplicate copy of the content over a `` 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/

Re: Collaborative Editing in CodeMirror (2020)

#9

Post by lioeters »

bikeshaving wrote: post #8
eliasdejong wrote: post #7

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/overtyp…

I’ve tried to create the minimalist version of this with Revise.js. The main surface area is a custom element called a ` `. The OverType library you linked to uses a time-old technique where you essentially put a duplicate copy of the content over a ` ` 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 i…

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.
Post reply on HN