2023-09-25 20:04:53 +03:00
< html >
< head >
2023-09-29 02:47:07 +03:00
< link href = "editor.css" rel = "stylesheet" / >
2023-09-25 20:04:53 +03:00
< style >
2023-10-04 21:54:34 +03:00
.add-row {
height: 1.2em !important;
}
2023-09-25 20:04:53 +03:00
< / style >
2023-09-27 15:05:34 +03:00
< script src = "generic.js" > < / script >
< script src = "editor.js" > < / script >
2023-09-25 20:04:53 +03:00
< script >
2023-09-27 00:54:43 +03:00
2023-09-30 17:27:28 +03:00
var editor
2023-09-27 00:54:43 +03:00
var setup = function(){
2023-09-27 15:05:34 +03:00
window.editor = {
__proto__: Outline,
}.setup(
2023-09-30 17:27:28 +03:00
document.querySelector('.editor')) }
2023-09-25 20:04:53 +03:00
< / script >
< / head >
2023-09-27 00:54:43 +03:00
< body onload = "setup()" >
2023-09-25 20:04:53 +03:00
< div class = "editor" >
2023-10-03 16:12:19 +03:00
< div class = "outline" >
< div tabindex = 0 >
2023-10-06 17:53:28 +03:00
< textarea > < / textarea > < span > < i > root< / i > < / span >
2023-10-03 16:12:19 +03:00
< div tabindex = 0 collapsed >
2023-10-06 17:53:28 +03:00
< textarea > < / textarea > < span > A< / span >
< div tabindex = 0 > < textarea > < / textarea > < span > a< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > b< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > c< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-09-26 14:50:42 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > B< / span >
< div tabindex = 0 > < textarea > < / textarea > < span > d< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > e< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-09-25 20:04:53 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > C< / span >
< div tabindex = 0 > < textarea > < / textarea > < span > This is a line of text< / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-10-06 17:53:28 +03:00
< div tabindex = 0 > < textarea > < / textarea > < span > This is a set< br >
text lines< / span >
< / div >
< div tabindex = 0 > < textarea > < / textarea > < span > Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text < / span >
2023-10-03 16:12:19 +03:00
< / div >
2023-09-25 20:04:53 +03:00
< / div >
< / div >
< / div >
2023-10-04 21:54:34 +03:00
<!-- toolbar (optional) -->
2023-10-04 15:40:29 +03:00
< div class = "toolbar" >
2023-10-04 15:33:07 +03:00
< button onclick = "editor.deindent().focus()" > < < / button >
< button onclick = "editor.indent().focus()" > > < / button >
2023-10-04 21:54:34 +03:00
< button onclick = "editor.Block('before').focus()" class = "add-row" > +< / button >
< hr >
< button onclick = "editor.Block('after').focus()" class = "add-row" > +< / button >
2023-10-04 15:33:07 +03:00
< button onclick = "editor.toggleCollapse()?.focus()" > ˅ ˄ < / button >
2023-10-03 16:32:29 +03:00
< button onclick = "editor.remove()" > × < / button >
2023-10-03 16:12:19 +03:00
< / div >
2023-09-25 20:04:53 +03:00
< / div >
2023-09-27 14:08:30 +03:00
< hr >
< pre >
TODO:
2023-10-06 17:53:28 +03:00
- persistent empty first/last node (a button to create a new node)
- loading from DOM -- fill textarea
2023-10-04 15:33:07 +03:00
- Firefox compatibility -- remove ':has(..)'
- < s > focus management< / s >
- < s > mouse/touch controls< / s >
2023-09-27 14:08:30 +03:00
- < s > navigation< / s >
- < s > expand/collapse subtree< / s >
- < s > shift subtree up/down< / s >
- < s > create node< / s >
- < s > edit node< / s >
2023-10-04 21:54:34 +03:00
- shifting nodes up/down
- multiple node selection
2023-09-30 17:27:28 +03:00
- undo
- delete node
- indent/deindent
- edit node
2023-09-27 14:08:30 +03:00
- copy/paste nodes/trees
- < s > serialize< / s > /deserialize
2023-09-29 15:38:17 +03:00
- < s > add optional text styling to nodes< / s >
2023-09-27 14:08:30 +03:00
Controls:
up - focus node above
down - focus node below
left - focus parent node
right - focus first child node
tab - indent node
s-tab - deindent node
s-left - collapse node
s-right - expand node
enter - normal mode: edit node
- edit mode: create node below
esc - exit edit mode
< / pre >
2023-10-04 21:54:34 +03:00
2023-09-25 20:04:53 +03:00
< / body >
< / html >
<!-- vim:set ts=4 sw=4 : -->
