Javascript ul li editor.

Client side only - Javascript ul li editor.

I need to create a javascript component (can be in jquery) that allows one to create a multi-level html list (ul li).

the main concept is to have have the data in the dom in a ul li list.
click on an li item will change the text into a textarea.
exit from focus will save the content of the textarea into the li item.

1. The component should be tested on an empty html page.
2. At a time, only 1 of the elements is in edit mode (textarea 2 rows 30 cols).

The complicated part is:
3. The events (keys press) that should be attached to the textarea are:

Esc – exit edit mode from current element without changing the dom.

Enter – save the text to dom, exit edit mode from current element, reprint the dom, create (inject) new element at the correct position in edit mode.

Shift+Enter – should act as a normal enter inside the textarea.

Tab – only when cursor at the beginning, create new depth for that element in the list (limit 3 depth levels). Still in edit mode.

Shift+Tab – only when cursor at the beginning of line and the current element in focus is in depth level larger then 1, it should decrease the depth level for that current element. Still in edit mode.

Back-space –
- when the current element in focus is empty, it should exit edit mode for that element and remove that element from dom.
- When the current element in focus is not empty, but the cursor is at the very first position, it should copy the text, exit edit mode from current element, enter edit mode for the previous element and bind the copied text to the end of that previous element. The cursor should be at the end position of the previous element and beginning position of the binded text.

4. External buttons:
+ - add a new element at the very end of list.
GetArr – get the content text into array.


The budget is (negotiable) for a bug free component that works well on firefox, chrome, explorer, safari (big screens and mobiles)