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?

Workflowy seems to require a user account to see it in action. — Tim Down, May 09 '12 at 08:34

score 27 · Accepted Answer · edited Jun 02 '16 at 15:10

27

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.

edited Jun 02 '16 at 15:10

Ulf Gjerdingen

1,414
3
16
20

answered May 09 '12 at 20:49

Jesse Patel

489
4
8

Hah, and I spent hours debugging it :) Thanks a lot! – fjdumont Mar 08 '13 at 14:22
contenteditable accepts formatting and HTML tags, so you're at the mercy of what gets pasted. – Dave Stewart Jan 28 '16 at 23:31

How does workflowy implemented inline editing?

1 Answers1