Hacker News Reader

Comment by hliyan | Hacker News Reader

Much of the heavy lifting is done by this simple but powerful attribute, something surprisingly few developers seem to know about. It's been around for quite a while.

    <div id="editor" contenteditable="true">

View on HN

This one line was like 90% of the original implementation of Writely (the startup that became Google Docs; source: I was one of the founders).

The other 90% was all the backend code we had to write to properly synchronize edits across different browsers, each with their own bizarre suite of bugs in their contenteditable implementations :-)

This is a truly a great insight from how simple things can create industry giants like google docs.

I believe that a lot of problems can be converted into synchronization problems in browsers.

Are there any general synchronization libraries / applications that you suggest within browser / outside browser?

Thanks in advance.

Not OP, but common solutions in this space represent the state as conflict-free replicated data types (CRDTs). Some popular browser-based libraries for that are Y.js[0] and Automerge[1].

[0]: https://yjs.dev/ [1]: https://automerge.org/

By the way, for those wanting to do this but in Rust, there is https://crates.io/crates/yrs and https://crates.io/crates/automerge

And Loro [1], relatively new player which recently hit 1.0, with solid performance and some features the others don’t have

[1]: https://loro.dev/

Amazing, thanks for the link

What features does Loro have that others lack?

I thought it was a dynamic text box souped up with all sorts of tricks and semantics to make it appear like a rich text editor

I'm not sure exactly what you mean by "dynamic text box" but it was just a contenteditable div. There have been at least two complete rewrites since I was involved, nowadays I believe it's a canvas with all of the editing, formatting, layout, and rendering done "by hand" in JavaScript.

The kind of text box used in php forums ... called text area I think, and this would be hidden every time the focus went away and an HTML based layout presented in its place. This seemed to be clunky but I thought that was what made writely possible. ContentEditable is such a breath of fresh air had I ever known about it. I wonder if IE6 supported that.

Yeah, it's pretty amazing. Back in 2016 I was still doing a lot of custom sites for small/mid businesses, and realized that almost all of this could be done with WP or something except (1) WP styling is really annoying and I don't want to maintain that, (2) I didn't want to rely on plugin functionality and upgrading WP, and (3) I wanted people with different levels of access to be able to edit different parts of the same page, which is basically impossible in most CMSs. So I basically wrote a CMS from scratch that relied on nothing but contenteditable and TinyMCE, and handed those tags to the appropriate portions (with back-end checks on what people could or could not edit before it was committed, obviously). But the point is, once a client (or their employees) are logged in, they get the right to edit the portions of their own pages that they have credentials for. The CMS puts a nice little dashed border around the parts they can edit, and all of their fonts and colors are saved in TinyMCE preferences so they don't need to hunt around or muck with any HTML (although they can, if they want to).

This ends up feeling rather magical to the clients, because they don't need to go to an editing page to make changes before seeing what it will look like. They just literally edit the content in place on the page, and hit save to deploy it live.

Most of these sites are still in operation after 5-10 years and require almost zero maintenance on my end.

In about 2009, the university I worked at adopted one of those enterprise CMS thingamajigs, but this one was called RedDot, and the central UX conceit was a red dot next to every piece of content, which transformed it into an edit control when clicked...

Under the hood it was about as shit as every other enterprise CMS of the era, but our users fucking loved it.

Ah, RedDot - that’s a throwback if I ever heard one!

Hah. Never heard of that, but I can see how it would be a total love-fest for users.

Most small site owners, such as remain these days - restuarants, small companies selling furniture, lawyers, whatever - they already have their third party sales platforms. They just want to be able to edit their own web content from time to time, without any learning curve.

I never tried to commercialize my CMS, it wouldn't even make sense to do so, since it's geared toward people who want to pay $200/year for hosting once their site is up and running. (I did charge them well for building, though). But the whole thing is maybe literally 5000 lines of PHP code and a few hundred lines of Javascript and CSS. It's just structured very cleverly to read/write pages in mysql, and it has a few bells and whistles like drag/drop photo uploading in place. Barely competent PHP coders could (and have) adapted it to their own needs after I left clients. One really doesn't need the bloated structure of WP to do this stuff, just a very skeletal frame.

A couple remaining examples of my CMS in action: https://thebarkerlounge.com https://vickmanassociates.com

I made a live demo of the concept a few weeks ago; it's such as simple but powerful hidden feature of HTML:

https://news.ycombinator.com/item?id=43179649

I love this. Once made a pdf editor by converting a doc to HTML then throwing in contenteditable="true" in the top-most div lol

I had the same bright idea, but it doesn't work Firefox.

Turns out that it creates two representations of the PDF content - one is text, which has 0 opacity and another is prerendered image of the same layered on top of it. The latter is what's displayed. So while you can enable contenteditable and get the editing cursor, no changes you make will be shown. Oh, well.

What do/did you use to convert pdf to html?

Reads like “oh, here’s this amazing thing, it’s called the wheel and the it’s been around for quite a while”. I’m pretty certain I’ve been working with this 20 years ago.

ContentEditable first introduced in ie 5.5 in 2000, available in all major browsers in 2007.

Reply on news.ycombinator.com