How does workflowy implemented inline editing?

Question

It's really great UI-feature that I can edit my lists on click without specific buttons. It looks like big wysiwyg editor with link and tags highlight. Which js technique are they use? Contenteditable for spying focus and then textarea for editing?

Answer 1

I am one of the two guys who builds WorkFlowy. When you move the mouse around the page, we have an opacity:0 text area that gets positioned over the text for the item you're hovering over at any moment. It has the exact same content and formatting as the underlying content.

When you click, it focuses the text area and we make it opacity:1, and the content it's mimicking opacity:0. Then when you type, we sync the content between the textarea and the target content. We will probably move to a completely invisible text area in the future, as that will enable rich text editing. That's what a lot of the html based IDEs do.