Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does workflowy implemented inline editing?

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?

like image 620
Aleksey Kulikov Avatar asked May 09 '12 05:05

Aleksey Kulikov


1 Answers

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.

like image 53
Jesse Patel Avatar answered Sep 27 '22 23:09

Jesse Patel