mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-31 11:00:08 +00:00
114 lines
3.3 KiB
HTML
Executable File
114 lines
3.3 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<link href="editor.css" rel="stylesheet"/>
|
|
<style>
|
|
|
|
.add-row {
|
|
height: 1.2em !important;
|
|
}
|
|
|
|
</style>
|
|
<script src="generic.js"></script>
|
|
<script src="editor.js"></script>
|
|
<script>
|
|
|
|
var editor
|
|
|
|
var setup = function(){
|
|
window.editor = {
|
|
__proto__: Outline,
|
|
}.setup(
|
|
document.querySelector('.editor')) }
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="setup()">
|
|
<div class="editor">
|
|
<div class="outline">
|
|
<div tabindex=0>
|
|
<textarea></textarea><span><i>root</i></span>
|
|
<div tabindex=0 collapsed>
|
|
<textarea></textarea><span>A</span>
|
|
<div tabindex=0><textarea></textarea><span>a</span>
|
|
</div>
|
|
<div tabindex=0><textarea></textarea><span>b</span>
|
|
</div>
|
|
<div tabindex=0><textarea></textarea><span>c</span>
|
|
</div>
|
|
</div>
|
|
<div tabindex=0><textarea></textarea><span>B</span>
|
|
<div tabindex=0><textarea></textarea><span>d</span>
|
|
</div>
|
|
<div tabindex=0><textarea></textarea><span>e</span>
|
|
</div>
|
|
</div>
|
|
<div tabindex=0><textarea></textarea><span>C</span>
|
|
<div tabindex=0><textarea></textarea><span>This is a line of text</span>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- toolbar (optional) -->
|
|
<div class="toolbar">
|
|
<button onclick="editor.deindent().focus()"><</button>
|
|
<button onclick="editor.indent().focus()">></button>
|
|
<button onclick="editor.Block('before').focus()" class="add-row">+</button>
|
|
<hr>
|
|
<button onclick="editor.Block('after').focus()" class="add-row">+</button>
|
|
<button onclick="editor.toggleCollapse()?.focus()">˅˄</button>
|
|
<button onclick="editor.remove()">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<pre>
|
|
TODO:
|
|
- caret
|
|
- <s>go to next/prev element's start/end when moving off last/first char</s>
|
|
- handle up/down on wrapped blocks
|
|
<i>...can't seem to get caret line in a non-hacky way</i>
|
|
- persistent empty first/last node (a button to create a new node)
|
|
- loading from DOM -- fill textarea
|
|
- Firefox compatibility -- remove ':has(..)'
|
|
- <s>focus management</s>
|
|
- <s>mouse/touch controls</s>
|
|
- <s>navigation</s>
|
|
- <s>expand/collapse subtree</s>
|
|
- <s>shift subtree up/down</s>
|
|
- <s>create node</s>
|
|
- <s>edit node</s>
|
|
- shifting nodes up/down
|
|
- multiple node selection
|
|
- undo
|
|
- delete node
|
|
- indent/deindent
|
|
- edit node
|
|
- copy/paste nodes/trees
|
|
- <s>serialize</s>/deserialize
|
|
- <s>add optional text styling to nodes</s>
|
|
|
|
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>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|