Howdy folks. This is a somewhat long (… sorry!) deep dive into several years’ worth of work that started when I was a staff engineer at The New York Times and has followed me into open source...
Howdy folks. This is a somewhat long (… sorry!) deep dive into several years’ worth of work that started when I was a staff engineer at The New York Times and has followed me into open source development in the years since I left to do my own thing! In it, I break down the issues we’ve faced while attempting to integrate React and ProseMirror — there are loads of code snippets and live demos in there. I hope that at least one other person finds this interesting!
Oh my gosh, this brought me back. 10+ years ago I worked on the custom WYSIWIG editor for Time magazine's CMS backend, but I assure you it was much less snazzy than this (a lot less React, a lot...
Oh my gosh, this brought me back. 10+ years ago I worked on the custom WYSIWIG editor for Time magazine's CMS backend, but I assure you it was much less snazzy than this (a lot less React, a lot more jQuery :')
This was a delightfully detailed blog post - you have an amazingly clear way of laying out the underlying problems that makes it feel like we're debugging with you :) Although I'm sure it was much more arduous in real life. The code snippets and live editors were also seriously impressive!
As an aside, any recommendations for OSS projects in need of front-end contributors along this vein (frontend, React)? I have some extra time on my hands this year I'd love to put to use!
Wild to meet a fellow media CMS developer!! Yeah, don't you worry, there was plenty of jQuery (and Backbone and Marionette, too!) at the Times haha. Thank you for the kind words, though, I'm...
Wild to meet a fellow media CMS developer!! Yeah, don't you worry, there was plenty of jQuery (and Backbone and Marionette, too!) at the Times haha. Thank you for the kind words, though, I'm really glad you enjoyed it!! I had a lot of fun (and only a little bit of frustration) building out all of the snippets and demos.
Well, I'd love to have some more folks working with me on Storyteller, if that seems at all interesting to you? It's a self-hosted platform for automatically aligning audiobooks and ebooks. It covers quite a lot of domains, so there are lots of places to plug in — there's a frontend app written with Next.js, a backend Typescript system with some fun distance computation and DOM manipulation algorithms, and a React Native app (with some native Swift and Kotlin code to boot!)
Great post, and interesting history! The interactive demos were also useful, though the third and fourth ones do crash the page if I enter a line break. I somehow had a feeling this was going to...
Great post, and interesting history! The interactive demos were also useful, though the third and fourth ones do crash the page if I enter a line break.
I somehow had a feeling this was going to end in "Let's just rewrite it in React". Though in this case, I can certainly understand why.
Good call on the crashing demos, I should wrap those in error boundaries, so the whole page doesn't break. They crash for the same reason as the rest of the buggy behavior in those demos! Hahaha...
Good call on the crashing demos, I should wrap those in error boundaries, so the whole page doesn't break. They crash for the same reason as the rest of the buggy behavior in those demos!
Hahaha yeah, it was the right move here, though I tried very hard to avoid it! It's a pretty complex rendering system, and translating it to React was a doozy.
Howdy folks. This is a somewhat long (… sorry!) deep dive into several years’ worth of work that started when I was a staff engineer at The New York Times and has followed me into open source development in the years since I left to do my own thing! In it, I break down the issues we’ve faced while attempting to integrate React and ProseMirror — there are loads of code snippets and live demos in there. I hope that at least one other person finds this interesting!
Oh my gosh, this brought me back. 10+ years ago I worked on the custom WYSIWIG editor for Time magazine's CMS backend, but I assure you it was much less snazzy than this (a lot less React, a lot more jQuery :')
This was a delightfully detailed blog post - you have an amazingly clear way of laying out the underlying problems that makes it feel like we're debugging with you :) Although I'm sure it was much more arduous in real life. The code snippets and live editors were also seriously impressive!
As an aside, any recommendations for OSS projects in need of front-end contributors along this vein (frontend, React)? I have some extra time on my hands this year I'd love to put to use!
Wild to meet a fellow media CMS developer!! Yeah, don't you worry, there was plenty of jQuery (and Backbone and Marionette, too!) at the Times haha. Thank you for the kind words, though, I'm really glad you enjoyed it!! I had a lot of fun (and only a little bit of frustration) building out all of the snippets and demos.
Well, I'd love to have some more folks working with me on Storyteller, if that seems at all interesting to you? It's a self-hosted platform for automatically aligning audiobooks and ebooks. It covers quite a lot of domains, so there are lots of places to plug in — there's a frontend app written with Next.js, a backend Typescript system with some fun distance computation and DOM manipulation algorithms, and a React Native app (with some native Swift and Kotlin code to boot!)
Great post, and interesting history! The interactive demos were also useful, though the third and fourth ones do crash the page if I enter a line break.
I somehow had a feeling this was going to end in "Let's just rewrite it in React". Though in this case, I can certainly understand why.
Good call on the crashing demos, I should wrap those in error boundaries, so the whole page doesn't break. They crash for the same reason as the rest of the buggy behavior in those demos!
Hahaha yeah, it was the right move here, though I tried very hard to avoid it! It's a pretty complex rendering system, and translating it to React was a doozy.
Just updated the post with some error boundaries, so the whole page doesn't crash when the demo breaks. Thanks for calling that out!
Haha, I like the cheeky error message.