Medium Engineering

Thanks for clarifying and yes, lots of interesting stories to be told around the edges of this post. Some are already written and linked. For example, I'd recommend Why ContentEditable is Terrible by Nick. https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40…

content editable has it's own problems (https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40… and more modern rich text editors do build up some kind of model of the data they are representing. My favorite is prosemirror, which presents the user a contenteditable, but maps changes as transformations to it's own internal document model. Each version of the document is immutable and it uses a fast diffing algo (similar to react) to determine the DOM mutation steps necessary to represent the newest version document. As a result, it becomes "trivial" to support multi-user collaboration, since you just import the other user's transformations to the document model as they come in (http://prosemirror.net/demo/collab.html#edit-Example). Since the entire document is now modeled as a tree structure, it becomes easy to do custom serialization/deserialization, ie: to markdown and back again (http://prosemirror.net/demo/markdown.html).

Also, on a more technical level 4chan's ads aren't served from a well known ad host like Google, so they wouldn't be blocked by a typical blacklist without filtering URLs containing ad -- which some adblockers do, causing [all kinds of problems] [0]. [0]: https://medium.com/medium-eng/the-unluckiest-paragraphs-751dd36d2d30

From what I understand, this is how Medium organizes the fast retrieval and editing of their rich text. You might want to read this for more information: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40… I may have missed something, though :-|

While the Ruby community wasn’t looking, the rest of the world has moved on to having standalone servers to manage & process their file uploads. Latest example: https://medium.com/medium-eng/the-stack-that-helped-medium-drive-2-6-m…

This is very cool. I'm curious if you have thoughts on this post about Medium's implementation and where you agree or diverged. https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40…

Apparently ContentEditable is unfixable: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40…

That's assuming users aren't resetting their locale. It's not uncommon for non english users to assume that the english version of a site is the real deal and their version is an inferior localization done by some backbenchers at whatever company made it. For example, here's a story about how the majority of power users in Poland use an english keyboard with specialized key bindings, because using a polish keyboard marks you as a n00b: https://medium.com/medium-eng/the-curious-case-of-disappearing-polish-…

I wonder what he thinks of eg, https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40…

> "There are far, far, far too many advice articles on this site. It’s one thing to say ‘I lost my job and this is how it affected/changed me,’ that’s personal experience. But advice articles always contain the same implied subtext: you’re doing it wrong and I’m the genius who is going to show you how to do it the right way. Hence, how to fix your relationship, how to manage your spare time, ten things your boss does that you haven’t figured out, etc. etc." I've seen this attitude in so many different situations IRL and online. It's so refreshing to read it so clearly and fearlessly stated like that. It's unfortunate that Medium have attracted all the seagulls (https://www.youtube.com/watch?v=p-3e0EkvIEM), because they've done so much awesome technical work on the platform, for example with editing (https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40… How can platforms like Medium cultivate a culture that deprioritizes and devalues the types of spam content the article author is referring to? EDIT: Accidentally pasted the quote twice, fixed (thanks yxlx)

Looks like a nice entrant to the space. React is very well suited to this problem space and they clearly understand many of the pitfalls and problems. A few questions/concerns: 1. It doesn't look like the undo/redo state is global to the page. The built in undo/redo stack in browsers is global to the page so this is the expectation users will have. If you use multiple instances of Draft.js in your page they will each have their own stack, which is less than ideal. I realize having a singleton to manage this across all editor instances is more difficult in the React/Flux paradigm, but it would be much better from a user experience perspective. Related to this: 2. I don't think you can nest Draft.js instances. There are a number of simple cases where you might want to do this (e.g. custom block with image + caption). To support this in the future it seems you would need to account for it in the selection and undo/redo stack state handling. 3. The data format has a lot of repetition in how it stores inline styles[1]. I'm interested to know why they chose to represent the data this way instead of using indices. For instance, you can represent a inline bold style with a json object like so: {type: 'BOLD', startOffset: 5, endOffset: 10}. The format they chose to use is easier to render directly, but more difficult to parse visually and less space efficient (except in the case of styles that only cover a few characters). Finally, it seems most modern WYSIWYG editors mentioned…

(Biased React dev here.) The key insight in Draft.js is that it's incredibly difficult to keep your model in sync with the browser's contenteditable behavior unless you intercept many of the behaviors and perform them entirely in the model, then change the DOM accordingly. Medium found the same thing when building their editor: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40… In order to build high-quality text editors, you need to be in control of what's happening in the DOM. There's obviously many ways to control the DOM. React is a solid base for this, as are many other libraries. Facebook uses React extensively so it made sense to use as a base for Draft to avoid needing to essentially rewrite React and to make it even easier to integrate with existing React apps. Of course, you can also use Draft easily inside a non-React app. The entire Draft model is also separate code decoupled from the UI and you're free to use the model and implement the views yourself if you're allergic to React or aren't targeting the DOM. The Facebook Groups app uses Draft's model but implements custom views for it in React Native.