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?

Amourpropre

Workflowy seems to require a user account to see it in action. – Himelman

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.

Cletacleti

Hah, and I spent hours debugging it :) Thanks a lot! – Seagirt

contenteditable accepts formatting and HTML tags, so you're at the mercy of what gets pasted. – Azotize